diff --git a/.agents/checks/playwright-e2e.md b/.agents/checks/playwright-e2e.md
new file mode 100644
index 0000000000..5594698f48
--- /dev/null
+++ b/.agents/checks/playwright-e2e.md
@@ -0,0 +1,74 @@
+---
+name: playwright-e2e
+description: Reviews Playwright E2E test code for ComfyUI-specific patterns, flakiness risks, and fixture misuse
+severity-default: medium
+tools: [Read, Grep]
+---
+
+You are reviewing Playwright E2E test code in `browser_tests/`. Focus on issues a **reviewer** would catch that an author might miss — flakiness risks, fixture misuse, test isolation problems, and convention violations.
+
+Reference docs (read if you need full context):
+
+- `browser_tests/README.md` — setup, patterns, screenshot workflow
+- `browser_tests/AGENTS.md` — directory structure, fixture overview
+- `docs/guidance/playwright.md` — type assertion rules, test tags, forbidden patterns
+- `.claude/skills/writing-playwright-tests/SKILL.md` — anti-patterns, retry patterns, Vue Nodes vs LiteGraph decision guide
+
+## Checks
+
+### Flakiness Risks (Major)
+
+1. **`waitForTimeout` usage** — Always wrong. Must use retrying assertions (`toBeVisible`, `toHaveText`), `expect.poll()`, or `expect().toPass()`. See retry patterns in `.claude/skills/writing-playwright-tests/SKILL.md`.
+
+2. **Missing `nextFrame()` after canvas ops** — Any `drag`, `click` on canvas, `resizeNode`, `pan`, `zoom`, or programmatic graph mutation via `page.evaluate` that changes visual state needs `await comfyPage.nextFrame()` before assertions. `loadWorkflow()` does NOT need it. Prefer encapsulating `nextFrame()` calls inside Page Object methods so tests don't manage frame timing directly.
+
+3. **Keyboard actions without prior focus** — `page.keyboard.press()` without a preceding `comfyPage.canvas.click()` or element `.focus()` will silently send keys to nothing.
+
+4. **Coordinate-based interactions where node refs exist** — Raw `{ x, y }` clicks on canvas are fragile. If the test targets a node, use `comfyPage.nodeOps.getNodeRefById()` / `getNodeRefsByTitle()` / `getNodeRefsByType()` instead.
+
+5. **Shared mutable state between tests** — Variables declared outside `test()` blocks, `let` state mutated across tests, or tests depending on execution order. Each test must be independently runnable.
+
+6. **Missing cleanup of server-persisted state** — Settings changed via `comfyPage.settings.setSetting()` persist across tests. Must be reset in `afterEach` or at test start. Same for uploaded files or saved workflows. Prefer moving cleanup into [fixture options](https://playwright.dev/docs/test-fixtures#fixtures-options) so individual tests don't manage reset logic.
+
+7. **Double-click without `{ delay }` option** — `dblclick()` without `{ delay: 5 }` or similar can be too fast for the canvas event handler.
+
+### Fixture & API Misuse (Medium)
+
+8. **Reimplementing existing fixture helpers** — Before flagging, grep `browser_tests/fixtures/` for the functionality. Common missed helpers:
+   - `comfyPage.command.executeCommand()` for menu/command actions
+   - `comfyPage.workflow.loadWorkflow()` for loading test workflows
+   - `comfyPage.canvasOps.resetView()` for view reset
+   - `comfyPage.settings.setSetting()` for settings
+   - Component page objects in `browser_tests/fixtures/components/`
+
+9. **Building workflows programmatically when a JSON asset would work** — Complex `page.evaluate` chains to construct a graph should use a premade JSON workflow in `browser_tests/assets/` loaded via `comfyPage.workflow.loadWorkflow()`.
+
+10. **Selectors not using `TestIds`** — Hard-coded `data-testid` strings should reference `browser_tests/fixtures/selectors.ts` when a matching entry exists. Check `selectors.ts` before flagging.
+
+### Convention Violations (Minor)
+
+11. **Missing test tags** — Every `test.describe` should have `tag` with at least one of: `@smoke`, `@slow`, `@screenshot`, `@canvas`, `@node`, `@widget`, `@mobile`, `@2x`. See `.claude/skills/writing-playwright-tests/SKILL.md` for when to use each.
+
+12. **`as any` type assertions** — Forbidden in E2E tests. Use specific type assertions or test-local type helpers. See `docs/guidance/playwright.md` for acceptable patterns.
+
+13. **Screenshot tests without masking dynamic content** — Timestamps, version numbers, or other non-deterministic content in screenshots will cause flakes. Use `mask` option.
+
+14. **`test.describe` without `afterEach` cleanup when canvas state changes** — Tests that manipulate canvas view (drag, zoom, pan) should include `afterEach` with `comfyPage.canvasOps.resetView()`. Prefer moving canvas reset into the fixture so individual tests don't manage cleanup.
+
+15. **Debug helpers left in committed code** — `debugAddMarker`, `debugAttachScreenshot`, `debugShowCanvasOverlay`, `debugGetCanvasDataURL` are for local debugging only.
+
+### Test Design (Nitpick)
+
+16. **Screenshot-only assertions where functional assertions are possible** — Prefer `expect(await node.isPinned()).toBe(true)` over screenshot comparison when testing non-visual behavior.
+
+17. **Overly large test workflows** — Test should load the minimal workflow needed. If a test only needs one node, don't load the full default graph.
+
+18. **Vue Nodes / LiteGraph mismatch** — If testing Vue-rendered node UI (DOM widgets, CSS states), should use `comfyPage.vueNodes.*`. If testing canvas interactions/connections, should use `comfyPage.nodeOps.*`. Mixing both in one test is a smell.
+
+## Rules
+
+- Only review `.spec.ts` files and supporting code in `browser_tests/`
+- Do NOT flag patterns in fixture/helper code (`browser_tests/fixtures/`) — those are shared infrastructure with different rules
+- "Major" for flakiness risks (items 1-7), "medium" for fixture misuse (8-10), "minor" for convention violations (11-15), "nitpick" for test design (16-18)
+- When flagging missing fixture usage (item 8), confirm the helper exists by checking the fixture code — don't assume
+- Existing tests that predate conventions are acceptable to modify but not required to fix
diff --git a/.claude/settings.json b/.claude/settings.json
index ac5df3c1f3..2c7b88bf8d 100644
--- a/.claude/settings.json
+++ b/.claude/settings.json
@@ -1,9 +1,86 @@
 {
-  "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\\('', ''\\)\\)\")"
+  "hooks": {
+    "PreToolUse": [
+      {
+        "matcher": "Bash",
+        "hooks": [
+          {
+            "type": "command",
+            "if": "Bash(tsc *)",
+            "command": "echo 'Use `pnpm typecheck` instead of running tsc directly.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(vue-tsc *)",
+            "command": "echo 'Use `pnpm typecheck` instead of running vue-tsc directly.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(npx tsc *)",
+            "command": "echo 'Use `pnpm typecheck` instead of running tsc via npx.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(pnpx tsc *)",
+            "command": "echo 'Use `pnpm typecheck` instead of running tsc via pnpx.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(pnpm exec tsc *)",
+            "command": "echo 'Use `pnpm typecheck` instead of `pnpm exec tsc`.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(npx vitest *)",
+            "command": "echo 'Use `pnpm test:unit` (or `pnpm test:unit -- <path>`) instead of npx vitest.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(pnpx vitest *)",
+            "command": "echo 'Use `pnpm test:unit` (or `pnpm test:unit -- <path>`) instead of pnpx vitest.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(npx eslint *)",
+            "command": "echo 'Use `pnpm lint` or `pnpm lint:fix` instead of npx eslint.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(pnpx eslint *)",
+            "command": "echo 'Use `pnpm lint` or `pnpm lint:fix` instead of pnpx eslint.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(npx prettier *)",
+            "command": "echo 'This project uses oxfmt, not prettier. Use `pnpm format` or `pnpm format:check`.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(pnpx prettier *)",
+            "command": "echo 'This project uses oxfmt, not prettier. Use `pnpm format` or `pnpm format:check`.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(npx oxlint *)",
+            "command": "echo 'Use `pnpm oxlint` instead of npx oxlint.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(npx stylelint *)",
+            "command": "echo 'Use `pnpm stylelint` instead of npx stylelint.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(npx knip *)",
+            "command": "echo 'Use `pnpm knip` instead of npx knip.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(pnpx knip *)",
+            "command": "echo 'Use `pnpm knip` instead of pnpx knip.' >&2 && exit 2"
+          }
+        ]
+      }
     ]
   }
 }
diff --git a/.claude/skills/adding-deprecation-warnings/SKILL.md b/.claude/skills/adding-deprecation-warnings/SKILL.md
new file mode 100644
index 0000000000..c86addf1c8
--- /dev/null
+++ b/.claude/skills/adding-deprecation-warnings/SKILL.md
@@ -0,0 +1,84 @@
+---
+name: adding-deprecation-warnings
+description: 'Adds deprecation warnings for renamed or removed properties/APIs. Searches custom node ecosystem for usage, applies defineDeprecatedProperty helper, adds JSDoc. Triggers on: deprecate, deprecation warning, rename property, backward compatibility.'
+---
+
+# Adding Deprecation Warnings
+
+Adds backward-compatible deprecation warnings for renamed or removed
+properties using the `defineDeprecatedProperty` helper in
+`src/lib/litegraph/src/utils/feedback.ts`.
+
+## When to Use
+
+- A property or API has been renamed and custom nodes still use the old name
+- A property is being removed but needs a grace period
+- Backward compatibility must be preserved while nudging adoption
+
+## Steps
+
+### 1. Search the Custom Node Ecosystem
+
+Before implementing, assess impact by searching for usage of the
+deprecated property across ComfyUI custom nodes:
+
+```text
+Use the comfy_codesearch tool to search for the old property name.
+Search for both `widget.oldProp` and just `oldProp` to catch all patterns.
+```
+
+Document the usage patterns found (property access, truthiness checks,
+caching to local vars, style mutation, etc.) — these all must continue
+working.
+
+### 2. Apply the Deprecation
+
+Use `defineDeprecatedProperty` from `src/lib/litegraph/src/utils/feedback.ts`:
+
+```typescript
+import { defineDeprecatedProperty } from '@/lib/litegraph/src/utils/feedback'
+
+/** @deprecated Use {@link obj.newProp} instead. */
+defineDeprecatedProperty(
+  obj,
+  'oldProp',
+  'newProp',
+  'obj.oldProp is deprecated. Use obj.newProp instead.'
+)
+```
+
+### 3. Checklist
+
+- [ ] Ecosystem search completed — all usage patterns are compatible
+- [ ] `defineDeprecatedProperty` call added after the new property is assigned
+- [ ] JSDoc `@deprecated` tag added above the call for IDE support
+- [ ] Warning message names both old and new property clearly
+- [ ] `pnpm typecheck` passes
+- [ ] `pnpm lint` passes
+
+### 4. PR Comment
+
+Add a PR comment summarizing the ecosystem search results: which repos
+use the deprecated property, what access patterns were found, and
+confirmation that all patterns are compatible with the ODP getter/setter.
+
+## How `defineDeprecatedProperty` Works
+
+- Creates an `Object.defineProperty` getter/setter on the target object
+- Getter returns `this[currentKey]`, setter assigns `this[currentKey]`
+- Both log via `warnDeprecated`, which deduplicates (once per unique
+  message per session via a `Set`)
+- `enumerable: false` keeps the alias out of `Object.keys()` / `for...in`
+  / `JSON.stringify`
+- `configurable: true` allows further redefinition if needed
+
+## Edge Cases
+
+- **Truthiness checks** (`if (widget.oldProp)`) — works, getter fires
+- **Caching to local var** (`const el = widget.oldProp`) — works, warns
+  once then the cached ref is used directly
+- **Style/property mutation** (`widget.oldProp.style.color = 'red'`) —
+  works, getter returns the real object
+- **Serialization** (`JSON.stringify`) — `enumerable: false` excludes it
+- **Heavy access in loops** — `warnDeprecated` deduplicates, only warns
+  once per session regardless of call count
diff --git a/.claude/skills/backport-management/SKILL.md b/.claude/skills/backport-management/SKILL.md
index d2ad90c072..138eb98a84 100644
--- a/.claude/skills/backport-management/SKILL.md
+++ b/.claude/skills/backport-management/SKILL.md
@@ -11,10 +11,11 @@ Cherry-pick backport management for Comfy-Org/ComfyUI_frontend stable release br
 
 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`)
+3. **Human Review** — Present candidates in batches for interactive approval (see Interactive Approval Flow)
+4. **Plan** — Order by dependency (leaf fixes first), group into waves per branch
+5. **Execute** — Label-driven automation → worktree fallback for conflicts (`reference/execution.md`)
+6. **Verify** — After each wave, verify branch integrity before proceeding
+7. **Log & Report** — Generate session report (`reference/logging.md`)
 
 ## System Context
 
@@ -37,16 +38,29 @@ Cherry-pick backport management for Comfy-Org/ComfyUI_frontend stable release br
 
 **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 |
+| Branch prefix | Scope                          | Example                                           |
+| ------------- | ------------------------------ | ------------------------------------------------- |
+| `cloud/*`     | Cloud-hosted ComfyUI only      | Team workspaces, cloud queue, cloud-only login    |
+| `core/*`      | Local/self-hosted ComfyUI only | Core editor, local workflows, node system         |
+| Both          | Shared infrastructure          | App mode, Firebase auth (API nodes), payment URLs |
 
-**⚠️ 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:
+### What Goes Where
 
-- 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)
+**Both core + cloud:**
+
+- **App mode** PRs — app mode is NOT cloud-only
+- **Firebase auth** PRs — Firebase auth is on core for API nodes
+- **Payment redirect** PRs — payment infrastructure shared
+- **Bug fixes** touching shared components
+
+**Cloud-only (skip for core):**
+
+- Team workspaces
+- Cloud queue virtualization
+- Hide API key login
+- Cloud-specific UI behind cloud feature flags
+
+**⚠️ NEVER backport cloud-only PRs to `core/*` branches.** But do NOT assume "app mode" or "Firebase" = cloud-only. Check the actual files changed.
 
 ## ⚠️ Gotchas (Learn from Past Sessions)
 
@@ -67,6 +81,32 @@ The `pr-backport.yaml` action reports more conflicts than reality. `git cherry-p
 
 12 or 27 conflicting files can be trivial (snapshots, new files). **Categorize conflicts first**, then decide. See Conflict Triage below.
 
+### Accept-Theirs Can Produce Broken Hybrids
+
+When a PR **rewrites a component** (e.g., PrimeVue → Reka UI), the accept-theirs regex produces a broken mix of old and new code. The template may reference new APIs while the script still has old imports, or vice versa.
+
+**Detection:** Content conflicts with 4+ conflict markers in a single `.vue` file, especially when imports change between component libraries.
+
+**Fix:** Instead of accept-theirs regex, use `git show MERGE_SHA:path/to/file > path/to/file` to get the complete correct version from the merge commit on main. This bypasses the conflict entirely.
+
+### Cherry-Picks Can Reference Missing Dependencies
+
+When PR A on main depends on code introduced by PR B (which was merged before A), cherry-picking A brings in code that references B's additions. The cherry-pick succeeds but the branch is broken.
+
+**Common pattern:** Composables, component files, or type definitions introduced by an earlier PR and used by the cherry-picked PR.
+
+**Detection:** `pnpm typecheck` fails with "Cannot find module" or "is not defined" errors after cherry-pick.
+
+**Fix:** Use `git show MERGE_SHA:path/to/missing/file > path/to/missing/file` to bring the missing files from main. Always verify with typecheck.
+
+### Use `--no-verify` for Worktree Pushes
+
+Husky hooks fail in worktrees (can't find lint-staged config). Always use `git push --no-verify` and `git commit --no-verify` when working in `/tmp/` worktrees.
+
+### Automation Success Varies Wildly by Branch
+
+In the 2026-04-06 session: core/1.42 got 18/26 auto-PRs, cloud/1.42 got only 1/25. The cloud branch has more divergence. **Always plan for manual fallback** — don't assume automation will handle most PRs.
+
 ## Conflict Triage
 
 **Always categorize before deciding to skip. High conflict count ≠ hard conflicts.**
@@ -77,6 +117,8 @@ The `pr-backport.yaml` action reports more conflicts than reality. `git cherry-p
 | **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)                      |
+| **Component rewrites**       | 4+ markers in `.vue`, library change | Use `git show SHA:path > path` — do NOT accept-theirs           |
+| **Import-only conflicts**    | Only import lines differ             | Keep both imports if both used; remove unused after             |
 | **Add/add**                  | Both sides added same file           | Accept theirs, verify no logic conflict                         |
 | **Locale/JSON files**        | i18n key additions                   | Accept theirs, validate JSON after                              |
 
@@ -103,7 +145,7 @@ Skip these without discussion:
 - **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.
+- **Cloud-only PRs on core/\* branches** — Team workspaces, cloud queue, cloud-only login. (Note: app mode and Firebase auth are NOT cloud-only — see Branch Scope Rules)
 
 ## Wave Verification
 
@@ -122,6 +164,18 @@ git worktree remove /tmp/verify-TARGET --force
 
 If typecheck or tests fail, stop and investigate before continuing. A broken branch after wave N means all subsequent waves will compound the problem.
 
+### Fix PRs Are Normal
+
+Expect to create 1 fix PR per branch after verification. Common issues:
+
+1. **Component rewrite hybrids** — accept-theirs produced broken `.vue` files. Fix: overwrite with correct version from merge commit via `git show SHA:path > path`
+2. **Missing dependency files** — cherry-pick brought in code referencing composables/components not on the branch. Fix: add missing files from merge commit
+3. **Missing type properties** — cherry-picked code uses interface properties not yet on the branch (e.g., `key` on `ConfirmDialogOptions`). Fix: add the property to the interface
+4. **Unused imports** — conflict resolution kept imports that the branch doesn't use. Fix: remove unused imports
+5. **Wrong types from conflict resolution** — e.g., `{ top: number; right: number }` vs `{ top: number; left: number }`. Fix: match the return type of the actual function
+
+Create a fix PR on a branch from the target, verify typecheck passes, then merge with `--squash --admin`.
+
 ### Never Admin-Merge Without CI
 
 In a previous bulk session, all 69 backport PRs were merged with `gh pr merge --squash --admin`, bypassing required CI checks. This shipped 3 test failures to a release branch. **Lesson: `--admin` skips all branch protection, including required status checks.** Only use `--admin` after confirming CI has passed (e.g., `gh pr checks $PR` shows all green), or rely on auto-merge (`--auto --squash`) which waits for CI by design.
@@ -135,6 +189,43 @@ Large backport sessions (50+ PRs) are expensive and error-prone. Prefer continuo
 - Reserve session-style bulk backporting for catching up after gaps
 - When a release branch is created, immediately start the continuous process
 
+## Interactive Approval Flow
+
+After analysis, present ALL candidates (MUST, SHOULD, and borderline) to the human for interactive review before execution. Do not write a static decisions.md — collect approvals in conversation.
+
+### Batch Presentation
+
+Present PRs in batches of 5-10, grouped by theme (visual bugs, interaction bugs, cloud/auth, data correctness, etc.). Use this table format:
+
+```
+ #  | PR     | Title                                    | Target        | Rec  | Context
+----+--------+------------------------------------------+---------------+------+--------
+ 1  | #12345 | fix: broken thing                        | core+cloud/42 | Y    | Description here. Why it matters. Agent reasoning.
+ 2  | #12346 | fix: another issue                       | core/42       | N    | Only affects removed feature. Not on target branch.
+```
+
+Each row includes:
+
+- PR number and title
+- Target branches
+- Agent recommendation: `Rec: Y` or `Rec: N` with brief reasoning
+- 2-3 sentence context: what the PR does, why it matters (or doesn't)
+
+### Human Response Format
+
+- `Y` — approve for backport
+- `N` — skip
+- `?` — investigate (agent shows PR description, files changed, detailed take, then re-asks)
+- Any freeform question or comment triggers discussion before moving on
+- Bulk responses accepted (e.g. `1 Y, 2 Y, 3 N, 4 ?`)
+
+### Rules
+
+- ALL candidates are reviewed, not just MUST items
+- When human responds `?`, show the PR description, files changed, and agent's detailed analysis, then re-ask for their decision
+- When human asks a question about a PR, answer with context and recommendation, then wait for their decision
+- Do not proceed to execution until all batches are reviewed and every candidate has a Y or N
+
 ## Quick Reference
 
 ### Label-Driven Automation (default path)
@@ -150,13 +241,96 @@ gh api repos/Comfy-Org/ComfyUI_frontend/issues/$PR/labels \
 ```bash
 git worktree add /tmp/backport-$BRANCH origin/$BRANCH
 cd /tmp/backport-$BRANCH
+
+# For each PR:
+git fetch origin $BRANCH
 git checkout -b backport-$PR-to-$BRANCH origin/$BRANCH
 git cherry-pick -m 1 $MERGE_SHA
-# Resolve conflicts, push, create PR, merge
+# Resolve conflicts (see Conflict Triage)
+git push origin backport-$PR-to-$BRANCH --no-verify
+gh pr create --base $BRANCH --head backport-$PR-to-$BRANCH \
+  --title "[backport $BRANCH] $TITLE (#$PR)" \
+  --body "Backport of #$PR. [conflict notes]"
+gh pr merge $NEW_PR --squash --admin
+sleep 25
 ```
 
+### Efficient Batch: Test-Then-Resolve Pattern
+
+When many PRs need manual cherry-pick (e.g., cloud branches), test all first:
+
+```bash
+cd /tmp/backport-$BRANCH
+for pr in "${ORDER[@]}"; do
+  git checkout -b test-$pr origin/$BRANCH
+  if git cherry-pick -m 1 $SHA 2>/dev/null; then
+    echo "CLEAN: $pr"
+  else
+    echo "CONFLICT: $pr"
+    git cherry-pick --abort
+  fi
+  git checkout --detach HEAD
+  git branch -D test-$pr
+done
+```
+
+Then process clean PRs in a batch loop, conflicts individually.
+
 ### PR Title Convention
 
 ```
 [backport TARGET_BRANCH] Original Title (#ORIGINAL_PR)
 ```
+
+## Final Deliverables (Slack-Compatible)
+
+After execution completes, generate two files in `~/temp/backport-session/`. Both must be **Slack-compatible plain text** — no emojis, no markdown tables, no headers (`#`), no bold (`**`), no inline code. Use plain dashes, indentation, and line breaks only.
+
+### 1. Author Accountability Report
+
+File: `backport-author-accountability.md`
+
+Lists all backported PRs grouped by original author (via `gh pr view $PR --json author`). Surfaces who should be self-labeling.
+
+```
+Backport Session YYYY-MM-DD -- PRs that should have been labeled by authors
+
+- author-login
+    - #1234 fix: short title
+    - #5678 fix: another title
+- other-author
+    - #9012 fix: some other fix
+```
+
+Authors sorted alphabetically, 4-space indent for nested items.
+
+### 2. Slack Status Update
+
+File: `slack-status-update.md`
+
+A shareable summary of the session. Structure:
+
+```
+Backport session complete -- YYYY-MM-DD
+
+[1-sentence summary: N PRs backported to which branches. All pass typecheck.]
+
+Branches updated:
+- core/X.XX: N PRs + N fix PRs (N auto, N manual)
+- cloud/X.XX: N PRs + N fix PRs (N auto, N manual)
+- ...
+
+N total PRs created and merged (N backports + N fix PRs).
+
+Notable fixes included:
+- [category]: [list of fixes]
+- ...
+
+Conflict patterns encountered:
+- [pattern and how it was resolved]
+- ...
+
+N authors had PRs backported. See author accountability list for details.
+```
+
+No emojis, no tables, no bold, no headers. Plain text that pastes cleanly into Slack.
diff --git a/.claude/skills/backport-management/reference/analysis.md b/.claude/skills/backport-management/reference/analysis.md
index d62cd1c935..dd6a41b394 100644
--- a/.claude/skills/backport-management/reference/analysis.md
+++ b/.claude/skills/backport-management/reference/analysis.md
@@ -23,10 +23,10 @@ For SHOULD items with conflicts: if conflict resolution requires more than trivi
 
 **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                     |
+| Target branch | Skip if PR is...                                                                                                  |
+| ------------- | ----------------------------------------------------------------------------------------------------------------- |
+| `core/*`      | Cloud-only (team workspaces, cloud queue, cloud-only login). Note: app mode and Firebase auth are NOT cloud-only. |
+| `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.
 
@@ -61,8 +61,6 @@ done
 
 ## Human Review Checkpoint
 
-Present decisions.md before execution. Include:
+Use the Interactive Approval Flow (see SKILL.md) to review all candidates interactively. Do not write a static decisions.md for the human to edit — instead, present batches of 5-10 PRs with context and recommendations, and collect Y/N/? responses in conversation.
 
-1. All MUST/SHOULD/SKIP categorizations with rationale
-2. Questions for human (feature existence, scope, deps)
-3. Estimated effort per branch
+All candidates must be reviewed (MUST, SHOULD, and borderline items), not just a subset.
diff --git a/.claude/skills/backport-management/reference/execution.md b/.claude/skills/backport-management/reference/execution.md
index 44de5f66f0..2bc6f9f78a 100644
--- a/.claude/skills/backport-management/reference/execution.md
+++ b/.claude/skills/backport-management/reference/execution.md
@@ -73,14 +73,22 @@ for PR in ${CONFLICT_PRS[@]}; do
   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
+  # Categorize conflicts first: binary PNGs, modify/delete, content, add/add, component rewrites
   # See SKILL.md Conflict Triage table for resolution per type.
 
+  # For component rewrites (4+ markers in a .vue file, library migration):
+  # DO NOT use accept-theirs regex — it produces broken hybrids.
+  # Instead, use the complete file from the merge commit:
+  # git show $MERGE_SHA:path/to/file > path/to/file
+
+  # For simple content conflicts, accept theirs:
+  # python3 -c "import re; ..."
+
   # Resolve all conflicts, then:
   git add .
   GIT_EDITOR=true git cherry-pick --continue
 
-  git push origin backport-$PR-to-TARGET
+  git push origin backport-$PR-to-TARGET --no-verify
   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+$')
@@ -114,7 +122,30 @@ source ~/.nvm/nvm.sh && nvm use 24 && pnpm install && pnpm typecheck && pnpm tes
 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.
+If verification fails, **do not skip** — create a fix PR:
+
+```bash
+# Stay in the verify worktree
+git checkout -b fix-backport-TARGET origin/TARGET_BRANCH
+
+# Common fixes:
+# 1. Component rewrite hybrids: overwrite with merge commit version
+git show MERGE_SHA:path/to/Component.vue > path/to/Component.vue
+
+# 2. Missing dependency files
+git show MERGE_SHA:path/to/missing.ts > path/to/missing.ts
+
+# 3. Missing type properties: edit the interface
+# 4. Unused imports: delete the import lines
+
+git add -A
+git commit --no-verify -m "fix: resolve backport typecheck issues on TARGET"
+git push origin fix-backport-TARGET --no-verify
+gh pr create --base TARGET --head fix-backport-TARGET --title "fix: resolve backport typecheck issues on TARGET" --body "..."
+gh pr merge $PR --squash --admin
+```
+
+Do not proceed to the next branch until typecheck passes.
 
 ## Conflict Resolution Patterns
 
@@ -142,7 +173,35 @@ git rm $FILE
 git checkout --theirs $FILE && git add $FILE
 ```
 
-### 4. Locale Files
+### 4. Component Rewrites (DO NOT accept-theirs)
+
+When a PR completely rewrites a component (e.g., PrimeVue → Reka UI), accept-theirs produces
+a broken hybrid with mismatched template/script sections.
+
+```bash
+# Use the complete correct file from the merge commit instead:
+git show $MERGE_SHA:src/components/input/MultiSelect.vue > src/components/input/MultiSelect.vue
+git show $MERGE_SHA:src/components/input/SingleSelect.vue > src/components/input/SingleSelect.vue
+git add src/components/input/MultiSelect.vue src/components/input/SingleSelect.vue
+```
+
+**Detection:** 4+ conflict markers in a single `.vue` file, imports changing between component
+libraries (PrimeVue → Reka UI, etc.), template structure completely different on each side.
+
+### 5. Missing Dependencies After Cherry-Pick
+
+Cherry-picks can succeed but leave the branch broken because the PR's code on main
+references composables/components introduced by an earlier PR.
+
+```bash
+# Add the missing file from the merge commit:
+git show $MERGE_SHA:src/composables/queue/useJobDetailsHover.ts > src/composables/queue/useJobDetailsHover.ts
+git show $MERGE_SHA:src/components/builder/BuilderSaveDialogContent.vue > src/components/builder/BuilderSaveDialogContent.vue
+```
+
+**Detection:** `pnpm typecheck` fails with "Cannot find module" or "X is not defined" after cherry-pick succeeds cleanly.
+
+### 6. Locale Files
 
 Usually adding new i18n keys — accept theirs, validate JSON:
 
@@ -176,8 +235,14 @@ gh pr checks $PR --watch --fail-fast && gh pr merge $PR --squash --admin
 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 && pnpm test:unit` 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.
+11. **App mode and Firebase auth are NOT cloud-only** — they go to both core and cloud branches. Only team workspaces, cloud queue, and cloud-specific login are cloud-only.
 12. **Never admin-merge without CI** — `--admin` bypasses all branch protections including required status checks. A bulk session of 69 admin-merges shipped 3 test failures. Always wait for CI to pass first, or use `--auto --squash` which waits by design.
+13. **Accept-theirs regex breaks component rewrites** — when a PR migrates between component libraries (PrimeVue → Reka UI), the regex produces a broken hybrid. Use `git show SHA:path > path` to get the complete correct version instead.
+14. **Cherry-picks can silently bring in missing-dependency code** — if PR A references a composable introduced by PR B, cherry-picking A succeeds but typecheck fails. Always run typecheck after each wave and add missing files from the merge commit.
+15. **Fix PRs are expected** — plan for 1 fix PR per branch to resolve typecheck issues from conflict resolutions. This is normal, not a failure.
+16. **Use `--no-verify` in worktrees** — husky hooks fail in `/tmp/` worktrees. Always push/commit with `--no-verify`.
+17. **Automation success varies by branch** — core/1.42 got 18/26 auto-PRs (69%), cloud/1.42 got 1/25 (4%). Cloud branches diverge more. Plan for manual fallback.
+18. **Test-then-resolve pattern** — for branches with low automation success, run a dry-run loop to classify clean vs conflict PRs before processing. This is much faster than resolving conflicts serially.
 
 ## CI Failure Triage
 
diff --git a/.claude/skills/backport-management/reference/logging.md b/.claude/skills/backport-management/reference/logging.md
index 4c78ba4b16..77ef0aa1c8 100644
--- a/.claude/skills/backport-management/reference/logging.md
+++ b/.claude/skills/backport-management/reference/logging.md
@@ -2,26 +2,25 @@
 
 ## During Execution
 
-Maintain `execution-log.md` with per-branch tables:
+Maintain `execution-log.md` with per-branch tables (this is internal, markdown tables are fine here):
 
 ```markdown
-| PR#   | Title | CI Status                      | Status                            | Backport PR | Notes   |
-| ----- | ----- | ------------------------------ | --------------------------------- | ----------- | ------- |
-| #XXXX | Title | ✅ Pass / ❌ Fail / ⏳ Pending | ✅ Merged / ⏭️ Skip / ⏸️ Deferred | #YYYY       | Details |
+| PR#   | Title | Status | Backport PR | Notes   |
+| ----- | ----- | ------ | ----------- | ------- |
+| #XXXX | Title | merged | #YYYY       | Details |
 ```
 
 ## Wave Verification Log
 
-Track verification results per wave:
+Track verification results per wave within execution-log.md:
 
 ```markdown
-## Wave N Verification — TARGET_BRANCH
+Wave N Verification -- TARGET_BRANCH
 
 - PRs merged: #A, #B, #C
-- Typecheck: ✅ Pass / ❌ Fail
-- Unit tests: ✅ Pass / ❌ Fail
+- Typecheck: pass / fail
+- Fix PR: #YYYY (if needed)
 - Issues found: (if any)
-- Human review needed: (list any non-trivial conflict resolutions)
 ```
 
 ## Session Report Template
@@ -63,40 +62,42 @@ Track verification results per wave:
 - Feature branches that need tracking for future sessions?
 ```
 
-## Final Deliverable: Visual Summary
+## Final Deliverables
 
-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.
+After all branches are complete and verified, generate these files in `~/temp/backport-session/`:
 
-```mermaid
-graph TD
-    subgraph branch1["☁️ cloud/X.XX — N PRs"]
-        C1["#XXXX title"]
-        C2["#XXXX title"]
-    end
+### 1. execution-log.md (internal)
 
-    subgraph branch2must["🔴 core/X.XX MUST — N PRs"]
-        M1["#XXXX title"]
-    end
+Per-branch tables with PR#, title, status, backport PR#, notes. Markdown tables are fine — this is for internal tracking, not Slack.
 
-    subgraph branch2should["🟡 core/X.XX SHOULD — N PRs"]
-        S1["#XXXX-#XXXX N auto-merged"]
-        S2["#XXXX-#XXXX N manual picks"]
-    end
+### 2. backport-author-accountability.md (Slack-compatible)
 
-    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
-```
+See SKILL.md "Final Deliverables" section. Plain text, no emojis/tables/headers/bold. Authors sorted alphabetically with PRs nested under each.
 
-Use the `mermaid` tool to render this diagram and present it alongside the summary table as the session's final deliverable.
+### 3. slack-status-update.md (Slack-compatible)
+
+See SKILL.md "Final Deliverables" section. Plain text summary that pastes cleanly into Slack. Includes branch counts, notable fixes, conflict patterns, author count.
+
+## Slack Formatting Rules
+
+Both shareable files (author accountability + status update) must follow these rules:
+
+- No emojis (no checkmarks, no arrows, no icons)
+- No markdown tables (use plain lists with dashes)
+- No headers (no # or ##)
+- No bold (\*_) or italic (_)
+- No inline code backticks
+- Use -- instead of em dash
+- Use plain dashes (-) for lists with 4-space indent for nesting
+- Line breaks between sections for readability
+
+These files should paste directly into a Slack message and look clean.
 
 ## 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/`:
 
-All in `~/temp/backport-session/`.
+- `execution-plan.md` -- approved PRs with merge SHAs (input)
+- `execution-log.md` -- real-time status with per-branch tables (internal)
+- `backport-author-accountability.md` -- PRs grouped by author (Slack-compatible)
+- `slack-status-update.md` -- session summary (Slack-compatible)
diff --git a/.claude/skills/hardening-flaky-e2e-tests/SKILL.md b/.claude/skills/hardening-flaky-e2e-tests/SKILL.md
new file mode 100644
index 0000000000..d45a6f18fc
--- /dev/null
+++ b/.claude/skills/hardening-flaky-e2e-tests/SKILL.md
@@ -0,0 +1,246 @@
+---
+name: hardening-flaky-e2e-tests
+description: 'Diagnoses and fixes flaky Playwright e2e tests by replacing race-prone patterns with retry-safe alternatives. Use when triaging CI flakes, hardening spec files, fixing timing races, or asked to stabilize browser tests. Triggers on: flaky, flake, harden, stabilize, race condition in e2e, intermittent failure.'
+---
+
+# Hardening Flaky E2E Tests
+
+Fix flaky Playwright specs by identifying race-prone patterns and replacing them with retry-safe alternatives. This skill covers diagnosis, pattern matching, and mechanical transforms — not writing new tests (see `writing-playwright-tests` for that).
+
+## Workflow
+
+### 1. Gather CI Evidence
+
+```bash
+gh run list --workflow=ci-test.yaml --limit=5
+gh run download <run-id> -n playwright-report
+```
+
+- Open `report.json` and search for `"status": "flaky"` entries.
+- Collect file paths, test titles, and error messages.
+- Do NOT trust green checks alone — flaky tests that passed on retry still need fixing.
+- Use `error-context.md`, traces, and page snapshots before editing code.
+- Pull the newest run after each push instead of assuming the flaky set is unchanged.
+
+### 2. Classify the Flake
+
+Read the failing assertion and match it against the pattern table. Most flakes fall into one of these categories:
+
+| #   | Pattern                               | Signature in Code                                         | Fix                                                              |
+| --- | ------------------------------------- | --------------------------------------------------------- | ---------------------------------------------------------------- |
+| 1   | **Snapshot-then-assert**              | `expect(await evaluate()).toBe(x)`                        | `await expect.poll(() => evaluate()).toBe(x)`                    |
+| 2   | **Immediate count**                   | `const n = await loc.count(); expect(n).toBe(3)`          | `await expect(loc).toHaveCount(3)`                               |
+| 3   | **nextFrame after menu click**        | `clickMenuItem(x); nextFrame()`                           | `clickMenuItem(x); contextMenu.waitForHidden()`                  |
+| 4   | **Tight poll timeout**                | `expect.poll(..., { timeout: 250 })`                      | ≥2000 ms; prefer default 5000 ms                                 |
+| 5   | **Immediate evaluate after mutation** | `setSetting(k, v); expect(await evaluate()).toBe(x)`      | `await expect.poll(() => evaluate()).toBe(x)`                    |
+| 6   | **Screenshot without readiness**      | `loadWorkflow(); nextFrame(); toHaveScreenshot()`         | `waitForNodes()` or poll state first                             |
+| 7   | **Non-deterministic node order**      | `getNodeRefsByType('X')[0]` with >1 match                 | `getNodeRefById(id)` or guard `toHaveLength(1)`                  |
+| 8   | **Fake readiness helper**             | Helper clicks but doesn't assert state                    | Remove; poll the actual value                                    |
+| 9   | **Immediate graph state after drop**  | `expect(await getLinkCount()).toBe(1)`                    | `await expect.poll(() => getLinkCount()).toBe(1)`                |
+| 10  | **Immediate boundingBox/layout read** | `const box = await loc.boundingBox(); expect(box!.width)` | `await expect.poll(() => loc.boundingBox().then(b => b?.width))` |
+
+### 3. Apply the Transform
+
+#### Rule: Choose the Smallest Correct Assertion
+
+- **Locator state** → use built-in retrying assertions: `toBeVisible()`, `toHaveText()`, `toHaveCount()`, `toHaveClass()`
+- **Single async value** → `expect.poll(() => asyncFn()).toBe(expected)`
+- **Multiple assertions that must settle together** → `expect(async () => { ... }).toPass()`
+- **Never** use `waitForTimeout()` to hide a race.
+
+```typescript
+// ✅ Single value — use expect.poll
+await expect
+  .poll(() => comfyPage.page.evaluate(() => window.app!.graph.links.length))
+  .toBe(3)
+
+// ✅ Locator count — use toHaveCount
+await expect(comfyPage.page.locator('.dom-widget')).toHaveCount(2)
+
+// ✅ Multiple conditions — use toPass
+await expect(async () => {
+  expect(await node1.getValue()).toBe('foo')
+  expect(await node2.getValue()).toBe('bar')
+}).toPass({ timeout: 5000 })
+```
+
+#### Rule: Wait for the Real Readiness Boundary
+
+Visible is not always ready. Prefer user-facing assertions when possible; poll internal state only when there is no UI surface to assert on.
+
+Common readiness boundaries:
+
+| After this action...                   | Wait for...                                                  |
+| -------------------------------------- | ------------------------------------------------------------ |
+| Canvas interaction (drag, click node)  | `await comfyPage.nextFrame()`                                |
+| Menu item click                        | `await contextMenu.waitForHidden()`                          |
+| Workflow load                          | `await comfyPage.workflow.loadWorkflow(...)` (built-in wait) |
+| Settings write                         | Poll the setting value with `expect.poll()`                  |
+| Node pin/bypass/collapse toggle        | `await expect.poll(() => nodeRef.isPinned()).toBe(true)`     |
+| Graph mutation (add/remove node, link) | Poll link/node count                                         |
+| Clipboard write                        | Poll pasted value                                            |
+| Screenshot                             | Ensure nodes are rendered: `waitForNodes()` or poll state    |
+
+#### Rule: Expose Locators for Retrying Assertions
+
+When a helper returns a count via `await loc.count()`, callers can't use `toHaveCount()`. Expose the underlying `Locator` as a getter so callers choose between:
+
+```typescript
+// Helper exposes locator
+get domWidgets(): Locator {
+  return this.page.locator('.dom-widget')
+}
+
+// Caller uses retrying assertion
+await expect(comfyPage.domWidgets).toHaveCount(2)
+```
+
+Replace count methods with locator getters so callers can use retrying assertions directly.
+
+#### Rule: Fix Check-then-Act Races in Helpers
+
+```typescript
+// ❌ Race: count can change between check and waitFor
+const count = await locator.count()
+if (count > 0) {
+  await locator.waitFor({ state: 'hidden' })
+}
+
+// ✅ Direct: waitFor handles both cases
+await locator.waitFor({ state: 'hidden' })
+```
+
+#### Rule: Remove force:true from Clicks
+
+`force: true` bypasses actionability checks, hiding real animation/visibility races. Remove it and fix the underlying timing issue.
+
+```typescript
+// ❌ Hides the race
+await closeButton.click({ force: true })
+
+// ✅ Surfaces the real issue — fix with proper wait
+await closeButton.click()
+await dialog.waitForHidden()
+```
+
+#### Rule: Handle Non-deterministic Element Order
+
+When `getNodeRefsByType` returns multiple nodes, the order is not guaranteed. Don't use index `[0]` blindly.
+
+```typescript
+// ❌ Assumes order
+const node = (await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode'))[0]
+
+// ✅ Find by ID or proximity
+const nodes = await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
+let target = nodes[0]
+for (const n of nodes) {
+  const pos = await n.getPosition()
+  if (Math.abs(pos.y - expectedY) < minDist) target = n
+}
+```
+
+Or guard the assumption:
+
+```typescript
+const nodes = await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
+expect(nodes).toHaveLength(1)
+const node = nodes[0]
+```
+
+#### Rule: Use toPass for Timing-sensitive Dismiss Guards
+
+Some UI elements (e.g. LiteGraph's graphdialog) have built-in dismiss delays. Retry the entire dismiss action:
+
+```typescript
+// ✅ Retry click+assert together
+await expect(async () => {
+  await comfyPage.canvas.click({ position: { x: 10, y: 10 } })
+  await expect(dialog).toBeHidden({ timeout: 500 })
+}).toPass({ timeout: 5000 })
+```
+
+### 4. Keep Changes Narrow
+
+- Shared helpers should drive setup to a stable boundary.
+- Do not encode one-spec timing assumptions into generic helpers.
+- If a race only matters to one spec, prefer a local wait in that spec.
+- If a helper fails before the real test begins, remove or relax the brittle precondition and let downstream UI interaction prove readiness.
+
+### 5. Verify Narrowly
+
+```bash
+# Targeted rerun with repetition
+pnpm test:browser:local -- browser_tests/tests/myFile.spec.ts --repeat-each 10
+
+# Single test by line number (avoids grep quoting issues on Windows)
+pnpm test:browser:local -- browser_tests/tests/myFile.spec.ts:42
+```
+
+- Use `--repeat-each 10` for targeted flake verification (use 20 for single test cases).
+- Verify with the smallest command that exercises the flaky path.
+
+### 6. Watch CI E2E Runs
+
+After pushing, use `gh` to monitor the E2E workflow:
+
+```bash
+# Find the run for the current branch
+gh run list --workflow="CI: Tests E2E" --branch=$(git branch --show-current) --limit=1
+
+# Watch it live (blocks until complete, streams logs)
+gh run watch <run-id>
+
+# One-liner: find and watch the latest E2E run for the current branch
+gh run list --workflow="CI: Tests E2E" --branch=$(git branch --show-current) --limit=1 --json databaseId --jq ".[0].databaseId" | xargs gh run watch
+```
+
+On Windows (PowerShell):
+
+```powershell
+# One-liner equivalent
+gh run watch (gh run list --workflow="CI: Tests E2E" --branch=$(git branch --show-current) --limit=1 --json databaseId --jq ".[0].databaseId")
+```
+
+After the run completes:
+
+```bash
+# Download the Playwright report artifact
+gh run download <run-id> -n playwright-report
+
+# View the run summary in browser
+gh run view <run-id> --web
+```
+
+Also watch the unit test workflow in parallel if you changed helpers:
+
+```bash
+gh run list --workflow="CI: Tests Unit" --branch=$(git branch --show-current) --limit=1
+```
+
+### 7. Pre-merge Checklist
+
+Before merging a flaky-test fix, confirm:
+
+- [ ] The latest CI artifact was inspected directly
+- [ ] The root cause is stated as a race or readiness mismatch
+- [ ] The fix waits on the real readiness boundary
+- [ ] The assertion primitive matches the job (poll vs toHaveCount vs toPass)
+- [ ] The fix stays local unless a shared helper truly owns the race
+- [ ] Local verification uses a targeted rerun
+- [ ] No behavioral changes to the test — only timing/retry strategy updated
+
+## Local Noise — Do Not Fix
+
+These are local distractions, not CI root causes:
+
+- Missing local input fixture files required by the test path
+- Missing local models directory
+- Teardown `EPERM` while restoring the local browser-test user data directory
+- Local screenshot baseline differences on Windows
+
+Rules:
+
+- First confirm whether it blocks the exact flaky path under investigation.
+- Do not commit temporary local assets used only for verification.
+- Do not commit local screenshot baselines.
diff --git a/.claude/skills/ticket-intake/SKILL.md b/.claude/skills/ticket-intake/SKILL.md
deleted file mode 100644
index f01c7f763d..0000000000
--- a/.claude/skills/ticket-intake/SKILL.md
+++ /dev/null
@@ -1,361 +0,0 @@
----
-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;
-}
-```
diff --git a/.claude/skills/ticket-intake/providers/github.md b/.claude/skills/ticket-intake/providers/github.md
deleted file mode 100644
index 7ebaf1082f..0000000000
--- a/.claude/skills/ticket-intake/providers/github.md
+++ /dev/null
@@ -1,194 +0,0 @@
-# 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
-```
diff --git a/.claude/skills/ticket-intake/providers/notion.md b/.claude/skills/ticket-intake/providers/notion.md
deleted file mode 100644
index 42153f9dfe..0000000000
--- a/.claude/skills/ticket-intake/providers/notion.md
+++ /dev/null
@@ -1,202 +0,0 @@
-# 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
-```
diff --git a/.claude/skills/ticket-intake/schema.md b/.claude/skills/ticket-intake/schema.md
deleted file mode 100644
index b82a798df1..0000000000
--- a/.claude/skills/ticket-intake/schema.md
+++ /dev/null
@@ -1,81 +0,0 @@
-# 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`
diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000000..4a7ea3036a
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.github/actions/find-workflow-run/action.yaml b/.github/actions/find-workflow-run/action.yaml
new file mode 100644
index 0000000000..bb18a56f98
--- /dev/null
+++ b/.github/actions/find-workflow-run/action.yaml
@@ -0,0 +1,65 @@
+name: Find Workflow Run
+description: Finds a workflow run for a given commit SHA and outputs its status and run ID.
+
+inputs:
+  workflow-id:
+    description: The workflow filename (e.g., 'ci-size-data.yaml')
+    required: true
+  head-sha:
+    description: The commit SHA to find runs for
+    required: true
+  not-found-status:
+    description: Status to output when no run exists
+    required: false
+    default: pending
+  token:
+    description: GitHub token for API access
+    required: true
+
+outputs:
+  status:
+    description: One of 'ready', 'pending', 'failed', or the not-found-status value
+    value: ${{ steps.find.outputs.status }}
+  run-id:
+    description: The workflow run ID (only set when status is 'ready')
+    value: ${{ steps.find.outputs.run-id }}
+
+runs:
+  using: composite
+  steps:
+    - name: Find workflow run
+      id: find
+      uses: actions/github-script@v8
+      env:
+        WORKFLOW_ID: ${{ inputs.workflow-id }}
+        HEAD_SHA: ${{ inputs.head-sha }}
+        NOT_FOUND_STATUS: ${{ inputs.not-found-status }}
+      with:
+        github-token: ${{ inputs.token }}
+        script: |
+          const { data: runs } = await github.rest.actions.listWorkflowRuns({
+            owner: context.repo.owner,
+            repo: context.repo.repo,
+            workflow_id: process.env.WORKFLOW_ID,
+            head_sha: process.env.HEAD_SHA,
+            per_page: 1,
+          });
+
+          const run = runs.workflow_runs[0];
+          if (!run) {
+            core.setOutput('status', process.env.NOT_FOUND_STATUS);
+            return;
+          }
+
+          if (run.status !== 'completed') {
+            core.setOutput('status', 'pending');
+            return;
+          }
+
+          if (run.conclusion !== 'success') {
+            core.setOutput('status', 'failed');
+            return;
+          }
+
+          core.setOutput('status', 'ready');
+          core.setOutput('run-id', String(run.id));
diff --git a/.github/actions/lint-format-verify/action.yml b/.github/actions/lint-format-verify/action.yml
new file mode 100644
index 0000000000..1142097123
--- /dev/null
+++ b/.github/actions/lint-format-verify/action.yml
@@ -0,0 +1,31 @@
+name: 'Lint and format verify'
+description: >
+  Runs the lint/format/knip verification suite plus a conditional
+  browser-tests typecheck. Shared by ci-lint-format.yaml (PR) and
+  ci-lint-format-queue.yaml (merge queue) so both paths run the exact
+  same checks. The caller is responsible for checkout and frontend setup
+  before invoking this action.
+
+runs:
+  using: composite
+  steps:
+    - name: Detect browser_tests changes
+      id: changed-paths
+      uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
+      with:
+        filters: |
+          browser_tests:
+            - 'browser_tests/**'
+
+    - name: Verify lint and format
+      shell: bash
+      run: |
+        pnpm lint
+        pnpm stylelint
+        pnpm format:check
+        pnpm knip
+
+    - name: Typecheck browser tests
+      if: steps.changed-paths.outputs.browser_tests == 'true'
+      shell: bash
+      run: pnpm typecheck:browser
diff --git a/.github/actions/setup-frontend/action.yaml b/.github/actions/setup-frontend/action.yaml
index 3e7e829ce7..44108182fd 100644
--- a/.github/actions/setup-frontend/action.yaml
+++ b/.github/actions/setup-frontend/action.yaml
@@ -13,8 +13,6 @@ runs:
     # Install pnpm, Node.js, build frontend
     - name: Install pnpm
       uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-      with:
-        version: 10
 
     - name: Setup Node.js
       uses: actions/setup-node@v6
diff --git a/.github/workflows/api-update-electron-api-types.yaml b/.github/workflows/api-update-electron-api-types.yaml
index b02d504674..befffc6f1d 100644
--- a/.github/workflows/api-update-electron-api-types.yaml
+++ b/.github/workflows/api-update-electron-api-types.yaml
@@ -17,8 +17,6 @@ jobs:
 
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v6
diff --git a/.github/workflows/api-update-manager-api-types.yaml b/.github/workflows/api-update-manager-api-types.yaml
index 26a8ba47f8..99a148fff7 100644
--- a/.github/workflows/api-update-manager-api-types.yaml
+++ b/.github/workflows/api-update-manager-api-types.yaml
@@ -22,8 +22,6 @@ jobs:
 
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v6
diff --git a/.github/workflows/api-update-registry-api-types.yaml b/.github/workflows/api-update-registry-api-types.yaml
deleted file mode 100644
index 1f84baf47e..0000000000
--- a/.github/workflows/api-update-registry-api-types.yaml
+++ /dev/null
@@ -1,109 +0,0 @@
-# Description: When upstream comfy-api is updated, click dispatch to update the TypeScript type definitions in this repo
-name: 'Api: Update Registry API Types'
-
-on:
-  # Manual trigger
-  workflow_dispatch:
-
-  # Triggered from comfy-api repo
-  repository_dispatch:
-    types: [comfy-api-updated]
-
-jobs:
-  update-registry-types:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-      pull-requests: write
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v6
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v6
-        with:
-          node-version-file: '.nvmrc'
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Checkout comfy-api repository
-        uses: actions/checkout@v6
-        with:
-          repository: Comfy-Org/comfy-api
-          path: comfy-api
-          token: ${{ secrets.COMFY_API_PAT }}
-          clean: true
-
-      - name: Get API commit information
-        id: api-info
-        run: |
-          cd comfy-api
-          API_COMMIT=$(git rev-parse --short HEAD)
-          echo "commit=${API_COMMIT}" >> $GITHUB_OUTPUT
-          cd ..
-
-      - name: Generate API types
-        run: |
-          echo "Generating TypeScript types from comfy-api@${{ steps.api-info.outputs.commit }}..."
-          mkdir -p ./packages/registry-types/src
-          pnpm dlx openapi-typescript ./comfy-api/openapi.yml --output ./packages/registry-types/src/comfyRegistryTypes.ts
-
-      - name: Validate generated types
-        run: |
-          if [ ! -f ./packages/registry-types/src/comfyRegistryTypes.ts ]; then
-            echo "Error: Types file was not generated."
-            exit 1
-          fi
-
-          # Check if file is not empty
-          if [ ! -s ./packages/registry-types/src/comfyRegistryTypes.ts ]; then
-            echo "Error: Generated types file is empty."
-            exit 1
-          fi
-
-      - name: Lint generated types
-        run: |
-          echo "Linting generated Comfy Registry API types..."
-          pnpm lint:fix:no-cache -- ./packages/registry-types/src/comfyRegistryTypes.ts
-
-      - name: Check for changes
-        id: check-changes
-        run: |
-          if [[ -z $(git status --porcelain ./packages/registry-types/src/comfyRegistryTypes.ts) ]]; then
-            echo "No changes to Comfy Registry API types detected."
-            echo "changed=false" >> $GITHUB_OUTPUT
-            exit 0
-          else
-            echo "Changes detected in Comfy Registry API types."
-            echo "changed=true" >> $GITHUB_OUTPUT
-          fi
-
-      - name: Create Pull Request
-        if: steps.check-changes.outputs.changed == 'true'
-        uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0 # v8.1.0
-        with:
-          token: ${{ secrets.PR_GH_TOKEN }}
-          commit-message: '[chore] Update Comfy Registry API types from comfy-api@${{ steps.api-info.outputs.commit }}'
-          title: '[chore] Update Comfy Registry API types from comfy-api@${{ steps.api-info.outputs.commit }}'
-          body: |
-            ## Automated API Type Update
-
-            This PR updates the Comfy Registry API types from the latest comfy-api OpenAPI specification.
-
-            - API commit: ${{ steps.api-info.outputs.commit }}
-            - Generated on: ${{ github.event.repository.updated_at }}
-
-            These types are automatically generated using openapi-typescript.
-          branch: update-registry-types-${{ steps.api-info.outputs.commit }}
-          base: main
-          labels: CNR
-          delete-branch: true
-          add-paths: |
-            packages/registry-types/src/comfyRegistryTypes.ts
diff --git a/.github/workflows/ci-dist-telemetry-scan.yaml b/.github/workflows/ci-dist-telemetry-scan.yaml
index 14f98434ee..1821efd95d 100644
--- a/.github/workflows/ci-dist-telemetry-scan.yaml
+++ b/.github/workflows/ci-dist-telemetry-scan.yaml
@@ -20,8 +20,6 @@ jobs:
 
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
 
       - name: Use Node.js
         uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
diff --git a/.github/workflows/ci-lint-format-queue.yaml b/.github/workflows/ci-lint-format-queue.yaml
new file mode 100644
index 0000000000..de064ca885
--- /dev/null
+++ b/.github/workflows/ci-lint-format-queue.yaml
@@ -0,0 +1,29 @@
+# Description: Lint and format verification for GitHub merge queue runs.
+# Paired with ci-lint-format.yaml — workflow name and job name must match
+# so branch protection resolves a single required check in both the
+# pull_request and merge_group contexts. This file runs verify-only steps
+# with a read-only token; auto-fix and PR comments live in the PR workflow.
+name: 'CI: Lint Format'
+
+on:
+  merge_group:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+jobs:
+  lint-and-format:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout merge group ref
+        uses: actions/checkout@v6
+
+      - name: Setup frontend
+        uses: ./.github/actions/setup-frontend
+
+      - name: Verify lint and format
+        uses: ./.github/actions/lint-format-verify
diff --git a/.github/workflows/ci-lint-format.yaml b/.github/workflows/ci-lint-format.yaml
index 157bd576d2..6205dbed8c 100644
--- a/.github/workflows/ci-lint-format.yaml
+++ b/.github/workflows/ci-lint-format.yaml
@@ -1,4 +1,7 @@
-# Description: Linting and code formatting validation for pull requests
+# Description: Linting and code formatting validation for pull requests.
+# Paired with ci-lint-format-queue.yaml - workflow name and job name must
+# match so branch protection resolves a single required check in both the
+# pull_request and merge_group contexts.
 name: 'CI: Lint Format'
 
 on:
@@ -26,14 +29,6 @@ jobs:
       - name: Setup frontend
         uses: ./.github/actions/setup-frontend
 
-      - name: Detect browser_tests changes
-        id: changed-paths
-        uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
-        with:
-          filters: |
-            browser_tests:
-              - 'browser_tests/**'
-
       - name: Run ESLint with auto-fix
         run: pnpm lint:fix
 
@@ -77,16 +72,8 @@ jobs:
           echo "See CONTRIBUTING.md for more details."
           exit 1
 
-      - name: Final validation
-        run: |
-          pnpm lint
-          pnpm stylelint
-          pnpm format:check
-          pnpm knip
-
-      - name: Typecheck browser tests
-        if: steps.changed-paths.outputs.browser_tests == 'true'
-        run: pnpm typecheck:browser
+      - name: Verify lint and format
+        uses: ./.github/actions/lint-format-verify
 
       - name: Comment on PR about auto-fix
         if: steps.verify-changed-files.outputs.changed == 'true' && github.event.pull_request.head.repo.full_name == github.repository
diff --git a/.github/workflows/ci-oss-assets-validation.yaml b/.github/workflows/ci-oss-assets-validation.yaml
index 5a41779294..a145ca04f1 100644
--- a/.github/workflows/ci-oss-assets-validation.yaml
+++ b/.github/workflows/ci-oss-assets-validation.yaml
@@ -21,8 +21,6 @@ jobs:
 
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
 
       - name: Use Node.js
         uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
@@ -76,8 +74,6 @@ jobs:
 
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
 
       - name: Use Node.js
         uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
@@ -99,7 +95,7 @@ jobs:
           if npx license-checker-rseidelsohn@4 \
             --production \
             --summary \
-            --excludePackages '@comfyorg/comfyui-frontend;@comfyorg/design-system;@comfyorg/registry-types;@comfyorg/shared-frontend-utils;@comfyorg/tailwind-utils;@comfyorg/comfyui-electron-types' \
+            --excludePackages '@comfyorg/comfyui-frontend;@comfyorg/design-system;@comfyorg/ingest-types;@comfyorg/registry-types;@comfyorg/shared-frontend-utils;@comfyorg/tailwind-utils;@comfyorg/comfyui-electron-types' \
             --clarificationsFile .github/license-clarifications.json \
             --onlyAllow 'MIT;MIT*;Apache-2.0;BSD-2-Clause;BSD-3-Clause;ISC;0BSD;BlueOak-1.0.0;Python-2.0;CC0-1.0;Unlicense;(MIT OR Apache-2.0);(MIT OR GPL-3.0);(Apache-2.0 OR MIT);(MPL-2.0 OR Apache-2.0);CC-BY-4.0;CC-BY-3.0;GPL-3.0-only'; then
             echo ''
diff --git a/.github/workflows/ci-tests-e2e-coverage.yaml b/.github/workflows/ci-tests-e2e-coverage.yaml
new file mode 100644
index 0000000000..8fdfe04279
--- /dev/null
+++ b/.github/workflows/ci-tests-e2e-coverage.yaml
@@ -0,0 +1,100 @@
+name: 'CI: E2E Coverage'
+
+on:
+  workflow_run:
+    workflows: ['CI: Tests E2E']
+    types:
+      - completed
+
+concurrency:
+  group: e2e-coverage-${{ github.event.workflow_run.head_sha }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+jobs:
+  merge:
+    if: >
+      github.repository == 'Comfy-Org/ComfyUI_frontend' &&
+      github.event.workflow_run.conclusion == 'success'
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+
+      - name: Setup frontend
+        uses: ./.github/actions/setup-frontend
+
+      - name: Download all shard coverage data
+        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
+        with:
+          run_id: ${{ github.event.workflow_run.id }}
+          name: e2e-coverage-shard-.*
+          name_is_regexp: true
+          path: temp/coverage-shards
+          if_no_artifact_found: warn
+
+      - name: Install lcov
+        run: sudo apt-get install -y -qq lcov
+
+      - name: Merge shard coverage into single LCOV
+        run: |
+          mkdir -p coverage/playwright
+          LCOV_FILES=$(find temp/coverage-shards -name 'coverage.lcov' -type f)
+          if [ -z "$LCOV_FILES" ]; then
+            echo "No coverage.lcov files found"
+            touch coverage/playwright/coverage.lcov
+            exit 0
+          fi
+          ADD_ARGS=""
+          for f in $LCOV_FILES; do ADD_ARGS="$ADD_ARGS -a $f"; done
+          lcov $ADD_ARGS -o coverage/playwright/coverage.lcov
+          wc -l coverage/playwright/coverage.lcov
+
+      - name: Validate merged coverage
+        run: |
+          SHARD_COUNT=$(find temp/coverage-shards -name 'coverage.lcov' -type f | wc -l | tr -d ' ')
+          if [ "$SHARD_COUNT" -eq 0 ]; then
+            echo "::error::No shard coverage.lcov files found under temp/coverage-shards"
+            exit 1
+          fi
+
+          MERGED_SF=$(grep -c '^SF:' coverage/playwright/coverage.lcov || echo 0)
+          MERGED_LH=$(awk -F: '/^LH:/{s+=$2}END{print s+0}' coverage/playwright/coverage.lcov)
+          MERGED_LF=$(awk -F: '/^LF:/{s+=$2}END{print s+0}' coverage/playwright/coverage.lcov)
+          echo "### Merged coverage" >> "$GITHUB_STEP_SUMMARY"
+          echo "- **$MERGED_SF** source files" >> "$GITHUB_STEP_SUMMARY"
+          echo "- **$MERGED_LH / $MERGED_LF** lines hit" >> "$GITHUB_STEP_SUMMARY"
+          echo "" >> "$GITHUB_STEP_SUMMARY"
+          echo "| Shard | Files | Lines Hit |" >> "$GITHUB_STEP_SUMMARY"
+          echo "|-------|-------|-----------|" >> "$GITHUB_STEP_SUMMARY"
+          for f in $(find temp/coverage-shards -name 'coverage.lcov' -type f | sort); do
+            SHARD=$(basename "$(dirname "$f")")
+            SHARD_SF=$(grep -c '^SF:' "$f" || echo 0)
+            SHARD_LH=$(awk -F: '/^LH:/{s+=$2}END{print s+0}' "$f")
+            echo "| $SHARD | $SHARD_SF | $SHARD_LH |" >> "$GITHUB_STEP_SUMMARY"
+            if [ "$MERGED_LH" -lt "$SHARD_LH" ]; then
+              echo "::error::Merged LH ($MERGED_LH) < shard LH ($SHARD_LH) in $SHARD — possible data loss"
+            fi
+          done
+
+      - name: Upload merged coverage data
+        if: always()
+        uses: actions/upload-artifact@v6
+        with:
+          name: e2e-coverage
+          path: coverage/playwright/
+          retention-days: 30
+          if-no-files-found: warn
+
+      - name: Upload E2E coverage to Codecov
+        if: always()
+        uses: codecov/codecov-action@1af58845a975a7985b0beb0cbe6fbbb71a41dbad # v5.5.3
+        with:
+          files: coverage/playwright/coverage.lcov
+          flags: e2e
+          token: ${{ secrets.CODECOV_TOKEN }}
+          fail_ci_if_error: false
diff --git a/.github/workflows/ci-tests-e2e.yaml b/.github/workflows/ci-tests-e2e.yaml
index 6994315fe4..59217f742c 100644
--- a/.github/workflows/ci-tests-e2e.yaml
+++ b/.github/workflows/ci-tests-e2e.yaml
@@ -8,6 +8,7 @@ on:
   pull_request:
     branches-ignore: [wip/*, draft/*, temp/*]
     paths-ignore: ['**/*.md']
+  merge_group:
   workflow_dispatch:
 
 concurrency:
@@ -33,6 +34,20 @@ jobs:
           path: dist/
           retention-days: 1
 
+      # Build cloud distribution for @cloud tagged tests
+      # NX_SKIP_NX_CACHE=true is required because `nx build` was already run
+      # for the OSS distribution above. Without skipping cache, Nx returns
+      # the cached OSS build since env vars aren't part of the cache key.
+      - name: Build cloud frontend
+        run: NX_SKIP_NX_CACHE=true pnpm build:cloud
+
+      - name: Upload cloud frontend
+        uses: actions/upload-artifact@v6
+        with:
+          name: frontend-dist-cloud
+          path: dist/
+          retention-days: 1
+
   # Sharded chromium tests
   playwright-tests-chromium-sharded:
     needs: setup
@@ -72,6 +87,7 @@ jobs:
         run: pnpm exec playwright test --project=chromium --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --reporter=blob
         env:
           PLAYWRIGHT_BLOB_OUTPUT_DIR: ./blob-report
+          COLLECT_COVERAGE: 'true'
 
       - name: Upload blob report
         uses: actions/upload-artifact@v6
@@ -81,6 +97,15 @@ jobs:
           path: blob-report/
           retention-days: 1
 
+      - name: Upload shard coverage data
+        if: always()
+        uses: actions/upload-artifact@v6
+        with:
+          name: e2e-coverage-shard-${{ matrix.shardIndex }}
+          path: coverage/playwright/
+          retention-days: 1
+          if-no-files-found: warn
+
   playwright-tests:
     # Ideally, each shard runs test in 6 minutes, but allow up to 15 minutes
     timeout-minutes: 15
@@ -97,14 +122,14 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        browser: [chromium-2x, chromium-0.5x, mobile-chrome]
+        browser: [chromium-2x, chromium-0.5x, mobile-chrome, cloud]
     steps:
       - name: Checkout repository
         uses: actions/checkout@v6
       - name: Download built frontend
         uses: actions/download-artifact@v7
         with:
-          name: frontend-dist
+          name: ${{ matrix.browser == 'cloud' && 'frontend-dist-cloud' || 'frontend-dist' }}
           path: dist/
 
       - name: Start ComfyUI server
diff --git a/.github/workflows/ci-tests-unit.yaml b/.github/workflows/ci-tests-unit.yaml
index 914030c7d8..3fc3095bd6 100644
--- a/.github/workflows/ci-tests-unit.yaml
+++ b/.github/workflows/ci-tests-unit.yaml
@@ -1,4 +1,4 @@
-# Description: Unit and component testing with Vitest
+# Description: Unit and component testing with Vitest + coverage reporting
 name: 'CI: Tests Unit'
 
 on:
@@ -8,6 +8,7 @@ on:
   pull_request:
     branches-ignore: [wip/*, draft/*, temp/*]
     paths-ignore: ['**/*.md']
+  merge_group:
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
@@ -23,5 +24,23 @@ jobs:
       - name: Setup frontend
         uses: ./.github/actions/setup-frontend
 
-      - name: Run Vitest tests
-        run: pnpm test:unit
+      - name: Run Vitest tests with coverage
+        run: pnpm test:coverage
+
+      - name: Upload unit coverage artifact
+        if: always() && github.event_name == 'push'
+        uses: actions/upload-artifact@v6
+        with:
+          name: unit-coverage
+          path: coverage/lcov.info
+          retention-days: 30
+          if-no-files-found: warn
+
+      - name: Upload coverage to Codecov
+        if: always()
+        uses: codecov/codecov-action@1af58845a975a7985b0beb0cbe6fbbb71a41dbad # v5.5.3
+        with:
+          files: coverage/lcov.info
+          flags: unit
+          token: ${{ secrets.CODECOV_TOKEN }}
+          fail_ci_if_error: false
diff --git a/.github/workflows/ci-website-build.yaml b/.github/workflows/ci-website-build.yaml
new file mode 100644
index 0000000000..832854c2eb
--- /dev/null
+++ b/.github/workflows/ci-website-build.yaml
@@ -0,0 +1,33 @@
+# Description: Build and validate the marketing website (apps/website)
+name: 'CI: Website Build'
+
+on:
+  push:
+    branches: [main, master, website/*]
+    paths:
+      - 'apps/website/**'
+      - 'packages/design-system/**'
+      - 'pnpm-lock.yaml'
+  pull_request:
+    branches-ignore: [wip/*, draft/*, temp/*]
+    paths:
+      - 'apps/website/**'
+      - 'packages/design-system/**'
+      - 'pnpm-lock.yaml'
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Setup frontend
+        uses: ./.github/actions/setup-frontend
+
+      - name: Build website
+        run: pnpm --filter @comfyorg/website build
diff --git a/.github/workflows/coverage-slack-notify.yaml b/.github/workflows/coverage-slack-notify.yaml
new file mode 100644
index 0000000000..7c9896bbc9
--- /dev/null
+++ b/.github/workflows/coverage-slack-notify.yaml
@@ -0,0 +1,149 @@
+name: 'Coverage: Slack Notification'
+
+on:
+  workflow_run:
+    workflows: ['CI: Tests Unit']
+    branches: [main]
+    types:
+      - completed
+
+permissions:
+  contents: read
+  actions: read
+  pull-requests: read
+
+jobs:
+  notify:
+    if: >
+      github.repository == 'Comfy-Org/ComfyUI_frontend' &&
+      github.event.workflow_run.conclusion == 'success' &&
+      github.event.workflow_run.event == 'push'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Setup frontend
+        uses: ./.github/actions/setup-frontend
+
+      - name: Download current unit coverage
+        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
+        with:
+          run_id: ${{ github.event.workflow_run.id }}
+          name: unit-coverage
+          path: coverage
+
+      - name: Download previous unit coverage baseline
+        continue-on-error: true
+        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
+        with:
+          branch: main
+          workflow: coverage-slack-notify.yaml
+          name: unit-coverage-baseline
+          path: temp/coverage-baseline
+          if_no_artifact_found: warn
+
+      - name: Download latest E2E coverage
+        continue-on-error: true
+        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
+        with:
+          branch: main
+          workflow: ci-tests-e2e-coverage.yaml
+          name: e2e-coverage
+          path: temp/e2e-coverage
+          if_no_artifact_found: warn
+
+      - name: Download previous E2E coverage baseline
+        continue-on-error: true
+        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
+        with:
+          branch: main
+          workflow: coverage-slack-notify.yaml
+          name: e2e-coverage-baseline
+          path: temp/e2e-coverage-baseline
+          if_no_artifact_found: warn
+
+      - name: Resolve merged PR metadata
+        id: pr-meta
+        uses: actions/github-script@v8
+        with:
+          script: |
+            const sha = context.payload.workflow_run.head_sha;
+            const { data: commit } = await github.rest.repos.getCommit({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              ref: sha,
+            });
+            const message = commit.commit.message ?? '';
+            const firstLine = message.split('\n')[0];
+            const match = firstLine.match(/\(#(\d+)\)\s*$/);
+            if (!match) {
+              core.setOutput('skip', 'true');
+              core.info('No PR number found in commit message — skipping.');
+              return;
+            }
+            const prNumber = match[1];
+            const { data: pr } = await github.rest.pulls.get({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              pull_number: Number(prNumber),
+            });
+            core.setOutput('skip', 'false');
+            core.setOutput('number', prNumber);
+            core.setOutput('url', pr.html_url);
+            core.setOutput('author', pr.user.login);
+
+      - name: Generate Slack notification
+        if: steps.pr-meta.outputs.skip != 'true'
+        id: slack-payload
+        env:
+          PR_URL: ${{ steps.pr-meta.outputs.url }}
+          PR_NUMBER: ${{ steps.pr-meta.outputs.number }}
+          PR_AUTHOR: ${{ steps.pr-meta.outputs.author }}
+        run: |
+          PAYLOAD=$(pnpm exec tsx scripts/coverage-slack-notify.ts \
+            --pr-url="$PR_URL" \
+            --pr-number="$PR_NUMBER" \
+            --author="$PR_AUTHOR")
+          if [ -n "$PAYLOAD" ]; then
+            echo "has_payload=true" >> "$GITHUB_OUTPUT"
+            DELIM="SLACK_PAYLOAD_$(date +%s)"
+            echo "payload<<$DELIM" >> "$GITHUB_OUTPUT"
+            printf '%s\n' "$PAYLOAD" >> "$GITHUB_OUTPUT"
+            echo "$DELIM" >> "$GITHUB_OUTPUT"
+          else
+            echo "has_payload=false" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Post to Slack
+        if: steps.slack-payload.outputs.has_payload == 'true'
+        continue-on-error: true
+        env:
+          SLACK_PAYLOAD: ${{ steps.slack-payload.outputs.payload }}
+          SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
+        run: |
+          # Channel: #p-deprecated-frontend-automated-testing
+          BODY=$(echo "$SLACK_PAYLOAD" | jq --arg ch "C0AP09LKRDZ" '. + {channel: $ch}')
+          curl -sf -X POST \
+            -H "Authorization: Bearer $SLACK_BOT_TOKEN" \
+            -H "Content-Type: application/json" \
+            -d "$BODY" \
+            -o /dev/null \
+            https://slack.com/api/chat.postMessage
+
+      - name: Save unit coverage baseline
+        if: always() && hashFiles('coverage/lcov.info') != ''
+        uses: actions/upload-artifact@v6
+        with:
+          name: unit-coverage-baseline
+          path: coverage/lcov.info
+          retention-days: 90
+          if-no-files-found: warn
+
+      - name: Save E2E coverage baseline
+        if: always() && hashFiles('temp/e2e-coverage/coverage.lcov') != ''
+        uses: actions/upload-artifact@v6
+        with:
+          name: e2e-coverage-baseline
+          path: temp/e2e-coverage/coverage.lcov
+          retention-days: 90
+          if-no-files-found: warn
diff --git a/.github/workflows/pr-claude-review.yaml b/.github/workflows/pr-claude-review.yaml
index c9cfd88b6a..df819b9226 100644
--- a/.github/workflows/pr-claude-review.yaml
+++ b/.github/workflows/pr-claude-review.yaml
@@ -30,8 +30,6 @@ jobs:
 
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v6
diff --git a/.github/workflows/pr-report.yaml b/.github/workflows/pr-report.yaml
index 1fecfdc567..839c61d7b8 100644
--- a/.github/workflows/pr-report.yaml
+++ b/.github/workflows/pr-report.yaml
@@ -2,7 +2,7 @@ name: 'PR: Unified Report'
 
 on:
   workflow_run:
-    workflows: ['CI: Size Data', 'CI: Performance Report']
+    workflows: ['CI: Size Data', 'CI: Performance Report', 'CI: E2E Coverage']
     types:
       - completed
 
@@ -67,73 +67,23 @@ jobs:
             core.setOutput('base', livePr.base.ref);
             core.setOutput('head-sha', livePr.head.sha);
 
-      - name: Find size workflow run for this commit
+      - name: Find size workflow run
         if: steps.pr-meta.outputs.skip != 'true'
         id: find-size
-        uses: actions/github-script@v8
+        uses: ./.github/actions/find-workflow-run
         with:
-          script: |
-            const headSha = '${{ steps.pr-meta.outputs.head-sha }}';
-            const { data: runs } = await github.rest.actions.listWorkflowRuns({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              workflow_id: 'ci-size-data.yaml',
-              head_sha: headSha,
-              per_page: 1,
-            });
+          workflow-id: ci-size-data.yaml
+          head-sha: ${{ steps.pr-meta.outputs.head-sha }}
+          token: ${{ secrets.GITHUB_TOKEN }}
 
-            const run = runs.workflow_runs[0];
-            if (!run) {
-              core.setOutput('status', 'pending');
-              return;
-            }
-
-            if (run.status !== 'completed') {
-              core.setOutput('status', 'pending');
-              return;
-            }
-
-            if (run.conclusion !== 'success') {
-              core.setOutput('status', 'failed');
-              return;
-            }
-
-            core.setOutput('status', 'ready');
-            core.setOutput('run-id', String(run.id));
-
-      - name: Find perf workflow run for this commit
+      - name: Find perf workflow run
         if: steps.pr-meta.outputs.skip != 'true'
         id: find-perf
-        uses: actions/github-script@v8
+        uses: ./.github/actions/find-workflow-run
         with:
-          script: |
-            const headSha = '${{ steps.pr-meta.outputs.head-sha }}';
-            const { data: runs } = await github.rest.actions.listWorkflowRuns({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              workflow_id: 'ci-perf-report.yaml',
-              head_sha: headSha,
-              per_page: 1,
-            });
-
-            const run = runs.workflow_runs[0];
-            if (!run) {
-              core.setOutput('status', 'pending');
-              return;
-            }
-
-            if (run.status !== 'completed') {
-              core.setOutput('status', 'pending');
-              return;
-            }
-
-            if (run.conclusion !== 'success') {
-              core.setOutput('status', 'failed');
-              return;
-            }
-
-            core.setOutput('status', 'ready');
-            core.setOutput('run-id', String(run.id));
+          workflow-id: ci-perf-report.yaml
+          head-sha: ${{ steps.pr-meta.outputs.head-sha }}
+          token: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Download size data (current)
         if: steps.pr-meta.outputs.skip != 'true' && steps.find-size.outputs.status == 'ready'
@@ -154,6 +104,25 @@ jobs:
           path: temp/size-prev
           if_no_artifact_found: warn
 
+      - name: Find coverage workflow run
+        if: steps.pr-meta.outputs.skip != 'true'
+        id: find-coverage
+        uses: ./.github/actions/find-workflow-run
+        with:
+          workflow-id: ci-tests-e2e-coverage.yaml
+          head-sha: ${{ steps.pr-meta.outputs.head-sha }}
+          not-found-status: skip
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Download coverage data
+        if: steps.pr-meta.outputs.skip != 'true' && steps.find-coverage.outputs.status == 'ready'
+        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
+        with:
+          name: e2e-coverage
+          run_id: ${{ steps.find-coverage.outputs.run-id }}
+          path: temp/coverage
+          if_no_artifact_found: warn
+
       - name: Download perf metrics (current)
         if: steps.pr-meta.outputs.skip != 'true' && steps.find-perf.outputs.status == 'ready'
         uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
@@ -189,9 +158,10 @@ jobs:
       - name: Generate unified report
         if: steps.pr-meta.outputs.skip != 'true'
         run: >
-          node scripts/unified-report.js
+          pnpm exec tsx scripts/unified-report.ts
           --size-status=${{ steps.find-size.outputs.status }}
           --perf-status=${{ steps.find-perf.outputs.status }}
+          --coverage-status=${{ steps.find-coverage.outputs.status }}
           > pr-report.md
 
       - name: Remove legacy separate comments
diff --git a/.github/workflows/publish-desktop-ui.yaml b/.github/workflows/publish-desktop-ui.yaml
index 80954351b7..cfa8cb21f7 100644
--- a/.github/workflows/publish-desktop-ui.yaml
+++ b/.github/workflows/publish-desktop-ui.yaml
@@ -85,8 +85,6 @@ jobs:
 
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v6
diff --git a/.github/workflows/release-biweekly-comfyui.yaml b/.github/workflows/release-biweekly-comfyui.yaml
index 7e8ec9140a..8c3f181fdb 100644
--- a/.github/workflows/release-biweekly-comfyui.yaml
+++ b/.github/workflows/release-biweekly-comfyui.yaml
@@ -1,14 +1,23 @@
-# Automated bi-weekly workflow to bump ComfyUI frontend RC releases
-name: 'Release: Bi-weekly ComfyUI'
+# Release workflow for ComfyUI frontend: version bump → PyPI publish → ComfyUI PR.
+# Runs on a bi-weekly schedule for minor releases, or manually for patch/hotfix releases.
+name: 'Release: ComfyUI'
 
 on:
-  # Schedule for Monday at 12:00 PM PST (20:00 UTC)
+  # Bi-weekly schedule: Monday at 20:00 UTC
   schedule:
     - cron: '0 20 * * 1'
 
-  # Allow manual triggering (bypasses bi-weekly check)
+  # Manual trigger for both on-demand minor and patch/hotfix releases
   workflow_dispatch:
     inputs:
+      release_type:
+        description: 'minor = next minor version (bi-weekly cadence), patch = hotfix for current production version'
+        required: true
+        default: 'minor'
+        type: choice
+        options:
+          - minor
+          - patch
       comfyui_fork:
         description: 'ComfyUI fork to use for PR (e.g., Comfy-Org/ComfyUI)'
         required: false
@@ -41,10 +50,11 @@ jobs:
 
       - name: Summary
         run: |
-          echo "## Bi-weekly Check" >> $GITHUB_STEP_SUMMARY
+          echo "## Release Check" >> $GITHUB_STEP_SUMMARY
           echo "" >> $GITHUB_STEP_SUMMARY
           echo "- Is release week: ${{ steps.check.outputs.is_release_week }}" >> $GITHUB_STEP_SUMMARY
           echo "- Manual trigger: ${{ github.event_name == 'workflow_dispatch' }}" >> $GITHUB_STEP_SUMMARY
+          echo "- Release type: ${{ inputs.release_type || 'minor (scheduled)' }}" >> $GITHUB_STEP_SUMMARY
 
   resolve-version:
     needs: check-release-week
@@ -77,7 +87,7 @@ jobs:
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
         with:
-          version: 10
+          package_json_file: frontend/package.json
 
       - name: Setup Node.js
         uses: actions/setup-node@v6
@@ -91,6 +101,8 @@ jobs:
       - name: Resolve release information
         id: resolve
         working-directory: frontend
+        env:
+          RELEASE_TYPE: ${{ inputs.release_type || 'minor' }}
         run: |
           set -euo pipefail
 
@@ -203,8 +215,6 @@ jobs:
 
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
 
       - uses: actions/setup-node@v6
         with:
diff --git a/.github/workflows/release-draft-create.yaml b/.github/workflows/release-draft-create.yaml
index 0ce163c3ba..e6a442e7c3 100644
--- a/.github/workflows/release-draft-create.yaml
+++ b/.github/workflows/release-draft-create.yaml
@@ -20,10 +20,10 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v6
+
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
+
       - uses: actions/setup-node@v6
         with:
           node-version-file: '.nvmrc'
diff --git a/.github/workflows/release-npm-types.yaml b/.github/workflows/release-npm-types.yaml
index 2895ef94c0..5c43f353c4 100644
--- a/.github/workflows/release-npm-types.yaml
+++ b/.github/workflows/release-npm-types.yaml
@@ -76,8 +76,6 @@ jobs:
 
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v6
diff --git a/.github/workflows/release-pypi-dev.yaml b/.github/workflows/release-pypi-dev.yaml
index a7bb820610..315e7566b1 100644
--- a/.github/workflows/release-pypi-dev.yaml
+++ b/.github/workflows/release-pypi-dev.yaml
@@ -16,10 +16,10 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v6
+
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
+
       - uses: actions/setup-node@v6
         with:
           node-version-file: '.nvmrc'
diff --git a/.github/workflows/release-version-bump.yaml b/.github/workflows/release-version-bump.yaml
index d9bbc74f1e..0b7fafb3c3 100644
--- a/.github/workflows/release-version-bump.yaml
+++ b/.github/workflows/release-version-bump.yaml
@@ -142,10 +142,22 @@ jobs:
           fi
           echo "✅ Branch '$BRANCH' exists"
 
+      - name: Ensure packageManager field exists
+        run: |
+          if ! grep -q '"packageManager"' package.json; then
+            # Old branches (e.g. core/1.42) predate the packageManager field.
+            # Inject it so pnpm/action-setup can resolve the version.
+            node -e "
+              const fs = require('fs');
+              const pkg = JSON.parse(fs.readFileSync('package.json','utf8'));
+              pkg.packageManager = 'pnpm@10.33.0';
+              fs.writeFileSync('package.json', JSON.stringify(pkg, null, 2) + '\n');
+            "
+            echo "Injected packageManager into package.json for legacy branch"
+          fi
+
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v6
diff --git a/.github/workflows/version-bump-desktop-ui.yaml b/.github/workflows/version-bump-desktop-ui.yaml
index f47fe9e776..fc20daa8b6 100644
--- a/.github/workflows/version-bump-desktop-ui.yaml
+++ b/.github/workflows/version-bump-desktop-ui.yaml
@@ -52,8 +52,6 @@ jobs:
 
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v6
diff --git a/.github/workflows/weekly-docs-check.yaml b/.github/workflows/weekly-docs-check.yaml
index 418923daab..8e1b4e72ad 100644
--- a/.github/workflows/weekly-docs-check.yaml
+++ b/.github/workflows/weekly-docs-check.yaml
@@ -30,8 +30,6 @@ jobs:
 
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v6
diff --git a/.oxlintrc.json b/.oxlintrc.json
index aa8a4c1ccd..19700f80c2 100644
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@@ -64,6 +64,7 @@
         ]
       }
     ],
+    "no-unsafe-optional-chaining": "error",
     "no-self-assign": "allow",
     "no-unused-expressions": "off",
     "no-unused-private-class-members": "off",
@@ -83,6 +84,7 @@
     "typescript/no-unsafe-declaration-merging": "off",
     "typescript/no-unused-vars": "off",
     "unicorn/no-empty-file": "off",
+    "vitest/require-mock-type-parameters": "off",
     "unicorn/no-new-array": "off",
     "unicorn/no-single-promise-in-promise-methods": "off",
     "unicorn/no-useless-fallback-in-spread": "off",
@@ -104,8 +106,7 @@
         "allowInterfaces": "always"
       }
     ],
-    "vue/no-import-compiler-macros": "error",
-    "vue/no-dupe-keys": "error"
+    "vue/no-import-compiler-macros": "error"
   },
   "overrides": [
     {
@@ -116,13 +117,60 @@
     },
     {
       "files": ["browser_tests/**/*.ts"],
+      "jsPlugins": ["eslint-plugin-playwright"],
       "rules": {
         "typescript/no-explicit-any": "error",
         "no-async-promise-executor": "error",
         "no-control-regex": "error",
         "no-useless-rename": "error",
         "no-unused-private-class-members": "error",
-        "unicorn/no-empty-file": "error"
+        "unicorn/no-empty-file": "error",
+        "playwright/consistent-spacing-between-blocks": "error",
+        "playwright/expect-expect": [
+          "error",
+          {
+            "assertFunctionNames": [
+              "recordMeasurement",
+              "logMeasurement",
+              "builderSaveAs"
+            ],
+            "assertFunctionPatterns": [
+              "^expect",
+              "^assert",
+              "^verify",
+              "^searchAndExpect",
+              "waitForOpen",
+              "waitForClosed",
+              "waitForRequest"
+            ]
+          }
+        ],
+        "playwright/max-nested-describe": "error",
+        "playwright/no-duplicate-hooks": "error",
+        "playwright/no-element-handle": "error",
+        "playwright/no-eval": "error",
+        "playwright/no-focused-test": "error",
+        "playwright/no-force-option": "error",
+        "playwright/no-networkidle": "error",
+        "playwright/no-page-pause": "error",
+        "playwright/no-skipped-test": "error",
+        "playwright/no-unsafe-references": "error",
+        "playwright/no-unused-locators": "error",
+        "playwright/no-useless-await": "error",
+        "playwright/no-useless-not": "error",
+        "playwright/no-wait-for-navigation": "error",
+        "playwright/no-wait-for-selector": "error",
+        "playwright/no-wait-for-timeout": "error",
+        "playwright/prefer-hooks-on-top": "error",
+        "playwright/prefer-locator": "error",
+        "playwright/prefer-to-have-count": "error",
+        "playwright/prefer-to-have-length": "error",
+        "playwright/prefer-web-first-assertions": "error",
+        "playwright/prefer-native-locators": "error",
+        "playwright/require-to-pass-timeout": "error",
+        "playwright/valid-expect": "error",
+        "playwright/valid-expect-in-promise": "error",
+        "playwright/valid-title": "error"
       }
     }
   ]
diff --git a/AGENTS.md b/AGENTS.md
index d692cf22fd..9463e5357d 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -179,6 +179,12 @@ This project uses **pnpm**. Always prefer scripts defined in `package.json` (e.g
 24. Do not use function expressions if it's possible to use function declarations instead
 25. Watch out for [Code Smells](https://wiki.c2.com/?CodeSmell) and refactor to avoid them
 
+## Design Standards
+
+Before implementing any user-facing feature, consult the [Comfy Design Standards](https://www.figma.com/design/QreIv5htUaSICNuO2VBHw0/Comfy-Design-Standards) Figma file. Use the Figma MCP to fetch it live — the file is the single source of truth and may be updated by designers at any time.
+
+See `docs/guidance/design-standards.md` for Figma file keys, section node IDs, and component references.
+
 ## Testing Guidelines
 
 See @docs/testing/\*.md for detailed patterns.
@@ -216,6 +222,7 @@ See @docs/testing/\*.md for detailed patterns.
 1. Follow the Best Practices described [in the Playwright documentation](https://playwright.dev/docs/best-practices)
 2. Do not use waitForTimeout, use Locator actions and [retrying assertions](https://playwright.dev/docs/test-assertions#auto-retrying-assertions)
 3. Tags like `@mobile`, `@2x` are respected by config and should be used for relevant tests
+4. Type all API mock responses in `route.fulfill()` using generated types or schemas from `packages/ingest-types`, `packages/registry-types`, `src/workbench/extensions/manager/types/generatedManagerTypes.ts`, or `src/schemas/` — see `docs/guidance/playwright.md` for the full source-of-truth table
 
 ## External Resources
 
@@ -225,6 +232,7 @@ See @docs/testing/\*.md for detailed patterns.
 - shadcn/vue: <https://www.shadcn-vue.com/>
 - Reka UI: <https://reka-ui.com/>
 - PrimeVue: <https://primevue.org>
+- Comfy Design Standards: <https://www.figma.com/design/QreIv5htUaSICNuO2VBHw0/Comfy-Design-Standards>
 - ComfyUI: <https://docs.comfy.org>
 - Electron: <https://www.electronjs.org/docs/latest/>
 - Wiki: <https://deepwiki.com/Comfy-Org/ComfyUI_frontend/1-overview>
@@ -310,6 +318,9 @@ When referencing Comfy-Org repos:
   - Find existing `!important` classes that are interfering with the styling and propose corrections of those instead.
 - NEVER use arbitrary percentage values like `w-[80%]` when a Tailwind fraction utility exists
   - Use `w-4/5` instead of `w-[80%]`, `w-1/2` instead of `w-[50%]`, etc.
+- NEVER use font-size classes (`text-xs`, `text-sm`, etc.) to size `icon-[...]` (iconify) icons
+  - Iconify icons size via `width`/`height: 1.2em`, so font-size produces unpredictable results
+  - Use `size-*` classes for explicit sizing, or set font-size on the **parent** container and let `1.2em` scale naturally
 
 ## Agent-only rules
 
diff --git a/CODEOWNERS b/CODEOWNERS
index 2fb3dc08e4..030e550a94 100644
--- a/CODEOWNERS
+++ b/CODEOWNERS
@@ -41,12 +41,49 @@
 /src/components/templates/                        @Myestery @christian-byrne @comfyui-wiki
 
 # Mask Editor
-/src/extensions/core/maskeditor.ts                @trsommer @brucew4yn3rp
-/src/extensions/core/maskEditorLayerFilenames.ts  @trsommer @brucew4yn3rp
+/src/extensions/core/maskeditor.ts                @trsommer @brucew4yn3rp @jtydhr88
+/src/extensions/core/maskEditorLayerFilenames.ts  @trsommer @brucew4yn3rp @jtydhr88
+/src/components/maskeditor/                       @trsommer @brucew4yn3rp @jtydhr88
+/src/composables/maskeditor/                      @trsommer @brucew4yn3rp @jtydhr88
+/src/stores/maskEditorStore.ts                    @trsommer @brucew4yn3rp @jtydhr88
+/src/stores/maskEditorDataStore.ts                @trsommer @brucew4yn3rp @jtydhr88
+
+# Image Crop
+/src/extensions/core/imageCrop.ts                 @jtydhr88
+/src/components/imagecrop/                        @jtydhr88
+/src/composables/useImageCrop.ts                  @jtydhr88
+/src/lib/litegraph/src/widgets/ImageCropWidget.ts @jtydhr88
+
+# Image Compare
+/src/extensions/core/imageCompare.ts              @jtydhr88
+/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue       @jtydhr88
+/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.test.ts   @jtydhr88
+/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.stories.ts @jtydhr88
+/src/renderer/extensions/vueNodes/widgets/composables/useImageCompareWidget.ts    @jtydhr88
+/src/lib/litegraph/src/widgets/ImageCompareWidget.ts @jtydhr88
+
+# Painter
+/src/extensions/core/painter.ts                   @jtydhr88
+/src/components/painter/                           @jtydhr88
+/src/composables/painter/                          @jtydhr88
+/src/renderer/extensions/vueNodes/widgets/composables/usePainterWidget.ts @jtydhr88
+/src/lib/litegraph/src/widgets/PainterWidget.ts   @jtydhr88
+
+# GLSL
+/src/renderer/glsl/                               @jtydhr88 @pythongosssss @christian-byrne
 
 # 3D
 /src/extensions/core/load3d.ts                    @jtydhr88
+/src/extensions/core/load3dLazy.ts                @jtydhr88
+/src/extensions/core/load3d/                      @jtydhr88
 /src/components/load3d/                           @jtydhr88
+/src/composables/useLoad3d.ts                     @jtydhr88
+/src/composables/useLoad3d.test.ts                @jtydhr88
+/src/composables/useLoad3dDrag.ts                 @jtydhr88
+/src/composables/useLoad3dDrag.test.ts            @jtydhr88
+/src/composables/useLoad3dViewer.ts               @jtydhr88
+/src/composables/useLoad3dViewer.test.ts          @jtydhr88
+/src/services/load3dService.ts                    @jtydhr88
 
 # Manager
 /src/workbench/extensions/manager/                @viva-jinyi @christian-byrne @ltdrdata
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index ef7b920948..2bfa098f65 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -62,6 +62,37 @@ python main.py --port 8188 --cpu
 - Run `pnpm dev:electron` to start the dev server with electron API mocked
 - Run `pnpm dev:cloud` to start the dev server against the cloud backend (instead of local ComfyUI server)
 
+#### Testing with Cloud & Staging Environments
+
+Some features — particularly **partner/API nodes** (e.g. BFL, OpenAI, Stability AI) — require a cloud backend for authentication and billing. Running these against a local ComfyUI instance will result in permission errors or logged-out states. There are two ways to connect to a cloud/staging backend:
+
+**Option 1: Frontend — `pnpm dev:cloud`**
+
+The simplest approach. This proxies all API requests to the test cloud environment:
+
+```bash
+pnpm dev:cloud
+```
+
+This sets `DEV_SERVER_COMFYUI_URL` to `https://testcloud.comfy.org/` automatically. You can also set this variable manually in your `.env` file to target a different environment:
+
+```bash
+# .env
+DEV_SERVER_COMFYUI_URL=https://stagingcloud.comfy.org/
+```
+
+Any `*.comfy.org` URL automatically enables cloud mode, which includes the GCS media proxy needed for viewing generated images and videos. See [.env_example](.env_example) for all available cloud URLs.
+
+**Option 2: Backend — `--comfy-api-base`**
+
+Alternatively, launch the ComfyUI backend pointed at the staging API:
+
+```bash
+python main.py --comfy-api-base https://stagingapi.comfy.org --verbose
+```
+
+Then run `pnpm dev` as usual. This keeps the frontend in local mode but routes backend API calls through staging.
+
 #### Access dev server on touch devices
 
 Enable remote access to the dev server by setting `VITE_REMOTE_DEV` in `.env` to `true`.
diff --git a/apps/desktop-ui/package.json b/apps/desktop-ui/package.json
index d47be69fec..689b9cb72f 100644
--- a/apps/desktop-ui/package.json
+++ b/apps/desktop-ui/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "lint": "nx run @comfyorg/desktop-ui:lint",
     "typecheck": "nx run @comfyorg/desktop-ui:typecheck",
+    "test:unit": "vitest run --config vitest.config.mts",
     "storybook": "storybook dev -p 6007",
     "build-storybook": "storybook build -o dist/storybook"
   },
diff --git a/apps/desktop-ui/src/components/common/StartupDisplay.test.ts b/apps/desktop-ui/src/components/common/StartupDisplay.test.ts
new file mode 100644
index 0000000000..7de8561ed4
--- /dev/null
+++ b/apps/desktop-ui/src/components/common/StartupDisplay.test.ts
@@ -0,0 +1,97 @@
+import { render, screen } from '@testing-library/vue'
+import PrimeVue from 'primevue/config'
+import { describe, expect, it } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import StartupDisplay from '@/components/common/StartupDisplay.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: { g: { logoAlt: 'ComfyUI' } } }
+})
+
+const ProgressBarStub = {
+  props: ['mode', 'value', 'showValue'],
+  template:
+    '<div data-testid="progress-bar" :data-mode="mode" :data-value="value" />'
+}
+
+function renderDisplay(
+  props: {
+    progressPercentage?: number
+    title?: string
+    statusText?: string
+    hideProgress?: boolean
+    fullScreen?: boolean
+  } = {}
+) {
+  return render(StartupDisplay, {
+    props,
+    global: {
+      plugins: [[PrimeVue, { unstyled: true }], i18n],
+      stubs: { ProgressBar: ProgressBarStub }
+    }
+  })
+}
+
+describe('StartupDisplay', () => {
+  describe('progressMode', () => {
+    it('renders indeterminate mode when progressPercentage is undefined', () => {
+      renderDisplay()
+      expect(screen.getByTestId('progress-bar').dataset.mode).toBe(
+        'indeterminate'
+      )
+    })
+
+    it('renders determinate mode when progressPercentage is provided', () => {
+      renderDisplay({ progressPercentage: 50 })
+      expect(screen.getByTestId('progress-bar').dataset.mode).toBe(
+        'determinate'
+      )
+    })
+
+    it('passes progressPercentage as value to the progress bar', () => {
+      renderDisplay({ progressPercentage: 75 })
+      expect(screen.getByTestId('progress-bar').dataset.value).toBe('75')
+    })
+  })
+
+  describe('hideProgress', () => {
+    it('hides the progress bar when hideProgress is true', () => {
+      renderDisplay({ hideProgress: true })
+      expect(screen.queryByTestId('progress-bar')).toBeNull()
+    })
+
+    it('shows the progress bar by default', () => {
+      renderDisplay()
+      expect(screen.getByTestId('progress-bar')).toBeDefined()
+    })
+  })
+
+  describe('title', () => {
+    it('renders the title text when provided', () => {
+      renderDisplay({ title: 'Loading...' })
+      expect(screen.getByText('Loading...')).toBeDefined()
+    })
+
+    it('does not render h1 when title is not provided', () => {
+      renderDisplay()
+      expect(screen.queryByRole('heading', { level: 1 })).toBeNull()
+    })
+  })
+
+  describe('statusText', () => {
+    it('renders statusText with data-testid attribute', () => {
+      renderDisplay({ statusText: 'Starting server' })
+      expect(screen.getByTestId('startup-status-text').textContent).toContain(
+        'Starting server'
+      )
+    })
+
+    it('does not render statusText element when not provided', () => {
+      renderDisplay()
+      expect(screen.queryByTestId('startup-status-text')).toBeNull()
+    })
+  })
+})
diff --git a/apps/desktop-ui/src/components/common/UrlInput.test.ts b/apps/desktop-ui/src/components/common/UrlInput.test.ts
new file mode 100644
index 0000000000..410d8f6d41
--- /dev/null
+++ b/apps/desktop-ui/src/components/common/UrlInput.test.ts
@@ -0,0 +1,208 @@
+import { render, screen, waitFor } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import PrimeVue from 'primevue/config'
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+
+vi.mock('@comfyorg/shared-frontend-utils/networkUtil', () => ({
+  checkUrlReachable: vi.fn()
+}))
+
+import { checkUrlReachable } from '@comfyorg/shared-frontend-utils/networkUtil'
+import UrlInput from '@/components/common/UrlInput.vue'
+import { ValidationState } from '@/utils/validationUtil'
+
+const InputTextStub = {
+  props: ['modelValue', 'invalid'],
+  emits: ['update:modelValue', 'blur'],
+  template: `<input
+    data-testid="url-input"
+    :value="modelValue"
+    :data-invalid="invalid"
+    @input="$emit('update:modelValue', $event.target.value)"
+    @blur="$emit('blur')"
+  />`
+}
+
+const InputIconStub = {
+  template: '<span data-testid="input-icon" />'
+}
+
+const IconFieldStub = {
+  template: '<div><slot /></div>'
+}
+
+function renderUrlInput(
+  modelValue = '',
+  validateUrlFn?: (url: string) => Promise<boolean>
+) {
+  return render(UrlInput, {
+    props: { modelValue, ...(validateUrlFn ? { validateUrlFn } : {}) },
+    global: {
+      plugins: [[PrimeVue, { unstyled: true }]],
+      stubs: {
+        InputText: InputTextStub,
+        InputIcon: InputIconStub,
+        IconField: IconFieldStub
+      }
+    }
+  })
+}
+
+describe('UrlInput', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+  })
+
+  describe('initial validation on mount', () => {
+    it('stays IDLE when modelValue is empty on mount', async () => {
+      renderUrlInput('')
+      await waitFor(() => {
+        expect(screen.getByTestId('url-input').dataset.invalid).toBe('false')
+      })
+    })
+
+    it('sets VALID state when modelValue is a reachable URL on mount', async () => {
+      vi.mocked(checkUrlReachable).mockResolvedValue(true)
+      renderUrlInput('https://example.com')
+      await waitFor(() => {
+        expect(screen.getByTestId('url-input').dataset.invalid).toBe('false')
+      })
+    })
+
+    it('sets INVALID state when URL is not reachable on mount', async () => {
+      vi.mocked(checkUrlReachable).mockResolvedValue(false)
+      renderUrlInput('https://unreachable.example')
+      await waitFor(() => {
+        expect(screen.getByTestId('url-input').dataset.invalid).toBe('true')
+      })
+    })
+  })
+
+  describe('input handling', () => {
+    it('resets validation state to IDLE on user input', async () => {
+      vi.mocked(checkUrlReachable).mockResolvedValue(false)
+      renderUrlInput('https://bad.example')
+
+      await waitFor(() => {
+        expect(screen.getByTestId('url-input').dataset.invalid).toBe('true')
+      })
+
+      const user = userEvent.setup()
+      await user.type(screen.getByTestId('url-input'), 'x')
+      expect(screen.getByTestId('url-input').dataset.invalid).toBe('false')
+    })
+
+    it('strips whitespace from typed input', async () => {
+      const onUpdate = vi.fn()
+      render(UrlInput, {
+        props: {
+          modelValue: '',
+          'onUpdate:modelValue': onUpdate
+        },
+        global: {
+          plugins: [[PrimeVue, { unstyled: true }]],
+          stubs: {
+            InputText: InputTextStub,
+            InputIcon: InputIconStub,
+            IconField: IconFieldStub
+          }
+        }
+      })
+
+      const user = userEvent.setup()
+      const input = screen.getByTestId('url-input')
+      await user.type(input, 'htt ps')
+      expect((input as HTMLInputElement).value).not.toContain(' ')
+    })
+  })
+
+  describe('blur handling', () => {
+    it('emits update:modelValue on blur', async () => {
+      const onUpdate = vi.fn()
+      render(UrlInput, {
+        props: {
+          modelValue: 'https://example.com',
+          'onUpdate:modelValue': onUpdate
+        },
+        global: {
+          plugins: [[PrimeVue, { unstyled: true }]],
+          stubs: {
+            InputText: InputTextStub,
+            InputIcon: InputIconStub,
+            IconField: IconFieldStub
+          }
+        }
+      })
+
+      const user = userEvent.setup()
+      await user.click(screen.getByTestId('url-input'))
+      await user.tab()
+
+      expect(onUpdate).toHaveBeenCalled()
+    })
+
+    it('normalizes URL on blur', async () => {
+      const onUpdate = vi.fn()
+      render(UrlInput, {
+        props: {
+          modelValue: 'https://example.com',
+          'onUpdate:modelValue': onUpdate
+        },
+        global: {
+          plugins: [[PrimeVue, { unstyled: true }]],
+          stubs: {
+            InputText: InputTextStub,
+            InputIcon: InputIconStub,
+            IconField: IconFieldStub
+          }
+        }
+      })
+
+      const user = userEvent.setup()
+      await user.click(screen.getByTestId('url-input'))
+      await user.tab()
+
+      const emittedUrl = onUpdate.mock.calls[0]?.[0]
+      expect(emittedUrl).toBe('https://example.com/')
+    })
+  })
+
+  describe('custom validateUrlFn', () => {
+    it('uses custom validateUrlFn when provided', async () => {
+      const customValidator = vi.fn().mockResolvedValue(true)
+      renderUrlInput('https://custom.example', customValidator)
+
+      await waitFor(() => {
+        expect(customValidator).toHaveBeenCalledWith('https://custom.example')
+      })
+
+      expect(checkUrlReachable).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('state-change emission', () => {
+    it('emits state-change when validation state changes', async () => {
+      const onStateChange = vi.fn()
+      vi.mocked(checkUrlReachable).mockResolvedValue(true)
+
+      render(UrlInput, {
+        props: {
+          modelValue: 'https://example.com',
+          'onState-change': onStateChange
+        },
+        global: {
+          plugins: [[PrimeVue, { unstyled: true }]],
+          stubs: {
+            InputText: InputTextStub,
+            InputIcon: InputIconStub,
+            IconField: IconFieldStub
+          }
+        }
+      })
+
+      await waitFor(() => {
+        expect(onStateChange).toHaveBeenCalledWith(ValidationState.VALID)
+      })
+    })
+  })
+})
diff --git a/apps/desktop-ui/src/components/install/GpuPicker.test.ts b/apps/desktop-ui/src/components/install/GpuPicker.test.ts
new file mode 100644
index 0000000000..c14c26fb1a
--- /dev/null
+++ b/apps/desktop-ui/src/components/install/GpuPicker.test.ts
@@ -0,0 +1,112 @@
+import { render, screen } from '@testing-library/vue'
+import PrimeVue from 'primevue/config'
+import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+vi.mock('@/utils/envUtil', () => ({
+  electronAPI: vi.fn(() => ({
+    getPlatform: vi.fn().mockReturnValue('win32')
+  }))
+}))
+
+vi.mock('@/i18n', () => ({
+  t: (key: string) => key,
+  te: () => false,
+  st: (_key: string, fallback: string) => fallback
+}))
+
+import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
+import GpuPicker from '@/components/install/GpuPicker.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  missingWarn: false,
+  fallbackWarn: false,
+  messages: { en: {} }
+})
+
+const HardwareOptionStub = {
+  props: ['imagePath', 'placeholderText', 'subtitle', 'selected'],
+  emits: ['click'],
+  template:
+    '<button :data-testid="placeholderText" :data-selected="selected" @click="$emit(\'click\')" >{{ placeholderText }}</button>'
+}
+
+function renderPicker(device: TorchDeviceType | null = null) {
+  return render(GpuPicker, {
+    props: { device },
+    global: {
+      plugins: [[PrimeVue, { unstyled: true }], i18n],
+      stubs: {
+        HardwareOption: HardwareOptionStub,
+        Tag: {
+          props: ['value'],
+          template: '<span data-testid="recommended-tag">{{ value }}</span>'
+        }
+      }
+    }
+  })
+}
+
+describe('GpuPicker', () => {
+  describe('recommended badge', () => {
+    it('shows recommended badge for nvidia', () => {
+      renderPicker('nvidia')
+      expect(screen.getByTestId('recommended-tag')).toBeVisible()
+    })
+
+    it('shows recommended badge for amd', () => {
+      renderPicker('amd')
+      expect(screen.getByTestId('recommended-tag')).toBeVisible()
+    })
+
+    it('does not show recommended badge for cpu', () => {
+      renderPicker('cpu')
+      expect(screen.getByTestId('recommended-tag')).not.toBeVisible()
+    })
+
+    it('does not show recommended badge for unsupported', () => {
+      renderPicker('unsupported')
+      expect(screen.getByTestId('recommended-tag')).not.toBeVisible()
+    })
+
+    it('does not show recommended badge when no device is selected', () => {
+      renderPicker(null)
+      expect(screen.getByTestId('recommended-tag')).not.toBeVisible()
+    })
+  })
+
+  describe('selection state', () => {
+    it('marks nvidia as selected when device is nvidia', () => {
+      renderPicker('nvidia')
+      expect(screen.getByTestId('NVIDIA').dataset.selected).toBe('true')
+    })
+
+    it('marks cpu as selected when device is cpu', () => {
+      renderPicker('cpu')
+      expect(screen.getByTestId('CPU').dataset.selected).toBe('true')
+    })
+
+    it('marks unsupported as selected when device is unsupported', () => {
+      renderPicker('unsupported')
+      expect(screen.getByTestId('Manual Install').dataset.selected).toBe('true')
+    })
+
+    it('no option is selected when device is null', () => {
+      renderPicker(null)
+      expect(screen.getByTestId('CPU').dataset.selected).toBe('false')
+      expect(screen.getByTestId('NVIDIA').dataset.selected).toBe('false')
+    })
+  })
+
+  describe('gpu options on non-darwin platform', () => {
+    it('shows NVIDIA, AMD, CPU, and Manual Install options', () => {
+      renderPicker(null)
+      expect(screen.getByTestId('NVIDIA')).toBeDefined()
+      expect(screen.getByTestId('AMD')).toBeDefined()
+      expect(screen.getByTestId('CPU')).toBeDefined()
+      expect(screen.getByTestId('Manual Install')).toBeDefined()
+    })
+  })
+})
diff --git a/apps/desktop-ui/src/components/install/MigrationPicker.test.ts b/apps/desktop-ui/src/components/install/MigrationPicker.test.ts
new file mode 100644
index 0000000000..91a617b9c2
--- /dev/null
+++ b/apps/desktop-ui/src/components/install/MigrationPicker.test.ts
@@ -0,0 +1,223 @@
+import { render, screen, waitFor } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import PrimeVue from 'primevue/config'
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+const mockValidateComfyUISource = vi.fn()
+const mockShowDirectoryPicker = vi.fn()
+
+vi.mock('@/utils/envUtil', () => ({
+  electronAPI: vi.fn(() => ({
+    validateComfyUISource: mockValidateComfyUISource,
+    showDirectoryPicker: mockShowDirectoryPicker
+  }))
+}))
+
+import MigrationPicker from '@/components/install/MigrationPicker.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      install: {
+        migrationSourcePathDescription: 'Source path description',
+        migrationOptional: 'Migration is optional',
+        selectItemsToMigrate: 'Select items to migrate',
+        pathValidationFailed: 'Validation failed',
+        failedToSelectDirectory: 'Failed to select directory',
+        locationPicker: {
+          migrationPathPlaceholder: 'Enter path'
+        }
+      }
+    }
+  }
+})
+
+const InputTextStub = {
+  props: ['modelValue', 'invalid'],
+  emits: ['update:modelValue'],
+  template: `<input
+    data-testid="source-input"
+    :value="modelValue"
+    @input="$emit('update:modelValue', $event.target.value)"
+  />`
+}
+
+const CheckboxStub = {
+  props: ['modelValue', 'inputId', 'binary'],
+  emits: ['update:modelValue', 'click'],
+  template: `<input
+    type="checkbox"
+    :data-testid="'checkbox-' + inputId"
+    :checked="modelValue"
+    @change="$emit('update:modelValue', $event.target.checked)"
+    @click.stop="$emit('click')"
+  />`
+}
+
+function renderPicker(sourcePath = '', migrationItemIds: string[] = []) {
+  return render(MigrationPicker, {
+    props: { sourcePath, migrationItemIds },
+    global: {
+      plugins: [[PrimeVue, { unstyled: true }], i18n],
+      stubs: {
+        InputText: InputTextStub,
+        Checkbox: CheckboxStub,
+        Button: { template: '<button data-testid="browse-btn" />' },
+        Message: {
+          props: ['severity'],
+          template: '<div data-testid="error-msg"><slot /></div>'
+        }
+      }
+    }
+  })
+}
+
+describe('MigrationPicker', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+  })
+
+  describe('isValidSource', () => {
+    it('hides migration options when source path is empty', () => {
+      renderPicker('')
+      expect(screen.queryByText('Select items to migrate')).toBeNull()
+    })
+
+    it('shows migration options when source path is valid', async () => {
+      mockValidateComfyUISource.mockResolvedValue({ isValid: true })
+      const { rerender } = renderPicker('')
+
+      await rerender({ sourcePath: '/valid/path' })
+      await waitFor(() => {
+        expect(screen.getByText('Select items to migrate')).toBeDefined()
+      })
+    })
+
+    it('shows optional message when no valid source', () => {
+      renderPicker('')
+      expect(screen.getByText('Migration is optional')).toBeDefined()
+    })
+  })
+
+  describe('validateSource', () => {
+    it('clears error when source path becomes empty', async () => {
+      mockValidateComfyUISource.mockResolvedValue({
+        isValid: false,
+        error: 'Not found'
+      })
+
+      const user = userEvent.setup()
+      renderPicker()
+
+      await user.type(screen.getByTestId('source-input'), '/bad/path')
+      await waitFor(() => {
+        expect(screen.getByTestId('error-msg')).toBeDefined()
+      })
+
+      await user.clear(screen.getByTestId('source-input'))
+      await waitFor(() => {
+        expect(screen.queryByTestId('error-msg')).toBeNull()
+      })
+    })
+
+    it('shows error message when validation fails', async () => {
+      mockValidateComfyUISource.mockResolvedValue({
+        isValid: false,
+        error: 'Path not found'
+      })
+
+      const user = userEvent.setup()
+      renderPicker()
+
+      await user.type(screen.getByTestId('source-input'), '/bad/path')
+      await waitFor(() => {
+        expect(screen.getByTestId('error-msg')).toBeDefined()
+      })
+    })
+
+    it('shows no error when validation passes', async () => {
+      mockValidateComfyUISource.mockResolvedValue({ isValid: true })
+
+      const user = userEvent.setup()
+      renderPicker()
+
+      await user.type(screen.getByTestId('source-input'), '/valid/path')
+      await waitFor(() => {
+        expect(screen.queryByTestId('error-msg')).toBeNull()
+      })
+    })
+  })
+
+  describe('migrationItemIds watchEffect', () => {
+    it('emits all item IDs by default (all items start selected)', async () => {
+      const onUpdate = vi.fn()
+      render(MigrationPicker, {
+        props: {
+          sourcePath: '',
+          migrationItemIds: [],
+          'onUpdate:migrationItemIds': onUpdate
+        },
+        global: {
+          plugins: [[PrimeVue, { unstyled: true }], i18n],
+          stubs: {
+            InputText: InputTextStub,
+            Checkbox: CheckboxStub,
+            Button: { template: '<button />' },
+            Message: { template: '<div />' }
+          }
+        }
+      })
+
+      await waitFor(() => {
+        expect(onUpdate).toHaveBeenCalled()
+        const emittedIds = onUpdate.mock.calls[0][0]
+        expect(Array.isArray(emittedIds)).toBe(true)
+        expect(emittedIds.length).toBeGreaterThan(0)
+      })
+    })
+  })
+
+  describe('browse path', () => {
+    it('opens directory picker on browse click', async () => {
+      mockShowDirectoryPicker.mockResolvedValue(null)
+      renderPicker()
+
+      const user = userEvent.setup()
+      await user.click(screen.getByTestId('browse-btn'))
+
+      expect(mockShowDirectoryPicker).toHaveBeenCalledOnce()
+    })
+
+    it('updates source path when directory is selected', async () => {
+      mockShowDirectoryPicker.mockResolvedValue('/selected/path')
+      mockValidateComfyUISource.mockResolvedValue({ isValid: true })
+
+      const onUpdate = vi.fn()
+      render(MigrationPicker, {
+        props: {
+          sourcePath: '',
+          'onUpdate:sourcePath': onUpdate
+        },
+        global: {
+          plugins: [[PrimeVue, { unstyled: true }], i18n],
+          stubs: {
+            InputText: InputTextStub,
+            Checkbox: CheckboxStub,
+            Button: { template: '<button data-testid="browse-btn" />' },
+            Message: { template: '<div />' }
+          }
+        }
+      })
+
+      const user = userEvent.setup()
+      await user.click(screen.getByTestId('browse-btn'))
+
+      await waitFor(() => {
+        expect(onUpdate).toHaveBeenCalledWith('/selected/path')
+      })
+    })
+  })
+})
diff --git a/apps/desktop-ui/src/components/maintenance/StatusTag.test.ts b/apps/desktop-ui/src/components/maintenance/StatusTag.test.ts
new file mode 100644
index 0000000000..a2fbf1b435
--- /dev/null
+++ b/apps/desktop-ui/src/components/maintenance/StatusTag.test.ts
@@ -0,0 +1,85 @@
+import { render, screen } from '@testing-library/vue'
+import PrimeVue from 'primevue/config'
+import { describe, expect, it, vi } from 'vitest'
+import { defineComponent } from 'vue'
+
+vi.mock('@/i18n', () => ({
+  t: (key: string) => key
+}))
+
+import StatusTag from '@/components/maintenance/StatusTag.vue'
+
+const TagStub = defineComponent({
+  name: 'Tag',
+  props: {
+    icon: String,
+    severity: String,
+    value: String
+  },
+  template: `<span data-testid="tag" :data-icon="icon" :data-severity="severity" :data-value="value">{{ value }}</span>`
+})
+
+function renderStatusTag(props: { error: boolean; refreshing?: boolean }) {
+  return render(StatusTag, {
+    props,
+    global: {
+      plugins: [[PrimeVue, { unstyled: true }]],
+      stubs: { Tag: TagStub }
+    }
+  })
+}
+
+describe('StatusTag', () => {
+  describe('refreshing state', () => {
+    it('shows info severity when refreshing', () => {
+      renderStatusTag({ error: false, refreshing: true })
+      expect(screen.getByTestId('tag').dataset.severity).toBe('info')
+    })
+
+    it('shows refreshing translation key when refreshing', () => {
+      renderStatusTag({ error: false, refreshing: true })
+      expect(screen.getByTestId('tag').dataset.value).toBe(
+        'maintenance.refreshing'
+      )
+    })
+
+    it('shows question icon when refreshing', () => {
+      renderStatusTag({ error: false, refreshing: true })
+      expect(screen.getByTestId('tag').dataset.icon).toBeDefined()
+    })
+  })
+
+  describe('error state', () => {
+    it('shows danger severity when error is true', () => {
+      renderStatusTag({ error: true })
+      expect(screen.getByTestId('tag').dataset.severity).toBe('danger')
+    })
+
+    it('shows error translation key when error is true', () => {
+      renderStatusTag({ error: true })
+      expect(screen.getByTestId('tag').dataset.value).toBe('g.error')
+    })
+  })
+
+  describe('OK state', () => {
+    it('shows success severity when not refreshing and not error', () => {
+      renderStatusTag({ error: false })
+      expect(screen.getByTestId('tag').dataset.severity).toBe('success')
+    })
+
+    it('shows OK translation key when not refreshing and not error', () => {
+      renderStatusTag({ error: false })
+      expect(screen.getByTestId('tag').dataset.value).toBe('maintenance.OK')
+    })
+  })
+
+  describe('precedence', () => {
+    it('shows refreshing state when both refreshing and error are true', () => {
+      renderStatusTag({ error: true, refreshing: true })
+      expect(screen.getByTestId('tag').dataset.severity).toBe('info')
+      expect(screen.getByTestId('tag').dataset.value).toBe(
+        'maintenance.refreshing'
+      )
+    })
+  })
+})
diff --git a/apps/desktop-ui/src/components/maintenance/TaskCard.test.ts b/apps/desktop-ui/src/components/maintenance/TaskCard.test.ts
new file mode 100644
index 0000000000..662abb5fdc
--- /dev/null
+++ b/apps/desktop-ui/src/components/maintenance/TaskCard.test.ts
@@ -0,0 +1,89 @@
+import { render, screen } from '@testing-library/vue'
+import PrimeVue from 'primevue/config'
+import { describe, expect, it, vi } from 'vitest'
+vi.mock('@/utils/envUtil', () => ({
+  electronAPI: vi.fn(() => ({
+    Validation: { validateInstallation: vi.fn() }
+  }))
+}))
+
+vi.mock('@/constants/desktopMaintenanceTasks', () => ({
+  DESKTOP_MAINTENANCE_TASKS: []
+}))
+
+vi.mock('@/utils/refUtil', () => ({
+  useMinLoadingDurationRef: (source: { value: boolean }) => source
+}))
+
+const mockGetRunner = vi.fn()
+vi.mock('@/stores/maintenanceTaskStore', () => ({
+  useMaintenanceTaskStore: vi.fn(() => ({
+    getRunner: mockGetRunner
+  }))
+}))
+
+import type { MaintenanceTask } from '@/types/desktop/maintenanceTypes'
+import TaskCard from '@/components/maintenance/TaskCard.vue'
+
+const baseTask: MaintenanceTask = {
+  id: 'testTask',
+  name: 'Test Task',
+  shortDescription: 'Short description',
+  errorDescription: 'Error occurred',
+  execute: vi.fn().mockResolvedValue(true)
+}
+
+const cardStubs = {
+  Card: {
+    template: '<div data-testid="card"><slot name="content"></slot></div>'
+  },
+  Button: { template: '<button />' }
+}
+
+function renderCard(
+  state: 'OK' | 'error' | 'warning' | 'skipped',
+  task: MaintenanceTask = baseTask
+) {
+  mockGetRunner.mockReturnValue({
+    state,
+    executing: false,
+    refreshing: false,
+    resolved: false
+  })
+
+  return render(TaskCard, {
+    props: { task },
+    global: {
+      plugins: [[PrimeVue, { unstyled: true }]],
+      stubs: cardStubs
+    }
+  })
+}
+
+describe('TaskCard', () => {
+  describe('description computed', () => {
+    it('shows errorDescription when task state is error', () => {
+      renderCard('error')
+      expect(screen.getByText('Error occurred')).toBeDefined()
+    })
+
+    it('shows shortDescription when task state is OK', () => {
+      renderCard('OK')
+      expect(screen.getByText('Short description')).toBeDefined()
+    })
+
+    it('shows shortDescription when task state is warning', () => {
+      renderCard('warning')
+      expect(screen.getByText('Short description')).toBeDefined()
+    })
+
+    it('falls back to shortDescription when errorDescription is absent and state is error', () => {
+      const taskWithoutErrorDesc: MaintenanceTask = {
+        ...baseTask,
+        errorDescription: undefined
+      }
+      renderCard('error', taskWithoutErrorDesc)
+      expect(screen.getByText('Short description')).toBeDefined()
+    })
+  })
+})
diff --git a/apps/desktop-ui/src/components/maintenance/TaskListItem.test.ts b/apps/desktop-ui/src/components/maintenance/TaskListItem.test.ts
new file mode 100644
index 0000000000..c2c52bd53a
--- /dev/null
+++ b/apps/desktop-ui/src/components/maintenance/TaskListItem.test.ts
@@ -0,0 +1,97 @@
+import { render, screen } from '@testing-library/vue'
+import PrimeVue from 'primevue/config'
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('@/utils/envUtil', () => ({
+  electronAPI: vi.fn(() => ({
+    Validation: { validateInstallation: vi.fn() }
+  }))
+}))
+
+vi.mock('@/constants/desktopMaintenanceTasks', () => ({
+  DESKTOP_MAINTENANCE_TASKS: []
+}))
+
+vi.mock('@/utils/refUtil', () => ({
+  useMinLoadingDurationRef: (source: { value: boolean }) => source
+}))
+
+vi.mock('@/i18n', () => ({
+  t: (key: string) => key
+}))
+
+const mockGetRunner = vi.fn()
+vi.mock('@/stores/maintenanceTaskStore', () => ({
+  useMaintenanceTaskStore: vi.fn(() => ({
+    getRunner: mockGetRunner
+  }))
+}))
+
+import type { MaintenanceTask } from '@/types/desktop/maintenanceTypes'
+import TaskListItem from '@/components/maintenance/TaskListItem.vue'
+
+const baseTask: MaintenanceTask = {
+  id: 'testTask',
+  name: 'Test Task',
+  button: { text: 'Fix', icon: 'pi pi-check' },
+  execute: vi.fn().mockResolvedValue(true)
+}
+
+const ButtonStub = {
+  props: ['severity', 'label', 'icon', 'loading'],
+  template:
+    '<button :data-severity="severity" :data-label="label" :data-testid="label ? \'action-button\' : \'icon-button\'" />'
+}
+
+function renderItem(state: 'OK' | 'error' | 'warning' | 'skipped') {
+  mockGetRunner.mockReturnValue({
+    state,
+    executing: false,
+    refreshing: false,
+    resolved: false
+  })
+
+  return render(TaskListItem, {
+    props: { task: baseTask },
+    global: {
+      plugins: [[PrimeVue, { unstyled: true }]],
+      stubs: {
+        Button: ButtonStub,
+        Popover: { template: '<div />' },
+        TaskListStatusIcon: { template: '<span />' }
+      }
+    }
+  })
+}
+
+describe('TaskListItem', () => {
+  describe('severity computed', () => {
+    it('uses primary severity for error state', () => {
+      renderItem('error')
+      expect(screen.getByTestId('action-button').dataset.severity).toBe(
+        'primary'
+      )
+    })
+
+    it('uses primary severity for warning state', () => {
+      renderItem('warning')
+      expect(screen.getByTestId('action-button').dataset.severity).toBe(
+        'primary'
+      )
+    })
+
+    it('uses secondary severity for OK state', () => {
+      renderItem('OK')
+      expect(screen.getByTestId('action-button').dataset.severity).toBe(
+        'secondary'
+      )
+    })
+
+    it('uses secondary severity for skipped state', () => {
+      renderItem('skipped')
+      expect(screen.getByTestId('action-button').dataset.severity).toBe(
+        'secondary'
+      )
+    })
+  })
+})
diff --git a/apps/desktop-ui/src/components/maintenance/TaskListStatusIcon.test.ts b/apps/desktop-ui/src/components/maintenance/TaskListStatusIcon.test.ts
new file mode 100644
index 0000000000..985a2df33e
--- /dev/null
+++ b/apps/desktop-ui/src/components/maintenance/TaskListStatusIcon.test.ts
@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/vue'
+import PrimeVue from 'primevue/config'
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('@/i18n', () => ({
+  t: (key: string) => key
+}))
+
+import TaskListStatusIcon from '@/components/maintenance/TaskListStatusIcon.vue'
+
+type TaskState = 'warning' | 'error' | 'resolved' | 'OK' | 'skipped' | undefined
+
+function renderIcon(state: TaskState, loading?: boolean) {
+  return render(TaskListStatusIcon, {
+    props: { state, loading },
+    global: {
+      plugins: [[PrimeVue, { unstyled: true }]],
+      stubs: {
+        ProgressSpinner: {
+          template: '<div data-testid="spinner" />'
+        }
+      }
+    }
+  })
+}
+
+describe('TaskListStatusIcon', () => {
+  describe('loading / no state', () => {
+    it('renders spinner when state is undefined', () => {
+      renderIcon(undefined)
+      expect(screen.getByTestId('spinner')).toBeDefined()
+    })
+
+    it('renders spinner when loading is true', () => {
+      renderIcon('OK', true)
+      expect(screen.getByTestId('spinner')).toBeDefined()
+    })
+
+    it('hides spinner when state is defined and not loading', () => {
+      renderIcon('OK', false)
+      expect(screen.queryByTestId('spinner')).toBeNull()
+    })
+  })
+})
diff --git a/apps/desktop-ui/src/composables/bottomPanelTabs/useTerminal.test.ts b/apps/desktop-ui/src/composables/bottomPanelTabs/useTerminal.test.ts
new file mode 100644
index 0000000000..d716541e2c
--- /dev/null
+++ b/apps/desktop-ui/src/composables/bottomPanelTabs/useTerminal.test.ts
@@ -0,0 +1,124 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+const { mockTerminal, MockTerminal, mockFitAddon, MockFitAddon } = vi.hoisted(
+  () => {
+    const mockTerminal = {
+      loadAddon: vi.fn(),
+      attachCustomKeyEventHandler: vi.fn(),
+      open: vi.fn(),
+      dispose: vi.fn(),
+      hasSelection: vi.fn<[], boolean>(),
+      resize: vi.fn(),
+      cols: 80,
+      rows: 24
+    }
+    const MockTerminal = vi.fn(function () {
+      return mockTerminal
+    })
+
+    const mockFitAddon = {
+      proposeDimensions: vi.fn().mockReturnValue({ cols: 80, rows: 24 })
+    }
+    const MockFitAddon = vi.fn(function () {
+      return mockFitAddon
+    })
+
+    return { mockTerminal, MockTerminal, mockFitAddon, MockFitAddon }
+  }
+)
+
+vi.mock('@xterm/xterm', () => ({ Terminal: MockTerminal }))
+vi.mock('@xterm/addon-fit', () => ({ FitAddon: MockFitAddon }))
+vi.mock('@xterm/xterm/css/xterm.css', () => ({}))
+
+import { withSetup } from '@/test/withSetup'
+import { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
+
+function getKeyHandler(): (event: KeyboardEvent) => boolean {
+  return mockTerminal.attachCustomKeyEventHandler.mock.calls[0][0]
+}
+
+describe('useTerminal key event handler', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockTerminal.hasSelection.mockReturnValue(false)
+
+    const element = ref<HTMLElement | undefined>(undefined)
+    withSetup(() => useTerminal(element))
+  })
+
+  it('allows browser to handle copy when text is selected (Ctrl+C)', () => {
+    mockTerminal.hasSelection.mockReturnValue(true)
+    const event = {
+      type: 'keydown',
+      ctrlKey: true,
+      metaKey: false,
+      key: 'c'
+    } as KeyboardEvent
+    expect(getKeyHandler()(event)).toBe(false)
+  })
+
+  it('allows browser to handle copy when text is selected (Meta+C)', () => {
+    mockTerminal.hasSelection.mockReturnValue(true)
+    const event = {
+      type: 'keydown',
+      ctrlKey: false,
+      metaKey: true,
+      key: 'c'
+    } as KeyboardEvent
+    expect(getKeyHandler()(event)).toBe(false)
+  })
+
+  it('does not pass copy to browser when no text is selected', () => {
+    mockTerminal.hasSelection.mockReturnValue(false)
+    const event = {
+      type: 'keydown',
+      ctrlKey: true,
+      metaKey: false,
+      key: 'c'
+    } as KeyboardEvent
+    expect(getKeyHandler()(event)).toBe(true)
+  })
+
+  it('allows browser to handle paste (Ctrl+V)', () => {
+    const event = {
+      type: 'keydown',
+      ctrlKey: true,
+      metaKey: false,
+      key: 'v'
+    } as KeyboardEvent
+    expect(getKeyHandler()(event)).toBe(false)
+  })
+
+  it('allows browser to handle paste (Meta+V)', () => {
+    const event = {
+      type: 'keydown',
+      ctrlKey: false,
+      metaKey: true,
+      key: 'v'
+    } as KeyboardEvent
+    expect(getKeyHandler()(event)).toBe(false)
+  })
+
+  it('does not intercept non-keydown events', () => {
+    mockTerminal.hasSelection.mockReturnValue(true)
+    const event = {
+      type: 'keyup',
+      ctrlKey: true,
+      metaKey: false,
+      key: 'c'
+    } as KeyboardEvent
+    expect(getKeyHandler()(event)).toBe(true)
+  })
+
+  it('passes through unrelated key combinations', () => {
+    const event = {
+      type: 'keydown',
+      ctrlKey: false,
+      metaKey: false,
+      key: 'Enter'
+    } as KeyboardEvent
+    expect(getKeyHandler()(event)).toBe(true)
+  })
+})
diff --git a/apps/desktop-ui/src/composables/bottomPanelTabs/useTerminalBuffer.test.ts b/apps/desktop-ui/src/composables/bottomPanelTabs/useTerminalBuffer.test.ts
new file mode 100644
index 0000000000..f3516d3788
--- /dev/null
+++ b/apps/desktop-ui/src/composables/bottomPanelTabs/useTerminalBuffer.test.ts
@@ -0,0 +1,48 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { mockSerialize, MockSerializeAddon } = vi.hoisted(() => {
+  const mockSerialize = vi.fn<[], string>()
+  const MockSerializeAddon = vi.fn(function () {
+    return { serialize: mockSerialize }
+  })
+  return { mockSerialize, MockSerializeAddon }
+})
+
+vi.mock('@xterm/xterm', () => ({
+  Terminal: vi.fn(function () {
+    return { loadAddon: vi.fn(), dispose: vi.fn(), write: vi.fn() }
+  })
+}))
+
+vi.mock('@xterm/addon-serialize', () => ({
+  SerializeAddon: MockSerializeAddon
+}))
+
+import type { Terminal } from '@xterm/xterm'
+import { withSetup } from '@/test/withSetup'
+import { useTerminalBuffer } from '@/composables/bottomPanelTabs/useTerminalBuffer'
+
+describe('useTerminalBuffer', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockSerialize.mockReturnValue('')
+  })
+
+  describe('copyTo', () => {
+    it('writes serialized buffer content to the destination terminal', () => {
+      mockSerialize.mockReturnValue('hello world')
+      const { copyTo } = withSetup(() => useTerminalBuffer())
+      const mockWrite = vi.fn()
+      copyTo({ write: mockWrite } as Pick<Terminal, 'write'>)
+      expect(mockWrite).toHaveBeenCalledWith('hello world')
+    })
+
+    it('writes empty string when buffer is empty', () => {
+      mockSerialize.mockReturnValue('')
+      const { copyTo } = withSetup(() => useTerminalBuffer())
+      const mockWrite = vi.fn()
+      copyTo({ write: mockWrite } as Pick<Terminal, 'write'>)
+      expect(mockWrite).toHaveBeenCalledWith('')
+    })
+  })
+})
diff --git a/apps/desktop-ui/src/constants/desktopDialogs.test.ts b/apps/desktop-ui/src/constants/desktopDialogs.test.ts
new file mode 100644
index 0000000000..5d1d950b70
--- /dev/null
+++ b/apps/desktop-ui/src/constants/desktopDialogs.test.ts
@@ -0,0 +1,50 @@
+import { describe, expect, it } from 'vitest'
+
+import { DESKTOP_DIALOGS, getDialog } from '@/constants/desktopDialogs'
+
+describe('getDialog', () => {
+  it('returns the matching dialog for a valid ID', () => {
+    const result = getDialog('reinstallVenv')
+    expect(result.id).toBe('reinstallVenv')
+    expect(result.title).toBe(DESKTOP_DIALOGS.reinstallVenv.title)
+    expect(result.message).toBe(DESKTOP_DIALOGS.reinstallVenv.message)
+  })
+
+  it('returns invalidDialog for an unknown string ID', () => {
+    const result = getDialog('unknownDialog')
+    expect(result.id).toBe('invalidDialog')
+  })
+
+  it('returns invalidDialog when given an array of strings', () => {
+    const result = getDialog(['reinstallVenv', 'other'])
+    expect(result.id).toBe('invalidDialog')
+  })
+
+  it('returns invalidDialog for empty string', () => {
+    const result = getDialog('')
+    expect(result.id).toBe('invalidDialog')
+  })
+
+  it('returns a deep clone — mutations do not affect the original', () => {
+    const result = getDialog('reinstallVenv')
+    const originalFirstLabel = DESKTOP_DIALOGS.reinstallVenv.buttons[0].label
+    result.buttons[0].label = 'Mutated'
+    expect(DESKTOP_DIALOGS.reinstallVenv.buttons[0].label).toBe(
+      originalFirstLabel
+    )
+  })
+
+  it('every button has a returnValue', () => {
+    for (const id of Object.keys(DESKTOP_DIALOGS)) {
+      const result = getDialog(id)
+      for (const button of result.buttons) {
+        expect(button.returnValue).toBeDefined()
+      }
+    }
+  })
+
+  it('invalidDialog has a close/cancel button', () => {
+    const result = getDialog('invalidDialog')
+    expect(result.buttons.some((b) => b.action === 'cancel')).toBe(true)
+  })
+})
diff --git a/apps/desktop-ui/src/constants/desktopMaintenanceTasks.test.ts b/apps/desktop-ui/src/constants/desktopMaintenanceTasks.test.ts
new file mode 100644
index 0000000000..ab0ff0a93c
--- /dev/null
+++ b/apps/desktop-ui/src/constants/desktopMaintenanceTasks.test.ts
@@ -0,0 +1,75 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { mockElectron } = vi.hoisted(() => ({
+  mockElectron: {
+    setBasePath: vi.fn(),
+    reinstall: vi.fn<[], Promise<void>>().mockResolvedValue(undefined),
+    uv: {
+      installRequirements: vi.fn<[], Promise<void>>(),
+      clearCache: vi.fn<[], Promise<void>>().mockResolvedValue(undefined),
+      resetVenv: vi.fn<[], Promise<void>>().mockResolvedValue(undefined)
+    }
+  }
+}))
+
+vi.mock('@/utils/envUtil', () => ({
+  electronAPI: vi.fn(() => mockElectron)
+}))
+
+import { DESKTOP_MAINTENANCE_TASKS } from '@/constants/desktopMaintenanceTasks'
+
+function findTask(id: string) {
+  const task = DESKTOP_MAINTENANCE_TASKS.find((t) => t.id === id)
+  if (!task) throw new Error(`Task not found: ${id}`)
+  return task
+}
+
+describe('desktopMaintenanceTasks', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+    vi.spyOn(window, 'open').mockReturnValue(null)
+    mockElectron.reinstall.mockResolvedValue(undefined)
+    mockElectron.uv.clearCache.mockResolvedValue(undefined)
+    mockElectron.uv.resetVenv.mockResolvedValue(undefined)
+  })
+
+  describe('pythonPackages', () => {
+    it('returns true when installation succeeds', async () => {
+      mockElectron.uv.installRequirements.mockResolvedValue(undefined)
+      expect(await findTask('pythonPackages').execute()).toBe(true)
+    })
+
+    it('returns false when installation throws', async () => {
+      mockElectron.uv.installRequirements.mockRejectedValue(
+        new Error('install failed')
+      )
+      expect(await findTask('pythonPackages').execute()).toBe(false)
+    })
+  })
+
+  describe('URL-opening tasks', () => {
+    it('git execute opens the git download page', () => {
+      findTask('git').execute()
+      expect(window.open).toHaveBeenCalledWith(
+        'https://git-scm.com/downloads/',
+        '_blank'
+      )
+    })
+
+    it('uv execute opens the uv installation page', () => {
+      findTask('uv').execute()
+      expect(window.open).toHaveBeenCalledWith(
+        'https://docs.astral.sh/uv/getting-started/installation/',
+        '_blank'
+      )
+    })
+
+    it('vcRedist execute opens the VC++ redistributable download', () => {
+      findTask('vcRedist').execute()
+      expect(window.open).toHaveBeenCalledWith(
+        'https://aka.ms/vs/17/release/vc_redist.x64.exe',
+        '_blank'
+      )
+    })
+  })
+})
diff --git a/apps/desktop-ui/src/stores/maintenanceTaskStore.test.ts b/apps/desktop-ui/src/stores/maintenanceTaskStore.test.ts
new file mode 100644
index 0000000000..d2e7951624
--- /dev/null
+++ b/apps/desktop-ui/src/stores/maintenanceTaskStore.test.ts
@@ -0,0 +1,288 @@
+import { createTestingPinia } from '@pinia/testing'
+import type { InstallValidation } from '@comfyorg/comfyui-electron-types'
+import { setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { mockElectron, testTasks } = vi.hoisted(() => {
+  const terminalTaskExecute = vi.fn().mockResolvedValue(true)
+  const basicTaskExecute = vi.fn().mockResolvedValue(true)
+
+  return {
+    mockElectron: {
+      Validation: {
+        validateInstallation: vi.fn()
+      }
+    },
+    testTasks: [
+      {
+        id: 'basicTask',
+        name: 'Basic Task',
+        execute: basicTaskExecute
+      },
+      {
+        id: 'terminalTask',
+        name: 'Terminal Task',
+        execute: terminalTaskExecute,
+        usesTerminal: true,
+        isInstallationFix: true
+      }
+    ]
+  }
+})
+
+vi.mock('@/utils/envUtil', () => ({
+  electronAPI: vi.fn(() => mockElectron)
+}))
+
+vi.mock('@/constants/desktopMaintenanceTasks', () => ({
+  DESKTOP_MAINTENANCE_TASKS: testTasks
+}))
+
+import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
+import type { MaintenanceTask } from '@/types/desktop/maintenanceTypes'
+
+type PartialInstallValidation = Partial<InstallValidation> &
+  Record<string, unknown>
+
+function makeUpdate(
+  overrides: PartialInstallValidation = {}
+): InstallValidation {
+  return {
+    inProgress: false,
+    installState: 'installed',
+    ...overrides
+  } as InstallValidation
+}
+
+function createStore() {
+  setActivePinia(createTestingPinia({ stubActions: false }))
+  return useMaintenanceTaskStore()
+}
+
+describe('useMaintenanceTaskStore', () => {
+  let store: ReturnType<typeof useMaintenanceTaskStore>
+  const [basicTask, terminalTask] = testTasks as MaintenanceTask[]
+
+  beforeEach(() => {
+    vi.resetAllMocks()
+    store = createStore()
+  })
+
+  describe('processUpdate', () => {
+    it('sets isRefreshing to true during in-progress update', () => {
+      store.processUpdate(makeUpdate({ inProgress: true }))
+      expect(store.isRefreshing).toBe(true)
+    })
+
+    it('sets isRefreshing to false when update is complete', () => {
+      store.processUpdate(makeUpdate({ inProgress: false, basicTask: 'OK' }))
+      expect(store.isRefreshing).toBe(false)
+    })
+
+    it('updates runner state for tasks present in the final update', () => {
+      store.processUpdate(makeUpdate({ basicTask: 'error' }))
+      expect(store.getRunner(basicTask).state).toBe('error')
+    })
+
+    it('sets task state to warning from update', () => {
+      store.processUpdate(makeUpdate({ basicTask: 'warning' }))
+      expect(store.getRunner(basicTask).state).toBe('warning')
+    })
+
+    it('marks runners as refreshing when task id is absent from in-progress update', () => {
+      store.processUpdate(makeUpdate({ inProgress: true }))
+      expect(store.getRunner(basicTask).refreshing).toBe(true)
+    })
+
+    it('marks task as skipped when absent from final update', () => {
+      store.processUpdate(makeUpdate({ inProgress: false }))
+      expect(store.getRunner(basicTask).state).toBe('skipped')
+    })
+
+    it('clears refreshing flag after final update', () => {
+      store.processUpdate(makeUpdate({ inProgress: true }))
+      store.processUpdate(makeUpdate({ inProgress: false }))
+      expect(store.getRunner(basicTask).refreshing).toBe(false)
+    })
+
+    it('stores lastUpdate and exposes unsafeBasePath', () => {
+      store.processUpdate(makeUpdate({ unsafeBasePath: true }))
+      expect(store.unsafeBasePath).toBe(true)
+    })
+
+    it('exposes unsafeBasePathReason from the update', () => {
+      store.processUpdate(
+        makeUpdate({ unsafeBasePath: true, unsafeBasePathReason: 'oneDrive' })
+      )
+      expect(store.unsafeBasePathReason).toBe('oneDrive')
+    })
+  })
+
+  describe('anyErrors', () => {
+    it('returns true when any task has error state', () => {
+      store.processUpdate(makeUpdate({ basicTask: 'error' }))
+      expect(store.anyErrors).toBe(true)
+    })
+
+    it('returns false when all tasks are OK', () => {
+      store.processUpdate(makeUpdate({ basicTask: 'OK', terminalTask: 'OK' }))
+      expect(store.anyErrors).toBe(false)
+    })
+
+    it('returns false when all tasks are warning', () => {
+      store.processUpdate(
+        makeUpdate({ basicTask: 'warning', terminalTask: 'warning' })
+      )
+      expect(store.anyErrors).toBe(false)
+    })
+  })
+
+  describe('runner state transitions', () => {
+    it('marks runner as resolved when transitioning from error to OK', () => {
+      store.processUpdate(makeUpdate({ basicTask: 'error' }))
+      store.processUpdate(makeUpdate({ basicTask: 'OK' }))
+      expect(store.getRunner(basicTask).resolved).toBe(true)
+    })
+
+    it('does not mark resolved for warning to OK transition', () => {
+      store.processUpdate(makeUpdate({ basicTask: 'warning' }))
+      store.processUpdate(makeUpdate({ basicTask: 'OK' }))
+      expect(store.getRunner(basicTask).resolved).toBeFalsy()
+    })
+
+    it('clears resolved flag when task returns to error', () => {
+      store.processUpdate(makeUpdate({ basicTask: 'error' }))
+      store.processUpdate(makeUpdate({ basicTask: 'OK' }))
+      store.processUpdate(makeUpdate({ basicTask: 'error' }))
+      expect(store.getRunner(basicTask).resolved).toBeFalsy()
+    })
+  })
+
+  describe('clearResolved', () => {
+    it('clears resolved flags on all runners', () => {
+      store.processUpdate(makeUpdate({ basicTask: 'error' }))
+      store.processUpdate(makeUpdate({ basicTask: 'OK' }))
+      expect(store.getRunner(basicTask).resolved).toBe(true)
+
+      store.clearResolved()
+      expect(store.getRunner(basicTask).resolved).toBeFalsy()
+    })
+  })
+
+  describe('execute', () => {
+    it('returns true when task execution succeeds', async () => {
+      vi.mocked(basicTask.execute).mockResolvedValue(true)
+      const result = await store.execute(basicTask)
+      expect(result).toBe(true)
+    })
+
+    it('returns false when task execution fails', async () => {
+      vi.mocked(basicTask.execute).mockResolvedValue(false)
+      const result = await store.execute(basicTask)
+      expect(result).toBe(false)
+    })
+
+    it('calls refreshDesktopTasks after successful installation-fix task', async () => {
+      vi.mocked(terminalTask.execute).mockResolvedValue(true)
+      await store.execute(terminalTask)
+      expect(
+        mockElectron.Validation.validateInstallation
+      ).toHaveBeenCalledOnce()
+    })
+
+    it('does not call refreshDesktopTasks when task is not an installation fix', async () => {
+      vi.mocked(basicTask.execute).mockResolvedValue(true)
+      await store.execute(basicTask)
+      expect(
+        mockElectron.Validation.validateInstallation
+      ).not.toHaveBeenCalled()
+    })
+
+    it('does not call refreshDesktopTasks when installation-fix task fails', async () => {
+      vi.mocked(terminalTask.execute).mockResolvedValue(false)
+      await store.execute(terminalTask)
+      expect(
+        mockElectron.Validation.validateInstallation
+      ).not.toHaveBeenCalled()
+    })
+
+    it('sets runner executing to true during task execution', async () => {
+      let resolveTask!: (value: boolean) => void
+      vi.mocked(basicTask.execute).mockReturnValue(
+        new Promise<boolean>((resolve) => {
+          resolveTask = resolve
+        })
+      )
+
+      const executePromise = store.execute(basicTask)
+      expect(store.getRunner(basicTask).executing).toBe(true)
+
+      resolveTask(true)
+      await executePromise
+      expect(store.getRunner(basicTask).executing).toBe(false)
+    })
+
+    it('clears executing flag when task throws', async () => {
+      vi.mocked(basicTask.execute).mockRejectedValue(new Error('fail'))
+      await expect(store.execute(basicTask)).rejects.toThrow('fail')
+      expect(store.getRunner(basicTask).executing).toBe(false)
+    })
+
+    it('sets runner error message when task throws', async () => {
+      vi.mocked(basicTask.execute).mockRejectedValue(
+        new Error('something broke')
+      )
+      await expect(store.execute(basicTask)).rejects.toThrow()
+      expect(store.getRunner(basicTask).error).toBe('something broke')
+    })
+
+    it('clears runner error on successful execution', async () => {
+      vi.mocked(basicTask.execute).mockRejectedValue(new Error('fail'))
+      await expect(store.execute(basicTask)).rejects.toThrow()
+
+      vi.mocked(basicTask.execute).mockResolvedValue(true)
+      await store.execute(basicTask)
+      expect(store.getRunner(basicTask).error).toBeUndefined()
+    })
+  })
+
+  describe('isRunningTerminalCommand', () => {
+    it('returns true while a terminal task is executing', async () => {
+      let resolveTask!: (value: boolean) => void
+      vi.mocked(terminalTask.execute).mockReturnValue(
+        new Promise<boolean>((resolve) => {
+          resolveTask = resolve
+        })
+      )
+
+      const executePromise = store.execute(terminalTask)
+      expect(store.isRunningTerminalCommand).toBe(true)
+
+      resolveTask(true)
+      await executePromise
+      expect(store.isRunningTerminalCommand).toBe(false)
+    })
+
+    it('returns false when no terminal tasks are executing', () => {
+      expect(store.isRunningTerminalCommand).toBe(false)
+    })
+  })
+
+  describe('isRunningInstallationFix', () => {
+    it('returns true while an installation-fix task is executing', async () => {
+      let resolveTask!: (value: boolean) => void
+      vi.mocked(terminalTask.execute).mockReturnValue(
+        new Promise<boolean>((resolve) => {
+          resolveTask = resolve
+        })
+      )
+
+      const executePromise = store.execute(terminalTask)
+      expect(store.isRunningInstallationFix).toBe(true)
+
+      resolveTask(true)
+      await executePromise
+      expect(store.isRunningInstallationFix).toBe(false)
+    })
+  })
+})
diff --git a/apps/desktop-ui/src/test/setup.ts b/apps/desktop-ui/src/test/setup.ts
new file mode 100644
index 0000000000..a9d0dd31aa
--- /dev/null
+++ b/apps/desktop-ui/src/test/setup.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest'
diff --git a/apps/desktop-ui/src/test/withSetup.ts b/apps/desktop-ui/src/test/withSetup.ts
new file mode 100644
index 0000000000..4b4f951fdc
--- /dev/null
+++ b/apps/desktop-ui/src/test/withSetup.ts
@@ -0,0 +1,16 @@
+import { render } from '@testing-library/vue'
+import { defineComponent } from 'vue'
+
+export function withSetup<T>(composable: () => T): T {
+  let result!: T
+  render(
+    defineComponent({
+      setup() {
+        result = composable()
+        return {}
+      },
+      template: '<div />'
+    })
+  )
+  return result
+}
diff --git a/apps/desktop-ui/src/utils/electronMirrorCheck.test.ts b/apps/desktop-ui/src/utils/electronMirrorCheck.test.ts
new file mode 100644
index 0000000000..714f2447dc
--- /dev/null
+++ b/apps/desktop-ui/src/utils/electronMirrorCheck.test.ts
@@ -0,0 +1,52 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { mockElectron } = vi.hoisted(() => ({
+  mockElectron: {
+    NetWork: {
+      canAccessUrl: vi.fn<[url: string], Promise<boolean>>()
+    }
+  }
+}))
+
+vi.mock('@/utils/envUtil', () => ({
+  electronAPI: vi.fn(() => mockElectron)
+}))
+
+import { checkMirrorReachable } from '@/utils/electronMirrorCheck'
+
+describe('checkMirrorReachable', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('returns false for an invalid URL without calling canAccessUrl', async () => {
+    const result = await checkMirrorReachable('not-a-url')
+    expect(result).toBe(false)
+    expect(mockElectron.NetWork.canAccessUrl).not.toHaveBeenCalled()
+  })
+
+  it('returns false when canAccessUrl returns false', async () => {
+    mockElectron.NetWork.canAccessUrl.mockResolvedValue(false)
+    const result = await checkMirrorReachable('https://example.com')
+    expect(result).toBe(false)
+  })
+
+  it('returns true when URL is valid and canAccessUrl returns true', async () => {
+    mockElectron.NetWork.canAccessUrl.mockResolvedValue(true)
+    const result = await checkMirrorReachable('https://example.com')
+    expect(result).toBe(true)
+  })
+
+  it('passes the mirror URL to canAccessUrl', async () => {
+    const url = 'https://pypi.org/simple/'
+    mockElectron.NetWork.canAccessUrl.mockResolvedValue(true)
+    await checkMirrorReachable(url)
+    expect(mockElectron.NetWork.canAccessUrl).toHaveBeenCalledWith(url)
+  })
+
+  it('returns false for empty string', async () => {
+    const result = await checkMirrorReachable('')
+    expect(result).toBe(false)
+    expect(mockElectron.NetWork.canAccessUrl).not.toHaveBeenCalled()
+  })
+})
diff --git a/apps/desktop-ui/src/utils/envUtil.test.ts b/apps/desktop-ui/src/utils/envUtil.test.ts
new file mode 100644
index 0000000000..5906664f8e
--- /dev/null
+++ b/apps/desktop-ui/src/utils/envUtil.test.ts
@@ -0,0 +1,72 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { isElectron, isNativeWindow } from '@/utils/envUtil'
+
+describe('isElectron', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('returns true when window.electronAPI is an object', () => {
+    vi.stubGlobal('window', { ...window, electronAPI: {} })
+    expect(isElectron()).toBe(true)
+  })
+
+  it('returns false when window.electronAPI is undefined', () => {
+    vi.stubGlobal('window', { ...window, electronAPI: undefined })
+    expect(isElectron()).toBe(false)
+  })
+
+  it('returns false when window.electronAPI is absent', () => {
+    const copy = { ...window } as Record<string, unknown>
+    delete copy['electronAPI']
+    vi.stubGlobal('window', copy)
+    expect(isElectron()).toBe(false)
+  })
+})
+
+describe('isNativeWindow', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('returns true when Electron and windowControlsOverlay.visible is true', () => {
+    vi.stubGlobal('window', {
+      ...window,
+      electronAPI: {},
+      navigator: {
+        ...window.navigator,
+        windowControlsOverlay: { visible: true }
+      }
+    })
+    expect(isNativeWindow()).toBe(true)
+  })
+
+  it('returns false when not in Electron', () => {
+    const copy = { ...window } as Record<string, unknown>
+    delete copy['electronAPI']
+    vi.stubGlobal('window', copy)
+    expect(isNativeWindow()).toBe(false)
+  })
+
+  it('returns false when windowControlsOverlay.visible is false', () => {
+    vi.stubGlobal('window', {
+      ...window,
+      electronAPI: {},
+      navigator: {
+        ...window.navigator,
+        windowControlsOverlay: { visible: false }
+      }
+    })
+    expect(isNativeWindow()).toBe(false)
+  })
+
+  it('returns false when windowControlsOverlay is absent', () => {
+    vi.stubGlobal('window', {
+      ...window,
+      electronAPI: {},
+      navigator: { ...window.navigator, windowControlsOverlay: undefined }
+    })
+    expect(isNativeWindow()).toBe(false)
+  })
+})
diff --git a/apps/desktop-ui/src/utils/refUtil.test.ts b/apps/desktop-ui/src/utils/refUtil.test.ts
new file mode 100644
index 0000000000..3c9f9d11bd
--- /dev/null
+++ b/apps/desktop-ui/src/utils/refUtil.test.ts
@@ -0,0 +1,102 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { computed, nextTick, ref } from 'vue'
+
+import { withSetup } from '@/test/withSetup'
+import { useMinLoadingDurationRef } from '@/utils/refUtil'
+
+describe('useMinLoadingDurationRef', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('reflects false when source is initially false', () => {
+    const source = ref(false)
+    const result = withSetup(() => useMinLoadingDurationRef(source))
+    expect(result.value).toBe(false)
+  })
+
+  it('reflects true when source is initially true', () => {
+    const source = ref(true)
+    const result = withSetup(() => useMinLoadingDurationRef(source))
+    expect(result.value).toBe(true)
+  })
+
+  it('becomes true immediately when source transitions to true', async () => {
+    const source = ref(false)
+    const result = withSetup(() => useMinLoadingDurationRef(source))
+    source.value = true
+    await nextTick()
+    expect(result.value).toBe(true)
+  })
+
+  it('stays true within minDuration after source returns to false', async () => {
+    const source = ref(false)
+    const result = withSetup(() => useMinLoadingDurationRef(source, 250))
+
+    source.value = true
+    await nextTick()
+    source.value = false
+    await nextTick()
+
+    vi.advanceTimersByTime(100)
+    await nextTick()
+    expect(result.value).toBe(true)
+  })
+
+  it('becomes false after minDuration has elapsed', async () => {
+    const source = ref(false)
+    const result = withSetup(() => useMinLoadingDurationRef(source, 250))
+
+    source.value = true
+    await nextTick()
+    source.value = false
+    await nextTick()
+
+    vi.advanceTimersByTime(250)
+    await nextTick()
+    expect(result.value).toBe(false)
+  })
+
+  it('remains true while source is true even after minDuration elapses', async () => {
+    const source = ref(false)
+    const result = withSetup(() => useMinLoadingDurationRef(source, 250))
+
+    source.value = true
+    await nextTick()
+    vi.advanceTimersByTime(500)
+    await nextTick()
+    expect(result.value).toBe(true)
+  })
+
+  it('works with a computed ref as input', async () => {
+    const raw = ref(false)
+    const source = computed(() => raw.value)
+    const result = withSetup(() => useMinLoadingDurationRef(source))
+
+    raw.value = true
+    await nextTick()
+    expect(result.value).toBe(true)
+  })
+
+  it('uses 250ms as default minDuration', async () => {
+    const source = ref(false)
+    const result = withSetup(() => useMinLoadingDurationRef(source))
+
+    source.value = true
+    await nextTick()
+    source.value = false
+    await nextTick()
+
+    vi.advanceTimersByTime(249)
+    await nextTick()
+    expect(result.value).toBe(true)
+
+    vi.advanceTimersByTime(1)
+    await nextTick()
+    expect(result.value).toBe(false)
+  })
+})
diff --git a/apps/desktop-ui/tsconfig.json b/apps/desktop-ui/tsconfig.json
index 81665ab5cd..47f5c2bb71 100644
--- a/apps/desktop-ui/tsconfig.json
+++ b/apps/desktop-ui/tsconfig.json
@@ -13,7 +13,8 @@
     "src/**/*.ts",
     "src/**/*.vue",
     "src/**/*.d.ts",
-    "vite.config.mts"
+    "vite.config.mts",
+    "vitest.config.mts"
   ],
   "references": []
 }
diff --git a/apps/desktop-ui/vitest.config.mts b/apps/desktop-ui/vitest.config.mts
new file mode 100644
index 0000000000..c38cefe9f4
--- /dev/null
+++ b/apps/desktop-ui/vitest.config.mts
@@ -0,0 +1,22 @@
+import vue from '@vitejs/plugin-vue'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from 'vitest/config'
+
+const projectRoot = fileURLToPath(new URL('.', import.meta.url))
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': path.resolve(projectRoot, 'src'),
+      '@frontend-locales': path.resolve(projectRoot, '../../src/locales')
+    }
+  },
+  test: {
+    globals: true,
+    environment: 'happy-dom',
+    include: ['src/**/*.{test,spec}.{ts,tsx}'],
+    setupFiles: ['./src/test/setup.ts']
+  }
+})
diff --git a/apps/website/.gitignore b/apps/website/.gitignore
index ac5d2bcab8..a7e80c6c56 100644
--- a/apps/website/.gitignore
+++ b/apps/website/.gitignore
@@ -1,2 +1,3 @@
 dist/
 .astro/
+test-results/
diff --git a/apps/website/astro.config.ts b/apps/website/astro.config.ts
index 188b3bb48a..ca3bdabcd3 100644
--- a/apps/website/astro.config.ts
+++ b/apps/website/astro.config.ts
@@ -1,19 +1,15 @@
 import { defineConfig } from 'astro/config'
+import sitemap from '@astrojs/sitemap'
 import vue from '@astrojs/vue'
 import tailwindcss from '@tailwindcss/vite'
 
 export default defineConfig({
   site: 'https://comfy.org',
   output: 'static',
-  integrations: [vue()],
+  integrations: [vue(), sitemap()],
   vite: {
     plugins: [tailwindcss()]
   },
-  build: {
-    assetsPrefix: process.env.VERCEL_URL
-      ? `https://${process.env.VERCEL_URL}`
-      : undefined
-  },
   i18n: {
     locales: ['en', 'zh-CN'],
     defaultLocale: 'en',
diff --git a/apps/website/e2e/homepage.spec.ts b/apps/website/e2e/homepage.spec.ts
new file mode 100644
index 0000000000..c60df2486b
--- /dev/null
+++ b/apps/website/e2e/homepage.spec.ts
@@ -0,0 +1,130 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('Homepage @smoke', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/')
+  })
+
+  test('has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('Comfy — Professional Control of Visual AI')
+  })
+
+  test('HeroSection heading is visible', async ({ page }) => {
+    await expect(
+      page.getByRole('heading', { name: /Professional Control/i, level: 1 })
+    ).toBeVisible()
+  })
+
+  test('SocialProofBar logos are visible', async ({ page }) => {
+    await expect(
+      page.locator('img[src*="/icons/clients/"]').first()
+    ).toBeVisible()
+  })
+
+  test('ProductShowcase section is visible', async ({ page }) => {
+    await expect(page.getByText('HOW', { exact: true }).first()).toBeVisible()
+    await expect(
+      page.getByText(/Connect models, processing steps, and outputs/)
+    ).toBeVisible()
+  })
+
+  test('UseCaseSection is visible', async ({ page }) => {
+    await expect(
+      page.getByText('Industries that create with ComfyUI')
+    ).toBeVisible()
+  })
+
+  test('GetStartedSection with heading is visible', async ({ page }) => {
+    await expect(
+      page.getByRole('heading', { name: 'Get started in minutes' })
+    ).toBeVisible()
+  })
+
+  test('ProductCardsSection has 4 product cards', async ({ page }) => {
+    const section = page.locator('section', {
+      has: page.getByRole('heading', { name: /The AI creation/ })
+    })
+    const cards = section.locator('a[href]')
+    await expect(cards).toHaveCount(4)
+  })
+
+  test('CaseStudySpotlight section is visible', async ({ page }) => {
+    const section = page.locator('section', {
+      has: page.getByText('Customer Stories')
+    })
+    await expect(section).toBeVisible()
+    await expect(
+      section.getByRole('heading', { name: /See Comfy/i })
+    ).toBeVisible()
+  })
+
+  test('BuildWhatSection is visible', async ({ page }) => {
+    // "DOESN'T EXIST" is the actual badge text rendered in the Build What section
+    await expect(page.getByText("DOESN'T EXIST")).toBeVisible()
+  })
+})
+
+test.describe('Product showcase accordion @interaction', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/')
+  })
+
+  test('first feature is active by default', async ({ page }) => {
+    await expect(
+      page.getByText(/Build powerful AI pipelines by connecting nodes/).first()
+    ).toBeVisible()
+  })
+
+  test('clicking inactive feature expands it and collapses previous', async ({
+    page
+  }) => {
+    const secondFeature = page
+      .getByRole('button', { name: /App mode/i })
+      .first()
+
+    await secondFeature.scrollIntoViewIfNeeded()
+
+    await expect(async () => {
+      await secondFeature.click()
+      await expect(
+        page.getByText(/If you are new to ComfyUI/).first()
+      ).toBeVisible({ timeout: 1000 })
+    }).toPass({ timeout: 10000 })
+
+    await expect(
+      page.getByText(/Build powerful AI pipelines by connecting nodes/).first()
+    ).toBeHidden()
+  })
+})
+
+test.describe('Product cards links @smoke', () => {
+  test('cards have correct hrefs', async ({ page }) => {
+    await page.goto('/')
+
+    const section = page.locator('section', {
+      has: page.getByRole('heading', { name: /The AI creation/ })
+    })
+
+    for (const href of ['/download', '/cloud', '/api', '/cloud/enterprise']) {
+      await expect(section.locator(`a[href="${href}"]`)).toBeVisible()
+    }
+  })
+})
+
+test.describe('Get started section links @smoke', () => {
+  test('has download and cloud links', async ({ page }) => {
+    await page.goto('/')
+
+    const section = page.locator('section', {
+      has: page.getByRole('heading', { name: 'Get started in minutes' })
+    })
+
+    const downloadLink = section.getByRole('link', { name: 'Download Local' })
+    await expect(downloadLink).toBeVisible()
+    await expect(downloadLink).toHaveAttribute('href', '/download')
+
+    const cloudLink = section.getByRole('link', { name: 'Launch Cloud' })
+    await expect(cloudLink).toBeVisible()
+    await expect(cloudLink).toHaveAttribute('href', 'https://app.comfy.org')
+  })
+})
diff --git a/apps/website/e2e/navigation.spec.ts b/apps/website/e2e/navigation.spec.ts
new file mode 100644
index 0000000000..895e92a7c3
--- /dev/null
+++ b/apps/website/e2e/navigation.spec.ts
@@ -0,0 +1,161 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('Desktop navigation @smoke', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/')
+  })
+
+  test('logo links to homepage', async ({ page }) => {
+    const logo = page.getByRole('link', { name: 'Comfy home' })
+    await expect(logo).toBeVisible()
+    await expect(logo).toHaveAttribute('href', '/')
+  })
+
+  test('has all top-level nav items', async ({ page }) => {
+    const nav = page.getByRole('navigation', { name: 'Main navigation' })
+    const desktopLinks = nav.getByTestId('desktop-nav-links')
+
+    for (const label of [
+      'PRODUCTS',
+      'PRICING',
+      'COMMUNITY',
+      'RESOURCES',
+      'COMPANY'
+    ]) {
+      await expect(desktopLinks.getByText(label).first()).toBeVisible()
+    }
+  })
+
+  test('CTA buttons are visible', async ({ page }) => {
+    const nav = page.getByRole('navigation', { name: 'Main navigation' })
+    const desktopCTA = nav.getByTestId('desktop-nav-cta')
+    await expect(
+      desktopCTA.getByRole('link', { name: 'DOWNLOAD LOCAL' })
+    ).toBeVisible()
+    await expect(
+      desktopCTA.getByRole('link', { name: 'LAUNCH CLOUD' })
+    ).toBeVisible()
+  })
+})
+
+test.describe('Desktop dropdown @interaction', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/')
+  })
+
+  test('hovering PRODUCTS shows dropdown items', async ({ page }) => {
+    const nav = page.getByRole('navigation', { name: 'Main navigation' })
+    const desktopLinks = nav.getByTestId('desktop-nav-links')
+    const productsButton = desktopLinks.getByRole('button', {
+      name: /PRODUCTS/i
+    })
+    await productsButton.hover()
+
+    const dropdown = productsButton.locator('..').getByTestId('nav-dropdown')
+    for (const item of [
+      'Comfy Local',
+      'Comfy Cloud',
+      'Comfy API',
+      'Comfy Enterprise'
+    ]) {
+      await expect(dropdown.getByText(item)).toBeVisible()
+    }
+  })
+
+  test('moving mouse away closes dropdown', async ({ page }) => {
+    const nav = page.getByRole('navigation', { name: 'Main navigation' })
+    const desktopLinks = nav.getByTestId('desktop-nav-links')
+    await desktopLinks.getByRole('button', { name: /PRODUCTS/i }).hover()
+
+    const comfyLocal = nav.getByRole('link', { name: 'Comfy Local' }).first()
+    await expect(comfyLocal).toBeVisible()
+
+    await page.locator('main').hover()
+    await expect(comfyLocal).toBeHidden()
+  })
+
+  test('Escape key closes dropdown', async ({ page }) => {
+    const nav = page.getByRole('navigation', { name: 'Main navigation' })
+    const desktopLinks = nav.getByTestId('desktop-nav-links')
+    await desktopLinks.getByRole('button', { name: /PRODUCTS/i }).hover()
+
+    const comfyLocal = nav.getByRole('link', { name: 'Comfy Local' }).first()
+    await expect(comfyLocal).toBeVisible()
+
+    await page.keyboard.press('Escape')
+    await expect(comfyLocal).toBeHidden()
+  })
+})
+
+test.describe('Mobile menu @mobile', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/')
+  })
+
+  test('hamburger button is visible', async ({ page }) => {
+    await expect(
+      page.getByRole('button', { name: 'Toggle menu' })
+    ).toBeVisible()
+  })
+
+  test('clicking hamburger opens mobile menu with nav items', async ({
+    page
+  }) => {
+    await page.getByRole('button', { name: 'Toggle menu' }).click()
+
+    const menu = page.locator('#site-mobile-menu')
+    await expect(menu).toBeVisible()
+
+    for (const label of ['PRODUCTS', 'PRICING', 'COMMUNITY']) {
+      await expect(menu.getByText(label).first()).toBeVisible()
+    }
+  })
+
+  test('clicking section with subitems drills down and back works', async ({
+    page
+  }) => {
+    await page.getByRole('button', { name: 'Toggle menu' }).click()
+
+    const menu = page.locator('#site-mobile-menu')
+    await menu.getByText('PRODUCTS').first().click()
+
+    await expect(menu.getByText('Comfy Local')).toBeVisible()
+    await expect(menu.getByText('Comfy Cloud')).toBeVisible()
+
+    await menu.getByRole('button', { name: /BACK/i }).click()
+    await expect(menu.getByText('PRODUCTS').first()).toBeVisible()
+  })
+
+  test('CTA buttons visible in mobile menu', async ({ page }) => {
+    await page.getByRole('button', { name: 'Toggle menu' }).click()
+
+    const menu = page.locator('#site-mobile-menu')
+    await expect(
+      menu.getByRole('link', { name: 'DOWNLOAD LOCAL' })
+    ).toBeVisible()
+    await expect(menu.getByRole('link', { name: 'LAUNCH CLOUD' })).toBeVisible()
+  })
+})
+
+test.describe('Footer @smoke', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/')
+  })
+
+  test('footer is visible with link sections', async ({ page }) => {
+    const footer = page.locator('footer')
+    await expect(footer).toBeVisible()
+
+    for (const heading of ['Products', 'Resources', 'Company']) {
+      await expect(
+        footer.getByRole('heading', { name: heading }).first()
+      ).toBeVisible()
+    }
+  })
+
+  test('copyright text is visible', async ({ page }) => {
+    await expect(
+      page.locator('footer').getByText(/© \d{4} Comfy Org/)
+    ).toBeVisible()
+  })
+})
diff --git a/apps/website/e2e/responsive.spec.ts b/apps/website/e2e/responsive.spec.ts
new file mode 100644
index 0000000000..ab6d127067
--- /dev/null
+++ b/apps/website/e2e/responsive.spec.ts
@@ -0,0 +1,48 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('Desktop layout @smoke', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/')
+  })
+
+  test('navigation links visible and hamburger hidden', async ({ page }) => {
+    const nav = page.getByRole('navigation', { name: 'Main navigation' })
+    const desktopLinks = nav.getByTestId('desktop-nav-links')
+    await expect(desktopLinks.getByText('PRODUCTS').first()).toBeVisible()
+    await expect(desktopLinks.getByText('PRICING').first()).toBeVisible()
+
+    await expect(page.getByRole('button', { name: 'Toggle menu' })).toBeHidden()
+  })
+
+  test('product cards in grid layout', async ({ page }) => {
+    const section = page.locator('section', {
+      has: page.getByRole('heading', { name: /The AI creation/ })
+    })
+    const cards = section.locator('a[href]')
+    await expect(cards).toHaveCount(4)
+
+    const firstBox = await cards.nth(0).boundingBox()
+    const secondBox = await cards.nth(1).boundingBox()
+
+    expect(firstBox, 'first card bounding box').not.toBeNull()
+    expect(secondBox, 'second card bounding box').not.toBeNull()
+    expect(firstBox!.y).toBeCloseTo(secondBox!.y, 0)
+  })
+})
+
+test.describe('Mobile layout @mobile', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/')
+  })
+
+  test('hamburger visible and desktop nav hidden', async ({ page }) => {
+    await expect(
+      page.getByRole('button', { name: 'Toggle menu' })
+    ).toBeVisible()
+  })
+
+  test('SocialProofBar shows two marquee rows on mobile', async ({ page }) => {
+    const mobileContainer = page.getByTestId('social-proof-mobile')
+    await expect(mobileContainer).toBeVisible()
+  })
+})
diff --git a/apps/website/package.json b/apps/website/package.json
index f300242b2b..36bbb73060 100644
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -6,15 +6,24 @@
   "scripts": {
     "dev": "astro dev",
     "build": "astro build",
-    "preview": "astro preview"
+    "preview": "astro preview",
+    "typecheck": "astro check",
+    "test:e2e": "playwright test",
+    "test:e2e:local": "PLAYWRIGHT_LOCAL=1 playwright test"
   },
   "dependencies": {
+    "@astrojs/sitemap": "catalog:",
     "@comfyorg/design-system": "workspace:*",
+    "@comfyorg/tailwind-utils": "workspace:*",
     "@vercel/analytics": "catalog:",
+    "gsap": "catalog:",
+    "lenis": "catalog:",
     "vue": "catalog:"
   },
   "devDependencies": {
+    "@astrojs/check": "catalog:",
     "@astrojs/vue": "catalog:",
+    "@playwright/test": "catalog:",
     "@tailwindcss/vite": "catalog:",
     "astro": "catalog:",
     "tailwindcss": "catalog:",
@@ -74,6 +83,16 @@
           "cwd": "apps/website",
           "command": "astro check"
         }
+      },
+      "test:e2e": {
+        "executor": "nx:run-commands",
+        "dependsOn": [
+          "build"
+        ],
+        "options": {
+          "cwd": "apps/website",
+          "command": "playwright test"
+        }
       }
     }
   }
diff --git a/apps/website/playwright.config.ts b/apps/website/playwright.config.ts
new file mode 100644
index 0000000000..62eb091815
--- /dev/null
+++ b/apps/website/playwright.config.ts
@@ -0,0 +1,30 @@
+import { defineConfig, devices } from '@playwright/test'
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:4321',
+    trace: process.env.CI ? 'on-first-retry' : 'on'
+  },
+  webServer: {
+    command: 'pnpm preview',
+    port: 4321,
+    reuseExistingServer: !process.env.CI
+  },
+  projects: [
+    {
+      name: 'desktop',
+      use: { ...devices['Desktop Chrome'] },
+      grepInvert: /@mobile/
+    },
+    {
+      name: 'mobile',
+      use: { ...devices['Pixel 5'] },
+      grep: /@mobile/
+    }
+  ]
+})
diff --git a/apps/website/public/fonts/PPFormula-Bold.woff2 b/apps/website/public/fonts/PPFormula-Bold.woff2
new file mode 100644
index 0000000000..faec417e06
Binary files /dev/null and b/apps/website/public/fonts/PPFormula-Bold.woff2 differ
diff --git a/apps/website/public/fonts/PPFormula-CondensedSemibold.woff2 b/apps/website/public/fonts/PPFormula-CondensedSemibold.woff2
new file mode 100644
index 0000000000..e39dfc2782
Binary files /dev/null and b/apps/website/public/fonts/PPFormula-CondensedSemibold.woff2 differ
diff --git a/apps/website/public/fonts/PPFormula-Light.woff2 b/apps/website/public/fonts/PPFormula-Light.woff2
new file mode 100644
index 0000000000..b8fbcb155b
Binary files /dev/null and b/apps/website/public/fonts/PPFormula-Light.woff2 differ
diff --git a/apps/website/public/fonts/PPFormula-Medium.woff2 b/apps/website/public/fonts/PPFormula-Medium.woff2
new file mode 100644
index 0000000000..3065394cb0
Binary files /dev/null and b/apps/website/public/fonts/PPFormula-Medium.woff2 differ
diff --git a/apps/website/public/fonts/PPFormula-Regular.woff2 b/apps/website/public/fonts/PPFormula-Regular.woff2
new file mode 100644
index 0000000000..9d5610d018
Binary files /dev/null and b/apps/website/public/fonts/PPFormula-Regular.woff2 differ
diff --git a/apps/website/public/fonts/PPFormula-Semibold.woff2 b/apps/website/public/fonts/PPFormula-Semibold.woff2
new file mode 100644
index 0000000000..54b89c53f8
Binary files /dev/null and b/apps/website/public/fonts/PPFormula-Semibold.woff2 differ
diff --git a/apps/website/public/fonts/inter-latin-italic.woff2 b/apps/website/public/fonts/inter-latin-italic.woff2
deleted file mode 100644
index 39eb636735..0000000000
Binary files a/apps/website/public/fonts/inter-latin-italic.woff2 and /dev/null differ
diff --git a/apps/website/public/fonts/inter-latin-normal.woff2 b/apps/website/public/fonts/inter-latin-normal.woff2
deleted file mode 100644
index b0d0e2e5c6..0000000000
Binary files a/apps/website/public/fonts/inter-latin-normal.woff2 and /dev/null differ
diff --git a/apps/website/public/icons/arrow-up-right.svg b/apps/website/public/icons/arrow-up-right.svg
new file mode 100644
index 0000000000..d74a0c9f3c
--- /dev/null
+++ b/apps/website/public/icons/arrow-up-right.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f2ff59" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M7 17L17 7" />
+  <path d="M7 7h10v10" />
+</svg>
diff --git a/apps/website/public/icons/breadthumb.svg b/apps/website/public/icons/breadthumb.svg
new file mode 100644
index 0000000000..aebdec5c1e
--- /dev/null
+++ b/apps/website/public/icons/breadthumb.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 1C20 1.55228 19.5523 2 19 2H17.5C16.6716 2 16 2.67157 16 3.5C16 4.32843 16.6716 5 17.5 5H19C19.5523 5 20 5.44772 20 6C20 6.55228 19.5523 7 19 7H7.5C6.67157 7 6 7.67157 6 8.5C6 9.32843 6.67157 10 7.5 10H19C19.5523 10 20 10.4477 20 11C20 11.5523 19.5523 12 19 12H1C0.447715 12 0 11.5523 0 11C0 10.4477 0.447715 10 1 10H2.5C3.32843 10 4 9.32843 4 8.5C4 7.67157 3.32843 7 2.5 7H1C0.447715 7 0 6.55228 0 6C0 5.44772 0.447715 5 1 5H12.5C13.3284 5 14 4.32843 14 3.5C14 2.67157 13.3284 2 12.5 2H1C0.447716 2 0 1.55228 0 1C0 0.447715 0.447715 0 1 0H19C19.5523 0 20 0.447715 20 1Z" fill="#211927"/>
+</svg>
diff --git a/apps/website/public/icons/clients/Amazon Studios.svg b/apps/website/public/icons/clients/Amazon Studios.svg
new file mode 100644
index 0000000000..7a03e64387
--- /dev/null
+++ b/apps/website/public/icons/clients/Amazon Studios.svg	
@@ -0,0 +1,3 @@
+<svg width="170" height="36" viewBox="0 0 170 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M82.3421 0.00446627C82.1744 0.0266512 81.9992 0.0110747 81.8302 0.0227314C81.5279 0.0435753 81.2244 0.081875 80.9262 0.13815C79.6582 0.377421 78.4637 1.00373 77.6073 1.98531C77.0092 2.67075 76.5948 3.49706 76.3296 4.3657C76.0905 5.14861 75.9945 5.95395 75.9591 6.76804C75.8686 8.85015 76.373 11.1464 77.9201 12.6363C79.4002 14.0618 81.5241 14.4979 83.5076 14.2352C84.1722 14.1472 84.8282 13.9702 85.4354 13.6813C85.8427 13.4875 86.2292 13.245 86.579 12.9592C88.3661 11.4987 88.9423 9.10962 88.8883 6.88871C88.8684 6.07292 88.774 5.26191 88.5459 4.4754C88.2652 3.50803 87.7852 2.59349 87.1009 1.85367C86.2014 0.881172 84.9455 0.287878 83.6492 0.0955586C83.3135 0.0457628 82.9755 0.0107807 82.6362 0.0107807C82.5382 0.0107807 82.4398 -0.00845883 82.3421 0.00446627ZM0 13.9641H2.21104L2.37917 13.9528L2.46518 13.7228L3.21336 11.3753L3.47449 10.5416H8.48472C8.57972 10.5416 8.80365 10.4996 8.88316 10.5529C8.9351 10.5876 8.95237 10.7149 8.97123 10.7719L9.95149 13.7337C9.97118 13.7932 9.98539 13.9012 10.0297 13.9465C10.0633 13.9809 10.1509 13.9641 10.1947 13.9641H12.4167L7.61673 0.53732L7.52196 0.32455L7.35198 0.317929H5.11915L4.95572 0.335518L4.83135 0.657986L0 13.9641ZM19.6053 0.317929V13.9641H21.7945V3.79529H21.8054L24.2861 8.7316L24.9396 10.026L25.1138 10.377L25.2072 10.5303L25.3453 10.5416H27.2078L27.3533 10.5303L27.4283 10.399L30.576 4.32183L30.8565 3.76238H30.8674V13.9641H33.0676V0.317929H30.6714C30.6215 0.317929 30.5248 0.299315 30.4823 0.3292C30.4338 0.363295 30.4059 0.463232 30.38 0.515378C30.307 0.662353 30.2298 0.807117 30.1568 0.954162C29.8974 1.4762 29.6209 1.98969 29.3617 2.51184C28.7187 3.80701 28.0735 5.11043 27.3896 6.38411C27.1702 6.79255 26.9772 7.21526 26.7578 7.62367C26.6204 7.87964 26.4273 8.16663 26.3473 8.44638H26.3255L26.0232 7.82112L22.5814 0.943192L22.3636 0.504408L22.2668 0.3292L22.0668 0.317929H19.6053ZM40.2562 13.9641H42.4672L42.6353 13.9528L42.7213 13.7228L43.4695 11.3753L43.7307 10.5416H48.7409C48.8359 10.5416 49.0598 10.4996 49.1393 10.5529C49.1913 10.5876 49.2085 10.7149 49.2274 10.7719L50.2076 13.7337C50.2273 13.7932 50.2416 13.9012 50.2858 13.9465C50.3194 13.9809 50.4071 13.9641 50.4509 13.9641H52.6728L47.8729 0.53732L47.7781 0.32455L47.6081 0.317929H45.3753L45.2119 0.335518L45.0875 0.657986L40.2562 13.9641ZM59.8723 0.317929V2.24858H66.9629C66.7583 2.56035 66.5115 2.85091 66.2863 3.14808C65.8935 3.6667 65.5029 4.18714 65.11 4.70576C64.0008 6.16994 62.8998 7.64038 61.7905 9.10456C61.2539 9.81295 60.7268 10.5294 60.1836 11.2327C60.0127 11.4538 59.8446 11.6776 59.6777 11.9018C59.6123 11.9896 59.4983 12.0929 59.4646 12.198C59.4154 12.3514 59.4584 12.5851 59.4584 12.7465V13.9641H69.3591V12.1651L69.3416 12.0447L69.2066 12.0334H61.8546C62.3164 11.4474 62.7533 10.8402 63.204 10.2454C64.4074 8.65689 65.5957 7.05635 66.8066 5.47364C67.4024 4.69494 67.9802 3.90206 68.5795 3.12614C68.7643 2.88692 68.9457 2.64462 69.1263 2.40215C69.1956 2.30911 69.3205 2.19655 69.3535 2.08403C69.3997 1.92662 69.3591 1.69985 69.3591 1.53555V0.317931L59.8723 0.317929ZM96.8718 0.317931V13.9641H99.0611V3.67462H99.072L99.231 3.95983L99.5534 4.49734L104.762 13.2072L105.076 13.7337L105.219 13.9528L105.422 13.9641H107.818V0.317929H105.629V10.6074L99.952 1.11871L99.6187 0.55926L99.4708 0.329204L99.268 0.317933L96.8718 0.317931ZM82.1025 2.02135C82.4674 1.97798 82.8628 2.02305 83.2244 2.07307C83.549 2.11799 83.8711 2.213 84.172 2.34268C84.3869 2.43534 84.5925 2.55426 84.7819 2.69202C86.2745 3.77742 86.5343 5.86329 86.4597 7.57979C86.3965 9.03281 86.0675 10.6542 84.8364 11.5768C84.6039 11.751 84.3524 11.8907 84.0848 12.0021C83.7506 12.1412 83.3872 12.2233 83.0283 12.262C81.8598 12.388 80.6144 12.1729 79.7281 11.3414C79.1794 10.8266 78.8311 10.1106 78.6373 9.38978C78.4847 8.82248 78.4134 8.24183 78.388 7.65658C78.3192 6.07403 78.4903 4.21199 79.6646 3.02928C80.0966 2.59415 80.6514 2.29742 81.2421 2.1487C81.527 2.07696 81.8129 2.05578 82.1025 2.02135ZM6.18656 2.50088C6.3047 2.68998 6.34842 2.95948 6.42282 3.17002C6.60183 3.67658 6.76662 4.18824 6.94563 4.6948C7.26501 5.59858 7.56614 6.50898 7.87854 7.41525L8.1944 8.3367C8.24413 8.48097 8.32098 8.63535 8.34313 8.78645H4.05176C4.07834 8.60775 4.16916 8.41936 4.22938 8.24894C4.32716 7.97226 4.41479 7.69194 4.51256 7.41525C4.80837 6.57819 5.08511 5.73326 5.36963 4.89225C5.55651 4.33986 5.74227 3.7871 5.93229 3.23584C6.01114 3.00711 6.05888 2.70524 6.18656 2.50088ZM46.4427 2.50088C46.5609 2.68996 46.6046 2.95949 46.679 3.17002C46.858 3.67659 47.0228 4.18823 47.2018 4.6948C47.5211 5.59858 47.8223 6.50898 48.1347 7.41525L48.4505 8.3367C48.5003 8.48097 48.5771 8.63535 48.5993 8.78645H44.3079C44.3345 8.60775 44.4253 8.41936 44.4855 8.24894C44.5833 7.97226 44.6709 7.69194 44.7687 7.41525C45.0645 6.57818 45.3413 5.73326 45.6258 4.89225C45.8127 4.33986 45.9984 3.78711 46.1884 3.23584C46.2673 3.00712 46.315 2.70522 46.4427 2.50088ZM30.7912 22.1693C30.54 22.3185 30.2759 22.4575 29.9852 22.5046C29.4295 22.5945 28.8321 22.4147 28.286 22.3238C27.7965 22.2423 27.2996 22.2036 26.8048 22.1914C24.4413 22.1331 22.1643 23.4016 20.932 25.4273C19.2885 28.129 19.6182 31.9411 21.9579 34.1362C22.6203 34.7576 23.4142 35.239 24.267 35.5446C26.9581 36.5093 29.9489 35.8326 32.4032 34.5321C32.3813 34.4041 32.3065 34.2809 32.2621 34.1591C32.1855 33.9485 32.1216 33.7315 32.0764 33.5119C31.9687 32.9882 31.9784 32.4641 31.9784 31.9323C31.9784 31.4011 31.9711 30.8582 32.1137 30.3417C32.2007 30.0265 32.3442 29.7342 32.5267 29.4641C32.6298 29.3116 32.8029 29.1458 32.8606 28.9705H28.3514C28.3953 29.0855 28.4953 29.1886 28.5661 29.2886C28.7198 29.5057 28.8797 29.7253 28.9907 29.9687C29.3243 30.7007 29.2445 31.5753 29.2445 32.3601V32.9634C29.2445 33.0335 29.2664 33.1486 29.238 33.2132C29.206 33.2858 29.0096 33.3238 28.9396 33.3473C28.6311 33.4509 28.3136 33.523 27.992 33.5697C26.5587 33.7777 25.0628 33.3742 24.1232 32.2065C22.4268 30.098 22.8484 26.2512 25.3997 25.0007C25.7684 24.82 26.1595 24.6945 26.5651 24.6312C27.8393 24.4322 29.2059 24.7924 30.301 25.4542C30.5545 25.6073 30.793 25.7845 31.0199 25.9749C31.1497 26.0838 31.291 26.245 31.4447 26.3158L31.3169 25.4712L31.0136 23.5405L30.8647 22.5862L30.7912 22.1693ZM149.011 22.1959C148.836 22.2191 148.654 22.2088 148.477 22.226C148.126 22.2603 147.773 22.3189 147.432 22.4094C145.842 22.8304 144.44 23.8219 143.532 25.2079C141.919 27.6723 142.013 31.0876 143.82 33.4241C144.245 33.9739 144.758 34.4544 145.33 34.8464C145.963 35.2808 146.679 35.5954 147.421 35.7866C148.269 36.0053 149.168 36.0478 150.035 35.9331C150.708 35.8439 151.368 35.6476 151.984 35.3624C154.472 34.2122 156.002 31.5147 155.883 28.784C155.841 27.8089 155.618 26.8457 155.195 25.9648C154.375 24.2583 152.841 22.9799 151.037 22.4577C150.567 22.3217 150.086 22.2458 149.599 22.2122C149.409 22.1991 149.201 22.1709 149.011 22.1959ZM66.4728 31.8445L66.579 32.4807L67.0563 35.267L67.1698 35.9142C67.4504 35.7823 67.6831 35.606 67.9976 35.5569C68.4273 35.4897 68.8615 35.5836 69.2829 35.6685C69.7849 35.7697 70.2866 35.8742 70.7968 35.9233C72.4951 36.0868 74.3533 35.5566 75.3567 34.0713C75.6582 33.6251 75.8641 33.1146 75.9407 32.5795C75.9894 32.2388 75.9976 31.8904 75.9564 31.5483C75.9203 31.2484 75.8522 30.9526 75.7437 30.6708C75.198 29.2519 73.7554 28.5448 72.4524 27.9816C71.8979 27.7419 71.3333 27.5194 70.8077 27.2184C70.4752 27.0281 70.1345 26.7978 69.9221 26.4694C69.5761 25.9343 69.6557 25.1592 70.1324 24.7271C70.4071 24.4781 70.8006 24.3505 71.1671 24.3415C72.275 24.3141 73.3609 24.8351 74.2822 25.41C74.6397 25.6331 74.9723 25.9127 75.3387 26.1184L74.818 23.376L74.6198 22.3229C74.4736 22.3492 74.3334 22.4597 74.1951 22.5154C73.9804 22.6019 73.7497 22.6328 73.5198 22.63C72.9915 22.6237 72.4707 22.4506 71.9513 22.3698C71.1211 22.2407 70.294 22.2249 69.4789 22.4592C68.6406 22.7002 67.8691 23.2065 67.3597 23.9245C66.3756 25.3112 66.4548 27.3835 67.6386 28.6304C68.6715 29.7183 70.1059 30.1446 71.4067 30.7997C72.0129 31.1049 72.7779 31.5143 72.9157 32.2504C73.1142 33.3105 72.06 33.9945 71.1236 33.9945C69.8273 33.9945 68.6901 33.4173 67.6382 32.6964C67.2431 32.4256 66.8776 32.0984 66.4728 31.8445ZM160.491 31.8445L161.188 35.9142C161.505 35.7765 161.748 35.5872 162.103 35.5444C162.498 35.4968 162.904 35.5885 163.29 35.6663C163.796 35.7682 164.301 35.8739 164.815 35.9233C166.536 36.089 168.405 35.542 169.407 34.0275C169.703 33.5817 169.905 33.0576 169.968 32.5246C170.011 32.1668 170.012 31.8071 169.964 31.4496C169.928 31.1825 169.858 30.9226 169.763 30.6708C169.232 29.2509 167.766 28.5414 166.471 27.9816C165.891 27.7308 165.293 27.5011 164.75 27.1737C164.416 26.9722 164.098 26.735 163.896 26.3926C163.597 25.8874 163.702 25.1483 164.129 24.7482C164.408 24.4866 164.807 24.3508 165.185 24.3415C166.355 24.3126 167.49 24.8891 168.453 25.5047C168.76 25.7007 169.048 25.9264 169.357 26.1184L169.17 25.1202L168.638 22.3229C168.488 22.3498 168.344 22.4635 168.202 22.5204C167.992 22.6049 167.763 22.6327 167.538 22.63C166.993 22.6235 166.451 22.4442 165.915 22.3605C165.093 22.232 164.269 22.2333 163.464 22.4702C162.617 22.7199 161.845 23.2441 161.341 23.9793C160.381 25.3787 160.506 27.4169 161.679 28.6524C162.7 29.7282 164.138 30.1518 165.425 30.7997C166.014 31.0964 166.775 31.4951 166.926 32.2065C166.954 32.3387 166.96 32.4676 166.951 32.6014C166.887 33.4846 165.982 33.9945 165.174 33.9945C163.835 33.9945 162.678 33.3868 161.591 32.6489C161.22 32.3969 160.879 32.0671 160.491 31.8445ZM1.16542 22.3229V32.5027C1.16542 33.1182 1.18156 33.7491 1.00832 34.3456C0.896637 34.7301 0.659642 35.0576 0.413883 35.3657C0.304466 35.5029 0.138074 35.6446 0.0653503 35.8045H4.62902C4.30364 35.3253 3.88571 34.955 3.69319 34.3894C3.46073 33.7066 3.52895 32.9386 3.52895 32.2284V28.6633H3.53985L3.98488 29.2996L7.30842 33.9507H7.31931C8.19136 32.8112 9.00373 31.6179 9.83994 30.4514C10.113 30.0705 10.3854 29.6889 10.6618 29.3105C10.8123 29.1046 11.0074 28.8921 11.1206 28.6633H11.1314V32.1736C11.1314 32.8651 11.2016 33.6085 11.0038 34.2797C10.8969 34.6426 10.7106 34.9605 10.4779 35.256C10.3432 35.4271 10.1323 35.6066 10.0423 35.8045H15.0634C14.9456 35.6251 14.7878 35.4679 14.6544 35.2999C14.4343 35.0228 14.2424 34.7269 14.1276 34.3894C13.9276 33.802 13.9633 33.1579 13.9633 32.5466V22.3229H13.1355C13.0587 22.3229 12.8874 22.2908 12.8253 22.3405C12.755 22.3967 12.704 22.5023 12.6517 22.5752C12.5338 22.7397 12.4175 22.9055 12.2981 23.0688C11.8843 23.6352 11.4784 24.2081 11.0724 24.7801C10.2784 25.8987 9.47536 27.011 8.67617 28.1258C8.44564 28.4474 8.21838 28.7717 7.98497 29.0911C7.84228 29.2864 7.67614 29.4827 7.55894 29.6945L7.15429 29.135L2.4243 22.5094L2.28628 22.3342L1.96054 22.3229H1.16542ZM38.6006 22.3229V32.6014C38.6006 33.1404 38.632 33.6999 38.4871 34.2249C38.3824 34.6041 38.1967 34.9366 37.9557 35.2451C37.819 35.4201 37.6032 35.6028 37.5114 35.8045H42.0751C41.7522 35.3289 41.3347 34.961 41.1422 34.4004C40.9062 33.7133 40.975 32.9434 40.975 32.2284V28.6633H40.9859C41.0508 28.8008 41.1627 28.9237 41.2505 29.0473C41.4352 29.3072 41.6218 29.5658 41.806 29.8261C42.3925 30.6549 42.9811 31.4829 43.5765 32.3052C43.8478 32.6799 44.1145 33.0582 44.3826 33.4351C44.4962 33.5947 44.6112 33.8308 44.7654 33.9507L48.1075 29.3105L48.5775 28.6633V32.1626C48.5775 32.8712 48.6444 33.6256 48.439 34.3127C48.3291 34.68 48.1258 35.0025 47.8892 35.2999C47.7642 35.457 47.5715 35.6218 47.4883 35.8045H52.5095C52.3992 35.6367 52.2516 35.4895 52.1261 35.3328C51.9006 35.0515 51.7013 34.754 51.5803 34.4114C51.3709 33.8182 51.4094 33.1655 51.4094 32.5466V22.3229H50.5816C50.5036 22.3229 50.3346 22.291 50.2708 22.3405C50.2005 22.395 50.1475 22.5027 50.0961 22.5752C49.979 22.7402 49.8599 22.9037 49.7429 23.0688C49.3714 23.5937 48.9965 24.1167 48.6194 24.6375C47.8177 25.7449 47.0277 26.861 46.2312 27.9722L45.4143 29.1131C45.2804 29.2998 45.1068 29.4883 45.005 29.6945L44.5834 29.1131L40.1674 22.9262L39.8687 22.5094L39.7315 22.3342L39.4066 22.3229H38.6006ZM80.9044 22.3778L80.731 23.4637L80.3163 26.0087C80.5362 25.8825 80.7332 25.6978 80.9371 25.5467C81.2473 25.3168 81.5798 25.108 81.9283 24.9422C82.889 24.4852 83.9083 24.5059 84.9453 24.5059V32.7769C84.9453 33.3156 84.9475 33.8723 84.7763 34.3894C84.6633 34.7306 84.4652 35.0333 84.2416 35.3109C84.1127 35.4708 83.9474 35.6263 83.8452 35.8045H89.106C88.9938 35.6239 88.8321 35.4654 88.6987 35.2999C88.4842 35.0337 88.2906 34.7379 88.1802 34.4114C88.005 33.8933 88.0059 33.3394 88.0059 32.7989V24.5059C89.0552 24.5059 90.0868 24.4863 91.0556 24.9584C91.4256 25.1388 91.7708 25.3672 92.1012 25.6125C92.2737 25.7406 92.4429 25.9124 92.6349 26.0087L92.0821 22.6301L92.0293 22.389L91.8289 22.3778L80.9044 22.3778ZM96.5778 22.3778C96.6759 22.5936 96.9041 22.781 97.0474 22.9701C97.3344 23.349 97.5431 23.7486 97.6276 24.2207C97.753 24.9212 97.6996 25.6613 97.6996 26.3707V29.9029C97.6996 30.9382 97.7032 31.9365 98.0746 32.9195C98.4121 33.8131 99.0234 34.5981 99.8235 35.1168C100.682 35.6733 101.698 35.9358 102.71 35.9805C104.607 36.0641 106.568 35.4314 107.632 33.7422C108.081 33.0298 108.336 32.2108 108.415 31.3728C108.461 30.8866 108.439 30.3915 108.439 29.9029V26.4036C108.439 25.7031 108.391 24.9801 108.498 24.2865C108.57 23.8181 108.763 23.4006 109.048 23.025C109.155 22.8826 109.27 22.7456 109.384 22.6081C109.443 22.5361 109.522 22.4632 109.561 22.3778H105.062C105.185 22.5917 105.386 22.7749 105.537 22.9701C105.785 23.2902 105.972 23.6379 106.066 24.0342C106.167 24.4626 106.163 24.9023 106.163 25.3395V29.6396C106.163 30.3354 106.199 31.0336 106.022 31.7129C105.922 32.0951 105.757 32.4626 105.517 32.7769C105.003 33.4518 104.17 33.7625 103.342 33.7421C103.049 33.7349 102.749 33.6924 102.47 33.5996C102.264 33.5309 102.074 33.4363 101.893 33.3144C100.569 32.4213 100.76 30.5796 100.76 29.1899V25.3066C100.76 24.8849 100.76 24.4582 100.857 24.0451C100.952 23.6395 101.143 23.2868 101.397 22.9591C101.542 22.7716 101.752 22.5885 101.86 22.3778L96.5778 22.3778ZM114.255 22.3778C114.353 22.535 114.492 22.6726 114.608 22.8165C114.849 23.1155 115.076 23.4335 115.195 23.8038C115.445 24.5818 115.355 25.4547 115.355 26.261V32.6233C115.355 33.1862 115.375 33.7547 115.22 34.3017C115.113 34.6779 114.899 35.0086 114.658 35.3109C114.536 35.4645 114.347 35.6256 114.266 35.8045H118.677C119.437 35.8045 120.209 35.8434 120.965 35.7698C122.087 35.6604 123.206 35.2941 124.156 34.678C124.998 34.1322 125.715 33.4079 126.238 32.5466C127.383 30.6613 127.53 28.1811 126.614 26.1732C126.301 25.4866 125.862 24.8745 125.332 24.3413C124.858 23.8642 124.282 23.4501 123.677 23.1601C122.82 22.7503 121.919 22.5033 120.975 22.4125C120.216 22.3394 119.44 22.3778 118.677 22.3778H114.255ZM132.325 22.3778C132.643 22.8463 133.059 23.2099 133.254 23.7599C133.527 24.5321 133.436 25.4223 133.436 26.2281V32.5904C133.436 33.1508 133.451 33.7234 133.303 34.2688C133.2 34.6497 132.992 34.9825 132.749 35.289C132.616 35.4576 132.443 35.618 132.336 35.8045H137.596C137.503 35.6413 137.352 35.5013 137.235 35.3548C136.992 35.0517 136.771 34.7309 136.652 34.3565C136.41 33.5909 136.496 32.725 136.496 31.9323V25.5918C136.496 25.0288 136.477 24.4495 136.632 23.9025C136.74 23.5207 136.951 23.1898 137.196 22.8824C137.32 22.7255 137.515 22.5613 137.596 22.3778H132.325ZM148.913 24.2896C150.341 24.1199 151.535 25.1778 152.065 26.4255C152.247 26.8532 152.374 27.3051 152.45 27.7638C152.508 28.1164 152.546 28.4714 152.561 28.8279C152.572 29.0721 152.562 29.3194 152.551 29.5628C152.482 31.166 151.882 33.0728 150.242 33.6839C150.014 33.7686 149.776 33.8349 149.534 33.8611C149.169 33.9006 148.804 33.8943 148.445 33.8144C147.229 33.5439 146.425 32.4777 146.048 31.3399C145.915 30.9372 145.827 30.5209 145.773 30.1003C145.728 29.7532 145.711 29.4081 145.711 29.0582C145.711 27.3564 146.181 25.2977 147.889 24.5372C148.218 24.3907 148.559 24.3317 148.913 24.2896ZM118.427 33.7532V24.5278C119.019 24.5278 119.624 24.4922 120.213 24.5516C121.055 24.6365 121.881 24.9621 122.533 25.5089C123.833 26.5984 124.217 28.3545 123.984 29.9797C123.807 31.2213 123.197 32.4169 122.13 33.1094C121.6 33.4534 120.983 33.6661 120.355 33.7294C119.719 33.7934 119.065 33.7532 118.427 33.7532Z" fill="#4D3762"/>
+</svg>
diff --git a/apps/website/public/icons/clients/Apple.svg b/apps/website/public/icons/clients/Apple.svg
new file mode 100644
index 0000000000..40d4b01f47
--- /dev/null
+++ b/apps/website/public/icons/clients/Apple.svg
@@ -0,0 +1,3 @@
+<svg width="52" height="64" viewBox="0 0 52 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M50.3711 21.8353C46.1108 24.4706 43.4795 28.9882 43.4795 34.0078C43.4795 39.6549 46.8627 44.8 52 46.9333C50.9976 50.1961 49.494 53.2078 47.6145 55.9686C44.8578 59.8588 41.9759 63.8745 37.7157 63.8745C33.4554 63.8745 32.2024 61.3647 27.1904 61.3647C22.3036 61.3647 20.5494 64 16.5398 64C12.5301 64 9.77349 60.3608 6.64096 55.8431C2.50602 49.5686 0.125301 42.2902 0 34.6353C0 22.2118 8.01928 15.5608 16.0386 15.5608C20.2988 15.5608 23.8072 18.3216 26.4386 18.3216C28.9446 18.3216 32.9542 15.4353 37.7157 15.4353C42.7277 15.3098 47.4892 17.6941 50.3711 21.8353ZM35.4602 10.1647C37.5904 7.6549 38.7181 4.51765 38.8434 1.2549C38.8434 0.878431 38.8434 0.376471 38.7181 0C35.0843 0.376471 31.7012 2.13333 29.3205 4.89412C27.1904 7.27843 25.9373 10.2902 25.812 13.5529C25.812 13.9294 25.812 14.3059 25.9373 14.6824C26.188 14.6824 26.5639 14.8078 26.8145 14.8078C30.1976 14.5569 33.3301 12.8 35.4602 10.1647Z" fill="#4D3762"/>
+</svg>
diff --git a/apps/website/public/icons/clients/Autodesk.svg b/apps/website/public/icons/clients/Autodesk.svg
new file mode 100644
index 0000000000..e8e3dd4c2e
--- /dev/null
+++ b/apps/website/public/icons/clients/Autodesk.svg
@@ -0,0 +1,11 @@
+<svg width="162" height="17" viewBox="0 0 162 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.145075 16.3507L14.2657 7.49409H21.6162C21.858 7.49409 22.0514 7.68874 22.0514 7.93206C22.0514 8.12671 21.9547 8.22403 21.858 8.2727L14.8944 12.4577C14.4591 12.7497 14.2657 13.285 14.2657 13.6743V16.3021H23.1153V0.973258C23.1153 0.681281 22.8735 0.437966 22.535 0.437966H14.1206L0 9.24596V16.3507H0.145075Z" fill="#4D3762"/>
+<path d="M116.06 16.3507H128.778V12.8957H120.074V10.0246H127.086V6.56949H120.074V3.89303H128.778V0.437966H116.06V16.3507Z" fill="#4D3762"/>
+<path d="M36.172 0.437966L30.0789 16.3507H34.2377L35.3016 13.3823H42.0718L43.0873 16.3507H47.3912L41.298 0.437966H36.172ZM36.5106 9.9759L38.735 3.74705L40.9112 9.9759H36.5106Z" fill="#4D3762"/>
+<path d="M69.7811 3.89303V16.3507H73.7948V3.89303H78.8725V0.437966H64.6551V3.89303H69.7811Z" fill="#4D3762"/>
+<path d="M58.8521 10.2192C58.8521 12.2631 57.5948 13.139 55.4187 13.139C53.3393 13.139 51.9852 12.2631 51.9852 10.2192V0.389303H47.9715V10.7058C47.9715 15.2802 52.0336 16.74 55.467 16.74C58.8521 16.74 62.9142 15.3288 62.9142 10.7058V0.389303H58.9005L58.8521 10.2192Z" fill="#4D3762"/>
+<path d="M162 0.437966H157.213L151.458 6.91013V0.437966H147.445V16.3507H151.458V10.3165L156.923 16.3507H162L154.65 8.51601L162 0.437966Z" fill="#4D3762"/>
+<path d="M106.582 0.437966H99.183V16.3507H106.582C112.24 16.3507 113.787 14.2096 113.787 8.2727C113.787 2.67646 112.288 0.437966 106.582 0.437966ZM106.388 12.8957H103.197V3.89303H106.388C108.903 3.89303 109.677 4.57431 109.677 8.2727C109.677 11.6304 108.855 12.8957 106.388 12.8957Z" fill="#4D3762"/>
+<path d="M140.965 6.9588L137.289 6.52083C135.162 6.27752 134.581 5.74222 134.581 5.01228C134.581 4.18501 135.694 3.45507 137.821 3.45507C139.901 3.45507 140.965 4.23367 141.158 5.40158H145.123C144.93 2.09251 142.125 0 138.063 0C133.227 0 130.761 1.94652 130.761 5.40158C130.761 8.17537 132.405 9.53793 135.742 9.87857L139.465 10.2679C140.868 10.4139 141.545 10.9978 141.545 11.6791C141.545 12.5064 140.578 13.2363 138.305 13.2363C135.645 13.2363 134.581 12.555 134.436 11.1925H130.568C130.761 14.8422 133.131 16.74 138.208 16.74C142.851 16.74 145.414 14.6962 145.414 11.6304C145.365 8.90532 143.818 7.29944 140.965 6.9588Z" fill="#4D3762"/>
+<path d="M88.254 0C82.4993 0 79.5495 3.55239 79.5495 8.32136C79.5495 13.139 82.5477 16.6914 88.254 16.6914C94.0086 16.6914 97.0068 13.139 97.0068 8.32136C97.0068 3.55239 94.0086 0 88.254 0ZM88.254 13.139C85.2558 13.139 83.6599 11.2898 83.6599 8.32136C83.6599 5.40158 85.3041 3.55239 88.254 3.55239C91.2522 3.55239 92.848 5.40158 92.848 8.32136C92.8964 11.3385 91.2522 13.139 88.254 13.139Z" fill="#4D3762"/>
+</svg>
diff --git a/apps/website/public/icons/clients/EA.svg b/apps/website/public/icons/clients/EA.svg
new file mode 100644
index 0000000000..78fc6c94c4
--- /dev/null
+++ b/apps/website/public/icons/clients/EA.svg
@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.0001 0C14.3391 0 0 14.3369 0 32.0001C0 49.6633 14.318 64.0001 32.0001 64.0001C49.6822 64.0001 64.0001 49.6842 64.0001 32.0001C64.0001 14.3158 49.6822 0 32.0001 0ZM19.3431 19.3685H37.5927L34.8175 23.8105H16.5677L19.3431 19.3685ZM49.8504 41.5369L47.075 37.1159H38.9804L41.7556 32.6737H44.3207L41.2301 27.7264L32.6097 41.5369H9.5874L15.138 32.6737H11.0592L13.8345 28.2317H31.6216L28.8462 32.6737H20.3522L17.5769 37.1159H30.1289L41.2091 19.3685L55.0646 41.558H49.8293L49.8504 41.5369Z" fill="#4D3762"/>
+</svg>
diff --git a/apps/website/public/icons/clients/Harman.svg b/apps/website/public/icons/clients/Harman.svg
new file mode 100644
index 0000000000..20bdc6c9f7
--- /dev/null
+++ b/apps/website/public/icons/clients/Harman.svg
@@ -0,0 +1,5 @@
+<svg width="98" height="57" viewBox="0 0 98 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.7505 54.0985C42.0675 52.2197 48.0025 48.8596 48.0025 48.8596H51.5536C47.1011 51.1966 43.2642 52.9096 39.916 54.1094C52.2396 53.624 64.0295 48.8751 64.0295 48.8751H65.098C65.098 48.8751 52.1971 55.1561 37.6142 54.8781C29.4198 57.4037 24.3815 56.5789 20.2067 54.4058C14.063 51.2078 15.8543 40.7796 15.8543 40.7796H16.9069C17.0483 42.0156 15.5871 50.6518 30.6241 53.5098C32.2973 53.8277 34.0166 54.0155 35.7505 54.0985ZM33.7246 54.6428C33.2051 54.5889 32.6848 54.5255 32.1641 54.4521C17.8339 52.4318 16.4496 45.1849 16.3024 41.9805C14.8763 53.0911 21.5607 55.6605 29.2572 55.3174C30.6822 55.2538 32.1973 55.0063 33.7246 54.6428ZM67.4863 8.21279C69.9213 8.408 72.3345 8.81123 74.6985 9.41777C74.3767 7.5614 73.3276 5.90287 71.7759 4.79851C65.805 0.426465 53.1877 2.71301 41.1517 8.73812C36.9844 10.837 33.0099 13.2871 29.2729 16.0609C30.3886 15.474 31.5198 14.9177 32.6983 14.4079C37.8521 12.1833 43.3202 10.5611 49.181 9.38706C53.9891 8.4291 61.1856 7.68764 67.4863 8.21279ZM27.0575 17.8067V17.8221H25.4546C30.2117 13.7406 35.4189 10.1962 40.9789 7.25502C54.0205 0.380112 68.1621 -2.43158 75.2955 2.4658C78.2811 4.50494 79.4437 7.47133 79.1453 10.9629C81.1407 11.8434 83.0262 13.002 84.5503 14.5315C85.5266 15.4905 86.3339 16.6026 86.9388 17.8221H85.1947C85.1947 17.8221 84.1419 16.1073 83.0419 15.0259C81.8483 13.8639 80.4879 12.8801 79.0038 12.106C78.7052 13.8982 78.0453 15.8293 77.0711 17.8221H73.1273C74.3528 15.1186 74.9657 12.585 74.8085 10.3912C65.208 7.42498 53.1091 9.2789 49.1339 10.0204C44.2158 10.932 38.8734 12.4151 32.8083 14.9486C30.3414 15.9684 27.0575 17.8067 27.0575 17.8067Z" fill="#4D3762"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.78913 23.1212H12.5861V36.3921H11.5018C11.3228 36.39 11.1442 36.3745 10.9675 36.3457C10.7685 36.3116 10.5772 36.2436 10.4019 36.1448C10.2173 36.0382 10.0611 35.8899 9.9463 35.7124C9.8267 35.4831 9.76728 35.2283 9.77342 34.9708V30.2125H2.81264V36.4075H0V23.1367H2.82836V29.0229H9.78913V23.1212ZM64.8937 36.4075V36.3921H63.8411C63.6567 36.3907 63.4729 36.3753 63.291 36.3457C63.0853 36.3188 62.8873 36.2504 62.7097 36.1448C62.5297 36.0376 62.3789 35.8892 62.2698 35.7124C62.1376 35.4872 62.0724 35.2304 62.0812 34.9708V26.1956L56.3145 36.4075H55.576L49.6523 26.1183V36.4075H48.2068V23.1367H51.0037L56.6288 32.9623L62.1441 23.1367H64.8937V36.4075ZM82.5864 36.4075V36.3921H80.858C80.4902 36.4098 80.125 36.324 79.8052 36.1448C79.5102 35.9421 79.2767 35.6646 79.1295 35.3416L74.4785 26.3655L72.1059 30.8305H75.7985L76.5055 32.19H71.3831L69.1361 36.4075H67.4863L74.7142 22.8431H75.5313L82.5864 36.4075ZM97.2464 23.1367V23.1212H97.9849V36.3921H97.7963C97.2778 36.3921 96.7435 36.423 96.3508 36.0676L86.8288 26.3965V36.4075H85.179V23.1367H86.986L96.3665 32.4217V23.8629C96.3621 23.733 96.3946 23.6045 96.4608 23.4921C96.5227 23.4001 96.603 23.3213 96.6963 23.2603C96.7803 23.2021 96.8774 23.1649 96.9792 23.1521C97.0678 23.1403 97.1571 23.135 97.2464 23.1367ZM23.3021 22.8431L30.3257 36.423H28.5973C28.2295 36.4407 27.8644 36.3549 27.5445 36.1758C27.2495 35.973 27.0161 35.6955 26.8689 35.3725L25.2505 32.2054H20.1124L20.8352 30.8459H24.5435L22.2336 26.381L16.8912 36.4075H15.2413L22.4693 22.8431H23.3021ZM35.8251 24.2953V29.3163H37.1293C37.1293 29.3163 38.4177 29.3317 39.2662 28.8684C40.1147 28.4049 40.6962 27.7405 40.6962 26.7518C40.6848 25.7722 40.0692 24.8977 39.1406 24.5425C38.6812 24.363 38.189 24.2787 37.6949 24.2953H35.8251ZM41.4346 35.3416L37.2708 30.3361H35.8251V36.4075H33.0126V23.1367H38.1821C38.1821 23.1367 40.319 23.1058 41.7175 23.7856C43.1159 24.4653 43.7129 25.4387 43.7129 26.6591C43.7129 27.8795 42.9587 29.3317 40.2875 30.0579L45.6771 36.3921H43.5243C43.188 36.3815 42.8547 36.3242 42.5346 36.2221C42.0002 36.0521 41.4346 35.3416 41.4346 35.3416Z" fill="#4D3762"/>
+<path d="M38.025 41.3358L37.2236 43.0661H38.8263L38.025 41.3358ZM39.832 44.5647H39.5333L38.9363 43.2979H37.1136L36.5166 44.5647H36.218L37.9464 40.8723H38.1035L39.832 44.5647ZM74.0386 41.4594C73.6321 41.2295 73.1719 41.1072 72.7029 41.104C71.7918 41.1127 71.0602 41.8459 71.0688 42.7416C71.0776 43.6376 71.8232 44.357 72.7344 44.3483C73.2043 44.337 73.6635 44.2097 74.0701 43.9777V44.2711C73.6651 44.4895 73.2118 44.6061 72.7501 44.611C71.6189 44.611 70.7704 43.8078 70.7704 42.7262C70.7719 42.2188 70.9808 41.7332 71.3502 41.3788C71.7197 41.0243 72.2184 40.8306 72.7344 40.8414C73.1915 40.8534 73.6409 40.9586 74.0543 41.1504V41.4594H74.0386ZM76.7412 41.104C75.832 41.1125 75.1014 41.8427 75.1071 42.7364C75.1129 43.6303 75.8529 44.3512 76.7621 44.3483C77.6712 44.3455 78.4066 43.6201 78.4068 42.7262C78.4058 42.2936 78.2297 41.879 77.9171 41.5747C77.6045 41.2702 77.1811 41.1008 76.7412 41.104ZM76.7255 44.611C75.6743 44.578 74.8461 43.7192 74.8687 42.6853C74.8911 41.6514 75.7559 40.8282 76.8076 40.8395C77.8592 40.8506 78.7056 41.6923 78.7052 42.7262C78.7033 43.2363 78.4921 43.7241 78.1193 44.0789C77.7467 44.4337 77.244 44.6257 76.7255 44.611ZM82.8221 40.8877H83.1048V44.5647H82.8221V41.3049H82.8064L81.3921 43.0198L79.978 41.3049H79.9623V44.5647H79.6794V40.8877H79.9623L81.3921 42.6026L82.8221 40.8877ZM84.5191 42.6026H85.2104C85.9017 42.6026 86.1689 42.2783 86.1689 41.8611C86.1689 41.444 85.9017 41.1195 85.2418 41.1195H84.5191V42.6026ZM85.2575 40.8877C86.1375 40.8877 86.483 41.3358 86.483 41.8611C86.483 42.3401 86.2003 42.8498 85.2418 42.8498H84.5348V44.5647H84.2519V40.8877H85.2575ZM88.2115 41.3358L87.4101 43.0661H89.0128L88.2115 41.3358ZM90.0184 44.5647H89.7198L89.1228 43.2979H87.3001L86.7031 44.5647H86.4045L88.1329 40.8723H88.29L90.0184 44.5647ZM94.1037 44.5647H93.8682L91.0241 41.3512V44.5647H90.7412V40.8877H90.9769L93.8053 44.1011V40.8877H94.1037V44.5647ZM96.5392 42.5871V44.5647H96.2565V42.5871L94.7952 40.8877H95.1565L96.3979 42.3401L97.6391 40.8877H98.0006L96.5392 42.5871ZM43.8701 43.5451C43.6815 43.0661 42.346 42.8498 42.1888 42.0929C42.1447 41.9314 42.1394 41.7622 42.1731 41.5985C42.2831 40.9959 42.8173 40.7796 43.4929 40.7796C44.0272 40.7796 44.7657 40.9032 44.7657 41.7066V41.9693H43.8229V41.7375C43.8329 41.6446 43.7997 41.5525 43.7327 41.4863C43.6656 41.4204 43.5717 41.3878 43.4772 41.3976C43.3141 41.3784 43.1632 41.4862 43.1316 41.6448C43.1157 41.7108 43.1157 41.7795 43.1316 41.8457C43.2416 42.2783 44.6714 42.5099 44.8286 43.2824C44.8633 43.4818 44.8633 43.6855 44.8286 43.885C44.7343 44.5029 44.1687 44.7346 43.4929 44.7346C42.7858 44.7346 42.1259 44.4874 42.1259 43.6532V43.3751H43.1316V43.7305C43.1291 43.8268 43.1692 43.9195 43.2416 43.9847C43.3139 44.0499 43.4112 44.0812 43.5086 44.0702C43.6775 44.0985 43.8383 43.9886 43.8701 43.8232C43.9015 43.7329 43.9015 43.6352 43.8701 43.5451ZM56.1104 43.5451C55.9218 43.0661 54.6018 42.8498 54.4291 42.1083C54.385 41.9469 54.3797 41.7776 54.4134 41.6139C54.5077 41.0113 55.0576 40.795 55.7175 40.795C56.2518 40.795 56.9746 40.9186 56.9746 41.7221V42.0156H56.0475V41.7839C56.0575 41.691 56.0243 41.5986 55.9572 41.5327C55.89 41.4668 55.7962 41.4342 55.7017 41.444C55.5385 41.4247 55.3878 41.5325 55.3562 41.6912C55.3399 41.7518 55.3399 41.8157 55.3562 41.8766C55.466 42.2938 56.8803 42.5253 57.0374 43.2979C57.0716 43.4972 57.0716 43.7009 57.0374 43.9005C56.9431 44.5029 56.4088 44.7346 55.7175 44.7346C55.0261 44.7346 54.3662 44.4874 54.3662 43.6687V43.3906H55.3719V43.7459C55.3719 43.9468 55.5132 44.0702 55.7489 44.0702C55.9178 44.0985 56.0786 43.9886 56.1104 43.8232C56.1339 43.7318 56.1339 43.6363 56.1104 43.5451ZM63.9354 43.8696L63.8725 40.8877H64.7996V44.5492H63.4639L62.5211 41.4748L62.5682 44.5492H61.6412V40.8877H63.0397L63.9354 43.8696ZM46.9968 41.1658L46.4784 44.5956H45.457L46.1484 40.8877H47.8296L48.5211 44.5956H47.5155L46.9968 41.1658ZM52.4964 41.1658L51.8522 44.5956H50.8937L50.2495 41.1658L50.2181 44.5956H49.2753L49.3539 40.8877H50.8937L51.365 43.7923L51.8522 40.8877H53.3763L53.4706 44.5956H52.5121L52.4964 41.1658ZM59.2686 44.0395C59.439 44.0533 59.5934 43.941 59.6301 43.7769C59.6429 43.7316 59.6483 43.6847 59.6458 43.6378V40.9032H60.6041V43.8078C60.5414 44.5029 59.9756 44.7192 59.2843 44.7192C58.593 44.7192 58.0429 44.5029 57.9645 43.8078C57.9645 43.7614 57.9488 43.6378 57.9488 43.5605V40.9032H58.9071V43.6378C58.9037 43.6847 58.909 43.7318 58.9228 43.7769C58.9474 43.9417 59.1001 44.0578 59.2686 44.0395ZM67.125 44.0086C67.3103 44.0331 67.4828 43.911 67.5177 43.7305C67.5307 43.6853 67.5361 43.6384 67.5334 43.5914V43.0507H67.1407V42.5099H68.4762V43.4987C68.4772 43.5815 68.4718 43.664 68.4605 43.7459C68.3976 44.4256 67.8006 44.6574 67.1407 44.6574C66.4808 44.6574 65.8836 44.4101 65.8207 43.7459C65.809 43.664 65.8039 43.5815 65.805 43.4987V41.9384C65.805 41.8766 65.8207 41.753 65.8207 41.6912C65.8993 40.9959 66.4808 40.7796 67.1407 40.7796C67.8006 40.7796 68.3976 40.9959 68.4605 41.6912C68.4697 41.7733 68.4697 41.8562 68.4605 41.9384V42.062H67.5177V41.8611C67.5181 41.8144 67.5129 41.7677 67.502 41.7221C67.4625 41.553 67.3002 41.44 67.125 41.4594C66.9513 41.4462 66.7928 41.5566 66.7478 41.7221C66.7342 41.7776 66.7288 41.8349 66.7321 41.892V43.576C66.7296 43.6229 66.735 43.6698 66.7478 43.715C66.7708 43.8978 66.9387 44.0286 67.125 44.0086Z" fill="#4D3762"/>
+</svg>
diff --git a/apps/website/public/icons/clients/Hp.svg b/apps/website/public/icons/clients/Hp.svg
new file mode 100644
index 0000000000..7a50d167d4
--- /dev/null
+++ b/apps/website/public/icons/clients/Hp.svg
@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.0892 0.000172855L25.2041 19.3042L29.8845 19.3057C33.256 19.3067 34.6908 21.965 33.6291 24.942L26.783 44.1367H19.894L27.4262 23.0162H23.8791L16.3476 44.1367H9.39908L24.8539 0.800758C10.6215 4.04761 0 16.7825 0 31.9988C0 46.9783 10.2925 59.552 24.1908 63.0382L39.805 19.1966H51.1132C53.452 19.1966 56.3937 20.7737 55.1225 24.3631L48.7735 42.2905C47.9625 44.5804 46.0347 45.0445 44.499 45.0445H37.5473L30.8049 63.9755C31.2019 63.99 31.5996 64 31.9999 64C49.6729 64 64 49.6733 64 31.9994C64 14.3555 49.7209 0.048001 32.0882 0L32.0892 0.000172855ZM45.4109 22.9645L38.8528 41.3738H42.3451L48.9044 22.9645H45.4109Z" fill="#4D3762"/>
+</svg>
diff --git a/apps/website/public/icons/clients/Lucid.svg b/apps/website/public/icons/clients/Lucid.svg
new file mode 100644
index 0000000000..bb99b8e27a
--- /dev/null
+++ b/apps/website/public/icons/clients/Lucid.svg
@@ -0,0 +1,3 @@
+<svg width="152" height="10" viewBox="0 0 152 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M147.888 4.54103C147.888 2.60302 147.032 1.78601 145.04 1.78601H126.894V7.35304H145.04C147.013 7.35304 147.888 6.46004 147.888 4.54103ZM152.001 4.54103C152.001 7.35304 149.544 8.93005 147.236 8.93005H123.004V0.228001H147.255C149.563 0.228001 152.001 1.72901 152.001 4.54103ZM78.9504 1.78601H100.987V0.228001H76.7542C74.4464 0.228001 71.9896 1.74801 71.9896 4.54103C71.9896 7.35304 74.4464 8.93005 76.7542 8.93005H101.005V7.37204H78.9504C76.9776 7.37204 76.1028 6.46004 76.1028 4.54103C76.1028 2.60302 76.9403 1.78601 78.9504 1.78601ZM6.49545 7.33404C4.69012 7.33404 3.88982 6.55504 3.88982 4.80703V0.209001H0V4.80703C0 7.46704 2.32645 8.91105 4.50401 8.91105H28.0849V7.35304L6.49545 7.33404ZM60.1527 0.228001V7.37204H41.7644C39.9591 7.37204 39.1588 6.59304 39.1588 4.84503V0.228001H35.269V4.82603C35.269 7.48604 37.5954 8.93005 39.773 8.93005H64.0425V0.228001H60.1527ZM110.106 9.12005H113.884V0H110.106V9.12005Z" fill="#4D3762"/>
+</svg>
diff --git a/apps/website/public/icons/clients/Netflix.svg b/apps/website/public/icons/clients/Netflix.svg
new file mode 100644
index 0000000000..4aaa92656f
--- /dev/null
+++ b/apps/website/public/icons/clients/Netflix.svg
@@ -0,0 +1,3 @@
+<svg width="134" height="37" viewBox="0 0 134 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M126.84 17.2267L134.001 36.1802C131.902 35.8924 129.762 35.4813 127.622 35.1524L123.589 24.6683L119.432 34.289C117.415 33.9601 115.399 33.8367 113.341 33.5901L120.625 17.0212L114.041 0H120.173L123.877 9.49731L127.828 0H134.001L126.84 17.2267ZM109.226 0H103.67V32.85C105.48 32.9734 107.374 33.0556 109.226 33.2612V0ZM98.8956 32.48C93.8335 32.1511 88.7715 31.8222 83.6271 31.7399V0H89.2653V26.3951C92.5166 26.4774 95.7678 26.724 98.8956 26.8885V32.48ZM77.5773 18.5013H69.8401V31.3699H64.2431V0H80.0878V5.6326H69.8401V12.8275H77.5773V18.5013ZM54.7362 5.6326V31.6577C52.8431 31.6577 50.9088 31.6577 49.0568 31.7399V5.6326H43.2128V0H60.6214V5.6326H54.7362ZM37.1219 18.7891C34.6526 18.7891 31.6894 18.7891 29.5905 18.9124V27.2996C32.9241 27.053 36.2165 26.8063 39.5912 26.6829V32.11L23.9522 33.3434V0H39.5912V5.6326H29.5905V13.2387C31.7717 13.2387 35.1464 13.1153 37.1219 13.1153V18.7891ZM5.76171 15.6233V35.358C3.74511 35.6046 1.93429 35.8924 0 36.1802V0H5.39131L12.7581 20.557V0H18.4375V33.8367C16.4209 34.1657 14.4043 34.289 12.2642 34.5768L5.76171 15.6233Z" fill="#4D3762"/>
+</svg>
diff --git a/apps/website/public/icons/clients/Nike.svg b/apps/website/public/icons/clients/Nike.svg
new file mode 100644
index 0000000000..e0a5b76c75
--- /dev/null
+++ b/apps/website/public/icons/clients/Nike.svg
@@ -0,0 +1,3 @@
+<svg width="106" height="38" viewBox="0 0 106 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M105.999 0L28.4741 32.9616C22.0197 35.7266 16.5806 37.1091 12.2294 37.1091C7.2979 37.1091 3.74436 35.3628 1.4962 31.8702C-1.33213 27.3589 -0.0992643 20.1554 4.75966 12.5152C7.66051 8.0767 11.3591 4.00197 14.9852 0.072763C14.1149 1.45526 6.64521 13.9705 14.8401 19.8643C16.4356 21.0285 18.7563 21.6106 21.5846 21.6106C23.8328 21.6106 26.4435 21.2468 29.3444 20.5192L105.999 0Z" fill="#4D3762"/>
+</svg>
diff --git a/apps/website/public/icons/clients/Pixomondo.svg b/apps/website/public/icons/clients/Pixomondo.svg
new file mode 100644
index 0000000000..4786eb9417
--- /dev/null
+++ b/apps/website/public/icons/clients/Pixomondo.svg
@@ -0,0 +1,3 @@
+<svg width="152" height="16" viewBox="0 0 152 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.43281 3.52349H8.38328C9.61244 3.52349 10.1515 4.08285 10.1515 5.38666C10.1515 6.69149 9.61244 7.25287 8.38328 7.25287H4.43281V3.52349ZM0 15.2522H4.43281V10.3194H10.0426C13.6161 10.3194 14.7353 7.83251 14.7353 5.38666C14.7353 2.58988 13.4499 0.456918 9.83538 0.456918H0V15.2522ZM16.6176 15.2522H21.0519V0.456918H16.6176V15.2522ZM22.5223 15.2522H28.0176L30.8508 10.7764L33.6836 15.2522H39.1758L33.4019 7.56323L38.5633 0.456918H33.2914L30.8508 4.43479L28.4097 0.456918H23.1379L28.2982 7.56323L22.5223 15.2522ZM39.4383 7.8528C39.4383 13.987 43.4065 15.7066 48.1002 15.7066C52.796 15.7066 56.7642 13.987 56.7642 7.8528C56.7637 1.72067 52.7955 0 48.1002 0C43.4065 0 39.4383 1.72067 39.4383 7.8528ZM44.1346 7.8528C44.1346 4.76594 45.7356 3.31557 48.0997 3.31557C50.4856 3.31557 52.0684 4.76594 52.0684 7.8528C52.0684 10.961 50.4856 12.3895 48.0997 12.3895C45.7361 12.3895 44.1346 10.9615 44.1346 7.8528ZM58.7579 15.2522H62.9288V4.18579H62.9683L66.4694 15.2522H70.1199L73.624 4.18579H73.6605V15.2522H77.8339V0.456918H71.3516L68.3136 10.2155H68.2771L65.2402 0.456918H58.7579V15.2522ZM79.8281 7.8528C79.8281 13.987 83.7943 15.7066 88.491 15.7066C93.1863 15.7066 97.154 13.987 97.154 7.8528C97.1535 1.72067 93.1858 0 88.4905 0C83.7943 0 79.8281 1.72067 79.8281 7.8528ZM84.5223 7.8528C84.5223 4.76594 86.1254 3.31557 88.4905 3.31557C90.8759 3.31557 92.4587 4.76594 92.4587 7.8528C92.4587 10.961 90.8759 12.3895 88.4905 12.3895C86.1254 12.3895 84.5223 10.9615 84.5223 7.8528ZM99.1457 15.2522H103.432V5.90646H103.47L109.84 15.2517H114.739V0.456918H110.455V9.718H110.417L104.251 0.456918H99.1457V15.2522ZM117.424 15.2522H126.459C130.277 15.2522 133.368 13.6776 133.368 7.8533C133.368 2.92255 131.153 0.457425 127.035 0.457425H117.424V15.2522ZM121.858 3.77198H125.21C127.578 3.77198 128.787 5.07782 128.787 7.83251C128.787 9.86253 128.098 11.9346 125.563 11.9346H121.858V3.77198ZM134.674 7.8528C134.674 13.987 138.641 15.7066 143.339 15.7066C148.033 15.7066 152 13.987 152 7.8528C151.999 1.72067 148.033 0 143.338 0C138.641 0 134.674 1.72067 134.674 7.8528ZM139.37 7.8528C139.37 4.76594 140.972 3.31557 143.338 3.31557C145.722 3.31557 147.305 4.76594 147.305 7.8528C147.305 10.961 145.722 12.3895 143.338 12.3895C140.972 12.3895 139.37 10.9615 139.37 7.8528Z" fill="#4D3762"/>
+</svg>
diff --git a/apps/website/public/icons/clients/Tencent.svg b/apps/website/public/icons/clients/Tencent.svg
new file mode 100644
index 0000000000..c10e5be8f4
--- /dev/null
+++ b/apps/website/public/icons/clients/Tencent.svg
@@ -0,0 +1,11 @@
+<svg width="140" height="19" viewBox="0 0 140 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M91.1909 5.7923H86.9427L88.6109 8.1785H90.7641L88.9601 18.3776H92.7233L94.5274 8.1785H99.2411L91.8116 2.25149L91.1909 5.7923Z" fill="#4D3762"/>
+<path d="M17.5748 0H0.465556L0 2.67485H6.65358L3.86024 18.3776H7.62349L10.4168 2.67485H17.1092L17.5748 0Z" fill="#4D3762"/>
+<path d="M22.3079 10.7571H15.7707C16.1587 9.46782 17.439 7.69741 19.7474 7.69741C22.2691 7.67817 22.5407 9.58328 22.3079 10.7571ZM20.3681 5.52289C15.5767 5.52289 12.5118 8.50564 11.9105 11.9887C11.2315 15.8374 13.6175 18.6662 18.4477 18.6662C20.6009 18.6662 22.6183 18.2621 24.2671 17.3577L24.7715 14.4904C23.1614 15.6257 21.1246 16.2608 19.3982 16.2608C16.9928 16.2608 15.0724 15.2601 15.3828 12.9894H25.334C25.4504 12.72 25.6056 12.2389 25.7026 11.6616C26.1875 8.87127 25.1982 5.52289 20.3681 5.52289Z" fill="#4D3762"/>
+<path d="M36.9923 5.52289C34.6452 5.52289 32.8799 6.48507 32.0458 7.46649H31.9488L28.6317 5.52289C28.5153 6.61977 28.3407 8.10153 28.0886 9.54479L26.5367 18.3776H30.3L31.5996 10.9688C31.6578 10.6032 31.7936 10.2183 31.9488 9.96815C32.5114 8.98673 33.6946 8.10153 35.1883 8.10153C37.2445 8.10153 37.8071 9.48706 37.4967 11.2767L36.2746 18.3776H40.0378L41.3569 10.9111C42.0553 6.92767 39.5917 5.52289 36.9923 5.52289Z" fill="#4D3762"/>
+<path d="M82.1707 5.52289C79.8235 5.52289 78.0583 6.48507 77.2242 7.46649H77.1272L73.8101 5.52289C73.6937 6.61977 73.5191 8.10153 73.2669 9.54479L71.7151 18.3776H75.4783L76.8168 10.9688C76.875 10.6032 77.0108 10.2183 77.166 9.96815C77.7285 8.98673 78.9118 8.10153 80.4055 8.10153C82.4617 8.10153 83.0242 9.48706 82.7139 11.2767L81.453 18.3776H85.2162L86.5353 10.9111C87.2336 6.92767 84.7701 5.52289 82.1707 5.52289Z" fill="#4D3762"/>
+<path d="M67.5057 10.7571H60.9491C61.3371 9.46782 62.6173 7.69741 64.9257 7.69741C67.4475 7.67817 67.7191 9.58328 67.5057 10.7571ZM65.5465 5.52289C60.7551 5.52289 57.6902 8.50564 57.0889 11.9887C56.4099 15.8374 58.7959 18.6662 63.626 18.6662C65.7792 18.6662 67.7967 18.2621 69.4455 17.3577L69.9499 14.4904C68.3398 15.6257 66.303 16.2608 64.5766 16.2608C62.1712 16.2608 60.2508 15.2601 60.5611 12.9894H70.5124C70.6288 12.72 70.784 12.2389 70.881 11.6616C71.3659 8.87127 70.3766 5.52289 65.5465 5.52289Z" fill="#4D3762"/>
+<path d="M42.9476 11.9117C42.2686 15.8182 45.0232 18.647 49.6787 18.647C51.541 18.647 53.7524 18.1274 54.5865 17.8003L55.1878 14.4326C53.8882 15.8374 52.1035 16.1261 50.8426 16.1261C48.2821 16.1261 46.3423 14.6443 46.7884 12.0657C47.1764 9.75647 49.3878 7.98606 52.2587 7.98606C53.4226 7.98606 55.0132 8.37094 56.0219 9.6795L56.6039 6.25415C55.7892 5.94625 54.4895 5.50365 52.5691 5.50365C47.351 5.52289 43.6071 8.15926 42.9476 11.9117Z" fill="#4D3762"/>
+<path d="M116.35 8.46715C116.001 8.06304 115.613 7.428 115.38 6.96616H114.604C114.178 7.48573 113.557 8.06304 113.014 8.46715H116.35ZM115.574 10.0259H110.977L112.354 10.6417L112.102 11.8925H115.148L115.574 10.0259ZM117.766 9.73723L117.281 11.8925H118.31C119.008 11.8925 119.512 12.0465 119.376 12.8932C119.144 14.4326 118.717 16.5687 118.387 18.3776H112.8L112.335 16.7419H116.447C116.641 15.8759 116.874 14.7983 116.99 13.9323C117.029 13.6437 116.913 13.5282 116.622 13.5282H109.658L110.279 10.1798C109.774 10.4108 109.018 10.6609 108.281 10.7956L108.727 8.77505C110.026 8.46715 111.346 7.83212 112.16 6.94691H109.057L109.406 5.36895H113.247C113.46 5.08029 113.615 4.69542 113.712 4.42601H109.561L109.871 2.79031H111.365L110.841 0.384871H112.956L113.46 2.8288H114.197C114.43 2.02057 114.604 0.942933 114.624 0.0384871H116.777C116.738 0.942933 116.602 2.00133 116.408 2.8288H117.262C117.592 2.0783 117.941 1.1931 118.213 0.384871H120.366C120.075 1.13537 119.687 2.05906 119.338 2.8288H120.851L120.443 4.4645H115.943C115.865 4.73391 115.691 5.13802 115.555 5.40743H121.083L120.715 6.9854H117.495C118.193 8.00531 119.842 8.77505 121.122 9.04446L120.405 10.8341C119.493 10.6417 118.542 10.2183 117.766 9.73723ZM115.419 15.9336H108.3L108.009 14.3364H115.768V14.3557L115.419 15.9336ZM107.039 2.27074H105.992C105.817 3.2714 105.662 4.31055 105.449 5.38819H106.865L107.388 2.65561C107.466 2.34771 107.33 2.27074 107.039 2.27074ZM106.593 7.04313H105.138C104.925 8.12077 104.692 9.25614 104.459 10.3723H105.972L106.593 7.04313ZM109.522 1.69343C108.494 7.2933 107.563 12.8162 106.515 18.3968H104.401C104.828 16.2993 105.293 14.067 105.662 12.008H104.149C103.683 14.1632 103.198 16.3378 102.752 18.3968H100.638C102.422 12.7585 103.295 6.94691 104.304 0.538819H108.261C109.289 0.538819 109.697 0.712011 109.522 1.69343Z" fill="#4D3762"/>
+<path d="M138.639 0.558062H128.843L129.27 2.40544H136.583C137.068 2.40544 137.3 2.46317 137.184 3.00199C136.912 4.50299 136.621 6.02323 136.33 7.50498H133.149L133.692 4.34904L131.462 3.05972L130.647 7.50498H128.28L127.97 9.35236H130.298C129.813 12.3543 129.231 15.4141 128.61 18.3968H131.151C131.733 15.3756 132.334 12.3543 132.839 9.35236H136.001C135.477 12.3736 134.895 15.4718 134.294 18.3968H138.775L139.551 16.5302H137.165C138.115 11.7578 139.085 6.79297 139.939 1.98208C140.132 0.962177 139.919 0.558062 138.639 0.558062ZM127.873 4.38753C127.562 2.92502 127.155 1.40478 126.825 0H124.459C124.769 1.44326 125.118 2.98275 125.39 4.38753H127.873ZM122.694 5.36895H127.097C126.651 8.27472 126.146 11.2382 125.584 14.1825C126.418 13.5667 127.31 12.8932 128.106 12.2004L127.64 14.8945C126.146 16.1453 124.09 17.6078 122.209 18.6662C123.023 14.8945 123.78 10.9111 124.323 7.21632H122.344L122.694 5.36895Z" fill="#4D3762"/>
+</svg>
diff --git a/apps/website/public/icons/clients/Ubisoft.svg b/apps/website/public/icons/clients/Ubisoft.svg
new file mode 100644
index 0000000000..b6a8222990
--- /dev/null
+++ b/apps/website/public/icons/clients/Ubisoft.svg
@@ -0,0 +1,3 @@
+<svg width="151" height="48" viewBox="0 0 151 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M54.3983 15.028V25.7062C54.3983 30.042 57.3539 32.8056 61.6585 32.8056C66.1863 32.8056 68.9577 29.8912 68.9577 25.4138V15.028H65.1254V25.2187C65.1254 27.6601 63.8959 29.1741 61.6993 29.1741C59.292 29.1741 58.2308 27.433 58.2308 25.4138V15.028H54.3983ZM70.821 15.1755V32.6314H76.9251C80.3058 32.6314 83.1785 30.9071 83.1785 27.4872C83.1785 23.9175 80.0548 23.1263 80.0548 23.1263C80.0548 23.1263 82.3678 22.4838 82.3678 19.4298C82.3678 16.3778 79.4442 15.1755 76.9251 15.1755H70.821ZM74.6821 18.4911H76.535C77.821 18.4911 78.6438 19.1684 78.6438 20.347C78.6438 21.4013 77.9457 22.1968 76.6325 22.1968H74.6822L74.6821 18.4911ZM74.6821 24.9274H76.73C78.6558 24.9274 79.3235 25.9166 79.3235 27.0971C79.3235 28.4708 78.4597 29.2761 76.9251 29.2761H74.6822V24.9275L74.6821 24.9274ZM84.629 15.1743H88.481V32.6301H84.629V15.1743ZM126.66 32.6301H122.808V15.1743H134.9V18.7825H126.66V22.7808H134.168V25.7062H126.66V32.6301ZM136.314 15.1743V18.7825H141.287V32.6301H145.188V18.7825H150.064V15.1743H136.314ZM92.8785 26.8259L89.8184 29.0632C89.8184 29.0632 90.8758 32.9305 96.1768 32.9305C99.7069 32.9305 102.304 30.8704 102.304 27.2487C102.304 21.4121 94.1433 22.6503 94.1433 19.6487C94.1433 18.8587 94.8457 18.161 96.1422 18.161C98.2224 18.161 99.0129 20.2015 99.0129 20.2015L102.074 18.0533C102.074 18.0533 100.878 14.8664 96.2959 14.8664C92.53 14.8664 90.5296 17.2825 90.5296 19.7755C90.5296 25.7235 98.4532 24.4325 98.4532 27.5541C98.4532 28.6075 97.6231 29.3815 96.3303 29.3726C93.7688 29.3726 92.8785 26.8259 92.8785 26.8259ZM112.251 14.8584C107.715 14.8584 105.693 17.3207 105.693 17.3207L106.278 17.9058C106.278 17.9058 103.343 19.9904 103.343 24.467C103.343 29.6181 107.316 32.9267 112.272 32.9267C118.031 32.9267 121.299 28.6774 121.299 23.9001C121.299 18.8059 117.568 14.8584 112.251 14.8584ZM112.333 18.4818C115.409 18.4818 117.404 20.8326 117.404 23.8849C117.404 26.9056 115.433 29.3216 112.333 29.3216C109.271 29.3216 107.259 27.1833 107.259 24.3451C107.259 21.762 109.009 20.6363 109.009 20.6363L108.375 20.0024C108.375 20.0024 109.724 18.4818 112.333 18.4818ZM21.5432 0C6.78898 0 0.420489 13.1328 0.420489 13.1328L2.29511 14.4748C2.29511 14.4748 -0.0639514 18.961 0.00133032 24.7151C0.00133032 36.4616 9.35181 47.5268 23.1165 47.5268C35.6212 47.5268 45.9508 37.3488 45.9508 24.744C45.9508 8.30461 33.2024 0 21.5432 0ZM21.6712 4.00737C33.1987 4.00737 42.1437 13.2966 42.1437 24.0958C42.1437 35.5436 33.5336 43.5049 23.5005 43.5049C16.1163 43.5049 9.45504 37.8817 9.45504 30.1718C9.45504 25.7188 11.8219 22.6143 14.4741 20.9597L14.8622 21.3809C14.1364 21.9488 12.0668 25.2733 12.0668 28.5409C12.0668 34.6069 16.8237 38.808 22.8171 38.808C30.4516 38.808 35.5432 32.2965 35.5432 24.7358C35.5432 15.9391 27.7784 8.47099 18.4339 8.47099C13.2655 8.47099 8.87885 10.6937 6.3582 12.6559L5.96594 12.3009C9.26362 7.21623 14.9744 4.00737 21.6712 4.00737ZM18.2316 12.4226C24.1947 12.4226 30.0166 16.3676 31.4697 21.9672L30.9412 22.1674C28.332 18.7219 24.0566 15.8664 19.0079 15.8664C9.71774 15.8664 4.83881 24.3083 5.55505 31.359L5.00797 31.5593C5.00797 31.5593 3.98187 29.2952 3.98187 26.6105C3.98187 18.8359 10.3665 12.4226 18.2316 12.4226ZM22.1729 22.1798C24.9961 22.1798 27.2539 24.4681 27.2539 27.1844C27.2539 29.4323 25.8107 30.7644 25.8107 30.7644L27.5202 31.9598C27.5202 31.9598 25.8251 34.621 22.3649 34.621C19.0551 34.621 16.1278 31.9496 16.1278 28.3571C16.1278 24.6554 19.3119 22.1798 22.1729 22.1798Z" fill="#4D3762"/>
+</svg>
diff --git a/apps/website/public/icons/close.svg b/apps/website/public/icons/close.svg
new file mode 100644
index 0000000000..1fcb5bdbef
--- /dev/null
+++ b/apps/website/public/icons/close.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f2ff59" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M18 6L6 18" />
+  <path d="M6 6l12 12" />
+</svg>
diff --git a/apps/website/public/icons/cubic.svg b/apps/website/public/icons/cubic.svg
new file mode 100644
index 0000000000..0032eb248f
--- /dev/null
+++ b/apps/website/public/icons/cubic.svg
@@ -0,0 +1,5 @@
+<svg width="213" height="252" viewBox="0 0 213 252" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M113.891 241.07C114.663 240.74 115.378 240.339 116.018 239.858C119.563 237.196 119.19 233.305 115.185 231.166L82.5103 213.57C80.7481 212.649 80.5683 210.948 82.1141 209.787C82.3951 209.576 82.7135 209.405 83.0339 209.255L118.439 193.433C119.996 192.739 122.105 192.742 123.552 193.515L156.203 210.912C163.084 214.586 172.995 214.602 180.347 211.325L197.65 203.799C203.417 201.279 204.58 194.765 199.211 191.703L161.926 171.792C155.081 168.137 145.219 168.107 137.894 171.318L124.319 177.251C122.76 177.923 120.684 177.918 119.237 177.145L109.763 172.086C102.971 168.459 93.2401 168.399 85.9246 171.535L40.2587 191.485C34.7284 194.099 32.5998 199.828 38.9002 204.268L45.2838 207.677C47.0303 208.61 47.2102 210.311 45.6488 211.484C45.3833 211.683 45.0826 211.864 44.7446 212.004L31.2805 217.876C30.5753 218.202 29.9073 218.567 29.3296 219.001C25.8007 221.651 26.1718 225.521 30.1589 227.65L70.1782 249.187C77.041 252.852 86.9186 252.87 94.2571 249.626L113.858 241.072L113.891 241.07Z" fill="#F2FF59"/>
+<path d="M104.261 118.957C104.273 117.985 104.096 117.016 103.841 116.059C102.429 110.759 97.068 108.263 92.0768 110.485L51.5756 128.509C49.405 129.501 47.1266 128.426 46.511 126.114C46.3991 125.694 46.3594 125.268 46.3478 124.855L46.5093 79.6575C46.4985 77.6776 47.6894 75.6852 49.4924 74.8828L90.1351 56.7436C98.7103 52.9274 104.316 43.5678 104.261 34.2174V9.01374C104.247 8.13187 104.245 7.21909 104.015 6.35524C102.609 1.07876 97.4477 -1.40313 92.4785 0.808285L43.2922 22.6974C34.7611 26.494 29.172 35.7971 29.1585 45.0737L29.11 62.2525C29.0926 64.2188 27.9174 66.1781 26.1144 66.9804L14.3071 72.235C5.84186 76.0022 0.104287 85.151 2.96039e-05 94.3635V156.109C-0.00222287 157.024 0.124117 157.961 0.360394 158.848C1.77184 164.148 6.96164 166.643 11.9528 164.422L23.5623 159.255C25.7391 158.287 28.0175 159.362 28.6393 161.697C28.745 162.093 28.8067 162.51 28.7962 162.932L28.7324 179.961C28.7521 180.867 28.844 181.766 29.0741 182.63C30.4793 187.906 35.6409 190.388 40.6101 188.177L89.8059 166.231C98.3591 162.425 104.282 153.098 104.261 143.785V118.99V118.957Z" fill="#F2FF59"/>
+<path d="M212.999 155.785C213.007 154.849 212.925 153.795 212.663 152.613C211.209 146.063 205.925 138.562 200.86 135.857L159.759 113.908C157.556 112.757 155.236 109.484 154.603 106.628C154.487 106.108 154.445 105.654 154.432 105.24L154.436 61.2966C154.418 59.3542 155.621 58.5727 157.451 59.5498L198.696 81.525C207.398 86.1723 213.089 82.505 212.999 73.3274V48.857C212.982 47.9834 212.86 46.9755 212.624 45.908C211.177 39.3878 205.921 31.9276 200.879 29.2345L150.963 2.57821C142.306 -2.04523 136.658 1.57626 136.677 10.6146L136.689 27.3292C136.678 29.2308 135.491 29.9954 133.661 29.0182L121.679 22.6193C113.088 18.0316 107.475 21.5446 107.402 30.4318L107.435 90.4925C107.436 91.3831 107.568 92.4198 107.811 93.5161C109.265 100.065 114.548 107.566 119.614 110.271L131.395 116.563C133.604 117.743 135.924 121.016 136.564 123.901C136.673 124.391 136.737 124.858 136.728 125.26L136.724 141.813C136.747 142.716 136.844 143.683 137.08 144.75C138.528 151.271 143.783 158.731 148.825 161.424L198.75 188.034C207.43 192.67 213.053 189.019 212.999 179.911V155.802V155.785Z" fill="#F2FF59"/>
+</svg>
diff --git a/apps/website/public/icons/logo.svg b/apps/website/public/icons/logo.svg
new file mode 100644
index 0000000000..34210e0d66
--- /dev/null
+++ b/apps/website/public/icons/logo.svg
@@ -0,0 +1,3 @@
+<svg width="173" height="48" viewBox="0 0 173 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M170.474 8.75283C170.474 8.75283 167.118 8.75283 164.685 8.75283C162.252 8.75283 160.206 10.3959 159.582 12.6326L156.526 23.2971C156.401 23.7157 156.008 24.0219 155.553 24.0219H154.474C153.912 24.0219 153.457 23.5658 153.457 23.0035C153.457 22.9036 153.469 22.8098 153.501 22.7161L156.563 12.0141C156.626 11.7891 156.663 11.558 156.663 11.3143C156.663 9.90238 155.522 8.75908 154.112 8.75908H148.354C145.922 8.75908 143.869 10.4084 143.252 12.6513L140.351 22.7911C140.226 23.2097 139.84 23.5221 139.378 23.5221H138.268C137.706 23.5221 137.251 23.066 137.251 22.5037C137.251 22.4037 137.263 22.31 137.288 22.2226L137.731 20.6794C137.787 20.4733 137.812 20.2546 137.812 20.0297C137.812 18.6177 136.671 17.4744 135.261 17.4744H131.849C131.288 17.4744 130.832 17.0183 130.832 16.4561C130.832 16.3624 130.845 16.2686 130.87 16.1812L131.512 13.9383C131.649 13.4697 132.08 13.1324 132.591 13.1324H135.904C138.318 13.1324 140.351 11.5143 140.994 9.30886L142.715 3.30496C142.778 3.08004 142.815 2.84264 142.815 2.59898C142.815 1.18704 141.674 0.0437327 140.264 0.0437327H134.581C132.167 0.0437327 130.134 1.66185 129.491 3.87348L128.325 7.94689C128.194 8.42171 127.757 8.76532 127.246 8.76532H123.858C121.432 8.76532 119.392 10.3959 118.762 12.6263L115.855 22.7786C115.737 23.2097 115.344 23.5283 114.876 23.5283H113.766C113.204 23.5283 112.749 23.0722 112.749 22.51C112.749 22.4162 112.761 22.3225 112.786 22.2351L113.229 20.6982C113.285 20.4857 113.316 20.2671 113.316 20.0359C113.316 18.624 112.175 17.4807 110.765 17.4807H107.378C106.817 17.4807 106.361 17.0246 106.361 16.4623C106.361 16.3561 106.374 16.2561 106.405 16.1624L107.584 12.0328C107.646 11.8079 107.684 11.5705 107.684 11.3268C107.684 9.91487 106.542 8.77157 105.132 8.77157H99.3749C96.9546 8.77157 94.9148 10.3959 94.2848 12.6138L93.1059 16.7372C92.9874 17.1683 92.5944 17.4807 92.1265 17.4807H90.9975C90.4361 17.4807 89.9807 17.0246 89.9807 16.4623C89.9807 16.3686 89.9932 16.2749 90.0181 16.1874L91.1971 12.064C91.2657 11.8329 91.3031 11.5892 91.3031 11.3331C91.3031 9.92112 90.1616 8.77782 88.7519 8.77782H74.8165C72.3838 8.77782 70.3378 10.4209 69.714 12.6576L64.312 31.5127C64.1935 31.9438 63.8005 32.2686 63.3265 32.2686H62.2099C61.6485 32.2686 61.1931 31.8126 61.1931 31.2503C61.1931 31.1628 61.2056 31.0754 61.2243 30.9941L64.1499 20.7669C64.2185 20.5357 64.2559 20.2921 64.2559 20.0422C64.2559 18.6302 63.1144 17.4869 61.7046 17.4869H58.2551C57.6937 17.4869 57.2383 17.0308 57.2383 16.4686C57.2383 16.3749 57.2508 16.2811 57.2758 16.1874L58.4485 12.0828C58.5233 11.8454 58.5608 11.5955 58.5608 11.3331C58.5608 9.92112 57.4192 8.77782 56.0095 8.77782H50.2457C47.8379 8.77782 45.8044 10.3897 45.1619 12.5951L44.0017 16.6435C43.8769 17.1246 43.4403 17.4807 42.9163 17.4807H39.5416C37.1089 17.4807 35.0628 19.1238 34.4391 21.3604L31.5322 31.5189C31.4137 31.95 31.0207 32.2624 30.5529 32.2624H29.5548C28.9934 32.2624 28.5381 31.8063 28.5381 31.244C28.5381 31.1503 28.5506 31.0566 28.5755 30.9629L28.9934 29.4947C29.0621 29.2636 29.0995 29.0199 29.0995 28.7638C29.0995 27.3456 27.9517 26.196 26.5357 26.196H15.0456C14.4281 26.2023 13.9228 25.7025 13.9228 25.084C13.9228 24.9715 13.9416 24.8653 13.9665 24.7653L17.0605 13.9695C17.1915 13.4947 17.6281 13.1449 18.1396 13.1449L29.6734 13.1324C32.1061 13.1324 34.1584 11.4893 34.7759 9.24639L36.51 3.22999C36.5662 3.01757 36.5974 2.78641 36.5974 2.55525C36.5974 1.1433 35.4558 0 34.0461 0H20.0921C17.6718 0 15.6258 1.63061 14.9957 3.8485L13.823 7.95314C13.6858 8.42171 13.2554 8.76532 12.7439 8.76532H9.39417C6.99261 8.76532 4.96531 10.3647 4.31658 12.5576L0.0935684 27.3081C0.0311901 27.5267 0 27.7642 0 28.0016C0 29.4198 1.14776 30.5693 2.56375 30.5693H5.85732C6.47487 30.5693 6.98013 31.0691 6.98013 31.6939C6.98013 31.8001 6.96766 31.9063 6.93647 32.0062L5.76999 36.0734C5.71385 36.2921 5.67642 36.517 5.67642 36.7481C5.67642 38.1601 6.81795 39.3034 8.2277 39.3034L22.188 39.2909C24.6145 39.2909 26.6605 37.654 27.2843 35.4237L27.6835 34.018C27.802 33.5869 28.195 33.2683 28.6628 33.2683H29.6609C30.2223 33.2683 30.6777 33.7243 30.6777 34.2866C30.6777 34.3866 30.6652 34.4803 30.634 34.574L30.2098 36.0484C30.1474 36.2671 30.1163 36.492 30.1163 36.7294C30.1163 38.1413 31.2578 39.2846 32.6675 39.2846H36.1358C36.6972 39.2846 37.1525 39.7407 37.1525 40.303C37.1525 40.403 37.14 40.4967 37.1089 40.5904L35.9112 44.7638C35.8488 44.9824 35.8176 45.2073 35.8176 45.4447C35.8176 46.8567 36.9591 48 38.3689 48H44.1327C46.5467 48 48.5802 46.3819 49.2227 44.1702L50.383 40.1156C50.5077 39.6345 50.9444 39.2846 51.4683 39.2846H54.8181C57.2259 39.2846 59.2656 37.6728 59.9019 35.4674L60.3136 34.0242C60.4321 33.5869 60.8251 33.2683 61.2992 33.2683H62.4157C62.9771 33.2683 63.4325 33.7243 63.4325 34.2866C63.4325 34.3803 63.42 34.474 63.3951 34.5615L62.9771 36.0109C62.9148 36.2358 62.8773 36.4732 62.8773 36.7169C62.8773 38.1288 64.0189 39.2722 65.4286 39.2722H71.1549C73.569 39.2784 75.6025 37.6665 76.245 35.4549L79.9253 22.5912C80.0501 22.1663 80.4368 21.854 80.9047 21.854H81.9838C82.5452 21.854 83.0006 22.31 83.0006 22.8723C83.0006 22.9723 82.9881 23.066 82.9632 23.1597L79.2766 36.0359C79.2142 36.2546 79.183 36.4857 79.183 36.7232C79.183 38.1351 80.3245 39.2784 81.7343 39.2784H87.5043C89.9121 39.2784 91.9394 37.6728 92.5881 35.4736L96.2747 22.5912C96.3932 22.1663 96.7862 21.8477 97.254 21.8477H98.3456C98.907 21.8477 99.3624 22.3038 99.3624 22.8661C99.3624 22.966 99.3499 23.0597 99.325 23.1472L95.6446 36.0047C95.5823 36.2296 95.5449 36.467 95.5449 36.7169C95.5449 38.1288 96.6864 39.2722 98.0961 39.2722H103.866C106.286 39.2722 108.326 37.6478 108.956 35.4299L111.869 25.2651C111.994 24.8403 112.381 24.5342 112.849 24.5342H113.959C114.52 24.5342 114.976 24.9902 114.976 25.5525C114.976 25.6525 114.963 25.7524 114.932 25.8399L109.524 44.7325C109.461 44.9512 109.43 45.1886 109.43 45.426C109.43 46.838 110.572 47.9813 111.982 47.9813H117.739C120.159 47.9813 122.205 46.3506 122.835 44.1328L126.491 31.3565C126.628 30.8879 127.058 30.5443 127.57 30.5443H130.882C133.29 30.5443 135.317 28.9387 135.966 26.7333L136.384 25.2776C136.502 24.8465 136.895 24.5279 137.363 24.5279H138.474C139.035 24.5279 139.49 24.984 139.49 25.5463C139.49 25.64 139.478 25.7274 139.453 25.8149L139.035 27.2831C138.973 27.508 138.935 27.7454 138.935 27.9891C138.935 29.401 140.077 30.5443 141.486 30.5443L153.076 30.5568C153.638 30.5568 154.093 31.0129 154.093 31.5752C154.093 31.6751 154.081 31.7751 154.049 31.8626L153.394 34.1492C153.276 34.5802 152.883 34.8926 152.415 34.8926H148.934C146.508 34.8926 144.468 36.5232 143.838 38.7474L142.135 44.7013C142.067 44.9324 142.029 45.1699 142.029 45.426C142.029 46.838 143.171 47.9813 144.58 47.9813H150.338C152.758 47.9813 154.798 46.3569 155.428 44.139L156.607 40.0281C156.719 39.5908 157.118 39.2722 157.593 39.2722H161.111C163.518 39.2722 165.546 37.6665 166.195 35.4611L172.9 12.0266C172.969 11.8016 173 11.558 173 11.3081C173 9.89613 171.858 8.75283 170.449 8.75283H170.474ZM50.2707 23.1347L47.1081 34.1804C46.9833 34.599 46.5904 34.8989 46.135 34.8989H45.0621C44.5007 34.8989 44.0453 34.4428 44.0453 33.8805C44.0453 33.793 44.0578 33.7056 44.0765 33.6244L47.2391 22.5912C47.3576 22.1601 47.7506 21.8477 48.2184 21.8477H49.2851C49.8465 21.8477 50.3019 22.3038 50.3019 22.8661C50.3019 22.9598 50.2894 23.0535 50.2644 23.141L50.2707 23.1347Z" fill="#F2FF59"/>
+</svg>
diff --git a/apps/website/public/icons/logomark.svg b/apps/website/public/icons/logomark.svg
new file mode 100644
index 0000000000..4e7ccc51c2
--- /dev/null
+++ b/apps/website/public/icons/logomark.svg
@@ -0,0 +1,3 @@
+<svg width="45" height="48" viewBox="0 0 45 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35.6487 36.021C35.733 35.7387 35.7791 35.4411 35.7791 35.1283C35.7791 33.3963 34.3675 31.9924 32.6262 31.9924H18.4956C17.7361 32 17.1147 31.3896 17.1147 30.6342C17.1147 30.4969 17.1377 30.3672 17.1684 30.2451L20.9734 17.0606C21.1345 16.4807 21.6715 16.0534 22.3005 16.0534L36.4848 16.0382C39.4766 16.0382 42.0005 14.0315 42.76 11.2923L44.8926 3.94468C44.9616 3.68526 45 3.40296 45 3.12065C45 1.39628 43.5961 0 41.8624 0L24.7017 0C21.7252 0 19.209 1.99142 18.4342 4.70005L16.992 9.71292C16.8232 10.2852 16.2939 10.7048 15.6648 10.7048H11.5453C8.59189 10.7048 6.0987 12.6581 5.30089 15.3362L0.11507 33.3505C0.0383566 33.6175 0 33.9075 0 34.1974C0 35.9294 1.41152 37.3333 3.15292 37.3333H7.20338C7.96284 37.3333 8.58421 37.9437 8.58421 38.7067C8.58421 38.8364 8.56887 38.9661 8.53051 39.0882L7.09598 44.0553C7.02694 44.3224 6.98091 44.597 6.98091 44.8794C6.98091 46.6037 8.38476 48 10.1185 48L27.2869 47.9847C30.2711 47.9847 32.7873 45.9857 33.5544 43.2618L35.641 36.0286L35.6487 36.021Z" fill="#F2FF59"/>
+</svg>
diff --git a/apps/website/public/icons/node-left.svg b/apps/website/public/icons/node-left.svg
new file mode 100644
index 0000000000..5e4bf38338
--- /dev/null
+++ b/apps/website/public/icons/node-left.svg
@@ -0,0 +1,3 @@
+<svg width="42.66" height="94.14" viewBox="0 0 42.66 94.14" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.5464 94.1386H42.6566V0C30.658 0 18.2687 9.66676 14.9543 21.5781L0.813667 72.5605C-2.48629 84.4719 4.54783 94.1386 16.5464 94.1386Z" fill="#F2FF59"/>
+</svg>
diff --git a/apps/website/public/icons/node-link.svg b/apps/website/public/icons/node-link.svg
new file mode 100644
index 0000000000..5fb56caab0
--- /dev/null
+++ b/apps/website/public/icons/node-link.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="32" viewBox="0 0 20 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 32V0C20 5.39616 15.5172 9.78053 10 9.78053C4.48276 9.78053 0 5.416 0 0V32C0 26.6038 4.48276 22.2195 10 22.2195C15.5172 22.2195 20 26.6038 20 32Z" fill="#F2FF59"/>
+</svg>
diff --git a/apps/website/public/icons/node-right.svg b/apps/website/public/icons/node-right.svg
new file mode 100644
index 0000000000..b9465b1d9c
--- /dev/null
+++ b/apps/website/public/icons/node-right.svg
@@ -0,0 +1,3 @@
+<svg width="42.66" height="94.14" viewBox="0 0 42.66 94.14" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.1101 0H0V94.1387C11.9985 94.1387 24.3878 84.4719 27.7022 72.5606L41.8428 21.5781C45.1428 9.66678 38.1087 0 26.1101 0Z" fill="#F2FF59"/>
+</svg>
diff --git a/apps/website/public/icons/node-union.svg b/apps/website/public/icons/node-union.svg
new file mode 100644
index 0000000000..e8ef05de5e
--- /dev/null
+++ b/apps/website/public/icons/node-union.svg
@@ -0,0 +1,3 @@
+<svg width="87.7" height="95.23" viewBox="0 0 87.7 95.23" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M87.6679 0C75.187 0 62.2689 9.77836 58.8171 21.8272L54.0387 38.5685C53.1343 41.7321 50.2553 43.8966 46.9843 43.8966C42.1156 43.8966 38.5883 39.2042 39.9299 34.4967L43.5475 21.8272C47.0145 9.77836 39.6736 0 27.1927 0H0V95.2254C12.4809 95.2254 25.399 85.4471 28.8508 73.3982L33.5839 56.7932C34.4883 53.6296 37.3674 51.465 40.6383 51.465C45.5222 51.465 49.0343 56.1574 47.6928 60.865L44.1053 73.3982C40.6685 85.4471 47.9942 95.2254 60.4902 95.2254H87.6829V0H87.6679Z" fill="#F2FF59"/>
+</svg>
diff --git a/apps/website/public/icons/plus.svg b/apps/website/public/icons/plus.svg
new file mode 100644
index 0000000000..d99c0548db
--- /dev/null
+++ b/apps/website/public/icons/plus.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.71973 11.5878H20.2197" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.9697 3.33777V19.8378" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/apps/website/public/icons/social/discord.svg b/apps/website/public/icons/social/discord.svg
new file mode 100644
index 0000000000..a3a90ce83f
--- /dev/null
+++ b/apps/website/public/icons/social/discord.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.492c-1.53-.69-3.17-1.2-4.885-1.49a.075.075 0 0 0-.079.036c-.21.369-.444.85-.608 1.23a18.566 18.566 0 0 0-5.487 0 12.36 12.36 0 0 0-.617-1.23A.077.077 0 0 0 8.562 3c-1.714.29-3.354.8-4.885 1.491a.07.07 0 0 0-.032.027C.533 9.093-.32 13.555.099 17.961a.08.08 0 0 0 .031.055 20.03 20.03 0 0 0 5.993 2.98.078.078 0 0 0 .084-.026c.462-.62.874-1.275 1.226-1.963.021-.04.001-.088-.041-.104a13.201 13.201 0 0 1-1.872-.878.075.075 0 0 1-.008-.125c.126-.093.252-.19.372-.287a.075.075 0 0 1 .078-.01c3.927 1.764 8.18 1.764 12.061 0a.075.075 0 0 1 .079.009c.12.098.245.195.372.288a.075.075 0 0 1-.006.125c-.598.344-1.22.635-1.873.877a.075.075 0 0 0-.041.105c.36.687.772 1.341 1.225 1.962a.077.077 0 0 0 .084.028 19.963 19.963 0 0 0 6.002-2.981.076.076 0 0 0 .032-.054c.5-5.094-.838-9.52-3.549-13.442a.06.06 0 0 0-.031-.028ZM8.02 15.278c-1.182 0-2.157-1.069-2.157-2.38 0-1.312.956-2.38 2.157-2.38 1.21 0 2.176 1.077 2.157 2.38 0 1.312-.956 2.38-2.157 2.38Zm7.975 0c-1.183 0-2.157-1.069-2.157-2.38 0-1.312.955-2.38 2.157-2.38 1.21 0 2.176 1.077 2.157 2.38 0 1.312-.946 2.38-2.157 2.38Z"/></svg>
diff --git a/apps/website/public/icons/social/github.svg b/apps/website/public/icons/social/github.svg
new file mode 100644
index 0000000000..54b40b9c86
--- /dev/null
+++ b/apps/website/public/icons/social/github.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z"/></svg>
diff --git a/apps/website/public/icons/social/instagram.svg b/apps/website/public/icons/social/instagram.svg
new file mode 100644
index 0000000000..8c8aaf96fe
--- /dev/null
+++ b/apps/website/public/icons/social/instagram.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069ZM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0Zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324ZM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881Z"/></svg>
diff --git a/apps/website/public/icons/social/linkedin.svg b/apps/website/public/icons/social/linkedin.svg
new file mode 100644
index 0000000000..83097b0550
--- /dev/null
+++ b/apps/website/public/icons/social/linkedin.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286ZM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065Zm1.782 13.019H3.555V9h3.564v11.452ZM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003Z"/></svg>
diff --git a/apps/website/public/icons/social/reddit.svg b/apps/website/public/icons/social/reddit.svg
new file mode 100644
index 0000000000..42a6175f70
--- /dev/null
+++ b/apps/website/public/icons/social/reddit.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm5.8 11.33c.02.16.03.33.03.5 0 2.55-2.97 4.63-6.63 4.63-3.65 0-6.62-2.07-6.62-4.63 0-.17.01-.34.03-.5a1.58 1.58 0 0 1-.63-1.27c0-.88.72-1.59 1.6-1.59.44 0 .83.18 1.12.46 1.1-.79 2.62-1.3 4.31-1.37l.73-3.44a.32.32 0 0 1 .39-.24l2.43.52a1.13 1.13 0 0 1 2.15.36 1.13 1.13 0 0 1-1.13 1.12 1.13 1.13 0 0 1-1.08-.82l-2.16-.46-.65 3.07c1.65.09 3.14.59 4.22 1.36.29-.28.69-.46 1.13-.46.88 0 1.6.71 1.6 1.59 0 .52-.25.97-.63 1.27ZM9.5 13.5c0 .63.51 1.13 1.13 1.13s1.12-.5 1.12-1.13-.5-1.12-1.12-1.12-1.13.5-1.13 1.12Zm5.75 2.55c-.69.69-2 .73-3.25.73s-2.56-.04-3.25-.73a.32.32 0 1 1 .45-.45c.44.44 1.37.6 2.8.6 1.43 0 2.37-.16 2.8-.6a.32.32 0 1 1 .45.45Zm-.37-1.42c.62 0 1.13-.5 1.13-1.13 0-.62-.51-1.12-1.13-1.12-.63 0-1.13.5-1.13 1.12 0 .63.5 1.13 1.13 1.13Z"/></svg>
diff --git a/apps/website/public/icons/social/x.svg b/apps/website/public/icons/social/x.svg
new file mode 100644
index 0000000000..f5c2a528b0
--- /dev/null
+++ b/apps/website/public/icons/social/x.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
diff --git a/apps/website/public/robots.txt b/apps/website/public/robots.txt
new file mode 100644
index 0000000000..b1931edbd8
--- /dev/null
+++ b/apps/website/public/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://comfy.org/sitemap-index.xml
diff --git a/apps/website/public/videos/footer-logo-seq/Logo00.webp b/apps/website/public/videos/footer-logo-seq/Logo00.webp
new file mode 100644
index 0000000000..2df99a7929
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo00.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo01.webp b/apps/website/public/videos/footer-logo-seq/Logo01.webp
new file mode 100644
index 0000000000..39aee52523
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo01.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo02.webp b/apps/website/public/videos/footer-logo-seq/Logo02.webp
new file mode 100644
index 0000000000..770e985bb2
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo02.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo03.webp b/apps/website/public/videos/footer-logo-seq/Logo03.webp
new file mode 100644
index 0000000000..79d85e61aa
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo03.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo04.webp b/apps/website/public/videos/footer-logo-seq/Logo04.webp
new file mode 100644
index 0000000000..84a7c8a81e
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo04.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo05.webp b/apps/website/public/videos/footer-logo-seq/Logo05.webp
new file mode 100644
index 0000000000..68e917783b
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo05.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo06.webp b/apps/website/public/videos/footer-logo-seq/Logo06.webp
new file mode 100644
index 0000000000..d9e1686455
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo06.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo07.webp b/apps/website/public/videos/footer-logo-seq/Logo07.webp
new file mode 100644
index 0000000000..e10df09c11
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo07.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo08.webp b/apps/website/public/videos/footer-logo-seq/Logo08.webp
new file mode 100644
index 0000000000..8621ad07dc
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo08.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo09.webp b/apps/website/public/videos/footer-logo-seq/Logo09.webp
new file mode 100644
index 0000000000..0a4227dc51
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo09.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo10.webp b/apps/website/public/videos/footer-logo-seq/Logo10.webp
new file mode 100644
index 0000000000..b2e832dd22
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo10.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo11.webp b/apps/website/public/videos/footer-logo-seq/Logo11.webp
new file mode 100644
index 0000000000..fe8f82b016
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo11.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo12.webp b/apps/website/public/videos/footer-logo-seq/Logo12.webp
new file mode 100644
index 0000000000..f81bca8b19
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo12.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo13.webp b/apps/website/public/videos/footer-logo-seq/Logo13.webp
new file mode 100644
index 0000000000..4ea76b84f4
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo13.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo14.webp b/apps/website/public/videos/footer-logo-seq/Logo14.webp
new file mode 100644
index 0000000000..3badbe247c
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo14.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo15.webp b/apps/website/public/videos/footer-logo-seq/Logo15.webp
new file mode 100644
index 0000000000..7ae74acb4d
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo15.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo16.webp b/apps/website/public/videos/footer-logo-seq/Logo16.webp
new file mode 100644
index 0000000000..de331ba650
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo16.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo17.webp b/apps/website/public/videos/footer-logo-seq/Logo17.webp
new file mode 100644
index 0000000000..609d105052
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo17.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo18.webp b/apps/website/public/videos/footer-logo-seq/Logo18.webp
new file mode 100644
index 0000000000..38cfaf4e04
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo18.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo19.webp b/apps/website/public/videos/footer-logo-seq/Logo19.webp
new file mode 100644
index 0000000000..ef7e91d348
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo19.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo20.webp b/apps/website/public/videos/footer-logo-seq/Logo20.webp
new file mode 100644
index 0000000000..7d9c9c0b1d
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo20.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo21.webp b/apps/website/public/videos/footer-logo-seq/Logo21.webp
new file mode 100644
index 0000000000..c8e15e5a1e
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo21.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo22.webp b/apps/website/public/videos/footer-logo-seq/Logo22.webp
new file mode 100644
index 0000000000..56f7bf2161
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo22.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo23.webp b/apps/website/public/videos/footer-logo-seq/Logo23.webp
new file mode 100644
index 0000000000..24fb6be9fa
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo23.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo24.webp b/apps/website/public/videos/footer-logo-seq/Logo24.webp
new file mode 100644
index 0000000000..a520d21ca3
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo24.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo25.webp b/apps/website/public/videos/footer-logo-seq/Logo25.webp
new file mode 100644
index 0000000000..3551df38b5
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo25.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo26.webp b/apps/website/public/videos/footer-logo-seq/Logo26.webp
new file mode 100644
index 0000000000..1962d54c51
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo26.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo27.webp b/apps/website/public/videos/footer-logo-seq/Logo27.webp
new file mode 100644
index 0000000000..3bccd44e52
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo27.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo28.webp b/apps/website/public/videos/footer-logo-seq/Logo28.webp
new file mode 100644
index 0000000000..23fdce9bf2
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo28.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo29.webp b/apps/website/public/videos/footer-logo-seq/Logo29.webp
new file mode 100644
index 0000000000..b2491f32ed
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo29.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo30.webp b/apps/website/public/videos/footer-logo-seq/Logo30.webp
new file mode 100644
index 0000000000..132311d6d7
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo30.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo31.webp b/apps/website/public/videos/footer-logo-seq/Logo31.webp
new file mode 100644
index 0000000000..2a7517bb71
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo31.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo32.webp b/apps/website/public/videos/footer-logo-seq/Logo32.webp
new file mode 100644
index 0000000000..293b3ec8e7
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo32.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo33.webp b/apps/website/public/videos/footer-logo-seq/Logo33.webp
new file mode 100644
index 0000000000..4a64f380c0
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo33.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo34.webp b/apps/website/public/videos/footer-logo-seq/Logo34.webp
new file mode 100644
index 0000000000..d4a5c63ddf
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo34.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo35.webp b/apps/website/public/videos/footer-logo-seq/Logo35.webp
new file mode 100644
index 0000000000..d23094d4a1
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo35.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo36.webp b/apps/website/public/videos/footer-logo-seq/Logo36.webp
new file mode 100644
index 0000000000..cae43c76e4
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo36.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo37.webp b/apps/website/public/videos/footer-logo-seq/Logo37.webp
new file mode 100644
index 0000000000..7d91915458
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo37.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo38.webp b/apps/website/public/videos/footer-logo-seq/Logo38.webp
new file mode 100644
index 0000000000..1f54724b9b
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo38.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo39.webp b/apps/website/public/videos/footer-logo-seq/Logo39.webp
new file mode 100644
index 0000000000..dfbe642c49
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo39.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo40.webp b/apps/website/public/videos/footer-logo-seq/Logo40.webp
new file mode 100644
index 0000000000..1b0a7b0e66
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo40.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo41.webp b/apps/website/public/videos/footer-logo-seq/Logo41.webp
new file mode 100644
index 0000000000..b8ce0167cf
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo41.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo42.webp b/apps/website/public/videos/footer-logo-seq/Logo42.webp
new file mode 100644
index 0000000000..00287026e5
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo42.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo43.webp b/apps/website/public/videos/footer-logo-seq/Logo43.webp
new file mode 100644
index 0000000000..68b4fa26be
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo43.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo44.webp b/apps/website/public/videos/footer-logo-seq/Logo44.webp
new file mode 100644
index 0000000000..d04c72c72f
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo44.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo45.webp b/apps/website/public/videos/footer-logo-seq/Logo45.webp
new file mode 100644
index 0000000000..fec1704086
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo45.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo46.webp b/apps/website/public/videos/footer-logo-seq/Logo46.webp
new file mode 100644
index 0000000000..2f264ad203
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo46.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo47.webp b/apps/website/public/videos/footer-logo-seq/Logo47.webp
new file mode 100644
index 0000000000..9bef152016
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo47.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo48.webp b/apps/website/public/videos/footer-logo-seq/Logo48.webp
new file mode 100644
index 0000000000..0fdd7e6402
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo48.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo49.webp b/apps/website/public/videos/footer-logo-seq/Logo49.webp
new file mode 100644
index 0000000000..ede3d38e99
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo49.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo50.webp b/apps/website/public/videos/footer-logo-seq/Logo50.webp
new file mode 100644
index 0000000000..ea98bf15ca
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo50.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo51.webp b/apps/website/public/videos/footer-logo-seq/Logo51.webp
new file mode 100644
index 0000000000..ba709840d6
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo51.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo52.webp b/apps/website/public/videos/footer-logo-seq/Logo52.webp
new file mode 100644
index 0000000000..f52ed6ec10
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo52.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo53.webp b/apps/website/public/videos/footer-logo-seq/Logo53.webp
new file mode 100644
index 0000000000..9bbbd52a5f
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo53.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo54.webp b/apps/website/public/videos/footer-logo-seq/Logo54.webp
new file mode 100644
index 0000000000..6f2e5c7901
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo54.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo55.webp b/apps/website/public/videos/footer-logo-seq/Logo55.webp
new file mode 100644
index 0000000000..825af5809f
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo55.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo56.webp b/apps/website/public/videos/footer-logo-seq/Logo56.webp
new file mode 100644
index 0000000000..7d7964f1e6
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo56.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo57.webp b/apps/website/public/videos/footer-logo-seq/Logo57.webp
new file mode 100644
index 0000000000..96a1a793ad
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo57.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo58.webp b/apps/website/public/videos/footer-logo-seq/Logo58.webp
new file mode 100644
index 0000000000..437dd3d2d4
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo58.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo59.webp b/apps/website/public/videos/footer-logo-seq/Logo59.webp
new file mode 100644
index 0000000000..76ba6f8c04
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo59.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo60.webp b/apps/website/public/videos/footer-logo-seq/Logo60.webp
new file mode 100644
index 0000000000..dd6c659025
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo60.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo61.webp b/apps/website/public/videos/footer-logo-seq/Logo61.webp
new file mode 100644
index 0000000000..42d6830be5
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo61.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo62.webp b/apps/website/public/videos/footer-logo-seq/Logo62.webp
new file mode 100644
index 0000000000..a6e2729e42
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo62.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo63.webp b/apps/website/public/videos/footer-logo-seq/Logo63.webp
new file mode 100644
index 0000000000..dbf2f7a9fd
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo63.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo64.webp b/apps/website/public/videos/footer-logo-seq/Logo64.webp
new file mode 100644
index 0000000000..778bd67aab
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo64.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo65.webp b/apps/website/public/videos/footer-logo-seq/Logo65.webp
new file mode 100644
index 0000000000..e4d17385de
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo65.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo66.webp b/apps/website/public/videos/footer-logo-seq/Logo66.webp
new file mode 100644
index 0000000000..6bad22efc1
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo66.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo67.webp b/apps/website/public/videos/footer-logo-seq/Logo67.webp
new file mode 100644
index 0000000000..33068ba6a1
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo67.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo68.webp b/apps/website/public/videos/footer-logo-seq/Logo68.webp
new file mode 100644
index 0000000000..1485172f7e
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo68.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo69.webp b/apps/website/public/videos/footer-logo-seq/Logo69.webp
new file mode 100644
index 0000000000..a679a0cc5e
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo69.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo70.webp b/apps/website/public/videos/footer-logo-seq/Logo70.webp
new file mode 100644
index 0000000000..0027fde458
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo70.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo71.webp b/apps/website/public/videos/footer-logo-seq/Logo71.webp
new file mode 100644
index 0000000000..fabb774a60
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo71.webp differ
diff --git a/apps/website/public/videos/footer-logo-seq/Logo72.webp b/apps/website/public/videos/footer-logo-seq/Logo72.webp
new file mode 100644
index 0000000000..ab3a4895e1
Binary files /dev/null and b/apps/website/public/videos/footer-logo-seq/Logo72.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo00.webp b/apps/website/public/videos/hero-logo-seq/Logo00.webp
new file mode 100644
index 0000000000..5a8af2f794
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo00.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo01.webp b/apps/website/public/videos/hero-logo-seq/Logo01.webp
new file mode 100644
index 0000000000..1a4665d739
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo01.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo02.webp b/apps/website/public/videos/hero-logo-seq/Logo02.webp
new file mode 100644
index 0000000000..55b2580824
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo02.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo03.webp b/apps/website/public/videos/hero-logo-seq/Logo03.webp
new file mode 100644
index 0000000000..875b3810e4
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo03.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo04.webp b/apps/website/public/videos/hero-logo-seq/Logo04.webp
new file mode 100644
index 0000000000..6f668f5a29
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo04.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo05.webp b/apps/website/public/videos/hero-logo-seq/Logo05.webp
new file mode 100644
index 0000000000..c24f0500c7
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo05.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo06.webp b/apps/website/public/videos/hero-logo-seq/Logo06.webp
new file mode 100644
index 0000000000..b27aa683e6
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo06.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo07.webp b/apps/website/public/videos/hero-logo-seq/Logo07.webp
new file mode 100644
index 0000000000..e3357f8203
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo07.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo08.webp b/apps/website/public/videos/hero-logo-seq/Logo08.webp
new file mode 100644
index 0000000000..93e5f6d4eb
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo08.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo09.webp b/apps/website/public/videos/hero-logo-seq/Logo09.webp
new file mode 100644
index 0000000000..bb50a02364
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo09.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo10.webp b/apps/website/public/videos/hero-logo-seq/Logo10.webp
new file mode 100644
index 0000000000..d2a6d8b433
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo10.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo11.webp b/apps/website/public/videos/hero-logo-seq/Logo11.webp
new file mode 100644
index 0000000000..6017ec869b
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo11.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo12.webp b/apps/website/public/videos/hero-logo-seq/Logo12.webp
new file mode 100644
index 0000000000..edea70da33
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo12.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo13.webp b/apps/website/public/videos/hero-logo-seq/Logo13.webp
new file mode 100644
index 0000000000..b4b23662e7
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo13.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo14.webp b/apps/website/public/videos/hero-logo-seq/Logo14.webp
new file mode 100644
index 0000000000..1f1e515543
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo14.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo15.webp b/apps/website/public/videos/hero-logo-seq/Logo15.webp
new file mode 100644
index 0000000000..2dc2c1fdcb
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo15.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo16.webp b/apps/website/public/videos/hero-logo-seq/Logo16.webp
new file mode 100644
index 0000000000..3abed7885a
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo16.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo17.webp b/apps/website/public/videos/hero-logo-seq/Logo17.webp
new file mode 100644
index 0000000000..985522fd9a
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo17.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo18.webp b/apps/website/public/videos/hero-logo-seq/Logo18.webp
new file mode 100644
index 0000000000..27f673a7b3
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo18.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo19.webp b/apps/website/public/videos/hero-logo-seq/Logo19.webp
new file mode 100644
index 0000000000..72b7777fb1
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo19.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo20.webp b/apps/website/public/videos/hero-logo-seq/Logo20.webp
new file mode 100644
index 0000000000..b2b7c31f4d
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo20.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo21.webp b/apps/website/public/videos/hero-logo-seq/Logo21.webp
new file mode 100644
index 0000000000..69ad85865f
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo21.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo22.webp b/apps/website/public/videos/hero-logo-seq/Logo22.webp
new file mode 100644
index 0000000000..c4e839e21a
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo22.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo23.webp b/apps/website/public/videos/hero-logo-seq/Logo23.webp
new file mode 100644
index 0000000000..1de04f36e9
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo23.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo24.webp b/apps/website/public/videos/hero-logo-seq/Logo24.webp
new file mode 100644
index 0000000000..368f39f909
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo24.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo25.webp b/apps/website/public/videos/hero-logo-seq/Logo25.webp
new file mode 100644
index 0000000000..df1a8aa5ae
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo25.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo26.webp b/apps/website/public/videos/hero-logo-seq/Logo26.webp
new file mode 100644
index 0000000000..92809d468d
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo26.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo27.webp b/apps/website/public/videos/hero-logo-seq/Logo27.webp
new file mode 100644
index 0000000000..f5b7daa3c7
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo27.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo28.webp b/apps/website/public/videos/hero-logo-seq/Logo28.webp
new file mode 100644
index 0000000000..d0c6022916
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo28.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo29.webp b/apps/website/public/videos/hero-logo-seq/Logo29.webp
new file mode 100644
index 0000000000..dad37c6c9c
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo29.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo30.webp b/apps/website/public/videos/hero-logo-seq/Logo30.webp
new file mode 100644
index 0000000000..096b12096a
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo30.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo31.webp b/apps/website/public/videos/hero-logo-seq/Logo31.webp
new file mode 100644
index 0000000000..6786649bbf
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo31.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo32.webp b/apps/website/public/videos/hero-logo-seq/Logo32.webp
new file mode 100644
index 0000000000..3ad1e165ca
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo32.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo33.webp b/apps/website/public/videos/hero-logo-seq/Logo33.webp
new file mode 100644
index 0000000000..d548fb3869
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo33.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo34.webp b/apps/website/public/videos/hero-logo-seq/Logo34.webp
new file mode 100644
index 0000000000..b93e424332
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo34.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo35.webp b/apps/website/public/videos/hero-logo-seq/Logo35.webp
new file mode 100644
index 0000000000..7bae894363
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo35.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo36.webp b/apps/website/public/videos/hero-logo-seq/Logo36.webp
new file mode 100644
index 0000000000..5326f60c83
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo36.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo37.webp b/apps/website/public/videos/hero-logo-seq/Logo37.webp
new file mode 100644
index 0000000000..9a41d58c52
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo37.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo38.webp b/apps/website/public/videos/hero-logo-seq/Logo38.webp
new file mode 100644
index 0000000000..ef12408289
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo38.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo39.webp b/apps/website/public/videos/hero-logo-seq/Logo39.webp
new file mode 100644
index 0000000000..5d8ff38bb4
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo39.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo40.webp b/apps/website/public/videos/hero-logo-seq/Logo40.webp
new file mode 100644
index 0000000000..110ff16810
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo40.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo41.webp b/apps/website/public/videos/hero-logo-seq/Logo41.webp
new file mode 100644
index 0000000000..c67574a72c
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo41.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo42.webp b/apps/website/public/videos/hero-logo-seq/Logo42.webp
new file mode 100644
index 0000000000..820b1f1a9e
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo42.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo43.webp b/apps/website/public/videos/hero-logo-seq/Logo43.webp
new file mode 100644
index 0000000000..7271487d06
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo43.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo44.webp b/apps/website/public/videos/hero-logo-seq/Logo44.webp
new file mode 100644
index 0000000000..a6a44876eb
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo44.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo45.webp b/apps/website/public/videos/hero-logo-seq/Logo45.webp
new file mode 100644
index 0000000000..55a517c576
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo45.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo46.webp b/apps/website/public/videos/hero-logo-seq/Logo46.webp
new file mode 100644
index 0000000000..a2da0b2b89
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo46.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo47.webp b/apps/website/public/videos/hero-logo-seq/Logo47.webp
new file mode 100644
index 0000000000..1b4ad289f0
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo47.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo48.webp b/apps/website/public/videos/hero-logo-seq/Logo48.webp
new file mode 100644
index 0000000000..e586ca6a75
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo48.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo49.webp b/apps/website/public/videos/hero-logo-seq/Logo49.webp
new file mode 100644
index 0000000000..fc6fed8cf6
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo49.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo50.webp b/apps/website/public/videos/hero-logo-seq/Logo50.webp
new file mode 100644
index 0000000000..dcdec2b9b2
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo50.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo51.webp b/apps/website/public/videos/hero-logo-seq/Logo51.webp
new file mode 100644
index 0000000000..8ff8929b0e
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo51.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo52.webp b/apps/website/public/videos/hero-logo-seq/Logo52.webp
new file mode 100644
index 0000000000..47fbe15059
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo52.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo53.webp b/apps/website/public/videos/hero-logo-seq/Logo53.webp
new file mode 100644
index 0000000000..b4db489c79
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo53.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo54.webp b/apps/website/public/videos/hero-logo-seq/Logo54.webp
new file mode 100644
index 0000000000..70fc036b57
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo54.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo55.webp b/apps/website/public/videos/hero-logo-seq/Logo55.webp
new file mode 100644
index 0000000000..3777287468
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo55.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo56.webp b/apps/website/public/videos/hero-logo-seq/Logo56.webp
new file mode 100644
index 0000000000..bb845dc26a
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo56.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo57.webp b/apps/website/public/videos/hero-logo-seq/Logo57.webp
new file mode 100644
index 0000000000..a291121054
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo57.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo58.webp b/apps/website/public/videos/hero-logo-seq/Logo58.webp
new file mode 100644
index 0000000000..1336e1a02b
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo58.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo59.webp b/apps/website/public/videos/hero-logo-seq/Logo59.webp
new file mode 100644
index 0000000000..77cc784d9c
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo59.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo60.webp b/apps/website/public/videos/hero-logo-seq/Logo60.webp
new file mode 100644
index 0000000000..3b5568586e
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo60.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo61.webp b/apps/website/public/videos/hero-logo-seq/Logo61.webp
new file mode 100644
index 0000000000..0d53689080
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo61.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo62.webp b/apps/website/public/videos/hero-logo-seq/Logo62.webp
new file mode 100644
index 0000000000..119702596c
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo62.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo63.webp b/apps/website/public/videos/hero-logo-seq/Logo63.webp
new file mode 100644
index 0000000000..084bf82382
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo63.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo64.webp b/apps/website/public/videos/hero-logo-seq/Logo64.webp
new file mode 100644
index 0000000000..5f692bd9c3
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo64.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo65.webp b/apps/website/public/videos/hero-logo-seq/Logo65.webp
new file mode 100644
index 0000000000..e973ef53b5
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo65.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo66.webp b/apps/website/public/videos/hero-logo-seq/Logo66.webp
new file mode 100644
index 0000000000..33ad4c8735
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo66.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo67.webp b/apps/website/public/videos/hero-logo-seq/Logo67.webp
new file mode 100644
index 0000000000..b60647c8a7
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo67.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo68.webp b/apps/website/public/videos/hero-logo-seq/Logo68.webp
new file mode 100644
index 0000000000..d587a2b647
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo68.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo69.webp b/apps/website/public/videos/hero-logo-seq/Logo69.webp
new file mode 100644
index 0000000000..08c1a1c68d
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo69.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo70.webp b/apps/website/public/videos/hero-logo-seq/Logo70.webp
new file mode 100644
index 0000000000..7e4ba4f797
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo70.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo71.webp b/apps/website/public/videos/hero-logo-seq/Logo71.webp
new file mode 100644
index 0000000000..9ecb064371
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo71.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo72.webp b/apps/website/public/videos/hero-logo-seq/Logo72.webp
new file mode 100644
index 0000000000..f838a1cc3f
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo72.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo73.webp b/apps/website/public/videos/hero-logo-seq/Logo73.webp
new file mode 100644
index 0000000000..1f134284c7
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo73.webp differ
diff --git a/apps/website/public/videos/hero-logo-seq/Logo74.webp b/apps/website/public/videos/hero-logo-seq/Logo74.webp
new file mode 100644
index 0000000000..b4b07d3d3f
Binary files /dev/null and b/apps/website/public/videos/hero-logo-seq/Logo74.webp differ
diff --git a/apps/website/src/components/common/BrandButton.stories.ts b/apps/website/src/components/common/BrandButton.stories.ts
new file mode 100644
index 0000000000..f7a9773edf
--- /dev/null
+++ b/apps/website/src/components/common/BrandButton.stories.ts
@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import BrandButton from './BrandButton.vue'
+
+const meta: Meta<typeof BrandButton> = {
+  title: 'Website/Common/BrandButton',
+  component: BrandButton,
+  tags: ['autodocs'],
+  decorators: [
+    () => ({
+      template: '<div class="bg-primary-comfy-ink p-8"><story /></div>'
+    })
+  ],
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['solid', 'outline']
+    }
+  },
+  args: {
+    href: '#',
+    label: 'BUTTON LABEL'
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Solid: Story = {
+  args: {
+    variant: 'solid'
+  }
+}
+
+export const Outline: Story = {
+  args: {
+    variant: 'outline'
+  }
+}
+
+export const AllVariants: Story = {
+  render: () => ({
+    components: { BrandButton },
+    template: `
+      <div class="flex gap-4">
+        <BrandButton href="#" label="SOLID BUTTON" variant="solid" />
+        <BrandButton href="#" label="OUTLINE BUTTON" variant="outline" />
+      </div>
+    `
+  })
+}
diff --git a/apps/website/src/components/common/BrandButton.vue b/apps/website/src/components/common/BrandButton.vue
new file mode 100644
index 0000000000..88afd68586
--- /dev/null
+++ b/apps/website/src/components/common/BrandButton.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+
+const {
+  href,
+  label,
+  variant = 'solid',
+  className = ''
+} = defineProps<{
+  href: string
+  label: string
+  variant?: 'solid' | 'outline'
+  className?: string
+}>()
+</script>
+
+<template>
+  <a
+    :href="href"
+    :class="
+      cn(
+        'rounded-2xl px-4 py-2 text-sm font-semibold',
+        className,
+        variant === 'solid'
+          ? 'bg-primary-comfy-yellow text-primary-comfy-ink transition-opacity hover:opacity-90'
+          : 'border-primary-comfy-yellow text-primary-comfy-yellow hover:bg-primary-comfy-yellow hover:text-primary-comfy-ink border transition-colors'
+      )
+    "
+  >
+    {{ label }}
+  </a>
+</template>
diff --git a/apps/website/src/components/common/ComingSoon.astro b/apps/website/src/components/common/ComingSoon.astro
new file mode 100644
index 0000000000..3336717420
--- /dev/null
+++ b/apps/website/src/components/common/ComingSoon.astro
@@ -0,0 +1,10 @@
+<section class="flex min-h-[60vh] items-center justify-center px-6">
+  <div class="text-center">
+    <h1 class="text-primary-comfy-canvas text-4xl font-light">
+      Coming Soon
+    </h1>
+    <p class="text-primary-warm-gray mt-4 text-sm">
+      This page is being redesigned. Check back soon.
+    </p>
+  </div>
+</section>
diff --git a/apps/website/src/components/common/FooterLinkColumn.stories.ts b/apps/website/src/components/common/FooterLinkColumn.stories.ts
new file mode 100644
index 0000000000..8a96dda831
--- /dev/null
+++ b/apps/website/src/components/common/FooterLinkColumn.stories.ts
@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import FooterLinkColumn from './FooterLinkColumn.vue'
+
+const meta: Meta<typeof FooterLinkColumn> = {
+  title: 'Website/Common/FooterLinkColumn',
+  component: FooterLinkColumn,
+  tags: ['autodocs'],
+  decorators: [
+    () => ({
+      template:
+        '<div class="bg-primary-comfy-ink text-primary-comfy-canvas p-8"><story /></div>'
+    })
+  ]
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    title: 'Product',
+    links: [
+      { label: 'Local', href: '/local' },
+      { label: 'Cloud', href: '/cloud' },
+      { label: 'API', href: '/api' },
+      { label: 'Enterprise', href: '/enterprise' }
+    ]
+  }
+}
+
+export const WithExternalLinks: Story = {
+  args: {
+    title: 'Community',
+    links: [
+      { label: 'Discord', href: 'https://discord.gg/comfy', external: true },
+      { label: 'GitHub', href: 'https://github.com/comfy', external: true },
+      { label: 'Twitter', href: 'https://twitter.com/comfy', external: true },
+      { label: 'Blog', href: '/blog' }
+    ]
+  }
+}
diff --git a/apps/website/src/components/common/FooterLinkColumn.vue b/apps/website/src/components/common/FooterLinkColumn.vue
new file mode 100644
index 0000000000..b8c43e87f5
--- /dev/null
+++ b/apps/website/src/components/common/FooterLinkColumn.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+export interface FooterLink {
+  label: string
+  href: string
+  external?: boolean
+}
+
+const { title, links } = defineProps<{
+  title: string
+  links: FooterLink[]
+}>()
+</script>
+
+<template>
+  <nav :aria-label="title" class="flex flex-col gap-4">
+    <h3 class="text-sm font-bold">{{ title }}</h3>
+    <div class="flex flex-col">
+      <a
+        v-for="link in links"
+        :key="link.href"
+        :href="link.href"
+        class="hover:text-primary-warm-white block py-1.5 text-sm transition-colors"
+      >
+        {{ link.label }}
+        <img
+          v-if="link.external"
+          src="/icons/arrow-up-right.svg"
+          alt=""
+          class="inline-block size-3"
+          aria-hidden="true"
+        />
+      </a>
+    </div>
+  </nav>
+</template>
diff --git a/apps/website/src/components/common/MobileMenu.vue b/apps/website/src/components/common/MobileMenu.vue
new file mode 100644
index 0000000000..c66e46b88f
--- /dev/null
+++ b/apps/website/src/components/common/MobileMenu.vue
@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import { computed, nextTick, onUnmounted, ref, watch } from 'vue'
+
+import type { Locale } from '../../i18n/translations'
+import { t } from '../../i18n/translations'
+import BrandButton from './BrandButton.vue'
+import type { NavLink } from './NavDesktopLink.vue'
+
+interface CtaLink {
+  label: string
+  href: string
+  primary: boolean
+}
+
+const {
+  open = false,
+  links = [],
+  ctaLinks = [],
+  locale = 'en'
+} = defineProps<{
+  open?: boolean
+  links?: NavLink[]
+  ctaLinks?: CtaLink[]
+  locale?: Locale
+}>()
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const menuRef = ref<HTMLElement | undefined>()
+const activeSection = ref<string | null>(null)
+
+const activeSectionItems = computed(
+  () => links.find((l) => l.label === activeSection.value)?.items
+)
+
+function onNavigate() {
+  activeSection.value = null
+  emit('close')
+}
+
+const FOCUSABLE =
+  'a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])'
+
+function trapFocus(e: KeyboardEvent) {
+  if (e.key !== 'Tab') return
+  const menu = menuRef.value
+  if (!menu) return
+  const focusable = [...menu.querySelectorAll<HTMLElement>(FOCUSABLE)]
+  if (!focusable.length) return
+  const first = focusable[0]
+  const last = focusable[focusable.length - 1]
+  if (e.shiftKey && document.activeElement === first) {
+    e.preventDefault()
+    last.focus()
+  } else if (!e.shiftKey && document.activeElement === last) {
+    e.preventDefault()
+    first.focus()
+  }
+}
+
+let savedScrollY = 0
+
+function lockScroll() {
+  savedScrollY = window.scrollY
+  document.body.style.position = 'fixed'
+  document.body.style.top = `-${savedScrollY}px`
+  document.body.style.left = '0'
+  document.body.style.right = '0'
+}
+
+function unlockScroll() {
+  document.body.style.position = ''
+  document.body.style.top = ''
+  document.body.style.left = ''
+  document.body.style.right = ''
+  window.scrollTo(0, savedScrollY)
+}
+
+watch(
+  () => open,
+  async (isOpen) => {
+    if (isOpen) {
+      lockScroll()
+      await nextTick()
+      const menu = menuRef.value
+      const firstFocusable = menu?.querySelector<HTMLElement>(FOCUSABLE)
+      firstFocusable?.focus()
+      menu?.addEventListener('keydown', trapFocus)
+    } else {
+      menuRef.value?.removeEventListener('keydown', trapFocus)
+      unlockScroll()
+    }
+  }
+)
+
+onUnmounted(() => {
+  menuRef.value?.removeEventListener('keydown', trapFocus)
+  unlockScroll()
+})
+</script>
+
+<template>
+  <div
+    v-show="open"
+    id="site-mobile-menu"
+    ref="menuRef"
+    role="dialog"
+    aria-modal="true"
+    :aria-label="t('nav.menu', locale)"
+    class="bg-primary-comfy-ink fixed inset-0 z-40 flex flex-col px-6 pt-24 pb-8 md:hidden"
+  >
+    <!-- Main list -->
+    <template v-if="!activeSection">
+      <div class="flex flex-1 flex-col gap-2">
+        <template v-for="link in links" :key="link.label">
+          <button
+            v-if="link.items"
+            class="text-primary-warm-gray text-left text-3xl font-medium"
+            @click="activeSection = link.label"
+          >
+            {{ link.label }}
+          </button>
+          <a
+            v-else
+            :href="link.href"
+            class="text-primary-warm-gray text-3xl font-medium"
+            @click="onNavigate"
+          >
+            {{ link.label }}
+          </a>
+        </template>
+      </div>
+
+      <div class="flex flex-col gap-3">
+        <BrandButton
+          v-for="cta in ctaLinks"
+          :key="cta.href"
+          :href="cta.href"
+          :label="cta.label"
+          :variant="cta.primary ? 'solid' : 'outline'"
+          class-name="w-full py-4 text-center"
+        />
+      </div>
+    </template>
+
+    <!-- Drill-down sub-menu -->
+    <template v-else>
+      <div class="flex flex-1 flex-col">
+        <button
+          class="text-primary-comfy-yellow mb-6 flex items-center gap-2 text-sm font-bold tracking-wide uppercase"
+          @click="activeSection = null"
+        >
+          <span aria-hidden="true">&lsaquo;</span>
+          {{ t('nav.back', locale) }}
+        </button>
+
+        <p class="text-primary-warm-gray mb-4 text-sm">
+          {{ activeSection }}
+        </p>
+
+        <div class="flex flex-col gap-2">
+          <a
+            v-for="item in activeSectionItems"
+            :key="item.href"
+            :href="item.href"
+            class="text-primary-warm-gray flex items-center gap-3 text-3xl font-medium"
+            @click="onNavigate"
+          >
+            {{ item.label }}
+            <span
+              v-if="item.badge"
+              class="bg-primary-comfy-yellow text-primary-comfy-ink -skew-x-12 rounded-sm px-1 py-0.5 text-xs font-bold"
+            >
+              <span class="inline-block skew-x-12">{{ item.badge }}</span>
+            </span>
+            <img
+              v-if="item.external"
+              src="/icons/arrow-up-right.svg"
+              alt=""
+              class="size-5"
+              aria-hidden="true"
+            />
+          </a>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/apps/website/src/components/common/NavDesktopLink.vue b/apps/website/src/components/common/NavDesktopLink.vue
new file mode 100644
index 0000000000..e14bc15311
--- /dev/null
+++ b/apps/website/src/components/common/NavDesktopLink.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+export type NavDropdownItem = {
+  label: string
+  href: string
+  badge?: string
+  external?: boolean
+}
+
+export type NavLink = {
+  label: string
+  href?: string
+  items?: NavDropdownItem[]
+}
+
+const {
+  link,
+  currentPath,
+  isOpen = false
+} = defineProps<{
+  link: NavLink
+  currentPath: string
+  isOpen?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'open', label: string): void
+  (e: 'close'): void
+  (e: 'toggle', label: string): void
+}>()
+</script>
+
+<template>
+  <div
+    class="relative"
+    @mouseenter="link.items?.length && emit('open', link.label)"
+    @mouseleave="emit('close')"
+    @focusin="link.items?.length && emit('open', link.label)"
+    @focusout="emit('close')"
+  >
+    <button
+      v-if="link.items?.length"
+      type="button"
+      class="group text-primary-comfy-canvas hover:text-primary-warm-gray flex cursor-pointer items-center gap-1.5 py-3 text-sm font-bold tracking-wide uppercase transition-colors"
+      aria-haspopup="true"
+      :aria-expanded="isOpen"
+      @click="emit('toggle', link.label)"
+    >
+      {{ link.label }}
+      <span
+        aria-hidden="true"
+        class="text-primary-comfy-canvas group-hover:text-primary-warm-gray text-base leading-none transition-colors"
+      >
+        ▾
+      </span>
+    </button>
+
+    <a
+      v-else
+      :href="link.href"
+      :aria-current="currentPath === link.href ? 'page' : undefined"
+      class="text-primary-comfy-canvas hover:text-primary-warm-gray flex items-center gap-1.5 py-3 text-sm font-bold tracking-wide uppercase transition-colors"
+    >
+      {{ link.label }}
+    </a>
+
+    <div
+      v-if="link.items?.length"
+      v-show="isOpen"
+      data-testid="nav-dropdown"
+      class="bg-transparency-white-t4 absolute top-full left-0 w-max rounded-xl p-2 shadow-lg backdrop-blur-md"
+    >
+      <a
+        v-for="item in link.items"
+        :key="item.href"
+        :href="item.href"
+        class="text-primary-comfy-canvas hover:bg-transparency-white-t4 flex items-center gap-2 rounded-sm p-2 text-xs font-medium tracking-wide transition-colors hover:text-white"
+        @click="emit('close')"
+      >
+        {{ item.label }}
+        <span
+          v-if="item.badge"
+          class="bg-primary-comfy-yellow text-primary-comfy-ink -skew-x-12 rounded-sm px-1 py-0.5 text-[9px]/3 leading-none font-bold"
+        >
+          <span class="inline-block skew-x-12">{{ item.badge }}</span>
+        </span>
+        <img
+          v-if="item.external"
+          src="/icons/arrow-up-right.svg"
+          alt=""
+          class="ml-auto size-4"
+          aria-hidden="true"
+        />
+      </a>
+    </div>
+  </div>
+</template>
diff --git a/apps/website/src/components/common/NodeBadge.stories.ts b/apps/website/src/components/common/NodeBadge.stories.ts
new file mode 100644
index 0000000000..1eff049c87
--- /dev/null
+++ b/apps/website/src/components/common/NodeBadge.stories.ts
@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import NodeBadge from './NodeBadge.vue'
+
+const meta: Meta<typeof NodeBadge> = {
+  title: 'Website/Common/NodeBadge',
+  component: NodeBadge,
+  tags: ['autodocs'],
+  decorators: [
+    () => ({
+      template: '<div class="bg-primary-comfy-ink p-8"><story /></div>'
+    })
+  ]
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const TextOnly: Story = {
+  args: {
+    segments: [{ text: 'COMFY' }]
+  }
+}
+
+export const MultipleSegments: Story = {
+  args: {
+    segments: [{ text: 'HOW' }, { text: 'IT' }, { text: 'WORKS' }]
+  }
+}
+
+export const WithLogo: Story = {
+  args: {
+    segments: [
+      { logoSrc: '/logos/comfy-logo.svg', logoAlt: 'Comfy Logo' },
+      { text: 'NODES' }
+    ]
+  }
+}
diff --git a/apps/website/src/components/common/NodeBadge.vue b/apps/website/src/components/common/NodeBadge.vue
new file mode 100644
index 0000000000..6c5a40124c
--- /dev/null
+++ b/apps/website/src/components/common/NodeBadge.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+const { segments, segmentClass = 'px-6' } = defineProps<{
+  segments: Array<{ text?: string; logoSrc?: string; logoAlt?: string }>
+  segmentClass?: string
+}>()
+</script>
+
+<template>
+  <div
+    class="font-formula-condensed flex h-9 items-stretch font-semibold lg:h-auto"
+  >
+    <img
+      src="/icons/node-left.svg"
+      alt=""
+      class="-mx-px self-stretch"
+      aria-hidden="true"
+    />
+
+    <template
+      v-for="(segment, i) in segments"
+      :key="segment.text || segment.logoSrc || i"
+    >
+      <img
+        v-if="i > 0"
+        src="/icons/node-union.svg"
+        alt=""
+        class="-mx-px self-stretch"
+        aria-hidden="true"
+      />
+      <span
+        class="bg-primary-comfy-yellow text-primary-comfy-ink flex items-center justify-center py-1 lg:py-5"
+        :class="segmentClass"
+      >
+        <img
+          v-if="segment.logoSrc"
+          :src="segment.logoSrc"
+          :alt="segment.logoAlt ?? ''"
+          class="inline-block h-4 brightness-0 lg:h-10"
+        />
+        <span
+          v-else
+          class="inline-block translate-y-0.5 text-xl font-bold whitespace-nowrap lg:translate-y-1 lg:text-5xl"
+        >
+          {{ segment.text }}
+        </span>
+      </span>
+    </template>
+
+    <img
+      src="/icons/node-right.svg"
+      alt=""
+      class="-mx-px self-stretch"
+      aria-hidden="true"
+    />
+  </div>
+</template>
diff --git a/apps/website/src/components/common/ProductCard.stories.ts b/apps/website/src/components/common/ProductCard.stories.ts
new file mode 100644
index 0000000000..da2d0ee322
--- /dev/null
+++ b/apps/website/src/components/common/ProductCard.stories.ts
@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import ProductCard from './ProductCard.vue'
+
+const meta: Meta<typeof ProductCard> = {
+  title: 'Website/Common/ProductCard',
+  component: ProductCard,
+  tags: ['autodocs'],
+  decorators: [
+    () => ({
+      template: '<div class="bg-primary-comfy-ink p-8"><story /></div>'
+    })
+  ],
+  args: {
+    title: 'Comfy\nLocal',
+    description: 'Run ComfyUI on your own hardware.',
+    cta: 'SEE LOCAL FEATURES',
+    href: '#',
+    bg: 'bg-primary-warm-gray'
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const AllCards: Story = {
+  render: () => ({
+    components: { ProductCard },
+    template: `
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <ProductCard
+          title="Comfy\nLocal"
+          description="Run ComfyUI on your own hardware."
+          cta="SEE LOCAL FEATURES"
+          href="#"
+          bg="bg-primary-warm-gray"
+        />
+        <ProductCard
+          title="Comfy\nCloud"
+          description="The full power of ComfyUI from anywhere."
+          cta="SEE CLOUD FEATURES"
+          href="#"
+          bg="bg-secondary-mauve"
+        />
+        <ProductCard
+          title="Comfy\nAPI"
+          description="Turn workflows into production endpoints."
+          cta="SEE API FEATURES"
+          href="#"
+          bg="bg-primary-comfy-plum"
+        />
+        <ProductCard
+          title="Comfy\nEnterprise"
+          description="Enterprise-grade infrastructure for the creative engine inside your organization."
+          cta="SEE ENTERPRISE FEATURES"
+          href="#"
+          bg="bg-illustration-forest"
+        />
+      </div>
+    `
+  })
+}
diff --git a/apps/website/src/components/common/ProductCard.vue b/apps/website/src/components/common/ProductCard.vue
new file mode 100644
index 0000000000..4e20b1a1f6
--- /dev/null
+++ b/apps/website/src/components/common/ProductCard.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const { title, description, cta, href, bg } = defineProps<{
+  title: string
+  description: string
+  cta: string
+  href: string
+  bg: string
+}>()
+</script>
+
+<template>
+  <a
+    :href="href"
+    class="flex flex-col justify-between rounded-2xl p-8 transition-opacity hover:opacity-90"
+    :class="bg"
+  >
+    <h3 class="text-3xl font-light whitespace-pre-line text-white lg:text-4xl">
+      {{ title }}
+    </h3>
+
+    <div class="mt-auto pt-16">
+      <p class="text-sm text-white/70">
+        {{ description }}
+      </p>
+      <span
+        class="bg-primary-comfy-yellow text-primary-comfy-ink mt-4 inline-block rounded-xl px-4 py-2 text-xs font-bold tracking-wide"
+      >
+        {{ cta }}
+      </span>
+    </div>
+  </a>
+</template>
diff --git a/apps/website/src/components/common/SiteFooter.vue b/apps/website/src/components/common/SiteFooter.vue
new file mode 100644
index 0000000000..a674e08182
--- /dev/null
+++ b/apps/website/src/components/common/SiteFooter.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { useFrameScrub } from '../../composables/useFrameScrub'
+import { externalLinks, getRoutes } from '../../config/routes'
+import type { Locale } from '../../i18n/translations'
+import { t } from '../../i18n/translations'
+import FooterLinkColumn from './FooterLinkColumn.vue'
+import type { FooterLink } from './FooterLinkColumn.vue'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+const routes = getRoutes(locale)
+
+const footerRef = ref<HTMLElement>()
+const canvasRef = ref<HTMLCanvasElement>()
+
+useFrameScrub(canvasRef, {
+  frameCount: 73,
+  frameSrc: (i) =>
+    `/videos/footer-logo-seq/Logo${String(i).padStart(2, '0')}.webp`,
+  scrollTrigger: (canvas) => ({
+    trigger: canvas,
+    start: 'top bottom',
+    endTrigger: footerRef.value,
+    end: 'bottom bottom',
+    scrub: true
+  })
+})
+
+const topColumns: { title: string; links: FooterLink[] }[] = [
+  {
+    title: t('footer.products', locale),
+    links: [
+      { label: t('nav.comfyLocal', locale), href: routes.download },
+      { label: t('nav.comfyCloud', locale), href: routes.cloud },
+      { label: t('nav.comfyApi', locale), href: routes.api },
+      { label: t('nav.comfyEnterprise', locale), href: routes.cloudEnterprise }
+    ]
+  },
+  {
+    title: t('footer.resources', locale),
+    links: [
+      {
+        label: t('footer.blog', locale),
+        href: externalLinks.blog,
+        external: true
+      },
+      {
+        label: t('nav.discord', locale),
+        href: externalLinks.discord,
+        external: true
+      },
+      {
+        label: t('nav.github', locale),
+        href: externalLinks.github,
+        external: true
+      },
+      {
+        label: t('nav.docs', locale),
+        href: externalLinks.docs,
+        external: true
+      },
+      {
+        label: t('nav.youtube', locale),
+        href: externalLinks.youtube,
+        external: true
+      }
+    ]
+  }
+]
+
+const companyColumn: { title: string; links: FooterLink[] } = {
+  title: t('footer.company', locale),
+  links: [
+    { label: t('footer.about', locale), href: routes.about },
+    { label: t('nav.careers', locale), href: routes.careers },
+    { label: t('footer.termsOfService', locale), href: routes.termsOfService },
+    { label: t('footer.privacyPolicy', locale), href: routes.privacyPolicy },
+    { label: t('footer.support', locale), href: externalLinks.discord }
+  ]
+}
+
+const contactColumn = {
+  title: t('footer.contact', locale),
+  links: ['hello@comfy.org', 'press@comfy.org'].map((email) => ({
+    label: email,
+    href: `mailto:${email}`
+  }))
+}
+</script>
+
+<template>
+  <footer
+    ref="footerRef"
+    class="bg-primary-comfy-ink text-primary-comfy-canvas px-6 py-8 lg:px-20"
+  >
+    <div
+      class="border-primary-warm-gray flex flex-col gap-12 border-t pt-16 lg:gap-0"
+    >
+      <!-- Desktop: row layout / Mobile: column layout -->
+      <div class="flex flex-col gap-12 lg:flex-row lg:gap-0">
+        <!-- Left: tagline -->
+        <div class="flex-1">
+          <p class="text-2xl font-medium tracking-wide uppercase lg:text-3xl">
+            {{ t('footer.tagline', locale) }}
+          </p>
+        </div>
+
+        <!-- Right: link columns (desktop: 3-col, mobile: 2-col + company below) -->
+        <div class="flex flex-1 flex-col gap-12">
+          <!-- Mobile: 2-col grids -->
+          <div class="grid grid-cols-2 gap-12 lg:hidden">
+            <FooterLinkColumn
+              v-for="column in topColumns"
+              :key="column.title"
+              :title="column.title"
+              :links="column.links"
+            />
+          </div>
+          <div class="grid grid-cols-2 gap-12 lg:hidden">
+            <FooterLinkColumn
+              :title="companyColumn.title"
+              :links="companyColumn.links"
+            />
+            <FooterLinkColumn
+              :title="contactColumn.title"
+              :links="contactColumn.links"
+            />
+          </div>
+
+          <!-- Desktop: all columns in a row -->
+          <div class="hidden grid-cols-4 gap-12 lg:grid">
+            <FooterLinkColumn
+              v-for="column in [...topColumns, companyColumn, contactColumn]"
+              :key="column.title"
+              :title="column.title"
+              :links="column.links"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- Logo + bottom bar -->
+      <div
+        class="flex flex-col gap-8 lg:flex-row lg:items-end lg:justify-between"
+      >
+        <canvas ref="canvasRef" class="mt-12 size-52 opacity-80 lg:mt-24" />
+        <div class="flex justify-center gap-6 lg:justify-end">
+          <p class="text-sm">{{ t('footer.location', locale) }}</p>
+          <p class="text-sm">&copy; {{ new Date().getFullYear() }} Comfy Org</p>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
diff --git a/apps/website/src/components/common/SiteNav.vue b/apps/website/src/components/common/SiteNav.vue
new file mode 100644
index 0000000000..fe4cf2e466
--- /dev/null
+++ b/apps/website/src/components/common/SiteNav.vue
@@ -0,0 +1,225 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+
+import type { Locale } from '../../i18n/translations'
+import { t } from '../../i18n/translations'
+import { externalLinks, getRoutes } from '../../config/routes'
+import BrandButton from './BrandButton.vue'
+import MobileMenu from './MobileMenu.vue'
+import NavDesktopLink from './NavDesktopLink.vue'
+import type { NavLink } from './NavDesktopLink.vue'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+const routes = getRoutes(locale)
+
+const navLinks: NavLink[] = [
+  {
+    label: t('nav.products', locale),
+    items: [
+      { label: t('nav.comfyLocal', locale), href: routes.download },
+      { label: t('nav.comfyCloud', locale), href: routes.cloud },
+      {
+        label: t('nav.comfyApi', locale),
+        href: routes.api,
+        badge: t('nav.badgeNew', locale)
+      },
+      { label: t('nav.comfyEnterprise', locale), href: routes.cloudEnterprise }
+    ]
+  },
+  { label: t('nav.pricing', locale), href: routes.cloudPricing },
+  {
+    label: t('nav.community', locale),
+    items: [
+      {
+        label: t('nav.comfyHub', locale),
+        href: externalLinks.workflows,
+        badge: t('nav.badgeNew', locale)
+      },
+      { label: t('nav.gallery', locale), href: routes.gallery }
+    ]
+  },
+  {
+    label: t('nav.resources', locale),
+    items: [
+      {
+        label: t('nav.blogs', locale),
+        href: externalLinks.blog,
+        external: true
+      },
+      {
+        label: t('nav.github', locale),
+        href: externalLinks.github,
+        external: true
+      },
+      {
+        label: t('nav.discord', locale),
+        href: externalLinks.discord,
+        external: true
+      },
+      {
+        label: t('nav.docs', locale),
+        href: externalLinks.docs,
+        external: true
+      },
+      {
+        label: t('nav.youtube', locale),
+        href: externalLinks.youtube,
+        external: true
+      }
+    ]
+  },
+  {
+    label: t('nav.company', locale),
+    items: [
+      { label: t('nav.aboutUs', locale), href: routes.about },
+      { label: t('nav.careers', locale), href: routes.careers },
+      { label: t('nav.customerStories', locale), href: routes.customers }
+    ]
+  }
+]
+
+const ctaButtons = [
+  {
+    label: t('nav.downloadLocal', locale),
+    href: routes.download,
+    primary: false
+  },
+  {
+    label: t('nav.launchCloud', locale),
+    href: externalLinks.app,
+    primary: true
+  }
+]
+
+const currentPath = ref('')
+const openDesktopDropdown = ref<string | null>(null)
+const mobileMenuOpen = ref(false)
+const hamburgerRef = ref<HTMLButtonElement | undefined>()
+
+function closeMobileMenu() {
+  mobileMenuOpen.value = false
+  hamburgerRef.value?.focus()
+}
+
+function toggleDesktopDropdown(label: string) {
+  openDesktopDropdown.value = openDesktopDropdown.value === label ? null : label
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') {
+    closeMobileMenu()
+    openDesktopDropdown.value = null
+  }
+}
+
+function onNavigate() {
+  closeMobileMenu()
+  openDesktopDropdown.value = null
+  currentPath.value = window.location.pathname
+}
+
+function onMediaChange(e: MediaQueryListEvent) {
+  if (e.matches) closeMobileMenu()
+}
+
+let mq: MediaQueryList
+
+onMounted(() => {
+  currentPath.value = window.location.pathname
+  mq = window.matchMedia('(min-width: 768px)')
+  mq.addEventListener('change', onMediaChange)
+  document.addEventListener('keydown', onKeydown)
+  document.addEventListener('astro:after-swap', onNavigate)
+})
+
+onUnmounted(() => {
+  mq?.removeEventListener('change', onMediaChange)
+  document.removeEventListener('keydown', onKeydown)
+  document.removeEventListener('astro:after-swap', onNavigate)
+})
+</script>
+
+<template>
+  <MobileMenu
+    :open="mobileMenuOpen"
+    :links="navLinks"
+    :cta-links="ctaButtons"
+    :locale="locale"
+    @close="closeMobileMenu"
+  />
+
+  <nav
+    class="bg-primary-comfy-ink fixed inset-x-0 top-0 z-50 flex items-center justify-between px-6 py-5 md:px-20 md:py-8"
+    aria-label="Main navigation"
+  >
+    <a :href="routes.home" aria-label="Comfy home">
+      <img src="/icons/logomark.svg" alt="Comfy" class="h-8 md:hidden" />
+      <img
+        src="/icons/logo.svg"
+        alt="Comfy"
+        class="hidden h-10 w-36 object-contain object-left md:block"
+      />
+    </a>
+
+    <!-- Desktop nav links -->
+    <div
+      data-testid="desktop-nav-links"
+      class="hidden items-center gap-10 md:flex"
+    >
+      <NavDesktopLink
+        v-for="link in navLinks"
+        :key="link.label"
+        :link="link"
+        :current-path="currentPath"
+        :is-open="openDesktopDropdown === link.label"
+        @open="openDesktopDropdown = $event"
+        @close="openDesktopDropdown = null"
+        @toggle="toggleDesktopDropdown"
+      />
+    </div>
+
+    <!-- Desktop CTA buttons -->
+    <div
+      data-testid="desktop-nav-cta"
+      class="hidden items-center gap-2 md:flex"
+    >
+      <BrandButton
+        v-for="cta in ctaButtons"
+        :key="cta.href"
+        :href="cta.href"
+        :label="cta.label"
+        :variant="cta.primary ? 'solid' : 'outline'"
+        class-name="px-6 py-2.5"
+      />
+    </div>
+
+    <!-- Mobile hamburger -->
+    <button
+      ref="hamburgerRef"
+      class="flex size-10 items-center justify-center rounded-xl md:hidden"
+      :class="
+        mobileMenuOpen
+          ? 'border-primary-comfy-yellow border-2 bg-transparent'
+          : 'bg-primary-comfy-yellow'
+      "
+      :aria-label="t('nav.toggleMenu', locale)"
+      aria-controls="site-mobile-menu"
+      :aria-expanded="mobileMenuOpen"
+      @click="mobileMenuOpen = !mobileMenuOpen"
+    >
+      <img
+        v-if="!mobileMenuOpen"
+        src="/icons/breadthumb.svg"
+        alt="Menu"
+        class="h-3"
+      />
+      <img
+        v-else
+        src="/icons/close.svg"
+        alt=""
+        class="size-5"
+        aria-hidden="true"
+      />
+    </button>
+  </nav>
+</template>
diff --git a/apps/website/src/components/home/BorderedPlaceholder.vue b/apps/website/src/components/home/BorderedPlaceholder.vue
new file mode 100644
index 0000000000..81162b02c6
--- /dev/null
+++ b/apps/website/src/components/home/BorderedPlaceholder.vue
@@ -0,0 +1,26 @@
+<template>
+  <div
+    class="rounded-5xl relative flex items-center justify-center overflow-hidden p-0.5 [clip-path:inset(0_round_var(--radius-5xl))]"
+  >
+    <div
+      class="animate-border-spin absolute top-1/2 left-1/2 size-2/1 -translate-1/2"
+      style="
+        background: conic-gradient(
+          from 0deg,
+          color-mix(in srgb, var(--color-primary-comfy-yellow) 4%, transparent)
+            0%,
+          var(--color-primary-comfy-yellow) 100%
+        );
+      "
+    />
+    <div
+      class="bg-primary-comfy-ink relative size-full rounded-[calc(2.5rem-2px)] px-16 py-26"
+    >
+      <div
+        class="bg-transparency-white-t4 absolute inset-0 m-2 flex items-center justify-center rounded-4xl"
+      >
+        <span class="text-primary-warm-gray text-sm">FPO</span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/website/src/components/home/BuildWhatSection.vue b/apps/website/src/components/home/BuildWhatSection.vue
new file mode 100644
index 0000000000..193296e618
--- /dev/null
+++ b/apps/website/src/components/home/BuildWhatSection.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import { t } from '../../i18n/translations'
+import NodeBadge from '../common/NodeBadge.vue'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const row1 = [{ text: t('buildWhat.row1', locale) }]
+const row2 = [
+  { text: t('buildWhat.row2a', locale) },
+  { text: t('buildWhat.row2b', locale) }
+]
+</script>
+
+<template>
+  <section
+    class="bg-primary-comfy-ink flex flex-col items-center px-4 py-24 lg:px-6 lg:py-32"
+  >
+    <!-- Node rows -->
+    <div
+      class="font-formula-condensed relative flex flex-col items-center font-semibold"
+    >
+      <NodeBadge :segments="row1" />
+
+      <!-- Vertical connector -->
+      <img
+        src="/icons/node-link.svg"
+        alt=""
+        class="-my-3.5 scale-25 rotate-90 lg:-my-1.75 lg:scale-100"
+        aria-hidden="true"
+      />
+
+      <NodeBadge :segments="row2" />
+    </div>
+
+    <!-- Subtitle -->
+    <p
+      class="text-primary-comfy-canvas mt-24 max-w-2xl text-center text-xl lg:text-sm"
+    >
+      {{ t('buildWhat.subtitle', locale) }}
+    </p>
+  </section>
+</template>
diff --git a/apps/website/src/components/home/CaseStudySpotlightSection.vue b/apps/website/src/components/home/CaseStudySpotlightSection.vue
new file mode 100644
index 0000000000..e1a5a6486c
--- /dev/null
+++ b/apps/website/src/components/home/CaseStudySpotlightSection.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import { getRoutes } from '../../config/routes'
+import { t } from '../../i18n/translations'
+import BrandButton from '../common/BrandButton.vue'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+const routes = getRoutes(locale)
+</script>
+
+<template>
+  <section class="bg-primary-comfy-ink px-4 py-20 lg:px-20 lg:py-24">
+    <div
+      class="bg-transparency-white-t4 rounded-5xl flex flex-col gap-12 p-2 lg:flex-row lg:items-stretch lg:gap-8"
+    >
+      <!-- Left: video / image placeholder -->
+      <div class="bg-primary-comfy-canvas/20 aspect-4/3 flex-1 rounded-4xl" />
+
+      <!-- Right: content -->
+      <div class="flex flex-col justify-between p-6 lg:flex-1">
+        <div class="flex flex-col gap-8">
+          <p
+            class="text-primary-comfy-yellow text-sm font-bold tracking-widest uppercase"
+          >
+            {{ t('caseStudy.label', locale) }}
+          </p>
+          <h2
+            class="text-primary-comfy-canvas text-5xl font-light whitespace-pre-line"
+          >
+            {{ t('caseStudy.heading', locale) }}
+          </h2>
+          <p class="text-primary-warm-gray text-base">
+            {{ t('caseStudy.subheading', locale) }}
+          </p>
+        </div>
+
+        <div class="flex flex-col gap-3 sm:flex-row">
+          <BrandButton
+            :href="routes.videos"
+            :label="t('caseStudy.watchVideos', locale)"
+            variant="solid"
+            class-name="flex-1 text-center"
+          />
+          <BrandButton
+            :href="routes.caseStudies"
+            :label="t('caseStudy.seeAll', locale)"
+            variant="outline"
+            class-name="flex-1 text-center"
+          />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/apps/website/src/components/home/FeatureCard.vue b/apps/website/src/components/home/FeatureCard.vue
new file mode 100644
index 0000000000..624d7d5069
--- /dev/null
+++ b/apps/website/src/components/home/FeatureCard.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const { title, description } = defineProps<{
+  title: string
+  description: string
+}>()
+
+const emit = defineEmits<{
+  click: []
+}>()
+</script>
+
+<template>
+  <button
+    type="button"
+    class="rounded-5xl bg-primary-comfy-yellow text-primary-comfy-ink w-full cursor-pointer p-8 text-left transition-all"
+    @click="emit('click')"
+  >
+    <h3 class="text-2xl/tight font-medium">
+      {{ title }}
+    </h3>
+    <p class="mt-4 text-sm/relaxed font-normal opacity-80">
+      {{ description }}
+    </p>
+  </button>
+</template>
diff --git a/apps/website/src/components/home/GetStartedSection.vue b/apps/website/src/components/home/GetStartedSection.vue
new file mode 100644
index 0000000000..d88585ab5b
--- /dev/null
+++ b/apps/website/src/components/home/GetStartedSection.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import { externalLinks, getRoutes } from '../../config/routes'
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+const routes = getRoutes(locale)
+
+const steps = [
+  {
+    number: '1',
+    title: t('getStarted.step1.title', locale),
+    description: '',
+    links: [
+      {
+        label: t('getStarted.step1.downloadLocal', locale),
+        href: routes.download
+      },
+      {
+        label: t('getStarted.step1.launchCloud', locale),
+        href: externalLinks.app
+      }
+    ]
+  },
+  {
+    number: '2',
+    title: t('getStarted.step2.title', locale),
+    description: t('getStarted.step2.description', locale)
+  },
+  {
+    number: '3',
+    title: t('getStarted.step3.title', locale),
+    description: t('getStarted.step3.description', locale)
+  }
+]
+</script>
+
+<template>
+  <section class="bg-primary-comfy-ink px-4 py-20 lg:px-20 lg:py-24">
+    <div class="flex flex-col gap-12 lg:flex-row lg:gap-8">
+      <!-- Left heading -->
+      <div
+        class="bg-primary-comfy-ink sticky top-20 shrink-0 py-2 lg:top-28 lg:w-115 lg:self-start"
+      >
+        <h2 class="text-primary-comfy-canvas text-5xl font-light">
+          {{ t('getStarted.heading', locale) }}
+        </h2>
+        <p class="text-primary-comfy-canvas mt-8 text-base">
+          {{ t('getStarted.subheading', locale) }}
+        </p>
+      </div>
+
+      <!-- Right steps -->
+      <div class="flex-1">
+        <div
+          v-for="step in steps"
+          :key="step.number"
+          class="border-primary-comfy-canvas flex flex-col gap-4 border-b py-12 first:pt-0 last:border-b lg:flex-row lg:items-start lg:gap-8"
+        >
+          <span
+            class="text-primary-comfy-canvas w-16 shrink-0 text-6xl font-light lg:text-7xl"
+          >
+            {{ step.number }}
+          </span>
+          <h3
+            class="text-primary-comfy-canvas shrink-0 text-2xl font-light lg:w-84"
+          >
+            {{ step.title }}
+          </h3>
+          <p
+            v-if="step.description"
+            class="text-primary-comfy-canvas flex-1 text-sm"
+          >
+            {{ step.description }}
+          </p>
+          <p v-if="step.links" class="flex-1 text-sm">
+            <template v-for="(link, i) in step.links" :key="link.href">
+              <a
+                :href="link.href"
+                class="text-primary-comfy-yellow hover:underline"
+              >
+                {{ link.label }}
+              </a>
+              <span
+                v-if="i < step.links.length - 1"
+                class="text-primary-comfy-canvas"
+              >
+                {{ t('getStarted.step1.or', locale) }}
+              </span>
+            </template>
+            <span class="text-primary-comfy-canvas">.</span>
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/apps/website/src/components/home/HeroSection.vue b/apps/website/src/components/home/HeroSection.vue
new file mode 100644
index 0000000000..d01ff9ad82
--- /dev/null
+++ b/apps/website/src/components/home/HeroSection.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { useFrameScrub } from '../../composables/useFrameScrub'
+import type { Locale } from '../../i18n/translations'
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const canvasRef = ref<HTMLCanvasElement>()
+
+useFrameScrub(canvasRef, {
+  frameCount: 75,
+  frameSrc: (i) =>
+    `/videos/hero-logo-seq/Logo${String(i).padStart(2, '0')}.webp`,
+  scrollTrigger: (canvas) => ({
+    trigger: canvas,
+    start: 'top 80%',
+    end: 'bottom 20%',
+    scrub: 0.3
+  })
+})
+</script>
+
+<template>
+  <section
+    class="flex flex-col items-center px-4 pt-36 pb-16 lg:px-20 lg:pt-50 lg:pb-8"
+  >
+    <h1
+      class="text-primary-comfy-canvas text-center text-5xl font-light whitespace-pre-line lg:text-8xl"
+    >
+      {{ t('hero.title', locale) }}
+    </h1>
+
+    <div class="mt-12 w-full max-w-3xl overflow-hidden rounded-2xl">
+      <canvas ref="canvasRef" class="w-full" />
+    </div>
+
+    <p
+      class="text-primary-comfy-canvas mt-10 max-w-2xl text-center text-sm/relaxed lg:text-base"
+    >
+      {{ t('hero.subtitle', locale) }}
+    </p>
+  </section>
+</template>
diff --git a/apps/website/src/components/home/ProductCardsSection.vue b/apps/website/src/components/home/ProductCardsSection.vue
new file mode 100644
index 0000000000..b12a876a81
--- /dev/null
+++ b/apps/website/src/components/home/ProductCardsSection.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import { getRoutes } from '../../config/routes'
+import { t } from '../../i18n/translations'
+import ProductCard from '../common/ProductCard.vue'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+const routes = getRoutes(locale)
+
+const cards = [
+  {
+    title: t('products.local.title', locale),
+    description: t('products.local.description', locale),
+    cta: t('products.local.cta', locale),
+    href: routes.download,
+    bg: 'bg-primary-warm-gray'
+  },
+  {
+    title: t('products.cloud.title', locale),
+    description: t('products.cloud.description', locale),
+    cta: t('products.cloud.cta', locale),
+    href: routes.cloud,
+    bg: 'bg-secondary-mauve'
+  },
+  {
+    title: t('products.api.title', locale),
+    description: t('products.api.description', locale),
+    cta: t('products.api.cta', locale),
+    href: routes.api,
+    bg: 'bg-primary-comfy-plum'
+  },
+  {
+    title: t('products.enterprise.title', locale),
+    description: t('products.enterprise.description', locale),
+    cta: t('products.enterprise.cta', locale),
+    href: routes.cloudEnterprise,
+    bg: 'bg-illustration-forest'
+  }
+]
+</script>
+
+<template>
+  <section class="bg-primary-comfy-ink px-4 py-20 lg:px-20 lg:py-24">
+    <!-- Header -->
+    <div class="flex flex-col items-center text-center">
+      <p
+        class="text-primary-comfy-yellow text-xs font-bold tracking-widest uppercase"
+      >
+        {{ t('products.label', locale) }}
+      </p>
+      <h2
+        class="text-primary-comfy-canvas mt-4 text-4xl font-light whitespace-pre-line lg:text-5xl"
+      >
+        {{ t('products.heading', locale) }}
+      </h2>
+      <p class="text-primary-warm-gray mt-4 text-sm">
+        {{ t('products.subheading', locale) }}
+      </p>
+    </div>
+
+    <!-- Cards -->
+    <div class="mt-16 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      <ProductCard v-for="card in cards" :key="card.title" v-bind="card" />
+    </div>
+  </section>
+</template>
diff --git a/apps/website/src/components/home/ProductShowcaseSection.vue b/apps/website/src/components/home/ProductShowcaseSection.vue
new file mode 100644
index 0000000000..20271251fd
--- /dev/null
+++ b/apps/website/src/components/home/ProductShowcaseSection.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import type { Locale } from '../../i18n/translations'
+import { t } from '../../i18n/translations'
+import NodeBadge from '../common/NodeBadge.vue'
+import BorderedPlaceholder from './BorderedPlaceholder.vue'
+import FeatureCard from './FeatureCard.vue'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const features = [
+  {
+    title: t('showcase.feature1.title', locale),
+    description: t('showcase.feature1.description', locale),
+    image: ''
+  },
+  {
+    title: t('showcase.feature2.title', locale),
+    description: t('showcase.feature2.description', locale),
+    image: ''
+  },
+  {
+    title: t('showcase.feature3.title', locale),
+    description: t('showcase.feature3.description', locale),
+    image: ''
+  }
+]
+
+const badgeSegments = [
+  { text: t('showcase.badgeHow', locale) },
+  { logoSrc: '/icons/logo.svg', logoAlt: 'Comfy' },
+  { text: t('showcase.badgeWorks', locale) }
+]
+
+const activeIndex = ref(0)
+</script>
+
+<template>
+  <section class="px-4 py-20 lg:px-20 lg:py-24">
+    <!-- Section header -->
+    <div class="flex flex-col items-center text-center">
+      <NodeBadge :segments="badgeSegments" segment-class="" />
+      <p class="text-primary-comfy-canvas mt-12 max-w-xl text-sm/relaxed">
+        {{ t('showcase.subtitle1', locale) }}
+      </p>
+      <p class="text-primary-comfy-canvas mt-4 max-w-xl text-sm/relaxed">
+        {{ t('showcase.subtitle2', locale) }}
+      </p>
+    </div>
+
+    <!-- Content area -->
+    <div class="mt-12 flex flex-col lg:mt-24 lg:flex-row lg:items-stretch">
+      <!-- Image area (desktop only) -->
+      <BorderedPlaceholder class="hidden flex-1 lg:flex" />
+
+      <!-- Feature accordion -->
+      <div class="flex w-full flex-col lg:w-80 lg:gap-4 lg:pl-5">
+        <template v-for="(feature, i) in features" :key="feature.title">
+          <!-- Image area (mobile, rendered before active item) -->
+          <BorderedPlaceholder
+            v-if="activeIndex === i"
+            class="lg:hidden"
+            :class="activeIndex !== 0 ? 'mt-4 lg:mt-0' : 'mt-0'"
+          />
+
+          <!-- Active: connector + card -->
+          <div v-if="activeIndex === i" class="flex items-stretch lg:-ml-5">
+            <img
+              src="/icons/node-link.svg"
+              alt=""
+              class="-mx-px hidden self-center lg:block"
+              aria-hidden="true"
+            />
+            <img
+              src="/icons/node-link.svg"
+              alt=""
+              class="-my-2.25 ml-20 block scale-x-75 scale-y-50 rotate-90 lg:hidden"
+              aria-hidden="true"
+            />
+            <FeatureCard
+              :title="feature.title"
+              :description="feature.description"
+              class="hidden lg:block"
+              @click="activeIndex = i"
+            />
+          </div>
+
+          <!-- Active card (mobile only) -->
+          <FeatureCard
+            v-if="activeIndex === i"
+            :title="feature.title"
+            :description="feature.description"
+            class="lg:hidden"
+            @click="activeIndex = i"
+          />
+
+          <!-- Inactive card -->
+          <button
+            v-else
+            class="rounded-5xl bg-transparency-white-t4 text-primary-comfy-canvas mt-4 w-full cursor-pointer p-8 text-left transition-all lg:mt-0"
+            @click="activeIndex = i"
+          >
+            <div class="flex items-start justify-between gap-3">
+              <h3 class="text-2xl/tight font-medium">
+                {{ feature.title }}
+              </h3>
+              <img
+                src="/icons/plus.svg"
+                alt=""
+                class="size-5 shrink-0"
+                aria-hidden="true"
+              />
+            </div>
+          </button>
+        </template>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/apps/website/src/components/home/SocialProofBarSection.vue b/apps/website/src/components/home/SocialProofBarSection.vue
new file mode 100644
index 0000000000..bea400ea8c
--- /dev/null
+++ b/apps/website/src/components/home/SocialProofBarSection.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+const logos = [
+  'Amazon Studios',
+  'Apple',
+  'Autodesk',
+  'EA',
+  'Harman',
+  'Hp',
+  'Lucid',
+  'Netflix',
+  'Nike',
+  'Pixomondo',
+  'Tencent',
+  'Ubisoft'
+]
+
+const row1 = logos.slice(0, 6)
+const row2 = logos.slice(6)
+</script>
+
+<template>
+  <section class="overflow-hidden py-12">
+    <!-- Single row on desktop -->
+    <div class="animate-marquee hidden items-center gap-2 md:flex">
+      <div
+        v-for="(logo, i) in [...logos, ...logos]"
+        :key="`${logo}-${i}`"
+        class="flex h-20 w-50 shrink-0 items-center justify-center"
+      >
+        <img :src="`/icons/clients/${logo}.svg`" :alt="logo" />
+      </div>
+    </div>
+
+    <!-- Two rows on mobile -->
+    <div
+      data-testid="social-proof-mobile"
+      class="flex flex-col gap-8 md:hidden"
+    >
+      <div class="animate-marquee flex items-center gap-8">
+        <div
+          v-for="(logo, i) in [...row1, ...row1]"
+          :key="`${logo}-${i}`"
+          class="flex h-14 w-40 shrink-0 items-center justify-center"
+        >
+          <img :src="`/icons/clients/${logo}.svg`" :alt="logo" />
+        </div>
+      </div>
+      <div class="animate-marquee-reverse flex items-center gap-8">
+        <div
+          v-for="(logo, i) in [...row2, ...row2]"
+          :key="`${logo}-${i}`"
+          class="flex h-14 w-40 shrink-0 items-center justify-center"
+        >
+          <img :src="`/icons/clients/${logo}.svg`" :alt="logo" />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/apps/website/src/components/home/UseCaseSection.vue b/apps/website/src/components/home/UseCaseSection.vue
new file mode 100644
index 0000000000..6a634cf04e
--- /dev/null
+++ b/apps/website/src/components/home/UseCaseSection.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { Locale } from '../../i18n/translations'
+import { t } from '../../i18n/translations'
+
+import { externalLinks } from '../../config/routes'
+import { useParallax } from '../../composables/useParallax'
+import { usePinScrub } from '../../composables/usePinScrub'
+import BrandButton from '../common/BrandButton.vue'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const categories = [
+  t('useCase.vfx', locale),
+  t('useCase.advertising', locale),
+  t('useCase.gaming', locale),
+  t('useCase.ecommerce', locale),
+  t('useCase.more', locale)
+]
+
+const sectionRef = ref<HTMLElement>()
+const contentRef = ref<HTMLElement>()
+const navRef = ref<HTMLElement>()
+const leftImgRef = ref<HTMLElement>()
+const rightImgRef = ref<HTMLElement>()
+
+const { activeIndex: activeCategory } = usePinScrub(
+  { section: sectionRef, content: contentRef, nav: navRef },
+  { itemCount: categories.length }
+)
+
+useParallax([leftImgRef, rightImgRef], { trigger: sectionRef })
+</script>
+
+<template>
+  <section
+    ref="sectionRef"
+    class="bg-primary-comfy-ink relative flex flex-col items-center overflow-hidden px-8 py-20 lg:h-screen lg:px-0 lg:py-24"
+  >
+    <!-- Left image -->
+    <div
+      ref="leftImgRef"
+      class="bg-primary-comfy-canvas/20 rounded-r-5xl absolute top-80 left-0 h-40 w-1/8 lg:h-160 lg:w-1/4"
+    />
+    <!-- Right image -->
+    <div
+      ref="rightImgRef"
+      class="bg-primary-comfy-canvas/20 rounded-l-5xl absolute top-30 right-0 h-40 w-1/8 lg:h-160 lg:w-1/4"
+    />
+    <div
+      ref="contentRef"
+      class="flex flex-col items-center will-change-transform"
+    >
+      <p
+        class="text-primary-comfy-yellow text-center text-sm font-bold tracking-widest uppercase lg:text-base"
+      >
+        {{ t('useCase.label', locale) }}
+      </p>
+
+      <nav
+        ref="navRef"
+        class="mt-16 flex max-w-5/6 flex-col items-center justify-center gap-12 lg:mt-20 lg:gap-20"
+        aria-label="Industry categories"
+      >
+        <button
+          v-for="(category, index) in categories"
+          :key="category"
+          class="lg:text-6.5xl cursor-pointer text-center text-4xl font-light whitespace-pre-line transition-colors"
+          :class="
+            index === activeCategory
+              ? 'text-primary-comfy-canvas'
+              : 'text-primary-comfy-canvas/30 hover:text-primary-comfy-canvas/50'
+          "
+          @click="activeCategory = index"
+        >
+          {{ category }}
+        </button>
+      </nav>
+
+      <p class="text-primary-warm-gray mt-20 max-w-md text-center text-base">
+        {{ t('useCase.body', locale) }}
+      </p>
+
+      <BrandButton
+        :href="externalLinks.workflows"
+        :label="t('useCase.cta', locale)"
+        variant="outline"
+        class-name="mt-8 text-sm"
+      />
+    </div>
+  </section>
+</template>
diff --git a/apps/website/src/composables/useFrameScrub.ts b/apps/website/src/composables/useFrameScrub.ts
new file mode 100644
index 0000000000..e768e60812
--- /dev/null
+++ b/apps/website/src/composables/useFrameScrub.ts
@@ -0,0 +1,77 @@
+import type { Ref } from 'vue'
+import { onMounted, onUnmounted } from 'vue'
+import { gsap, ScrollTrigger } from '../scripts/gsapSetup'
+import { prefersReducedMotion } from './useReducedMotion'
+
+interface FrameScrubOptions {
+  frameCount: number
+  frameSrc: (index: number) => string
+  scrollTrigger: (canvas: HTMLCanvasElement) => ScrollTrigger.Vars
+}
+
+export function useFrameScrub(
+  canvasRef: Ref<HTMLCanvasElement | undefined>,
+  options: FrameScrubOptions
+) {
+  let ctx: gsap.Context | undefined
+  const images: HTMLImageElement[] = []
+
+  onMounted(() => {
+    if (!canvasRef.value || prefersReducedMotion()) return
+    const canvas: HTMLCanvasElement = canvasRef.value
+
+    const draw = canvas.getContext('2d')
+    if (!draw) return
+    let loadedCount = 0
+    const resolvedTrigger = options.scrollTrigger(canvas)
+
+    function drawFrame(frame: number) {
+      const index = Math.round(frame)
+      const img = images[index]
+      if (!img || !draw) return
+      canvas.width = img.width
+      canvas.height = img.height
+      draw.drawImage(img, 0, 0)
+    }
+
+    function onFrameReady() {
+      loadedCount++
+      if (loadedCount === options.frameCount) {
+        drawFrame(0)
+        initScrub()
+      }
+    }
+
+    for (let i = 0; i < options.frameCount; i++) {
+      const img = new Image()
+      img.src = options.frameSrc(i)
+      img.onload = onFrameReady
+      img.onerror = onFrameReady
+      images.push(img)
+    }
+
+    function initScrub() {
+      ScrollTrigger.refresh()
+      const proxy = { frame: 0 }
+      ctx = gsap.context(() => {
+        gsap.to(proxy, {
+          frame: options.frameCount - 1,
+          ease: 'none',
+          scrollTrigger: resolvedTrigger,
+          onUpdate() {
+            drawFrame(proxy.frame)
+          }
+        })
+      })
+    }
+  })
+
+  onUnmounted(() => {
+    images.forEach((img) => {
+      img.onload = null
+      img.onerror = null
+    })
+    images.length = 0
+    ctx?.revert()
+  })
+}
diff --git a/apps/website/src/composables/useParallax.ts b/apps/website/src/composables/useParallax.ts
new file mode 100644
index 0000000000..f25538c8ef
--- /dev/null
+++ b/apps/website/src/composables/useParallax.ts
@@ -0,0 +1,43 @@
+import type { Ref } from 'vue'
+import { onMounted, onUnmounted } from 'vue'
+import { gsap } from '../scripts/gsapSetup'
+import { prefersReducedMotion } from './useReducedMotion'
+
+interface ParallaxOptions {
+  /** Vertical offset in pixels (default: 200) */
+  y?: number
+  trigger?: Ref<HTMLElement | undefined>
+}
+
+export function useParallax(
+  elements: Ref<HTMLElement | undefined>[],
+  options: ParallaxOptions = {}
+) {
+  const { y = 200 } = options
+  let ctx: gsap.Context | undefined
+
+  onMounted(() => {
+    const trigger = options.trigger?.value
+    const els = elements.map((r) => r.value).filter(Boolean) as HTMLElement[]
+    if (!els.length || prefersReducedMotion()) return
+
+    ctx = gsap.context(() => {
+      els.forEach((el) => {
+        gsap.to(el, {
+          y,
+          ease: 'none',
+          scrollTrigger: {
+            trigger: trigger ?? el,
+            start: 'top bottom',
+            end: 'bottom top',
+            scrub: 1
+          }
+        })
+      })
+    })
+  })
+
+  onUnmounted(() => {
+    ctx?.revert()
+  })
+}
diff --git a/apps/website/src/composables/usePinScrub.ts b/apps/website/src/composables/usePinScrub.ts
new file mode 100644
index 0000000000..1862905ac2
--- /dev/null
+++ b/apps/website/src/composables/usePinScrub.ts
@@ -0,0 +1,109 @@
+import type { Ref } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
+import { gsap } from '../scripts/gsapSetup'
+import { prefersReducedMotion } from './useReducedMotion'
+
+interface PinScrubRefs {
+  section: Ref<HTMLElement | undefined>
+  content: Ref<HTMLElement | undefined>
+  nav: Ref<HTMLElement | undefined>
+}
+
+interface PinScrubOptions {
+  itemCount: number
+  /** Viewport-height percentage per item (default: 100) */
+  vhPerItem?: number
+}
+
+function interpolateY(
+  index: number,
+  buttonCenters: number[],
+  contentH: number,
+  vpH: number
+) {
+  const clampedTarget = (i: number) => {
+    const center = buttonCenters[i] ?? 0
+    return Math.max(-(contentH - vpH), Math.min(0, vpH / 2 - center))
+  }
+
+  const floorIdx = Math.floor(index)
+  const ceilIdx = Math.min(Math.ceil(index), buttonCenters.length - 1)
+  const frac = index - floorIdx
+  return (
+    clampedTarget(floorIdx) +
+    (clampedTarget(ceilIdx) - clampedTarget(floorIdx)) * frac
+  )
+}
+
+export function usePinScrub(refs: PinScrubRefs, options: PinScrubOptions) {
+  const activeIndex = ref(0)
+  let ctx: gsap.Context | undefined
+
+  const vhPerItem = options.vhPerItem ?? 100
+
+  onMounted(() => {
+    if (
+      !refs.section.value ||
+      !refs.content.value ||
+      !refs.nav.value ||
+      prefersReducedMotion()
+    )
+      return
+    const section: HTMLElement = refs.section.value
+    const content: HTMLElement = refs.content.value
+    const nav: HTMLElement = refs.nav.value
+
+    let buttonCenters: number[] = []
+    let contentH = 0
+    let vpH = 0
+
+    function cacheLayout() {
+      const contentRect = content.getBoundingClientRect()
+      contentH = content.scrollHeight
+      vpH = window.innerHeight
+      buttonCenters = Array.from(nav.querySelectorAll(':scope > *')).map(
+        (btn) => {
+          const btnRect = btn.getBoundingClientRect()
+          return btnRect.top + btnRect.height / 2 - contentRect.top
+        }
+      )
+    }
+
+    cacheLayout()
+
+    const proxy = { index: 0 }
+    ctx = gsap.context(() => {
+      gsap.to(proxy, {
+        index: options.itemCount - 1,
+        ease: 'none',
+        scrollTrigger: {
+          trigger: section,
+          start: 'top top',
+          end: `+=${options.itemCount * vhPerItem}%`,
+          pin: true,
+          scrub: true,
+          refreshPriority: 1,
+          onRefresh: cacheLayout
+        },
+        onUpdate() {
+          activeIndex.value = Math.round(proxy.index)
+
+          if (contentH <= vpH) {
+            gsap.set(content, { y: 0 })
+            return
+          }
+
+          gsap.set(content, {
+            y: interpolateY(proxy.index, buttonCenters, contentH, vpH)
+          })
+        }
+      })
+    })
+  })
+
+  onUnmounted(() => {
+    ctx?.revert()
+  })
+
+  return { activeIndex }
+}
diff --git a/apps/website/src/composables/useReducedMotion.ts b/apps/website/src/composables/useReducedMotion.ts
new file mode 100644
index 0000000000..a7f86c2ad1
--- /dev/null
+++ b/apps/website/src/composables/useReducedMotion.ts
@@ -0,0 +1,6 @@
+export function prefersReducedMotion(): boolean {
+  return (
+    typeof window !== 'undefined' &&
+    window.matchMedia('(prefers-reduced-motion: reduce)').matches
+  )
+}
diff --git a/apps/website/src/config/routes.ts b/apps/website/src/config/routes.ts
new file mode 100644
index 0000000000..3850e6c362
--- /dev/null
+++ b/apps/website/src/config/routes.ts
@@ -0,0 +1,38 @@
+import type { Locale } from '../i18n/translations'
+
+const baseRoutes = {
+  home: '/',
+  download: '/download',
+  cloud: '/cloud',
+  cloudPricing: '/cloud/pricing',
+  cloudEnterprise: '/cloud/enterprise',
+  api: '/api',
+  gallery: '/gallery',
+  about: '/about',
+  careers: '/careers',
+  customers: '/customers',
+  termsOfService: '/terms-of-service',
+  privacyPolicy: '/privacy-policy',
+  videos: '/videos',
+  caseStudies: '/case-studies'
+} as const
+
+type Routes = typeof baseRoutes
+
+export function getRoutes(locale: Locale = 'en'): Routes {
+  if (locale === 'en') return baseRoutes
+  const prefix = `/${locale}`
+  return Object.fromEntries(
+    Object.entries(baseRoutes).map(([k, v]) => [k, `${prefix}${v}`])
+  ) as unknown as Routes
+}
+
+export const externalLinks = {
+  app: 'https://app.comfy.org',
+  workflows: 'https://comfy.org/workflows',
+  blog: 'https://blog.comfy.org/',
+  github: 'https://github.com/Comfy-Org/ComfyUI',
+  discord: 'https://discord.com/invite/comfyorg',
+  docs: 'https://docs.comfy.org/',
+  youtube: 'https://www.youtube.com/@ComfyOrg'
+} as const
diff --git a/apps/website/src/i18n/translations.ts b/apps/website/src/i18n/translations.ts
new file mode 100644
index 0000000000..4866c85b39
--- /dev/null
+++ b/apps/website/src/i18n/translations.ts
@@ -0,0 +1,281 @@
+type Locale = 'en' | 'zh-CN'
+
+const translations = {
+  // HeroSection
+  'hero.title': {
+    en: 'Professional Control\nof Visual AI',
+    'zh-CN': '视觉 AI 的\n专业控制'
+  },
+  'hero.subtitle': {
+    en: 'Comfy is the AI creation engine for visual professionals who demand control over every model, every parameter, and every output.',
+    'zh-CN':
+      'Comfy 是面向视觉专业人士的 AI 创作引擎，让您掌控每个模型、每个参数和每个输出。'
+  },
+
+  // ProductShowcaseSection
+  'showcase.subtitle1': {
+    en: 'Connect models, processing steps, and outputs on a canvas where every decision is visible and every step is inspectable.',
+    'zh-CN':
+      '在画布上连接模型、处理步骤和输出，每个决策都可见，每个步骤都可检查。'
+  },
+  'showcase.subtitle2': {
+    en: 'Start from a community template or build from scratch.',
+    'zh-CN': '从社区模板开始，或从零构建。'
+  },
+  'showcase.feature1.title': {
+    en: 'Full Control with Nodes',
+    'zh-CN': '节点式完全控制'
+  },
+  'showcase.feature1.description': {
+    en: 'Build powerful AI pipelines by connecting nodes on an infinite canvas. Every model, parameter, and processing step is visible and adjustable.',
+    'zh-CN':
+      '在无限画布上连接节点，构建强大的 AI 管线。每个模型、参数和处理步骤都可见且可调整。'
+  },
+  'showcase.feature2.title': {
+    en: 'App mode, a simplified view of your workflows',
+    'zh-CN': 'App 模式，工作流的简化视图'
+  },
+  'showcase.feature2.description': {
+    en: 'If you are new to ComfyUI, get started with App Mode, a simplified view of your workflows. You can flip back to the node graph view anytime to go deeper.',
+    'zh-CN':
+      '如果您是 ComfyUI 新手，可以从 App 模式开始——这是工作流的简化视图。您随时可以切换回节点图视图以深入了解。'
+  },
+  'showcase.feature3.title': {
+    en: 'Community Workflows on Comfy Hub',
+    'zh-CN': 'Comfy Hub 上的社区工作流'
+  },
+  'showcase.feature3.description': {
+    en: 'Browse and remix thousands of community-shared workflows. Start from a proven template and customize it to your needs.',
+    'zh-CN':
+      '浏览和混搭数千个社区共享的工作流。从经过验证的模板开始，按需自定义。'
+  },
+  'showcase.badgeHow': { en: 'HOW', 'zh-CN': '如何' },
+  'showcase.badgeWorks': { en: 'WORKS', 'zh-CN': '运作' },
+
+  // UseCaseSection
+  'useCase.label': {
+    en: 'Industries that create with ComfyUI',
+    'zh-CN': '使用 ComfyUI 创作的行业'
+  },
+  'useCase.vfx': {
+    en: 'VFX &\nAnimation',
+    'zh-CN': '视觉特效 &\n动画'
+  },
+  'useCase.advertising': {
+    en: 'Advertising &\nCreative Studios',
+    'zh-CN': '广告 &\n创意工作室'
+  },
+  'useCase.gaming': {
+    en: 'Video Game',
+    'zh-CN': '电子游戏'
+  },
+  'useCase.ecommerce': {
+    en: 'eCommerce &\nFashion',
+    'zh-CN': '电商 &\n时尚'
+  },
+  'useCase.more': {
+    en: '& More',
+    'zh-CN': '& 更多'
+  },
+  'useCase.body': {
+    en: 'Powered by 60,000+ nodes, thousands of workflows,\nand a community that builds faster than any one company could.',
+    'zh-CN':
+      '由 60,000+ 节点、数千个工作流\n和一个比任何公司都更快构建的社区驱动。'
+  },
+  'useCase.cta': {
+    en: 'EXPLORE WORKFLOWS',
+    'zh-CN': '探索工作流'
+  },
+
+  // GetStartedSection
+  'getStarted.heading': {
+    en: 'Get started in minutes',
+    'zh-CN': '几分钟即可上手'
+  },
+  'getStarted.subheading': {
+    en: 'Go as deep as you want to.',
+    'zh-CN': '想多深入就多深入。'
+  },
+  'getStarted.step1.title': {
+    en: 'Download or Sign up',
+    'zh-CN': '下载或注册'
+  },
+  'getStarted.step1.downloadLocal': {
+    en: 'Download Local',
+    'zh-CN': '下载本地版'
+  },
+  'getStarted.step1.launchCloud': {
+    en: 'Launch Cloud',
+    'zh-CN': '启动云端'
+  },
+  'getStarted.step1.or': {
+    en: 'or',
+    'zh-CN': '或'
+  },
+  'getStarted.step2.title': {
+    en: 'Load a workflow',
+    'zh-CN': '加载工作流'
+  },
+  'getStarted.step2.description': {
+    en: 'Start from a community template or build your own.',
+    'zh-CN': '从社区模板开始，或自行构建。'
+  },
+  'getStarted.step3.title': {
+    en: 'Generate & Iterate',
+    'zh-CN': '生成与迭代'
+  },
+  'getStarted.step3.description': {
+    en: "Run, adjust, scale when you're ready.",
+    'zh-CN': '运行、调整，准备好了就扩展。'
+  },
+
+  // ProductCardsSection
+  'products.label': {
+    en: 'Comfy UI',
+    'zh-CN': 'Comfy UI'
+  },
+  'products.heading': {
+    en: 'The AI creation\nengine for complete control',
+    'zh-CN': '完全掌控的\nAI 创作引擎'
+  },
+  'products.subheading': {
+    en: 'Over every model, every node, every step, every output.',
+    'zh-CN': '掌控每个模型、每个节点、每个步骤、每个输出。'
+  },
+  'products.local.title': {
+    en: 'Comfy\nLocal',
+    'zh-CN': 'Comfy\n本地版'
+  },
+  'products.local.description': {
+    en: 'Run ComfyUI on your own hardware.',
+    'zh-CN': '在您自己的硬件上运行 ComfyUI。'
+  },
+  'products.local.cta': {
+    en: 'SEE LOCAL FEATURES',
+    'zh-CN': '查看本地版特性'
+  },
+  'products.cloud.title': {
+    en: 'Comfy\nCloud',
+    'zh-CN': 'Comfy\nCloud'
+  },
+  'products.cloud.description': {
+    en: 'The full power of ComfyUI from anywhere.',
+    'zh-CN': '随时随地使用 ComfyUI 的全部能力。'
+  },
+  'products.cloud.cta': {
+    en: 'SEE CLOUD FEATURES',
+    'zh-CN': '查看云端特性'
+  },
+  'products.api.title': {
+    en: 'Comfy\nAPI',
+    'zh-CN': 'Comfy\nAPI'
+  },
+  'products.api.description': {
+    en: 'Turn workflows into production endpoints.',
+    'zh-CN': '将工作流转化为生产级 API 端点。'
+  },
+  'products.api.cta': {
+    en: 'SEE API FEATURES',
+    'zh-CN': '查看 API 特性'
+  },
+  'products.enterprise.title': {
+    en: 'Comfy\nEnterprise',
+    'zh-CN': 'Comfy\n企业版'
+  },
+  'products.enterprise.description': {
+    en: 'Enterprise-grade infrastructure for the creative engine inside your organization.',
+    'zh-CN': '为组织内的创作引擎提供企业级基础设施。'
+  },
+  'products.enterprise.cta': {
+    en: 'SEE ENTERPRISE FEATURES',
+    'zh-CN': '查看企业版特性'
+  },
+
+  // CaseStudySpotlightSection
+  'caseStudy.label': {
+    en: 'Customer Stories',
+    'zh-CN': '客户故事'
+  },
+  'caseStudy.heading': {
+    en: 'See Comfy\nin the real world',
+    'zh-CN': '看看 Comfy\n在真实世界中的应用'
+  },
+  'caseStudy.subheading': {
+    en: 'Videos & case studies from teams building with Comfy',
+    'zh-CN': '来自使用 Comfy 构建的团队的视频和案例研究'
+  },
+  'caseStudy.watchVideos': {
+    en: 'WATCH VIDEOS',
+    'zh-CN': '观看视频'
+  },
+  'caseStudy.seeAll': {
+    en: 'SEE ALL CASE STUDIES',
+    'zh-CN': '查看全部案例'
+  },
+
+  // BuildWhatSection
+  'buildWhat.subtitle': {
+    en: "Comfy gives you the building blocks to create workflows nobody's imagined yet — and share them with everyone.",
+    'zh-CN': 'Comfy 为您提供构建模块，创造出前所未有的工作流——并与所有人分享。'
+  },
+  'buildWhat.row1': { en: 'BUILD WHAT', 'zh-CN': '构建' },
+  'buildWhat.row2a': { en: "DOESN'T EXIST", 'zh-CN': '尚不存在的' },
+  'buildWhat.row2b': { en: 'YET', 'zh-CN': '事物' },
+
+  // SiteNav
+  'nav.products': { en: 'PRODUCTS', 'zh-CN': '产品' },
+  'nav.pricing': { en: 'PRICING', 'zh-CN': '价格' },
+  'nav.community': { en: 'COMMUNITY', 'zh-CN': '社区' },
+  'nav.resources': { en: 'RESOURCES', 'zh-CN': '资源' },
+  'nav.company': { en: 'COMPANY', 'zh-CN': '公司' },
+  'nav.comfyLocal': { en: 'Comfy Local', 'zh-CN': 'Comfy 本地版' },
+  'nav.comfyCloud': { en: 'Comfy Cloud', 'zh-CN': 'Comfy Cloud' },
+  'nav.comfyApi': { en: 'Comfy API', 'zh-CN': 'Comfy API' },
+  'nav.comfyEnterprise': {
+    en: 'Comfy Enterprise',
+    'zh-CN': 'Comfy 企业版'
+  },
+  'nav.comfyHub': { en: 'Comfy Hub', 'zh-CN': 'Comfy Hub' },
+  'nav.gallery': { en: 'Gallery', 'zh-CN': '画廊' },
+  'nav.blogs': { en: 'Blogs', 'zh-CN': '博客' },
+  'nav.github': { en: 'GitHub', 'zh-CN': 'GitHub' },
+  'nav.discord': { en: 'Discord', 'zh-CN': 'Discord' },
+  'nav.docs': { en: 'Docs', 'zh-CN': '文档' },
+  'nav.youtube': { en: 'YouTube', 'zh-CN': 'YouTube' },
+  'nav.aboutUs': { en: 'About Us', 'zh-CN': '关于我们' },
+  'nav.careers': { en: 'Careers', 'zh-CN': '招聘' },
+  'nav.customerStories': { en: 'Customer Stories', 'zh-CN': '客户故事' },
+  'nav.downloadLocal': { en: 'DOWNLOAD LOCAL', 'zh-CN': '下载本地版' },
+  'nav.launchCloud': { en: 'LAUNCH CLOUD', 'zh-CN': '启动云端' },
+  'nav.menu': { en: 'Menu', 'zh-CN': '菜单' },
+  'nav.toggleMenu': { en: 'Toggle menu', 'zh-CN': '切换菜单' },
+  'nav.back': { en: 'BACK', 'zh-CN': '返回' },
+  'nav.badgeNew': { en: 'NEW', 'zh-CN': '新' },
+
+  // SiteFooter
+  'footer.tagline': {
+    en: 'The most powerful workflow engine for visual AI.',
+    'zh-CN': '最强大的视觉 AI 工作流引擎。'
+  },
+  'footer.products': { en: 'Products', 'zh-CN': '产品' },
+  'footer.resources': { en: 'Resources', 'zh-CN': '资源' },
+  'footer.company': { en: 'Company', 'zh-CN': '公司' },
+  'footer.contact': { en: 'Contact', 'zh-CN': '联系我们' },
+  'footer.about': { en: 'About', 'zh-CN': '关于' },
+  'footer.termsOfService': { en: 'Terms of Service', 'zh-CN': '服务条款' },
+  'footer.privacyPolicy': { en: 'Privacy Policy', 'zh-CN': '隐私政策' },
+  'footer.support': { en: 'Support', 'zh-CN': '支持' },
+  'footer.blog': { en: 'Blog', 'zh-CN': '博客' },
+  'footer.location': {
+    en: 'San Francisco, USA',
+    'zh-CN': '美国旧金山'
+  }
+} as const satisfies Record<string, Record<Locale, string>>
+
+type TranslationKey = keyof typeof translations
+
+export function t(key: TranslationKey, locale: Locale = 'en'): string {
+  return translations[key][locale] ?? translations[key].en
+}
+
+export type { Locale }
diff --git a/apps/website/src/layouts/BaseLayout.astro b/apps/website/src/layouts/BaseLayout.astro
new file mode 100644
index 0000000000..9f61735ca4
--- /dev/null
+++ b/apps/website/src/layouts/BaseLayout.astro
@@ -0,0 +1,134 @@
+---
+import { ClientRouter } from 'astro:transitions'
+import Analytics from '@vercel/analytics/astro'
+import '../styles/global.css'
+import type { Locale } from '../i18n/translations'
+import SiteFooter from '../components/common/SiteFooter.vue'
+import SiteNav from '../components/common/SiteNav.vue'
+
+interface Props {
+  title: string
+  description?: string
+  ogImage?: string
+  noindex?: boolean
+}
+
+const {
+  title,
+  description = 'Comfy is the AI creation engine for visual professionals who demand control.',
+  ogImage = '/og-default.png',
+  noindex = false,
+} = Astro.props
+
+const siteBase = Astro.site ?? 'https://comfy.org'
+const canonicalURL = new URL(Astro.url.pathname, siteBase)
+const ogImageURL = new URL(ogImage, siteBase)
+const rawLocale = Astro.currentLocale ?? 'en'
+const locale: Locale = rawLocale === 'zh-CN' ? 'zh-CN' : 'en'
+const gtmId = 'GTM-NP9JM6K7'
+const gtmEnabled = import.meta.env.PROD
+
+const organizationJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'Organization',
+  name: 'Comfy Org',
+  url: 'https://comfy.org',
+  logo: 'https://comfy.org/icons/logomark.svg',
+  sameAs: [
+    'https://github.com/comfyanonymous/ComfyUI',
+    'https://discord.gg/comfyorg',
+    'https://x.com/comaboratory',
+    'https://reddit.com/r/comfyui',
+    'https://linkedin.com/company/comfyorg',
+    'https://instagram.com/comfyorg',
+  ],
+}
+
+const websiteJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'WebSite',
+  name: 'Comfy',
+  url: 'https://comfy.org',
+}
+---
+
+<!doctype html>
+<html lang={locale}>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content={description} />
+    {noindex && <meta name="robots" content="noindex, nofollow" />}
+    <title>{title}</title>
+
+    <link rel="icon" href="/icons/logomark.svg" type="image/svg+xml" />
+    <link rel="canonical" href={canonicalURL.href} />
+    <link rel="preconnect" href="https://www.googletagmanager.com" />
+    <link rel="dns-prefetch" href="https://www.googletagmanager.com" />
+
+    <!-- Open Graph -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="og:image" content={ogImageURL.href} />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="og:url" content={canonicalURL.href} />
+    <meta property="og:locale" content={locale} />
+    <meta property="og:site_name" content="Comfy" />
+
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@comaboratory" />
+    <meta name="twitter:title" content={title} />
+    <meta name="twitter:description" content={description} />
+    <meta name="twitter:image" content={ogImageURL.href} />
+
+    <!-- Structured Data -->
+    <script is:inline type="application/ld+json" set:html={JSON.stringify(organizationJsonLd)} />
+    <script is:inline type="application/ld+json" set:html={JSON.stringify(websiteJsonLd)} />
+
+    <!-- Google Tag Manager -->
+    {gtmEnabled && (
+      <script is:inline define:vars={{ gtmId }}>
+        ;(function (w, d, s, l, i) {
+          w[l] = w[l] || []
+          w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' })
+          var f = d.getElementsByTagName(s)[0],
+            j = d.createElement(s),
+            dl = l != 'dataLayer' ? '&l=' + l : ''
+          j.async = true
+          j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl
+          f.parentNode.insertBefore(j, f)
+        })(window, document, 'script', 'dataLayer', gtmId)
+      </script>
+    )}
+
+    <ClientRouter />
+  </head>
+  <body class="bg-primary-comfy-ink text-white font-formula antialiased">
+    {gtmEnabled && (
+      <noscript>
+        <iframe
+          src={`https://www.googletagmanager.com/ns.html?id=${gtmId}`}
+          height="0"
+          width="0"
+          style="display:none;visibility:hidden"
+        ></iframe>
+      </noscript>
+    )}
+
+    <SiteNav locale={locale} client:load />
+    <main>
+      <slot />
+    </main>
+    <SiteFooter locale={locale} client:load />
+
+    <Analytics />
+
+    <script>
+      import { initSmoothScroll } from '../scripts/smoothScroll'
+      initSmoothScroll()
+    </script>
+  </body>
+</html>
diff --git a/apps/website/src/pages/about.astro b/apps/website/src/pages/about.astro
new file mode 100644
index 0000000000..21e9767eec
--- /dev/null
+++ b/apps/website/src/pages/about.astro
@@ -0,0 +1,8 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+import ComingSoon from '../components/common/ComingSoon.astro'
+---
+
+<BaseLayout title="About Us — Comfy">
+  <ComingSoon />
+</BaseLayout>
diff --git a/apps/website/src/pages/api.astro b/apps/website/src/pages/api.astro
new file mode 100644
index 0000000000..95a0a96999
--- /dev/null
+++ b/apps/website/src/pages/api.astro
@@ -0,0 +1,8 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+import ComingSoon from '../components/common/ComingSoon.astro'
+---
+
+<BaseLayout title="Comfy API">
+  <ComingSoon />
+</BaseLayout>
diff --git a/apps/website/src/pages/careers.astro b/apps/website/src/pages/careers.astro
new file mode 100644
index 0000000000..5431f78338
--- /dev/null
+++ b/apps/website/src/pages/careers.astro
@@ -0,0 +1,8 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+import ComingSoon from '../components/common/ComingSoon.astro'
+---
+
+<BaseLayout title="Careers — Comfy">
+  <ComingSoon />
+</BaseLayout>
diff --git a/apps/website/src/pages/case-studies.astro b/apps/website/src/pages/case-studies.astro
new file mode 100644
index 0000000000..f71e6eb1ec
--- /dev/null
+++ b/apps/website/src/pages/case-studies.astro
@@ -0,0 +1,8 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+import ComingSoon from '../components/common/ComingSoon.astro'
+---
+
+<BaseLayout title="Case Studies — Comfy">
+  <ComingSoon />
+</BaseLayout>
diff --git a/apps/website/src/pages/cloud/enterprise.astro b/apps/website/src/pages/cloud/enterprise.astro
new file mode 100644
index 0000000000..9d2dff44fe
--- /dev/null
+++ b/apps/website/src/pages/cloud/enterprise.astro
@@ -0,0 +1,8 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import ComingSoon from '../../components/common/ComingSoon.astro'
+---
+
+<BaseLayout title="Comfy Enterprise">
+  <ComingSoon />
+</BaseLayout>
diff --git a/apps/website/src/pages/cloud/index.astro b/apps/website/src/pages/cloud/index.astro
new file mode 100644
index 0000000000..223e6d138c
--- /dev/null
+++ b/apps/website/src/pages/cloud/index.astro
@@ -0,0 +1,8 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import ComingSoon from '../../components/common/ComingSoon.astro'
+---
+
+<BaseLayout title="Comfy Cloud — Run AI From Anywhere">
+  <ComingSoon />
+</BaseLayout>
diff --git a/apps/website/src/pages/cloud/pricing.astro b/apps/website/src/pages/cloud/pricing.astro
new file mode 100644
index 0000000000..7e0c4df652
--- /dev/null
+++ b/apps/website/src/pages/cloud/pricing.astro
@@ -0,0 +1,8 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import ComingSoon from '../../components/common/ComingSoon.astro'
+---
+
+<BaseLayout title="Pricing — Comfy Cloud">
+  <ComingSoon />
+</BaseLayout>
diff --git a/apps/website/src/pages/customers.astro b/apps/website/src/pages/customers.astro
new file mode 100644
index 0000000000..b4e401e3c8
--- /dev/null
+++ b/apps/website/src/pages/customers.astro
@@ -0,0 +1,8 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+import ComingSoon from '../components/common/ComingSoon.astro'
+---
+
+<BaseLayout title="Customer Stories — Comfy">
+  <ComingSoon />
+</BaseLayout>
diff --git a/apps/website/src/pages/download.astro b/apps/website/src/pages/download.astro
new file mode 100644
index 0000000000..32f4b7ce9e
--- /dev/null
+++ b/apps/website/src/pages/download.astro
@@ -0,0 +1,8 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+import ComingSoon from '../components/common/ComingSoon.astro'
+---
+
+<BaseLayout title="Download Comfy — Run AI Locally">
+  <ComingSoon />
+</BaseLayout>
diff --git a/apps/website/src/pages/gallery.astro b/apps/website/src/pages/gallery.astro
new file mode 100644
index 0000000000..8c263c69e8
--- /dev/null
+++ b/apps/website/src/pages/gallery.astro
@@ -0,0 +1,8 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+import ComingSoon from '../components/common/ComingSoon.astro'
+---
+
+<BaseLayout title="Gallery — Comfy">
+  <ComingSoon />
+</BaseLayout>
diff --git a/apps/website/src/pages/index.astro b/apps/website/src/pages/index.astro
new file mode 100644
index 0000000000..e5005692bd
--- /dev/null
+++ b/apps/website/src/pages/index.astro
@@ -0,0 +1,22 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+import ProductCardsSection from '../components/home/ProductCardsSection.vue'
+import HeroSection from '../components/home/HeroSection.vue'
+import SocialProofBarSection from '../components/home/SocialProofBarSection.vue'
+import ProductShowcaseSection from '../components/home/ProductShowcaseSection.vue'
+import UseCaseSection from '../components/home/UseCaseSection.vue'
+import CaseStudySpotlightSection from '../components/home/CaseStudySpotlightSection.vue'
+import GetStartedSection from '../components/home/GetStartedSection.vue'
+import BuildWhatSection from '../components/home/BuildWhatSection.vue'
+---
+
+<BaseLayout title="Comfy — Professional Control of Visual AI">
+  <HeroSection client:load />
+  <SocialProofBarSection />
+  <ProductShowcaseSection client:visible />
+  <UseCaseSection client:visible />
+  <GetStartedSection />
+  <ProductCardsSection />
+  <CaseStudySpotlightSection />
+  <BuildWhatSection />
+</BaseLayout>
diff --git a/apps/website/src/pages/privacy-policy.astro b/apps/website/src/pages/privacy-policy.astro
new file mode 100644
index 0000000000..5d1a2a8fbb
--- /dev/null
+++ b/apps/website/src/pages/privacy-policy.astro
@@ -0,0 +1,269 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+---
+
+<BaseLayout
+  title="Privacy Policy — Comfy"
+  description="Comfy privacy policy. Learn how we collect, use, and protect your personal information."
+  noindex
+>
+  <div class="mx-auto max-w-3xl px-6 py-24">
+    <h1 class="text-3xl font-bold text-white">Privacy Policy</h1>
+    <p class="mt-2 text-sm text-smoke-500">Effective date: April 18, 2025</p>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">Introduction</h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        Your privacy is important to us. This Privacy Policy explains how Comfy
+        Org, Inc. ("Comfy," "we," "us," or "our") collects, uses, shares, and
+        protects your personal information when you use our website at comfy.org
+        and related services.
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        Information We Collect
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        We may collect the following personal information when you interact with
+        our services:
+      </p>
+      <ul class="mt-3 list-disc space-y-2 pl-5 text-sm text-smoke-500">
+        <li>Name</li>
+        <li>Email address</li>
+      </ul>
+      <p class="mt-3 text-sm leading-relaxed text-smoke-500">
+        We collect this information when you voluntarily provide it to us, such
+        as when you create an account, subscribe to communications, or contact
+        support.
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        Legitimate Reasons for Processing Your Personal Information
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        We only collect and use your personal information when we have a
+        legitimate reason for doing so. We process personal information to
+        provide, improve, and administer our services; to communicate with you;
+        for security and fraud prevention; and to comply with applicable law.
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        How Long We Keep Your Information
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        We retain your personal information only for as long as necessary to
+        fulfill the purposes outlined in this policy, unless a longer retention
+        period is required or permitted by law. When we no longer need your
+        information, we will securely delete or anonymize it.
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        Children's Privacy
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        We do not knowingly collect personal information from children under the
+        age of 13. If we learn that we have collected personal information from a
+        child under 13, we will take steps to delete such information as quickly
+        as possible. If you believe we have collected information from a child
+        under 13, please contact us at
+        <a href="mailto:support@comfy.org" class="text-white underline">
+          support@comfy.org</a
+        >.
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        Disclosure of Personal Information to Third Parties
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        We may disclose personal information to third-party service providers
+        that assist us in operating our services. This includes payment
+        processors such as Stripe, cloud hosting providers, and analytics
+        services. We require these parties to handle your data in accordance with
+        this policy and applicable law.
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        Your Rights and Controlling Your Personal Information
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        Depending on your location, you may have the following rights regarding
+        your personal information:
+      </p>
+      <ul class="mt-3 list-disc space-y-2 pl-5 text-sm text-smoke-500">
+        <li>The right to access the personal information we hold about you.</li>
+        <li>
+          The right to request correction of inaccurate personal information.
+        </li>
+        <li>The right to request deletion of your personal information.</li>
+        <li>The right to object to or restrict processing.</li>
+        <li>The right to data portability.</li>
+        <li>The right to withdraw consent at any time.</li>
+      </ul>
+      <p class="mt-3 text-sm leading-relaxed text-smoke-500">
+        To exercise any of these rights, please contact us at
+        <a href="mailto:support@comfy.org" class="text-white underline">
+          support@comfy.org</a
+        >.
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        Limits of Our Policy
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        Our website may link to external sites that are not operated by us.
+        Please be aware that we have no control over the content and practices of
+        these sites and cannot accept responsibility for their respective privacy
+        policies.
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        Changes to This Policy
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        We may update this Privacy Policy from time to time to reflect changes in
+        our practices or for other operational, legal, or regulatory reasons. We
+        will notify you of any material changes by posting the updated policy on
+        our website with a revised effective date.
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        U.S. State Privacy Compliance
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        We comply with privacy laws in the following U.S. states, where
+        applicable:
+      </p>
+      <ul class="mt-3 list-disc space-y-2 pl-5 text-sm text-smoke-500">
+        <li>California (CCPA / CPRA)</li>
+        <li>Colorado (CPA)</li>
+        <li>Delaware (DPDPA)</li>
+        <li>Florida (FDBR)</li>
+        <li>Virginia (VCDPA)</li>
+        <li>Utah (UCPA)</li>
+      </ul>
+      <p class="mt-3 text-sm leading-relaxed text-smoke-500">
+        Residents of these states may have additional rights, including the right
+        to know what personal information is collected, the right to delete
+        personal information, and the right to opt out of the sale of personal
+        information. To exercise these rights, contact us at
+        <a href="mailto:support@comfy.org" class="text-white underline">
+          support@comfy.org</a
+        >.
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">Do Not Track</h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        Some browsers include a "Do Not Track" (DNT) feature that signals to
+        websites that you do not wish to be tracked. There is currently no
+        uniform standard for how companies should respond to DNT signals. At this
+        time, we do not respond to DNT signals.
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">CCPA / CPPA</h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        Under the California Consumer Privacy Act (CCPA) and the California
+        Privacy Protection Agency (CPPA) regulations, California residents have
+        the right to know what personal information we collect, request deletion
+        of their data, and opt out of the sale of their personal information. We
+        do not sell personal information. To make a request, contact us at
+        <a href="mailto:support@comfy.org" class="text-white underline">
+          support@comfy.org</a
+        >.
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        GDPR — European Economic Area
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        If you are located in the European Economic Area (EEA), the General Data
+        Protection Regulation (GDPR) grants you certain rights regarding your
+        personal data, including the right to access, rectify, erase, restrict
+        processing, data portability, and to object to processing. Our legal
+        bases for processing include consent, contract performance, and
+        legitimate interests. To exercise your GDPR rights, contact us at
+        <a href="mailto:support@comfy.org" class="text-white underline">
+          support@comfy.org</a
+        >.
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">UK GDPR</h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        If you are located in the United Kingdom, the UK General Data Protection
+        Regulation (UK GDPR) provides you with similar rights to those under the
+        EU GDPR, including the right to access, rectify, erase, and port your
+        data. To exercise your rights under the UK GDPR, please contact us at
+        <a href="mailto:support@comfy.org" class="text-white underline">
+          support@comfy.org</a
+        >.
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        Australian Privacy
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        If you are located in Australia, the Australian Privacy Principles (APPs)
+        under the Privacy Act 1988 apply to our handling of your personal
+        information. You have the right to request access to and correction of
+        your personal information. If you believe we have breached the APPs, you
+        may lodge a complaint with us or with the Office of the Australian
+        Information Commissioner (OAIC).
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">Contact Us</h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        If you have any questions or concerns about this Privacy Policy or our
+        data practices, please contact us at:
+      </p>
+      <p class="mt-3 text-sm leading-relaxed text-smoke-500">
+        <a href="mailto:support@comfy.org" class="text-white underline">
+          support@comfy.org
+        </a>
+      </p>
+    </section>
+  </div>
+</BaseLayout>
diff --git a/apps/website/src/pages/terms-of-service.astro b/apps/website/src/pages/terms-of-service.astro
new file mode 100644
index 0000000000..44120ee7e2
--- /dev/null
+++ b/apps/website/src/pages/terms-of-service.astro
@@ -0,0 +1,300 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+---
+
+<BaseLayout
+  title="Terms of Service — Comfy"
+  description="Terms of Service for ComfyUI and related Comfy services."
+  noindex
+>
+  <div class="mx-auto max-w-3xl px-6 py-24 sm:py-32">
+    <header class="mb-16">
+      <h1 class="text-3xl font-bold text-white">Terms of Service</h1>
+      <p class="mt-2 text-lg text-smoke-700">for ComfyUI</p>
+      <p class="mt-4 text-sm text-smoke-700">
+        Effective Date: March 1, 2025 · Last Updated: March 1, 2025
+      </p>
+    </header>
+
+    <section class="space-y-12">
+      <!-- Intro -->
+      <div>
+        <p class="text-sm leading-relaxed text-smoke-700">
+          Welcome to ComfyUI and the services provided by Comfy Org, Inc.
+          ("Comfy", "we", "us", or "our"). By accessing or using ComfyUI, the
+          Comfy Registry, comfy.org, or any of our related services
+          (collectively, the "Services"), you agree to be bound by these Terms of
+          Service ("Terms"). If you do not agree to these Terms, do not use the
+          Services.
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 1. Definitions -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">1. Definitions</h2>
+        <ul class="mt-4 list-disc space-y-2 pl-5 text-sm leading-relaxed text-smoke-700">
+          <li>
+            <strong class="text-white">"ComfyUI"</strong> means the open-source
+            node-based visual programming interface for AI-powered content
+            generation.
+          </li>
+          <li>
+            <strong class="text-white">"Services"</strong> means ComfyUI, the
+            Comfy Registry, comfy.org website, APIs, documentation, and any
+            related services operated by Comfy.
+          </li>
+          <li>
+            <strong class="text-white">"User Content"</strong> means any
+            content, workflows, custom nodes, models, or other materials you
+            create, upload, or share through the Services.
+          </li>
+          <li>
+            <strong class="text-white">"Registry"</strong> means the Comfy
+            Registry, a package repository for distributing custom nodes and
+            extensions.
+          </li>
+        </ul>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 2. ComfyUI Software License -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">
+          2. ComfyUI Software License
+        </h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          ComfyUI is released under the GNU General Public License v3.0 (GPLv3).
+          Your use of the ComfyUI software is governed by the GPLv3 license
+          terms. These Terms of Service govern your use of the hosted Services,
+          website, and Registry — not the open-source software itself.
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 3. Using the Services -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">3. Using the Services</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          You may use the Services only in compliance with these Terms and all
+          applicable laws. The Services are intended for users who are at least
+          18 years of age. By using the Services, you represent and warrant that
+          you meet this age requirement and have the legal capacity to enter into
+          these Terms.
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 4. Your Responsibilities -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">
+          4. Your Responsibilities
+        </h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          You are responsible for your use of the Services and any content you
+          create, share, or distribute through them. You agree to use the
+          Services in a manner that is lawful, respectful, and consistent with
+          these Terms. You are solely responsible for maintaining the security of
+          your account credentials.
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 5. Use Restrictions -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">5. Use Restrictions</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          You agree not to misuse the Services. This includes, but is not
+          limited to:
+        </p>
+        <ul class="mt-4 list-disc space-y-2 pl-5 text-sm leading-relaxed text-smoke-700">
+          <li>
+            Attempting to gain unauthorized access to any part of the Services
+          </li>
+          <li>
+            Using the Services to distribute malware, viruses, or harmful code
+          </li>
+          <li>
+            Interfering with or disrupting the integrity or performance of the
+            Services
+          </li>
+          <li>
+            Scraping, crawling, or using automated means to access the Services
+            without permission
+          </li>
+          <li>
+            Publishing custom nodes or workflows that contain malicious code or
+            violate third-party rights
+          </li>
+        </ul>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 6. Accounts and User Information -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">
+          6. Accounts and User Information
+        </h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          Certain features of the Services may require you to create an account.
+          You agree to provide accurate and complete information when creating
+          your account and to keep this information up to date. You are
+          responsible for all activity that occurs under your account. We reserve
+          the right to suspend or terminate accounts that violate these Terms.
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 7. Intellectual Property Rights -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">
+          7. Intellectual Property Rights
+        </h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          The Services, excluding open-source components, are owned by Comfy and
+          are protected by intellectual property laws. The Comfy name, logo, and
+          branding are trademarks of Comfy Org, Inc. You retain ownership of any
+          User Content you create. By submitting User Content to the Services,
+          you grant Comfy a non-exclusive, worldwide, royalty-free license to
+          host, display, and distribute such content as necessary to operate the
+          Services.
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 8. Model and Workflow Distribution -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">
+          8. Model and Workflow Distribution
+        </h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          When you distribute models, workflows, or custom nodes through the
+          Registry or Services, you represent that you have the right to
+          distribute such content and that it does not infringe any third-party
+          rights. You are responsible for specifying an appropriate license for
+          any content you distribute. Comfy does not claim ownership of content
+          distributed through the Registry.
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 9. Fees and Payment -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">9. Fees and Payment</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          Certain Services may be offered for a fee. If you choose to use paid
+          features, you agree to pay all applicable fees as described at the time
+          of purchase. Fees are non-refundable except as required by law or as
+          expressly stated in these Terms. Comfy reserves the right to change
+          pricing with reasonable notice.
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 10. Term and Termination -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">
+          10. Term and Termination
+        </h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          These Terms remain in effect while you use the Services. You may stop
+          using the Services at any time. Comfy may suspend or terminate your
+          access to the Services at any time, with or without cause and with or
+          without notice. Upon termination, your right to use the Services will
+          immediately cease. Sections that by their nature should survive
+          termination will continue to apply.
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 11. Disclaimer of Warranties -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">
+          11. Disclaimer of Warranties
+        </h2>
+        <p class="mt-4 text-sm uppercase leading-relaxed text-smoke-700">
+          The Services are provided "as is" and "as available" without warranties
+          of any kind, either express or implied, including but not limited to
+          implied warranties of merchantability, fitness for a particular
+          purpose, and non-infringement. Comfy does not warrant that the Services
+          will be uninterrupted, error-free, or secure.
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 12. Limitation of Liability -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">
+          12. Limitation of Liability
+        </h2>
+        <p class="mt-4 text-sm uppercase leading-relaxed text-smoke-700">
+          To the maximum extent permitted by law, Comfy shall not be liable for
+          any indirect, incidental, special, consequential, or punitive damages,
+          or any loss of profits or revenues, whether incurred directly or
+          indirectly, or any loss of data, use, goodwill, or other intangible
+          losses resulting from your use of the Services. Comfy's total liability
+          shall not exceed the amounts paid by you to Comfy in the twelve months
+          preceding the claim.
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 13. Indemnification -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">13. Indemnification</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          You agree to indemnify, defend, and hold harmless Comfy, its officers,
+          directors, employees, and agents from and against any claims,
+          liabilities, damages, losses, and expenses arising out of or in any
+          way connected with your access to or use of the Services, your User
+          Content, or your violation of these Terms.
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 14. Governing Law and Dispute Resolution -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">
+          14. Governing Law and Dispute Resolution
+        </h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          These Terms shall be governed by and construed in accordance with the
+          laws of the State of Delaware, without regard to its conflict of laws
+          principles. Any disputes arising under these Terms shall be resolved
+          through binding arbitration in accordance with the rules of the
+          American Arbitration Association, except that either party may seek
+          injunctive relief in any court of competent jurisdiction.
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 15. Miscellaneous -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">15. Miscellaneous</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          These Terms constitute the entire agreement between you and Comfy
+          regarding the Services. If any provision of these Terms is found to be
+          unenforceable, the remaining provisions will continue in effect. Our
+          failure to enforce any right or provision of these Terms will not be
+          considered a waiver. We may assign our rights under these Terms. You
+          may not assign your rights without our prior written consent.
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- Contact -->
+      <div class="border-t border-white/10 pt-12">
+        <h2 class="text-xl font-semibold text-white">Contact Us</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          If you have questions about these Terms, please contact us at
+          <a
+            href="mailto:legal@comfy.org"
+            class="text-white underline transition-colors hover:text-smoke-700"
+          >
+            legal@comfy.org
+          </a>.
+        </p>
+      </div>
+    </section>
+  </div>
+</BaseLayout>
diff --git a/apps/website/src/pages/videos.astro b/apps/website/src/pages/videos.astro
new file mode 100644
index 0000000000..45c6b61922
--- /dev/null
+++ b/apps/website/src/pages/videos.astro
@@ -0,0 +1,8 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+import ComingSoon from '../components/common/ComingSoon.astro'
+---
+
+<BaseLayout title="Videos — Comfy">
+  <ComingSoon />
+</BaseLayout>
diff --git a/apps/website/src/pages/zh-CN/about.astro b/apps/website/src/pages/zh-CN/about.astro
new file mode 100644
index 0000000000..205f353992
--- /dev/null
+++ b/apps/website/src/pages/zh-CN/about.astro
@@ -0,0 +1,171 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro'
+
+const team = [
+  { name: 'comfyanonymous', role: 'ComfyUI 创始人、联合创始人' },
+  { name: 'Dr.Lt.Data', role: 'ComfyUI-Manager 和 Impact/Inspire Pack 作者' },
+  { name: 'pythongosssss', role: '核心贡献者、ComfyUI-Custom-Scripts 作者' },
+  { name: 'yoland68', role: 'ComfyCLI 作者、联合创始人、前 Google' },
+  { name: 'robinjhuang', role: 'Comfy Registry 维护者、联合创始人、前 Google Cloud' },
+  { name: 'jojodecay', role: 'ComfyUI 活动主持人、社区与合作关系' },
+  { name: 'christian-byrne', role: '全栈开发工程师' },
+  { name: 'Kosinkadink', role: 'AnimateDiff-Evolved 和 Advanced-ControlNet 作者' },
+  { name: 'webfiltered', role: 'Litegraph 库重构者' },
+  { name: 'Pablo', role: '产品设计、前 AI 初创公司创始人' },
+  { name: 'ComfyUI Wiki (Daxiong)', role: '官方文档和模板' },
+  { name: 'ctrlbenlu (Ben)', role: '软件工程师、前机器人领域' },
+  { name: 'Purz Beats', role: '动效设计师和机器学习工程师' },
+  { name: 'Ricyu (Rich)', role: '软件工程师、前 Meta' },
+]
+
+const collaborators = [
+  { name: 'Yogo', role: '协作者' },
+  { name: 'Fill (Machine Delusions)', role: '协作者' },
+  { name: 'Julien (MJM)', role: '协作者' },
+]
+
+const projects = [
+  { name: 'ComfyUI', description: '生成式 AI 工作流的核心节点式界面。' },
+  { name: 'ComfyUI Manager', description: '一键安装、更新和管理自定义节点。' },
+  { name: 'Comfy Registry', description: '发布和发现自定义节点的官方注册表。' },
+  { name: 'Frontends', description: '驱动 ComfyUI 体验的桌面端和 Web 前端。' },
+  { name: 'Docs', description: '官方文档、指南和教程。' },
+]
+
+const faqs = [
+  {
+    q: 'ComfyUI 免费吗？',
+    a: '是的。ComfyUI 是免费开源的，基于 GPL-3.0 许可证。您可以将其用于个人和商业项目。',
+  },
+  {
+    q: '谁在开发 ComfyUI？',
+    a: 'ComfyUI 由 comfyanonymous 创建，由一个小而专注的开发团队和社区贡献者共同维护。',
+  },
+  {
+    q: '如何参与贡献？',
+    a: '查看我们的 GitHub 仓库来报告问题、提交 Pull Request 或构建自定义节点。加入我们的 Discord 社区与其他贡献者交流。',
+  },
+  {
+    q: '未来有什么计划？',
+    a: '我们专注于让 ComfyUI 成为生成式 AI 的操作系统——提升性能、扩展模型支持，为创作者和开发者打造更好的工具。',
+  },
+]
+---
+
+<BaseLayout title="关于我们 — Comfy" description="了解 ComfyUI 背后的团队和使命——开源的生成式 AI 平台。">
+  <div>
+    <!-- 主页横幅 -->
+    <section class="px-6 pb-24 pt-40 text-center">
+      <h1 class="mx-auto max-w-4xl text-4xl font-bold leading-tight md:text-6xl">
+        开创视觉与音频媒体的下一个前沿
+      </h1>
+      <p class="mx-auto mt-6 max-w-2xl text-lg text-smoke-700">
+        一个开源社区和公司，致力于为生成式 AI 创作者打造最强大的工具。
+      </p>
+    </section>
+
+    <!-- 我们的使命 -->
+    <section class="bg-charcoal-800 px-6 py-24">
+      <div class="mx-auto max-w-3xl text-center">
+        <h2 class="text-sm font-semibold uppercase tracking-widest text-brand-yellow">我们的使命</h2>
+        <p class="mt-6 text-3xl font-bold md:text-4xl">
+          我们想打造生成式 AI 的操作系统。
+        </p>
+        <p class="mt-6 text-lg leading-relaxed text-smoke-700">
+          我们正在构建让创作者完全掌控生成式 AI 的基础工具。
+          从图像和视频合成到音频生成，ComfyUI 提供了一个模块化的
+          节点式环境，让专业人士和爱好者可以创建、迭代
+          和部署生产级工作流——没有黑箱。
+        </p>
+      </div>
+    </section>
+
+    <!-- 我们做什么？ -->
+    <section class="px-6 py-24">
+      <div class="mx-auto max-w-5xl">
+        <h2 class="text-center text-3xl font-bold md:text-4xl">我们做什么？</h2>
+        <div class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {projects.map((project) => (
+            <div class="rounded-xl border border-white/10 bg-charcoal-600 p-6">
+              <h3 class="text-lg font-semibold">{project.name}</h3>
+              <p class="mt-2 text-sm text-smoke-700">{project.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+
+    <!-- 我们是谁 -->
+    <section class="bg-charcoal-800 px-6 py-24">
+      <div class="mx-auto max-w-3xl text-center">
+        <h2 class="text-3xl font-bold md:text-4xl">我们是谁</h2>
+        <p class="mt-6 text-lg leading-relaxed text-smoke-700">
+          ComfyUI 最初是 comfyanonymous 的个人项目，后来发展成为一个全球性的
+          创作者、开发者和研究者社区。今天，Comfy Org 是一个位于旧金山的小型扁平化团队，
+          由相信开源 AI 工具的投资者支持。我们与令人难以置信的贡献者社区一起工作，
+          他们构建自定义节点、分享工作流，并不断突破生成式 AI 的边界。
+        </p>
+      </div>
+    </section>
+
+    <!-- 团队 -->
+    <section class="px-6 py-24">
+      <div class="mx-auto max-w-6xl">
+        <h2 class="text-center text-3xl font-bold md:text-4xl">团队</h2>
+        <div class="mt-12 grid gap-6 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+          {team.map((member) => (
+            <div class="rounded-xl border border-white/10 p-5 text-center">
+              <div class="mx-auto h-16 w-16 rounded-full bg-charcoal-600" />
+              <h3 class="mt-4 font-semibold">{member.name}</h3>
+              <p class="mt-1 text-sm text-smoke-700">{member.role}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+
+    <!-- 协作者 -->
+    <section class="bg-charcoal-800 px-6 py-16">
+      <div class="mx-auto max-w-4xl text-center">
+        <h2 class="text-2xl font-bold">协作者</h2>
+        <div class="mt-8 flex flex-wrap items-center justify-center gap-8">
+          {collaborators.map((person) => (
+            <div class="text-center">
+              <div class="mx-auto h-14 w-14 rounded-full bg-charcoal-600" />
+              <p class="mt-3 font-semibold">{person.name}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+
+    <!-- 常见问题 -->
+    <section class="px-6 py-24">
+      <div class="mx-auto max-w-3xl">
+        <h2 class="text-center text-3xl font-bold md:text-4xl">常见问题</h2>
+        <div class="mt-12 space-y-10">
+          {faqs.map((faq) => (
+            <div>
+              <h3 class="text-lg font-semibold">{faq.q}</h3>
+              <p class="mt-2 text-smoke-700">{faq.a}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+
+    <!-- 加入我们 CTA -->
+    <section class="bg-charcoal-800 px-6 py-24 text-center">
+      <h2 class="text-3xl font-bold md:text-4xl">加入我们的团队</h2>
+      <p class="mx-auto mt-4 max-w-xl text-smoke-700">
+        我们正在寻找热衷于开源、生成式 AI 和打造优秀开发者工具的人。
+      </p>
+      <a
+        href="/careers"
+        class="mt-8 inline-block rounded-full bg-brand-yellow px-8 py-3 text-sm font-semibold text-black transition-opacity hover:opacity-90"
+      >
+        查看开放职位
+      </a>
+    </section>
+  </div>
+</BaseLayout>
diff --git a/apps/website/src/pages/zh-CN/careers.astro b/apps/website/src/pages/zh-CN/careers.astro
new file mode 100644
index 0000000000..c0739c6ffa
--- /dev/null
+++ b/apps/website/src/pages/zh-CN/careers.astro
@@ -0,0 +1,196 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro'
+
+const departments = [
+  {
+    name: '工程',
+    roles: [
+      { title: 'Design Engineer', id: 'abc787b9-ad85-421c-8218-debd23bea096' },
+      { title: 'Software Engineer, ComfyUI Desktop', id: 'ad2f76cb-a787-47d8-81c5-7e7f917747c0' },
+      { title: 'Product Manager, ComfyUI (open-source)', id: '12dbc26e-9f6d-49bf-83c6-130f7566d03c' },
+      { title: 'Senior Software Engineer, Frontend Generalist', id: 'c3e0584d-5490-491f-aae4-b5922ef63fd2' },
+      { title: 'Software Engineer, Frontend Generalist', id: '99dc26c7-51ca-43cd-a1ba-7d475a0f4a40' },
+      { title: 'Tech Lead Manager, Frontend', id: 'a0665088-3314-457a-aa7b-12ca5c3eb261' },
+      { title: 'Senior Software Engineer, Comfy Cloud', id: '27cdf4ce-69a4-44da-b0ec-d54875fd14a1' },
+      { title: 'Senior Applied AI/ML Engineer', id: '5cc4d0bc-97b0-463b-8466-3ec1d07f6ac0' },
+      { title: 'Senior Engineer, Backend Generalist', id: '732f8b39-076d-4847-afe3-f54d4451607e' },
+      { title: 'Software Engineer, Core ComfyUI Contributor', id: '7d4062d6-d500-445a-9a5f-014971af259f' },
+    ],
+  },
+  {
+    name: '设计',
+    roles: [
+      { title: 'Graphic Designer', id: '49fa0b07-3fa1-4a3a-b2c6-d2cc684ad63f' },
+      { title: 'Creative Artist', id: '19ba10aa-4961-45e8-8473-66a8a7a8079d' },
+      { title: 'Senior Product Designer', id: 'b2e864c6-4754-4e04-8f46-1022baa103c3' },
+      { title: 'Freelance Motion Designer', id: 'a7ccc2b4-4d9d-4e04-b39c-28a711995b5b' },
+    ],
+  },
+  {
+    name: '市场营销',
+    roles: [
+      { title: 'Partnership & Events Marketing Manager', id: '89d3ff75-2055-4e92-9c69-81feff55627c' },
+      { title: 'Lifecycle Growth Marketer', id: 'be74d210-3b50-408c-9f61-8fee8833ce64' },
+      { title: 'Social Media Manager', id: '28dea965-662b-4786-b024-c9a1b6bc1f23' },
+    ],
+  },
+  {
+    name: '商务运营/增长',
+    roles: [
+      { title: 'Founding Account Executive', id: '061ff83a-fe18-40f7-a5c4-4ce7da7086a6' },
+      { title: 'Senior Technical Recruiter', id: 'd5008532-c45d-46e6-ba2c-20489d364362' },
+    ],
+  },
+]
+
+const whyJoinUs = [
+  '你想打造赋能他人创作的工具。',
+  '你喜欢从事已经在驱动真实世界视频、图像、音乐和应用的基础技术。',
+  '你关心开放、免费的替代方案，而非封闭的 AI 平台。',
+  '你相信艺术家、黑客和独立创作者应该真正掌控自己的工具。',
+  '你想在一个精干、务实、快速迭代的小团队中工作。',
+]
+
+const notAFit = [
+  '你需要一切都计划好。我们边做边摸索，方向变化很快。如果不确定性让你焦虑，你可能不会喜欢这里。',
+  '你只把自己定位为程序员/[某个职位]。在这里，每个人都会做各种事情——和用户交流、写文档，什么需要做就做什么。我们需要主动补位的人。',
+  '你需要完善的流程。我们在做一件革命性的事情，这意味着要自己写规则。如果你需要清晰的结构，这可能会让你抓狂。',
+  '你喜欢经理来检查你的工作。我们信任每个人端到端地负责自己的工作。看到问题就修复——不需要请示。',
+  '你倾向于等到掌握所有信息再行动。我们经常需要在信息不完整的情况下做决定，然后在过程中调整。分析瘫痪在这里行不通。',
+  '你有很大的自我。我们追求突破边界和解决难题，而不是个人英雄主义。如果你无法接受直接的反馈或从错误中学习，这里不适合你。',
+]
+
+const questions = [
+  '团队文化是什么样的？',
+  '我需要什么样的背景才能申请？',
+  '如何申请？',
+  '招聘流程是什么样的？',
+  '线下还是远程？',
+  '如何提高获得工作的机会？',
+  '如果我需要签证担保在美国工作怎么办？',
+  '我能获得简历和面试的反馈吗？',
+]
+---
+
+<BaseLayout
+  title="招聘 — Comfy"
+  description="加入构建生成式 AI 操作系统的团队。工程、设计、市场营销等岗位开放招聘中。"
+>
+  <div>
+    <!-- Hero -->
+    <section class="px-6 pb-24 pt-40">
+      <div class="mx-auto max-w-4xl text-center">
+        <h1 class="text-4xl font-bold tracking-tight md:text-6xl">
+          构建生成式 AI 的
+          <br />
+          <span class="text-brand-yellow">&ldquo;操作系统&rdquo;</span>
+        </h1>
+        <p class="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-smoke-700">
+          我们是全球领先的<strong class="text-white">视觉 AI 平台</strong>——一个开放、模块化的系统，任何人都可以精确地构建、
+          定制和自动化 AI 工作流，并拥有完全的控制权。与大多数将内部机制隐藏在简单提示框后面的 AI 工具不同，我们赋予专业人士
+          <strong class="text-white">设计自己管线的自由</strong>——像积木一样将模型、工具和逻辑可视化地连接起来。
+        </p>
+        <p class="mx-auto mt-4 max-w-2xl text-lg leading-relaxed text-smoke-700">
+          ComfyUI 被<strong class="text-white">艺术家、电影人、游戏创作者、设计师、研究人员、视效公司</strong>等使用，
+          其中包括 <strong class="text-white">OpenAI、Netflix、Amazon Studios、育碧、EA 和腾讯</strong>的团队——他们都想超越预设，
+          真正塑造 AI 的创作方式。
+        </p>
+      </div>
+    </section>
+
+    <!-- Job Listings -->
+    <section class="border-t border-white/10 px-6 py-24">
+      <div class="mx-auto max-w-4xl">
+        {departments.map((dept) => (
+          <div class="mb-16 last:mb-0">
+            <h2 class="mb-6 text-sm font-semibold uppercase tracking-widest text-brand-yellow">
+              {dept.name}
+            </h2>
+            <div class="space-y-3">
+              {dept.roles.map((role) => (
+                <a
+                  href={`https://jobs.ashbyhq.com/comfy-org/${role.id}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="flex items-center justify-between rounded-lg border border-white/10 px-5 py-4 transition-colors hover:border-brand-yellow"
+                >
+                  <span class="font-medium">{role.title}</span>
+                  <span class="text-sm text-smoke-700">→</span>
+                </a>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+
+    <!-- Why Join Us / When It's Not a Fit — 2-column layout -->
+    <section class="border-t border-white/10 bg-charcoal-800 px-6 py-24">
+      <div class="mx-auto grid max-w-5xl gap-16 md:grid-cols-2">
+        <!-- Why Join Us -->
+        <div>
+          <h2 class="mb-8 text-sm font-semibold uppercase tracking-widest text-brand-yellow">
+            为什么加入我们？
+          </h2>
+          <ul class="space-y-4">
+            {whyJoinUs.map((item) => (
+              <li class="flex gap-3 text-smoke-700">
+                <span class="mt-1 text-brand-yellow">•</span>
+                <span>{item}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <!-- When It's Not a Fit -->
+        <div>
+          <h2 class="mb-4 text-sm font-semibold uppercase tracking-widest text-white">
+            不太适合的情况
+          </h2>
+          <p class="mb-8 text-sm text-smoke-700">
+            在 Comfy Org 工作并不适合所有人，这完全没问题。如果以下情况符合你，你可能需要考虑其他机会：
+          </p>
+          <ul class="space-y-4">
+            {notAFit.map((item) => (
+              <li class="flex gap-3 text-sm text-smoke-700">
+                <span class="mt-0.5 text-white/40">—</span>
+                <span>{item}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <!-- Q&A -->
+    <section class="border-t border-white/10 px-6 py-24">
+      <div class="mx-auto max-w-4xl">
+        <h2 class="mb-10 text-sm font-semibold uppercase tracking-widest text-brand-yellow">
+          常见问题
+        </h2>
+        <ul class="space-y-4">
+          {questions.map((q) => (
+            <li class="rounded-lg border border-white/10 px-5 py-4 font-medium">
+              {q}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+
+    <!-- Contact CTA -->
+    <section class="border-t border-white/10 px-6 py-24">
+      <div class="mx-auto max-w-4xl text-center">
+        <h2 class="text-3xl font-bold">有问题？联系我们！</h2>
+        <a
+          href="https://support.comfy.org/"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="mt-8 inline-block rounded-full bg-brand-yellow px-8 py-3 text-sm font-semibold text-black transition-opacity hover:opacity-90"
+        >
+          联系我们
+        </a>
+      </div>
+    </section>
+  </div>
+</BaseLayout>
diff --git a/apps/website/src/pages/zh-CN/download.astro b/apps/website/src/pages/zh-CN/download.astro
new file mode 100644
index 0000000000..f8fc01fe1c
--- /dev/null
+++ b/apps/website/src/pages/zh-CN/download.astro
@@ -0,0 +1,76 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro'
+
+const cards = [
+  {
+    icon: '🪟',
+    title: 'Windows',
+    description: '需要 NVIDIA 或 AMD 显卡',
+    cta: '下载 Windows 版',
+    href: 'https://download.comfy.org/windows/nsis/x64',
+    outlined: false,
+  },
+  {
+    icon: '🍎',
+    title: 'Mac',
+    description: '需要 Apple Silicon (M 系列)',
+    cta: '下载 Mac 版',
+    href: 'https://download.comfy.org/mac/dmg/arm64',
+    outlined: false,
+  },
+  {
+    icon: '🐙',
+    title: 'GitHub',
+    description: '在任何平台上从源码构建',
+    cta: '从 GitHub 安装',
+    href: 'https://github.com/comfyanonymous/ComfyUI',
+    outlined: true,
+  },
+]
+---
+
+<BaseLayout title="下载 — Comfy">
+  <div class="mx-auto max-w-5xl px-6 py-32 text-center">
+    <h1 class="text-4xl font-bold text-white md:text-5xl">
+      下载 ComfyUI
+    </h1>
+    <p class="mt-4 text-lg text-smoke-700">
+      在本地体验 AI 创作
+    </p>
+
+    <div class="mt-16 grid grid-cols-1 gap-6 md:grid-cols-3">
+      {cards.map((card) => (
+        <a
+          href={card.href}
+          class="flex flex-col items-center rounded-xl border border-white/10 bg-charcoal-600 p-8 text-center transition-colors hover:border-brand-yellow"
+        >
+          <span class="text-4xl" aria-hidden="true">{card.icon}</span>
+          <h2 class="mt-4 text-xl font-semibold text-white">{card.title}</h2>
+          <p class="mt-2 text-sm text-smoke-700">{card.description}</p>
+          <span
+            class:list={[
+              'mt-6 inline-block rounded-full px-6 py-2 text-sm font-semibold transition-opacity hover:opacity-90',
+              card.outlined
+                ? 'border border-brand-yellow text-brand-yellow'
+                : 'bg-brand-yellow text-black',
+            ]}
+          >
+            {card.cta}
+          </span>
+        </a>
+      ))}
+    </div>
+
+    <div class="mt-20 rounded-xl border border-white/10 bg-charcoal-800 p-8">
+      <p class="text-lg text-smoke-700">
+        没有 GPU？{' '}
+        <a
+          href="https://app.comfy.org"
+          class="font-semibold text-brand-yellow hover:underline"
+        >
+          试试 Comfy Cloud →
+        </a>
+      </p>
+    </div>
+  </div>
+</BaseLayout>
diff --git a/apps/website/src/pages/zh-CN/gallery.astro b/apps/website/src/pages/zh-CN/gallery.astro
new file mode 100644
index 0000000000..d041d942d0
--- /dev/null
+++ b/apps/website/src/pages/zh-CN/gallery.astro
@@ -0,0 +1,39 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro'
+---
+
+<BaseLayout title="作品集 — Comfy">
+  <div class="bg-black text-white">
+    <!-- Hero -->
+    <section class="mx-auto max-w-5xl px-6 pb-16 pt-32 text-center">
+      <h1 class="text-4xl font-bold tracking-tight sm:text-5xl">
+        在 ComfyUI 中<span class="text-brand-yellow">构建、调整与梦想</span>
+      </h1>
+      <p class="mx-auto mt-4 max-w-2xl text-lg text-smoke-700">
+        社区使用 ComfyUI 创作的精彩作品一瞥。
+      </p>
+    </section>
+
+    <!-- Placeholder Grid -->
+    <section class="mx-auto max-w-6xl px-6 pb-24">
+      <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3">
+        {Array.from({ length: 6 }).map(() => (
+          <div class="flex aspect-video items-center justify-center rounded-xl border border-white/10 bg-charcoal-600">
+            <p class="text-sm text-smoke-700">社区展示即将上线</p>
+          </div>
+        ))}
+      </div>
+    </section>
+
+    <!-- CTA -->
+    <section class="mx-auto max-w-3xl px-6 pb-32 text-center">
+      <h2 class="text-2xl font-semibold">有很酷的作品想分享？</h2>
+      <a
+        href="https://support.comfy.org/"
+        class="mt-6 inline-block rounded-full bg-brand-yellow px-8 py-3 font-medium text-black transition hover:opacity-90"
+      >
+        联系我们
+      </a>
+    </section>
+  </div>
+</BaseLayout>
diff --git a/apps/website/src/pages/zh-CN/index.astro b/apps/website/src/pages/zh-CN/index.astro
new file mode 100644
index 0000000000..4617f08f86
--- /dev/null
+++ b/apps/website/src/pages/zh-CN/index.astro
@@ -0,0 +1,22 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import ProductCardsSection from '../../components/home/ProductCardsSection.vue'
+import HeroSection from '../../components/home/HeroSection.vue'
+import SocialProofBarSection from '../../components/home/SocialProofBarSection.vue'
+import ProductShowcaseSection from '../../components/home/ProductShowcaseSection.vue'
+import UseCaseSection from '../../components/home/UseCaseSection.vue'
+import CaseStudySpotlightSection from '../../components/home/CaseStudySpotlightSection.vue'
+import GetStartedSection from '../../components/home/GetStartedSection.vue'
+import BuildWhatSection from '../../components/home/BuildWhatSection.vue'
+---
+
+<BaseLayout title="Comfy — 视觉 AI 的专业控制">
+  <HeroSection locale="zh-CN" client:load />
+  <SocialProofBarSection />
+  <ProductShowcaseSection locale="zh-CN" client:visible />
+  <UseCaseSection locale="zh-CN" client:visible />
+  <GetStartedSection locale="zh-CN" />
+  <ProductCardsSection locale="zh-CN" />
+  <CaseStudySpotlightSection locale="zh-CN" />
+  <BuildWhatSection locale="zh-CN" />
+</BaseLayout>
diff --git a/apps/website/src/pages/zh-CN/privacy-policy.astro b/apps/website/src/pages/zh-CN/privacy-policy.astro
new file mode 100644
index 0000000000..82d413f064
--- /dev/null
+++ b/apps/website/src/pages/zh-CN/privacy-policy.astro
@@ -0,0 +1,229 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro'
+---
+
+<BaseLayout
+  title="隐私政策 — Comfy"
+  description="Comfy 隐私政策。了解我们如何收集、使用和保护您的个人信息。"
+  noindex
+>
+  <div class="mx-auto max-w-3xl px-6 py-24">
+    <h1 class="text-3xl font-bold text-white">隐私政策</h1>
+    <p class="mt-2 text-sm text-smoke-500">生效日期：2025年4月18日</p>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">简介</h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        您的隐私对我们非常重要。本隐私政策说明了 Comfy Org, Inc.（"Comfy"、
+        "我们"）在您使用我们位于 comfy.org 的网站及相关服务时，如何收集、使用、
+        共享和保护您的个人信息。
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        我们收集的信息
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        当您与我们的服务互动时，我们可能会收集以下个人信息：
+      </p>
+      <ul class="mt-3 list-disc space-y-2 pl-5 text-sm text-smoke-500">
+        <li>姓名</li>
+        <li>电子邮件地址</li>
+      </ul>
+      <p class="mt-3 text-sm leading-relaxed text-smoke-500">
+        我们在您自愿提供信息时收集这些信息，例如当您创建账户、订阅通讯或联系客服时。
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        处理您个人信息的合法理由
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        我们仅在有合法理由时才收集和使用您的个人信息。我们处理个人信息是为了提供、改进和管理我们的服务；与您沟通；确保安全和防止欺诈；以及遵守适用法律。
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        我们保留您信息的时间
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        我们仅在实现本政策所述目的所必需的期限内保留您的个人信息，除非法律要求或允许更长的保留期限。当我们不再需要您的信息时，我们将安全地删除或匿名化处理。
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">儿童隐私</h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        我们不会故意收集13岁以下儿童的个人信息。如果我们发现已收集了13岁以下儿童的个人信息，我们将尽快采取措施删除该等信息。如果您认为我们收集了13岁以下儿童的信息，请通过
+        <a href="mailto:support@comfy.org" class="text-white underline">
+          support@comfy.org
+        </a>
+        与我们联系。
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        向第三方披露个人信息
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        我们可能会向协助我们运营服务的第三方服务提供商披露个人信息。这包括 Stripe
+        等支付处理商、云托管提供商和分析服务。我们要求这些方按照本政策和适用法律处理您的数据。
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        您的权利及控制您的个人信息
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        根据您所在的地区，您可能拥有以下关于您个人信息的权利：
+      </p>
+      <ul class="mt-3 list-disc space-y-2 pl-5 text-sm text-smoke-500">
+        <li>访问我们持有的关于您的个人信息的权利。</li>
+        <li>请求更正不准确的个人信息的权利。</li>
+        <li>请求删除您的个人信息的权利。</li>
+        <li>反对或限制处理的权利。</li>
+        <li>数据可携带权。</li>
+        <li>随时撤回同意的权利。</li>
+      </ul>
+      <p class="mt-3 text-sm leading-relaxed text-smoke-500">
+        如需行使任何这些权利，请通过
+        <a href="mailto:support@comfy.org" class="text-white underline">
+          support@comfy.org
+        </a>
+        与我们联系。
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        本政策的局限性
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        我们的网站可能链接到非我们运营的外部网站。请注意，我们无法控制这些网站的内容和做法，也无法对其各自的隐私政策承担责任。
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        本政策的变更
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        我们可能会不时更新本隐私政策，以反映我们做法的变化或出于其他运营、法律或监管原因。我们将通过在网站上发布更新后的政策并注明修订后的生效日期来通知您任何重大变更。
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        美国各州隐私合规
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        我们在适用的情况下遵守以下美国各州的隐私法：
+      </p>
+      <ul class="mt-3 list-disc space-y-2 pl-5 text-sm text-smoke-500">
+        <li>加利福尼亚州（CCPA / CPRA）</li>
+        <li>科罗拉多州（CPA）</li>
+        <li>特拉华州（DPDPA）</li>
+        <li>佛罗里达州（FDBR）</li>
+        <li>弗吉尼亚州（VCDPA）</li>
+        <li>犹他州（UCPA）</li>
+      </ul>
+      <p class="mt-3 text-sm leading-relaxed text-smoke-500">
+        这些州的居民可能拥有额外的权利，包括了解收集了哪些个人信息的权利、删除个人信息的权利以及选择退出出售个人信息的权利。如需行使这些权利，请通过
+        <a href="mailto:support@comfy.org" class="text-white underline">
+          support@comfy.org
+        </a>
+        与我们联系。
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        请勿追踪（Do Not Track）
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        某些浏览器包含"请勿追踪"（DNT）功能，向网站发出您不希望被追踪的信号。目前尚无关于公司应如何回应
+        DNT 信号的统一标准。目前，我们不会回应 DNT 信号。
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">CCPA / CPPA</h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        根据加利福尼亚消费者隐私法（CCPA）和加利福尼亚隐私保护局（CPPA）的规定，加利福尼亚州居民有权了解我们收集的个人信息、请求删除其数据以及选择退出出售其个人信息。我们不会出售个人信息。如需提出请求，请通过
+        <a href="mailto:support@comfy.org" class="text-white underline">
+          support@comfy.org
+        </a>
+        与我们联系。
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        GDPR — 欧洲经济区
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        如果您位于欧洲经济区（EEA），《通用数据保护条例》（GDPR）赋予您有关个人数据的某些权利，包括访问权、更正权、删除权、限制处理权、数据可携带权以及反对处理权。我们处理的法律依据包括同意、合同履行和合法利益。如需行使您的
+        GDPR 权利，请通过
+        <a href="mailto:support@comfy.org" class="text-white underline">
+          support@comfy.org
+        </a>
+        与我们联系。
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">英国 GDPR</h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        如果您位于英国，英国《通用数据保护条例》（UK
+        GDPR）为您提供与欧盟 GDPR 类似的权利，包括访问、更正、删除和传输数据的权利。如需行使您在英国
+        GDPR 下的权利，请通过
+        <a href="mailto:support@comfy.org" class="text-white underline">
+          support@comfy.org
+        </a>
+        与我们联系。
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        澳大利亚隐私
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        如果您位于澳大利亚，《1988年隐私法》下的澳大利亚隐私原则（APPs）适用于我们对您个人信息的处理。您有权请求访问和更正您的个人信息。如果您认为我们违反了
+        APPs，您可以向我们或澳大利亚信息专员办公室（OAIC）提出投诉。
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">联系我们</h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        如果您对本隐私政策或我们的数据处理方式有任何疑问或顾虑，请通过以下方式联系我们：
+      </p>
+      <p class="mt-3 text-sm leading-relaxed text-smoke-500">
+        <a href="mailto:support@comfy.org" class="text-white underline">
+          support@comfy.org
+        </a>
+      </p>
+    </section>
+  </div>
+</BaseLayout>
diff --git a/apps/website/src/pages/zh-CN/terms-of-service.astro b/apps/website/src/pages/zh-CN/terms-of-service.astro
new file mode 100644
index 0000000000..8ef417063f
--- /dev/null
+++ b/apps/website/src/pages/zh-CN/terms-of-service.astro
@@ -0,0 +1,216 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro'
+---
+
+<BaseLayout
+  title="服务条款 — Comfy"
+  description="ComfyUI 及相关 Comfy 服务的服务条款。"
+  noindex
+>
+  <div class="mx-auto max-w-3xl px-6 py-24 sm:py-32">
+    <header class="mb-16">
+      <h1 class="text-3xl font-bold text-white">服务条款</h1>
+      <p class="mt-2 text-lg text-smoke-700">适用于 ComfyUI</p>
+      <p class="mt-4 text-sm text-smoke-700">
+        生效日期：2025 年 3 月 1 日 · 最后更新：2025 年 3 月 1 日
+      </p>
+    </header>
+
+    <section class="space-y-12">
+      <!-- 引言 -->
+      <div>
+        <p class="text-sm leading-relaxed text-smoke-700">
+          欢迎使用 ComfyUI 及 Comfy Org, Inc.（以下简称"Comfy"、"我们"）提供的服务。访问或使用
+          ComfyUI、Comfy Registry、comfy.org 或我们的任何相关服务（统称"服务"）即表示您同意受本服务条款（"条款"）的约束。如果您不同意本条款，请勿使用本服务。
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 1. 定义 -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">1. 定义</h2>
+        <ul class="mt-4 list-disc space-y-2 pl-5 text-sm leading-relaxed text-smoke-700">
+          <li>
+            <strong class="text-white">"ComfyUI"</strong>
+            指用于 AI 驱动内容生成的开源节点式可视化编程界面。
+          </li>
+          <li>
+            <strong class="text-white">"服务"</strong>
+            指 ComfyUI、Comfy Registry、comfy.org 网站、API、文档及 Comfy 运营的任何相关服务。
+          </li>
+          <li>
+            <strong class="text-white">"用户内容"</strong>
+            指您通过服务创建、上传或共享的任何内容、工作流、自定义节点、模型或其他材料。
+          </li>
+          <li>
+            <strong class="text-white">"Registry"</strong>
+            指 Comfy Registry，用于分发自定义节点和扩展的软件包仓库。
+          </li>
+        </ul>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 2. ComfyUI 软件许可 -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">2. ComfyUI 软件许可</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          ComfyUI 基于 GNU 通用公共许可证 v3.0 (GPLv3) 发布。您对 ComfyUI
+          软件的使用受 GPLv3 许可条款的约束。本服务条款管辖您对托管服务、网站和
+          Registry 的使用，而非开源软件本身。
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 3. 使用服务 -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">3. 使用服务</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          您仅可在遵守本条款和所有适用法律的前提下使用服务。服务仅供年满 18
+          周岁的用户使用。使用服务即表示您声明并保证您符合此年龄要求，并有签订本条款的法律行为能力。
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 4. 您的责任 -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">4. 您的责任</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          您应对使用服务以及通过服务创建、共享或分发的任何内容负责。您同意以合法、尊重他人且符合本条款的方式使用服务。您全权负责维护账户凭据的安全。
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 5. 使用限制 -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">5. 使用限制</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          您同意不滥用服务，包括但不限于：
+        </p>
+        <ul class="mt-4 list-disc space-y-2 pl-5 text-sm leading-relaxed text-smoke-700">
+          <li>试图未经授权访问服务的任何部分</li>
+          <li>利用服务传播恶意软件、病毒或有害代码</li>
+          <li>干扰或破坏服务的完整性或性能</li>
+          <li>未经许可使用自动化手段抓取或爬取服务</li>
+          <li>发布包含恶意代码或侵犯第三方权利的自定义节点或工作流</li>
+        </ul>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 6. 账户和用户信息 -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">6. 账户和用户信息</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          服务的某些功能可能要求您创建账户。您同意在创建账户时提供准确、完整的信息，并及时更新。您对账户下发生的所有活动负责。我们保留暂停或终止违反本条款的账户的权利。
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 7. 知识产权 -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">7. 知识产权</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          除开源组件外，服务归 Comfy 所有并受知识产权法保护。Comfy 名称、标志和品牌是 Comfy Org, Inc.
+          的商标。您保留您创建的任何用户内容的所有权。向服务提交用户内容即表示您授予 Comfy
+          一项非排他性、全球性、免版税的许可，以在运营服务所需的范围内托管、展示和分发此类内容。
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 8. 模型和工作流分发 -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">8. 模型和工作流分发</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          当您通过 Registry
+          或服务分发模型、工作流或自定义节点时，您声明您有权分发此类内容且其不侵犯任何第三方权利。您有责任为分发的内容指定适当的许可证。Comfy
+          不主张对通过 Registry 分发的内容的所有权。
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 9. 费用和付款 -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">9. 费用和付款</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          某些服务可能需要付费。如果您选择使用付费功能，则同意支付购买时所述的所有适用费用。除法律要求或本条款明确规定外，费用不予退还。Comfy
+          保留在合理通知后变更定价的权利。
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 10. 期限和终止 -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">10. 期限和终止</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          在您使用服务期间，本条款持续有效。您可随时停止使用服务。Comfy
+          可随时暂停或终止您对服务的访问，无论是否有原因，也无论是否事先通知。终止后，您使用服务的权利将立即终止。按其性质应在终止后继续有效的条款将继续适用。
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 11. 免责声明 -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">11. 免责声明</h2>
+        <p class="mt-4 text-sm uppercase leading-relaxed text-smoke-700">
+          服务按"现状"和"可用"基础提供，不附带任何形式的明示或暗示保证，包括但不限于对适销性、特定用途适用性和非侵权性的暗示保证。Comfy
+          不保证服务将不间断、无错误或安全。
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 12. 责任限制 -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">12. 责任限制</h2>
+        <p class="mt-4 text-sm uppercase leading-relaxed text-smoke-700">
+          在法律允许的最大范围内，Comfy
+          不对任何间接、附带、特殊、后果性或惩罚性损害，或任何利润或收入损失（无论是直接还是间接产生的），或任何数据、使用、商誉或其他无形损失承担责任。Comfy
+          的总责任不超过您在索赔前十二个月内向 Comfy 支付的金额。
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 13. 赔偿 -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">13. 赔偿</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          您同意赔偿、辩护并使 Comfy
+          及其管理人员、董事、员工和代理人免受因您访问或使用服务、您的用户内容或您违反本条款而产生的或与之相关的任何索赔、责任、损害、损失和费用。
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 14. 适用法律和争议解决 -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">14. 适用法律和争议解决</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          本条款受特拉华州法律管辖并据其解释，不适用其冲突法原则。因本条款引起的任何争议应根据美国仲裁协会的规则通过有约束力的仲裁解决，但任何一方均可在有管辖权的法院寻求禁令救济。
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 15. 其他 -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">15. 其他</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          本条款构成您与 Comfy
+          之间关于服务的完整协议。如果本条款的任何条款被认定为不可执行，其余条款将继续有效。我们未能执行本条款的任何权利或条款不构成放弃。我们可以转让本条款下的权利。未经我们事先书面同意，您不得转让您的权利。
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 联系我们 -->
+      <div class="border-t border-white/10 pt-12">
+        <h2 class="text-xl font-semibold text-white">联系我们</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          如果您对本条款有任何疑问，请通过
+          <a
+            href="mailto:legal@comfy.org"
+            class="text-white underline transition-colors hover:text-smoke-700"
+          >
+            legal@comfy.org
+          </a>
+          与我们联系。
+        </p>
+      </div>
+    </section>
+  </div>
+</BaseLayout>
diff --git a/apps/website/src/scripts/gsapSetup.ts b/apps/website/src/scripts/gsapSetup.ts
new file mode 100644
index 0000000000..b45ca087ef
--- /dev/null
+++ b/apps/website/src/scripts/gsapSetup.ts
@@ -0,0 +1,6 @@
+import gsap from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+
+gsap.registerPlugin(ScrollTrigger)
+
+export { gsap, ScrollTrigger }
diff --git a/apps/website/src/scripts/smoothScroll.ts b/apps/website/src/scripts/smoothScroll.ts
new file mode 100644
index 0000000000..a2db0e63b3
--- /dev/null
+++ b/apps/website/src/scripts/smoothScroll.ts
@@ -0,0 +1,20 @@
+import { gsap, ScrollTrigger } from './gsapSetup'
+
+let initialized = false
+
+export async function initSmoothScroll() {
+  if (initialized) return
+  initialized = true
+
+  const ua = navigator.userAgent
+  const isWindows = /Windows/.test(ua)
+  const isLinux = /Linux/.test(ua) && !/Android/.test(ua)
+  if (!isWindows && !isLinux) return
+
+  const { default: Lenis } = await import('lenis')
+
+  const lenis = new Lenis()
+  lenis.on('scroll', ScrollTrigger.update)
+  gsap.ticker.add((time) => lenis.raf(time * 1000))
+  gsap.ticker.lagSmoothing(0)
+}
diff --git a/apps/website/src/styles/global.css b/apps/website/src/styles/global.css
index 6581d52c0a..4f3037a21f 100644
--- a/apps/website/src/styles/global.css
+++ b/apps/website/src/styles/global.css
@@ -1,2 +1,115 @@
 @import 'tailwindcss';
 @import '@comfyorg/design-system/css/base.css';
+
+@font-face {
+  font-family: 'PP Formula';
+  src: url('/fonts/PPFormula-Light.woff2') format('woff2');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'PP Formula';
+  src: url('/fonts/PPFormula-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'PP Formula';
+  src: url('/fonts/PPFormula-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'PP Formula';
+  src: url('/fonts/PPFormula-Semibold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'PP Formula';
+  src: url('/fonts/PPFormula-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'PP Formula Condensed';
+  src: url('/fonts/PPFormula-CondensedSemibold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@theme {
+  --color-site-dropdown: #332b38;
+  --color-primary-comfy-yellow: #f2ff59;
+  --color-primary-comfy-ink: #211927;
+  --color-primary-comfy-canvas: #c2bfb9;
+  --color-primary-warm-white: #f0efed;
+  --color-primary-warm-gray: #7e7c78;
+  --color-secondary-mauve: #4d3762;
+  --color-primary-comfy-plum: #49378b;
+  --color-illustration-forest: #20464c;
+  --color-transparency-white-t4: rgb(255 255 255 / 0.04);
+  --font-formula: 'PP Formula', sans-serif;
+  --font-formula-condensed: 'PP Formula Condensed', sans-serif;
+  --text-6\.5xl: 4.125rem;
+  --radius-4xl: 2rem;
+  --radius-5xl: 2.5rem;
+}
+
+@keyframes border-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@utility animate-border-spin {
+  animation: border-spin 2s linear infinite;
+}
+
+@keyframes marquee {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
+@keyframes marquee-reverse {
+  0% {
+    transform: translateX(-50%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@utility animate-marquee {
+  animation: marquee 30s linear infinite;
+}
+
+@utility animate-marquee-reverse {
+  animation: marquee-reverse 30s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
diff --git a/apps/website/tsconfig.json b/apps/website/tsconfig.json
index 34212cdd36..5b3b47e94e 100644
--- a/apps/website/tsconfig.json
+++ b/apps/website/tsconfig.json
@@ -5,5 +5,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src/**/*", "astro.config.mjs"]
+  "include": ["src/**/*", "e2e/**/*", "astro.config.ts"],
+  "exclude": ["src/**/*.stories.ts"]
 }
diff --git a/apps/website/vercel.json b/apps/website/vercel.json
new file mode 100644
index 0000000000..989818fd6b
--- /dev/null
+++ b/apps/website/vercel.json
@@ -0,0 +1,26 @@
+{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "buildCommand": "pnpm --filter @comfyorg/website build",
+  "outputDirectory": "dist",
+  "installCommand": "pnpm install --frozen-lockfile",
+  "framework": null,
+  "redirects": [
+    {
+      "source": "/pricing",
+      "destination": "/cloud/pricing",
+      "permanent": true
+    },
+    {
+      "source": "/enterprise",
+      "destination": "/cloud/enterprise",
+      "permanent": true
+    },
+    {
+      "source": "/blog",
+      "destination": "https://blog.comfy.org/",
+      "permanent": true
+    },
+    { "source": "/contact", "destination": "/about", "permanent": true },
+    { "source": "/press", "destination": "/about", "permanent": true }
+  ]
+}
diff --git a/browser_tests/AGENTS.md b/browser_tests/AGENTS.md
index bb89b00c89..3c367c548f 100644
--- a/browser_tests/AGENTS.md
+++ b/browser_tests/AGENTS.md
@@ -1,6 +1,8 @@
 # E2E Testing Guidelines
 
 See `@docs/guidance/playwright.md` for Playwright best practices (auto-loaded for `*.spec.ts`).
+See `@browser_tests/FLAKE_PREVENTION_RULES.md` when triaging or editing
+flaky browser tests.
 
 ## Directory Structure
 
@@ -12,12 +14,13 @@ browser_tests/
 │   ├── ComfyMouse.ts     - Mouse interaction helper
 │   ├── VueNodeHelpers.ts - Vue Nodes 2.0 helpers
 │   ├── selectors.ts      - Centralized TestIds
-│   ├── components/       - Page object components
+│   ├── data/             - Static test data (mock API responses, workflow JSONs, node definitions)
+│   ├── components/       - Page object components (locators, user interactions)
 │   │   ├── ContextMenu.ts
 │   │   ├── SettingDialog.ts
 │   │   ├── SidebarTab.ts
 │   │   └── Topbar.ts
-│   ├── helpers/          - Focused helper classes
+│   ├── helpers/          - Focused helper classes (domain-specific actions)
 │   │   ├── CanvasHelper.ts
 │   │   ├── CommandHelper.ts
 │   │   ├── KeyboardHelper.ts
@@ -25,11 +28,69 @@ browser_tests/
 │   │   ├── SettingsHelper.ts
 │   │   ├── WorkflowHelper.ts
 │   │   └── ...
-│   └── utils/            - Utility functions
+│   └── utils/            - Pure utility functions (no page dependency)
 ├── helpers/          - Test-specific utilities
 └── tests/            - Test files (*.spec.ts)
 ```
 
+### Architectural Separation
+
+- **`fixtures/data/`** — Static test data only. Mock API responses, workflow JSONs, node definitions. No code, no imports from Playwright.
+- **`fixtures/components/`** — Page object components. Encapsulate locators and user interactions for a specific UI area.
+- **`fixtures/helpers/`** — Focused helper classes. Domain-specific actions that coordinate multiple page objects (e.g. canvas operations, workflow loading).
+- **`fixtures/utils/`** — Pure utility functions. No `Page` dependency; stateless helpers that can be used anywhere.
+
+## Page Object Locator Style
+
+Define UI element locators as `public readonly` properties assigned in the constructor — not as getter methods. Getters that simply return a locator add unnecessary indirection and hide the object shape from IDE auto-complete.
+
+```typescript
+// ✅ Correct — public readonly, assigned in constructor
+export class MyDialog extends BaseDialog {
+  public readonly submitButton: Locator
+  public readonly cancelButton: Locator
+
+  constructor(page: Page) {
+    super(page)
+    this.submitButton = this.root.getByRole('button', { name: 'Submit' })
+    this.cancelButton = this.root.getByRole('button', { name: 'Cancel' })
+  }
+}
+
+// ❌ Avoid — getter-based locators
+export class MyDialog extends BaseDialog {
+  get submitButton() {
+    return this.root.getByRole('button', { name: 'Submit' })
+  }
+}
+```
+
+**Keep as getters only when:**
+
+- Lazy initialization is needed (`this._tab ??= new Tab(this.page)`)
+- The value is computed from runtime state (e.g. `get id() { return this.userIds[index] }`)
+- It's a private convenience accessor (e.g. `private get page() { return this.comfyPage.page }`)
+
+When a class has cached locator properties, prefer reusing them in methods rather than rebuilding locators from scratch.
+
+## Polling Assertions
+
+Prefer `expect.poll()` over `expect(async () => { ... }).toPass()` when the block contains a single async call with a single assertion. `expect.poll()` is more readable and gives better error messages (shows actual vs expected on failure).
+
+```typescript
+// ✅ Correct — single async call + single assertion
+await expect
+  .poll(() => comfyPage.nodeOps.getGraphNodesCount(), { timeout: 250 })
+  .toBe(0)
+
+// ❌ Avoid — nested expect inside toPass
+await expect(async () => {
+  expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
+}).toPass({ timeout: 250 })
+```
+
+Reserve `toPass()` for blocks with multiple assertions or complex async logic that can't be expressed as a single polled value.
+
 ## Gotchas
 
 | Symptom                                            | Cause                                       | Fix                                                                                                     |
diff --git a/browser_tests/FLAKE_PREVENTION_RULES.md b/browser_tests/FLAKE_PREVENTION_RULES.md
new file mode 100644
index 0000000000..e5224dd692
--- /dev/null
+++ b/browser_tests/FLAKE_PREVENTION_RULES.md
@@ -0,0 +1,114 @@
+# Browser Test Flake Prevention Rules
+
+Reference this file as `@browser_tests/FLAKE_PREVENTION_RULES.md` when
+debugging or updating flaky Playwright tests.
+
+These rules are distilled from the PR 10817 stabilization thread chain. They
+exist to make flaky-test triage faster and more repeatable.
+
+## Quick Checklist
+
+Before merging a flaky-test fix, confirm all of these are true:
+
+- the latest CI artifact was inspected directly
+- the root cause is stated as a race or readiness mismatch
+- the fix waits on the real readiness boundary
+- the assertion primitive matches the job
+- the fix stays local unless a shared helper truly owns the race
+- local verification uses a targeted rerun
+
+## 1. Start With CI Evidence
+
+- Do not trust the top-level GitHub check result alone.
+- Inspect the latest Playwright `report.json` directly, even on a green run.
+- Treat tests marked `flaky` in `report.json` as real work.
+- Use `error-context.md`, traces, and page snapshots before editing code.
+- Pull the newest run after each push instead of assuming the flaky set is
+  unchanged.
+
+## 2. Wait For The Real Readiness Boundary
+
+- Visible is not always ready.
+- If the behavior depends on internal state, wait on that state.
+- After canvas interactions, call `await comfyPage.nextFrame()` unless the
+  helper already guarantees a settled frame.
+- After workflow reloads or node-definition refreshes, wait for the reload to
+  finish before continuing.
+
+Common readiness boundaries:
+
+- `node.imgs` populated before opening image context menus
+- settings cleanup finished before asserting persisted state
+- locale-triggered workflow reload finished before selecting nodes
+- real builder UI ready, not transient helper metadata
+
+## 3. Choose The Smallest Correct Assertion
+
+- Use built-in retrying locator assertions when locator state is the behavior.
+- Use `expect.poll()` for a single async value.
+- Use `expect(async () => { ... }).toPass()` only when multiple assertions must
+  settle together.
+- Do not make immediate assertions after async UI mutations, settings writes,
+  clipboard writes, or graph updates.
+- Never use `waitForTimeout()` to hide a race.
+
+```ts
+await expect
+  .poll(() => comfyPage.settings.getSetting('Comfy.NodeLibrary.Bookmarks.V2'))
+  .toEqual([])
+```
+
+## 4. Prefer Behavioral Assertions
+
+- Use screenshots only when appearance is the behavior under test.
+- If a screenshot only indirectly proves behavior, replace it with a direct
+  assertion.
+- Prefer assertions on link counts, positions, visible menu items, persisted
+  settings, and node state.
+
+## 5. Keep Helper Changes Narrow
+
+- Shared helpers should drive setup to a stable boundary.
+- Do not encode one-spec timing assumptions into generic helpers.
+- If a race only matters to one spec, prefer a local wait in that spec.
+- If a helper fails before the real test begins, remove or relax the brittle
+  precondition and let downstream UI interaction prove readiness.
+
+## 6. Verify Narrowly
+
+- Prefer targeted reruns through `pnpm test:browser:local`.
+- On Windows, prefer `file:line` or whole-spec arguments over `--grep` when the
+  wrapper has quoting issues.
+- Use `--repeat-each 5` for targeted flake verification unless the failure needs
+  a different reproduction pattern.
+- Verify with the smallest command that exercises the flaky path.
+
+## 7. Common Flake Patterns
+
+| Pattern                               | Bad                                                               | Fix                                                                      |
+| ------------------------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------ |
+| **Snapshot-then-assert**              | `expect(await evaluate()).toBe(x)`                                | `await expect.poll(() => evaluate()).toBe(x)`                            |
+| **Immediate boundingBox/layout read** | `const box = await loc.boundingBox(); expect(box!.width).toBe(w)` | `await expect.poll(() => loc.boundingBox().then(b => b?.width)).toBe(w)` |
+| **Immediate graph state after drop**  | `expect(await getLinkCount()).toBe(1)`                            | `await expect.poll(() => getLinkCount()).toBe(1)`                        |
+| **Fake readiness helper**             | Helper that clicks but doesn't assert state                       | Remove; poll the actual value                                            |
+| **nextFrame after menu click**        | `clickMenuItem(x); nextFrame()`                                   | `clickMenuItem(x); contextMenu.waitForHidden()`                          |
+| **Tight poll timeout**                | `expect.poll(..., { timeout: 250 })`                              | ≥2000ms; prefer default (5000ms)                                         |
+| **Immediate count()**                 | `const n = await loc.count(); expect(n).toBe(3)`                  | `await expect(loc).toHaveCount(3)`                                       |
+| **Immediate evaluate after mutation** | `setSetting(); expect(await evaluate()).toBe(x)`                  | `await expect.poll(() => evaluate()).toBe(x)`                            |
+| **Screenshot without readiness**      | `loadWorkflow(); nextFrame(); toHaveScreenshot()`                 | `waitForNodes()` or poll state first                                     |
+| **Non-deterministic node order**      | `getNodeRefsByType('X')[0]` with >1 match                         | `getNodeRefById(id)` or guard `toHaveLength(1)`                          |
+
+## Current Local Noise
+
+These are local distractions, not automatic CI root causes:
+
+- missing local input fixture files required by the test path
+- missing local models directory
+- teardown `EPERM` while restoring the local browser-test user data directory
+- local screenshot baseline differences on Windows
+
+Rules for handling local noise:
+
+- first confirm whether it blocks the exact flaky path under investigation
+- do not commit temporary local assets used only for verification
+- do not commit local screenshot baselines
diff --git a/browser_tests/README.md b/browser_tests/README.md
index 6240285b34..8fed401a48 100644
--- a/browser_tests/README.md
+++ b/browser_tests/README.md
@@ -119,7 +119,7 @@ When writing new tests, follow these patterns:
 
 ```typescript
 // Import the test fixture
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.describe('Feature Name', () => {
   // Set up test environment if needed
@@ -148,6 +148,12 @@ Always check for existing helpers and fixtures before implementing new ones:
 
 Most common testing needs are already addressed by these helpers, which will make your tests more consistent and reliable.
 
+### Import Conventions
+
+- Prefer `@e2e/*` for imports within `browser_tests/`
+- Continue using `@/*` for imports from `src/`
+- Avoid introducing new deep relative imports within `browser_tests/` when the alias is available
+
 ### Key Testing Patterns
 
 1. **Focus elements explicitly**:
@@ -204,8 +210,8 @@ Most common testing needs are already addressed by these helpers, which will mak
 
    ```typescript
    // Prefer this:
-   expect(await node.isPinned()).toBe(true)
-   expect(await node.getProperty('title')).toBe('Expected Title')
+   await expect.poll(() => node.isPinned()).toBe(true)
+   await expect.poll(() => node.getProperty('title')).toBe('Expected Title')
 
    // Over this - only use when needed:
    await expect(comfyPage.canvas).toHaveScreenshot('state.png')
diff --git a/browser_tests/assets/3d/load3d_node.json b/browser_tests/assets/3d/load3d_node.json
new file mode 100644
index 0000000000..c3cb1f9498
--- /dev/null
+++ b/browser_tests/assets/3d/load3d_node.json
@@ -0,0 +1,47 @@
+{
+  "last_node_id": 1,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "Load3D",
+      "pos": [50, 50],
+      "size": [400, 650],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        },
+        {
+          "name": "MESH",
+          "type": "MESH",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "Load3D"
+      },
+      "widgets_values": ["", 1024, 1024, "#000000"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}
diff --git a/browser_tests/assets/3d/preview3d_pipeline.json b/browser_tests/assets/3d/preview3d_pipeline.json
new file mode 100644
index 0000000000..bf22be67cc
--- /dev/null
+++ b/browser_tests/assets/3d/preview3d_pipeline.json
@@ -0,0 +1,88 @@
+{
+  "last_node_id": 2,
+  "last_link_id": 1,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "Load3D",
+      "pos": [50, 50],
+      "size": [400, 650],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        },
+        {
+          "name": "mesh_path",
+          "type": "STRING",
+          "links": null
+        },
+        {
+          "name": "normal",
+          "type": "IMAGE",
+          "links": null
+        },
+        {
+          "name": "camera_info",
+          "type": "LOAD3D_CAMERA",
+          "links": null
+        },
+        {
+          "name": "recording_video",
+          "type": "VIDEO",
+          "links": null
+        },
+        {
+          "name": "model_3d",
+          "type": "FILE_3D",
+          "links": [1]
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "Load3D"
+      },
+      "widgets_values": ["", 1024, 1024, "#000000"]
+    },
+    {
+      "id": 2,
+      "type": "Preview3D",
+      "pos": [520, 50],
+      "size": [450, 600],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "model_file",
+          "type": "FILE_3D",
+          "link": 1
+        }
+      ],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "Preview3D"
+      },
+      "widgets_values": []
+    }
+  ],
+  "links": [[1, 1, 6, 2, 0, "*"]],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}
diff --git a/browser_tests/assets/cube.obj b/browser_tests/assets/cube.obj
new file mode 100644
index 0000000000..41e7a136e8
--- /dev/null
+++ b/browser_tests/assets/cube.obj
@@ -0,0 +1,40 @@
+# Blender 5.2.0 Alpha
+# www.blender.org
+mtllib Untitled.mtl
+o Cube
+v 2.857396 2.486626 -0.081892
+v 2.857396 0.486626 -0.081892
+v 2.857396 2.486626 1.918108
+v 2.857396 0.486626 1.918108
+v 0.857396 2.486626 -0.081892
+v 0.857396 0.486626 -0.081892
+v 0.857396 2.486626 1.918108
+v 0.857396 0.486626 1.918108
+vn -0.0000 1.0000 -0.0000
+vn -0.0000 -0.0000 1.0000
+vn -1.0000 -0.0000 -0.0000
+vn -0.0000 -1.0000 -0.0000
+vn 1.0000 -0.0000 -0.0000
+vn -0.0000 -0.0000 -1.0000
+vt 0.625000 0.500000
+vt 0.875000 0.500000
+vt 0.875000 0.750000
+vt 0.625000 0.750000
+vt 0.375000 0.750000
+vt 0.625000 1.000000
+vt 0.375000 1.000000
+vt 0.375000 0.000000
+vt 0.625000 0.000000
+vt 0.625000 0.250000
+vt 0.375000 0.250000
+vt 0.125000 0.500000
+vt 0.375000 0.500000
+vt 0.125000 0.750000
+s 0
+usemtl Material
+f 1/1/1 5/2/1 7/3/1 3/4/1
+f 4/5/2 3/4/2 7/6/2 8/7/2
+f 8/8/3 7/9/3 5/10/3 6/11/3
+f 6/12/4 2/13/4 4/5/4 8/14/4
+f 2/13/5 1/1/5 3/4/5 4/5/5
+f 6/11/6 5/10/6 1/1/6 2/13/6
diff --git a/browser_tests/assets/inputs/dynamic_combo.json b/browser_tests/assets/inputs/dynamic_combo.json
new file mode 100644
index 0000000000..26a8d90be1
--- /dev/null
+++ b/browser_tests/assets/inputs/dynamic_combo.json
@@ -0,0 +1,39 @@
+{
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "ResizeImageMaskNode",
+      "pos": [100, 100],
+      "size": [315, 200],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [{ "name": "result", "type": "IMAGE", "links": null }],
+      "properties": {
+        "Node name for S&R": "ResizeImageMaskNode"
+      },
+      "widgets_values": ["scale dimensions", 512, 512, "center", "area"]
+    },
+    {
+      "id": 2,
+      "type": "SaveImage",
+      "pos": [500, 100],
+      "size": [210, 58],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [{ "name": "images", "type": "IMAGE", "link": null }],
+      "properties": {}
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": { "offset": [0, 0], "scale": 1 }
+  },
+  "version": 0.4
+}
diff --git a/browser_tests/assets/linear-basic-app-1.json b/browser_tests/assets/linear-basic-app-1.json
new file mode 100644
index 0000000000..379b6a76da
--- /dev/null
+++ b/browser_tests/assets/linear-basic-app-1.json
@@ -0,0 +1,154 @@
+{
+  "last_node_id": 9,
+  "last_link_id": 9,
+  "nodes": [
+    {
+      "id": 7,
+      "type": "CLIPTextEncode",
+      "pos": [413, 389],
+      "size": [425.27801513671875, 180.6060791015625],
+      "flags": {},
+      "order": 3,
+      "mode": 0,
+      "inputs": [{ "name": "clip", "type": "CLIP", "link": 5 }],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": [6],
+          "slot_index": 0
+        }
+      ],
+      "properties": {},
+      "widgets_values": ["text, watermark"]
+    },
+    {
+      "id": 6,
+      "type": "CLIPTextEncode",
+      "pos": [415, 186],
+      "size": [422.84503173828125, 164.31304931640625],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [{ "name": "clip", "type": "CLIP", "link": 3 }],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": [4],
+          "slot_index": 0
+        }
+      ],
+      "properties": {},
+      "widgets_values": [
+        "beautiful scenery nature glass bottle landscape, , purple galaxy bottle,"
+      ]
+    },
+    {
+      "id": 5,
+      "type": "EmptyLatentImage",
+      "pos": [473, 609],
+      "size": [315, 106],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "outputs": [
+        { "name": "LATENT", "type": "LATENT", "links": [2], "slot_index": 0 }
+      ],
+      "properties": {},
+      "widgets_values": [512, 512, 1]
+    },
+    {
+      "id": 3,
+      "type": "KSampler",
+      "pos": [863, 186],
+      "size": [315, 262],
+      "flags": {},
+      "order": 4,
+      "mode": 0,
+      "inputs": [
+        { "name": "model", "type": "MODEL", "link": 1 },
+        { "name": "positive", "type": "CONDITIONING", "link": 4 },
+        { "name": "negative", "type": "CONDITIONING", "link": 6 },
+        { "name": "latent_image", "type": "LATENT", "link": 2 }
+      ],
+      "outputs": [
+        { "name": "LATENT", "type": "LATENT", "links": [7], "slot_index": 0 }
+      ],
+      "properties": {},
+      "widgets_values": [156680208700286, true, 20, 8, "euler", "normal", 1]
+    },
+    {
+      "id": 8,
+      "type": "VAEDecode",
+      "pos": [1209, 188],
+      "size": [210, 46],
+      "flags": {},
+      "order": 5,
+      "mode": 0,
+      "inputs": [
+        { "name": "samples", "type": "LATENT", "link": 7 },
+        { "name": "vae", "type": "VAE", "link": 8 }
+      ],
+      "outputs": [
+        { "name": "IMAGE", "type": "IMAGE", "links": [9], "slot_index": 0 }
+      ],
+      "properties": {}
+    },
+    {
+      "id": 9,
+      "type": "SaveImage",
+      "pos": [1451, 189],
+      "size": [210, 26],
+      "flags": {},
+      "order": 6,
+      "mode": 0,
+      "inputs": [{ "name": "images", "type": "IMAGE", "link": 9 }],
+      "properties": {}
+    },
+    {
+      "id": 4,
+      "type": "CheckpointLoaderSimple",
+      "pos": [26, 474],
+      "size": [315, 98],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "outputs": [
+        { "name": "MODEL", "type": "MODEL", "links": [1], "slot_index": 0 },
+        { "name": "CLIP", "type": "CLIP", "links": [3, 5], "slot_index": 1 },
+        { "name": "VAE", "type": "VAE", "links": [8], "slot_index": 2 }
+      ],
+      "properties": {},
+      "widgets_values": ["v1-5-pruned-emaonly-fp16.safetensors"]
+    }
+  ],
+  "links": [
+    [1, 4, 0, 3, 0, "MODEL"],
+    [2, 5, 0, 3, 3, "LATENT"],
+    [3, 4, 1, 6, 0, "CLIP"],
+    [4, 6, 0, 3, 1, "CONDITIONING"],
+    [5, 4, 1, 7, 0, "CLIP"],
+    [6, 7, 0, 3, 2, "CONDITIONING"],
+    [7, 3, 0, 8, 0, "LATENT"],
+    [8, 4, 2, 8, 1, "VAE"],
+    [9, 8, 0, 9, 0, "IMAGE"]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    },
+    "linearData": {
+      "inputs": [
+        ["3", "seed"],
+        ["3", "steps"],
+        ["3", "cfg"]
+      ],
+      "outputs": ["9"]
+    }
+  },
+  "version": 0.4
+}
diff --git a/browser_tests/assets/linear-basic-app-2.json b/browser_tests/assets/linear-basic-app-2.json
new file mode 100644
index 0000000000..7abb074194
--- /dev/null
+++ b/browser_tests/assets/linear-basic-app-2.json
@@ -0,0 +1,153 @@
+{
+  "last_node_id": 9,
+  "last_link_id": 9,
+  "nodes": [
+    {
+      "id": 7,
+      "type": "CLIPTextEncode",
+      "pos": [413, 389],
+      "size": [425.27801513671875, 180.6060791015625],
+      "flags": {},
+      "order": 3,
+      "mode": 0,
+      "inputs": [{ "name": "clip", "type": "CLIP", "link": 5 }],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": [6],
+          "slot_index": 0
+        }
+      ],
+      "properties": {},
+      "widgets_values": ["text, watermark"]
+    },
+    {
+      "id": 6,
+      "type": "CLIPTextEncode",
+      "pos": [415, 186],
+      "size": [422.84503173828125, 164.31304931640625],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [{ "name": "clip", "type": "CLIP", "link": 3 }],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": [4],
+          "slot_index": 0
+        }
+      ],
+      "properties": {},
+      "widgets_values": [
+        "beautiful scenery nature glass bottle landscape, , purple galaxy bottle,"
+      ]
+    },
+    {
+      "id": 5,
+      "type": "EmptyLatentImage",
+      "pos": [473, 609],
+      "size": [315, 106],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "outputs": [
+        { "name": "LATENT", "type": "LATENT", "links": [2], "slot_index": 0 }
+      ],
+      "properties": {},
+      "widgets_values": [512, 512, 1]
+    },
+    {
+      "id": 3,
+      "type": "KSampler",
+      "pos": [863, 186],
+      "size": [315, 262],
+      "flags": {},
+      "order": 4,
+      "mode": 0,
+      "inputs": [
+        { "name": "model", "type": "MODEL", "link": 1 },
+        { "name": "positive", "type": "CONDITIONING", "link": 4 },
+        { "name": "negative", "type": "CONDITIONING", "link": 6 },
+        { "name": "latent_image", "type": "LATENT", "link": 2 }
+      ],
+      "outputs": [
+        { "name": "LATENT", "type": "LATENT", "links": [7], "slot_index": 0 }
+      ],
+      "properties": {},
+      "widgets_values": [156680208700286, true, 20, 8, "euler", "normal", 1]
+    },
+    {
+      "id": 8,
+      "type": "VAEDecode",
+      "pos": [1209, 188],
+      "size": [210, 46],
+      "flags": {},
+      "order": 5,
+      "mode": 0,
+      "inputs": [
+        { "name": "samples", "type": "LATENT", "link": 7 },
+        { "name": "vae", "type": "VAE", "link": 8 }
+      ],
+      "outputs": [
+        { "name": "IMAGE", "type": "IMAGE", "links": [9], "slot_index": 0 }
+      ],
+      "properties": {}
+    },
+    {
+      "id": 9,
+      "type": "SaveImage",
+      "pos": [1451, 189],
+      "size": [210, 26],
+      "flags": {},
+      "order": 6,
+      "mode": 0,
+      "inputs": [{ "name": "images", "type": "IMAGE", "link": 9 }],
+      "properties": {}
+    },
+    {
+      "id": 4,
+      "type": "CheckpointLoaderSimple",
+      "pos": [26, 474],
+      "size": [315, 98],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "outputs": [
+        { "name": "MODEL", "type": "MODEL", "links": [1], "slot_index": 0 },
+        { "name": "CLIP", "type": "CLIP", "links": [3, 5], "slot_index": 1 },
+        { "name": "VAE", "type": "VAE", "links": [8], "slot_index": 2 }
+      ],
+      "properties": {},
+      "widgets_values": ["v1-5-pruned-emaonly-fp16.safetensors"]
+    }
+  ],
+  "links": [
+    [1, 4, 0, 3, 0, "MODEL"],
+    [2, 5, 0, 3, 3, "LATENT"],
+    [3, 4, 1, 6, 0, "CLIP"],
+    [4, 6, 0, 3, 1, "CONDITIONING"],
+    [5, 4, 1, 7, 0, "CLIP"],
+    [6, 7, 0, 3, 2, "CONDITIONING"],
+    [7, 3, 0, 8, 0, "LATENT"],
+    [8, 4, 2, 8, 1, "VAE"],
+    [9, 8, 0, 9, 0, "IMAGE"]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    },
+    "linearData": {
+      "inputs": [
+        ["3", "seed"],
+        ["3", "steps"]
+      ],
+      "outputs": ["9"]
+    }
+  },
+  "version": 0.4
+}
diff --git a/browser_tests/assets/missing/missing_media_bypassed.json b/browser_tests/assets/missing/missing_media_bypassed.json
new file mode 100644
index 0000000000..4bb7267409
--- /dev/null
+++ b/browser_tests/assets/missing/missing_media_bypassed.json
@@ -0,0 +1,34 @@
+{
+  "last_node_id": 10,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 10,
+      "type": "LoadImage",
+      "pos": [50, 200],
+      "size": [315, 314],
+      "flags": {},
+      "order": 0,
+      "mode": 4,
+      "inputs": [],
+      "outputs": [
+        { "name": "IMAGE", "type": "IMAGE", "links": null },
+        { "name": "MASK", "type": "MASK", "links": null }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadImage"
+      },
+      "widgets_values": ["nonexistent_test_image_12345.png", "image"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}
diff --git a/browser_tests/assets/missing/missing_media_multiple.json b/browser_tests/assets/missing/missing_media_multiple.json
new file mode 100644
index 0000000000..9b0fb1a297
--- /dev/null
+++ b/browser_tests/assets/missing/missing_media_multiple.json
@@ -0,0 +1,68 @@
+{
+  "last_node_id": 12,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 10,
+      "type": "LoadImage",
+      "pos": [50, 200],
+      "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": ["nonexistent_test_image_aaa.png", "image"]
+    },
+    {
+      "id": 11,
+      "type": "LoadImage",
+      "pos": [450, 200],
+      "size": [315, 314],
+      "flags": {},
+      "order": 1,
+      "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": ["nonexistent_test_image_bbb.png", "image"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}
diff --git a/browser_tests/assets/missing/missing_media_single.json b/browser_tests/assets/missing/missing_media_single.json
new file mode 100644
index 0000000000..da91c64bd1
--- /dev/null
+++ b/browser_tests/assets/missing/missing_media_single.json
@@ -0,0 +1,42 @@
+{
+  "last_node_id": 10,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 10,
+      "type": "LoadImage",
+      "pos": [50, 200],
+      "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": ["nonexistent_test_image_12345.png", "image"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}
diff --git a/browser_tests/assets/missing/missing_models.json b/browser_tests/assets/missing/missing_models.json
index c4a8d5a0d4..eef6a66ab3 100644
--- a/browser_tests/assets/missing/missing_models.json
+++ b/browser_tests/assets/missing/missing_models.json
@@ -1,7 +1,27 @@
 {
-  "last_node_id": 0,
+  "last_node_id": 1,
   "last_link_id": 0,
-  "nodes": [],
+  "nodes": [
+    {
+      "id": 1,
+      "type": "CheckpointLoaderSimple",
+      "pos": [256, 256],
+      "size": [315, 98],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        { "name": "MODEL", "type": "MODEL", "links": null },
+        { "name": "CLIP", "type": "CLIP", "links": null },
+        { "name": "VAE", "type": "VAE", "links": null }
+      ],
+      "properties": {
+        "Node name for S&R": "CheckpointLoaderSimple"
+      },
+      "widgets_values": ["fake_model.safetensors"]
+    }
+  ],
   "links": [],
   "groups": [],
   "config": {},
@@ -15,7 +35,7 @@
     {
       "name": "fake_model.safetensors",
       "url": "http://localhost:8188/api/devtools/fake_model.safetensors",
-      "directory": "text_encoders"
+      "directory": "checkpoints"
     }
   ],
   "version": 0.4
diff --git a/browser_tests/assets/missing/missing_models_bypassed.json b/browser_tests/assets/missing/missing_models_bypassed.json
new file mode 100644
index 0000000000..8ade47403c
--- /dev/null
+++ b/browser_tests/assets/missing/missing_models_bypassed.json
@@ -0,0 +1,42 @@
+{
+  "last_node_id": 1,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "CheckpointLoaderSimple",
+      "pos": [256, 256],
+      "size": [315, 98],
+      "flags": {},
+      "order": 0,
+      "mode": 4,
+      "inputs": [],
+      "outputs": [
+        { "name": "MODEL", "type": "MODEL", "links": null },
+        { "name": "CLIP", "type": "CLIP", "links": null },
+        { "name": "VAE", "type": "VAE", "links": null }
+      ],
+      "properties": {
+        "Node name for S&R": "CheckpointLoaderSimple"
+      },
+      "widgets_values": ["fake_model.safetensors"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    }
+  },
+  "models": [
+    {
+      "name": "fake_model.safetensors",
+      "url": "http://localhost:8188/api/devtools/fake_model.safetensors",
+      "directory": "checkpoints"
+    }
+  ],
+  "version": 0.4
+}
diff --git a/browser_tests/assets/missing/missing_models_distinct.json b/browser_tests/assets/missing/missing_models_distinct.json
new file mode 100644
index 0000000000..d7a9c703fc
--- /dev/null
+++ b/browser_tests/assets/missing/missing_models_distinct.json
@@ -0,0 +1,66 @@
+{
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "CheckpointLoaderSimple",
+      "pos": [100, 100],
+      "size": [400, 200],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        { "name": "MODEL", "type": "MODEL", "links": null },
+        { "name": "CLIP", "type": "CLIP", "links": null },
+        { "name": "VAE", "type": "VAE", "links": null }
+      ],
+      "properties": {
+        "Node name for S&R": "CheckpointLoaderSimple"
+      },
+      "widgets_values": ["fake_model_a.safetensors"]
+    },
+    {
+      "id": 2,
+      "type": "CheckpointLoaderSimple",
+      "pos": [500, 100],
+      "size": [400, 200],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        { "name": "MODEL", "type": "MODEL", "links": null },
+        { "name": "CLIP", "type": "CLIP", "links": null },
+        { "name": "VAE", "type": "VAE", "links": null }
+      ],
+      "properties": {
+        "Node name for S&R": "CheckpointLoaderSimple"
+      },
+      "widgets_values": ["fake_model_b.safetensors"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    }
+  },
+  "models": [
+    {
+      "name": "fake_model_a.safetensors",
+      "url": "http://localhost:8188/api/devtools/fake_model.safetensors",
+      "directory": "checkpoints"
+    },
+    {
+      "name": "fake_model_b.safetensors",
+      "url": "http://localhost:8188/api/devtools/fake_model.safetensors",
+      "directory": "checkpoints"
+    }
+  ],
+  "version": 0.4
+}
diff --git a/browser_tests/assets/missing/missing_models_from_node_properties.json b/browser_tests/assets/missing/missing_models_from_node_properties.json
index b1a8e5a672..a40cd543c8 100644
--- a/browser_tests/assets/missing/missing_models_from_node_properties.json
+++ b/browser_tests/assets/missing/missing_models_from_node_properties.json
@@ -34,7 +34,7 @@
           {
             "name": "fake_model.safetensors",
             "url": "http://localhost:8188/api/devtools/fake_model.safetensors",
-            "directory": "text_encoders"
+            "directory": "checkpoints"
           }
         ]
       },
diff --git a/browser_tests/assets/missing/missing_models_in_bypassed_subgraph.json b/browser_tests/assets/missing/missing_models_in_bypassed_subgraph.json
new file mode 100644
index 0000000000..8b812c96a7
--- /dev/null
+++ b/browser_tests/assets/missing/missing_models_in_bypassed_subgraph.json
@@ -0,0 +1,141 @@
+{
+  "id": "test-missing-models-in-bypassed-subgraph",
+  "revision": 0,
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "KSampler",
+      "pos": [100, 100],
+      "size": [400, 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": [] }],
+      "properties": {
+        "Node name for S&R": "KSampler"
+      },
+      "widgets_values": [0, "randomize", 20, 8, "euler", "simple", 1]
+    },
+    {
+      "id": 2,
+      "type": "subgraph-with-missing-model",
+      "pos": [450, 100],
+      "size": [400, 200],
+      "flags": {},
+      "order": 0,
+      "mode": 4,
+      "inputs": [{ "name": "model", "type": "MODEL", "link": null }],
+      "outputs": [{ "name": "MODEL", "type": "MODEL", "links": null }],
+      "properties": {},
+      "widgets_values": []
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "subgraph-with-missing-model",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 1,
+          "lastLinkId": 2,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Subgraph with Missing Model",
+        "inputNode": {
+          "id": -10,
+          "bounding": [100, 200, 120, 60]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [500, 200, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "input1-id",
+            "name": "model",
+            "type": "MODEL",
+            "linkIds": [1],
+            "pos": { "0": 150, "1": 220 }
+          }
+        ],
+        "outputs": [
+          {
+            "id": "output1-id",
+            "name": "MODEL",
+            "type": "MODEL",
+            "linkIds": [2],
+            "pos": { "0": 520, "1": 220 }
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 1,
+            "type": "CheckpointLoaderSimple",
+            "pos": [250, 180],
+            "size": [400, 200],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [],
+            "outputs": [
+              { "name": "MODEL", "type": "MODEL", "links": [2] },
+              { "name": "CLIP", "type": "CLIP", "links": null },
+              { "name": "VAE", "type": "VAE", "links": null }
+            ],
+            "properties": {
+              "Node name for S&R": "CheckpointLoaderSimple"
+            },
+            "widgets_values": ["fake_model.safetensors"]
+          }
+        ],
+        "links": [
+          {
+            "id": 1,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 1,
+            "target_slot": 0,
+            "type": "MODEL"
+          },
+          {
+            "id": 2,
+            "origin_id": 1,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "MODEL"
+          }
+        ]
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    }
+  },
+  "models": [
+    {
+      "name": "fake_model.safetensors",
+      "url": "http://localhost:8188/api/devtools/fake_model.safetensors",
+      "directory": "checkpoints"
+    }
+  ],
+  "version": 0.4
+}
diff --git a/browser_tests/assets/missing/missing_models_in_subgraph.json b/browser_tests/assets/missing/missing_models_in_subgraph.json
new file mode 100644
index 0000000000..613fa77be8
--- /dev/null
+++ b/browser_tests/assets/missing/missing_models_in_subgraph.json
@@ -0,0 +1,141 @@
+{
+  "id": "test-missing-models-in-subgraph",
+  "revision": 0,
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "KSampler",
+      "pos": [100, 100],
+      "size": [270, 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": [] }],
+      "properties": {
+        "Node name for S&R": "KSampler"
+      },
+      "widgets_values": [0, "randomize", 20, 8, "euler", "simple", 1]
+    },
+    {
+      "id": 2,
+      "type": "subgraph-with-missing-model",
+      "pos": [450, 100],
+      "size": [400, 200],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [{ "name": "model", "type": "MODEL", "link": null }],
+      "outputs": [{ "name": "MODEL", "type": "MODEL", "links": null }],
+      "properties": {},
+      "widgets_values": []
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "subgraph-with-missing-model",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 1,
+          "lastLinkId": 2,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Subgraph with Missing Model",
+        "inputNode": {
+          "id": -10,
+          "bounding": [100, 200, 120, 60]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [500, 200, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "input1-id",
+            "name": "model",
+            "type": "MODEL",
+            "linkIds": [1],
+            "pos": { "0": 150, "1": 220 }
+          }
+        ],
+        "outputs": [
+          {
+            "id": "output1-id",
+            "name": "MODEL",
+            "type": "MODEL",
+            "linkIds": [2],
+            "pos": { "0": 520, "1": 220 }
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 1,
+            "type": "CheckpointLoaderSimple",
+            "pos": [250, 180],
+            "size": [315, 98],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [],
+            "outputs": [
+              { "name": "MODEL", "type": "MODEL", "links": [2] },
+              { "name": "CLIP", "type": "CLIP", "links": null },
+              { "name": "VAE", "type": "VAE", "links": null }
+            ],
+            "properties": {
+              "Node name for S&R": "CheckpointLoaderSimple"
+            },
+            "widgets_values": ["fake_model.safetensors"]
+          }
+        ],
+        "links": [
+          {
+            "id": 1,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 1,
+            "target_slot": 0,
+            "type": "MODEL"
+          },
+          {
+            "id": 2,
+            "origin_id": 1,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "MODEL"
+          }
+        ]
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    }
+  },
+  "models": [
+    {
+      "name": "fake_model.safetensors",
+      "url": "http://localhost:8188/api/devtools/fake_model.safetensors",
+      "directory": "checkpoints"
+    }
+  ],
+  "version": 0.4
+}
diff --git a/browser_tests/assets/missing/missing_models_with_nodes.json b/browser_tests/assets/missing/missing_models_with_nodes.json
new file mode 100644
index 0000000000..3f2a8de9d0
--- /dev/null
+++ b/browser_tests/assets/missing/missing_models_with_nodes.json
@@ -0,0 +1,85 @@
+{
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "CheckpointLoaderSimple",
+      "pos": [100, 100],
+      "size": [315, 98],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "MODEL",
+          "type": "MODEL",
+          "links": null
+        },
+        {
+          "name": "CLIP",
+          "type": "CLIP",
+          "links": null
+        },
+        {
+          "name": "VAE",
+          "type": "VAE",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CheckpointLoaderSimple"
+      },
+      "widgets_values": ["fake_model.safetensors"]
+    },
+    {
+      "id": 2,
+      "type": "CheckpointLoaderSimple",
+      "pos": [500, 100],
+      "size": [315, 98],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "MODEL",
+          "type": "MODEL",
+          "links": null
+        },
+        {
+          "name": "CLIP",
+          "type": "CLIP",
+          "links": null
+        },
+        {
+          "name": "VAE",
+          "type": "VAE",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CheckpointLoaderSimple"
+      },
+      "widgets_values": ["fake_model.safetensors"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    }
+  },
+  "models": [
+    {
+      "name": "fake_model.safetensors",
+      "url": "http://localhost:8188/api/devtools/fake_model.safetensors",
+      "directory": "checkpoints"
+    }
+  ],
+  "version": 0.4
+}
diff --git a/browser_tests/assets/missing/missing_nodes_and_media.json b/browser_tests/assets/missing/missing_nodes_and_media.json
new file mode 100644
index 0000000000..c0b38b0a67
--- /dev/null
+++ b/browser_tests/assets/missing/missing_nodes_and_media.json
@@ -0,0 +1,72 @@
+{
+  "last_node_id": 10,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "UNKNOWN NODE",
+      "pos": [48, 86],
+      "size": [358, 314],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "image",
+          "type": "IMAGE",
+          "link": null,
+          "slot_index": 0
+        }
+      ],
+      "outputs": [
+        {
+          "name": "STRING",
+          "type": "STRING",
+          "links": [],
+          "slot_index": 0,
+          "shape": 6
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "UNKNOWN NODE"
+      },
+      "widgets_values": ["wd-v1-4-moat-tagger-v2", 0.35, 0.85, false, false, ""]
+    },
+    {
+      "id": 10,
+      "type": "LoadImage",
+      "pos": [450, 86],
+      "size": [315, 314],
+      "flags": {},
+      "order": 1,
+      "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": ["nonexistent_test_image_12345.png", "image"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}
diff --git a/browser_tests/assets/nodes/api_workflow_with_missing_nodes.json b/browser_tests/assets/nodes/api_workflow_with_missing_nodes.json
new file mode 100644
index 0000000000..8279c39147
--- /dev/null
+++ b/browser_tests/assets/nodes/api_workflow_with_missing_nodes.json
@@ -0,0 +1,30 @@
+{
+  "1": {
+    "class_type": "KSampler",
+    "inputs": {
+      "seed": 42,
+      "steps": 20,
+      "cfg": 8.0,
+      "sampler_name": "euler",
+      "scheduler": "normal",
+      "denoise": 1.0
+    },
+    "_meta": { "title": "KSampler" }
+  },
+  "2": {
+    "class_type": "NonExistentCustomNode_XYZ_12345",
+    "inputs": {
+      "input1": "test"
+    },
+    "_meta": { "title": "Missing Node" }
+  },
+  "3": {
+    "class_type": "EmptyLatentImage",
+    "inputs": {
+      "width": 512,
+      "height": 512,
+      "batch_size": 1
+    },
+    "_meta": { "title": "Empty Latent Image" }
+  }
+}
diff --git a/browser_tests/assets/subgraphs/basic-subgraph-zero-uuid.json b/browser_tests/assets/subgraphs/basic-subgraph-zero-uuid.json
new file mode 100644
index 0000000000..b03ec92276
--- /dev/null
+++ b/browser_tests/assets/subgraphs/basic-subgraph-zero-uuid.json
@@ -0,0 +1,197 @@
+{
+  "id": "00000000-0000-0000-0000-000000000000",
+  "revision": 0,
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 2,
+      "type": "e5fb1765-9323-4548-801a-5aead34d879e",
+      "pos": [627.5973510742188, 423.0972900390625],
+      "size": [144.15234375, 46],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": null
+        }
+      ],
+      "properties": {},
+      "widgets_values": []
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "e5fb1765-9323-4548-801a-5aead34d879e",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 2,
+          "lastLinkId": 4,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "New Subgraph",
+        "inputNode": {
+          "id": -10,
+          "bounding": [347.90441582814213, 417.3822440655296, 120, 60]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [892.5973510742188, 416.0972900390625, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "c5cc99d8-a2b6-4bf3-8be7-d4949ef736cd",
+            "name": "positive",
+            "type": "CONDITIONING",
+            "linkIds": [1],
+            "pos": {
+              "0": 447.9044189453125,
+              "1": 437.3822326660156
+            }
+          }
+        ],
+        "outputs": [
+          {
+            "id": "9bd488b9-e907-4c95-a7a4-85c5597a87af",
+            "name": "LATENT",
+            "type": "LATENT",
+            "linkIds": [2],
+            "pos": {
+              "0": 912.5973510742188,
+              "1": 436.0972900390625
+            }
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 1,
+            "type": "KSampler",
+            "pos": [554.8743286132812, 100.95539093017578],
+            "size": [270, 262],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "model",
+                "name": "model",
+                "type": "MODEL",
+                "link": null
+              },
+              {
+                "localized_name": "positive",
+                "name": "positive",
+                "type": "CONDITIONING",
+                "link": 1
+              },
+              {
+                "localized_name": "negative",
+                "name": "negative",
+                "type": "CONDITIONING",
+                "link": null
+              },
+              {
+                "localized_name": "latent_image",
+                "name": "latent_image",
+                "type": "LATENT",
+                "link": null
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "LATENT",
+                "name": "LATENT",
+                "type": "LATENT",
+                "links": [2]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "KSampler"
+            },
+            "widgets_values": [0, "randomize", 20, 8, "euler", "simple", 1]
+          },
+          {
+            "id": 2,
+            "type": "VAEEncode",
+            "pos": [685.1265869140625, 439.1734619140625],
+            "size": [140, 46],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "pixels",
+                "name": "pixels",
+                "type": "IMAGE",
+                "link": null
+              },
+              {
+                "localized_name": "vae",
+                "name": "vae",
+                "type": "VAE",
+                "link": null
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "LATENT",
+                "name": "LATENT",
+                "type": "LATENT",
+                "links": [4]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "VAEEncode"
+            }
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 1,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 1,
+            "target_slot": 1,
+            "type": "CONDITIONING"
+          },
+          {
+            "id": 2,
+            "origin_id": 1,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "LATENT"
+          }
+        ],
+        "extra": {}
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 0.8894351682943402,
+      "offset": [58.7671207025881, 137.7124650620126]
+    },
+    "frontendVersion": "1.24.1"
+  },
+  "version": 0.4
+}
diff --git a/browser_tests/assets/subgraphs/subgraph-multi-instance-promoted-text-values.json b/browser_tests/assets/subgraphs/subgraph-multi-instance-promoted-text-values.json
new file mode 100644
index 0000000000..459cc73c32
--- /dev/null
+++ b/browser_tests/assets/subgraphs/subgraph-multi-instance-promoted-text-values.json
@@ -0,0 +1,284 @@
+{
+  "id": "2f54e2f0-6db4-4bdf-84a8-9c3ea3ec0123",
+  "revision": 0,
+  "last_node_id": 13,
+  "last_link_id": 9,
+  "nodes": [
+    {
+      "id": 11,
+      "type": "422723e8-4bf6-438c-823f-881ca81acead",
+      "pos": [120, 180],
+      "size": [210, 168],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        { "name": "clip", "type": "CLIP", "link": null },
+        { "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": [],
+      "properties": {},
+      "widgets_values": ["Alpha\n"]
+    },
+    {
+      "id": 12,
+      "type": "422723e8-4bf6-438c-823f-881ca81acead",
+      "pos": [420, 180],
+      "size": [210, 168],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        { "name": "clip", "type": "CLIP", "link": null },
+        { "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": [],
+      "properties": {},
+      "widgets_values": ["Beta\n"]
+    },
+    {
+      "id": 13,
+      "type": "422723e8-4bf6-438c-823f-881ca81acead",
+      "pos": [720, 180],
+      "size": [210, 168],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        { "name": "clip", "type": "CLIP", "link": null },
+        { "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": [],
+      "properties": {},
+      "widgets_values": ["Gamma\n"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "422723e8-4bf6-438c-823f-881ca81acead",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 11,
+          "lastLinkId": 15,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "New Subgraph",
+        "inputNode": {
+          "id": -10,
+          "bounding": [481.59912109375, 379.13336181640625, 120, 160]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [1121.59912109375, 379.13336181640625, 120, 40]
+        },
+        "inputs": [
+          {
+            "id": "0f07c10e-5705-4764-9b24-b69606c6dbcc",
+            "name": "text",
+            "type": "STRING",
+            "linkIds": [10],
+            "pos": { "0": 581.59912109375, "1": 399.13336181640625 }
+          },
+          {
+            "id": "214a5060-24dd-4299-ab78-8027dc5b9c59",
+            "name": "clip",
+            "type": "CLIP",
+            "linkIds": [11],
+            "pos": { "0": 581.59912109375, "1": 419.13336181640625 }
+          },
+          {
+            "id": "8ab94c5d-e7df-433c-9177-482a32340552",
+            "name": "model",
+            "type": "MODEL",
+            "linkIds": [12],
+            "pos": { "0": 581.59912109375, "1": 439.13336181640625 }
+          },
+          {
+            "id": "8a4cd719-8c67-473b-9b44-ac0582d02641",
+            "name": "positive",
+            "type": "CONDITIONING",
+            "linkIds": [13],
+            "pos": { "0": 581.59912109375, "1": 459.13336181640625 }
+          },
+          {
+            "id": "a78d6b3a-ad40-4300-b0a5-2cdbdb8dc135",
+            "name": "negative",
+            "type": "CONDITIONING",
+            "linkIds": [14],
+            "pos": { "0": 581.59912109375, "1": 479.13336181640625 }
+          },
+          {
+            "id": "4c7abe0c-902d-49ef-a5b0-cbf02b50b693",
+            "name": "latent_image",
+            "type": "LATENT",
+            "linkIds": [15],
+            "pos": { "0": 581.59912109375, "1": 499.13336181640625 }
+          }
+        ],
+        "outputs": [],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 10,
+            "type": "CLIPTextEncode",
+            "pos": [661.59912109375, 314.13336181640625],
+            "size": [400, 200],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "clip",
+                "name": "clip",
+                "type": "CLIP",
+                "link": 11
+              },
+              {
+                "localized_name": "text",
+                "name": "text",
+                "type": "STRING",
+                "widget": { "name": "text" },
+                "link": 10
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "CONDITIONING",
+                "name": "CONDITIONING",
+                "type": "CONDITIONING",
+                "links": null
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "CLIPTextEncode"
+            },
+            "widgets_values": [""]
+          },
+          {
+            "id": 11,
+            "type": "KSampler",
+            "pos": [674.1234741210938, 570.5839233398438],
+            "size": [270, 262],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "model",
+                "name": "model",
+                "type": "MODEL",
+                "link": 12
+              },
+              {
+                "localized_name": "positive",
+                "name": "positive",
+                "type": "CONDITIONING",
+                "link": 13
+              },
+              {
+                "localized_name": "negative",
+                "name": "negative",
+                "type": "CONDITIONING",
+                "link": 14
+              },
+              {
+                "localized_name": "latent_image",
+                "name": "latent_image",
+                "type": "LATENT",
+                "link": 15
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "LATENT",
+                "name": "LATENT",
+                "type": "LATENT",
+                "links": null
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "KSampler"
+            },
+            "widgets_values": [0, "randomize", 20, 8, "euler", "simple", 1]
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 10,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 10,
+            "target_slot": 1,
+            "type": "STRING"
+          },
+          {
+            "id": 11,
+            "origin_id": -10,
+            "origin_slot": 1,
+            "target_id": 10,
+            "target_slot": 0,
+            "type": "CLIP"
+          },
+          {
+            "id": 12,
+            "origin_id": -10,
+            "origin_slot": 2,
+            "target_id": 11,
+            "target_slot": 0,
+            "type": "MODEL"
+          },
+          {
+            "id": 13,
+            "origin_id": -10,
+            "origin_slot": 3,
+            "target_id": 11,
+            "target_slot": 1,
+            "type": "CONDITIONING"
+          },
+          {
+            "id": 14,
+            "origin_id": -10,
+            "origin_slot": 4,
+            "target_id": 11,
+            "target_slot": 2,
+            "type": "CONDITIONING"
+          },
+          {
+            "id": 15,
+            "origin_id": -10,
+            "origin_slot": 5,
+            "target_id": 11,
+            "target_slot": 3,
+            "type": "LATENT"
+          }
+        ],
+        "extra": {}
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    },
+    "frontendVersion": "1.24.1"
+  },
+  "version": 0.4
+}
diff --git a/browser_tests/assets/subgraphs/subgraph-with-collapsed-node.json b/browser_tests/assets/subgraphs/subgraph-with-collapsed-node.json
new file mode 100644
index 0000000000..f0834404f4
--- /dev/null
+++ b/browser_tests/assets/subgraphs/subgraph-with-collapsed-node.json
@@ -0,0 +1,197 @@
+{
+  "id": "fe4562c0-3a0b-4614-bdec-7039a58d75b8",
+  "revision": 0,
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 2,
+      "type": "e5fb1765-9323-4548-801a-5aead34d879e",
+      "pos": [627.5973510742188, 423.0972900390625],
+      "size": [400, 200],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": null
+        }
+      ],
+      "properties": {},
+      "widgets_values": []
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "e5fb1765-9323-4548-801a-5aead34d879e",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 2,
+          "lastLinkId": 4,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "New Subgraph",
+        "inputNode": {
+          "id": -10,
+          "bounding": [347.90441582814213, 417.3822440655296, 120, 60]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [892.5973510742188, 416.0972900390625, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "c5cc99d8-a2b6-4bf3-8be7-d4949ef736cd",
+            "name": "positive",
+            "type": "CONDITIONING",
+            "linkIds": [1],
+            "pos": {
+              "0": 447.9044189453125,
+              "1": 437.3822326660156
+            }
+          }
+        ],
+        "outputs": [
+          {
+            "id": "9bd488b9-e907-4c95-a7a4-85c5597a87af",
+            "name": "LATENT",
+            "type": "LATENT",
+            "linkIds": [2],
+            "pos": {
+              "0": 912.5973510742188,
+              "1": 436.0972900390625
+            }
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 1,
+            "type": "KSampler",
+            "pos": [554.8743286132812, 100.95539093017578],
+            "size": [270, 262],
+            "flags": { "collapsed": true },
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "model",
+                "name": "model",
+                "type": "MODEL",
+                "link": null
+              },
+              {
+                "localized_name": "positive",
+                "name": "positive",
+                "type": "CONDITIONING",
+                "link": 1
+              },
+              {
+                "localized_name": "negative",
+                "name": "negative",
+                "type": "CONDITIONING",
+                "link": null
+              },
+              {
+                "localized_name": "latent_image",
+                "name": "latent_image",
+                "type": "LATENT",
+                "link": null
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "LATENT",
+                "name": "LATENT",
+                "type": "LATENT",
+                "links": [2]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "KSampler"
+            },
+            "widgets_values": [0, "randomize", 20, 8, "euler", "simple", 1]
+          },
+          {
+            "id": 2,
+            "type": "VAEEncode",
+            "pos": [685.1265869140625, 439.1734619140625],
+            "size": [140, 46],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "pixels",
+                "name": "pixels",
+                "type": "IMAGE",
+                "link": null
+              },
+              {
+                "localized_name": "vae",
+                "name": "vae",
+                "type": "VAE",
+                "link": null
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "LATENT",
+                "name": "LATENT",
+                "type": "LATENT",
+                "links": [4]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "VAEEncode"
+            }
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 1,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 1,
+            "target_slot": 1,
+            "type": "CONDITIONING"
+          },
+          {
+            "id": 2,
+            "origin_id": 1,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "LATENT"
+          }
+        ],
+        "extra": {}
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 0.8894351682943402,
+      "offset": [58.7671207025881, 137.7124650620126]
+    },
+    "frontendVersion": "1.24.1"
+  },
+  "version": 0.4
+}
diff --git a/browser_tests/assets/test_upload_image.png b/browser_tests/assets/test_upload_image.png
new file mode 100644
index 0000000000..32fe19d805
Binary files /dev/null and b/browser_tests/assets/test_upload_image.png differ
diff --git a/browser_tests/assets/widgets/image_crop_widget.json b/browser_tests/assets/widgets/image_crop_widget.json
new file mode 100644
index 0000000000..4f8a5ccbce
--- /dev/null
+++ b/browser_tests/assets/widgets/image_crop_widget.json
@@ -0,0 +1,43 @@
+{
+  "last_node_id": 1,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "ImageCropV2",
+      "pos": [50, 50],
+      "size": [400, 550],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "image",
+          "type": "IMAGE",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "ImageCropV2"
+      },
+      "widgets_values": [{ "x": 0, "y": 0, "width": 512, "height": 512 }]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}
diff --git a/browser_tests/assets/widgets/image_crop_with_source.json b/browser_tests/assets/widgets/image_crop_with_source.json
new file mode 100644
index 0000000000..364eb80499
--- /dev/null
+++ b/browser_tests/assets/widgets/image_crop_with_source.json
@@ -0,0 +1,100 @@
+{
+  "last_node_id": 3,
+  "last_link_id": 2,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "LoadImage",
+      "pos": [50, 50],
+      "size": [315, 314],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [1]
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadImage"
+      },
+      "widgets_values": ["example.png", "image"]
+    },
+    {
+      "id": 2,
+      "type": "ImageCropV2",
+      "pos": [450, 50],
+      "size": [400, 500],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "image",
+          "type": "IMAGE",
+          "link": 1
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [2]
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "ImageCropV2"
+      },
+      "widgets_values": [
+        {
+          "x": 10,
+          "y": 10,
+          "width": 100,
+          "height": 100
+        }
+      ]
+    },
+    {
+      "id": 3,
+      "type": "PreviewImage",
+      "pos": [900, 50],
+      "size": [315, 270],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 2
+        }
+      ],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "PreviewImage"
+      },
+      "widgets_values": []
+    }
+  ],
+  "links": [
+    [1, 1, 0, 2, 0, "IMAGE"],
+    [2, 2, 0, 3, 0, "IMAGE"]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}
diff --git a/browser_tests/fixtures/ComfyMouse.ts b/browser_tests/fixtures/ComfyMouse.ts
index dfb0281eb6..9f5b757518 100644
--- a/browser_tests/fixtures/ComfyMouse.ts
+++ b/browser_tests/fixtures/ComfyMouse.ts
@@ -1,7 +1,7 @@
 import type { Mouse } from '@playwright/test'
 
-import type { ComfyPage } from './ComfyPage'
-import type { Position } from './types'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import type { Position } from '@e2e/fixtures/types'
 
 /**
  * Used for drag and drop ops
@@ -26,11 +26,10 @@ export class ComfyMouse implements Omit<Mouse, 'move'> {
   static defaultSteps = 5
   static defaultOptions: DragOptions = { steps: ComfyMouse.defaultSteps }
 
-  constructor(readonly comfyPage: ComfyPage) {}
+  readonly mouse: Mouse
 
-  /** The normal Playwright {@link Mouse} property from {@link ComfyPage.page}. */
-  get mouse() {
-    return this.comfyPage.page.mouse
+  constructor(readonly comfyPage: ComfyPage) {
+    this.mouse = comfyPage.page.mouse
   }
 
   async nextFrame() {
diff --git a/browser_tests/fixtures/ComfyPage.ts b/browser_tests/fixtures/ComfyPage.ts
index b9a9806b55..20950b8dbf 100644
--- a/browser_tests/fixtures/ComfyPage.ts
+++ b/browser_tests/fixtures/ComfyPage.ts
@@ -1,46 +1,53 @@
-import type {
-  APIRequestContext,
-  ExpectMatcherState,
-  Locator,
-  Page
-} from '@playwright/test'
-import { test as base, expect } from '@playwright/test'
+import type { APIRequestContext, Locator, Page } from '@playwright/test'
+import { test as base } from '@playwright/test'
 import { config as dotenvConfig } from 'dotenv'
+import MCR from 'monocart-coverage-reports'
 
-import { TestIds } from './selectors'
-import { NodeBadgeMode } from '../../src/types/nodeSource'
-import { ComfyActionbar } from '../helpers/actionbar'
-import { ComfyTemplates } from '../helpers/templates'
-import { ComfyMouse } from './ComfyMouse'
-import { VueNodeHelpers } from './VueNodeHelpers'
-import { ComfyNodeSearchBox } from './components/ComfyNodeSearchBox'
-import { ComfyNodeSearchBoxV2 } from './components/ComfyNodeSearchBoxV2'
-import { ContextMenu } from './components/ContextMenu'
-import { SettingDialog } from './components/SettingDialog'
-import { BottomPanel } from './components/BottomPanel'
+import { NodeBadgeMode } from '@/types/nodeSource'
+import { ComfyActionbar } from '@e2e/helpers/actionbar'
+import { ComfyTemplates } from '@e2e/helpers/templates'
+import { ComfyMouse } from '@e2e/fixtures/ComfyMouse'
+import { TestIds } from '@e2e/fixtures/selectors'
+import { comfyExpect } from '@e2e/fixtures/utils/customMatchers'
+import { assetPath } from '@e2e/fixtures/utils/paths'
+import { nextFrame, sleep } from '@e2e/fixtures/utils/timing'
+import { VueNodeHelpers } from '@e2e/fixtures/VueNodeHelpers'
+import { BottomPanel } from '@e2e/fixtures/components/BottomPanel'
+import { ComfyNodeSearchBox } from '@e2e/fixtures/components/ComfyNodeSearchBox'
+import { ComfyNodeSearchBoxV2 } from '@e2e/fixtures/components/ComfyNodeSearchBoxV2'
+import { ConfirmDialog } from '@e2e/fixtures/components/ConfirmDialog'
+import { ContextMenu } from '@e2e/fixtures/components/ContextMenu'
+import { MediaLightbox } from '@e2e/fixtures/components/MediaLightbox'
+import { QueuePanel } from '@e2e/fixtures/components/QueuePanel'
+import { SettingDialog } from '@e2e/fixtures/components/SettingDialog'
+import { TemplatesDialog } from '@e2e/fixtures/components/TemplatesDialog'
 import {
   AssetsSidebarTab,
+  ModelLibrarySidebarTab,
   NodeLibrarySidebarTab,
+  NodeLibrarySidebarTabV2,
   WorkflowsSidebarTab
-} from './components/SidebarTab'
-import { Topbar } from './components/Topbar'
-import { AssetsHelper } from './helpers/AssetsHelper'
-import { CanvasHelper } from './helpers/CanvasHelper'
-import { PerformanceHelper } from './helpers/PerformanceHelper'
-import { QueueHelper } from './helpers/QueueHelper'
-import { ClipboardHelper } from './helpers/ClipboardHelper'
-import { CommandHelper } from './helpers/CommandHelper'
-import { DragDropHelper } from './helpers/DragDropHelper'
-import { FeatureFlagHelper } from './helpers/FeatureFlagHelper'
-import { KeyboardHelper } from './helpers/KeyboardHelper'
-import { NodeOperationsHelper } from './helpers/NodeOperationsHelper'
-import { SettingsHelper } from './helpers/SettingsHelper'
-import { AppModeHelper } from './helpers/AppModeHelper'
-import { SubgraphHelper } from './helpers/SubgraphHelper'
-import { ToastHelper } from './helpers/ToastHelper'
-import { WorkflowHelper } from './helpers/WorkflowHelper'
-import type { NodeReference } from './utils/litegraphUtils'
-import type { WorkspaceStore } from '../types/globals'
+} from '@e2e/fixtures/components/SidebarTab'
+import { Topbar } from '@e2e/fixtures/components/Topbar'
+import { AppModeHelper } from '@e2e/fixtures/helpers/AppModeHelper'
+import type { AssetHelper } from '@e2e/fixtures/helpers/AssetHelper'
+import { createAssetHelper } from '@e2e/fixtures/helpers/AssetHelper'
+import { AssetsHelper } from '@e2e/fixtures/helpers/AssetsHelper'
+import { CanvasHelper } from '@e2e/fixtures/helpers/CanvasHelper'
+import { ClipboardHelper } from '@e2e/fixtures/helpers/ClipboardHelper'
+import { CloudAuthHelper } from '@e2e/fixtures/helpers/CloudAuthHelper'
+import { CommandHelper } from '@e2e/fixtures/helpers/CommandHelper'
+import { DragDropHelper } from '@e2e/fixtures/helpers/DragDropHelper'
+import { FeatureFlagHelper } from '@e2e/fixtures/helpers/FeatureFlagHelper'
+import { KeyboardHelper } from '@e2e/fixtures/helpers/KeyboardHelper'
+import { ModelLibraryHelper } from '@e2e/fixtures/helpers/ModelLibraryHelper'
+import { NodeOperationsHelper } from '@e2e/fixtures/helpers/NodeOperationsHelper'
+import { PerformanceHelper } from '@e2e/fixtures/helpers/PerformanceHelper'
+import { SettingsHelper } from '@e2e/fixtures/helpers/SettingsHelper'
+import { SubgraphHelper } from '@e2e/fixtures/helpers/SubgraphHelper'
+import { ToastHelper } from '@e2e/fixtures/helpers/ToastHelper'
+import { WorkflowHelper } from '@e2e/fixtures/helpers/WorkflowHelper'
+import type { WorkspaceStore } from '@e2e/types/globals'
 
 dotenvConfig()
 
@@ -58,22 +65,27 @@ class ComfyPropertiesPanel {
 
 class ComfyMenu {
   private _assetsTab: AssetsSidebarTab | null = null
+  private _modelLibraryTab: ModelLibrarySidebarTab | null = null
   private _nodeLibraryTab: NodeLibrarySidebarTab | null = null
+  private _nodeLibraryTabV2: NodeLibrarySidebarTabV2 | null = null
   private _workflowsTab: WorkflowsSidebarTab | null = null
   private _topbar: Topbar | null = null
 
   public readonly sideToolbar: Locator
   public readonly propertiesPanel: ComfyPropertiesPanel
   public readonly modeToggleButton: Locator
+  public readonly buttons: Locator
 
   constructor(public readonly page: Page) {
     this.sideToolbar = page.getByTestId(TestIds.sidebar.toolbar)
     this.modeToggleButton = page.getByTestId(TestIds.sidebar.modeToggle)
     this.propertiesPanel = new ComfyPropertiesPanel(page)
+    this.buttons = this.sideToolbar.locator('.side-bar-button')
   }
 
-  get buttons() {
-    return this.sideToolbar.locator('.side-bar-button')
+  get modelLibraryTab() {
+    this._modelLibraryTab ??= new ModelLibrarySidebarTab(this.page)
+    return this._modelLibraryTab
   }
 
   get nodeLibraryTab() {
@@ -81,6 +93,11 @@ class ComfyMenu {
     return this._nodeLibraryTab
   }
 
+  get nodeLibraryTabV2() {
+    this._nodeLibraryTabV2 ??= new NodeLibrarySidebarTabV2(this.page)
+    return this._nodeLibraryTabV2
+  }
+
   get assetsTab() {
     this._assetsTab ??= new AssetsSidebarTab(this.page)
     return this._assetsTab
@@ -119,48 +136,6 @@ class ComfyMenu {
   }
 }
 
-type KeysOfType<T, Match> = {
-  [K in keyof T]: T[K] extends Match ? K : never
-}[keyof T]
-
-class ConfirmDialog {
-  private readonly root: Locator
-  public readonly delete: Locator
-  public readonly overwrite: Locator
-  public readonly reject: Locator
-  public readonly confirm: Locator
-
-  constructor(public readonly page: Page) {
-    this.root = page.getByRole('dialog')
-    this.delete = this.root.getByRole('button', { name: 'Delete' })
-    this.overwrite = this.root.getByRole('button', { name: 'Overwrite' })
-    this.reject = this.root.getByRole('button', { name: 'Cancel' })
-    this.confirm = this.root.getByRole('button', { name: 'Confirm' })
-  }
-
-  async click(locator: KeysOfType<ConfirmDialog, Locator>) {
-    const loc = this[locator]
-    await loc.waitFor({ state: 'visible' })
-    await loc.click()
-
-    // Wait for the dialog mask to disappear after confirming
-    const mask = this.page.locator('.p-dialog-mask')
-    const count = await mask.count()
-    if (count > 0) {
-      await mask.first().waitFor({ state: 'hidden', timeout: 3000 })
-    }
-
-    // Wait for workflow service to finish if it's busy
-    await this.page.waitForFunction(
-      () =>
-        (window.app?.extensionManager as WorkspaceStore | undefined)?.workflow
-          ?.isBusy === false,
-      undefined,
-      { timeout: 3000 }
-    )
-  }
-}
-
 export class ComfyPage {
   public readonly url: string
   // All canvas position operations are based on default view of canvas.
@@ -184,6 +159,8 @@ export class ComfyPage {
   public readonly templates: ComfyTemplates
   public readonly settingDialog: SettingDialog
   public readonly confirmDialog: ConfirmDialog
+  public readonly templatesDialog: TemplatesDialog
+  public readonly mediaLightbox: MediaLightbox
   public readonly vueNodes: VueNodeHelpers
   public readonly appMode: AppModeHelper
   public readonly subgraph: SubgraphHelper
@@ -199,9 +176,13 @@ export class ComfyPage {
   public readonly featureFlags: FeatureFlagHelper
   public readonly command: CommandHelper
   public readonly bottomPanel: BottomPanel
+  public readonly queuePanel: QueuePanel
   public readonly perf: PerformanceHelper
   public readonly assets: AssetsHelper
-  public readonly queue: QueueHelper
+  public readonly assetApi: AssetHelper
+  public readonly modelLibrary: ModelLibraryHelper
+  public readonly cloudAuth: CloudAuthHelper
+  public readonly visibleToasts: Locator
 
   /** Worker index to test user ID */
   public readonly userIds: string[] = []
@@ -217,7 +198,7 @@ export class ComfyPage {
   ) {
     this.url = process.env.PLAYWRIGHT_TEST_URL || 'http://localhost:8188'
     this.canvas = page.locator('#graph-canvas')
-    this.selectionToolbox = page.locator('.selection-toolbox')
+    this.selectionToolbox = page.getByTestId(TestIds.selectionToolbox.root)
     this.widgetTextBox = page.getByPlaceholder('text').nth(1)
     this.resetViewButton = page.getByRole('button', { name: 'Reset View' })
     this.queueButton = page.getByRole('button', { name: 'Queue Prompt' })
@@ -231,6 +212,8 @@ export class ComfyPage {
     this.templates = new ComfyTemplates(page)
     this.settingDialog = new SettingDialog(page, this)
     this.confirmDialog = new ConfirmDialog(page)
+    this.templatesDialog = new TemplatesDialog(page)
+    this.mediaLightbox = new MediaLightbox(page)
     this.vueNodes = new VueNodeHelpers(page)
     this.appMode = new AppModeHelper(this)
     this.subgraph = new SubgraphHelper(this)
@@ -242,17 +225,17 @@ export class ComfyPage {
     this.workflow = new WorkflowHelper(this)
     this.contextMenu = new ContextMenu(page)
     this.toast = new ToastHelper(page)
-    this.dragDrop = new DragDropHelper(page, this.assetPath.bind(this))
+    this.visibleToasts = this.toast.visibleToasts
+    this.dragDrop = new DragDropHelper(page)
     this.featureFlags = new FeatureFlagHelper(page)
     this.command = new CommandHelper(page)
     this.bottomPanel = new BottomPanel(page)
+    this.queuePanel = new QueuePanel(page)
     this.perf = new PerformanceHelper(page)
     this.assets = new AssetsHelper(page)
-    this.queue = new QueueHelper(page)
-  }
-
-  get visibleToasts() {
-    return this.toast.visibleToasts
+    this.assetApi = createAssetHelper(page)
+    this.modelLibrary = new ModelLibraryHelper(page)
+    this.cloudAuth = new CloudAuthHelper(page)
   }
 
   async setupUser(username: string) {
@@ -339,12 +322,13 @@ export class ComfyPage {
         // window.app.extensionManager => GraphView ready
         window.app && window.app.extensionManager
     )
-    await this.page.waitForSelector('.p-blockui-mask', { state: 'hidden' })
+    await this.page.locator('.p-blockui-mask').waitFor({ state: 'hidden' })
     await this.nextFrame()
   }
 
+  /** @deprecated Use standalone `assetPath` from `browser_tests/fixtures/utils/assetPath` directly. */
   public assetPath(fileName: string) {
-    return `./browser_tests/assets/${fileName}`
+    return assetPath(fileName)
   }
 
   async goto() {
@@ -352,13 +336,11 @@ export class ComfyPage {
   }
 
   async nextFrame() {
-    await this.page.evaluate(() => {
-      return new Promise<number>(requestAnimationFrame)
-    })
+    await nextFrame(this.page)
   }
 
   async delay(ms: number) {
-    return new Promise((resolve) => setTimeout(resolve, ms))
+    return sleep(ms)
   }
 
   /**
@@ -388,7 +370,7 @@ export class ComfyPage {
   }
 
   async closeMenu() {
-    await this.page.click('button.comfy-close-menu-btn')
+    await this.page.locator('button.comfy-close-menu-btn').click()
     await this.nextFrame()
   }
 
@@ -405,9 +387,29 @@ export class ComfyPage {
     await modal.waitFor({ state: 'hidden' })
   }
 
-  /** Get number of DOM widgets on the canvas. */
-  async getDOMWidgetCount() {
-    return await this.page.locator('.dom-widget').count()
+  get domWidgets(): Locator {
+    return this.page.locator('.dom-widget')
+  }
+
+  async expectScreenshot(
+    locator: Locator,
+    name: string | string[],
+    options?: {
+      animations?: 'disabled' | 'allow'
+      caret?: 'hide' | 'initial'
+      mask?: Array<Locator>
+      maskColor?: string
+      maxDiffPixelRatio?: number
+      maxDiffPixels?: number
+      omitBackground?: boolean
+      scale?: 'css' | 'device'
+      stylePath?: string | Array<string>
+      threshold?: number
+      timeout?: number
+    }
+  ): Promise<void> {
+    await this.nextFrame()
+    await comfyExpect(locator).toHaveScreenshot(name, options)
   }
 
   async setFocusMode(focusMode: boolean) {
@@ -420,10 +422,28 @@ export class ComfyPage {
 
 export const testComfySnapToGridGridSize = 50
 
+const COLLECT_COVERAGE = process.env.COLLECT_COVERAGE === 'true'
+
 export const comfyPageFixture = base.extend<{
   comfyPage: ComfyPage
   comfyMouse: ComfyMouse
 }>({
+  page: async ({ page, browserName }, use) => {
+    if (browserName !== 'chromium' || !COLLECT_COVERAGE) {
+      return use(page)
+    }
+
+    await page.coverage.startJSCoverage({ resetOnNavigation: false })
+    await use(page)
+    const coverage = await page.coverage.stopJSCoverage()
+
+    const mcr = MCR({
+      outputDir: './coverage/playwright',
+      reports: []
+    })
+    await mcr.add(coverage)
+  },
+
   comfyPage: async ({ page, request }, use, testInfo) => {
     const comfyPage = new ComfyPage(page, request)
 
@@ -432,6 +452,8 @@ export const comfyPageFixture = base.extend<{
     const userId = await comfyPage.setupUser(username)
     comfyPage.userIds[parallelIndex] = userId
 
+    const isVueNodes = testInfo.tags.includes('@vue-nodes')
+
     try {
       await comfyPage.setupSettings({
         'Comfy.UseNewMenu': 'Top',
@@ -454,20 +476,30 @@ export const comfyPageFixture = base.extend<{
         'Comfy.VersionCompatibility.DisableWarnings': true,
         // Disable errors tab to prevent missing model detection from
         // rendering error indicators on nodes during unrelated tests.
-        'Comfy.RightSidePanel.ShowErrorsTab': false
+        'Comfy.RightSidePanel.ShowErrorsTab': false,
+        ...(isVueNodes && { 'Comfy.VueNodes.Enabled': true })
       })
     } catch (e) {
       console.error(e)
     }
 
+    if (testInfo.tags.includes('@cloud')) {
+      await comfyPage.cloudAuth.mockAuth()
+    }
+
     await comfyPage.setup()
 
+    if (isVueNodes) {
+      await comfyPage.vueNodes.waitForNodes()
+    }
+
     const needsPerf =
       testInfo.tags.includes('@perf') || testInfo.tags.includes('@audit')
     if (needsPerf) await comfyPage.perf.init()
 
     await use(comfyPage)
 
+    await comfyPage.assetApi.clearMocks()
     if (needsPerf) await comfyPage.perf.dispose()
   },
   comfyMouse: async ({ comfyPage }, use) => {
@@ -476,49 +508,4 @@ export const comfyPageFixture = base.extend<{
   }
 })
 
-const makeMatcher = function <T>(
-  getValue: (node: NodeReference) => Promise<T> | T,
-  type: string
-) {
-  return async function (
-    this: ExpectMatcherState,
-    node: NodeReference,
-    options?: { timeout?: number; intervals?: number[] }
-  ) {
-    const value = await getValue(node)
-    let assertion = expect(
-      value,
-      'Node is ' + (this.isNot ? '' : 'not ') + type
-    )
-    if (this.isNot) {
-      assertion = assertion.not
-    }
-    await expect(async () => {
-      assertion.toBeTruthy()
-    }).toPass({ timeout: 250, ...options })
-    return {
-      pass: !this.isNot,
-      message: () => 'Node is ' + (this.isNot ? 'not ' : '') + type
-    }
-  }
-}
-
-export const comfyExpect = expect.extend({
-  toBePinned: makeMatcher((n) => n.isPinned(), 'pinned'),
-  toBeBypassed: makeMatcher((n) => n.isBypassed(), 'bypassed'),
-  toBeCollapsed: makeMatcher((n) => n.isCollapsed(), 'collapsed'),
-  async toHaveFocus(locator: Locator, options = { timeout: 256 }) {
-    const isFocused = await locator.evaluate(
-      (el) => el === document.activeElement
-    )
-
-    await expect(async () => {
-      expect(isFocused).toBe(!this.isNot)
-    }).toPass(options)
-
-    return {
-      pass: isFocused,
-      message: () => `Expected element to ${isFocused ? 'not ' : ''}be focused.`
-    }
-  }
-})
+export { comfyExpect }
diff --git a/browser_tests/fixtures/UserSelectPage.ts b/browser_tests/fixtures/UserSelectPage.ts
index ff0735e171..35e220375e 100644
--- a/browser_tests/fixtures/UserSelectPage.ts
+++ b/browser_tests/fixtures/UserSelectPage.ts
@@ -1,30 +1,22 @@
-import type { Page } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
 import { test as base } from '@playwright/test'
 
 export class UserSelectPage {
+  public readonly selectionUrl: string
+  public readonly container: Locator
+  public readonly newUserInput: Locator
+  public readonly existingUserSelect: Locator
+  public readonly nextButton: Locator
+
   constructor(
     public readonly url: string,
     public readonly page: Page
-  ) {}
-
-  get selectionUrl() {
-    return this.url + '/user-select'
-  }
-
-  get container() {
-    return this.page.locator('#comfy-user-selection')
-  }
-
-  get newUserInput() {
-    return this.container.locator('#new-user-input')
-  }
-
-  get existingUserSelect() {
-    return this.container.locator('#existing-user-select')
-  }
-
-  get nextButton() {
-    return this.container.getByText('Next')
+  ) {
+    this.selectionUrl = url + '/user-select'
+    this.container = page.locator('#comfy-user-selection')
+    this.newUserInput = this.container.locator('#new-user-input')
+    this.existingUserSelect = this.container.locator('#existing-user-select')
+    this.nextButton = this.container.getByText('Next')
   }
 }
 
diff --git a/browser_tests/fixtures/VueNodeHelpers.ts b/browser_tests/fixtures/VueNodeHelpers.ts
index e28ab04394..9712618057 100644
--- a/browser_tests/fixtures/VueNodeHelpers.ts
+++ b/browser_tests/fixtures/VueNodeHelpers.ts
@@ -3,17 +3,24 @@
  */
 import type { Locator, Page } from '@playwright/test'
 
-import { TestIds } from './selectors'
-import { VueNodeFixture } from './utils/vueNodeFixtures'
+import { TestIds } from '@e2e/fixtures/selectors'
+import { VueNodeFixture } from '@e2e/fixtures/utils/vueNodeFixtures'
 
 export class VueNodeHelpers {
-  constructor(private page: Page) {}
-
   /**
    * Get locator for all Vue node components in the DOM
    */
-  get nodes(): Locator {
-    return this.page.locator('[data-node-id]')
+  public readonly nodes: Locator
+  /**
+   * Get locator for selected Vue node components (using visual selection indicators)
+   */
+  public readonly selectedNodes: Locator
+
+  constructor(private page: Page) {
+    this.nodes = page.locator('[data-node-id]')
+    this.selectedNodes = page.locator(
+      '[data-node-id].outline-node-component-outline'
+    )
   }
 
   /**
@@ -24,17 +31,14 @@ export class VueNodeHelpers {
   }
 
   /**
-   * Get locator for selected Vue node components (using visual selection indicators)
-   */
-  get selectedNodes(): Locator {
-    return this.page.locator('[data-node-id].outline-node-component-outline')
-  }
-
-  /**
-   * Get locator for a Vue node by the node's title (displayed name in the header)
+   * Get locator for Vue nodes by the node's title (displayed name in the header).
+   * Matches against the actual title element, not the full node body.
+   * Use `.first()` for unique titles, `.nth(n)` for duplicates.
    */
   getNodeByTitle(title: string): Locator {
-    return this.page.locator(`[data-node-id]`).filter({ hasText: title })
+    return this.page.locator('[data-node-id]').filter({
+      has: this.page.getByTestId('node-title').filter({ hasText: title })
+    })
   }
 
   /**
@@ -44,13 +48,6 @@ export class VueNodeHelpers {
     return await this.nodes.count()
   }
 
-  /**
-   * Get count of selected Vue nodes
-   */
-  async getSelectedNodeCount(): Promise<number> {
-    return await this.selectedNodes.count()
-  }
-
   /**
    * Get all Vue node IDs currently in the DOM
    */
@@ -105,6 +102,14 @@ export class VueNodeHelpers {
     await this.page.keyboard.press('Delete')
   }
 
+  /**
+   * Select a node by ID and delete it.
+   */
+  async deleteNode(nodeId: string): Promise<void> {
+    await this.selectNode(nodeId)
+    await this.deleteSelected()
+  }
+
   /**
    * Delete selected Vue nodes using Backspace key
    */
@@ -141,7 +146,7 @@ export class VueNodeHelpers {
         expectedCount
       )
     } else {
-      await this.page.waitForSelector('[data-node-id]')
+      await this.page.locator('[data-node-id]').first().waitFor()
     }
   }
 
@@ -154,6 +159,21 @@ export class VueNodeHelpers {
     })
   }
 
+  /**
+   * Select an option from a combo widget on a node.
+   */
+  async selectComboOption(
+    nodeTitle: string,
+    widgetName: string,
+    optionName: string
+  ): Promise<void> {
+    const node = this.getNodeByTitle(nodeTitle)
+    await node.getByRole('combobox', { name: widgetName, exact: true }).click()
+    await this.page
+      .getByRole('option', { name: optionName, exact: true })
+      .click()
+  }
+
   /**
    * Get controls for input number widgets (increment/decrement buttons and input)
    */
diff --git a/browser_tests/fixtures/components/ApiSignin.ts b/browser_tests/fixtures/components/ApiSignin.ts
new file mode 100644
index 0000000000..a63dcebe64
--- /dev/null
+++ b/browser_tests/fixtures/components/ApiSignin.ts
@@ -0,0 +1,22 @@
+import type { Locator, Page } from '@playwright/test'
+
+import { BaseDialog } from '@e2e/fixtures/components/BaseDialog'
+import { TestIds } from '@e2e/fixtures/selectors'
+
+export class ApiSignin extends BaseDialog {
+  readonly cancel: Locator
+
+  constructor(page: Page) {
+    super(page, TestIds.dialogs.apiSignin)
+    this.cancel = this.root.getByRole('button', { name: 'Cancel' })
+  }
+  async open(nodes: string[] = []) {
+    const result = this.page.evaluate(
+      (nodes) =>
+        window.app!.extensionManager.dialog.showApiNodesSignInDialog(nodes),
+      nodes
+    )
+    await this.waitForVisible()
+    return { result }
+  }
+}
diff --git a/browser_tests/fixtures/components/BaseDialog.ts b/browser_tests/fixtures/components/BaseDialog.ts
index 62b4ff64cb..6a4e8d8cb8 100644
--- a/browser_tests/fixtures/components/BaseDialog.ts
+++ b/browser_tests/fixtures/components/BaseDialog.ts
@@ -25,7 +25,7 @@ export class BaseDialog {
   }
 
   async close(): Promise<void> {
-    await this.closeButton.click({ force: true })
+    await this.closeButton.click()
     await this.waitForHidden()
   }
 }
diff --git a/browser_tests/fixtures/components/BottomPanel.ts b/browser_tests/fixtures/components/BottomPanel.ts
index 85ef2694ab..c3ac138d5a 100644
--- a/browser_tests/fixtures/components/BottomPanel.ts
+++ b/browser_tests/fixtures/components/BottomPanel.ts
@@ -20,6 +20,8 @@ export class BottomPanel {
   readonly root: Locator
   readonly keyboardShortcutsButton: Locator
   readonly toggleButton: Locator
+  readonly closeButton: Locator
+  readonly resizeGutter: Locator
   readonly shortcuts: ShortcutsTab
 
   constructor(readonly page: Page) {
@@ -30,6 +32,28 @@ export class BottomPanel {
     this.toggleButton = page.getByRole('button', {
       name: /Toggle Bottom Panel/i
     })
+    this.closeButton = this.root.getByRole('button', { name: /^Close$/i })
+    // PrimeVue renders the splitter gutter outside the panel body.
+    this.resizeGutter = page.locator(
+      '.splitter-overlay-bottom > .p-splitter-gutter'
+    )
     this.shortcuts = new ShortcutsTab(page)
   }
+
+  async resizeByDragging(deltaY: number): Promise<void> {
+    const gutterBox = await this.resizeGutter.boundingBox()
+    if (!gutterBox) {
+      throw new Error('Bottom panel resize gutter should have layout')
+    }
+
+    const gutterCenterX = gutterBox.x + gutterBox.width / 2
+    const gutterCenterY = gutterBox.y + gutterBox.height / 2
+
+    await this.page.mouse.move(gutterCenterX, gutterCenterY)
+    await this.page.mouse.down()
+    await this.page.mouse.move(gutterCenterX, gutterCenterY + deltaY, {
+      steps: 5
+    })
+    await this.page.mouse.up()
+  }
 }
diff --git a/browser_tests/fixtures/components/CloudNotification.ts b/browser_tests/fixtures/components/CloudNotification.ts
new file mode 100644
index 0000000000..a10cabe672
--- /dev/null
+++ b/browser_tests/fixtures/components/CloudNotification.ts
@@ -0,0 +1,21 @@
+import type { Locator, Page } from '@playwright/test'
+
+import { BaseDialog } from '@e2e/fixtures/components/BaseDialog'
+import { TestIds } from '@e2e/fixtures/selectors'
+
+export class CloudNotification extends BaseDialog {
+  readonly toCloud: Locator
+  readonly back: Locator
+
+  constructor(page: Page) {
+    super(page, TestIds.dialogs.cloudNotification)
+    this.toCloud = this.root.getByRole('button', { name: 'Try Cloud for Free' })
+    this.back = this.root.getByRole('button', { name: 'Continue Locally' })
+  }
+  async open() {
+    await this.page.evaluate(() => {
+      void window.app!.extensionManager.dialog.showCloudNotification()
+    })
+    await this.waitForVisible()
+  }
+}
diff --git a/browser_tests/fixtures/components/ComfyNodeSearchBox.ts b/browser_tests/fixtures/components/ComfyNodeSearchBox.ts
index 19b843b499..4e3df5a363 100644
--- a/browser_tests/fixtures/components/ComfyNodeSearchBox.ts
+++ b/browser_tests/fixtures/components/ComfyNodeSearchBox.ts
@@ -1,11 +1,13 @@
+import { expect } from '@playwright/test'
 import type { Locator, Page } from '@playwright/test'
 
 export class ComfyNodeSearchFilterSelectionPanel {
-  constructor(public readonly page: Page) {}
+  readonly root: Locator
+  readonly header: Locator
 
-  get header() {
-    return this.page
-      .getByRole('dialog')
+  constructor(public readonly page: Page) {
+    this.root = page.getByRole('dialog')
+    this.header = this.root
       .locator('div')
       .filter({ hasText: 'Add node filter condition' })
   }
@@ -37,6 +39,8 @@ export class ComfyNodeSearchFilterSelectionPanel {
 export class ComfyNodeSearchBox {
   public readonly input: Locator
   public readonly dropdown: Locator
+  public readonly filterButton: Locator
+  public readonly filterChips: Locator
   public readonly filterSelectionPanel: ComfyNodeSearchFilterSelectionPanel
 
   constructor(public readonly page: Page) {
@@ -46,13 +50,15 @@ export class ComfyNodeSearchBox {
     this.dropdown = page.locator(
       '.comfy-vue-node-search-container .p-autocomplete-list'
     )
+    this.filterButton = page.locator(
+      '.comfy-vue-node-search-container .filter-button'
+    )
+    this.filterChips = page.locator(
+      '.comfy-vue-node-search-container .p-autocomplete-chip-item'
+    )
     this.filterSelectionPanel = new ComfyNodeSearchFilterSelectionPanel(page)
   }
 
-  get filterButton() {
-    return this.page.locator('.comfy-vue-node-search-container .filter-button')
-  }
-
   async fillAndSelectFirstNode(
     nodeName: string,
     options?: { suggestionIndex?: number; exact?: boolean }
@@ -60,17 +66,13 @@ export class ComfyNodeSearchBox {
     await this.input.waitFor({ state: 'visible' })
     await this.input.fill(nodeName)
     await this.dropdown.waitFor({ state: 'visible' })
-    if (options?.exact) {
-      await this.dropdown
-        .locator(`li[aria-label="${nodeName}"]`)
-        .first()
-        .click()
-    } else {
-      await this.dropdown
-        .locator('li')
-        .nth(options?.suggestionIndex || 0)
-        .click()
-    }
+
+    const nodeOption = options?.exact
+      ? this.dropdown.locator(`li[aria-label="${nodeName}"]`).first()
+      : this.dropdown.locator('li').nth(options?.suggestionIndex ?? 0)
+
+    await expect(nodeOption).toBeVisible()
+    await nodeOption.click()
   }
 
   async addFilter(filterValue: string, filterType: string) {
@@ -78,12 +80,6 @@ export class ComfyNodeSearchBox {
     await this.filterSelectionPanel.addFilter(filterValue, filterType)
   }
 
-  get filterChips() {
-    return this.page.locator(
-      '.comfy-vue-node-search-container .p-autocomplete-chip-item'
-    )
-  }
-
   async removeFilter(index: number) {
     await this.filterChips
       .nth(index)
diff --git a/browser_tests/fixtures/components/ComfyNodeSearchBoxV2.ts b/browser_tests/fixtures/components/ComfyNodeSearchBoxV2.ts
index 64f6b9cebb..eab275c88a 100644
--- a/browser_tests/fixtures/components/ComfyNodeSearchBoxV2.ts
+++ b/browser_tests/fixtures/components/ComfyNodeSearchBoxV2.ts
@@ -1,6 +1,6 @@
 import type { Locator, Page } from '@playwright/test'
 
-import type { ComfyPage } from '../ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 
 export class ComfyNodeSearchBoxV2 {
   readonly dialog: Locator
diff --git a/browser_tests/fixtures/components/ConfirmDialog.ts b/browser_tests/fixtures/components/ConfirmDialog.ts
new file mode 100644
index 0000000000..6f7f816887
--- /dev/null
+++ b/browser_tests/fixtures/components/ConfirmDialog.ts
@@ -0,0 +1,46 @@
+import type { Locator, Page } from '@playwright/test'
+
+import type { WorkspaceStore } from '@e2e/types/globals'
+
+type KeysOfType<T, Match> = {
+  [K in keyof T]: T[K] extends Match ? K : never
+}[keyof T]
+
+export class ConfirmDialog {
+  public readonly root: Locator
+  public readonly delete: Locator
+  public readonly noWarnOverwriteToggle: Locator
+  public readonly overwrite: Locator
+  public readonly reject: Locator
+  public readonly confirm: Locator
+  public readonly save: Locator
+
+  constructor(public readonly page: Page) {
+    this.root = page.getByRole('dialog')
+    this.delete = this.root.getByRole('button', { name: 'Delete' })
+    this.overwrite = this.root.getByRole('button', { name: 'Overwrite' })
+    this.reject = this.root.getByRole('button', { name: 'Cancel' })
+    this.confirm = this.root.getByRole('button', { name: 'Confirm' })
+    this.save = this.root.getByRole('button', { name: 'Save' })
+    this.noWarnOverwriteToggle = this.root.locator('#doNotAskAgain')
+  }
+
+  async click(locator: KeysOfType<ConfirmDialog, Locator>) {
+    const loc = this[locator]
+    await loc.waitFor({ state: 'visible' })
+    await loc.click()
+
+    // Wait for this confirm dialog to close (not all dialogs — another
+    // dialog like save-as may open immediately after).
+    await this.root.waitFor({ state: 'hidden', timeout: 5000 }).catch(() => {})
+
+    // Wait for workflow service to finish if it's busy
+    await this.page.waitForFunction(
+      () =>
+        (window.app?.extensionManager as WorkspaceStore | undefined)?.workflow
+          ?.isBusy === false,
+      undefined,
+      { timeout: 3000 }
+    )
+  }
+}
diff --git a/browser_tests/fixtures/components/ContextMenu.ts b/browser_tests/fixtures/components/ContextMenu.ts
index c502ccdd51..9d2a96cc1a 100644
--- a/browser_tests/fixtures/components/ContextMenu.ts
+++ b/browser_tests/fixtures/components/ContextMenu.ts
@@ -1,24 +1,25 @@
+import { expect } from '@playwright/test'
 import type { Locator, Page } from '@playwright/test'
 
 export class ContextMenu {
-  constructor(public readonly page: Page) {}
+  public readonly primeVueMenu: Locator
+  public readonly litegraphMenu: Locator
+  public readonly menuItems: Locator
 
-  get primeVueMenu() {
-    return this.page.locator('.p-contextmenu, .p-menu')
-  }
-
-  get litegraphMenu() {
-    return this.page.locator('.litemenu')
-  }
-
-  get menuItems() {
-    return this.page.locator('.p-menuitem, .litemenu-entry')
+  constructor(public readonly page: Page) {
+    this.primeVueMenu = page.locator('.p-contextmenu, .p-menu')
+    this.litegraphMenu = page.locator('.litemenu')
+    this.menuItems = page.locator('.p-menuitem, .litemenu-entry')
   }
 
   async clickMenuItem(name: string): Promise<void> {
     await this.page.getByRole('menuitem', { name }).click()
   }
 
+  async clickMenuItemExact(name: string): Promise<void> {
+    await this.page.getByRole('menuitem', { name, exact: true }).click()
+  }
+
   async clickLitegraphMenuItem(name: string): Promise<void> {
     await this.page.locator(`.litemenu-entry:has-text("${name}")`).click()
   }
@@ -33,22 +34,36 @@ export class ContextMenu {
     return primeVueVisible || litegraphVisible
   }
 
-  async waitForHidden(): Promise<void> {
-    const waitIfExists = async (locator: Locator, menuName: string) => {
-      const count = await locator.count()
-      if (count > 0) {
-        await locator.waitFor({ state: 'hidden' }).catch((error: Error) => {
-          console.warn(
-            `[waitForHidden] ${menuName} waitFor failed:`,
-            error.message
-          )
-        })
-      }
+  async assertHasItems(items: string[]): Promise<void> {
+    for (const item of items) {
+      await expect
+        .soft(this.page.getByRole('menuitem', { name: item }))
+        .toBeVisible()
     }
+  }
 
+  async openFor(locator: Locator): Promise<this> {
+    await locator.click({ button: 'right' })
+    await expect.poll(() => this.isVisible()).toBe(true)
+    return this
+  }
+
+  /**
+   * Select a Vue node by clicking its header, then right-click to open
+   * the context menu. Vue nodes require a selection click before the
+   * right-click so the correct per-node menu items appear.
+   */
+  async openForVueNode(header: Locator): Promise<this> {
+    await header.click()
+    await header.click({ button: 'right' })
+    await this.primeVueMenu.waitFor({ state: 'visible' })
+    return this
+  }
+
+  async waitForHidden(): Promise<void> {
     await Promise.all([
-      waitIfExists(this.primeVueMenu, 'primeVueMenu'),
-      waitIfExists(this.litegraphMenu, 'litegraphMenu')
+      this.primeVueMenu.waitFor({ state: 'hidden' }),
+      this.litegraphMenu.waitFor({ state: 'hidden' })
     ])
   }
 }
diff --git a/browser_tests/fixtures/components/MediaLightbox.ts b/browser_tests/fixtures/components/MediaLightbox.ts
new file mode 100644
index 0000000000..61573bfca9
--- /dev/null
+++ b/browser_tests/fixtures/components/MediaLightbox.ts
@@ -0,0 +1,11 @@
+import type { Locator, Page } from '@playwright/test'
+
+export class MediaLightbox {
+  public readonly root: Locator
+  public readonly closeButton: Locator
+
+  constructor(public readonly page: Page) {
+    this.root = page.getByRole('dialog')
+    this.closeButton = this.root.getByLabel('Close')
+  }
+}
diff --git a/browser_tests/fixtures/components/OutputHistory.ts b/browser_tests/fixtures/components/OutputHistory.ts
new file mode 100644
index 0000000000..60271e5fcb
--- /dev/null
+++ b/browser_tests/fixtures/components/OutputHistory.ts
@@ -0,0 +1,97 @@
+import type { Locator, Page } from '@playwright/test'
+
+import { TestIds } from '@e2e/fixtures/selectors'
+
+const ids = TestIds.outputHistory
+
+export class OutputHistoryComponent {
+  constructor(private readonly page: Page) {}
+
+  get outputs(): Locator {
+    return this.page.getByTestId(ids.outputs)
+  }
+
+  get welcome(): Locator {
+    return this.page.getByTestId(ids.welcome)
+  }
+
+  get outputInfo(): Locator {
+    return this.page.getByTestId(ids.outputInfo)
+  }
+
+  get activeQueue(): Locator {
+    return this.page.getByTestId(ids.activeQueue)
+  }
+
+  get queueBadge(): Locator {
+    return this.page.getByTestId(ids.queueBadge)
+  }
+
+  get inProgressItems(): Locator {
+    return this.page.getByTestId(ids.inProgressItem)
+  }
+
+  get historyItems(): Locator {
+    return this.page.getByTestId(ids.historyItem)
+  }
+
+  get skeletons(): Locator {
+    return this.page.getByTestId(ids.skeleton)
+  }
+
+  get latentPreviews(): Locator {
+    return this.page.getByTestId(ids.latentPreview)
+  }
+
+  get imageOutputs(): Locator {
+    return this.page.getByTestId(ids.imageOutput)
+  }
+
+  get videoOutputs(): Locator {
+    return this.page.getByTestId(ids.videoOutput)
+  }
+
+  /** The currently selected (checked) in-progress item. */
+  get selectedInProgressItem(): Locator {
+    return this.page.locator(
+      `[data-testid="${ids.inProgressItem}"][data-state="checked"]`
+    )
+  }
+
+  /** The currently selected (checked) history item. */
+  get selectedHistoryItem(): Locator {
+    return this.page.locator(
+      `[data-testid="${ids.historyItem}"][data-state="checked"]`
+    )
+  }
+
+  /** The header-level progress bar. */
+  get headerProgressBar(): Locator {
+    return this.page.getByTestId(ids.headerProgressBar)
+  }
+
+  /** The in-progress item's progress bar (inside the thumbnail). */
+  get itemProgressBar(): Locator {
+    return this.inProgressItems.first().getByTestId(ids.itemProgressBar)
+  }
+
+  /** Overall progress in the header bar. */
+  get headerOverallProgress(): Locator {
+    return this.headerProgressBar.getByTestId(ids.progressOverall)
+  }
+
+  /** Node progress in the header bar. */
+  get headerNodeProgress(): Locator {
+    return this.headerProgressBar.getByTestId(ids.progressNode)
+  }
+
+  /** Overall progress in the in-progress item bar. */
+  get itemOverallProgress(): Locator {
+    return this.itemProgressBar.getByTestId(ids.progressOverall)
+  }
+
+  /** Node progress in the in-progress item bar. */
+  get itemNodeProgress(): Locator {
+    return this.itemProgressBar.getByTestId(ids.progressNode)
+  }
+}
diff --git a/browser_tests/fixtures/components/QueuePanel.ts b/browser_tests/fixtures/components/QueuePanel.ts
new file mode 100644
index 0000000000..525af60ee0
--- /dev/null
+++ b/browser_tests/fixtures/components/QueuePanel.ts
@@ -0,0 +1,24 @@
+import type { Locator, Page } from '@playwright/test'
+
+import { comfyExpect as expect } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+
+export class QueuePanel {
+  readonly overlayToggle: Locator
+  readonly moreOptionsButton: Locator
+
+  constructor(readonly page: Page) {
+    this.overlayToggle = page.getByTestId(TestIds.queue.overlayToggle)
+    this.moreOptionsButton = page.getByLabel(/More options/i).first()
+  }
+
+  async openClearHistoryDialog() {
+    await this.moreOptionsButton.click()
+
+    const clearHistoryAction = this.page.getByTestId(
+      TestIds.queue.clearHistoryAction
+    )
+    await expect(clearHistoryAction).toBeVisible()
+    await clearHistoryAction.click()
+  }
+}
diff --git a/browser_tests/fixtures/components/SettingDialog.ts b/browser_tests/fixtures/components/SettingDialog.ts
index 4965c08a8b..c6585a28cc 100644
--- a/browser_tests/fixtures/components/SettingDialog.ts
+++ b/browser_tests/fixtures/components/SettingDialog.ts
@@ -1,15 +1,22 @@
-import type { Page } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
 
-import type { ComfyPage } from '../ComfyPage'
-import { TestIds } from '../selectors'
-import { BaseDialog } from './BaseDialog'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+import { BaseDialog } from '@e2e/fixtures/components/BaseDialog'
 
 export class SettingDialog extends BaseDialog {
+  public readonly searchBox: Locator
+  public readonly categories: Locator
+  public readonly contentArea: Locator
+
   constructor(
     page: Page,
     public readonly comfyPage: ComfyPage
   ) {
     super(page, TestIds.dialogs.settings)
+    this.searchBox = this.root.getByPlaceholder(/Search/)
+    this.categories = this.root.locator('nav').getByRole('button')
+    this.contentArea = this.root.getByRole('main')
   }
 
   async open() {
@@ -36,27 +43,15 @@ export class SettingDialog extends BaseDialog {
     await settingInputDiv.locator('input').click()
   }
 
-  get searchBox() {
-    return this.root.getByPlaceholder(/Search/)
-  }
-
-  get categories() {
-    return this.root.locator('nav').getByRole('button')
-  }
-
   category(name: string) {
     return this.root.locator('nav').getByRole('button', { name })
   }
 
-  get contentArea() {
-    return this.root.getByRole('main')
-  }
-
   async goToAboutPanel() {
     const aboutButton = this.root.locator('nav').getByRole('button', {
       name: 'About'
     })
     await aboutButton.click()
-    await this.page.waitForSelector('.about-container')
+    await this.page.locator('.about-container').waitFor()
   }
 }
diff --git a/browser_tests/fixtures/components/SidebarTab.ts b/browser_tests/fixtures/components/SidebarTab.ts
index 119c41ed58..43e0d8c7c7 100644
--- a/browser_tests/fixtures/components/SidebarTab.ts
+++ b/browser_tests/fixtures/components/SidebarTab.ts
@@ -1,21 +1,20 @@
 import type { Locator, Page } from '@playwright/test'
+import { expect } from '@playwright/test'
 
-import type { WorkspaceStore } from '../../types/globals'
-import { TestIds } from '../selectors'
+import type { WorkspaceStore } from '@e2e/types/globals'
+import { TestIds } from '@e2e/fixtures/selectors'
 
 class SidebarTab {
+  public readonly tabButton: Locator
+  public readonly selectedTabButton: Locator
+
   constructor(
     public readonly page: Page,
     public readonly tabId: string
-  ) {}
-
-  get tabButton() {
-    return this.page.locator(`.${this.tabId}-tab-button`)
-  }
-
-  get selectedTabButton() {
-    return this.page.locator(
-      `.${this.tabId}-tab-button.side-bar-button-selected`
+  ) {
+    this.tabButton = page.locator(`.${tabId}-tab-button`)
+    this.selectedTabButton = page.locator(
+      `.${tabId}-tab-button.side-bar-button-selected`
     )
   }
 
@@ -34,28 +33,19 @@ class SidebarTab {
 }
 
 export class NodeLibrarySidebarTab extends SidebarTab {
+  public readonly nodeLibrarySearchBoxInput: Locator
+  public readonly nodeLibraryTree: Locator
+  public readonly nodePreview: Locator
+  public readonly tabContainer: Locator
+  public readonly newFolderButton: Locator
+
   constructor(public override readonly page: Page) {
     super(page, 'node-library')
-  }
-
-  get nodeLibrarySearchBoxInput() {
-    return this.page.getByPlaceholder('Search Nodes...')
-  }
-
-  get nodeLibraryTree() {
-    return this.page.getByTestId(TestIds.sidebar.nodeLibrary)
-  }
-
-  get nodePreview() {
-    return this.page.locator('.node-lib-node-preview')
-  }
-
-  get tabContainer() {
-    return this.page.locator('.sidebar-content-container')
-  }
-
-  get newFolderButton() {
-    return this.tabContainer.locator('.new-folder-button')
+    this.nodeLibrarySearchBoxInput = page.getByPlaceholder('Search Nodes...')
+    this.nodeLibraryTree = page.getByTestId(TestIds.sidebar.nodeLibrary)
+    this.nodePreview = page.locator('.node-lib-node-preview')
+    this.tabContainer = page.locator('.sidebar-content-container')
+    this.newFolderButton = this.tabContainer.locator('.new-folder-button')
   }
 
   override async open() {
@@ -99,13 +89,60 @@ export class NodeLibrarySidebarTab extends SidebarTab {
   }
 }
 
-export class WorkflowsSidebarTab extends SidebarTab {
+export class NodeLibrarySidebarTabV2 extends SidebarTab {
+  public readonly searchInput: Locator
+  public readonly sidebarContent: Locator
+  public readonly allTab: Locator
+  public readonly blueprintsTab: Locator
+  public readonly sortButton: Locator
+
   constructor(public override readonly page: Page) {
-    super(page, 'workflows')
+    super(page, 'node-library')
+    this.searchInput = page.getByPlaceholder('Search...')
+    this.sidebarContent = page.locator('.sidebar-content-container')
+    this.allTab = this.getTab('All')
+    this.blueprintsTab = this.getTab('Blueprints')
+    this.sortButton = this.sidebarContent.getByRole('button', { name: 'Sort' })
   }
 
-  get root() {
-    return this.page.getByTestId(TestIds.sidebar.workflows)
+  getTab(name: string) {
+    return this.sidebarContent.getByRole('tab', { name, exact: true })
+  }
+
+  getFolder(folderName: string) {
+    return this.sidebarContent
+      .getByRole('treeitem', { name: folderName })
+      .first()
+  }
+
+  getNode(nodeName: string) {
+    return this.sidebarContent.getByRole('treeitem', { name: nodeName }).first()
+  }
+
+  async expandFolder(folderName: string) {
+    const folder = this.getFolder(folderName)
+    const isExpanded = await folder.getAttribute('aria-expanded')
+    if (isExpanded !== 'true') {
+      await folder.click()
+    }
+  }
+
+  override async open() {
+    await super.open()
+    await this.searchInput.waitFor({ state: 'visible' })
+  }
+}
+
+export class WorkflowsSidebarTab extends SidebarTab {
+  public readonly root: Locator
+  public readonly activeWorkflowLabel: Locator
+
+  constructor(public override readonly page: Page) {
+    super(page, 'workflows')
+    this.root = page.getByTestId(TestIds.sidebar.workflows)
+    this.activeWorkflowLabel = this.root.locator(
+      '.comfyui-workflows-open .p-tree-node-selected .node-label'
+    )
   }
 
   async getOpenedWorkflowNames() {
@@ -115,9 +152,7 @@ export class WorkflowsSidebarTab extends SidebarTab {
   }
 
   async getActiveWorkflowName() {
-    return await this.root
-      .locator('.comfyui-workflows-open .p-tree-node-selected .node-label')
-      .innerText()
+    return await this.activeWorkflowLabel.innerText()
   }
 
   async getTopLevelSavedWorkflowNames() {
@@ -169,31 +204,196 @@ export class WorkflowsSidebarTab extends SidebarTab {
   }
 }
 
+export class ModelLibrarySidebarTab extends SidebarTab {
+  public readonly searchInput: Locator
+  public readonly modelTree: Locator
+  public readonly refreshButton: Locator
+  public readonly loadAllFoldersButton: Locator
+  public readonly folderNodes: Locator
+  public readonly leafNodes: Locator
+  public readonly modelPreview: Locator
+
+  constructor(public override readonly page: Page) {
+    super(page, 'model-library')
+    this.searchInput = page.getByPlaceholder('Search Models...')
+    this.modelTree = page.locator('.model-lib-tree-explorer')
+    this.refreshButton = page.getByRole('button', { name: 'Refresh' })
+    this.loadAllFoldersButton = page.getByRole('button', {
+      name: 'Load All Folders'
+    })
+    this.folderNodes = this.modelTree.locator(
+      '.p-tree-node:not(.p-tree-node-leaf)'
+    )
+    this.leafNodes = this.modelTree.locator('.p-tree-node-leaf')
+    this.modelPreview = page.locator('.model-lib-model-preview')
+  }
+
+  override async open() {
+    await super.open()
+    await this.modelTree.waitFor({ state: 'visible' })
+  }
+
+  getFolderByLabel(label: string) {
+    return this.modelTree
+      .locator('.p-tree-node:not(.p-tree-node-leaf)')
+      .filter({ hasText: label })
+      .first()
+  }
+
+  getLeafByLabel(label: string) {
+    return this.modelTree
+      .locator('.p-tree-node-leaf')
+      .filter({ hasText: label })
+      .first()
+  }
+}
+
 export class AssetsSidebarTab extends SidebarTab {
+  // --- Tab navigation ---
+  public readonly generatedTab: Locator
+  public readonly importedTab: Locator
+
+  // --- Empty state ---
+  public readonly emptyStateMessage: Locator
+
+  // --- Search & filter ---
+  public readonly searchInput: Locator
+  public readonly settingsButton: Locator
+
+  // --- View mode ---
+  public readonly listViewOption: Locator
+  public readonly gridViewOption: Locator
+
+  // --- Sort options (cloud-only, shown inside settings popover) ---
+  public readonly sortNewestFirst: Locator
+  public readonly sortOldestFirst: Locator
+
+  // --- Asset cards ---
+  public readonly assetCards: Locator
+  public readonly selectedCards: Locator
+
+  // --- List view items ---
+  public readonly listViewItems: Locator
+
+  // --- Selection footer ---
+  public readonly selectionFooter: Locator
+  public readonly selectionCountButton: Locator
+  public readonly deselectAllButton: Locator
+  public readonly deleteSelectedButton: Locator
+  public readonly downloadSelectedButton: Locator
+
+  // --- Folder view ---
+  public readonly backToAssetsButton: Locator
+
+  // --- Loading ---
+  public readonly skeletonLoaders: Locator
+
   constructor(public override readonly page: Page) {
     super(page, 'assets')
-  }
-
-  get generatedTab() {
-    return this.page.getByRole('tab', { name: 'Generated' })
-  }
-
-  get importedTab() {
-    return this.page.getByRole('tab', { name: 'Imported' })
-  }
-
-  get emptyStateMessage() {
-    return this.page.getByText(
+    this.generatedTab = page.getByRole('tab', { name: 'Generated' })
+    this.importedTab = page.getByRole('tab', { name: 'Imported' })
+    this.emptyStateMessage = page.getByText(
       'Upload files or generate content to see them here'
     )
+    this.searchInput = page.getByPlaceholder('Search Assets...')
+    this.settingsButton = page.getByRole('button', { name: 'View settings' })
+    this.listViewOption = page.getByText('List view')
+    this.gridViewOption = page.getByText('Grid view')
+    this.sortNewestFirst = page.getByText('Newest first')
+    this.sortOldestFirst = page.getByText('Oldest first')
+    this.assetCards = page
+      .getByRole('button')
+      .and(page.locator('[data-selected]'))
+    this.selectedCards = page.locator('[data-selected="true"]')
+    this.listViewItems = page.locator(
+      '.sidebar-content-container [role="button"][tabindex="0"]'
+    )
+    this.selectionFooter = page
+      .locator('.sidebar-content-container')
+      .locator('..')
+      .locator('[class*="h-18"]')
+    this.selectionCountButton = page.getByText(/Assets Selected: \d+/)
+    this.deselectAllButton = page.getByText('Deselect all')
+    this.deleteSelectedButton = page
+      .getByTestId('assets-delete-selected')
+      .or(page.locator('button:has(.icon-\\[lucide--trash-2\\])').last())
+      .first()
+    this.downloadSelectedButton = page
+      .getByTestId('assets-download-selected')
+      .or(page.locator('button:has(.icon-\\[lucide--download\\])').last())
+      .first()
+    this.backToAssetsButton = page.getByText('Back to all assets')
+    this.skeletonLoaders = page.locator(
+      '.sidebar-content-container .animate-pulse'
+    )
   }
 
   emptyStateTitle(title: string) {
     return this.page.getByText(title)
   }
 
+  getAssetCardByName(name: string) {
+    return this.assetCards.filter({ hasText: name })
+  }
+
+  contextMenuItem(label: string) {
+    return this.page.locator('.p-contextmenu').getByText(label)
+  }
+
   override async open() {
+    // Remove any toast notifications that may overlay the sidebar button
+    await this.dismissToasts()
     await super.open()
     await this.generatedTab.waitFor({ state: 'visible' })
   }
+
+  /** Dismiss all visible toast notifications by clicking their close buttons. */
+  async dismissToasts() {
+    const closeButtons = this.page.locator('.p-toast-close-button')
+    for (const btn of await closeButtons.all()) {
+      await btn.click().catch(() => {})
+    }
+    // Wait for all toast elements to fully animate out and detach from DOM
+    await expect(this.page.locator('.p-toast-message'))
+      .toHaveCount(0)
+      .catch(() => {})
+  }
+
+  async switchToImported() {
+    await this.dismissToasts()
+    await this.importedTab.click()
+    await expect(this.importedTab).toHaveAttribute('aria-selected', 'true')
+  }
+
+  async switchToGenerated() {
+    await this.dismissToasts()
+    await this.generatedTab.click()
+    await expect(this.generatedTab).toHaveAttribute('aria-selected', 'true')
+  }
+
+  async openSettingsMenu() {
+    await this.dismissToasts()
+    await this.settingsButton.click()
+    // Wait for popover content to render
+    await this.listViewOption
+      .or(this.gridViewOption)
+      .first()
+      .waitFor({ state: 'visible', timeout: 3000 })
+  }
+
+  async rightClickAsset(name: string) {
+    const card = this.getAssetCardByName(name)
+    await card.click({ button: 'right' })
+    await this.page
+      .locator('.p-contextmenu')
+      .waitFor({ state: 'visible', timeout: 3000 })
+  }
+
+  async waitForAssets(count?: number) {
+    if (count !== undefined) {
+      await expect(this.assetCards).toHaveCount(count)
+    } else {
+      await this.assetCards.first().waitFor({ state: 'visible', timeout: 5000 })
+    }
+  }
 }
diff --git a/browser_tests/fixtures/components/SignInDialog.ts b/browser_tests/fixtures/components/SignInDialog.ts
new file mode 100644
index 0000000000..fcfa430a9c
--- /dev/null
+++ b/browser_tests/fixtures/components/SignInDialog.ts
@@ -0,0 +1,68 @@
+import type { Locator, Page } from '@playwright/test'
+
+import { BaseDialog } from '@e2e/fixtures/components/BaseDialog'
+
+export class SignInDialog extends BaseDialog {
+  readonly emailInput: Locator
+  readonly passwordInput: Locator
+  readonly signInButton: Locator
+  readonly forgotPasswordLink: Locator
+  readonly apiKeyButton: Locator
+  readonly termsLink: Locator
+  readonly privacyLink: Locator
+  readonly heading: Locator
+  readonly signUpLink: Locator
+  readonly signInLink: Locator
+  readonly signUpEmailInput: Locator
+  readonly signUpPasswordInput: Locator
+  readonly signUpConfirmPasswordInput: Locator
+  readonly signUpButton: Locator
+  readonly apiKeyHeading: Locator
+  readonly apiKeyInput: Locator
+  readonly backButton: Locator
+  readonly dividerText: Locator
+
+  constructor(page: Page) {
+    super(page)
+    this.emailInput = this.root.locator('#comfy-org-sign-in-email')
+    this.passwordInput = this.root.locator('#comfy-org-sign-in-password')
+    this.signInButton = this.root.getByRole('button', { name: 'Sign in' })
+    this.forgotPasswordLink = this.root.getByText('Forgot password?')
+    this.apiKeyButton = this.root.getByRole('button', {
+      name: 'Comfy API Key'
+    })
+    this.termsLink = this.root.getByRole('link', { name: 'Terms of Use' })
+    this.privacyLink = this.root.getByRole('link', { name: 'Privacy Policy' })
+    this.heading = this.root.getByRole('heading').first()
+    this.signUpLink = this.root.getByText('Sign up', { exact: true })
+    this.signInLink = this.root.getByText('Sign in', { exact: true })
+    this.signUpEmailInput = this.root.locator('#comfy-org-sign-up-email')
+    this.signUpPasswordInput = this.root.locator('#comfy-org-sign-up-password')
+    this.signUpConfirmPasswordInput = this.root.locator(
+      '#comfy-org-sign-up-confirm-password'
+    )
+    this.signUpButton = this.root.getByRole('button', {
+      name: 'Sign up',
+      exact: true
+    })
+    this.apiKeyHeading = this.root.getByRole('heading', { name: 'API Key' })
+    this.apiKeyInput = this.root.locator('#comfy-org-api-key')
+    this.backButton = this.root.getByRole('button', { name: 'Back' })
+    this.dividerText = this.root.getByText('Or continue with')
+  }
+
+  async open() {
+    await this.page.evaluate(() => {
+      void window.app!.extensionManager.dialog.showSignInDialog()
+    })
+    await this.waitForVisible()
+  }
+
+  async openWithResult(): Promise<{ result: Promise<boolean> }> {
+    const result = this.page.evaluate(() =>
+      window.app!.extensionManager.dialog.showSignInDialog()
+    )
+    await this.waitForVisible()
+    return { result }
+  }
+}
diff --git a/browser_tests/fixtures/components/TemplatesDialog.ts b/browser_tests/fixtures/components/TemplatesDialog.ts
new file mode 100644
index 0000000000..670303f76f
--- /dev/null
+++ b/browser_tests/fixtures/components/TemplatesDialog.ts
@@ -0,0 +1,19 @@
+import type { Locator, Page } from '@playwright/test'
+
+export class TemplatesDialog {
+  public readonly root: Locator
+
+  constructor(public readonly page: Page) {
+    this.root = page.getByRole('dialog')
+  }
+
+  filterByHeading(name: string): Locator {
+    return this.root.filter({
+      has: this.page.getByRole('heading', { name, exact: true })
+    })
+  }
+
+  getCombobox(name: RegExp | string): Locator {
+    return this.root.getByRole('combobox', { name })
+  }
+}
diff --git a/browser_tests/fixtures/components/Topbar.ts b/browser_tests/fixtures/components/Topbar.ts
index e91311c7b3..96e6e3866c 100644
--- a/browser_tests/fixtures/components/Topbar.ts
+++ b/browser_tests/fixtures/components/Topbar.ts
@@ -1,14 +1,16 @@
 import type { Locator, Page } from '@playwright/test'
 
-import type { WorkspaceStore } from '../../types/globals'
+import type { WorkspaceStore } from '@e2e/types/globals'
 
 export class Topbar {
   private readonly menuLocator: Locator
   private readonly menuTrigger: Locator
+  readonly newWorkflowButton: Locator
 
   constructor(public readonly page: Page) {
     this.menuLocator = page.locator('.comfy-command-menu')
     this.menuTrigger = page.locator('.comfy-menu-button-wrapper')
+    this.newWorkflowButton = page.locator('.new-blank-workflow-button')
   }
 
   async getTabNames(): Promise<string[]> {
@@ -56,9 +58,20 @@ export class Topbar {
       .locator('..')
   }
 
+  getTab(index: number): Locator {
+    return this.page.locator('.workflow-tabs .p-togglebutton').nth(index)
+  }
+
+  getActiveTab(): Locator {
+    return this.page.locator(
+      '.workflow-tabs .p-togglebutton.p-togglebutton-checked'
+    )
+  }
+
   async closeWorkflowTab(tabName: string) {
     const tab = this.getWorkflowTab(tabName)
-    await tab.getByRole('button', { name: 'Close' }).click({ force: true })
+    await tab.hover()
+    await tab.locator('.close-button').click()
   }
 
   getSaveDialog(): Locator {
@@ -92,7 +105,7 @@ export class Topbar {
       { timeout: 3000 }
     )
     // Wait for the dialog to close.
-    await this.getSaveDialog().waitFor({ state: 'hidden', timeout: 500 })
+    await this.getSaveDialog().waitFor({ state: 'hidden' })
 
     // Check if a confirmation dialog appeared (e.g., "Overwrite existing file?")
     // If so, return early to let the test handle the confirmation
@@ -126,6 +139,27 @@ export class Topbar {
     await this.menuLocator.waitFor({ state: 'hidden' })
   }
 
+  /**
+   * Set Nodes 2.0 on or off via the Comfy logo menu switch (no-op if already
+   * in the requested state).
+   */
+  async setVueNodesEnabled(enabled: boolean) {
+    await this.openTopbarMenu()
+    const nodes2Switch = this.page.getByRole('switch', { name: 'Nodes 2.0' })
+    await nodes2Switch.waitFor({ state: 'visible' })
+    if ((await nodes2Switch.isChecked()) !== enabled) {
+      await nodes2Switch.click()
+      await this.page.waitForFunction(
+        (wantEnabled) =>
+          window.app!.ui.settings.getSettingValue('Comfy.VueNodes.Enabled') ===
+          wantEnabled,
+        enabled,
+        { timeout: 5000 }
+      )
+    }
+    await this.closeTopbarMenu()
+  }
+
   /**
    * Navigate to a submenu by hovering over a menu item
    */
diff --git a/browser_tests/fixtures/components/UpdatePassword.ts b/browser_tests/fixtures/components/UpdatePassword.ts
new file mode 100644
index 0000000000..85a8a683e4
--- /dev/null
+++ b/browser_tests/fixtures/components/UpdatePassword.ts
@@ -0,0 +1,23 @@
+import type { Locator, Page } from '@playwright/test'
+
+import { BaseDialog } from '@e2e/fixtures/components/BaseDialog'
+import { TestIds } from '@e2e/fixtures/selectors'
+
+export class UpdatePassword extends BaseDialog {
+  readonly confirm: Locator
+  readonly password: Locator
+  readonly confirmPassword: Locator
+
+  constructor(page: Page) {
+    super(page, TestIds.dialogs.updatePassword)
+    this.confirm = this.root.getByRole('button', { name: 'Update Password' })
+    this.password = this.root.getByLabel('Password', { exact: true })
+    this.confirmPassword = this.root.getByLabel('Confirm Password')
+  }
+  async open() {
+    await this.page.evaluate(() => {
+      void window.app!.extensionManager.dialog.showUpdatePasswordDialog()
+    })
+    await this.waitForVisible()
+  }
+}
diff --git a/browser_tests/fixtures/constants/defaultGraphPositions.ts b/browser_tests/fixtures/constants/defaultGraphPositions.ts
index 576aecad66..1a05811476 100644
--- a/browser_tests/fixtures/constants/defaultGraphPositions.ts
+++ b/browser_tests/fixtures/constants/defaultGraphPositions.ts
@@ -1,4 +1,4 @@
-import type { Position } from './types'
+import type { Position } from '@e2e/fixtures/constants/types'
 
 /**
  * Hardcoded positions for the default graph loaded in tests.
@@ -10,6 +10,7 @@ export const DefaultGraphPositions = {
   textEncodeNode2: { x: 622, y: 400 },
   textEncodeNodeToggler: { x: 430, y: 171 },
   emptySpaceClick: { x: 35, y: 31 },
+  emptyCanvasClick: { x: 50, y: 500 },
 
   // Slot positions
   clipTextEncodeNode1InputSlot: { x: 427, y: 198 },
@@ -39,6 +40,7 @@ export const DefaultGraphPositions = {
   textEncodeNode2: Position
   textEncodeNodeToggler: Position
   emptySpaceClick: Position
+  emptyCanvasClick: Position
   clipTextEncodeNode1InputSlot: Position
   clipTextEncodeNode2InputSlot: Position
   clipTextEncodeNode2InputLinkPath: Position
diff --git a/browser_tests/fixtures/data/README.md b/browser_tests/fixtures/data/README.md
new file mode 100644
index 0000000000..adf72a4abf
--- /dev/null
+++ b/browser_tests/fixtures/data/README.md
@@ -0,0 +1,41 @@
+# Mock Data Fixtures
+
+Deterministic mock data for browser (Playwright) tests. Each fixture
+exports typed objects that conform to generated types from
+`packages/ingest-types` or Zod schemas in `src/schemas/`.
+
+## Usage with `page.route()`
+
+> **Note:** `comfyPageFixture` navigates to the app during `setup()`,
+> before the test body runs. Routes must be registered before navigation
+> to intercept initial page-load requests. Set up routes in a custom
+> fixture or `test.beforeEach` that runs before `comfyPage.setup()`.
+
+```ts
+import { createMockNodeDefinitions } from '../fixtures/data/nodeDefinitions'
+import { mockSystemStats } from '../fixtures/data/systemStats'
+
+// Extend the base set with test-specific nodes
+const nodeDefs = createMockNodeDefinitions({
+  MyCustomNode: {
+    /* ... */
+  }
+})
+
+await page.route('**/api/object_info', (route) =>
+  route.fulfill({ json: nodeDefs })
+)
+
+await page.route('**/api/system_stats', (route) =>
+  route.fulfill({ json: mockSystemStats })
+)
+```
+
+## Adding new fixtures
+
+1. Locate the generated type in `packages/ingest-types` or Zod schema
+   in `src/schemas/` for the endpoint you need.
+2. Create a new `.ts` file here that imports and satisfies the
+   corresponding TypeScript type.
+3. Keep values realistic but stable — avoid dates, random IDs, or
+   values that would cause test flakiness.
diff --git a/browser_tests/fixtures/data/assetFixtures.ts b/browser_tests/fixtures/data/assetFixtures.ts
new file mode 100644
index 0000000000..2b8c4bdc13
--- /dev/null
+++ b/browser_tests/fixtures/data/assetFixtures.ts
@@ -0,0 +1,306 @@
+import type { Asset } from '@comfyorg/ingest-types'
+function createModelAsset(overrides: Partial<Asset> = {}): Asset {
+  return {
+    id: 'test-model-001',
+    name: 'model.safetensors',
+    asset_hash:
+      'blake3:0000000000000000000000000000000000000000000000000000000000000000',
+    size: 2_147_483_648,
+    mime_type: 'application/octet-stream',
+    tags: ['models', 'checkpoints'],
+    created_at: '2025-01-15T10:00:00Z',
+    updated_at: '2025-01-15T10:00:00Z',
+    last_access_time: '2025-01-15T10:00:00Z',
+    user_metadata: { base_model: 'sd15' },
+    ...overrides
+  }
+}
+
+function createInputAsset(overrides: Partial<Asset> = {}): Asset {
+  return {
+    id: 'test-input-001',
+    name: 'input.png',
+    asset_hash:
+      'blake3:1111111111111111111111111111111111111111111111111111111111111111',
+    size: 2_048_576,
+    mime_type: 'image/png',
+    tags: ['input'],
+    created_at: '2025-03-01T09:00:00Z',
+    updated_at: '2025-03-01T09:00:00Z',
+    last_access_time: '2025-03-01T09:00:00Z',
+    ...overrides
+  }
+}
+
+function createOutputAsset(overrides: Partial<Asset> = {}): Asset {
+  return {
+    id: 'test-output-001',
+    name: 'output_00001.png',
+    asset_hash:
+      'blake3:2222222222222222222222222222222222222222222222222222222222222222',
+    size: 4_194_304,
+    mime_type: 'image/png',
+    tags: ['output'],
+    created_at: '2025-03-10T12:00:00Z',
+    updated_at: '2025-03-10T12:00:00Z',
+    last_access_time: '2025-03-10T12:00:00Z',
+    ...overrides
+  }
+}
+export const STABLE_CHECKPOINT: Asset = createModelAsset({
+  id: 'test-checkpoint-001',
+  name: 'sd_xl_base_1.0.safetensors',
+  size: 6_938_078_208,
+  tags: ['models', 'checkpoints'],
+  user_metadata: {
+    base_model: 'sdxl',
+    description: 'Stable Diffusion XL Base 1.0'
+  },
+  created_at: '2025-01-15T10:30:00Z',
+  updated_at: '2025-01-15T10:30:00Z'
+})
+
+export const STABLE_CHECKPOINT_2: Asset = createModelAsset({
+  id: 'test-checkpoint-002',
+  name: 'v1-5-pruned-emaonly.safetensors',
+  size: 4_265_146_304,
+  tags: ['models', 'checkpoints'],
+  user_metadata: {
+    base_model: 'sd15',
+    description: 'Stable Diffusion 1.5 Pruned EMA-Only'
+  },
+  created_at: '2025-01-20T08:00:00Z',
+  updated_at: '2025-01-20T08:00:00Z'
+})
+
+export const STABLE_LORA: Asset = createModelAsset({
+  id: 'test-lora-001',
+  name: 'detail_enhancer_v1.2.safetensors',
+  size: 184_549_376,
+  tags: ['models', 'loras'],
+  user_metadata: {
+    base_model: 'sdxl',
+    description: 'Detail Enhancement LoRA'
+  },
+  created_at: '2025-02-20T14:00:00Z',
+  updated_at: '2025-02-20T14:00:00Z'
+})
+
+export const STABLE_LORA_2: Asset = createModelAsset({
+  id: 'test-lora-002',
+  name: 'add_detail_v2.safetensors',
+  size: 226_492_416,
+  tags: ['models', 'loras'],
+  user_metadata: {
+    base_model: 'sd15',
+    description: 'Add Detail LoRA v2'
+  },
+  created_at: '2025-02-25T11:00:00Z',
+  updated_at: '2025-02-25T11:00:00Z'
+})
+
+export const STABLE_VAE: Asset = createModelAsset({
+  id: 'test-vae-001',
+  name: 'sdxl_vae.safetensors',
+  size: 334_641_152,
+  tags: ['models', 'vae'],
+  user_metadata: {
+    base_model: 'sdxl',
+    description: 'SDXL VAE'
+  },
+  created_at: '2025-01-18T16:00:00Z',
+  updated_at: '2025-01-18T16:00:00Z'
+})
+
+export const STABLE_EMBEDDING: Asset = createModelAsset({
+  id: 'test-embedding-001',
+  name: 'bad_prompt_v2.pt',
+  size: 32_768,
+  mime_type: 'application/x-pytorch',
+  tags: ['models', 'embeddings'],
+  user_metadata: {
+    base_model: 'sd15',
+    description: 'Negative Embedding: Bad Prompt v2'
+  },
+  created_at: '2025-02-01T09:30:00Z',
+  updated_at: '2025-02-01T09:30:00Z'
+})
+
+export const STABLE_INPUT_IMAGE: Asset = createInputAsset({
+  id: 'test-input-001',
+  name: 'reference_photo.png',
+  size: 2_048_576,
+  mime_type: 'image/png',
+  tags: ['input'],
+  created_at: '2025-03-01T09:00:00Z',
+  updated_at: '2025-03-01T09:00:00Z'
+})
+
+export const STABLE_INPUT_IMAGE_2: Asset = createInputAsset({
+  id: 'test-input-002',
+  name: 'mask_layer.png',
+  size: 1_048_576,
+  mime_type: 'image/png',
+  tags: ['input'],
+  created_at: '2025-03-05T10:00:00Z',
+  updated_at: '2025-03-05T10:00:00Z'
+})
+
+export const STABLE_INPUT_VIDEO: Asset = createInputAsset({
+  id: 'test-input-003',
+  name: 'clip_720p.mp4',
+  size: 15_728_640,
+  mime_type: 'video/mp4',
+  tags: ['input'],
+  created_at: '2025-03-08T14:30:00Z',
+  updated_at: '2025-03-08T14:30:00Z'
+})
+
+export const STABLE_OUTPUT: Asset = createOutputAsset({
+  id: 'test-output-001',
+  name: 'ComfyUI_00001_.png',
+  size: 4_194_304,
+  mime_type: 'image/png',
+  tags: ['output'],
+  created_at: '2025-03-10T12:00:00Z',
+  updated_at: '2025-03-10T12:00:00Z'
+})
+
+export const STABLE_OUTPUT_2: Asset = createOutputAsset({
+  id: 'test-output-002',
+  name: 'ComfyUI_00002_.png',
+  size: 3_670_016,
+  mime_type: 'image/png',
+  tags: ['output'],
+  created_at: '2025-03-10T12:05:00Z',
+  updated_at: '2025-03-10T12:05:00Z'
+})
+export const ALL_MODEL_FIXTURES: Asset[] = [
+  STABLE_CHECKPOINT,
+  STABLE_CHECKPOINT_2,
+  STABLE_LORA,
+  STABLE_LORA_2,
+  STABLE_VAE,
+  STABLE_EMBEDDING
+]
+
+export const ALL_INPUT_FIXTURES: Asset[] = [
+  STABLE_INPUT_IMAGE,
+  STABLE_INPUT_IMAGE_2,
+  STABLE_INPUT_VIDEO
+]
+
+export const ALL_OUTPUT_FIXTURES: Asset[] = [STABLE_OUTPUT, STABLE_OUTPUT_2]
+const CHECKPOINT_NAMES = [
+  'sd_xl_base_1.0.safetensors',
+  'v1-5-pruned-emaonly.safetensors',
+  'sd_xl_refiner_1.0.safetensors',
+  'dreamshaper_8.safetensors',
+  'realisticVision_v51.safetensors',
+  'deliberate_v3.safetensors',
+  'anything_v5.safetensors',
+  'counterfeit_v3.safetensors',
+  'revAnimated_v122.safetensors',
+  'majicmixRealistic_v7.safetensors'
+]
+
+const LORA_NAMES = [
+  'detail_enhancer_v1.2.safetensors',
+  'add_detail_v2.safetensors',
+  'epi_noiseoffset_v2.safetensors',
+  'lcm_lora_sdxl.safetensors',
+  'film_grain_v1.safetensors',
+  'sharpness_fix_v2.safetensors',
+  'better_hands_v1.safetensors',
+  'smooth_skin_v3.safetensors',
+  'color_pop_v1.safetensors',
+  'bokeh_effect_v2.safetensors'
+]
+
+const INPUT_NAMES = [
+  'reference_photo.png',
+  'mask_layer.png',
+  'clip_720p.mp4',
+  'depth_map.png',
+  'control_pose.png',
+  'sketch_input.jpg',
+  'inpainting_mask.png',
+  'style_reference.png',
+  'batch_001.png',
+  'batch_002.png'
+]
+
+const EXTENSION_MIME_MAP: Record<string, string> = {
+  png: 'image/png',
+  jpg: 'image/jpeg',
+  jpeg: 'image/jpeg',
+  mp4: 'video/mp4',
+  webm: 'video/webm',
+  mov: 'video/quicktime',
+  mp3: 'audio/mpeg',
+  wav: 'audio/wav',
+  ogg: 'audio/ogg',
+  flac: 'audio/flac'
+}
+
+function getMimeType(filename: string): string {
+  const ext = filename.split('.').pop()?.toLowerCase() ?? ''
+  return EXTENSION_MIME_MAP[ext] ?? 'application/octet-stream'
+}
+
+/**
+ * Generate N deterministic model assets of a given category.
+ * Uses sequential IDs and fixed names for screenshot stability.
+ */
+export function generateModels(
+  count: number,
+  category: 'checkpoints' | 'loras' | 'vae' | 'embeddings' = 'checkpoints'
+): Asset[] {
+  const names = category === 'loras' ? LORA_NAMES : CHECKPOINT_NAMES
+  return Array.from({ length: Math.min(count, names.length) }, (_, i) =>
+    createModelAsset({
+      id: `gen-${category}-${String(i + 1).padStart(3, '0')}`,
+      name: names[i % names.length],
+      size: 2_000_000_000 + i * 500_000_000,
+      tags: ['models', category],
+      user_metadata: { base_model: i % 2 === 0 ? 'sdxl' : 'sd15' },
+      created_at: `2025-01-${String(15 + i).padStart(2, '0')}T10:00:00Z`,
+      updated_at: `2025-01-${String(15 + i).padStart(2, '0')}T10:00:00Z`
+    })
+  )
+}
+
+/**
+ * Generate N deterministic input file assets.
+ */
+export function generateInputFiles(count: number): Asset[] {
+  return Array.from({ length: Math.min(count, INPUT_NAMES.length) }, (_, i) => {
+    const name = INPUT_NAMES[i % INPUT_NAMES.length]
+    return createInputAsset({
+      id: `gen-input-${String(i + 1).padStart(3, '0')}`,
+      name,
+      size: 1_000_000 + i * 500_000,
+      mime_type: getMimeType(name),
+      tags: ['input'],
+      created_at: `2025-03-${String(1 + i).padStart(2, '0')}T09:00:00Z`,
+      updated_at: `2025-03-${String(1 + i).padStart(2, '0')}T09:00:00Z`
+    })
+  })
+}
+
+/**
+ * Generate N deterministic output assets.
+ */
+export function generateOutputAssets(count: number): Asset[] {
+  return Array.from({ length: count }, (_, i) =>
+    createOutputAsset({
+      id: `gen-output-${String(i + 1).padStart(3, '0')}`,
+      name: `ComfyUI_${String(i + 1).padStart(5, '0')}_.png`,
+      size: 3_000_000 + i * 200_000,
+      mime_type: 'image/png',
+      tags: ['output'],
+      created_at: `2025-03-10T${String((12 + Math.floor(i / 60)) % 24).padStart(2, '0')}:${String(i % 60).padStart(2, '0')}:00Z`,
+      updated_at: `2025-03-10T${String((12 + Math.floor(i / 60)) % 24).padStart(2, '0')}:${String(i % 60).padStart(2, '0')}:00Z`
+    })
+  )
+}
diff --git a/browser_tests/fixtures/data/nodeDefinitions.ts b/browser_tests/fixtures/data/nodeDefinitions.ts
new file mode 100644
index 0000000000..33de62e21a
--- /dev/null
+++ b/browser_tests/fixtures/data/nodeDefinitions.ts
@@ -0,0 +1,155 @@
+import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
+
+/**
+ * Base node definitions covering the default workflow.
+ * Use {@link createMockNodeDefinitions} to extend with per-test overrides.
+ */
+const baseNodeDefinitions: Record<string, ComfyNodeDef> = {
+  KSampler: {
+    input: {
+      required: {
+        model: ['MODEL', {}],
+        seed: [
+          'INT',
+          {
+            default: 0,
+            min: 0,
+            max: 0xfffffffffffff,
+            control_after_generate: true
+          }
+        ],
+        steps: ['INT', { default: 20, min: 1, max: 10000 }],
+        cfg: ['FLOAT', { default: 8.0, min: 0.0, max: 100.0, step: 0.1 }],
+        sampler_name: [['euler', 'euler_ancestral', 'heun', 'dpm_2'], {}],
+        scheduler: [['normal', 'karras', 'exponential', 'simple'], {}],
+        positive: ['CONDITIONING', {}],
+        negative: ['CONDITIONING', {}],
+        latent_image: ['LATENT', {}]
+      },
+      optional: {
+        denoise: ['FLOAT', { default: 1.0, min: 0.0, max: 1.0, step: 0.01 }]
+      }
+    },
+    output: ['LATENT'],
+    output_is_list: [false],
+    output_name: ['LATENT'],
+    name: 'KSampler',
+    display_name: 'KSampler',
+    description: 'Samples latents using the provided model and conditioning.',
+    category: 'sampling',
+    output_node: false,
+    python_module: 'nodes',
+    deprecated: false,
+    experimental: false
+  },
+
+  CheckpointLoaderSimple: {
+    input: {
+      required: {
+        ckpt_name: [
+          ['v1-5-pruned.safetensors', 'sd_xl_base_1.0.safetensors'],
+          {}
+        ]
+      }
+    },
+    output: ['MODEL', 'CLIP', 'VAE'],
+    output_is_list: [false, false, false],
+    output_name: ['MODEL', 'CLIP', 'VAE'],
+    name: 'CheckpointLoaderSimple',
+    display_name: 'Load Checkpoint',
+    description: 'Loads a diffusion model checkpoint.',
+    category: 'loaders',
+    output_node: false,
+    python_module: 'nodes',
+    deprecated: false,
+    experimental: false
+  },
+
+  CLIPTextEncode: {
+    input: {
+      required: {
+        text: ['STRING', { multiline: true, dynamicPrompts: true }],
+        clip: ['CLIP', {}]
+      }
+    },
+    output: ['CONDITIONING'],
+    output_is_list: [false],
+    output_name: ['CONDITIONING'],
+    name: 'CLIPTextEncode',
+    display_name: 'CLIP Text Encode (Prompt)',
+    description: 'Encodes a text prompt using a CLIP model.',
+    category: 'conditioning',
+    output_node: false,
+    python_module: 'nodes',
+    deprecated: false,
+    experimental: false
+  },
+
+  EmptyLatentImage: {
+    input: {
+      required: {
+        width: ['INT', { default: 512, min: 16, max: 16384, step: 8 }],
+        height: ['INT', { default: 512, min: 16, max: 16384, step: 8 }],
+        batch_size: ['INT', { default: 1, min: 1, max: 4096 }]
+      }
+    },
+    output: ['LATENT'],
+    output_is_list: [false],
+    output_name: ['LATENT'],
+    name: 'EmptyLatentImage',
+    display_name: 'Empty Latent Image',
+    description: 'Creates an empty latent image of the specified dimensions.',
+    category: 'latent',
+    output_node: false,
+    python_module: 'nodes',
+    deprecated: false,
+    experimental: false
+  },
+
+  VAEDecode: {
+    input: {
+      required: {
+        samples: ['LATENT', {}],
+        vae: ['VAE', {}]
+      }
+    },
+    output: ['IMAGE'],
+    output_is_list: [false],
+    output_name: ['IMAGE'],
+    name: 'VAEDecode',
+    display_name: 'VAE Decode',
+    description: 'Decodes latent images back into pixel space.',
+    category: 'latent',
+    output_node: false,
+    python_module: 'nodes',
+    deprecated: false,
+    experimental: false
+  },
+
+  SaveImage: {
+    input: {
+      required: {
+        images: ['IMAGE', {}],
+        filename_prefix: ['STRING', { default: 'ComfyUI' }]
+      }
+    },
+    output: [],
+    output_is_list: [],
+    output_name: [],
+    name: 'SaveImage',
+    display_name: 'Save Image',
+    description: 'Saves images to the output directory.',
+    category: 'image',
+    output_node: true,
+    python_module: 'nodes',
+    deprecated: false,
+    experimental: false
+  }
+}
+
+export function createMockNodeDefinitions(
+  overrides?: Record<string, ComfyNodeDef>
+): Record<string, ComfyNodeDef> {
+  const base = structuredClone(baseNodeDefinitions)
+  return overrides ? { ...base, ...overrides } : base
+}
diff --git a/browser_tests/fixtures/data/systemStats.ts b/browser_tests/fixtures/data/systemStats.ts
new file mode 100644
index 0000000000..b35156d49a
--- /dev/null
+++ b/browser_tests/fixtures/data/systemStats.ts
@@ -0,0 +1,22 @@
+import type { SystemStatsResponse } from '@comfyorg/ingest-types'
+
+export const mockSystemStats: SystemStatsResponse = {
+  system: {
+    os: 'posix',
+    python_version: '3.11.9 (main, Apr  2 2024, 08:25:04) [GCC 13.2.0]',
+    embedded_python: false,
+    comfyui_version: '0.3.10',
+    pytorch_version: '2.4.0+cu124',
+    argv: ['main.py', '--listen', '0.0.0.0'],
+    ram_total: 67108864000,
+    ram_free: 52428800000
+  },
+  devices: [
+    {
+      name: 'NVIDIA GeForce RTX 4090',
+      type: 'cuda',
+      vram_total: 25769803776,
+      vram_free: 23622320128
+    }
+  ]
+}
diff --git a/browser_tests/fixtures/helpers/AppModeHelper.ts b/browser_tests/fixtures/helpers/AppModeHelper.ts
index fb7efe3b76..f8337f1444 100644
--- a/browser_tests/fixtures/helpers/AppModeHelper.ts
+++ b/browser_tests/fixtures/helpers/AppModeHelper.ts
@@ -1,71 +1,188 @@
 import type { Locator, Page } from '@playwright/test'
 
-import type { ComfyPage } from '../ComfyPage'
-import { TestIds } from '../selectors'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+
+import { OutputHistoryComponent } from '@e2e/fixtures/components/OutputHistory'
+import { AppModeWidgetHelper } from '@e2e/fixtures/helpers/AppModeWidgetHelper'
+import { BuilderFooterHelper } from '@e2e/fixtures/helpers/BuilderFooterHelper'
+import { BuilderSaveAsHelper } from '@e2e/fixtures/helpers/BuilderSaveAsHelper'
+import { BuilderSelectHelper } from '@e2e/fixtures/helpers/BuilderSelectHelper'
+import { BuilderStepsHelper } from '@e2e/fixtures/helpers/BuilderStepsHelper'
 
 export class AppModeHelper {
-  constructor(private readonly comfyPage: ComfyPage) {}
+  readonly steps: BuilderStepsHelper
+  readonly footer: BuilderFooterHelper
+  readonly saveAs: BuilderSaveAsHelper
+  readonly select: BuilderSelectHelper
+  readonly outputHistory: OutputHistoryComponent
+  readonly widgets: AppModeWidgetHelper
+
+  /** The "Connect an output" popover shown when saving without outputs. */
+  public readonly connectOutputPopover: Locator
+  /** The "Switch to Outputs" button inside the connect-output popover. */
+  public readonly connectOutputSwitchButton: Locator
+  /** The empty-workflow dialog shown when entering builder on an empty graph. */
+  public readonly emptyWorkflowDialog: Locator
+  /** "Back to workflow" button on the empty-workflow dialog. */
+  public readonly emptyWorkflowBackButton: Locator
+  /** "Load template" button on the empty-workflow dialog. */
+  public readonly emptyWorkflowLoadTemplateButton: Locator
+  /** The empty-state placeholder shown when no outputs are selected. */
+  public readonly outputPlaceholder: Locator
+  /** The linear-mode widget list container (visible in app mode). */
+  public readonly linearWidgets: Locator
+  /** The PrimeVue Popover for the image picker (renders with role="dialog"). */
+  public readonly imagePickerPopover: Locator
+  /** The Run button in the app mode footer. */
+  public readonly runButton: Locator
+  /** The welcome screen shown when app mode has no outputs or no nodes. */
+  public readonly welcome: Locator
+  /** The empty workflow message shown when no nodes exist. */
+  public readonly emptyWorkflowText: Locator
+  /** The "Build app" button shown when nodes exist but no outputs. */
+  public readonly buildAppButton: Locator
+  /** The "Back to workflow" button on the welcome screen. */
+  public readonly backToWorkflowButton: Locator
+  /** The "Load template" button shown when no nodes exist. */
+  public readonly loadTemplateButton: Locator
+  /** The cancel button for an in-progress run in the output history. */
+  public readonly cancelRunButton: Locator
+  /** Arrange-step placeholder shown when outputs are configured but no run has happened. */
+  public readonly arrangePreview: Locator
+  /** Arrange-step state shown when no outputs have been configured. */
+  public readonly arrangeNoOutputs: Locator
+  /** "Switch to Outputs" button inside the arrange no-outputs state. */
+  public readonly arrangeSwitchToOutputsButton: Locator
+  /** The Vue Node switch notification popup shown on entering builder. */
+  public readonly vueNodeSwitchPopup: Locator
+  /** The "Dismiss" button inside the Vue Node switch popup. */
+  public readonly vueNodeSwitchDismissButton: Locator
+  /** The "Don't show again" checkbox inside the Vue Node switch popup. */
+  public readonly vueNodeSwitchDontShowAgainCheckbox: Locator
+
+  constructor(private readonly comfyPage: ComfyPage) {
+    this.steps = new BuilderStepsHelper(comfyPage)
+    this.footer = new BuilderFooterHelper(comfyPage)
+    this.saveAs = new BuilderSaveAsHelper(comfyPage)
+    this.select = new BuilderSelectHelper(comfyPage)
+    this.outputHistory = new OutputHistoryComponent(comfyPage.page)
+    this.widgets = new AppModeWidgetHelper(comfyPage)
+
+    this.connectOutputPopover = this.page.getByTestId(
+      TestIds.builder.connectOutputPopover
+    )
+    this.connectOutputSwitchButton = this.page.getByTestId(
+      TestIds.builder.connectOutputSwitch
+    )
+    this.emptyWorkflowDialog = this.page.getByTestId(
+      TestIds.builder.emptyWorkflowDialog
+    )
+    this.emptyWorkflowBackButton = this.page.getByTestId(
+      TestIds.builder.emptyWorkflowBack
+    )
+    this.emptyWorkflowLoadTemplateButton = this.page.getByTestId(
+      TestIds.builder.emptyWorkflowLoadTemplate
+    )
+    this.outputPlaceholder = this.page.getByTestId(
+      TestIds.builder.outputPlaceholder
+    )
+    this.linearWidgets = this.page.getByTestId('linear-widgets')
+    this.imagePickerPopover = this.page
+      .getByRole('dialog')
+      .filter({ has: this.page.getByRole('button', { name: 'All' }) })
+      .first()
+    this.runButton = this.page
+      .getByTestId('linear-run-button')
+      .getByRole('button', { name: /run/i })
+    this.welcome = this.page.getByTestId(TestIds.appMode.welcome)
+    this.emptyWorkflowText = this.page.getByTestId(
+      TestIds.appMode.emptyWorkflow
+    )
+    this.buildAppButton = this.page.getByTestId(TestIds.appMode.buildApp)
+    this.backToWorkflowButton = this.page.getByTestId(
+      TestIds.appMode.backToWorkflow
+    )
+    this.loadTemplateButton = this.page.getByTestId(
+      TestIds.appMode.loadTemplate
+    )
+    this.cancelRunButton = this.page.getByTestId(
+      TestIds.outputHistory.cancelRun
+    )
+    this.arrangePreview = this.page.getByTestId(TestIds.appMode.arrangePreview)
+    this.arrangeNoOutputs = this.page.getByTestId(
+      TestIds.appMode.arrangeNoOutputs
+    )
+    this.arrangeSwitchToOutputsButton = this.page.getByTestId(
+      TestIds.appMode.arrangeSwitchToOutputs
+    )
+    this.vueNodeSwitchPopup = this.page.getByTestId(
+      TestIds.appMode.vueNodeSwitchPopup
+    )
+    this.vueNodeSwitchDismissButton = this.page.getByTestId(
+      TestIds.appMode.vueNodeSwitchDismiss
+    )
+    this.vueNodeSwitchDontShowAgainCheckbox = this.page.getByTestId(
+      TestIds.appMode.vueNodeSwitchDontShowAgain
+    )
+  }
 
   private get page(): Page {
     return this.comfyPage.page
   }
 
-  private get builderToolbar(): Locator {
-    return this.page.getByRole('navigation', { name: 'App Builder' })
+  /** Enable the linear mode feature flag and top menu. */
+  async enableLinearMode() {
+    await this.page.evaluate(() => {
+      window.app!.api.serverFeatureFlags.value = {
+        ...window.app!.api.serverFeatureFlags.value,
+        linear_toggle_enabled: true
+      }
+    })
+    await this.comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
   }
 
-  /** Enter builder mode via the "Workflow actions" dropdown → "Build app". */
+  /** Set preference so the Vue node switch popup does not appear in builder. */
+  async suppressVueNodeSwitchPopup() {
+    await this.comfyPage.settings.setSetting(
+      'Comfy.AppBuilder.VueNodeSwitchDismissed',
+      true
+    )
+  }
+
+  /** Allow the Vue node switch popup so tests can assert its behavior. */
+  async allowVueNodeSwitchPopup() {
+    await this.comfyPage.settings.setSetting(
+      'Comfy.AppBuilder.VueNodeSwitchDismissed',
+      false
+    )
+  }
+
+  /** Enter builder mode via the "Workflow actions" dropdown. */
   async enterBuilder() {
+    // Wait for any workflow-tab popover to dismiss before clicking —
+    // the popover overlay can intercept the "Workflow actions" click.
+    // Best-effort: the popover may or may not exist; if it stays visible
+    // past the timeout we still proceed with the click.
+    await this.page
+      .locator('.workflow-popover-fade')
+      .waitFor({ state: 'hidden', timeout: 5000 })
+      .catch(() => {})
+
     await this.page
       .getByRole('button', { name: 'Workflow actions' })
       .first()
       .click()
-    await this.page.getByRole('menuitem', { name: 'Build app' }).click()
-    await this.comfyPage.nextFrame()
-  }
-
-  /** Exit builder mode via the footer "Exit app builder" button. */
-  async exitBuilder() {
-    await this.page.getByRole('button', { name: 'Exit app builder' }).click()
-    await this.comfyPage.nextFrame()
-  }
-
-  /** Click the "Inputs" step in the builder toolbar. */
-  async goToInputs() {
-    await this.builderToolbar.getByRole('button', { name: 'Inputs' }).click()
-    await this.comfyPage.nextFrame()
-  }
-
-  /** Click the "Outputs" step in the builder toolbar. */
-  async goToOutputs() {
-    await this.builderToolbar.getByRole('button', { name: 'Outputs' }).click()
-    await this.comfyPage.nextFrame()
-  }
-
-  /** Click the "Preview" step in the builder toolbar. */
-  async goToPreview() {
-    await this.builderToolbar.getByRole('button', { name: 'Preview' }).click()
-    await this.comfyPage.nextFrame()
-  }
-
-  /** Click the "Next" button in the builder footer. */
-  async next() {
-    await this.page.getByRole('button', { name: 'Next' }).click()
-    await this.comfyPage.nextFrame()
-  }
-
-  /** Click the "Back" button in the builder footer. */
-  async back() {
-    await this.page.getByRole('button', { name: 'Back' }).click()
+    await this.page
+      .getByRole('menuitem', { name: /Build app|Edit app/ })
+      .click()
     await this.comfyPage.nextFrame()
   }
 
   /** Toggle app mode (linear view) on/off. */
   async toggleAppMode() {
-    await this.page.evaluate(() => {
-      window.app!.extensionManager.command.execute('Comfy.ToggleLinear')
-    })
-    await this.comfyPage.nextFrame()
+    await this.comfyPage.workflow.waitForActiveWorkflow()
+    await this.comfyPage.command.executeCommand('Comfy.ToggleLinear')
   }
 
   /**
@@ -103,11 +220,6 @@ export class AppModeHelper {
     await this.toggleAppMode()
   }
 
-  /** The linear-mode widget list container (visible in app mode). */
-  get linearWidgets(): Locator {
-    return this.page.locator('[data-testid="linear-widgets"]')
-  }
-
   /**
    * Get the actions menu trigger for a widget in the app mode widget list.
    * @param widgetName Text shown in the widget label (e.g. "seed").
@@ -118,107 +230,4 @@ export class AppModeHelper {
       .getByTestId(TestIds.builder.widgetActionsMenu)
       .first()
   }
-
-  /**
-   * Get the actions menu trigger for a widget in the builder input-select
-   * sidebar (IoItem).
-   * @param title The widget title shown in the IoItem.
-   */
-  getBuilderInputItemMenu(title: string): Locator {
-    return this.page
-      .getByTestId(TestIds.builder.ioItem)
-      .filter({ hasText: title })
-      .getByTestId(TestIds.builder.widgetActionsMenu)
-  }
-
-  /**
-   * Get the actions menu trigger for a widget in the builder preview/arrange
-   * sidebar (AppModeWidgetList with builderMode).
-   * @param ariaLabel The aria-label on the widget row, e.g. "seed — KSampler".
-   */
-  getBuilderPreviewWidgetMenu(ariaLabel: string): Locator {
-    return this.page
-      .locator(`[aria-label="${ariaLabel}"]`)
-      .getByTestId(TestIds.builder.widgetActionsMenu)
-  }
-
-  /** The builder footer nav containing save/navigation buttons. */
-  private get builderFooterNav(): Locator {
-    return this.page
-      .getByRole('button', { name: 'Exit app builder' })
-      .locator('..')
-  }
-
-  /** Get a button in the builder footer by its accessible name. */
-  getFooterButton(name: string | RegExp): Locator {
-    return this.builderFooterNav.getByRole('button', { name })
-  }
-
-  /** Click the save/save-as button in the builder footer. */
-  async clickSave() {
-    await this.getFooterButton(/^Save/).first().click()
-    await this.comfyPage.nextFrame()
-  }
-
-  /** The "Opens as" popover tab above the builder footer. */
-  get opensAsPopover(): Locator {
-    return this.page.getByTestId(TestIds.builder.opensAs)
-  }
-
-  /**
-   * Rename a widget by clicking its popover trigger, selecting "Rename",
-   * and filling in the dialog.
-   * @param popoverTrigger The button that opens the widget's actions popover.
-   * @param newName The new name to assign.
-   */
-  async renameWidget(popoverTrigger: Locator, newName: string) {
-    await popoverTrigger.click()
-    await this.page.getByText('Rename', { exact: true }).click()
-
-    const dialogInput = this.page.locator(
-      '.p-dialog-content input[type="text"]'
-    )
-    await dialogInput.fill(newName)
-    await this.page.keyboard.press('Enter')
-    await dialogInput.waitFor({ state: 'hidden' })
-    await this.comfyPage.nextFrame()
-  }
-
-  /**
-   * Rename a builder IoItem via the popover menu "Rename" action.
-   * @param title The current widget title shown in the IoItem.
-   * @param newName The new name to assign.
-   */
-  async renameBuilderInputViaMenu(title: string, newName: string) {
-    const menu = this.getBuilderInputItemMenu(title)
-    await menu.click()
-    await this.page.getByText('Rename', { exact: true }).click()
-
-    const input = this.page
-      .getByTestId(TestIds.builder.ioItemTitle)
-      .getByRole('textbox')
-    await input.fill(newName)
-    await this.page.keyboard.press('Enter')
-    await this.comfyPage.nextFrame()
-  }
-
-  /**
-   * Rename a builder IoItem by double-clicking its title to trigger
-   * inline editing.
-   * @param title The current widget title shown in the IoItem.
-   * @param newName The new name to assign.
-   */
-  async renameBuilderInput(title: string, newName: string) {
-    const titleEl = this.page
-      .getByTestId(TestIds.builder.ioItemTitle)
-      .filter({ hasText: title })
-    await titleEl.dblclick()
-
-    const input = this.page
-      .getByTestId(TestIds.builder.ioItemTitle)
-      .getByRole('textbox')
-    await input.fill(newName)
-    await this.page.keyboard.press('Enter')
-    await this.comfyPage.nextFrame()
-  }
 }
diff --git a/browser_tests/fixtures/helpers/AppModeWidgetHelper.ts b/browser_tests/fixtures/helpers/AppModeWidgetHelper.ts
new file mode 100644
index 0000000000..0271a92f3c
--- /dev/null
+++ b/browser_tests/fixtures/helpers/AppModeWidgetHelper.ts
@@ -0,0 +1,93 @@
+import type { Locator, Page } from '@playwright/test'
+
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+
+/**
+ * Helper for interacting with widgets rendered in app mode (linear view).
+ *
+ * Widgets are located by their key (format: "nodeId:widgetName") via the
+ * `data-widget-key` attribute on each widget item.
+ */
+export class AppModeWidgetHelper {
+  constructor(private readonly comfyPage: ComfyPage) {}
+
+  private get page(): Page {
+    return this.comfyPage.page
+  }
+
+  private get container(): Locator {
+    return this.comfyPage.appMode.linearWidgets
+  }
+
+  /** Get a widget item container by its key (e.g. "6:text", "3:seed"). */
+  getWidgetItem(key: string): Locator {
+    return this.container.locator(`[data-widget-key="${key}"]`)
+  }
+
+  /** Fill a textarea widget (e.g. CLIP Text Encode prompt). */
+  async fillTextarea(key: string, value: string) {
+    const widget = this.getWidgetItem(key)
+    await widget.locator('textarea').fill(value)
+  }
+
+  /**
+   * Set a number input widget value (INT or FLOAT).
+   * Targets the last input inside the widget — this works for both
+   * ScrubableNumberInput (single input) and slider+InputNumber combos
+   * (last input is the editable number field).
+   */
+  async fillNumber(key: string, value: string) {
+    const widget = this.getWidgetItem(key)
+    const input = widget.locator('input').last()
+    await input.fill(value)
+    await input.press('Enter')
+  }
+
+  /** Fill a string text input widget (e.g. filename_prefix). */
+  async fillText(key: string, value: string) {
+    const widget = this.getWidgetItem(key)
+    await widget.locator('input').fill(value)
+  }
+
+  /** Select an option from a combo/select widget. */
+  async selectOption(key: string, optionName: string) {
+    const widget = this.getWidgetItem(key)
+    await widget.getByRole('combobox').click()
+    await this.page
+      .getByRole('option', { name: optionName, exact: true })
+      .click()
+  }
+
+  /**
+   * Intercept the /api/prompt POST, click Run, and return the prompt payload.
+   * Fulfills the route with a mock success response.
+   */
+  async runAndCapturePrompt(): Promise<
+    Record<string, { inputs: Record<string, unknown> }>
+  > {
+    let promptBody: Record<string, { inputs: Record<string, unknown> }> | null =
+      null
+    await this.page.route(
+      '**/api/prompt',
+      async (route, req) => {
+        promptBody = req.postDataJSON().prompt
+        await route.fulfill({
+          status: 200,
+          body: JSON.stringify({
+            prompt_id: 'test-id',
+            number: 1,
+            node_errors: {}
+          })
+        })
+      },
+      { times: 1 }
+    )
+
+    const responsePromise = this.page.waitForResponse('**/api/prompt')
+    await this.comfyPage.appMode.runButton.click()
+    await responsePromise
+
+    if (!promptBody) throw new Error('No prompt payload captured')
+    return promptBody
+  }
+}
diff --git a/browser_tests/fixtures/helpers/AssetHelper.ts b/browser_tests/fixtures/helpers/AssetHelper.ts
new file mode 100644
index 0000000000..e5d7171998
--- /dev/null
+++ b/browser_tests/fixtures/helpers/AssetHelper.ts
@@ -0,0 +1,317 @@
+import type { Page, Route } from '@playwright/test'
+
+import type {
+  Asset,
+  ListAssetsResponse,
+  UpdateAssetData
+} from '@comfyorg/ingest-types'
+import {
+  generateModels,
+  generateInputFiles,
+  generateOutputAssets
+} from '@e2e/fixtures/data/assetFixtures'
+
+export interface MutationRecord {
+  endpoint: string
+  method: string
+  url: string
+  body: unknown
+  timestamp: number
+}
+
+interface PaginationOptions {
+  total: number
+  hasMore: boolean
+}
+export interface AssetConfig {
+  readonly assets: ReadonlyMap<string, Asset>
+  readonly pagination: PaginationOptions | null
+  readonly uploadResponse: Record<string, unknown> | null
+}
+
+function emptyConfig(): AssetConfig {
+  return { assets: new Map(), pagination: null, uploadResponse: null }
+}
+
+export type AssetOperator = (config: AssetConfig) => AssetConfig
+
+function addAssets(config: AssetConfig, newAssets: Asset[]): AssetConfig {
+  const merged = new Map(config.assets)
+  for (const asset of newAssets) {
+    merged.set(asset.id, asset)
+  }
+  return { ...config, assets: merged }
+}
+export function withModels(
+  countOrAssets: number | Asset[],
+  category: 'checkpoints' | 'loras' | 'vae' | 'embeddings' = 'checkpoints'
+): AssetOperator {
+  return (config) => {
+    const assets =
+      typeof countOrAssets === 'number'
+        ? generateModels(countOrAssets, category)
+        : countOrAssets
+    return addAssets(config, assets)
+  }
+}
+
+export function withInputFiles(countOrAssets: number | Asset[]): AssetOperator {
+  return (config) => {
+    const assets =
+      typeof countOrAssets === 'number'
+        ? generateInputFiles(countOrAssets)
+        : countOrAssets
+    return addAssets(config, assets)
+  }
+}
+
+export function withOutputAssets(
+  countOrAssets: number | Asset[]
+): AssetOperator {
+  return (config) => {
+    const assets =
+      typeof countOrAssets === 'number'
+        ? generateOutputAssets(countOrAssets)
+        : countOrAssets
+    return addAssets(config, assets)
+  }
+}
+
+export function withAsset(asset: Asset): AssetOperator {
+  return (config) => addAssets(config, [asset])
+}
+
+export function withPagination(options: PaginationOptions): AssetOperator {
+  return (config) => ({ ...config, pagination: options })
+}
+
+export function withUploadResponse(
+  response: Record<string, unknown>
+): AssetOperator {
+  return (config) => ({ ...config, uploadResponse: response })
+}
+export class AssetHelper {
+  private store: Map<string, Asset>
+  private paginationOptions: PaginationOptions | null
+  private routeHandlers: Array<{
+    pattern: string
+    handler: (route: Route) => Promise<void>
+  }> = []
+  private mutations: MutationRecord[] = []
+  private uploadResponse: Record<string, unknown> | null
+
+  constructor(
+    private readonly page: Page,
+    config: AssetConfig = emptyConfig()
+  ) {
+    this.store = new Map(config.assets)
+    this.paginationOptions = config.pagination
+    this.uploadResponse = config.uploadResponse
+  }
+  async mock(): Promise<void> {
+    const handler = async (route: Route) => {
+      const url = new URL(route.request().url())
+      const method = route.request().method()
+      const path = url.pathname
+      const isMutation = ['POST', 'PUT', 'DELETE'].includes(method)
+      let body: Record<string, unknown> | null = null
+      if (isMutation) {
+        try {
+          body = route.request().postDataJSON()
+        } catch {
+          body = null
+        }
+      }
+
+      if (isMutation) {
+        this.mutations.push({
+          endpoint: path,
+          method,
+          url: route.request().url(),
+          body,
+          timestamp: Date.now()
+        })
+      }
+
+      if (method === 'GET' && /\/assets\/?$/.test(path))
+        return this.handleListAssets(route, url)
+      if (method === 'GET' && /\/assets\/[^/]+$/.test(path))
+        return this.handleGetAsset(route, path)
+      if (method === 'PUT' && /\/assets\/[^/]+$/.test(path))
+        return this.handleUpdateAsset(route, path, body)
+      if (method === 'DELETE' && /\/assets\/[^/]+$/.test(path))
+        return this.handleDeleteAsset(route, path)
+      if (method === 'POST' && /\/assets\/?$/.test(path))
+        return this.handleUploadAsset(route)
+      if (method === 'POST' && path.endsWith('/assets/download'))
+        return this.handleDownloadAsset(route)
+
+      return route.fallback()
+    }
+
+    const pattern = '**/assets**'
+    this.routeHandlers.push({ pattern, handler })
+    await this.page.route(pattern, handler)
+  }
+
+  async mockError(
+    statusCode: number,
+    error: string = 'Internal Server Error'
+  ): Promise<void> {
+    const handler = async (route: Route) => {
+      return route.fulfill({
+        status: statusCode,
+        json: { error }
+      })
+    }
+
+    const pattern = '**/assets**'
+    this.routeHandlers.push({ pattern, handler })
+    await this.page.route(pattern, handler)
+  }
+  async fetch(
+    path: string,
+    init?: RequestInit
+  ): Promise<{ status: number; body: unknown }> {
+    return this.page.evaluate(
+      async ([fetchUrl, fetchInit]) => {
+        const res = await fetch(fetchUrl, fetchInit)
+        const text = await res.text()
+        let body: unknown
+        try {
+          body = JSON.parse(text)
+        } catch {
+          body = text
+        }
+        return { status: res.status, body }
+      },
+      [path, init] as const
+    )
+  }
+
+  configure(...operators: AssetOperator[]): void {
+    const config = operators.reduce<AssetConfig>(
+      (cfg, op) => op(cfg),
+      emptyConfig()
+    )
+    this.store = new Map(config.assets)
+    this.paginationOptions = config.pagination
+    this.uploadResponse = config.uploadResponse
+  }
+
+  getMutations(): MutationRecord[] {
+    return [...this.mutations]
+  }
+
+  getAssets(): Asset[] {
+    return [...this.store.values()]
+  }
+
+  getAsset(id: string): Asset | undefined {
+    return this.store.get(id)
+  }
+
+  get assetCount(): number {
+    return this.store.size
+  }
+  private handleListAssets(route: Route, url: URL) {
+    const includeTags = url.searchParams.get('include_tags')?.split(',') ?? []
+    const limit = parseInt(url.searchParams.get('limit') ?? '0', 10)
+    const offset = parseInt(url.searchParams.get('offset') ?? '0', 10)
+
+    let filtered = this.getFilteredAssets(includeTags)
+    if (limit > 0) {
+      filtered = filtered.slice(offset, offset + limit)
+    }
+
+    const response: ListAssetsResponse = {
+      assets: filtered,
+      total: this.paginationOptions?.total ?? this.store.size,
+      has_more: this.paginationOptions?.hasMore ?? false
+    }
+    return route.fulfill({ json: response })
+  }
+
+  private handleGetAsset(route: Route, path: string) {
+    const id = path.split('/').pop()!
+    const asset = this.store.get(id)
+    if (asset) return route.fulfill({ json: asset })
+    return route.fulfill({ status: 404, json: { error: 'Not found' } })
+  }
+
+  private handleUpdateAsset(
+    route: Route,
+    path: string,
+    body: UpdateAssetData['body'] | null
+  ) {
+    const id = path.split('/').pop()!
+    const asset = this.store.get(id)
+    if (asset) {
+      const updated = {
+        ...asset,
+        ...(body ?? {}),
+        updated_at: new Date().toISOString()
+      }
+      this.store.set(id, updated)
+      return route.fulfill({ json: updated })
+    }
+    return route.fulfill({ status: 404, json: { error: 'Not found' } })
+  }
+
+  private handleDeleteAsset(route: Route, path: string) {
+    const id = path.split('/').pop()!
+    this.store.delete(id)
+    return route.fulfill({ status: 204, body: '' })
+  }
+
+  private handleUploadAsset(route: Route) {
+    const response = this.uploadResponse ?? {
+      id: `upload-${Date.now()}`,
+      name: 'uploaded_file.safetensors',
+      tags: ['models', 'checkpoints'],
+      created_at: new Date().toISOString(),
+      created_new: true
+    }
+    return route.fulfill({ status: 201, json: response })
+  }
+
+  private handleDownloadAsset(route: Route) {
+    return route.fulfill({
+      status: 202,
+      json: {
+        task_id: 'download-task-001',
+        status: 'created',
+        message: 'Download started'
+      }
+    })
+  }
+
+  async clearMocks(): Promise<void> {
+    for (const { pattern, handler } of this.routeHandlers) {
+      await this.page.unroute(pattern, handler)
+    }
+    this.routeHandlers = []
+    this.store.clear()
+    this.mutations = []
+    this.paginationOptions = null
+    this.uploadResponse = null
+  }
+  private getFilteredAssets(tags: string[]): Asset[] {
+    const assets = [...this.store.values()]
+    if (tags.length === 0) return assets
+
+    return assets.filter((asset) =>
+      tags.every((tag) => (asset.tags ?? []).includes(tag))
+    )
+  }
+}
+export function createAssetHelper(
+  page: Page,
+  ...operators: AssetOperator[]
+): AssetHelper {
+  const config = operators.reduce<AssetConfig>(
+    (cfg, op) => op(cfg),
+    emptyConfig()
+  )
+  return new AssetHelper(page, config)
+}
diff --git a/browser_tests/fixtures/helpers/AssetsHelper.ts b/browser_tests/fixtures/helpers/AssetsHelper.ts
index a9d8e69a6e..126d6c7160 100644
--- a/browser_tests/fixtures/helpers/AssetsHelper.ts
+++ b/browser_tests/fixtures/helpers/AssetsHelper.ts
@@ -1,9 +1,68 @@
 import type { Page, Route } from '@playwright/test'
+import type { JobsListResponse } from '@comfyorg/ingest-types'
 
-import type { RawJobListItem } from '../../../src/platform/remote/comfyui/jobs/jobTypes'
+import type { RawJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
 
 const jobsListRoutePattern = /\/api\/jobs(?:\?.*)?$/
 const inputFilesRoutePattern = /\/internal\/files\/input(?:\?.*)?$/
+const historyRoutePattern = /\/api\/history$/
+
+/** Factory to create a mock completed job with preview output. */
+export function createMockJob(
+  overrides: Partial<RawJobListItem> & { id: string }
+): RawJobListItem {
+  const now = Date.now()
+  return {
+    status: 'completed',
+    create_time: now,
+    execution_start_time: now,
+    execution_end_time: now + 5000,
+    preview_output: {
+      filename: `output_${overrides.id}.png`,
+      subfolder: '',
+      type: 'output',
+      nodeId: '1',
+      mediaType: 'images'
+    },
+    outputs_count: 1,
+    priority: 0,
+    ...overrides
+  }
+}
+
+/** Create multiple mock jobs with sequential IDs and staggered timestamps. */
+export function createMockJobs(
+  count: number,
+  baseOverrides?: Partial<RawJobListItem>
+): RawJobListItem[] {
+  const now = Date.now()
+  return Array.from({ length: count }, (_, i) =>
+    createMockJob({
+      id: `job-${String(i + 1).padStart(3, '0')}`,
+      create_time: now - i * 60_000,
+      execution_start_time: now - i * 60_000,
+      execution_end_time: now - i * 60_000 + 5000 + i * 1000,
+      preview_output: {
+        filename: `image_${String(i + 1).padStart(3, '0')}.png`,
+        subfolder: '',
+        type: 'output',
+        nodeId: '1',
+        mediaType: 'images'
+      },
+      ...baseOverrides
+    })
+  )
+}
+
+/** Create mock imported file names with various media types. */
+export function createMockImportedFiles(count: number): string[] {
+  const extensions = ['png', 'jpg', 'mp4', 'wav', 'glb', 'txt']
+  return Array.from(
+    { length: count },
+    (_, i) =>
+      `imported_${String(i + 1).padStart(3, '0')}.${extensions[i % extensions.length]}`
+  )
+}
 
 function parseLimit(url: URL, total: number): number {
   const value = Number(url.searchParams.get('limit'))
@@ -31,6 +90,8 @@ export class AssetsHelper {
   private jobsRouteHandler: ((route: Route) => Promise<void>) | null = null
   private inputFilesRouteHandler: ((route: Route) => Promise<void>) | null =
     null
+  private deleteHistoryRouteHandler: ((route: Route) => Promise<void>) | null =
+    null
   private generatedJobs: RawJobListItem[] = []
   private importedFiles: string[] = []
 
@@ -86,18 +147,23 @@ export class AssetsHelper {
       const limit = parseLimit(url, total)
       const visibleJobs = filteredJobs.slice(offset, offset + limit)
 
+      const response = {
+        jobs: visibleJobs,
+        pagination: {
+          offset,
+          limit,
+          total,
+          has_more: offset + visibleJobs.length < total
+        }
+      } satisfies {
+        jobs: unknown[]
+        pagination: JobsListResponse['pagination']
+      }
+
       await route.fulfill({
         status: 200,
         contentType: 'application/json',
-        body: JSON.stringify({
-          jobs: visibleJobs,
-          pagination: {
-            offset,
-            limit,
-            total,
-            has_more: offset + visibleJobs.length < total
-          }
-        })
+        body: JSON.stringify(response)
       })
     }
 
@@ -122,6 +188,36 @@ export class AssetsHelper {
     await this.page.route(inputFilesRoutePattern, this.inputFilesRouteHandler)
   }
 
+  /**
+   * Mock the POST /api/history endpoint used for deleting history items.
+   * On receiving a `{ delete: [id] }` payload, removes matching jobs from
+   * the in-memory mock state so subsequent /api/jobs fetches reflect the
+   * deletion.
+   */
+  async mockDeleteHistory(): Promise<void> {
+    if (this.deleteHistoryRouteHandler) return
+
+    this.deleteHistoryRouteHandler = async (route: Route) => {
+      const request = route.request()
+      if (request.method() !== 'POST') {
+        await route.continue()
+        return
+      }
+
+      const body = request.postDataJSON() as { delete?: string[] }
+      if (body.delete) {
+        const idsToRemove = new Set(body.delete)
+        this.generatedJobs = this.generatedJobs.filter(
+          (job) => !idsToRemove.has(job.id)
+        )
+      }
+
+      await route.fulfill({ status: 200, body: '{}' })
+    }
+
+    await this.page.route(historyRoutePattern, this.deleteHistoryRouteHandler)
+  }
+
   async mockEmptyState(): Promise<void> {
     await this.mockOutputHistory([])
     await this.mockInputFiles([])
@@ -143,5 +239,13 @@ export class AssetsHelper {
       )
       this.inputFilesRouteHandler = null
     }
+
+    if (this.deleteHistoryRouteHandler) {
+      await this.page.unroute(
+        historyRoutePattern,
+        this.deleteHistoryRouteHandler
+      )
+      this.deleteHistoryRouteHandler = null
+    }
   }
 }
diff --git a/browser_tests/fixtures/helpers/BuilderFooterHelper.ts b/browser_tests/fixtures/helpers/BuilderFooterHelper.ts
new file mode 100644
index 0000000000..9ba7da3d6a
--- /dev/null
+++ b/browser_tests/fixtures/helpers/BuilderFooterHelper.ts
@@ -0,0 +1,57 @@
+import type { Locator, Page } from '@playwright/test'
+
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+
+export class BuilderFooterHelper {
+  public readonly nav: Locator
+  public readonly exitButton: Locator
+  public readonly nextButton: Locator
+  public readonly backButton: Locator
+  public readonly saveButton: Locator
+  public readonly saveGroup: Locator
+  public readonly saveAsButton: Locator
+  public readonly saveAsChevron: Locator
+  public readonly opensAsPopover: Locator
+
+  constructor(private readonly comfyPage: ComfyPage) {
+    this.nav = this.page.getByTestId(TestIds.builder.footerNav)
+    this.exitButton = this.buttonByName('Exit app builder')
+    this.nextButton = this.buttonByName('Next')
+    this.backButton = this.buttonByName('Back')
+    this.saveButton = this.page.getByTestId(TestIds.builder.saveButton)
+    this.saveGroup = this.page.getByTestId(TestIds.builder.saveGroup)
+    this.saveAsButton = this.page.getByTestId(TestIds.builder.saveAsButton)
+    this.saveAsChevron = this.page.getByTestId(TestIds.builder.saveAsChevron)
+    this.opensAsPopover = this.page.getByTestId(TestIds.builder.opensAs)
+  }
+
+  private get page(): Page {
+    return this.comfyPage.page
+  }
+
+  private buttonByName(name: string): Locator {
+    return this.nav.getByRole('button', { name })
+  }
+
+  async next() {
+    await this.nextButton.click()
+    await this.comfyPage.nextFrame()
+  }
+
+  async back() {
+    await this.backButton.click()
+    await this.comfyPage.nextFrame()
+  }
+
+  async exitBuilder() {
+    await this.exitButton.click()
+    await this.comfyPage.nextFrame()
+  }
+
+  async openSaveAsFromChevron() {
+    await this.saveAsChevron.click()
+    await this.page.getByRole('menuitem', { name: 'Save as' }).click()
+    await this.comfyPage.nextFrame()
+  }
+}
diff --git a/browser_tests/fixtures/helpers/BuilderSaveAsHelper.ts b/browser_tests/fixtures/helpers/BuilderSaveAsHelper.ts
new file mode 100644
index 0000000000..d6c8e86522
--- /dev/null
+++ b/browser_tests/fixtures/helpers/BuilderSaveAsHelper.ts
@@ -0,0 +1,66 @@
+import type { Locator, Page } from '@playwright/test'
+
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+
+export class BuilderSaveAsHelper {
+  /** The save-as dialog (scoped by aria-labelledby). */
+  public readonly dialog: Locator
+  /** The post-save success dialog (scoped by aria-labelledby). */
+  public readonly successDialog: Locator
+  public readonly title: Locator
+  public readonly radioGroup: Locator
+  public readonly nameInput: Locator
+  public readonly saveButton: Locator
+  public readonly successMessage: Locator
+  public readonly viewAppButton: Locator
+  public readonly closeButton: Locator
+  /** The X button to dismiss the success dialog without any action. */
+  public readonly dismissButton: Locator
+  public readonly exitBuilderButton: Locator
+  public readonly overwriteDialog: Locator
+  public readonly overwriteButton: Locator
+
+  constructor(private readonly comfyPage: ComfyPage) {
+    this.dialog = this.page.locator('[aria-labelledby="builder-save"]')
+    this.successDialog = this.page.locator(
+      '[aria-labelledby="builder-save-success"]'
+    )
+    this.title = this.dialog.getByText('Save as')
+    this.radioGroup = this.dialog.getByRole('radiogroup')
+    this.nameInput = this.dialog.getByRole('textbox')
+    this.saveButton = this.dialog.getByRole('button', { name: 'Save' })
+    this.successMessage = this.successDialog.getByText('Successfully saved')
+    this.viewAppButton = this.successDialog.getByRole('button', {
+      name: 'View app'
+    })
+    this.closeButton = this.successDialog
+      .getByRole('button', { name: 'Close', exact: true })
+      .filter({ hasText: 'Close' })
+    this.dismissButton = this.successDialog.locator(
+      'button.p-dialog-close-button'
+    )
+    this.exitBuilderButton = this.successDialog.getByRole('button', {
+      name: 'Exit builder'
+    })
+    this.overwriteDialog = this.page.getByRole('dialog', {
+      name: 'Overwrite existing file?'
+    })
+    this.overwriteButton = this.overwriteDialog.getByRole('button', {
+      name: 'Overwrite'
+    })
+  }
+
+  private get page(): Page {
+    return this.comfyPage.page
+  }
+
+  viewTypeRadio(viewType: 'App' | 'Node graph'): Locator {
+    return this.dialog.getByRole('radio', { name: viewType })
+  }
+
+  async fillAndSave(workflowName: string, viewType: 'App' | 'Node graph') {
+    await this.nameInput.fill(workflowName)
+    await this.viewTypeRadio(viewType).click()
+    await this.saveButton.click()
+  }
+}
diff --git a/browser_tests/fixtures/helpers/BuilderSelectHelper.ts b/browser_tests/fixtures/helpers/BuilderSelectHelper.ts
new file mode 100644
index 0000000000..6b56182e6b
--- /dev/null
+++ b/browser_tests/fixtures/helpers/BuilderSelectHelper.ts
@@ -0,0 +1,207 @@
+import type { Locator, Page } from '@playwright/test'
+
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+
+/**
+ * Drag an element from one index to another within a list of locators.
+ * Uses mousedown/mousemove/mouseup to trigger the DraggableList library.
+ *
+ * DraggableList toggles position when the dragged item's center crosses
+ * past an idle item's center. To reliably land at the target position,
+ * we overshoot slightly past the target's far edge.
+ */
+async function dragByIndex(items: Locator, fromIndex: number, toIndex: number) {
+  const fromBox = await items.nth(fromIndex).boundingBox()
+  const toBox = await items.nth(toIndex).boundingBox()
+  if (!fromBox || !toBox) throw new Error('Item not visible for drag')
+
+  const draggingDown = toIndex > fromIndex
+  const targetY = draggingDown
+    ? toBox.y + toBox.height * 0.9
+    : toBox.y + toBox.height * 0.1
+
+  const page = items.page()
+  await page.mouse.move(
+    fromBox.x + fromBox.width / 2,
+    fromBox.y + fromBox.height / 2
+  )
+  await page.mouse.down()
+  await page.mouse.move(toBox.x + toBox.width / 2, targetY, { steps: 10 })
+  await page.mouse.up()
+}
+
+export class BuilderSelectHelper {
+  /** All IoItem locators in the current step sidebar. */
+  public readonly inputItems: Locator
+  /** All IoItem title locators in the inputs step sidebar. */
+  public readonly inputItemTitles: Locator
+  /** All widget label locators in the preview/arrange sidebar. */
+  public readonly previewWidgetLabels: Locator
+
+  constructor(private readonly comfyPage: ComfyPage) {
+    this.inputItems = this.page.getByTestId(TestIds.builder.ioItem)
+    this.inputItemTitles = this.page.getByTestId(TestIds.builder.ioItemTitle)
+    this.previewWidgetLabels = this.page.getByTestId(
+      TestIds.builder.widgetLabel
+    )
+  }
+
+  private get page(): Page {
+    return this.comfyPage.page
+  }
+
+  /**
+   * Get the actions menu trigger for a builder IoItem (input-select sidebar).
+   * @param title The widget title shown in the IoItem.
+   */
+  getInputItemMenu(title: string): Locator {
+    return this.inputItems
+      .filter({
+        has: this.inputItemTitles.getByText(title, { exact: true })
+      })
+      .getByTestId(TestIds.builder.widgetActionsMenu)
+  }
+
+  /**
+   * Get the actions menu trigger for a widget in the preview/arrange sidebar.
+   * @param ariaLabel The aria-label on the widget row, e.g. "seed — KSampler".
+   */
+  getPreviewWidgetMenu(ariaLabel: string): Locator {
+    return this.page
+      .getByLabel(ariaLabel, { exact: true })
+      .getByTestId(TestIds.builder.widgetActionsMenu)
+  }
+
+  /** Delete a builder input via its actions menu. */
+  async deleteInput(title: string) {
+    const menu = this.getInputItemMenu(title)
+    await menu.click()
+    await this.page.getByText('Delete', { exact: true }).click()
+    await this.comfyPage.nextFrame()
+  }
+
+  /**
+   * Rename a builder IoItem via the popover menu "Rename" action.
+   * @param title The current widget title shown in the IoItem.
+   * @param newName The new name to assign.
+   */
+  async renameInputViaMenu(title: string, newName: string) {
+    const menu = this.getInputItemMenu(title)
+    await menu.click()
+    await this.page.getByText('Rename', { exact: true }).click()
+
+    const input = this.page
+      .getByTestId(TestIds.builder.ioItemTitle)
+      .getByRole('textbox')
+    await input.fill(newName)
+    await this.page.keyboard.press('Enter')
+    await this.comfyPage.nextFrame()
+  }
+
+  /**
+   * Rename a builder IoItem by double-clicking its title for inline editing.
+   * @param title The current widget title shown in the IoItem.
+   * @param newName The new name to assign.
+   */
+  async renameInput(title: string, newName: string) {
+    const titleEl = this.page
+      .getByTestId(TestIds.builder.ioItemTitle)
+      .getByText(title, { exact: true })
+    await titleEl.dblclick()
+
+    const input = this.page
+      .getByTestId(TestIds.builder.ioItemTitle)
+      .getByRole('textbox')
+    await input.fill(newName)
+    await this.page.keyboard.press('Enter')
+    await this.comfyPage.nextFrame()
+  }
+
+  /**
+   * Rename a widget via its actions popover (works in preview and app mode).
+   * @param popoverTrigger The button that opens the widget's actions popover.
+   * @param newName The new name to assign.
+   */
+  async renameWidget(popoverTrigger: Locator, newName: string) {
+    await popoverTrigger.click()
+    await this.page.getByText('Rename', { exact: true }).click()
+
+    const dialogInput = this.page.locator(
+      '.p-dialog-content input[type="text"]'
+    )
+    await dialogInput.fill(newName)
+    await this.page.keyboard.press('Enter')
+    await dialogInput.waitFor({ state: 'hidden' })
+    await this.comfyPage.nextFrame()
+  }
+
+  /**
+   * Click a widget on the canvas to select it as a builder input.
+   * @param nodeTitle The displayed title of the node.
+   * @param widgetName The widget name to click.
+   */
+  async selectInputWidget(nodeTitle: string, widgetName: string) {
+    await this.comfyPage.canvasOps.setScale(1)
+    const nodeRef = (
+      await this.comfyPage.nodeOps.getNodeRefsByTitle(nodeTitle)
+    )[0]
+    if (!nodeRef) throw new Error(`Node ${nodeTitle} not found`)
+    await nodeRef.centerOnNode()
+    const widgetLocator = this.comfyPage.vueNodes
+      .getNodeLocator(String(nodeRef.id))
+      .getByLabel(widgetName, { exact: true })
+    // oxlint-disable-next-line playwright/no-force-option -- Node container has conditional pointer-events:none that blocks actionability
+    await widgetLocator.click({ force: true })
+    await this.comfyPage.nextFrame()
+  }
+
+  /**
+   * Get the subtitle locator for a builder IoItem by its title text.
+   * Useful for asserting "Widget not visible" on disconnected inputs.
+   */
+  getInputItemSubtitle(title: string): Locator {
+    return this.inputItems
+      .filter({
+        has: this.inputItemTitles.getByText(title, { exact: true })
+      })
+      .getByTestId(TestIds.builder.ioItemSubtitle)
+  }
+
+  /**
+   * Drag an IoItem from one index to another in the inputs step.
+   * Items are identified by their 0-based position among visible IoItems.
+   */
+  async dragInputItem(fromIndex: number, toIndex: number) {
+    await dragByIndex(this.inputItems, fromIndex, toIndex)
+    await this.comfyPage.nextFrame()
+  }
+
+  /**
+   * Drag a widget item from one index to another in the preview/arrange step.
+   */
+  async dragPreviewItem(fromIndex: number, toIndex: number) {
+    const items = this.page.getByTestId(TestIds.builder.widgetItem)
+    await dragByIndex(items, fromIndex, toIndex)
+    await this.comfyPage.nextFrame()
+  }
+
+  /**
+   * Click an output node on the canvas to select it as a builder output.
+   * @param nodeTitle The displayed title of the output node.
+   */
+  async selectOutputNode(nodeTitle: string) {
+    await this.comfyPage.canvasOps.setScale(1)
+    const nodeRef = (
+      await this.comfyPage.nodeOps.getNodeRefsByTitle(nodeTitle)
+    )[0]
+    if (!nodeRef) throw new Error(`Node ${nodeTitle} not found`)
+    await nodeRef.centerOnNode()
+    const nodeLocator = this.comfyPage.vueNodes.getNodeLocator(
+      String(nodeRef.id)
+    )
+    // oxlint-disable-next-line playwright/no-force-option -- Node container has conditional pointer-events:none that blocks actionability
+    await nodeLocator.click({ force: true })
+    await this.comfyPage.nextFrame()
+  }
+}
diff --git a/browser_tests/fixtures/helpers/BuilderStepsHelper.ts b/browser_tests/fixtures/helpers/BuilderStepsHelper.ts
new file mode 100644
index 0000000000..2179d36f74
--- /dev/null
+++ b/browser_tests/fixtures/helpers/BuilderStepsHelper.ts
@@ -0,0 +1,42 @@
+import type { Locator, Page } from '@playwright/test'
+
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+
+export class BuilderStepsHelper {
+  public readonly toolbar: Locator
+
+  constructor(private readonly comfyPage: ComfyPage) {
+    this.toolbar = this.page.getByRole('navigation', { name: 'App Builder' })
+  }
+
+  private get page(): Page {
+    return this.comfyPage.page
+  }
+
+  get inputsButton(): Locator {
+    return this.toolbar.getByRole('button', { name: 'Inputs' })
+  }
+
+  get outputsButton(): Locator {
+    return this.toolbar.getByRole('button', { name: 'Outputs' })
+  }
+
+  get previewButton(): Locator {
+    return this.toolbar.getByRole('button', { name: 'Preview' })
+  }
+
+  async goToInputs() {
+    await this.inputsButton.click()
+    await this.comfyPage.nextFrame()
+  }
+
+  async goToOutputs() {
+    await this.outputsButton.click()
+    await this.comfyPage.nextFrame()
+  }
+
+  async goToPreview() {
+    await this.previewButton.click()
+    await this.comfyPage.nextFrame()
+  }
+}
diff --git a/browser_tests/fixtures/helpers/CanvasHelper.ts b/browser_tests/fixtures/helpers/CanvasHelper.ts
index 92f3f8a984..6cae310d76 100644
--- a/browser_tests/fixtures/helpers/CanvasHelper.ts
+++ b/browser_tests/fixtures/helpers/CanvasHelper.ts
@@ -1,7 +1,8 @@
 import type { Locator, Page } from '@playwright/test'
 
-import { DefaultGraphPositions } from '../constants/defaultGraphPositions'
-import type { Position } from '../types'
+import { DefaultGraphPositions } from '@e2e/fixtures/constants/defaultGraphPositions'
+import type { Position } from '@e2e/fixtures/types'
+import { nextFrame } from '@e2e/fixtures/utils/timing'
 
 export class CanvasHelper {
   constructor(
@@ -10,18 +11,12 @@ export class CanvasHelper {
     private resetViewButton: Locator
   ) {}
 
-  private async nextFrame(): Promise<void> {
-    await this.page.evaluate(() => {
-      return new Promise<number>(requestAnimationFrame)
-    })
-  }
-
   async resetView(): Promise<void> {
     if (await this.resetViewButton.isVisible()) {
       await this.resetViewButton.click()
     }
     await this.page.mouse.move(10, 10)
-    await this.nextFrame()
+    await nextFrame(this.page)
   }
 
   async zoom(deltaY: number, steps: number = 1): Promise<void> {
@@ -29,7 +24,7 @@ export class CanvasHelper {
     for (let i = 0; i < steps; i++) {
       await this.page.mouse.wheel(0, deltaY)
     }
-    await this.nextFrame()
+    await nextFrame(this.page)
   }
 
   async pan(offset: Position, safeSpot?: Position): Promise<void> {
@@ -38,7 +33,7 @@ export class CanvasHelper {
     await this.page.mouse.down()
     await this.page.mouse.move(offset.x + safeSpot.x, offset.y + safeSpot.y)
     await this.page.mouse.up()
-    await this.nextFrame()
+    await nextFrame(this.page)
   }
 
   async panWithTouch(offset: Position, safeSpot?: Position): Promise<void> {
@@ -56,27 +51,72 @@ export class CanvasHelper {
       type: 'touchEnd',
       touchPoints: []
     })
-    await this.nextFrame()
+    await nextFrame(this.page)
   }
 
   async rightClick(x: number = 10, y: number = 10): Promise<void> {
     await this.page.mouse.click(x, y, { button: 'right' })
-    await this.nextFrame()
+    await nextFrame(this.page)
   }
 
   async doubleClick(): Promise<void> {
     await this.page.mouse.dblclick(10, 10, { delay: 5 })
-    await this.nextFrame()
+    await nextFrame(this.page)
   }
 
   async click(position: Position): Promise<void> {
     await this.canvas.click({ position })
-    await this.nextFrame()
+    await nextFrame(this.page)
+  }
+
+  /**
+   * Convert a canvas-element-relative position to absolute page coordinates.
+   * Use with `page.mouse` APIs when Vue DOM overlays above the canvas would
+   * cause Playwright's actionability check to fail on the canvas locator.
+   */
+  private async toAbsolute(position: Position): Promise<Position> {
+    const box = await this.canvas.boundingBox()
+    if (!box) throw new Error('Canvas bounding box not available')
+    return { x: box.x + position.x, y: box.y + position.y }
+  }
+
+  /**
+   * Click at canvas-element-relative coordinates using `page.mouse.click()`.
+   * Bypasses Playwright's actionability checks on the canvas locator, which
+   * can fail when Vue-rendered DOM nodes overlay the `<canvas>` element.
+   */
+  async mouseClickAt(
+    position: Position,
+    options?: {
+      button?: 'left' | 'right' | 'middle'
+      modifiers?: ('Shift' | 'Control' | 'Alt' | 'Meta')[]
+    }
+  ): Promise<void> {
+    const abs = await this.toAbsolute(position)
+    const modifiers = options?.modifiers ?? []
+    for (const mod of modifiers) await this.page.keyboard.down(mod)
+    try {
+      await this.page.mouse.click(abs.x, abs.y, {
+        button: options?.button
+      })
+    } finally {
+      for (const mod of modifiers) await this.page.keyboard.up(mod)
+    }
+    await nextFrame(this.page)
+  }
+
+  /**
+   * Double-click at canvas-element-relative coordinates using `page.mouse`.
+   */
+  async mouseDblclickAt(position: Position): Promise<void> {
+    const abs = await this.toAbsolute(position)
+    await this.page.mouse.dblclick(abs.x, abs.y)
+    await nextFrame(this.page)
   }
 
   async clickEmptySpace(): Promise<void> {
     await this.canvas.click({ position: DefaultGraphPositions.emptySpaceClick })
-    await this.nextFrame()
+    await nextFrame(this.page)
   }
 
   async dragAndDrop(source: Position, target: Position): Promise<void> {
@@ -84,7 +124,7 @@ export class CanvasHelper {
     await this.page.mouse.down()
     await this.page.mouse.move(target.x, target.y, { steps: 100 })
     await this.page.mouse.up()
-    await this.nextFrame()
+    await nextFrame(this.page)
   }
 
   async moveMouseToEmptyArea(): Promise<void> {
@@ -107,7 +147,7 @@ export class CanvasHelper {
     await this.page.evaluate((s) => {
       window.app!.canvas.ds.scale = s
     }, scale)
-    await this.nextFrame()
+    await nextFrame(this.page)
   }
 
   async convertOffsetToCanvas(
@@ -169,6 +209,39 @@ export class CanvasHelper {
     })
   }
 
+  /**
+   * Pan the canvas back and forth in a sweep pattern using middle-mouse drag.
+   * Each step advances one animation frame, giving per-frame measurement
+   * granularity for performance tests.
+   */
+  async panSweep(options?: {
+    steps?: number
+    dx?: number
+    dy?: number
+  }): Promise<void> {
+    const { steps = 120, dx = 8, dy = 3 } = options ?? {}
+    const box = await this.canvas.boundingBox()
+    if (!box) throw new Error('Canvas bounding box not available')
+
+    const centerX = box.x + box.width / 2
+    const centerY = box.y + box.height / 2
+    await this.page.mouse.move(centerX, centerY)
+    await this.page.mouse.down({ button: 'middle' })
+
+    // Sweep forward
+    for (let i = 0; i < steps; i++) {
+      await this.page.mouse.move(centerX + i * dx, centerY + i * dy)
+      await nextFrame(this.page)
+    }
+    // Sweep back
+    for (let i = steps; i > 0; i--) {
+      await this.page.mouse.move(centerX + i * dx, centerY + i * dy)
+      await nextFrame(this.page)
+    }
+
+    await this.page.mouse.up({ button: 'middle' })
+  }
+
   async disconnectEdge(): Promise<void> {
     await this.dragAndDrop(
       DefaultGraphPositions.clipTextEncodeNode1InputSlot,
diff --git a/browser_tests/fixtures/helpers/ClipboardHelper.ts b/browser_tests/fixtures/helpers/ClipboardHelper.ts
index dae1258caa..b1a329e7b7 100644
--- a/browser_tests/fixtures/helpers/ClipboardHelper.ts
+++ b/browser_tests/fixtures/helpers/ClipboardHelper.ts
@@ -3,8 +3,8 @@ import { basename } from 'path'
 
 import type { Locator, Page } from '@playwright/test'
 
-import type { KeyboardHelper } from './KeyboardHelper'
-import { getMimeType } from './mimeTypeUtil'
+import type { KeyboardHelper } from '@e2e/fixtures/helpers/KeyboardHelper'
+import { getMimeType } from '@e2e/fixtures/helpers/mimeTypeUtil'
 
 export class ClipboardHelper {
   constructor(
diff --git a/browser_tests/fixtures/helpers/CloudAuthHelper.ts b/browser_tests/fixtures/helpers/CloudAuthHelper.ts
new file mode 100644
index 0000000000..a5c2c55f71
--- /dev/null
+++ b/browser_tests/fixtures/helpers/CloudAuthHelper.ts
@@ -0,0 +1,171 @@
+import type { Page } from '@playwright/test'
+
+/**
+ * Mocks Firebase authentication for cloud E2E tests.
+ *
+ * The cloud build's router guard waits for Firebase `onAuthStateChanged`
+ * to fire, then checks `getAuthHeader()`. In CI no Firebase project is
+ * configured, so the user is never authenticated and the app redirects
+ * to `/cloud/login`.
+ *
+ * This helper seeds Firebase's IndexedDB persistence layer with a mock
+ * user and intercepts the Firebase REST APIs (securetoken, identitytoolkit)
+ * so the SDK believes a user is signed in. Must be called before navigation.
+ */
+export class CloudAuthHelper {
+  constructor(private readonly page: Page) {}
+
+  /**
+   * Set up all auth mocks. Must be called before `comfyPage.setup()`.
+   */
+  async mockAuth(): Promise<void> {
+    await this.seedFirebaseIndexedDB()
+    await this.mockFirebaseEndpoints()
+  }
+
+  /**
+   * Navigate to a lightweight same-origin page to seed Firebase's
+   * IndexedDB persistence with a mock user. This ensures the data
+   * is written before the app loads and Firebase reads it.
+   *
+   * Firebase auth uses `browserLocalPersistence` which stores data in
+   * IndexedDB database `firebaseLocalStorageDb`, object store
+   * `firebaseLocalStorage`, keyed by `firebase:authUser:<apiKey>:<appName>`.
+   */
+  private async seedFirebaseIndexedDB(): Promise<void> {
+    // Navigate to a lightweight endpoint to get a same-origin context
+    await this.page.goto('http://localhost:8188/api/users')
+
+    await this.page.evaluate(() => {
+      const MOCK_USER_DATA = {
+        uid: 'test-user-e2e',
+        email: 'e2e@test.comfy.org',
+        displayName: 'E2E Test User',
+        emailVerified: true,
+        isAnonymous: false,
+        providerData: [
+          {
+            providerId: 'google.com',
+            uid: 'test-user-e2e',
+            displayName: 'E2E Test User',
+            email: 'e2e@test.comfy.org',
+            phoneNumber: null,
+            photoURL: null
+          }
+        ],
+        stsTokenManager: {
+          refreshToken: 'mock-refresh-token',
+          accessToken: 'mock-firebase-id-token',
+          expirationTime: Date.now() + 60 * 60 * 1000
+        },
+        apiKey: 'AIzaSyDa_YMeyzV0SkVe92vBZ1tVikWBmOU5KVE',
+        appName: '[DEFAULT]'
+      }
+
+      const DB_NAME = 'firebaseLocalStorageDb'
+      const STORE_NAME = 'firebaseLocalStorage'
+      const KEY = `firebase:authUser:${MOCK_USER_DATA.apiKey}:${MOCK_USER_DATA.appName}`
+
+      return new Promise<void>((resolve, reject) => {
+        const request = indexedDB.open(DB_NAME)
+        request.onerror = () => reject(request.error)
+        request.onupgradeneeded = () => {
+          const db = request.result
+          if (!db.objectStoreNames.contains(STORE_NAME)) {
+            db.createObjectStore(STORE_NAME)
+          }
+        }
+        request.onsuccess = () => {
+          const db = request.result
+          if (!db.objectStoreNames.contains(STORE_NAME)) {
+            db.close()
+            const upgradeReq = indexedDB.open(DB_NAME, db.version + 1)
+            upgradeReq.onerror = () => reject(upgradeReq.error)
+            upgradeReq.onupgradeneeded = () => {
+              const upgradedDb = upgradeReq.result
+              if (!upgradedDb.objectStoreNames.contains(STORE_NAME)) {
+                upgradedDb.createObjectStore(STORE_NAME)
+              }
+            }
+            upgradeReq.onsuccess = () => {
+              const upgradedDb = upgradeReq.result
+              const tx = upgradedDb.transaction(STORE_NAME, 'readwrite')
+              tx.objectStore(STORE_NAME).put(
+                { fpiVersion: '1', value: MOCK_USER_DATA },
+                KEY
+              )
+              tx.oncomplete = () => {
+                upgradedDb.close()
+                resolve()
+              }
+              tx.onerror = () => reject(tx.error)
+            }
+            return
+          }
+          const tx = db.transaction(STORE_NAME, 'readwrite')
+          tx.objectStore(STORE_NAME).put(
+            { fpiVersion: '1', value: MOCK_USER_DATA },
+            KEY
+          )
+          tx.oncomplete = () => {
+            db.close()
+            resolve()
+          }
+          tx.onerror = () => reject(tx.error)
+        }
+      })
+    })
+  }
+
+  /**
+   * Intercept Firebase Auth REST API endpoints so the SDK can
+   * "refresh" the mock user's token without real credentials.
+   */
+  private async mockFirebaseEndpoints(): Promise<void> {
+    await this.page.route('**/securetoken.googleapis.com/**', (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          access_token: 'mock-access-token',
+          expires_in: '3600',
+          token_type: 'Bearer',
+          refresh_token: 'mock-refresh-token',
+          id_token: 'mock-firebase-id-token',
+          user_id: 'test-user-e2e',
+          project_id: 'dreamboothy-dev'
+        })
+      })
+    )
+
+    await this.page.route('**/identitytoolkit.googleapis.com/**', (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          kind: 'identitytoolkit#GetAccountInfoResponse',
+          users: [
+            {
+              localId: 'test-user-e2e',
+              email: 'e2e@test.comfy.org',
+              displayName: 'E2E Test User',
+              emailVerified: true,
+              validSince: '0',
+              lastLoginAt: String(Date.now()),
+              createdAt: String(Date.now()),
+              lastRefreshAt: new Date().toISOString()
+            }
+          ]
+        })
+      })
+    )
+
+    await this.page.route('**/__/auth/**', (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'text/html',
+        body: '<html><body></body></html>'
+      })
+    )
+  }
+}
diff --git a/browser_tests/fixtures/helpers/CommandHelper.ts b/browser_tests/fixtures/helpers/CommandHelper.ts
index c46906afd9..e1c5a669dc 100644
--- a/browser_tests/fixtures/helpers/CommandHelper.ts
+++ b/browser_tests/fixtures/helpers/CommandHelper.ts
@@ -1,6 +1,7 @@
 import type { Page } from '@playwright/test'
 
-import type { KeyCombo } from '../../../src/platform/keybindings/types'
+import type { KeyCombo } from '@/platform/keybindings/types'
+import { nextFrame } from '@e2e/fixtures/utils/timing'
 
 export class CommandHelper {
   constructor(private readonly page: Page) {}
@@ -20,6 +21,7 @@ export class CommandHelper {
       },
       { commandId, metadata }
     )
+    await nextFrame(this.page)
   }
 
   async registerCommand(
@@ -41,6 +43,7 @@ export class CommandHelper {
           commands: [
             {
               id: commandId,
+              // oxlint-disable-next-line no-eval -- intentional: eval reconstructs a serialized function inside Playwright's page context
               function: eval(commandStr)
             }
           ]
@@ -76,6 +79,7 @@ export class CommandHelper {
           commands: [
             {
               id: commandId,
+              // oxlint-disable-next-line no-eval -- intentional: eval reconstructs a serialized function inside Playwright's page context
               function: eval(commandStr)
             }
           ]
diff --git a/browser_tests/fixtures/helpers/DragDropHelper.ts b/browser_tests/fixtures/helpers/DragDropHelper.ts
index 2f17c98aae..207fc3af41 100644
--- a/browser_tests/fixtures/helpers/DragDropHelper.ts
+++ b/browser_tests/fixtures/helpers/DragDropHelper.ts
@@ -2,22 +2,13 @@ import { readFileSync } from 'fs'
 
 import type { Page } from '@playwright/test'
 
-import type { Position } from '../types'
-import { getMimeType } from './mimeTypeUtil'
+import type { Position } from '@e2e/fixtures/types'
+import { getMimeType } from '@e2e/fixtures/helpers/mimeTypeUtil'
+import { assetPath } from '@e2e/fixtures/utils/paths'
+import { nextFrame } from '@e2e/fixtures/utils/timing'
 
 export class DragDropHelper {
-  constructor(
-    private readonly page: Page,
-    private readonly assetPath: (fileName: string) => string
-  ) {}
-
-  private async nextFrame(): Promise<void> {
-    await this.page.evaluate(() => {
-      return new Promise<void>((resolve) => {
-        requestAnimationFrame(() => resolve())
-      })
-    })
-  }
+  constructor(private readonly page: Page) {}
 
   async dragAndDropExternalResource(
     options: {
@@ -49,7 +40,7 @@ export class DragDropHelper {
     } = { dropPosition, preserveNativePropagation }
 
     if (fileName) {
-      const filePath = this.assetPath(fileName)
+      const filePath = assetPath(fileName)
       const buffer = readFileSync(filePath)
 
       evaluateParams.fileName = fileName
@@ -147,7 +138,7 @@ export class DragDropHelper {
       await uploadResponsePromise
     }
 
-    await this.nextFrame()
+    await nextFrame(this.page)
   }
 
   async dragAndDropFile(
diff --git a/browser_tests/fixtures/helpers/ExecutionHelper.ts b/browser_tests/fixtures/helpers/ExecutionHelper.ts
new file mode 100644
index 0000000000..1f53c45268
--- /dev/null
+++ b/browser_tests/fixtures/helpers/ExecutionHelper.ts
@@ -0,0 +1,211 @@
+import type { WebSocketRoute } from '@playwright/test'
+
+import type { RawJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { createMockJob } from '@e2e/fixtures/helpers/AssetsHelper'
+
+/**
+ * Helper for simulating prompt execution in e2e tests.
+ */
+export class ExecutionHelper {
+  private jobCounter = 0
+  private readonly completedJobs: RawJobListItem[] = []
+  private readonly page: ComfyPage['page']
+  private readonly command: ComfyPage['command']
+  private readonly assets: ComfyPage['assets']
+
+  constructor(
+    comfyPage: ComfyPage,
+    private readonly ws: WebSocketRoute
+  ) {
+    this.page = comfyPage.page
+    this.command = comfyPage.command
+    this.assets = comfyPage.assets
+  }
+
+  /**
+   * Intercept POST /api/prompt, execute Comfy.QueuePrompt, and return
+   * the synthetic job ID.
+   *
+   * The app receives a valid PromptResponse so storeJob() fires
+   * and registers the job against the active workflow path.
+   */
+  async run(): Promise<string> {
+    const jobId = `test-job-${++this.jobCounter}`
+
+    let fulfilled!: () => void
+    const prompted = new Promise<void>((r) => {
+      fulfilled = r
+    })
+
+    await this.page.route(
+      '**/api/prompt',
+      async (route) => {
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({
+            prompt_id: jobId,
+            node_errors: {}
+          })
+        })
+        fulfilled()
+      },
+      { times: 1 }
+    )
+
+    await this.command.executeCommand('Comfy.QueuePrompt')
+    await prompted
+
+    return jobId
+  }
+
+  /**
+   * Send a binary `b_preview_with_metadata` WS message (type 4).
+   * Encodes the metadata and a tiny 1x1 PNG so the app creates a blob URL.
+   */
+  latentPreview(jobId: string, nodeId: string): void {
+    const metadata = JSON.stringify({
+      node_id: nodeId,
+      display_node_id: nodeId,
+      parent_node_id: nodeId,
+      real_node_id: nodeId,
+      prompt_id: jobId,
+      image_type: 'image/png'
+    })
+    const metadataBytes = new TextEncoder().encode(metadata)
+
+    // 1x1 red PNG
+    const png = Buffer.from(
+      'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwADhQGAWjR9awAAAABJRU5ErkJggg==',
+      'base64'
+    )
+
+    // Binary format: [type:uint32][metadataLength:uint32][metadata][imageData]
+    const buf = new ArrayBuffer(8 + metadataBytes.length + png.length)
+    const view = new DataView(buf)
+    view.setUint32(0, 4) // type 4 = PREVIEW_IMAGE_WITH_METADATA
+    view.setUint32(4, metadataBytes.length)
+    new Uint8Array(buf, 8, metadataBytes.length).set(metadataBytes)
+    new Uint8Array(buf, 8 + metadataBytes.length).set(png)
+
+    this.ws.send(Buffer.from(buf))
+  }
+
+  /** Send `execution_start` WS event. */
+  executionStart(jobId: string): void {
+    this.ws.send(
+      JSON.stringify({
+        type: 'execution_start',
+        data: { prompt_id: jobId, timestamp: Date.now() }
+      })
+    )
+  }
+
+  /** Send `executing` WS event to signal which node is currently running. */
+  executing(jobId: string, nodeId: string | null): void {
+    this.ws.send(
+      JSON.stringify({
+        type: 'executing',
+        data: { prompt_id: jobId, node: nodeId }
+      })
+    )
+  }
+
+  /** Send `executed` WS event with node output. */
+  executed(
+    jobId: string,
+    nodeId: string,
+    output: Record<string, unknown>
+  ): void {
+    this.ws.send(
+      JSON.stringify({
+        type: 'executed',
+        data: {
+          prompt_id: jobId,
+          node: nodeId,
+          display_node: nodeId,
+          output
+        }
+      })
+    )
+  }
+
+  /** Send `execution_success` WS event. */
+  executionSuccess(jobId: string): void {
+    this.ws.send(
+      JSON.stringify({
+        type: 'execution_success',
+        data: { prompt_id: jobId, timestamp: Date.now() }
+      })
+    )
+  }
+
+  /** Send `execution_error` WS event. */
+  executionError(jobId: string, nodeId: string, message: string): void {
+    this.ws.send(
+      JSON.stringify({
+        type: 'execution_error',
+        data: {
+          prompt_id: jobId,
+          timestamp: Date.now(),
+          node_id: nodeId,
+          node_type: 'Unknown',
+          exception_message: message,
+          exception_type: 'RuntimeError',
+          traceback: []
+        }
+      })
+    )
+  }
+
+  /** Send `progress` WS event. */
+  progress(jobId: string, nodeId: string, value: number, max: number): void {
+    this.ws.send(
+      JSON.stringify({
+        type: 'progress',
+        data: { prompt_id: jobId, node: nodeId, value, max }
+      })
+    )
+  }
+
+  /**
+   * Complete a job by adding it to mock history, sending execution_success,
+   * and triggering a history refresh via a status event.
+   *
+   * Requires an {@link AssetsHelper} to be passed in the constructor.
+   */
+  async completeWithHistory(
+    jobId: string,
+    nodeId: string,
+    filename: string
+  ): Promise<void> {
+    this.completedJobs.push(
+      createMockJob({
+        id: jobId,
+        preview_output: {
+          filename,
+          subfolder: '',
+          type: 'output',
+          nodeId,
+          mediaType: 'images'
+        }
+      })
+    )
+
+    await this.assets.mockOutputHistory(this.completedJobs)
+    this.executionSuccess(jobId)
+    // Trigger queue/history refresh
+    this.status(0)
+  }
+
+  /** Send `status` WS event to update queue count. */
+  status(queueRemaining: number): void {
+    this.ws.send(
+      JSON.stringify({
+        type: 'status',
+        data: { status: { exec_info: { queue_remaining: queueRemaining } } }
+      })
+    )
+  }
+}
diff --git a/browser_tests/fixtures/helpers/KeyboardHelper.ts b/browser_tests/fixtures/helpers/KeyboardHelper.ts
index b2c30346eb..d176367521 100644
--- a/browser_tests/fixtures/helpers/KeyboardHelper.ts
+++ b/browser_tests/fixtures/helpers/KeyboardHelper.ts
@@ -1,13 +1,21 @@
 import type { Locator, Page } from '@playwright/test'
 
+import { nextFrame } from '@e2e/fixtures/utils/timing'
+
 export class KeyboardHelper {
   constructor(
     private readonly page: Page,
     private readonly canvas: Locator
   ) {}
 
-  private async nextFrame(): Promise<void> {
-    await this.page.evaluate(() => new Promise<number>(requestAnimationFrame))
+  async press(key: string, locator?: Locator | null): Promise<void> {
+    const target = locator ?? this.canvas
+    await target.press(key)
+    await nextFrame(this.page)
+  }
+
+  async delete(locator?: Locator | null): Promise<void> {
+    await this.press('Delete', locator)
   }
 
   async ctrlSend(
@@ -16,7 +24,7 @@ export class KeyboardHelper {
   ): Promise<void> {
     const target = locator ?? this.page.keyboard
     await target.press(`Control+${keyToPress}`)
-    await this.nextFrame()
+    await nextFrame(this.page)
   }
 
   async selectAll(locator?: Locator | null): Promise<void> {
diff --git a/browser_tests/fixtures/helpers/Load3DFixtures.ts b/browser_tests/fixtures/helpers/Load3DFixtures.ts
new file mode 100644
index 0000000000..331fa64341
--- /dev/null
+++ b/browser_tests/fixtures/helpers/Load3DFixtures.ts
@@ -0,0 +1,25 @@
+import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import { Load3DHelper } from '@e2e/tests/load3d/Load3DHelper'
+import { Load3DViewerHelper } from '@e2e/tests/load3d/Load3DViewerHelper'
+
+export const load3dTest = comfyPageFixture.extend<{
+  load3d: Load3DHelper
+}>({
+  load3d: async ({ comfyPage }, use) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.workflow.loadWorkflow('3d/load3d_node')
+    await comfyPage.vueNodes.waitForNodes()
+
+    const node = comfyPage.vueNodes.getNodeLocator('1')
+    await use(new Load3DHelper(node))
+  }
+})
+
+export const load3dViewerTest = load3dTest.extend<{
+  viewer: Load3DViewerHelper
+}>({
+  viewer: async ({ comfyPage }, use) => {
+    await comfyPage.settings.setSetting('Comfy.Load3D.3DViewerEnable', true)
+    await use(new Load3DViewerHelper(comfyPage.page))
+  }
+})
diff --git a/browser_tests/fixtures/helpers/ModelLibraryHelper.ts b/browser_tests/fixtures/helpers/ModelLibraryHelper.ts
new file mode 100644
index 0000000000..ec8a337ef8
--- /dev/null
+++ b/browser_tests/fixtures/helpers/ModelLibraryHelper.ts
@@ -0,0 +1,134 @@
+import type { Page, Route } from '@playwright/test'
+
+import type {
+  ModelFile,
+  ModelFolderInfo
+} from '@/platform/assets/schemas/assetSchema'
+
+const modelFoldersRoutePattern = /\/api\/experiment\/models$/
+const modelFilesRoutePattern = /\/api\/experiment\/models\/([^?]+)/
+const viewMetadataRoutePattern = /\/api\/view_metadata\/([^?]+)/
+
+export interface MockModelMetadata {
+  'modelspec.title'?: string
+  'modelspec.author'?: string
+  'modelspec.architecture'?: string
+  'modelspec.description'?: string
+  'modelspec.resolution'?: string
+  'modelspec.tags'?: string
+}
+
+export function createMockModelFolders(names: string[]): ModelFolderInfo[] {
+  return names.map((name) => ({ name, folders: [] }))
+}
+
+export function createMockModelFiles(
+  filenames: string[],
+  pathIndex = 0
+): ModelFile[] {
+  return filenames.map((name) => ({ name, pathIndex }))
+}
+
+export class ModelLibraryHelper {
+  private foldersRouteHandler: ((route: Route) => Promise<void>) | null = null
+  private filesRouteHandler: ((route: Route) => Promise<void>) | null = null
+  private metadataRouteHandler: ((route: Route) => Promise<void>) | null = null
+  private folders: ModelFolderInfo[] = []
+  private filesByFolder: Record<string, ModelFile[]> = {}
+  private metadataByModel: Record<string, MockModelMetadata> = {}
+
+  constructor(private readonly page: Page) {}
+
+  async mockModelFolders(folders: ModelFolderInfo[]): Promise<void> {
+    this.folders = [...folders]
+
+    if (this.foldersRouteHandler) return
+
+    this.foldersRouteHandler = async (route: Route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(this.folders)
+      })
+    }
+
+    await this.page.route(modelFoldersRoutePattern, this.foldersRouteHandler)
+  }
+
+  async mockModelFiles(folder: string, files: ModelFile[]): Promise<void> {
+    this.filesByFolder[folder] = [...files]
+
+    if (this.filesRouteHandler) return
+
+    this.filesRouteHandler = async (route: Route) => {
+      const match = route.request().url().match(modelFilesRoutePattern)
+      const folderName = match?.[1] ? decodeURIComponent(match[1]) : undefined
+      const files = folderName ? (this.filesByFolder[folderName] ?? []) : []
+
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(files)
+      })
+    }
+
+    await this.page.route(modelFilesRoutePattern, this.filesRouteHandler)
+  }
+
+  async mockMetadata(
+    entries: Record<string, MockModelMetadata>
+  ): Promise<void> {
+    Object.assign(this.metadataByModel, entries)
+
+    if (this.metadataRouteHandler) return
+
+    this.metadataRouteHandler = async (route: Route) => {
+      const url = new URL(route.request().url())
+      const filename = url.searchParams.get('filename') ?? ''
+      const metadata = this.metadataByModel[filename]
+
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(metadata ?? {})
+      })
+    }
+
+    await this.page.route(viewMetadataRoutePattern, this.metadataRouteHandler)
+  }
+
+  async mockFoldersWithFiles(config: Record<string, string[]>): Promise<void> {
+    const folderNames = Object.keys(config)
+    await this.mockModelFolders(createMockModelFolders(folderNames))
+    for (const [folder, files] of Object.entries(config)) {
+      await this.mockModelFiles(folder, createMockModelFiles(files))
+    }
+  }
+
+  async clearMocks(): Promise<void> {
+    this.folders = []
+    this.filesByFolder = {}
+    this.metadataByModel = {}
+
+    if (this.foldersRouteHandler) {
+      await this.page.unroute(
+        modelFoldersRoutePattern,
+        this.foldersRouteHandler
+      )
+      this.foldersRouteHandler = null
+    }
+
+    if (this.filesRouteHandler) {
+      await this.page.unroute(modelFilesRoutePattern, this.filesRouteHandler)
+      this.filesRouteHandler = null
+    }
+
+    if (this.metadataRouteHandler) {
+      await this.page.unroute(
+        viewMetadataRoutePattern,
+        this.metadataRouteHandler
+      )
+      this.metadataRouteHandler = null
+    }
+  }
+}
diff --git a/browser_tests/fixtures/helpers/NodeOperationsHelper.ts b/browser_tests/fixtures/helpers/NodeOperationsHelper.ts
index 92e9320a35..9a04328522 100644
--- a/browser_tests/fixtures/helpers/NodeOperationsHelper.ts
+++ b/browser_tests/fixtures/helpers/NodeOperationsHelper.ts
@@ -1,17 +1,20 @@
 import type { Locator } from '@playwright/test'
 
-import type {
-  LGraph,
-  LGraphNode
-} from '../../../src/lib/litegraph/src/litegraph'
-import type { NodeId } from '../../../src/platform/workflow/validation/schemas/workflowSchema'
-import type { ComfyPage } from '../ComfyPage'
-import { DefaultGraphPositions } from '../constants/defaultGraphPositions'
-import type { Position, Size } from '../types'
-import { NodeReference } from '../utils/litegraphUtils'
+import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { DefaultGraphPositions } from '@e2e/fixtures/constants/defaultGraphPositions'
+import type { Position, Size } from '@e2e/fixtures/types'
+import { NodeReference } from '@e2e/fixtures/utils/litegraphUtils'
 
 export class NodeOperationsHelper {
-  constructor(private comfyPage: ComfyPage) {}
+  public readonly promptDialogInput: Locator
+
+  constructor(private comfyPage: ComfyPage) {
+    this.promptDialogInput = this.page.locator(
+      '.p-dialog-content input[type="text"]'
+    )
+  }
 
   private get page() {
     return this.comfyPage.page
@@ -33,6 +36,12 @@ export class NodeOperationsHelper {
     })
   }
 
+  /** Remove all nodes from the graph and clean. */
+  async clearGraph() {
+    await this.comfyPage.settings.setSetting('Comfy.ConfirmClear', false)
+    await this.comfyPage.command.executeCommand('Comfy.ClearWorkflow')
+  }
+
   /** Reads from `window.app.graph` (the root workflow graph). */
   async getNodeCount(): Promise<number> {
     return await this.page.evaluate(() => window.app!.graph.nodes.length)
@@ -131,13 +140,11 @@ export class NodeOperationsHelper {
       { x: bottomRight.x - 2, y: bottomRight.y - 1 },
       target
     )
-    await this.comfyPage.nextFrame()
     if (revertAfter) {
       await this.comfyPage.canvasOps.dragAndDrop(
         { x: target.x - 2, y: target.y - 1 },
         bottomRight
       )
-      await this.comfyPage.nextFrame()
     }
   }
 
@@ -149,11 +156,6 @@ export class NodeOperationsHelper {
     }
     await node.clickContextMenuOption('Convert to Group Node')
     await this.fillPromptDialog(groupNodeName)
-    await this.comfyPage.nextFrame()
-  }
-
-  get promptDialogInput(): Locator {
-    return this.page.locator('.p-dialog-content input[type="text"]')
   }
 
   async fillPromptDialog(value: string): Promise<void> {
@@ -163,6 +165,22 @@ export class NodeOperationsHelper {
     await this.comfyPage.nextFrame()
   }
 
+  async panToNode(nodeRef: NodeReference): Promise<void> {
+    const nodePos = await nodeRef.getPosition()
+    await this.page.evaluate((pos) => {
+      const canvas = window.app!.canvas
+      canvas.ds.offset[0] = -pos.x + canvas.canvas.width / 2
+      canvas.ds.offset[1] = -pos.y + canvas.canvas.height / 2 + 100
+      canvas.setDirty(true, true)
+    }, nodePos)
+    await this.comfyPage.nextFrame()
+  }
+
+  async selectNodeWithPan(nodeRef: NodeReference): Promise<void> {
+    await this.panToNode(nodeRef)
+    await nodeRef.click('title')
+  }
+
   async dragTextEncodeNode2(): Promise<void> {
     await this.comfyPage.canvasOps.dragAndDrop(
       DefaultGraphPositions.textEncodeNode2,
@@ -171,7 +189,6 @@ export class NodeOperationsHelper {
         y: 300
       }
     )
-    await this.comfyPage.nextFrame()
   }
 
   async adjustEmptyLatentWidth(): Promise<void> {
diff --git a/browser_tests/fixtures/helpers/PerformanceHelper.ts b/browser_tests/fixtures/helpers/PerformanceHelper.ts
index d779dcfb04..ccb4ed9077 100644
--- a/browser_tests/fixtures/helpers/PerformanceHelper.ts
+++ b/browser_tests/fixtures/helpers/PerformanceHelper.ts
@@ -30,6 +30,8 @@ export interface PerfMeasurement {
   eventListeners: number
   totalBlockingTimeMs: number
   frameDurationMs: number
+  p95FrameDurationMs: number
+  allFrameDurationsMs: number[]
 }
 
 export class PerformanceHelper {
@@ -101,13 +103,13 @@ export class PerformanceHelper {
   }
 
   /**
-   * Measure average frame duration via rAF timing over a sample window.
-   * Returns average ms per frame (lower = better, 16.67 = 60fps).
+   * Measure individual frame durations via rAF timing over a sample window.
+   * Returns all per-frame durations so callers can compute avg, p95, etc.
    */
-  private async measureFrameDuration(sampleFrames = 10): Promise<number> {
+  private async measureFrameDurations(sampleFrames = 30): Promise<number[]> {
     return this.page.evaluate((frames) => {
-      return new Promise<number>((resolve) => {
-        const timeout = setTimeout(() => resolve(0), 5000)
+      return new Promise<number[]>((resolve) => {
+        const timeout = setTimeout(() => resolve([]), 5000)
         const timestamps: number[] = []
         let count = 0
         function tick(ts: number) {
@@ -118,11 +120,14 @@ export class PerformanceHelper {
           } else {
             clearTimeout(timeout)
             if (timestamps.length < 2) {
-              resolve(0)
+              resolve([])
               return
             }
-            const total = timestamps[timestamps.length - 1] - timestamps[0]
-            resolve(total / (timestamps.length - 1))
+            const durations: number[] = []
+            for (let i = 1; i < timestamps.length; i++) {
+              durations.push(timestamps[i] - timestamps[i - 1])
+            }
+            resolve(durations)
           }
         }
         requestAnimationFrame(tick)
@@ -177,11 +182,21 @@ export class PerformanceHelper {
       return after[key] - before[key]
     }
 
-    const [totalBlockingTimeMs, frameDurationMs] = await Promise.all([
+    const [totalBlockingTimeMs, allFrameDurationsMs] = await Promise.all([
       this.collectTBT(),
-      this.measureFrameDuration()
+      this.measureFrameDurations()
     ])
 
+    const frameDurationMs =
+      allFrameDurationsMs.length > 0
+        ? allFrameDurationsMs.reduce((a, b) => a + b, 0) /
+          allFrameDurationsMs.length
+        : 0
+
+    const sorted = [...allFrameDurationsMs].sort((a, b) => a - b)
+    const p95FrameDurationMs =
+      sorted.length > 0 ? sorted[Math.ceil(sorted.length * 0.95) - 1] : 0
+
     return {
       name,
       durationMs: delta('Timestamp') * 1000,
@@ -197,7 +212,9 @@ export class PerformanceHelper {
       scriptDurationMs: delta('ScriptDuration') * 1000,
       eventListeners: delta('JSEventListeners'),
       totalBlockingTimeMs,
-      frameDurationMs
+      frameDurationMs,
+      p95FrameDurationMs,
+      allFrameDurationsMs
     }
   }
 }
diff --git a/browser_tests/fixtures/helpers/Preview3DPipelineFixture.ts b/browser_tests/fixtures/helpers/Preview3DPipelineFixture.ts
new file mode 100644
index 0000000000..9ebfbcbb53
--- /dev/null
+++ b/browser_tests/fixtures/helpers/Preview3DPipelineFixture.ts
@@ -0,0 +1,283 @@
+import { expect } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
+
+import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { assetPath } from '@e2e/fixtures/utils/paths'
+import {
+  PREVIEW3D_CAMERA_AXIS_RESTORE_EPS,
+  PREVIEW3D_CAMERA_ZOOM_RESTORE_EPS,
+  preview3dCameraStatesDiffer as cameraStatesDiffer,
+  preview3dRestoreCameraStatesMatch
+} from '@e2e/fixtures/utils/preview3dCameraState'
+import { Load3DHelper } from '@e2e/tests/load3d/Load3DHelper'
+
+async function orbitDragFromCanvasCenter(
+  page: Page,
+  canvas: Locator,
+  delta: { dx: number; dy: number },
+  steps: number
+): Promise<void> {
+  await canvas.scrollIntoViewIfNeeded()
+  await expect
+    .poll(
+      async () => {
+        const b = await canvas.boundingBox()
+        return b !== null && b.width > 0 && b.height > 0
+      },
+      {
+        timeout: 15_000,
+        message:
+          '3D canvas should have non-zero bounding box before orbit drag (layout / WebGL surface ready)'
+      }
+    )
+    .toBe(true)
+
+  const box = await canvas.boundingBox()
+  expect(box, 'canvas bounding box should exist').not.toBeNull()
+  const cx = box!.x + box!.width / 2
+  const cy = box!.y + box!.height / 2
+  await page.mouse.move(cx, cy)
+  await page.mouse.down()
+  await page.mouse.move(cx + delta.dx, cy + delta.dy, { steps })
+  await page.mouse.up()
+}
+
+export class Preview3DPipelineContext {
+  /** Matches node ids in `browser_tests/assets/3d/preview3d_pipeline.json`. */
+  static readonly loadNodeId = '1'
+  /** Matches node ids in `browser_tests/assets/3d/preview3d_pipeline.json`. */
+  static readonly previewNodeId = '2'
+
+  readonly load3d: Load3DHelper
+  readonly preview3d: Load3DHelper
+
+  constructor(readonly comfyPage: ComfyPage) {
+    this.load3d = new Load3DHelper(
+      comfyPage.vueNodes.getNodeLocator(Preview3DPipelineContext.loadNodeId)
+    )
+    this.preview3d = new Load3DHelper(
+      comfyPage.vueNodes.getNodeLocator(Preview3DPipelineContext.previewNodeId)
+    )
+  }
+
+  async getModelFileWidgetValue(nodeId: string): Promise<string> {
+    return this.comfyPage.page.evaluate((id) => {
+      const node = window.app!.graph.getNodeById(Number(id))
+      if (!node?.widgets) return ''
+      const w = node.widgets.find((x) => x.name === 'model_file')
+      const v = w?.value
+      return typeof v === 'string' ? v : ''
+    }, nodeId)
+  }
+
+  async getLastTimeModelFile(nodeId: string): Promise<string> {
+    return this.comfyPage.page.evaluate((id) => {
+      const node = window.app!.graph.getNodeById(Number(id))
+      if (!node?.properties) return ''
+      const v = (node.properties as Record<string, unknown>)[
+        'Last Time Model File'
+      ]
+      return typeof v === 'string' ? v : ''
+    }, nodeId)
+  }
+
+  async getCameraStateFromProperties(nodeId: string): Promise<unknown> {
+    return this.comfyPage.page.evaluate((id) => {
+      const node = window.app!.graph.getNodeById(Number(id))
+      if (!node?.properties) return null
+      const cfg = (node.properties as Record<string, unknown>)['Camera Config']
+      if (cfg === null || typeof cfg !== 'object') return null
+      if (!('state' in cfg)) return null
+      const rec = cfg as Record<string, unknown>
+      return rec.state ?? null
+    }, nodeId)
+  }
+
+  async seedLoad3dWithCubeObj(): Promise<void> {
+    const fileChooserPromise = this.comfyPage.page.waitForEvent('filechooser')
+    await this.load3d.getUploadButton('upload 3d model').click()
+    const fileChooser = await fileChooserPromise
+    await fileChooser.setFiles(assetPath('cube.obj'))
+
+    await expect
+      .poll(() =>
+        this.getModelFileWidgetValue(Preview3DPipelineContext.loadNodeId)
+      )
+      .toContain('cube.obj')
+
+    await this.load3d.waitForModelLoaded()
+    await this.comfyPage.nextFrame()
+  }
+
+  async setNonDefaultLoad3dCameraState(): Promise<void> {
+    const initialCamera = await this.getCameraStateFromProperties(
+      Preview3DPipelineContext.loadNodeId
+    )
+    await orbitDragFromCanvasCenter(
+      this.comfyPage.page,
+      this.load3d.canvas,
+      { dx: 80, dy: 20 },
+      10
+    )
+    await this.comfyPage.nextFrame()
+
+    await expect
+      .poll(
+        async () => {
+          const current = await this.getCameraStateFromProperties(
+            Preview3DPipelineContext.loadNodeId
+          )
+          if (current === null) return false
+          if (initialCamera === null) return true
+          return cameraStatesDiffer(current, initialCamera, 1e-4)
+        },
+        {
+          timeout: 10_000,
+          message:
+            'Load3D camera state should change after orbit drag (see cameraStatesDiffer)'
+        }
+      )
+      .toBe(true)
+  }
+
+  async nudgePreview3dCameraIntoProperties(): Promise<void> {
+    await orbitDragFromCanvasCenter(
+      this.comfyPage.page,
+      this.preview3d.canvas,
+      { dx: -60, dy: 20 },
+      10
+    )
+    await this.comfyPage.nextFrame()
+  }
+
+  async alignPreview3dWorkflowUiSettings(): Promise<void> {
+    await this.comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await this.comfyPage.settings.setSetting(
+      'Comfy.Workflow.WorkflowTabsPosition',
+      'Sidebar'
+    )
+  }
+
+  async queuePromptAndWaitIdle(timeoutMs: number): Promise<void> {
+    await this.comfyPage.command.executeCommand('Comfy.QueuePrompt')
+    await this.comfyPage.workflow.waitForWorkflowIdle(timeoutMs)
+  }
+
+  async assertPreview3dExecutionOutputSettled(): Promise<void> {
+    const previewId = Preview3DPipelineContext.previewNodeId
+    await expect
+      .poll(() => this.getModelFileWidgetValue(previewId))
+      .not.toBe('')
+    const modelPath = await this.getModelFileWidgetValue(previewId)
+    expect(modelPath.length, 'Preview3D model path populated').toBeGreaterThan(
+      4
+    )
+    await expect
+      .poll(() => this.getLastTimeModelFile(previewId))
+      .toBe(modelPath)
+    await this.preview3d.waitForModelLoaded()
+  }
+
+  async assertPreview3dCanvasNonEmpty(): Promise<void> {
+    await expect
+      .poll(async () => {
+        const b = await this.preview3d.canvas.boundingBox()
+        return (b?.width ?? 0) > 0 && (b?.height ?? 0) > 0
+      })
+      .toBe(true)
+  }
+
+  async getPreview3dCameraStateWhenReady(): Promise<unknown> {
+    let last: unknown = null
+    await expect
+      .poll(
+        async () => {
+          last = await this.getCameraStateFromProperties(
+            Preview3DPipelineContext.previewNodeId
+          )
+          return last !== null
+        },
+        {
+          message:
+            'Preview3D Camera Config.state should exist after orbit (cameraChanged)'
+        }
+      )
+      .toBe(true)
+    return last
+  }
+
+  async saveNamedWorkflowToSidebar(prefix: string): Promise<string> {
+    const workflowName = `${prefix}-${Date.now().toString(36)}`
+    await this.comfyPage.menu.workflowsTab.open()
+    await this.comfyPage.menu.topbar.saveWorkflow(workflowName)
+    return workflowName
+  }
+
+  async reloadPageAndWaitForAppShell(): Promise<void> {
+    await this.comfyPage.page.reload({ waitUntil: 'domcontentloaded' })
+    await this.comfyPage.page.waitForFunction(
+      () => window.app && window.app.extensionManager,
+      { timeout: 30_000 }
+    )
+    await this.comfyPage.page.locator('.p-blockui-mask').waitFor({
+      state: 'hidden',
+      timeout: 30_000
+    })
+    await this.comfyPage.nextFrame()
+  }
+
+  async openPersistedWorkflowFromSidebar(workflowName: string): Promise<void> {
+    await this.alignPreview3dWorkflowUiSettings()
+    const tab = this.comfyPage.menu.workflowsTab
+    await tab.open()
+    await tab.getPersistedItem(workflowName).click()
+    await this.comfyPage.workflow.waitForWorkflowIdle(30_000)
+    await this.comfyPage.vueNodes.waitForNodes()
+  }
+
+  async assertPreview3dModelPathAndLastTime(path: string): Promise<void> {
+    const previewId = Preview3DPipelineContext.previewNodeId
+    await expect.poll(() => this.getModelFileWidgetValue(previewId)).toBe(path)
+    await expect.poll(() => this.getLastTimeModelFile(previewId)).toBe(path)
+    await this.preview3d.waitForModelLoaded()
+  }
+
+  async assertPreview3dCameraRestored(savedCamera: unknown): Promise<void> {
+    await expect
+      .poll(
+        async () =>
+          preview3dRestoreCameraStatesMatch(
+            await this.getCameraStateFromProperties(
+              Preview3DPipelineContext.previewNodeId
+            ),
+            savedCamera
+          ),
+        {
+          timeout: 15_000,
+          message: `Preview3D camera after reload should match saved state (axis max delta ≤ ${PREVIEW3D_CAMERA_AXIS_RESTORE_EPS}, zoom delta ≤ ${PREVIEW3D_CAMERA_ZOOM_RESTORE_EPS}; see browser_tests/fixtures/utils/preview3dCameraState.ts)`
+        }
+      )
+      .toBe(true)
+  }
+}
+
+export const preview3dPipelineTest = comfyPageFixture.extend<{
+  preview3dPipeline: Preview3DPipelineContext
+}>({
+  preview3dPipeline: async ({ comfyPage }, use) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.settings.setSetting(
+      'Comfy.Workflow.WorkflowTabsPosition',
+      'Sidebar'
+    )
+
+    await comfyPage.workflow.loadWorkflow('3d/preview3d_pipeline')
+    await comfyPage.vueNodes.waitForNodes()
+
+    const pipeline = new Preview3DPipelineContext(comfyPage)
+    await use(pipeline)
+
+    await comfyPage.workflow.setupWorkflowsDirectory({})
+  }
+})
diff --git a/browser_tests/fixtures/helpers/QueueHelper.ts b/browser_tests/fixtures/helpers/QueueHelper.ts
deleted file mode 100644
index f393aa976a..0000000000
--- a/browser_tests/fixtures/helpers/QueueHelper.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import type { Page, Route } from '@playwright/test'
-
-export class QueueHelper {
-  private queueRouteHandler: ((route: Route) => void) | null = null
-  private historyRouteHandler: ((route: Route) => void) | null = null
-
-  constructor(private readonly page: Page) {}
-
-  /**
-   * Mock the /api/queue endpoint to return specific queue state.
-   */
-  async mockQueueState(
-    running: number = 0,
-    pending: number = 0
-  ): Promise<void> {
-    this.queueRouteHandler = (route: Route) =>
-      route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify({
-          queue_running: Array.from({ length: running }, (_, i) => [
-            i,
-            `running-${i}`,
-            {},
-            {},
-            []
-          ]),
-          queue_pending: Array.from({ length: pending }, (_, i) => [
-            i,
-            `pending-${i}`,
-            {},
-            {},
-            []
-          ])
-        })
-      })
-    await this.page.route('**/api/queue', this.queueRouteHandler)
-  }
-
-  /**
-   * Mock the /api/history endpoint with completed/failed job entries.
-   */
-  async mockHistory(
-    jobs: Array<{ promptId: string; status: 'success' | 'error' }>
-  ): Promise<void> {
-    const history: Record<string, unknown> = {}
-    for (const job of jobs) {
-      history[job.promptId] = {
-        prompt: [0, job.promptId, {}, {}, []],
-        outputs: {},
-        status: {
-          status_str: job.status === 'success' ? 'success' : 'error',
-          completed: true
-        }
-      }
-    }
-    this.historyRouteHandler = (route: Route) =>
-      route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify(history)
-      })
-    await this.page.route('**/api/history**', this.historyRouteHandler)
-  }
-
-  /**
-   * Clear all route mocks set by this helper.
-   */
-  async clearMocks(): Promise<void> {
-    if (this.queueRouteHandler) {
-      await this.page.unroute('**/api/queue', this.queueRouteHandler)
-      this.queueRouteHandler = null
-    }
-    if (this.historyRouteHandler) {
-      await this.page.unroute('**/api/history**', this.historyRouteHandler)
-      this.historyRouteHandler = null
-    }
-  }
-}
diff --git a/browser_tests/fixtures/helpers/SettingsHelper.ts b/browser_tests/fixtures/helpers/SettingsHelper.ts
index 8ff512d95c..316ff43870 100644
--- a/browser_tests/fixtures/helpers/SettingsHelper.ts
+++ b/browser_tests/fixtures/helpers/SettingsHelper.ts
@@ -1,5 +1,7 @@
 import type { Page } from '@playwright/test'
 
+import { nextFrame } from '@e2e/fixtures/utils/timing'
+
 export class SettingsHelper {
   constructor(private readonly page: Page) {}
 
@@ -10,6 +12,7 @@ export class SettingsHelper {
       },
       { id: settingId, value: settingValue }
     )
+    await nextFrame(this.page)
   }
 
   async getSetting<T = unknown>(settingId: string): Promise<T> {
diff --git a/browser_tests/fixtures/helpers/SubgraphHelper.ts b/browser_tests/fixtures/helpers/SubgraphHelper.ts
index c33fc796a0..ea5677a6c1 100644
--- a/browser_tests/fixtures/helpers/SubgraphHelper.ts
+++ b/browser_tests/fixtures/helpers/SubgraphHelper.ts
@@ -1,15 +1,17 @@
 import { expect } from '@playwright/test'
-import type { Page } from '@playwright/test'
+import type { ConsoleMessage, Locator, Page } from '@playwright/test'
 
 import type {
   CanvasPointerEvent,
   Subgraph
 } from '@/lib/litegraph/src/litegraph'
+import type { ComfyWorkflow } from '@/platform/workflow/management/stores/comfyWorkflow'
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 
-import type { ComfyPage } from '../ComfyPage'
-import { TestIds } from '../selectors'
-import type { NodeReference } from '../utils/litegraphUtils'
-import { SubgraphSlotReference } from '../utils/litegraphUtils'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+import type { NodeReference } from '@e2e/fixtures/utils/litegraphUtils'
+import { SubgraphSlotReference } from '@e2e/fixtures/utils/litegraphUtils'
 
 export class SubgraphHelper {
   constructor(private readonly comfyPage: ComfyPage) {}
@@ -156,7 +158,7 @@ export class SubgraphHelper {
 
     // Wait for the appropriate UI element to appear
     if (action === 'rightClick') {
-      await this.page.waitForSelector('.litemenu-entry', {
+      await this.page.locator('.litemenu-entry').first().waitFor({
         state: 'visible',
         timeout: 5000
       })
@@ -413,4 +415,167 @@ export class SubgraphHelper {
       return window.app!.canvas.graph!.nodes?.length || 0
     })
   }
+
+  async getSlotCount(type: 'input' | 'output'): Promise<number> {
+    return this.page.evaluate((slotType: 'input' | 'output') => {
+      const graph = window.app!.canvas.graph
+      if (!graph || !('inputNode' in graph)) return 0
+      return graph[`${slotType}s`]?.length ?? 0
+    }, type)
+  }
+
+  async getSlotLabel(
+    type: 'input' | 'output',
+    index = 0
+  ): Promise<string | null> {
+    return this.page.evaluate(
+      ([slotType, idx]) => {
+        const graph = window.app!.canvas.graph
+        if (!graph || !('inputNode' in graph)) return null
+        const slot = graph[`${slotType}s`]?.[idx]
+        return slot?.label ?? slot?.name ?? null
+      },
+      [type, index] as const
+    )
+  }
+
+  async removeSlot(type: 'input' | 'output', slotName?: string): Promise<void> {
+    if (type === 'input') {
+      await this.rightClickInputSlot(slotName)
+    } else {
+      await this.rightClickOutputSlot(slotName)
+    }
+    await this.comfyPage.contextMenu.clickLitegraphMenuItem('Remove Slot')
+    await this.comfyPage.contextMenu.waitForHidden()
+  }
+
+  async findSubgraphNodeId(): Promise<string> {
+    const id = await this.page.evaluate(() => {
+      const graph = window.app!.canvas.graph!
+      const node = graph.nodes.find(
+        (n) => typeof n.isSubgraphNode === 'function' && n.isSubgraphNode()
+      )
+      return node ? String(node.id) : null
+    })
+    if (!id) throw new Error('No subgraph node found in current graph')
+    return id
+  }
+
+  async serializeAndReload(): Promise<void> {
+    const serialized = await this.page.evaluate(() =>
+      window.app!.graph!.serialize()
+    )
+    await this.comfyPage.workflow.loadGraphData(serialized as ComfyWorkflowJSON)
+  }
+
+  async convertDefaultKSamplerToSubgraph(): Promise<NodeReference> {
+    await this.comfyPage.workflow.loadWorkflow('default')
+    const ksampler = await this.comfyPage.nodeOps.getNodeRefById('3')
+    await ksampler.click('title')
+    const subgraphNode = await ksampler.convertToSubgraph()
+    return subgraphNode
+  }
+
+  async packAllInteriorNodes(hostNodeId: string): Promise<void> {
+    await this.comfyPage.vueNodes.enterSubgraph(hostNodeId)
+    await this.comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
+    await this.comfyPage.canvas.dispatchEvent('pointerdown', {
+      bubbles: true,
+      cancelable: true,
+      button: 0
+    })
+    await this.comfyPage.canvas.dispatchEvent('pointerup', {
+      bubbles: true,
+      cancelable: true,
+      button: 0
+    })
+    await this.comfyPage.canvas.press('Control+a')
+    await this.comfyPage.nextFrame()
+    await this.page.evaluate(() => {
+      const canvas = window.app!.canvas
+      canvas.graph!.convertToSubgraph(canvas.selectedItems)
+    })
+    await this.comfyPage.nextFrame()
+    await this.exitViaBreadcrumb()
+    await this.comfyPage.canvas.dispatchEvent('pointerdown', {
+      bubbles: true,
+      cancelable: true,
+      button: 0
+    })
+    await this.comfyPage.canvas.dispatchEvent('pointerup', {
+      bubbles: true,
+      cancelable: true,
+      button: 0
+    })
+    await this.comfyPage.nextFrame()
+  }
+  async publishSubgraph(name: string = 'test blueprint') {
+    await this.comfyPage.command.executeCommand('Comfy.PublishSubgraph', {
+      name
+    })
+  }
+
+  //Blueprints will show an overwrite confirmation dialogue if they have not
+  //already been saved during the active session.
+  //Forcibly reset this flag without an expensive reload operation.
+  async setSaveUnpromptedOnActiveBlueprint() {
+    await this.page.evaluate(() => {
+      const { activeWorkflow } = window.app!.extensionManager.workflow
+      ;(
+        activeWorkflow as ComfyWorkflow & { hasPromptedSave: boolean }
+      ).hasPromptedSave = false
+    })
+  }
+
+  static getTextSlotPosition(page: Page, nodeId: string) {
+    return page.evaluate((id) => {
+      const node = window.app!.canvas.graph!.getNodeById(id)
+      if (!node) return null
+
+      const titleHeight = window.LiteGraph!.NODE_TITLE_HEIGHT
+
+      for (const input of node.inputs) {
+        if (!input.widget || input.type !== 'STRING') continue
+        return {
+          hasPos: !!input.pos,
+          posY: input.pos?.[1] ?? null,
+          widgetName: input.widget.name,
+          titleHeight
+        }
+      }
+      return null
+    }, nodeId)
+  }
+
+  static async expectWidgetBelowHeader(
+    nodeLocator: Locator,
+    widgetLocator: Locator
+  ): Promise<void> {
+    const headerBox = await nodeLocator
+      .locator('[data-testid^="node-header-"]')
+      .boundingBox()
+    const widgetBox = await widgetLocator.boundingBox()
+    if (!headerBox || !widgetBox)
+      throw new Error('Header or widget bounding box not found')
+    expect(widgetBox.y).toBeGreaterThan(headerBox.y + headerBox.height)
+  }
+
+  static collectConsoleWarnings(
+    page: Page,
+    patterns: string[] = [
+      'No link found',
+      'Failed to resolve legacy -1',
+      'No inner link found'
+    ]
+  ): { warnings: string[]; dispose: () => void } {
+    const warnings: string[] = []
+    const handler = (msg: ConsoleMessage) => {
+      const text = msg.text()
+      if (patterns.some((p) => text.includes(p))) {
+        warnings.push(text)
+      }
+    }
+    page.on('console', handler)
+    return { warnings, dispose: () => page.off('console', handler) }
+  }
 }
diff --git a/browser_tests/fixtures/helpers/ToastHelper.ts b/browser_tests/fixtures/helpers/ToastHelper.ts
index 544e203167..7fc175bcf8 100644
--- a/browser_tests/fixtures/helpers/ToastHelper.ts
+++ b/browser_tests/fixtures/helpers/ToastHelper.ts
@@ -2,20 +2,12 @@ import { expect } from '@playwright/test'
 import type { Locator, Page } from '@playwright/test'
 
 export class ToastHelper {
-  constructor(private readonly page: Page) {}
+  public readonly visibleToasts: Locator
+  public readonly toastErrors: Locator
 
-  get visibleToasts(): Locator {
-    return this.page.locator('.p-toast-message:visible')
-  }
-
-  async getToastErrorCount(): Promise<number> {
-    return await this.page
-      .locator('.p-toast-message.p-toast-message-error')
-      .count()
-  }
-
-  async getVisibleToastCount(): Promise<number> {
-    return await this.visibleToasts.count()
+  constructor(private readonly page: Page) {
+    this.visibleToasts = page.locator('.p-toast-message:visible')
+    this.toastErrors = page.locator('.p-toast-message.p-toast-message-error')
   }
 
   async closeToasts(requireCount = 0): Promise<void> {
@@ -34,6 +26,6 @@ export class ToastHelper {
     }
 
     // Assert all toasts are closed
-    await expect(this.visibleToasts).toHaveCount(0, { timeout: 1000 })
+    await expect(this.visibleToasts).toHaveCount(0)
   }
 }
diff --git a/browser_tests/fixtures/helpers/WorkflowHelper.ts b/browser_tests/fixtures/helpers/WorkflowHelper.ts
index 234e8bd636..47f6dd5e79 100644
--- a/browser_tests/fixtures/helpers/WorkflowHelper.ts
+++ b/browser_tests/fixtures/helpers/WorkflowHelper.ts
@@ -1,11 +1,15 @@
 import { readFileSync } from 'fs'
 
+import { test } from '@playwright/test'
+
+import type { AppMode } from '@/composables/useAppMode'
 import type {
   ComfyApiWorkflow,
   ComfyWorkflowJSON
-} from '../../../src/platform/workflow/validation/schemas/workflowSchema'
-import type { WorkspaceStore } from '../../types/globals'
-import type { ComfyPage } from '../ComfyPage'
+} from '@/platform/workflow/validation/schemas/workflowSchema'
+import type { WorkspaceStore } from '@e2e/types/globals'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { assetPath } from '@e2e/fixtures/utils/paths'
 
 type FolderStructure = {
   [key: string]: FolderStructure | string
@@ -19,7 +23,7 @@ export class WorkflowHelper {
 
     for (const [key, value] of Object.entries(structure)) {
       if (typeof value === 'string') {
-        const filePath = this.comfyPage.assetPath(value)
+        const filePath = assetPath(value)
         result[key] = readFileSync(filePath, 'utf-8')
       } else {
         result[key] = this.convertLeafToContent(value)
@@ -56,13 +60,35 @@ export class WorkflowHelper {
     await this.comfyPage.nextFrame()
   }
 
-  async loadWorkflow(workflowName: string) {
-    await this.comfyPage.workflowUploadInput.setInputFiles(
-      this.comfyPage.assetPath(`${workflowName}.json`)
+  async waitForDraftPersisted({ timeout = 5000 } = {}) {
+    await this.comfyPage.page.waitForFunction(
+      () =>
+        Object.keys(localStorage).some((k) =>
+          k.startsWith('Comfy.Workflow.Draft.v2:')
+        ),
+      { timeout }
+    )
+  }
+
+  async loadGraphData(workflow: ComfyWorkflowJSON): Promise<void> {
+    await this.comfyPage.page.evaluate(
+      (wf) => window.app!.loadGraphData(wf),
+      workflow
     )
     await this.comfyPage.nextFrame()
   }
 
+  async loadWorkflow(workflowName: string) {
+    await this.comfyPage.workflowUploadInput.setInputFiles(
+      assetPath(`${workflowName}.json`)
+    )
+    await this.waitForWorkflowIdle()
+    await this.comfyPage.nextFrame()
+    if (test.info().tags.includes('@vue-nodes')) {
+      await this.comfyPage.vueNodes.waitForNodes()
+    }
+  }
+
   async deleteWorkflow(
     workflowName: string,
     whenMissing: 'ignoreMissing' | 'throwIfMissing' = 'ignoreMissing'
@@ -104,6 +130,48 @@ export class WorkflowHelper {
     })
   }
 
+  async waitForActiveWorkflow(): Promise<void> {
+    await this.comfyPage.page.waitForFunction(
+      () =>
+        (window.app!.extensionManager as WorkspaceStore).workflow
+          .activeWorkflow !== null
+    )
+  }
+
+  async getActiveWorkflowPath(): Promise<string | undefined> {
+    return this.comfyPage.page.evaluate(() => {
+      return (window.app!.extensionManager as WorkspaceStore).workflow
+        .activeWorkflow?.path
+    })
+  }
+
+  async getActiveWorkflowActiveAppMode(): Promise<AppMode | null | undefined> {
+    return this.comfyPage.page.evaluate(() => {
+      return (window.app!.extensionManager as WorkspaceStore).workflow
+        .activeWorkflow?.activeMode
+    })
+  }
+
+  async getActiveWorkflowInitialMode(): Promise<AppMode | null | undefined> {
+    return this.comfyPage.page.evaluate(() => {
+      return (window.app!.extensionManager as WorkspaceStore).workflow
+        .activeWorkflow?.initialMode
+    })
+  }
+
+  async getLinearModeFromGraph(): Promise<boolean | undefined> {
+    return this.comfyPage.page.evaluate(() => {
+      return window.app!.rootGraph.extra?.linearMode as boolean | undefined
+    })
+  }
+
+  async getOpenWorkflowCount(): Promise<number> {
+    return this.comfyPage.page.evaluate(() => {
+      return (window.app!.extensionManager as WorkspaceStore).workflow.workflows
+        .length
+    })
+  }
+
   async isCurrentWorkflowModified(): Promise<boolean | undefined> {
     return this.comfyPage.page.evaluate(() => {
       return (window.app!.extensionManager as WorkspaceStore).workflow
@@ -111,6 +179,21 @@ export class WorkflowHelper {
     })
   }
 
+  async waitForWorkflowIdle(timeout = 5000): Promise<void> {
+    await this.comfyPage.page.waitForFunction(
+      () =>
+        !(window.app?.extensionManager as WorkspaceStore | undefined)?.workflow
+          ?.isBusy,
+      undefined,
+      { timeout }
+    )
+  }
+
+  async switchToTab(tabName: string): Promise<void> {
+    await this.comfyPage.menu.topbar.getWorkflowTab(tabName).click()
+    await this.waitForWorkflowIdle()
+  }
+
   async getExportedWorkflow(options: { api: true }): Promise<ComfyApiWorkflow>
   async getExportedWorkflow(options?: {
     api?: false
diff --git a/browser_tests/fixtures/selectors.ts b/browser_tests/fixtures/selectors.ts
index ad30568f9d..12d9101ad0 100644
--- a/browser_tests/fixtures/selectors.ts
+++ b/browser_tests/fixtures/selectors.ts
@@ -20,6 +20,11 @@ export const TestIds = {
     main: 'graph-canvas',
     contextMenu: 'canvas-context-menu',
     toggleMinimapButton: 'toggle-minimap-button',
+    closeMinimapButton: 'close-minimap-button',
+    minimapContainer: 'minimap-container',
+    minimapCanvas: 'minimap-canvas',
+    minimapViewport: 'minimap-viewport',
+    minimapInteractionOverlay: 'minimap-interaction-overlay',
     toggleLinkVisibilityButton: 'toggle-link-visibility-button',
     zoomControlsButton: 'zoom-controls-button',
     zoomInAction: 'zoom-in-action',
@@ -40,10 +45,33 @@ export const TestIds = {
     missingNodeCard: 'missing-node-card',
     errorCardFindOnGithub: 'error-card-find-on-github',
     errorCardCopy: 'error-card-copy',
+    errorDialog: 'error-dialog',
+    errorDialogShowReport: 'error-dialog-show-report',
+    errorDialogContactSupport: 'error-dialog-contact-support',
+    errorDialogCopyReport: 'error-dialog-copy-report',
+    errorDialogFindIssues: 'error-dialog-find-issues',
     about: 'about-panel',
     whatsNewSection: 'whats-new-section',
     missingNodePacksGroup: 'error-group-missing-node',
-    missingModelsGroup: 'error-group-missing-model'
+    missingModelsGroup: 'error-group-missing-model',
+    missingModelExpand: 'missing-model-expand',
+    missingModelLocate: 'missing-model-locate',
+    missingModelCopyName: 'missing-model-copy-name',
+    missingModelCopyUrl: 'missing-model-copy-url',
+    missingModelDownload: 'missing-model-download',
+    missingModelImportUnsupported: 'missing-model-import-unsupported',
+    missingMediaGroup: 'error-group-missing-media',
+    missingMediaRow: 'missing-media-row',
+    missingMediaUploadDropzone: 'missing-media-upload-dropzone',
+    missingMediaLibrarySelect: 'missing-media-library-select',
+    missingMediaStatusCard: 'missing-media-status-card',
+    missingMediaConfirmButton: 'missing-media-confirm-button',
+    missingMediaCancelButton: 'missing-media-cancel-button',
+    missingMediaLocateButton: 'missing-media-locate-button',
+    publishTabPanel: 'publish-tab-panel',
+    apiSignin: 'api-signin-dialog',
+    updatePassword: 'update-password-dialog',
+    cloudNotification: 'cloud-notification-dialog'
   },
   keybindings: {
     presetMenu: 'keybinding-preset-menu'
@@ -51,23 +79,42 @@ export const TestIds = {
   topbar: {
     queueButton: 'queue-button',
     queueModeMenuTrigger: 'queue-mode-menu-trigger',
-    saveButton: 'save-workflow-button'
+    saveButton: 'save-workflow-button',
+    subscribeButton: 'topbar-subscribe-button'
   },
   nodeLibrary: {
     bookmarksSection: 'node-library-bookmarks-section'
   },
   propertiesPanel: {
-    root: 'properties-panel'
+    root: 'properties-panel',
+    errorsTab: 'panel-tab-errors'
+  },
+  subgraphEditor: {
+    toggle: 'subgraph-editor-toggle',
+    shownSection: 'subgraph-editor-shown-section',
+    hiddenSection: 'subgraph-editor-hidden-section',
+    widgetToggle: 'subgraph-widget-toggle',
+    widgetLabel: 'subgraph-widget-label',
+    iconLink: 'icon-link',
+    iconEye: 'icon-eye',
+    widgetActionsMenuButton: 'widget-actions-menu-button'
   },
   node: {
-    titleInput: 'node-title-input'
+    titleInput: 'node-title-input',
+    pinIndicator: 'node-pin-indicator',
+    innerWrapper: 'node-inner-wrapper',
+    mainImage: 'main-image'
   },
   selectionToolbox: {
+    root: 'selection-toolbox',
     colorPickerButton: 'color-picker-button',
     colorPickerCurrentColor: 'color-picker-current-color',
     colorBlue: 'blue',
     colorRed: 'red'
   },
+  menu: {
+    moreMenuContent: 'more-menu-content'
+  },
   widgets: {
     container: 'node-widgets',
     widget: 'node-widget',
@@ -77,10 +124,56 @@ export const TestIds = {
     subgraphEnterButton: 'subgraph-enter-button'
   },
   builder: {
+    footerNav: 'builder-footer-nav',
+    saveButton: 'builder-save-button',
+    saveAsButton: 'builder-save-as-button',
+    saveGroup: 'builder-save-group',
+    saveAsChevron: 'builder-save-as-chevron',
     ioItem: 'builder-io-item',
     ioItemTitle: 'builder-io-item-title',
+    ioItemSubtitle: 'builder-io-item-subtitle',
     widgetActionsMenu: 'widget-actions-menu',
-    opensAs: 'builder-opens-as'
+    opensAs: 'builder-opens-as',
+    widgetItem: 'builder-widget-item',
+    widgetLabel: 'builder-widget-label',
+    outputPlaceholder: 'builder-output-placeholder',
+    connectOutputPopover: 'builder-connect-output-popover',
+    connectOutputSwitch: 'builder-connect-output-switch',
+    emptyWorkflowDialog: 'builder-empty-workflow-dialog',
+    emptyWorkflowBack: 'builder-empty-workflow-back',
+    emptyWorkflowLoadTemplate: 'builder-empty-workflow-load-template'
+  },
+  outputHistory: {
+    outputs: 'linear-outputs',
+    welcome: 'linear-welcome',
+    outputInfo: 'linear-output-info',
+    activeQueue: 'linear-job',
+    queueBadge: 'linear-job-badge',
+    inProgressItem: 'linear-in-progress-item',
+    historyItem: 'linear-history-item',
+    skeleton: 'linear-skeleton',
+    latentPreview: 'linear-latent-preview',
+    imageOutput: 'linear-image-output',
+    videoOutput: 'linear-video-output',
+    cancelRun: 'linear-cancel-run',
+    headerProgressBar: 'linear-header-progress-bar',
+    itemProgressBar: 'linear-item-progress-bar',
+    progressOverall: 'linear-progress-overall',
+    progressNode: 'linear-progress-node'
+  },
+  appMode: {
+    widgetItem: 'app-mode-widget-item',
+    welcome: 'linear-welcome',
+    emptyWorkflow: 'linear-welcome-empty-workflow',
+    buildApp: 'linear-welcome-build-app',
+    backToWorkflow: 'linear-welcome-back-to-workflow',
+    loadTemplate: 'linear-welcome-load-template',
+    arrangePreview: 'linear-arrange-preview',
+    arrangeNoOutputs: 'linear-arrange-no-outputs',
+    arrangeSwitchToOutputs: 'linear-arrange-switch-to-outputs',
+    vueNodeSwitchPopup: 'linear-vue-node-switch-popup',
+    vueNodeSwitchDismiss: 'linear-vue-node-switch-dismiss',
+    vueNodeSwitchDontShowAgain: 'linear-vue-node-switch-dont-show-again'
   },
   breadcrumb: {
     subgraph: 'subgraph-breadcrumb'
@@ -92,9 +185,29 @@ export const TestIds = {
   user: {
     currentUserIndicator: 'current-user-indicator'
   },
+  queue: {
+    overlayToggle: 'queue-overlay-toggle',
+    clearHistoryAction: 'clear-history-action'
+  },
   errors: {
     imageLoadError: 'error-loading-image',
     videoLoadError: 'error-loading-video'
+  },
+  loading: {
+    overlay: 'loading-overlay'
+  },
+  load3dViewer: {
+    sidebar: 'load3d-viewer-sidebar'
+  },
+  imageCompare: {
+    viewport: 'image-compare-viewport',
+    empty: 'image-compare-empty',
+    batchNav: 'batch-nav',
+    beforeBatch: 'before-batch',
+    afterBatch: 'after-batch',
+    batchCounter: 'batch-counter',
+    batchNext: 'batch-next',
+    batchPrev: 'batch-prev'
   }
 } as const
 
@@ -114,10 +227,18 @@ export type TestIdValue =
   | (typeof TestIds.selectionToolbox)[keyof typeof TestIds.selectionToolbox]
   | (typeof TestIds.widgets)[keyof typeof TestIds.widgets]
   | (typeof TestIds.builder)[keyof typeof TestIds.builder]
+  | (typeof TestIds.outputHistory)[keyof typeof TestIds.outputHistory]
+  | (typeof TestIds.appMode)[keyof typeof TestIds.appMode]
   | (typeof TestIds.breadcrumb)[keyof typeof TestIds.breadcrumb]
   | Exclude<
       (typeof TestIds.templates)[keyof typeof TestIds.templates],
       (id: string) => string
     >
   | (typeof TestIds.user)[keyof typeof TestIds.user]
+  | (typeof TestIds.menu)[keyof typeof TestIds.menu]
+  | (typeof TestIds.subgraphEditor)[keyof typeof TestIds.subgraphEditor]
+  | (typeof TestIds.queue)[keyof typeof TestIds.queue]
   | (typeof TestIds.errors)[keyof typeof TestIds.errors]
+  | (typeof TestIds.loading)[keyof typeof TestIds.loading]
+  | (typeof TestIds.load3dViewer)[keyof typeof TestIds.load3dViewer]
+  | (typeof TestIds.imageCompare)[keyof typeof TestIds.imageCompare]
diff --git a/browser_tests/fixtures/utils/customMatchers.ts b/browser_tests/fixtures/utils/customMatchers.ts
new file mode 100644
index 0000000000..6acae370fd
--- /dev/null
+++ b/browser_tests/fixtures/utils/customMatchers.ts
@@ -0,0 +1,50 @@
+import type { ExpectMatcherState, Locator } from '@playwright/test'
+import { expect } from '@playwright/test'
+
+import type { NodeReference } from '@e2e/fixtures/utils/litegraphUtils'
+
+function makeMatcher<T>(
+  getValue: (node: NodeReference) => Promise<T> | T,
+  type: string
+) {
+  return async function (
+    this: ExpectMatcherState,
+    node: NodeReference,
+    options?: { timeout?: number; intervals?: number[] }
+  ) {
+    await expect(async () => {
+      const value = await getValue(node)
+      if (this.isNot) {
+        expect(value, 'Node is ' + type).not.toBeTruthy()
+      } else {
+        expect(value, 'Node is not ' + type).toBeTruthy()
+      }
+    }).toPass({ timeout: 5000, ...options })
+    return {
+      pass: !this.isNot,
+      message: () => 'Node is ' + (this.isNot ? 'not ' : '') + type
+    }
+  }
+}
+
+export const comfyExpect = expect.extend({
+  toBePinned: makeMatcher((n) => n.isPinned(), 'pinned'),
+  toBeBypassed: makeMatcher((n) => n.isBypassed(), 'bypassed'),
+  toBeCollapsed: makeMatcher((n) => n.isCollapsed(), 'collapsed'),
+  async toHaveFocus(locator: Locator, options = {}) {
+    await expect
+      .poll(
+        () => locator.evaluate((el) => el === document.activeElement),
+        options
+      )
+      .toBe(!this.isNot)
+
+    const isFocused = await locator.evaluate(
+      (el) => el === document.activeElement
+    )
+    return {
+      pass: isFocused,
+      message: () => `Expected element to ${isFocused ? 'not ' : ''}be focused.`
+    }
+  }
+})
diff --git a/browser_tests/fixtures/utils/litegraphUtils.ts b/browser_tests/fixtures/utils/litegraphUtils.ts
index 17e0d16e1c..c8abd8eced 100644
--- a/browser_tests/fixtures/utils/litegraphUtils.ts
+++ b/browser_tests/fixtures/utils/litegraphUtils.ts
@@ -1,10 +1,9 @@
 import { expect } from '@playwright/test'
-import type { Page } from '@playwright/test'
 
-import type { NodeId } from '../../../src/platform/workflow/validation/schemas/workflowSchema'
-import { ManageGroupNode } from '../../helpers/manageGroupNode'
-import type { ComfyPage } from '../ComfyPage'
-import type { Position, Size } from '../types'
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
+import { ManageGroupNode } from '@e2e/helpers/manageGroupNode'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import type { Position, Size } from '@e2e/fixtures/types'
 
 export const getMiddlePoint = (pos1: Position, pos2: Position) => {
   return {
@@ -356,7 +355,11 @@ export class NodeReference {
   }
   async click(
     position: 'title' | 'collapse',
-    options?: Parameters<Page['click']>[1] & { moveMouseToEmptyArea?: boolean }
+    options?: {
+      button?: 'left' | 'right' | 'middle'
+      modifiers?: ('Shift' | 'Control' | 'Alt' | 'Meta')[]
+      moveMouseToEmptyArea?: boolean
+    }
   ) {
     let clickPos: Position
     switch (position) {
@@ -377,12 +380,7 @@ export class NodeReference {
       delete options.moveMouseToEmptyArea
     }
 
-    await this.comfyPage.canvas.click({
-      ...options,
-      position: clickPos,
-      force: true
-    })
-    await this.comfyPage.nextFrame()
+    await this.comfyPage.canvasOps.mouseClickAt(clickPos, options)
     if (moveMouseToEmptyArea) {
       await this.comfyPage.canvasOps.moveMouseToEmptyArea()
     }
@@ -390,6 +388,10 @@ export class NodeReference {
   async copy() {
     await this.click('title')
     await this.comfyPage.clipboard.copy()
+  }
+  async delete(): Promise<void> {
+    await this.click('title')
+    await this.comfyPage.page.keyboard.press('Delete')
     await this.comfyPage.nextFrame()
   }
   async connectWidget(
@@ -431,7 +433,6 @@ export class NodeReference {
   async convertToGroupNode(groupNodeName: string = 'GroupNode') {
     await this.clickContextMenuOption('Convert to Group Node')
     await this.comfyPage.nodeOps.fillPromptDialog(groupNodeName)
-    await this.comfyPage.nextFrame()
     const nodes = await this.comfyPage.nodeOps.getNodeRefsByType(
       `workflow>${groupNodeName}`
     )
@@ -494,31 +495,18 @@ export class NodeReference {
 
     await expect(async () => {
       // Try just clicking the enter button first
-      await this.comfyPage.canvas.click({
-        position: { x: 250, y: 250 },
-        force: true
-      })
-      await this.comfyPage.nextFrame()
+      await this.comfyPage.canvasOps.mouseClickAt({ x: 250, y: 250 })
 
-      await this.comfyPage.canvas.click({
-        position: subgraphButtonPos,
-        force: true
-      })
-      await this.comfyPage.nextFrame()
+      await this.comfyPage.canvasOps.mouseClickAt(subgraphButtonPos)
 
       if (await checkIsInSubgraph()) return
 
       for (const position of clickPositions) {
         // Clear any selection first
-        await this.comfyPage.canvas.click({
-          position: { x: 250, y: 250 },
-          force: true
-        })
-        await this.comfyPage.nextFrame()
+        await this.comfyPage.canvasOps.mouseClickAt({ x: 250, y: 250 })
 
         // Double-click to enter subgraph
-        await this.comfyPage.canvas.dblclick({ position, force: true })
-        await this.comfyPage.nextFrame()
+        await this.comfyPage.canvasOps.mouseDblclickAt(position)
 
         if (await checkIsInSubgraph()) return
       }
diff --git a/browser_tests/fixtures/utils/paths.ts b/browser_tests/fixtures/utils/paths.ts
new file mode 100644
index 0000000000..c8bc5ee3cb
--- /dev/null
+++ b/browser_tests/fixtures/utils/paths.ts
@@ -0,0 +1,3 @@
+export function assetPath(fileName: string): string {
+  return `./browser_tests/assets/${fileName}`
+}
diff --git a/browser_tests/fixtures/utils/preview3dCameraState.ts b/browser_tests/fixtures/utils/preview3dCameraState.ts
new file mode 100644
index 0000000000..22678f1cac
--- /dev/null
+++ b/browser_tests/fixtures/utils/preview3dCameraState.ts
@@ -0,0 +1,87 @@
+interface Preview3dCameraStatePayload {
+  position: { x: number; y: number; z: number }
+  target: { x: number; y: number; z: number }
+  zoom?: number
+  cameraType?: string
+}
+
+type Vec3 = { x: number; y: number; z: number }
+
+function isVec3(v: unknown): v is Vec3 {
+  if (v === null || typeof v !== 'object') return false
+  const r = v as Record<string, unknown>
+  return (
+    'x' in v &&
+    typeof r.x === 'number' &&
+    'y' in v &&
+    typeof r.y === 'number' &&
+    'z' in v &&
+    typeof r.z === 'number'
+  )
+}
+
+function isPreview3dCameraStatePayload(
+  v: unknown
+): v is Preview3dCameraStatePayload {
+  if (v === null || typeof v !== 'object') return false
+  if (!('position' in v) || !('target' in v)) return false
+  const r = v as Record<string, unknown>
+  return isVec3(r.position) && isVec3(r.target)
+}
+
+function vecMaxAbsDelta(a: Vec3, b: Vec3): number {
+  return Math.max(Math.abs(a.x - b.x), Math.abs(a.y - b.y), Math.abs(a.z - b.z))
+}
+
+function vecWithinEps(a: Vec3, b: Vec3, eps: number): boolean {
+  return vecMaxAbsDelta(a, b) <= eps
+}
+
+/**
+ * Max abs error per position/target axis when comparing restored Preview3D
+ * camera state (same order of magnitude as the former 2e-2 poll tolerance).
+ */
+export const PREVIEW3D_CAMERA_AXIS_RESTORE_EPS = 0.02
+
+/**
+ * Max abs zoom error when comparing restored Preview3D state (aligned with
+ * Playwright `toBeCloseTo(..., 5)`-style checks on typical zoom magnitudes).
+ */
+export const PREVIEW3D_CAMERA_ZOOM_RESTORE_EPS = 1e-4
+
+export function preview3dRestoreCameraStatesMatch(
+  a: unknown,
+  b: unknown
+): boolean {
+  if (!isPreview3dCameraStatePayload(a) || !isPreview3dCameraStatePayload(b)) {
+    return false
+  }
+  if (a.cameraType !== b.cameraType) return false
+  const zoomA = typeof a.zoom === 'number' ? a.zoom : 0
+  const zoomB = typeof b.zoom === 'number' ? b.zoom : 0
+  if (Math.abs(zoomA - zoomB) > PREVIEW3D_CAMERA_ZOOM_RESTORE_EPS) {
+    return false
+  }
+  return (
+    vecWithinEps(a.position, b.position, PREVIEW3D_CAMERA_AXIS_RESTORE_EPS) &&
+    vecWithinEps(a.target, b.target, PREVIEW3D_CAMERA_AXIS_RESTORE_EPS)
+  )
+}
+
+export function preview3dCameraStatesDiffer(
+  a: unknown,
+  b: unknown,
+  eps: number
+): boolean {
+  if (!isPreview3dCameraStatePayload(a) || !isPreview3dCameraStatePayload(b)) {
+    return true
+  }
+  if (a.cameraType !== b.cameraType) return true
+  const zoomA = typeof a.zoom === 'number' ? a.zoom : 0
+  const zoomB = typeof b.zoom === 'number' ? b.zoom : 0
+  if (Math.abs(zoomA - zoomB) > eps) return true
+  return !(
+    vecWithinEps(a.position, b.position, eps) &&
+    vecWithinEps(a.target, b.target, eps)
+  )
+}
diff --git a/browser_tests/fixtures/utils/slotBoundsUtil.ts b/browser_tests/fixtures/utils/slotBoundsUtil.ts
new file mode 100644
index 0000000000..a2df52c2a7
--- /dev/null
+++ b/browser_tests/fixtures/utils/slotBoundsUtil.ts
@@ -0,0 +1,98 @@
+import { expect } from '@playwright/test'
+import type { Page } from '@playwright/test'
+
+export interface SlotMeasurement {
+  key: string
+  offsetX: number
+  offsetY: number
+}
+
+export interface NodeSlotData {
+  nodeId: string
+  nodeW: number
+  nodeH: number
+  slots: SlotMeasurement[]
+}
+
+/**
+ * Collect slot center offsets relative to the parent node element.
+ * Returns `null` when the node element is not found.
+ */
+export async function measureNodeSlotOffsets(
+  page: Page,
+  nodeId: string
+): Promise<NodeSlotData | null> {
+  return page.evaluate((id) => {
+    const nodeEl = document.querySelector(`[data-node-id="${id}"]`)
+    if (!nodeEl || !(nodeEl instanceof HTMLElement)) return null
+
+    const nodeRect = nodeEl.getBoundingClientRect()
+    const slotEls = nodeEl.querySelectorAll('[data-slot-key]')
+    const slots: SlotMeasurement[] = []
+
+    for (const slotEl of slotEls) {
+      const slotRect = slotEl.getBoundingClientRect()
+      slots.push({
+        key: (slotEl as HTMLElement).dataset.slotKey ?? 'unknown',
+        offsetX: slotRect.left + slotRect.width / 2 - nodeRect.left,
+        offsetY: slotRect.top + slotRect.height / 2 - nodeRect.top
+      })
+    }
+
+    return {
+      nodeId: id,
+      nodeW: nodeRect.width,
+      nodeH: nodeRect.height,
+      slots
+    }
+  }, nodeId)
+}
+
+/**
+ * Assert that every slot falls within the node dimensions (± `margin` px).
+ */
+export function expectSlotsWithinBounds(
+  data: NodeSlotData,
+  margin: number,
+  label?: string
+) {
+  const prefix = label ? `${label}: ` : ''
+
+  for (const slot of data.slots) {
+    expect(
+      slot.offsetX,
+      `${prefix}Slot ${slot.key} X=${slot.offsetX} outside width=${data.nodeW}`
+    ).toBeGreaterThanOrEqual(-margin)
+    expect(
+      slot.offsetX,
+      `${prefix}Slot ${slot.key} X=${slot.offsetX} outside width=${data.nodeW}`
+    ).toBeLessThanOrEqual(data.nodeW + margin)
+
+    expect(
+      slot.offsetY,
+      `${prefix}Slot ${slot.key} Y=${slot.offsetY} outside height=${data.nodeH}`
+    ).toBeGreaterThanOrEqual(-margin)
+    expect(
+      slot.offsetY,
+      `${prefix}Slot ${slot.key} Y=${slot.offsetY} outside height=${data.nodeH}`
+    ).toBeLessThanOrEqual(data.nodeH + margin)
+  }
+}
+
+/**
+ * Wait for slots, measure, and assert within bounds — single-node convenience.
+ */
+export async function assertNodeSlotsWithinBounds(
+  page: Page,
+  nodeId: string,
+  margin: number = 20
+) {
+  await page
+    .locator(`[data-node-id="${nodeId}"] [data-slot-key]`)
+    .first()
+    .waitFor()
+
+  const data = await measureNodeSlotOffsets(page, nodeId)
+  expect(data, `Node ${nodeId} not found in DOM`).not.toBeNull()
+  expectSlotsWithinBounds(data!, margin, `Node ${nodeId}`)
+}
diff --git a/browser_tests/fixtures/utils/timing.ts b/browser_tests/fixtures/utils/timing.ts
new file mode 100644
index 0000000000..825d523e2e
--- /dev/null
+++ b/browser_tests/fixtures/utils/timing.ts
@@ -0,0 +1,9 @@
+import type { Page } from '@playwright/test'
+
+export function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}
+
+export function nextFrame(page: Page): Promise<number> {
+  return page.evaluate(() => new Promise<number>(requestAnimationFrame))
+}
diff --git a/browser_tests/fixtures/utils/vueNodeFixtures.ts b/browser_tests/fixtures/utils/vueNodeFixtures.ts
index e7368d7759..51abc60639 100644
--- a/browser_tests/fixtures/utils/vueNodeFixtures.ts
+++ b/browser_tests/fixtures/utils/vueNodeFixtures.ts
@@ -1,35 +1,27 @@
 import type { Locator } from '@playwright/test'
 
+import { TestIds } from '@e2e/fixtures/selectors'
+
 /** DOM-centric helper for a single Vue-rendered node on the canvas. */
 export class VueNodeFixture {
-  constructor(private readonly locator: Locator) {}
+  public readonly header: Locator
+  public readonly title: Locator
+  public readonly titleInput: Locator
+  public readonly body: Locator
+  public readonly pinIndicator: Locator
+  public readonly collapseButton: Locator
+  public readonly collapseIcon: Locator
+  public readonly root: Locator
 
-  get header(): Locator {
-    return this.locator.locator('[data-testid^="node-header-"]')
-  }
-
-  get title(): Locator {
-    return this.locator.locator('[data-testid="node-title"]')
-  }
-
-  get titleInput(): Locator {
-    return this.locator.locator('[data-testid="node-title-input"]')
-  }
-
-  get body(): Locator {
-    return this.locator.locator('[data-testid^="node-body-"]')
-  }
-
-  get collapseButton(): Locator {
-    return this.locator.locator('[data-testid="node-collapse-button"]')
-  }
-
-  get collapseIcon(): Locator {
-    return this.collapseButton.locator('i')
-  }
-
-  get root(): Locator {
-    return this.locator
+  constructor(private readonly locator: Locator) {
+    this.header = locator.locator('[data-testid^="node-header-"]')
+    this.title = locator.getByTestId('node-title')
+    this.titleInput = locator.getByTestId('node-title-input')
+    this.body = locator.locator('[data-testid^="node-body-"]')
+    this.pinIndicator = locator.getByTestId(TestIds.node.pinIndicator)
+    this.collapseButton = locator.getByTestId('node-collapse-button')
+    this.collapseIcon = this.collapseButton.locator('i')
+    this.root = locator
   }
 
   async getTitle(): Promise<string> {
diff --git a/browser_tests/fixtures/ws.ts b/browser_tests/fixtures/ws.ts
index 6d0463dc59..5c534ce877 100644
--- a/browser_tests/fixtures/ws.ts
+++ b/browser_tests/fixtures/ws.ts
@@ -1,53 +1,31 @@
 import { test as base } from '@playwright/test'
+import type { WebSocketRoute } from '@playwright/test'
 
 export const webSocketFixture = base.extend<{
-  ws: { trigger(data: unknown, url?: string): Promise<void> }
+  getWebSocket: () => Promise<WebSocketRoute>
 }>({
-  ws: [
-    async ({ page }, use) => {
-      // Each time a page loads, to catch navigations
-      page.on('load', async () => {
-        await page.evaluate(function () {
-          // Create a wrapper for WebSocket that stores them globally
-          // so we can look it up to trigger messages
-          const store: Record<string, WebSocket> = (window.__ws__ = {})
-          window.WebSocket = class extends window.WebSocket {
-            constructor(
-              ...rest: ConstructorParameters<typeof window.WebSocket>
-            ) {
-              super(...rest)
-              store[this.url] = this
-            }
-          }
+  getWebSocket: [
+    async ({ context }, use) => {
+      let latest: WebSocketRoute | undefined
+      let resolve: ((ws: WebSocketRoute) => void) | undefined
+
+      await context.routeWebSocket(/\/ws/, (ws) => {
+        const server = ws.connectToServer()
+        server.onMessage((message) => {
+          ws.send(message)
         })
+
+        latest = ws
+        resolve?.(ws)
       })
 
-      await use({
-        async trigger(data, url) {
-          // Trigger a websocket event on the page
-          await page.evaluate(
-            function ([data, url]) {
-              if (!url) {
-                // If no URL specified, use page URL
-                const u = new URL(window.location.href)
-                u.hash = ''
-                u.protocol = 'ws:'
-                u.pathname = '/'
-                url = u.toString() + 'ws'
-              }
-              const ws: WebSocket = window.__ws__![url]
-              ws.dispatchEvent(
-                new MessageEvent('message', {
-                  data
-                })
-              )
-            },
-            [JSON.stringify(data), url]
-          )
-        }
+      await use(() => {
+        if (latest) return Promise.resolve(latest)
+        return new Promise<WebSocketRoute>((r) => {
+          resolve = r
+        })
       })
     },
-    // We need this to run automatically as the first thing so it adds handlers as soon as the page loads
     { auto: true }
   ]
 })
diff --git a/browser_tests/globalSetup.ts b/browser_tests/globalSetup.ts
index 70ba5ed828..72944b5f51 100644
--- a/browser_tests/globalSetup.ts
+++ b/browser_tests/globalSetup.ts
@@ -1,6 +1,6 @@
 import { config as dotenvConfig } from 'dotenv'
 
-import { backupPath } from './utils/backupUtils'
+import { backupPath } from '@e2e/utils/backupUtils'
 
 dotenvConfig()
 
diff --git a/browser_tests/globalTeardown.ts b/browser_tests/globalTeardown.ts
index 69660eef9f..7a2907545c 100644
--- a/browser_tests/globalTeardown.ts
+++ b/browser_tests/globalTeardown.ts
@@ -1,15 +1,29 @@
 import { config as dotenvConfig } from 'dotenv'
+import MCR from 'monocart-coverage-reports'
 
-import { writePerfReport } from './helpers/perfReporter'
-import { restorePath } from './utils/backupUtils'
+import { writePerfReport } from '@e2e/helpers/perfReporter'
+import { restorePath } from '@e2e/utils/backupUtils'
 
 dotenvConfig()
 
-export default function globalTeardown() {
+export default async function globalTeardown() {
   writePerfReport()
 
   if (!process.env.CI && process.env.TEST_COMFYUI_DIR) {
     restorePath([process.env.TEST_COMFYUI_DIR, 'user'])
     restorePath([process.env.TEST_COMFYUI_DIR, 'models'])
   }
+
+  if (process.env.COLLECT_COVERAGE === 'true') {
+    const mcr = MCR({
+      outputDir: './coverage/playwright',
+      reports: [['lcovonly', { file: 'coverage.lcov' }], ['text-summary']],
+      sourceFilter: {
+        '**/node_modules/**': false,
+        '**/browser_tests/**': false,
+        '**/*': true
+      }
+    })
+    await mcr.generate()
+  }
 }
diff --git a/browser_tests/helpers/actionbar.ts b/browser_tests/helpers/actionbar.ts
index d38c4df9c6..a559a013cb 100644
--- a/browser_tests/helpers/actionbar.ts
+++ b/browser_tests/helpers/actionbar.ts
@@ -1,8 +1,8 @@
 import type { Locator, Page } from '@playwright/test'
 
-import type { AutoQueueMode } from '../../src/stores/queueStore'
-import { TestIds } from '../fixtures/selectors'
-import type { WorkspaceStore } from '../types/globals'
+import type { AutoQueueMode } from '@/stores/queueStore'
+import { TestIds } from '@e2e/fixtures/selectors'
+import type { WorkspaceStore } from '@e2e/types/globals'
 
 export class ComfyActionbar {
   public readonly root: Locator
diff --git a/browser_tests/helpers/builderTestUtils.ts b/browser_tests/helpers/builderTestUtils.ts
index e3f069f40d..0d2de03aaf 100644
--- a/browser_tests/helpers/builderTestUtils.ts
+++ b/browser_tests/helpers/builderTestUtils.ts
@@ -1,49 +1,15 @@
 import { expect } from '@playwright/test'
 
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import type { NodeReference } from '../fixtures/utils/litegraphUtils'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import type { AppModeHelper } from '@e2e/fixtures/helpers/AppModeHelper'
+import type { NodeReference } from '@e2e/fixtures/utils/litegraphUtils'
 
-import { fitToViewInstant } from './fitToView'
-import { getPromotedWidgetNames } from './promotedWidgets'
+import { comfyExpect } from '@e2e/fixtures/ComfyPage'
+import { fitToViewInstant } from '@e2e/helpers/fitToView'
 
-/** Click the first SaveImage/PreviewImage node on the canvas. */
-async function selectOutputNode(comfyPage: ComfyPage) {
-  const { page } = comfyPage
-
-  const saveImageNodeId = await page.evaluate(() =>
-    String(
-      window.app!.rootGraph.nodes.find(
-        (n: { type?: string }) =>
-          n.type === 'SaveImage' || n.type === 'PreviewImage'
-      )?.id
-    )
-  )
-  const saveImageRef = await comfyPage.nodeOps.getNodeRefById(saveImageNodeId)
-  await saveImageRef.centerOnNode()
-
-  const canvasBox = await page.locator('#graph-canvas').boundingBox()
-  if (!canvasBox) throw new Error('Canvas not found')
-  await page.mouse.click(
-    canvasBox.x + canvasBox.width / 2,
-    canvasBox.y + canvasBox.height / 2
-  )
-  await comfyPage.nextFrame()
-}
-
-/** Center on a node and click its first widget to select it as input. */
-async function selectInputWidget(comfyPage: ComfyPage, node: NodeReference) {
-  const { page } = comfyPage
-
-  await comfyPage.canvasOps.setScale(1)
-  await node.centerOnNode()
-
-  const widgetRef = await node.getWidget(0)
-  const widgetPos = await widgetRef.getPosition()
-  const titleHeight = await page.evaluate(
-    () => window.LiteGraph!['NODE_TITLE_HEIGHT'] as number
-  )
-  await page.mouse.click(widgetPos.x, widgetPos.y + titleHeight)
-  await comfyPage.nextFrame()
+interface BuilderSetupResult {
+  inputNodeTitle: string
+  widgetNames: string[]
 }
 
 /**
@@ -53,55 +19,95 @@ async function selectInputWidget(comfyPage: ComfyPage, node: NodeReference) {
  * to subgraph), then enters builder mode and selects inputs + outputs.
  *
  * @param comfyPage - The page fixture.
- * @param getInputNode - Returns the node to click for input selection.
- *   Receives the KSampler node ref and can transform the graph before
- *   returning the target node. Defaults to using KSampler directly.
- * @returns The node used for input selection.
+ * @param prepareGraph - Optional callback to transform the graph before
+ *   entering builder. Receives the KSampler node ref and returns the
+ *   input node title and widget names to select.
+ *   Defaults to KSampler with its first widget.
+ *   Mutually exclusive with widgetNames.
+ * @param widgetNames - Widget names to select from the KSampler node.
+ *   Only used when prepareGraph is not provided.
+ *   Mutually exclusive with prepareGraph.
  */
 export async function setupBuilder(
   comfyPage: ComfyPage,
-  getInputNode?: (ksampler: NodeReference) => Promise<NodeReference>
-): Promise<NodeReference> {
+  prepareGraph?: (ksampler: NodeReference) => Promise<BuilderSetupResult>,
+  widgetNames?: string[]
+): Promise<void> {
   const { appMode } = comfyPage
   await comfyPage.workflow.loadWorkflow('default')
 
   const ksampler = await comfyPage.nodeOps.getNodeRefById('3')
-  const inputNode = getInputNode ? await getInputNode(ksampler) : ksampler
+
+  const { inputNodeTitle, widgetNames: inputWidgets } = prepareGraph
+    ? await prepareGraph(ksampler)
+    : { inputNodeTitle: 'KSampler', widgetNames: widgetNames ?? ['seed'] }
 
   await fitToViewInstant(comfyPage)
   await appMode.enterBuilder()
-  await appMode.goToInputs()
-  await selectInputWidget(comfyPage, inputNode)
+  await appMode.steps.goToInputs()
 
-  await appMode.goToOutputs()
-  await selectOutputNode(comfyPage)
+  for (const name of inputWidgets) {
+    await appMode.select.selectInputWidget(inputNodeTitle, name)
+  }
 
-  return inputNode
+  await appMode.steps.goToOutputs()
+  await appMode.select.selectOutputNode('Save Image')
 }
 
 /**
  * Convert the KSampler to a subgraph, then enter builder with I/O selected.
- *
- * Returns the subgraph node reference for further interaction.
  */
 export async function setupSubgraphBuilder(
   comfyPage: ComfyPage
-): Promise<NodeReference> {
-  return setupBuilder(comfyPage, async (ksampler) => {
+): Promise<void> {
+  await setupBuilder(comfyPage, async (ksampler) => {
     await ksampler.click('title')
-    const subgraphNode = await ksampler.convertToSubgraph()
+    await ksampler.convertToSubgraph()
     await comfyPage.nextFrame()
 
-    const promotedNames = await getPromotedWidgetNames(
-      comfyPage,
-      String(subgraphNode.id)
-    )
-    expect(promotedNames).toContain('seed')
-
-    return subgraphNode
+    return {
+      inputNodeTitle: 'New Subgraph',
+      widgetNames: ['seed']
+    }
   })
 }
 
+/**
+ * Open the save-as dialog, fill name + view type, click save,
+ * and wait for the success dialog.
+ */
+export async function builderSaveAs(
+  appMode: AppModeHelper,
+  workflowName: string,
+  viewType: 'App' | 'Node graph' = 'App'
+) {
+  await appMode.footer.saveAsButton.click()
+  await comfyExpect(appMode.saveAs.nameInput).toBeVisible()
+  await appMode.saveAs.fillAndSave(workflowName, viewType)
+  await comfyExpect(appMode.saveAs.successMessage).toBeVisible()
+}
+
+/**
+ * Load a different workflow, then reopen the named one from the sidebar.
+ * Caller must ensure the page is in graph mode (not builder or app mode)
+ * before calling.
+ */
+export async function openWorkflowFromSidebar(
+  comfyPage: ComfyPage,
+  name: string
+) {
+  await comfyPage.workflow.loadWorkflow('default')
+  await comfyPage.nextFrame()
+  const { workflowsTab } = comfyPage.menu
+  await workflowsTab.open()
+  await workflowsTab.getPersistedItem(name).dblclick()
+  await comfyPage.nextFrame()
+
+  await expect
+    .poll(() => comfyPage.workflow.getActiveWorkflowPath())
+    .toContain(name)
+}
+
 /** Save the workflow, reopen it, and enter app mode. */
 export async function saveAndReopenInAppMode(
   comfyPage: ComfyPage,
diff --git a/browser_tests/helpers/clipboardSpy.ts b/browser_tests/helpers/clipboardSpy.ts
new file mode 100644
index 0000000000..5ee1532fde
--- /dev/null
+++ b/browser_tests/helpers/clipboardSpy.ts
@@ -0,0 +1,19 @@
+import type { Page } from '@playwright/test'
+
+export async function interceptClipboardWrite(page: Page) {
+  await page.evaluate(() => {
+    const w = window as Window & { __copiedText?: string }
+    w.__copiedText = ''
+    navigator.clipboard.writeText = async (text: string) => {
+      w.__copiedText = text
+    }
+  })
+}
+
+export async function getClipboardText(page: Page): Promise<string> {
+  return (
+    (await page.evaluate(
+      () => (window as Window & { __copiedText?: string }).__copiedText
+    )) ?? ''
+  )
+}
diff --git a/browser_tests/helpers/fitToView.ts b/browser_tests/helpers/fitToView.ts
index 6aea86dbad..3e5126b0ae 100644
--- a/browser_tests/helpers/fitToView.ts
+++ b/browser_tests/helpers/fitToView.ts
@@ -1,5 +1,5 @@
-import type { ReadOnlyRect } from '../../src/lib/litegraph/src/interfaces'
-import type { ComfyPage } from '../fixtures/ComfyPage'
+import type { ReadOnlyRect } from '@/lib/litegraph/src/interfaces'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 
 interface FitToViewOptions {
   selectionOnly?: boolean
diff --git a/browser_tests/helpers/manageGroupNode.ts b/browser_tests/helpers/manageGroupNode.ts
index 45010b979f..4e9c149d90 100644
--- a/browser_tests/helpers/manageGroupNode.ts
+++ b/browser_tests/helpers/manageGroupNode.ts
@@ -26,9 +26,12 @@ export class ManageGroupNode {
     await this.footer.getByText('Close').click()
   }
 
+  get selectedNodeTypeSelect(): Locator {
+    return this.header.locator('select').first()
+  }
+
   async getSelectedNodeType() {
-    const select = this.header.locator('select').first()
-    return await select.inputValue()
+    return await this.selectedNodeTypeSelect.inputValue()
   }
 
   async selectNode(name: string) {
diff --git a/browser_tests/helpers/painter.ts b/browser_tests/helpers/painter.ts
new file mode 100644
index 0000000000..859da0560c
--- /dev/null
+++ b/browser_tests/helpers/painter.ts
@@ -0,0 +1,78 @@
+import type { Locator, Page } from '@playwright/test'
+import type { TestGraphAccess } from '@e2e/types/globals'
+
+export async function drawStroke(
+  page: Page,
+  canvas: Locator,
+  opts: { startXPct?: number; endXPct?: number; yPct?: number } = {}
+): Promise<void> {
+  const { startXPct = 0.3, endXPct = 0.7, yPct = 0.5 } = opts
+  const box = await canvas.boundingBox()
+  if (!box) throw new Error('Canvas bounding box not found')
+  await page.mouse.move(
+    box.x + box.width * startXPct,
+    box.y + box.height * yPct
+  )
+  await page.mouse.down()
+  await page.mouse.move(
+    box.x + box.width * endXPct,
+    box.y + box.height * yPct,
+    { steps: 10 }
+  )
+  await page.mouse.up()
+}
+
+export async function hasCanvasContent(canvas: Locator): Promise<boolean> {
+  return canvas.evaluate((el: HTMLCanvasElement) => {
+    const ctx = el.getContext('2d')
+    if (!ctx) return false
+    const { data } = ctx.getImageData(0, 0, el.width, el.height)
+    for (let i = 3; i < data.length; i += 4) {
+      if (data[i] > 0) return true
+    }
+    return false
+  })
+}
+
+export async function triggerSerialization(page: Page): Promise<void> {
+  await page.waitForFunction(() => {
+    const graph = window.graph as TestGraphAccess | undefined
+    const node = graph?._nodes_by_id?.['1']
+    const widget = node?.widgets?.find((w) => w.name === 'mask')
+    return typeof widget?.serializeValue === 'function'
+  })
+
+  await page.evaluate(async () => {
+    const graph = window.graph as TestGraphAccess | undefined
+    if (!graph) {
+      throw new Error(
+        'Global window.graph is absent. Ensure workflow fixture is loaded.'
+      )
+    }
+
+    const node = graph._nodes_by_id?.['1']
+    if (!node) {
+      throw new Error(
+        'Target node with ID "1" not found in graph._nodes_by_id.'
+      )
+    }
+
+    const widgetIndex = node.widgets?.findIndex((w) => w.name === 'mask') ?? -1
+    if (widgetIndex === -1) {
+      throw new Error('Widget "mask" not found on target node 1.')
+    }
+
+    const widget = node.widgets?.[widgetIndex]
+    if (!widget) {
+      throw new Error(`Widget index ${widgetIndex} not found on target node 1.`)
+    }
+
+    if (typeof widget.serializeValue !== 'function') {
+      throw new Error(
+        'mask widget on node 1 does not have a serializeValue function.'
+      )
+    }
+
+    await widget.serializeValue(node, widgetIndex)
+  })
+}
diff --git a/browser_tests/helpers/perfReporter.ts b/browser_tests/helpers/perfReporter.ts
index 2fac7cac5e..788b6b1dd2 100644
--- a/browser_tests/helpers/perfReporter.ts
+++ b/browser_tests/helpers/perfReporter.ts
@@ -1,7 +1,7 @@
 import { mkdirSync, readdirSync, readFileSync, writeFileSync } from 'fs'
 import { join } from 'path'
 
-import type { PerfMeasurement } from '../fixtures/helpers/PerformanceHelper'
+import type { PerfMeasurement } from '@e2e/fixtures/helpers/PerformanceHelper'
 
 export interface PerfReport {
   timestamp: string
@@ -12,10 +12,44 @@ export interface PerfReport {
 
 const TEMP_DIR = join('test-results', 'perf-temp')
 
+type MeasurementField = keyof PerfMeasurement
+
+const FIELD_FORMATTERS: Record<string, (m: PerfMeasurement) => string> = {
+  styleRecalcs: (m) => `${m.styleRecalcs} recalcs`,
+  layouts: (m) => `${m.layouts} layouts`,
+  taskDurationMs: (m) => `${m.taskDurationMs.toFixed(1)}ms task`,
+  layoutDurationMs: (m) => `${m.layoutDurationMs.toFixed(1)}ms layout`,
+  frameDurationMs: (m) => `${m.frameDurationMs.toFixed(1)}ms/frame`,
+  totalBlockingTimeMs: (m) => `TBT=${m.totalBlockingTimeMs.toFixed(0)}ms`,
+  durationMs: (m) => `${m.durationMs.toFixed(0)}ms total`,
+  heapDeltaBytes: (m) => `heap Δ${(m.heapDeltaBytes / 1024).toFixed(0)}KB`,
+  domNodes: (m) => `DOM Δ${m.domNodes}`,
+  heapUsedBytes: (m) => `heap ${(m.heapUsedBytes / 1024 / 1024).toFixed(1)}MB`
+}
+
+/**
+ * Log a perf measurement to the console in a consistent format.
+ * Fields are formatted automatically based on their type.
+ */
+export function logMeasurement(
+  label: string,
+  m: PerfMeasurement,
+  fields: MeasurementField[]
+) {
+  const parts = fields.map((f) => {
+    const formatter = FIELD_FORMATTERS[f]
+    if (formatter) return formatter(m)
+    return `${f}=${m[f]}`
+  })
+  // oxlint-disable-next-line no-console -- perf reporter intentionally logs to stdout
+  console.log(`${label}: ${parts.join(', ')}`)
+}
+
 export function recordMeasurement(m: PerfMeasurement) {
   mkdirSync(TEMP_DIR, { recursive: true })
   const filename = `${m.name}-${Date.now()}.json`
-  writeFileSync(join(TEMP_DIR, filename), JSON.stringify(m))
+  const { allFrameDurationsMs: _, ...serializable } = m
+  writeFileSync(join(TEMP_DIR, filename), JSON.stringify(serializable))
 }
 
 export function writePerfReport(
diff --git a/browser_tests/helpers/promotedWidgets.ts b/browser_tests/helpers/promotedWidgets.ts
index c8a73f0187..5ba65c21d0 100644
--- a/browser_tests/helpers/promotedWidgets.ts
+++ b/browser_tests/helpers/promotedWidgets.ts
@@ -1,15 +1,8 @@
-import type { ComfyPage } from '../fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 
-export type PromotedWidgetEntry = [string, string]
+type PromotedWidgetEntry = [string, string]
 
-export interface PromotedWidgetSnapshot {
-  proxyWidgets: PromotedWidgetEntry[]
-  widgetNames: string[]
-}
-
-export function isPromotedWidgetEntry(
-  entry: unknown
-): entry is PromotedWidgetEntry {
+function isPromotedWidgetEntry(entry: unknown): entry is PromotedWidgetEntry {
   return (
     Array.isArray(entry) &&
     entry.length === 2 &&
@@ -18,9 +11,7 @@ export function isPromotedWidgetEntry(
   )
 }
 
-export function normalizePromotedWidgets(
-  value: unknown
-): PromotedWidgetEntry[] {
+function normalizePromotedWidgets(value: unknown): PromotedWidgetEntry[] {
   if (!Array.isArray(value)) return []
   return value.filter(isPromotedWidgetEntry)
 }
@@ -31,34 +22,29 @@ export async function getPromotedWidgets(
 ): Promise<PromotedWidgetEntry[]> {
   const raw = await comfyPage.page.evaluate((id) => {
     const node = window.app!.canvas.graph!.getNodeById(id)
-    return node?.properties?.proxyWidgets ?? []
+    const widgets = node?.widgets ?? []
+
+    // Read the live promoted widget views from the host node instead of the
+    // serialized proxyWidgets snapshot, which can lag behind the current graph
+    // state during promotion and cleanup flows.
+    return widgets.flatMap((widget) => {
+      if (
+        widget &&
+        typeof widget === 'object' &&
+        'sourceNodeId' in widget &&
+        typeof widget.sourceNodeId === 'string' &&
+        'sourceWidgetName' in widget &&
+        typeof widget.sourceWidgetName === 'string'
+      ) {
+        return [[widget.sourceNodeId, widget.sourceWidgetName]]
+      }
+      return []
+    })
   }, nodeId)
 
   return normalizePromotedWidgets(raw)
 }
 
-export async function getPromotedWidgetSnapshot(
-  comfyPage: ComfyPage,
-  nodeId: string
-): Promise<PromotedWidgetSnapshot> {
-  const raw = await comfyPage.page.evaluate((id) => {
-    const node = window.app!.canvas.graph!.getNodeById(id)
-    return {
-      proxyWidgets: node?.properties?.proxyWidgets ?? [],
-      widgetNames: (node?.widgets ?? []).map((widget) => widget.name)
-    }
-  }, nodeId)
-
-  return {
-    proxyWidgets: normalizePromotedWidgets(raw.proxyWidgets),
-    widgetNames: Array.isArray(raw.widgetNames)
-      ? raw.widgetNames.filter(
-          (name): name is string => typeof name === 'string'
-        )
-      : []
-  }
-}
-
 export async function getPromotedWidgetNames(
   comfyPage: ComfyPage,
   nodeId: string
@@ -75,7 +61,7 @@ export async function getPromotedWidgetCount(
   return promotedWidgets.length
 }
 
-export function isPseudoPreviewEntry(entry: PromotedWidgetEntry): boolean {
+function isPseudoPreviewEntry(entry: PromotedWidgetEntry): boolean {
   return entry[1].startsWith('$$')
 }
 
@@ -87,14 +73,6 @@ export async function getPseudoPreviewWidgets(
   return widgets.filter(isPseudoPreviewEntry)
 }
 
-export async function getNonPreviewPromotedWidgets(
-  comfyPage: ComfyPage,
-  nodeId: string
-): Promise<PromotedWidgetEntry[]> {
-  const widgets = await getPromotedWidgets(comfyPage, nodeId)
-  return widgets.filter((entry) => !isPseudoPreviewEntry(entry))
-}
-
 export async function getPromotedWidgetCountByName(
   comfyPage: ComfyPage,
   nodeId: string,
diff --git a/browser_tests/helpers/subgraphTestUtils.ts b/browser_tests/helpers/subgraphTestUtils.ts
deleted file mode 100644
index 451ae60a30..0000000000
--- a/browser_tests/helpers/subgraphTestUtils.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import type { Page } from '@playwright/test'
-
-import type { LGraph, Subgraph } from '../../src/lib/litegraph/src/litegraph'
-import { isSubgraph } from '../../src/utils/typeGuardUtil'
-
-/**
- * Assertion helper for tests where being in a subgraph is a precondition.
- * Throws a clear error if the graph is not a Subgraph.
- */
-export function assertSubgraph(
-  graph: LGraph | Subgraph | null | undefined
-): asserts graph is Subgraph {
-  if (!isSubgraph(graph)) {
-    throw new Error(
-      'Expected to be in a subgraph context, but graph is not a Subgraph'
-    )
-  }
-}
-
-/**
- * Returns the widget-input slot Y position and the node title height
- * for the promoted "text" input on the SubgraphNode.
- *
- * The slot Y should be at the widget row, not the header. A value near
- * zero or negative indicates the slot is positioned at the header (the bug).
- */
-export function getTextSlotPosition(page: Page, nodeId: string) {
-  return page.evaluate((id) => {
-    const node = window.app!.canvas.graph!.getNodeById(id)
-    if (!node) return null
-
-    const titleHeight = window.LiteGraph!.NODE_TITLE_HEIGHT
-
-    for (const input of node.inputs) {
-      if (!input.widget || input.type !== 'STRING') continue
-      return {
-        hasPos: !!input.pos,
-        posY: input.pos?.[1] ?? null,
-        widgetName: input.widget.name,
-        titleHeight
-      }
-    }
-    return null
-  }, nodeId)
-}
diff --git a/browser_tests/helpers/templates.ts b/browser_tests/helpers/templates.ts
index ddbf1f79d4..1d58c13378 100644
--- a/browser_tests/helpers/templates.ts
+++ b/browser_tests/helpers/templates.ts
@@ -5,8 +5,8 @@ import path from 'path'
 import type {
   TemplateInfo,
   WorkflowTemplates
-} from '../../src/platform/workflow/templates/types/template'
-import { TestIds } from '../fixtures/selectors'
+} from '@/platform/workflow/templates/types/template'
+import { TestIds } from '@e2e/fixtures/selectors'
 
 export class ComfyTemplates {
   readonly content: Locator
@@ -18,12 +18,9 @@ export class ComfyTemplates {
   }
 
   async expectMinimumCardCount(count: number) {
-    await expect(async () => {
-      const cardCount = await this.allTemplateCards.count()
-      expect(cardCount).toBeGreaterThanOrEqual(count)
-    }).toPass({
-      timeout: 1_000
-    })
+    await expect
+      .poll(() => this.allTemplateCards.count())
+      .toBeGreaterThanOrEqual(count)
   }
 
   async loadTemplate(id: string) {
diff --git a/browser_tests/tests/actionbar.spec.ts b/browser_tests/tests/actionbar.spec.ts
index 4d57b65f48..62dd43359b 100644
--- a/browser_tests/tests/actionbar.spec.ts
+++ b/browser_tests/tests/actionbar.spec.ts
@@ -1,31 +1,28 @@
 import type { Response } from '@playwright/test'
 import { expect, mergeTests } from '@playwright/test'
 
-import type { StatusWsMessage } from '../../src/schemas/apiSchema'
-import { comfyPageFixture } from '../fixtures/ComfyPage'
-import { webSocketFixture } from '../fixtures/ws'
-import type { WorkspaceStore } from '../types/globals'
+import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import { webSocketFixture } from '@e2e/fixtures/ws'
+import type { WorkspaceStore } from '@e2e/types/globals'
 
 const test = mergeTests(comfyPageFixture, webSocketFixture)
 
 test.describe('Actionbar', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-  })
-
   /**
    * This test ensures that the autoqueue change mode can only queue one change at a time
    */
   test('Does not auto-queue multiple changes at a time', async ({
     comfyPage,
-    ws
+    getWebSocket
   }) => {
+    const ws = await getWebSocket()
+
     // Enable change auto-queue mode
     const queueOpts = await comfyPage.actionbar.queueButton.toggleOptions()
-    expect(await queueOpts.getMode()).toBe('disabled')
+    await expect.poll(() => queueOpts.getMode()).toBe('disabled')
     await queueOpts.setMode('change')
     await comfyPage.nextFrame()
-    expect(await queueOpts.getMode()).toBe('change')
+    await expect.poll(() => queueOpts.getMode()).toBe('change')
     await comfyPage.actionbar.queueButton.toggleOptions()
 
     // Intercept the prompt queue endpoint
@@ -57,22 +54,24 @@ test.describe('Actionbar', { tag: '@ui' }, () => {
 
         ;(
           window.app!.extensionManager as WorkspaceStore
-        ).workflow.activeWorkflow?.changeTracker.checkState()
+        ).workflow.activeWorkflow?.changeTracker.captureCanvasState()
       }, value)
     }
 
     // Trigger a status websocket message
-    const triggerStatus = async (queueSize: number) => {
-      await ws.trigger({
-        type: 'status',
-        data: {
-          status: {
-            exec_info: {
-              queue_remaining: queueSize
+    const triggerStatus = (queueSize: number) => {
+      ws.send(
+        JSON.stringify({
+          type: 'status',
+          data: {
+            status: {
+              exec_info: {
+                queue_remaining: queueSize
+              }
             }
           }
-        }
-      } as StatusWsMessage)
+        })
+      )
     }
 
     // Extract the width from the queue response
@@ -104,8 +103,8 @@ test.describe('Actionbar', { tag: '@ui' }, () => {
     ).toBe(1)
 
     // Trigger a status update so auto-queue re-runs
-    await triggerStatus(1)
-    await triggerStatus(0)
+    triggerStatus(1)
+    triggerStatus(0)
 
     // Ensure the queued width is the last queued value
     expect(
@@ -124,6 +123,8 @@ test.describe('Actionbar', { tag: '@ui' }, () => {
         force: true
       }
     )
-    expect(await comfyPage.actionbar.isDocked()).toBe(true)
+    await expect(comfyPage.actionbar.root.locator('.actionbar')).toHaveClass(
+      /static/
+    )
   })
 })
diff --git a/browser_tests/tests/appModeArrange.spec.ts b/browser_tests/tests/appModeArrange.spec.ts
new file mode 100644
index 0000000000..1dd343d103
--- /dev/null
+++ b/browser_tests/tests/appModeArrange.spec.ts
@@ -0,0 +1,70 @@
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '@e2e/fixtures/ComfyPage'
+import { setupBuilder } from '@e2e/helpers/builderTestUtils'
+
+test.describe('App mode arrange step', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.appMode.enableLinearMode()
+    await comfyPage.appMode.suppressVueNodeSwitchPopup()
+  })
+
+  test('Placeholder is shown when outputs are configured but no run has happened', async ({
+    comfyPage
+  }) => {
+    const { appMode } = comfyPage
+
+    await setupBuilder(comfyPage)
+    await appMode.steps.goToPreview()
+
+    await expect(appMode.steps.previewButton).toHaveAttribute(
+      'aria-current',
+      'step'
+    )
+    await expect(appMode.arrangePreview).toBeVisible()
+    await expect(appMode.arrangeNoOutputs).toBeHidden()
+  })
+
+  test('No-outputs state navigates to the Outputs step via "Switch to Outputs"', async ({
+    comfyPage
+  }) => {
+    const { appMode } = comfyPage
+
+    await appMode.enterBuilder()
+    await appMode.steps.goToPreview()
+
+    await expect(appMode.arrangeNoOutputs).toBeVisible()
+    await expect(appMode.arrangePreview).toBeHidden()
+
+    await appMode.arrangeSwitchToOutputsButton.click()
+
+    await expect(appMode.steps.outputsButton).toHaveAttribute(
+      'aria-current',
+      'step'
+    )
+    await expect(appMode.arrangeNoOutputs).toBeHidden()
+  })
+
+  test('Connect-output popover from preview step navigates to the Outputs step', async ({
+    comfyPage
+  }) => {
+    const { appMode } = comfyPage
+
+    await appMode.enterBuilder()
+    // From a non-select step (preview/arrange), the popover surfaces a
+    // "Switch to Outputs" shortcut alongside cancel.
+    await appMode.steps.goToPreview()
+
+    await appMode.footer.saveAsButton.click()
+    await expect(appMode.connectOutputPopover).toBeVisible()
+    await expect(appMode.connectOutputSwitchButton).toBeVisible()
+
+    await appMode.connectOutputSwitchButton.click()
+    await expect(appMode.connectOutputPopover).toBeHidden()
+    await expect(appMode.steps.outputsButton).toHaveAttribute(
+      'aria-current',
+      'step'
+    )
+  })
+})
diff --git a/browser_tests/tests/appModeDropdownClipping.spec.ts b/browser_tests/tests/appModeDropdownClipping.spec.ts
index f01c3853c0..bc65c6c202 100644
--- a/browser_tests/tests/appModeDropdownClipping.spec.ts
+++ b/browser_tests/tests/appModeDropdownClipping.spec.ts
@@ -3,7 +3,7 @@ import type { Page } from '@playwright/test'
 import {
   comfyPageFixture as test,
   comfyExpect as expect
-} from '../fixtures/ComfyPage'
+} from '@e2e/fixtures/ComfyPage'
 
 /**
  * Default workflow widget inputs as [nodeId, widgetName] tuples.
@@ -60,13 +60,7 @@ async function addNode(page: Page, nodeType: string): Promise<string> {
 
 test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.page.evaluate(() => {
-      window.app!.api.serverFeatureFlags.value = {
-        ...window.app!.api.serverFeatureFlags.value,
-        linear_toggle_enabled: true
-      }
-    })
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.appMode.enableLinearMode()
   })
 
   test('Select dropdown is not clipped in app mode panel', async ({
@@ -81,9 +75,7 @@ test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
     ]
     await comfyPage.appMode.enterAppModeWithInputs(inputs)
 
-    await expect(comfyPage.appMode.linearWidgets).toBeVisible({
-      timeout: 5000
-    })
+    await expect(comfyPage.appMode.linearWidgets).toBeVisible()
 
     // Scroll to bottom so the codec widget is at the clipping edge
     const widgetList = comfyPage.appMode.linearWidgets
@@ -96,21 +88,25 @@ test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
     await codecSelect.click()
 
     const overlay = comfyPage.page.locator('.p-select-overlay').first()
-    await expect(overlay).toBeVisible({ timeout: 5000 })
+    await expect(overlay).toBeVisible()
 
-    const isInViewport = await overlay.evaluate((el) => {
-      const rect = el.getBoundingClientRect()
-      return (
-        rect.top >= 0 &&
-        rect.left >= 0 &&
-        rect.bottom <= window.innerHeight &&
-        rect.right <= window.innerWidth
+    await expect
+      .poll(() =>
+        overlay.evaluate((el) => {
+          const rect = el.getBoundingClientRect()
+          return (
+            rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <= window.innerHeight &&
+            rect.right <= window.innerWidth
+          )
+        })
       )
-    })
-    expect(isInViewport).toBe(true)
+      .toBe(true)
 
-    const isClipped = await overlay.evaluate(isClippedByAnyAncestor)
-    expect(isClipped).toBe(false)
+    await expect
+      .poll(() => overlay.evaluate(isClippedByAnyAncestor))
+      .toBe(false)
   })
 
   test('FormDropdown popup is not clipped in app mode panel', async ({
@@ -125,9 +121,7 @@ test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
     ]
     await comfyPage.appMode.enterAppModeWithInputs(inputs)
 
-    await expect(comfyPage.appMode.linearWidgets).toBeVisible({
-      timeout: 5000
-    })
+    await expect(comfyPage.appMode.linearWidgets).toBeVisible()
 
     // Scroll to bottom so the image widget is at the clipping edge
     const widgetList = comfyPage.appMode.linearWidgets
@@ -145,24 +139,25 @@ test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
 
     // The unstyled PrimeVue Popover renders with role="dialog".
     // Locate the one containing the image grid (filter buttons like "All", "Inputs").
-    const popover = comfyPage.page
-      .getByRole('dialog')
-      .filter({ has: comfyPage.page.getByRole('button', { name: 'All' }) })
-      .first()
-    await expect(popover).toBeVisible({ timeout: 5000 })
+    const popover = comfyPage.appMode.imagePickerPopover
+    await expect(popover).toBeVisible()
 
-    const isInViewport = await popover.evaluate((el) => {
-      const rect = el.getBoundingClientRect()
-      return (
-        rect.top >= 0 &&
-        rect.left >= 0 &&
-        rect.bottom <= window.innerHeight &&
-        rect.right <= window.innerWidth
+    await expect
+      .poll(() =>
+        popover.evaluate((el) => {
+          const rect = el.getBoundingClientRect()
+          return (
+            rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <= window.innerHeight &&
+            rect.right <= window.innerWidth
+          )
+        })
       )
-    })
-    expect(isInViewport).toBe(true)
+      .toBe(true)
 
-    const isClipped = await popover.evaluate(isClippedByAnyAncestor)
-    expect(isClipped).toBe(false)
+    await expect
+      .poll(() => popover.evaluate(isClippedByAnyAncestor))
+      .toBe(false)
   })
 })
diff --git a/browser_tests/tests/appModePruning.spec.ts b/browser_tests/tests/appModePruning.spec.ts
new file mode 100644
index 0000000000..d9a082c499
--- /dev/null
+++ b/browser_tests/tests/appModePruning.spec.ts
@@ -0,0 +1,105 @@
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '@e2e/fixtures/ComfyPage'
+import { setupBuilder } from '@e2e/helpers/builderTestUtils'
+import { fitToViewInstant } from '@e2e/helpers/fitToView'
+
+const RESIZE_NODE_TITLE = 'Resize Image/Mask'
+const RESIZE_NODE_ID = '1'
+const SAVE_IMAGE_NODE_ID = '9'
+
+/**
+ * Load the dynamic combo workflow, enter builder,
+ * select a dynamic sub-widget as input and SaveImage as output.
+ */
+async function setupDynamicComboBuilder(comfyPage: ComfyPage) {
+  const { appMode } = comfyPage
+  await comfyPage.workflow.loadWorkflow('inputs/dynamic_combo')
+  await fitToViewInstant(comfyPage)
+  await appMode.enterBuilder()
+  await appMode.steps.goToInputs()
+  await appMode.select.selectInputWidget(RESIZE_NODE_TITLE, 'resize_type.width')
+  await appMode.steps.goToOutputs()
+  await appMode.select.selectOutputNode('Save Image')
+}
+
+test.describe('App Mode Pruning', { tag: ['@ui'] }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.appMode.enableLinearMode()
+    await comfyPage.settings.setSetting(
+      'Comfy.AppBuilder.VueNodeSwitchDismissed',
+      true
+    )
+  })
+
+  test('prunes deleted outputs', async ({ comfyPage }) => {
+    const { appMode } = comfyPage
+
+    // Enter builder with default workflow (seed input + SaveImage output)
+    await setupBuilder(comfyPage)
+
+    // Verify save-as dialog opens
+    await appMode.footer.saveAsButton.click()
+    await expect(appMode.saveAs.dialog).toBeVisible()
+    await appMode.saveAs.dialog.press('Escape')
+
+    // Exit builder, delete SaveImage node
+    await appMode.footer.exitBuilder()
+    await comfyPage.vueNodes.deleteNode(SAVE_IMAGE_NODE_ID)
+    await expect(
+      comfyPage.vueNodes.getNodeLocator(SAVE_IMAGE_NODE_ID)
+    ).not.toBeAttached()
+
+    // Re-enter builder - pruning should auto-clean stale outputs
+    await appMode.enterBuilder()
+    await appMode.steps.goToOutputs()
+    await expect(appMode.outputPlaceholder).toBeVisible()
+
+    // Verify can't save
+    await appMode.footer.saveAsButton.click()
+    await expect(appMode.connectOutputPopover).toBeVisible()
+  })
+
+  test('does not prune missing widgets when node still exists for dynamic widgets', async ({
+    comfyPage
+  }) => {
+    const { appMode } = comfyPage
+
+    await setupDynamicComboBuilder(comfyPage)
+    await appMode.footer.exitBuilder()
+    await fitToViewInstant(comfyPage)
+
+    // Change dynamic combo from "scale dimensions" to "scale by multiplier"
+    // This removes the width/height widgets and adds factor
+    await comfyPage.vueNodes.selectComboOption(
+      RESIZE_NODE_TITLE,
+      'resize_type',
+      'scale by multiplier'
+    )
+
+    // Re-enter builder - node exists but widget is gone
+    await appMode.enterBuilder()
+    await appMode.steps.goToInputs()
+
+    // The input should still be listed but show "Widget not visible"
+    const subtitle = appMode.select.getInputItemSubtitle('resize_type.width')
+    await expect(subtitle).toHaveText('Widget not visible')
+  })
+
+  test('prunes missing widgets when node deleted', async ({ comfyPage }) => {
+    const { appMode } = comfyPage
+
+    await setupDynamicComboBuilder(comfyPage)
+    await appMode.footer.exitBuilder()
+
+    // Delete the ResizeImageMaskNode entirely
+    await comfyPage.vueNodes.deleteNode(RESIZE_NODE_ID)
+
+    // Re-enter builder - pruning should auto-clean stale inputs
+    await appMode.enterBuilder()
+    await appMode.steps.goToInputs()
+    await expect(appMode.select.inputItems).toHaveCount(0)
+  })
+})
diff --git a/browser_tests/tests/appModeVueNodeSwitch.spec.ts b/browser_tests/tests/appModeVueNodeSwitch.spec.ts
new file mode 100644
index 0000000000..842f4fb207
--- /dev/null
+++ b/browser_tests/tests/appModeVueNodeSwitch.spec.ts
@@ -0,0 +1,84 @@
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '@e2e/fixtures/ComfyPage'
+
+async function enterBuilderExpectVueNodeSwitchPopup(comfyPage: ComfyPage) {
+  const { appMode } = comfyPage
+  await appMode.enterBuilder()
+  await expect(appMode.vueNodeSwitchPopup).toBeVisible()
+}
+
+async function expectVueNodesEnabled(comfyPage: ComfyPage) {
+  await expect
+    .poll(() =>
+      comfyPage.settings.getSetting<boolean>('Comfy.VueNodes.Enabled')
+    )
+    .toBe(true)
+}
+
+test.describe('Vue node switch notification popup', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.appMode.enableLinearMode()
+    await comfyPage.appMode.allowVueNodeSwitchPopup()
+  })
+
+  test('Popup appears when entering builder; dismiss closes without persisting and shows again on a later entry', async ({
+    comfyPage
+  }) => {
+    const { appMode } = comfyPage
+
+    await enterBuilderExpectVueNodeSwitchPopup(comfyPage)
+
+    await appMode.vueNodeSwitchDismissButton.click()
+    await expect(appMode.vueNodeSwitchPopup).toBeHidden()
+
+    // "Don't show again" was not checked → preference remains false
+    await expect
+      .poll(() =>
+        comfyPage.settings.getSetting<boolean>(
+          'Comfy.AppBuilder.VueNodeSwitchDismissed'
+        )
+      )
+      .toBe(false)
+
+    // Disable vue nodes and re-enter builder
+    await appMode.footer.exitBuilder()
+    await comfyPage.menu.topbar.setVueNodesEnabled(false)
+    await appMode.enterBuilder()
+
+    await expectVueNodesEnabled(comfyPage)
+    await expect(appMode.vueNodeSwitchPopup).toBeVisible()
+  })
+
+  test('"Don\'t show again" persists the dismissal and suppresses future popups', async ({
+    comfyPage
+  }) => {
+    const { appMode } = comfyPage
+
+    await enterBuilderExpectVueNodeSwitchPopup(comfyPage)
+    await expectVueNodesEnabled(comfyPage)
+
+    // Dismiss with dont show again checked
+    await appMode.vueNodeSwitchDontShowAgainCheckbox.check()
+    await appMode.vueNodeSwitchDismissButton.click()
+    await expect(appMode.vueNodeSwitchPopup).toBeHidden()
+
+    await expect
+      .poll(() =>
+        comfyPage.settings.getSetting<boolean>(
+          'Comfy.AppBuilder.VueNodeSwitchDismissed'
+        )
+      )
+      .toBe(true)
+
+    // Disable vue nodes and re-enter builder
+    await appMode.footer.exitBuilder()
+    await comfyPage.menu.topbar.setVueNodesEnabled(false)
+    await appMode.enterBuilder()
+
+    await expectVueNodesEnabled(comfyPage)
+    await expect(appMode.vueNodeSwitchPopup).toBeHidden()
+  })
+})
diff --git a/browser_tests/tests/appModeWelcome.spec.ts b/browser_tests/tests/appModeWelcome.spec.ts
new file mode 100644
index 0000000000..c51076d08d
--- /dev/null
+++ b/browser_tests/tests/appModeWelcome.spec.ts
@@ -0,0 +1,95 @@
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '@e2e/fixtures/ComfyPage'
+
+test.describe('App mode welcome states', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.appMode.enableLinearMode()
+    await comfyPage.appMode.suppressVueNodeSwitchPopup()
+  })
+
+  test('Empty workflow text is visible when no nodes', async ({
+    comfyPage
+  }) => {
+    await comfyPage.nodeOps.clearGraph()
+    await comfyPage.appMode.toggleAppMode()
+
+    await expect(comfyPage.appMode.welcome).toBeVisible()
+    await expect(comfyPage.appMode.emptyWorkflowText).toBeVisible()
+    await expect(comfyPage.appMode.buildAppButton).toBeHidden()
+  })
+
+  test('Build app button is visible when no outputs selected', async ({
+    comfyPage
+  }) => {
+    await comfyPage.appMode.toggleAppMode()
+
+    await expect(comfyPage.appMode.welcome).toBeVisible()
+    await expect(comfyPage.appMode.buildAppButton).toBeVisible()
+    await expect(comfyPage.appMode.emptyWorkflowText).toBeHidden()
+  })
+
+  test('Empty workflow and build app are hidden when app has outputs', async ({
+    comfyPage
+  }) => {
+    await comfyPage.appMode.enterAppModeWithInputs([['3', 'seed']])
+
+    await expect(comfyPage.appMode.linearWidgets).toBeVisible()
+    await expect(comfyPage.appMode.emptyWorkflowText).toBeHidden()
+    await expect(comfyPage.appMode.buildAppButton).toBeHidden()
+  })
+
+  test('Back to workflow returns to graph mode', async ({ comfyPage }) => {
+    await comfyPage.appMode.toggleAppMode()
+
+    await expect(comfyPage.appMode.welcome).toBeVisible()
+    await comfyPage.appMode.backToWorkflowButton.click()
+
+    await expect(comfyPage.canvas).toBeVisible()
+    await expect(comfyPage.appMode.welcome).toBeHidden()
+  })
+
+  test('Load template opens template selector', async ({ comfyPage }) => {
+    await comfyPage.nodeOps.clearGraph()
+    await comfyPage.appMode.toggleAppMode()
+
+    await expect(comfyPage.appMode.welcome).toBeVisible()
+    await comfyPage.appMode.loadTemplateButton.click()
+
+    await expect(comfyPage.templates.content).toBeVisible()
+  })
+
+  test('Empty workflow dialog blocks entering builder on an empty graph', async ({
+    comfyPage
+  }) => {
+    const { appMode } = comfyPage
+
+    await comfyPage.nodeOps.clearGraph()
+    await appMode.enterBuilder()
+
+    await expect(appMode.emptyWorkflowDialog).toBeVisible()
+    await expect(appMode.emptyWorkflowBackButton).toBeVisible()
+    await expect(appMode.emptyWorkflowLoadTemplateButton).toBeVisible()
+
+    // Back to workflow dismisses the dialog and returns to graph mode
+    await appMode.emptyWorkflowBackButton.click()
+    await expect(appMode.emptyWorkflowDialog).toBeHidden()
+    await expect(comfyPage.canvas).toBeVisible()
+  })
+
+  test('Empty workflow dialog "Load template" opens the template selector', async ({
+    comfyPage
+  }) => {
+    const { appMode } = comfyPage
+
+    await comfyPage.nodeOps.clearGraph()
+    await appMode.enterBuilder()
+
+    await expect(appMode.emptyWorkflowDialog).toBeVisible()
+    await appMode.emptyWorkflowLoadTemplateButton.click()
+
+    await expect(appMode.emptyWorkflowDialog).toBeHidden()
+    await expect(comfyPage.templates.content).toBeVisible()
+  })
+})
diff --git a/browser_tests/tests/appModeWidgetRename.spec.ts b/browser_tests/tests/appModeWidgetRename.spec.ts
index a2985319b9..7dd738ba78 100644
--- a/browser_tests/tests/appModeWidgetRename.spec.ts
+++ b/browser_tests/tests/appModeWidgetRename.spec.ts
@@ -1,21 +1,15 @@
 import {
   comfyPageFixture as test,
   comfyExpect as expect
-} from '../fixtures/ComfyPage'
+} from '@e2e/fixtures/ComfyPage'
 import {
   saveAndReopenInAppMode,
   setupSubgraphBuilder
-} from '../helpers/builderTestUtils'
+} from '@e2e/helpers/builderTestUtils'
 
 test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.page.evaluate(() => {
-      window.app!.api.serverFeatureFlags.value = {
-        ...window.app!.api.serverFeatureFlags.value,
-        linear_toggle_enabled: true
-      }
-    })
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.appMode.enableLinearMode()
     await comfyPage.settings.setSetting(
       'Comfy.AppBuilder.VueNodeSwitchDismissed',
       true
@@ -29,18 +23,18 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
     await setupSubgraphBuilder(comfyPage)
 
     // Go back to inputs step where IoItems are shown
-    await appMode.goToInputs()
+    await appMode.steps.goToInputs()
 
-    const menu = appMode.getBuilderInputItemMenu('seed')
-    await expect(menu).toBeVisible({ timeout: 5000 })
-    await appMode.renameBuilderInputViaMenu('seed', 'Builder Input Seed')
+    const menu = appMode.select.getInputItemMenu('seed')
+    await expect(menu).toBeVisible()
+    await appMode.select.renameInputViaMenu('seed', 'Builder Input Seed')
 
     // Verify in app mode after save/reload
-    await appMode.exitBuilder()
+    await appMode.footer.exitBuilder()
     const workflowName = `${new Date().getTime()} builder-input-menu`
     await saveAndReopenInAppMode(comfyPage, workflowName)
 
-    await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
+    await expect(appMode.linearWidgets).toBeVisible()
     await expect(
       appMode.linearWidgets.getByText('Builder Input Seed')
     ).toBeVisible()
@@ -52,15 +46,15 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
     const { appMode } = comfyPage
     await setupSubgraphBuilder(comfyPage)
 
-    await appMode.goToInputs()
+    await appMode.steps.goToInputs()
 
-    await appMode.renameBuilderInput('seed', 'Dblclick Seed')
+    await appMode.select.renameInput('seed', 'Dblclick Seed')
 
-    await appMode.exitBuilder()
+    await appMode.footer.exitBuilder()
     const workflowName = `${new Date().getTime()} builder-input-dblclick`
     await saveAndReopenInAppMode(comfyPage, workflowName)
 
-    await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
+    await expect(appMode.linearWidgets).toBeVisible()
     await expect(appMode.linearWidgets.getByText('Dblclick Seed')).toBeVisible()
   })
 
@@ -68,18 +62,18 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
     const { appMode } = comfyPage
     await setupSubgraphBuilder(comfyPage)
 
-    await appMode.goToPreview()
+    await appMode.steps.goToPreview()
 
-    const menu = appMode.getBuilderPreviewWidgetMenu('seed — New Subgraph')
-    await expect(menu).toBeVisible({ timeout: 5000 })
-    await appMode.renameWidget(menu, 'Preview Seed')
+    const menu = appMode.select.getPreviewWidgetMenu('seed — New Subgraph')
+    await expect(menu).toBeVisible()
+    await appMode.select.renameWidget(menu, 'Preview Seed')
 
     // Verify in app mode after save/reload
-    await appMode.exitBuilder()
+    await appMode.footer.exitBuilder()
     const workflowName = `${new Date().getTime()} builder-preview`
     await saveAndReopenInAppMode(comfyPage, workflowName)
 
-    await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
+    await expect(appMode.linearWidgets).toBeVisible()
     await expect(appMode.linearWidgets.getByText('Preview Seed')).toBeVisible()
   })
 
@@ -88,13 +82,13 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
     await setupSubgraphBuilder(comfyPage)
 
     // Enter app mode from builder
-    await appMode.exitBuilder()
+    await appMode.footer.exitBuilder()
     await appMode.toggleAppMode()
 
-    await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
+    await expect(appMode.linearWidgets).toBeVisible()
 
     const menu = appMode.getAppModeWidgetMenu('seed')
-    await appMode.renameWidget(menu, 'App Mode Seed')
+    await appMode.select.renameWidget(menu, 'App Mode Seed')
 
     await expect(appMode.linearWidgets.getByText('App Mode Seed')).toBeVisible()
 
@@ -103,7 +97,7 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
     const workflowName = `${new Date().getTime()} app-mode`
     await saveAndReopenInAppMode(comfyPage, workflowName)
 
-    await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
+    await expect(appMode.linearWidgets).toBeVisible()
     await expect(appMode.linearWidgets.getByText('App Mode Seed')).toBeVisible()
   })
 })
diff --git a/browser_tests/tests/appModeWidgetValues.spec.ts b/browser_tests/tests/appModeWidgetValues.spec.ts
new file mode 100644
index 0000000000..59178eedd7
--- /dev/null
+++ b/browser_tests/tests/appModeWidgetValues.spec.ts
@@ -0,0 +1,94 @@
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '@e2e/fixtures/ComfyPage'
+
+/** One representative of each widget type from the default workflow. */
+type WidgetType = 'textarea' | 'number' | 'select' | 'text'
+
+const WIDGET_TEST_DATA: {
+  nodeId: string
+  widgetName: string
+  type: WidgetType
+  fill: string
+  expected: unknown
+}[] = [
+  {
+    nodeId: '6',
+    widgetName: 'text',
+    type: 'textarea',
+    fill: 'test prompt',
+    expected: 'test prompt'
+  },
+  {
+    nodeId: '5',
+    widgetName: 'width',
+    type: 'number',
+    fill: '768',
+    expected: 768
+  },
+  {
+    nodeId: '3',
+    widgetName: 'cfg',
+    type: 'number',
+    fill: '3.5',
+    expected: 3.5
+  },
+  {
+    nodeId: '3',
+    widgetName: 'sampler_name',
+    type: 'select',
+    fill: 'uni_pc',
+    expected: 'uni_pc'
+  },
+  {
+    nodeId: '9',
+    widgetName: 'filename_prefix',
+    type: 'text',
+    fill: 'test_prefix',
+    expected: 'test_prefix'
+  }
+]
+
+test.describe('App mode widget values in prompt', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.appMode.enableLinearMode()
+  })
+
+  test('Widget values are sent correctly in prompt POST', async ({
+    comfyPage
+  }) => {
+    const { appMode } = comfyPage
+    const inputs: [string, string][] = WIDGET_TEST_DATA.map(
+      ({ nodeId, widgetName }) => [nodeId, widgetName]
+    )
+    await appMode.enterAppModeWithInputs(inputs)
+    await expect(appMode.linearWidgets).toBeVisible()
+
+    for (const { nodeId, widgetName, type, fill } of WIDGET_TEST_DATA) {
+      const key = `${nodeId}:${widgetName}`
+      switch (type) {
+        case 'textarea':
+          await appMode.widgets.fillTextarea(key, fill)
+          break
+        case 'number':
+          await appMode.widgets.fillNumber(key, fill)
+          break
+        case 'select':
+          await appMode.widgets.selectOption(key, fill)
+          break
+        case 'text':
+          await appMode.widgets.fillText(key, fill)
+          break
+        default:
+          throw new Error(`Unknown widget type: ${type satisfies never}`)
+      }
+    }
+
+    const prompt = await appMode.widgets.runAndCapturePrompt()
+
+    for (const { nodeId, widgetName, expected } of WIDGET_TEST_DATA) {
+      expect(prompt[nodeId].inputs[widgetName]).toBe(expected)
+    }
+  })
+})
diff --git a/browser_tests/tests/assetHelper.spec.ts b/browser_tests/tests/assetHelper.spec.ts
new file mode 100644
index 0000000000..9230516427
--- /dev/null
+++ b/browser_tests/tests/assetHelper.spec.ts
@@ -0,0 +1,382 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import {
+  createAssetHelper,
+  withModels,
+  withInputFiles,
+  withOutputAssets,
+  withAsset,
+  withPagination,
+  withUploadResponse
+} from '@e2e/fixtures/helpers/AssetHelper'
+import {
+  STABLE_CHECKPOINT,
+  STABLE_LORA,
+  STABLE_INPUT_IMAGE,
+  STABLE_OUTPUT
+} from '@e2e/fixtures/data/assetFixtures'
+
+test.describe('AssetHelper', () => {
+  test.describe('operators and configuration', () => {
+    test('creates helper with models via withModels operator', async ({
+      comfyPage
+    }) => {
+      const helper = createAssetHelper(
+        comfyPage.page,
+        withModels(3, 'checkpoints')
+      )
+      expect(helper.assetCount).toBe(3)
+      expect(
+        helper.getAssets().every((a) => a.tags?.includes('checkpoints'))
+      ).toBe(true)
+    })
+
+    test('composes multiple operators', async ({ comfyPage }) => {
+      const helper = createAssetHelper(
+        comfyPage.page,
+        withModels(2, 'checkpoints'),
+        withInputFiles(2),
+        withOutputAssets(1)
+      )
+      expect(helper.assetCount).toBe(5)
+    })
+
+    test('adds individual assets via withAsset', async ({ comfyPage }) => {
+      const helper = createAssetHelper(
+        comfyPage.page,
+        withAsset(STABLE_CHECKPOINT),
+        withAsset(STABLE_LORA)
+      )
+      expect(helper.assetCount).toBe(2)
+      expect(helper.getAsset(STABLE_CHECKPOINT.id)).toMatchObject({
+        id: STABLE_CHECKPOINT.id,
+        name: STABLE_CHECKPOINT.name
+      })
+    })
+
+    test('withPagination sets pagination options', async ({ comfyPage }) => {
+      const helper = createAssetHelper(
+        comfyPage.page,
+        withModels(2),
+        withPagination({ total: 100, hasMore: true })
+      )
+      expect(helper.assetCount).toBe(2)
+    })
+  })
+
+  test.describe('mock API routes', () => {
+    test('GET /assets returns all assets', async ({ comfyPage }) => {
+      const { assetApi } = comfyPage
+      assetApi.configure(
+        withAsset(STABLE_CHECKPOINT),
+        withAsset(STABLE_INPUT_IMAGE)
+      )
+      await assetApi.mock()
+
+      const { status, body } = await assetApi.fetch(
+        `${comfyPage.url}/api/assets`
+      )
+      expect(status).toBe(200)
+
+      const data = body as {
+        assets: unknown[]
+        total: number
+        has_more: boolean
+      }
+      expect(data.assets).toHaveLength(2)
+      expect(data.total).toBe(2)
+      expect(data.has_more).toBe(false)
+
+      await assetApi.clearMocks()
+    })
+
+    test('GET /assets respects pagination params', async ({ comfyPage }) => {
+      const { assetApi } = comfyPage
+      assetApi.configure(
+        withModels(5),
+        withPagination({ total: 10, hasMore: true })
+      )
+      await assetApi.mock()
+
+      const { body } = await assetApi.fetch(
+        `${comfyPage.url}/api/assets?limit=2&offset=0`
+      )
+      const data = body as {
+        assets: unknown[]
+        total: number
+        has_more: boolean
+      }
+      expect(data.assets).toHaveLength(2)
+      expect(data.total).toBe(10)
+      expect(data.has_more).toBe(true)
+
+      await assetApi.clearMocks()
+    })
+
+    test('GET /assets filters by include_tags', async ({ comfyPage }) => {
+      const { assetApi } = comfyPage
+      assetApi.configure(
+        withAsset(STABLE_CHECKPOINT),
+        withAsset(STABLE_LORA),
+        withAsset(STABLE_INPUT_IMAGE)
+      )
+      await assetApi.mock()
+
+      const { body } = await assetApi.fetch(
+        `${comfyPage.url}/api/assets?include_tags=models,checkpoints`
+      )
+      const data = body as { assets: Array<{ id: string }> }
+      expect(data.assets).toHaveLength(1)
+      expect(data.assets[0].id).toBe(STABLE_CHECKPOINT.id)
+
+      await assetApi.clearMocks()
+    })
+
+    test('GET /assets/:id returns single asset or 404', async ({
+      comfyPage
+    }) => {
+      const { assetApi } = comfyPage
+      assetApi.configure(withAsset(STABLE_CHECKPOINT))
+      await assetApi.mock()
+
+      const found = await assetApi.fetch(
+        `${comfyPage.url}/api/assets/${STABLE_CHECKPOINT.id}`
+      )
+      expect(found.status).toBe(200)
+      const asset = found.body as { id: string }
+      expect(asset.id).toBe(STABLE_CHECKPOINT.id)
+
+      const notFound = await assetApi.fetch(
+        `${comfyPage.url}/api/assets/nonexistent-id`
+      )
+      expect(notFound.status).toBe(404)
+
+      await assetApi.clearMocks()
+    })
+
+    test('PUT /assets/:id updates asset in store', async ({ comfyPage }) => {
+      const { assetApi } = comfyPage
+      assetApi.configure(withAsset(STABLE_CHECKPOINT))
+      await assetApi.mock()
+
+      const { status, body } = await assetApi.fetch(
+        `${comfyPage.url}/api/assets/${STABLE_CHECKPOINT.id}`,
+        {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ name: 'renamed.safetensors' })
+        }
+      )
+      expect(status).toBe(200)
+
+      const updated = body as { name: string }
+      expect(updated.name).toBe('renamed.safetensors')
+      expect(assetApi.getAsset(STABLE_CHECKPOINT.id)?.name).toBe(
+        'renamed.safetensors'
+      )
+
+      await assetApi.clearMocks()
+    })
+
+    test('DELETE /assets/:id removes asset from store', async ({
+      comfyPage
+    }) => {
+      const { assetApi } = comfyPage
+      assetApi.configure(withAsset(STABLE_CHECKPOINT), withAsset(STABLE_LORA))
+      await assetApi.mock()
+
+      const { status } = await assetApi.fetch(
+        `${comfyPage.url}/api/assets/${STABLE_CHECKPOINT.id}`,
+        { method: 'DELETE' }
+      )
+      expect(status).toBe(204)
+      expect(assetApi.assetCount).toBe(1)
+      expect(assetApi.getAsset(STABLE_CHECKPOINT.id)).toBeUndefined()
+
+      await assetApi.clearMocks()
+    })
+
+    test('POST /assets returns upload response', async ({ comfyPage }) => {
+      const customUpload = {
+        id: 'custom-upload-001',
+        name: 'custom.safetensors',
+        tags: ['models'],
+        created_at: '2025-01-01T00:00:00Z',
+        created_new: true
+      }
+      const { assetApi } = comfyPage
+      assetApi.configure(withUploadResponse(customUpload))
+      await assetApi.mock()
+
+      const { status, body } = await assetApi.fetch(
+        `${comfyPage.url}/api/assets`,
+        { method: 'POST' }
+      )
+      expect(status).toBe(201)
+      const data = body as { id: string; name: string }
+      expect(data.id).toBe('custom-upload-001')
+      expect(data.name).toBe('custom.safetensors')
+
+      await assetApi.clearMocks()
+    })
+
+    test('POST /assets/download returns async download response', async ({
+      comfyPage
+    }) => {
+      const { assetApi } = comfyPage
+      await assetApi.mock()
+
+      const { status, body } = await assetApi.fetch(
+        `${comfyPage.url}/api/assets/download`,
+        { method: 'POST' }
+      )
+      expect(status).toBe(202)
+      const data = body as { task_id: string; status: string }
+      expect(data.task_id).toBe('download-task-001')
+      expect(data.status).toBe('created')
+
+      await assetApi.clearMocks()
+    })
+  })
+
+  test.describe('mutation tracking', () => {
+    test('tracks POST, PUT, DELETE mutations', async ({ comfyPage }) => {
+      const { assetApi } = comfyPage
+      assetApi.configure(withAsset(STABLE_CHECKPOINT))
+      await assetApi.mock()
+
+      await assetApi.fetch(`${comfyPage.url}/api/assets`, { method: 'POST' })
+      await assetApi.fetch(
+        `${comfyPage.url}/api/assets/${STABLE_CHECKPOINT.id}`,
+        {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ name: 'updated.safetensors' })
+        }
+      )
+      await assetApi.fetch(
+        `${comfyPage.url}/api/assets/${STABLE_CHECKPOINT.id}`,
+        { method: 'DELETE' }
+      )
+
+      const mutations = assetApi.getMutations()
+      expect(mutations).toHaveLength(3)
+      expect(mutations[0].method).toBe('POST')
+      expect(mutations[1].method).toBe('PUT')
+      expect(mutations[2].method).toBe('DELETE')
+
+      await assetApi.clearMocks()
+    })
+
+    test('GET requests are not tracked as mutations', async ({ comfyPage }) => {
+      const { assetApi } = comfyPage
+      assetApi.configure(withAsset(STABLE_CHECKPOINT))
+      await assetApi.mock()
+
+      await assetApi.fetch(`${comfyPage.url}/api/assets`)
+      await assetApi.fetch(
+        `${comfyPage.url}/api/assets/${STABLE_CHECKPOINT.id}`
+      )
+
+      expect(assetApi.getMutations()).toHaveLength(0)
+
+      await assetApi.clearMocks()
+    })
+  })
+
+  test.describe('mockError', () => {
+    test('returns error status for all asset routes', async ({ comfyPage }) => {
+      const { assetApi } = comfyPage
+      await assetApi.mockError(503, 'Service Unavailable')
+
+      const { status, body } = await assetApi.fetch(
+        `${comfyPage.url}/api/assets`
+      )
+      expect(status).toBe(503)
+      const data = body as { error: string }
+      expect(data.error).toBe('Service Unavailable')
+
+      await assetApi.clearMocks()
+    })
+  })
+
+  test.describe('clearMocks', () => {
+    test('resets store, mutations, and unroutes handlers', async ({
+      comfyPage
+    }) => {
+      const { assetApi } = comfyPage
+      assetApi.configure(withAsset(STABLE_CHECKPOINT))
+      await assetApi.mock()
+
+      await assetApi.fetch(`${comfyPage.url}/api/assets`, { method: 'POST' })
+      expect(assetApi.getMutations()).toHaveLength(1)
+      expect(assetApi.assetCount).toBe(1)
+
+      await assetApi.clearMocks()
+      expect(assetApi.getMutations()).toHaveLength(0)
+      expect(assetApi.assetCount).toBe(0)
+    })
+  })
+
+  test.describe('fixture generators', () => {
+    test('generateModels produces deterministic assets', async ({
+      comfyPage
+    }) => {
+      const helper = createAssetHelper(comfyPage.page, withModels(3, 'loras'))
+      const assets = helper.getAssets()
+
+      expect(assets).toHaveLength(3)
+      expect(assets.every((a) => a.tags?.includes('loras'))).toBe(true)
+      expect(assets.every((a) => a.tags?.includes('models'))).toBe(true)
+
+      const ids = assets.map((a) => a.id)
+      expect(new Set(ids).size).toBe(3)
+    })
+
+    test('generateInputFiles produces deterministic input assets', async ({
+      comfyPage
+    }) => {
+      const helper = createAssetHelper(comfyPage.page, withInputFiles(3))
+      const assets = helper.getAssets()
+
+      expect(assets).toHaveLength(3)
+      expect(assets.every((a) => a.tags?.includes('input'))).toBe(true)
+    })
+
+    test('generateOutputAssets produces deterministic output assets', async ({
+      comfyPage
+    }) => {
+      const helper = createAssetHelper(comfyPage.page, withOutputAssets(5))
+      const assets = helper.getAssets()
+
+      expect(assets).toHaveLength(5)
+      expect(assets.every((a) => a.tags?.includes('output'))).toBe(true)
+      expect(assets.every((a) => a.name.startsWith('ComfyUI_'))).toBe(true)
+    })
+
+    test('stable fixtures have expected properties', async ({ comfyPage }) => {
+      const helper = createAssetHelper(
+        comfyPage.page,
+        withAsset(STABLE_CHECKPOINT),
+        withAsset(STABLE_LORA),
+        withAsset(STABLE_INPUT_IMAGE),
+        withAsset(STABLE_OUTPUT)
+      )
+
+      const checkpoint = helper.getAsset(STABLE_CHECKPOINT.id)!
+      expect(checkpoint.tags).toContain('checkpoints')
+      expect(checkpoint.size).toBeGreaterThan(0)
+      expect(checkpoint.created_at).toBeTruthy()
+
+      const lora = helper.getAsset(STABLE_LORA.id)!
+      expect(lora.tags).toContain('loras')
+
+      const input = helper.getAsset(STABLE_INPUT_IMAGE.id)!
+      expect(input.tags).toContain('input')
+
+      const output = helper.getAsset(STABLE_OUTPUT.id)!
+      expect(output.tags).toContain('output')
+    })
+  })
+})
diff --git a/browser_tests/tests/backgroundImageUpload.spec.ts b/browser_tests/tests/backgroundImageUpload.spec.ts
index 0f49787b21..8afad99fc9 100644
--- a/browser_tests/tests/backgroundImageUpload.spec.ts
+++ b/browser_tests/tests/backgroundImageUpload.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
diff --git a/browser_tests/tests/bottomPanel.spec.ts b/browser_tests/tests/bottomPanel.spec.ts
new file mode 100644
index 0000000000..231b21ff4a
--- /dev/null
+++ b/browser_tests/tests/bottomPanel.spec.ts
@@ -0,0 +1,102 @@
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '@e2e/fixtures/ComfyPage'
+
+test.describe('Bottom Panel', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
+  test('should close panel via close button inside the panel', async ({
+    comfyPage
+  }) => {
+    const { bottomPanel } = comfyPage
+
+    await bottomPanel.toggleButton.click()
+    await expect(
+      bottomPanel.root,
+      'Panel should be open before testing close button'
+    ).toBeVisible()
+
+    await bottomPanel.closeButton.click()
+    await expect(bottomPanel.root).toBeHidden()
+  })
+
+  test('should display resize gutter when panel is open', async ({
+    comfyPage
+  }) => {
+    const { bottomPanel } = comfyPage
+
+    await bottomPanel.toggleButton.click()
+    await expect(
+      bottomPanel.root,
+      'Panel should be open before checking the resize gutter'
+    ).toBeVisible()
+    await expect(bottomPanel.resizeGutter).toBeVisible()
+  })
+
+  test('should hide resize gutter when panel is closed', async ({
+    comfyPage
+  }) => {
+    const { bottomPanel } = comfyPage
+
+    await expect(bottomPanel.root).toBeHidden()
+    await expect(bottomPanel.resizeGutter).toBeHidden()
+  })
+
+  test('should resize panel by dragging the gutter', async ({ comfyPage }) => {
+    const { bottomPanel } = comfyPage
+
+    await bottomPanel.toggleButton.click()
+    await expect(
+      bottomPanel.root,
+      'Panel should be open before resizing'
+    ).toBeVisible()
+
+    const initialHeight = await bottomPanel.root.evaluate(
+      (el) => el.getBoundingClientRect().height
+    )
+
+    await bottomPanel.resizeByDragging(-100)
+
+    await expect
+      .poll(
+        () =>
+          bottomPanel.root.evaluate((el) => el.getBoundingClientRect().height),
+        {
+          message:
+            'Panel height should increase after dragging the resize gutter'
+        }
+      )
+      .toBeGreaterThan(initialHeight)
+  })
+
+  test('should not block canvas interactions when panel is closed', async ({
+    comfyPage
+  }) => {
+    const { bottomPanel } = comfyPage
+
+    await expect(bottomPanel.root).toBeHidden()
+
+    await comfyPage.canvas.click({
+      position: { x: 100, y: 100 }
+    })
+    await expect(comfyPage.canvas).toHaveFocus()
+  })
+
+  test('should close panel via close button from shortcuts view', async ({
+    comfyPage
+  }) => {
+    const { bottomPanel } = comfyPage
+
+    await bottomPanel.keyboardShortcutsButton.click()
+    await expect(
+      bottomPanel.root,
+      'Panel should be open before closing it from the shortcuts view'
+    ).toBeVisible()
+
+    await bottomPanel.closeButton.click()
+    await expect(bottomPanel.root).toBeHidden()
+  })
+})
diff --git a/browser_tests/tests/bottomPanelLogs.spec.ts b/browser_tests/tests/bottomPanelLogs.spec.ts
index 814e6b0ada..5004b5273b 100644
--- a/browser_tests/tests/bottomPanelLogs.spec.ts
+++ b/browser_tests/tests/bottomPanelLogs.spec.ts
@@ -1,17 +1,13 @@
 import {
   comfyPageFixture as test,
   comfyExpect as expect
-} from '../fixtures/ComfyPage'
+} from '@e2e/fixtures/ComfyPage'
 
 test.describe('Bottom Panel Logs', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-  })
-
   test('should open bottom panel via toggle button', async ({ comfyPage }) => {
     const { bottomPanel } = comfyPage
 
-    await expect(bottomPanel.root).not.toBeVisible()
+    await expect(bottomPanel.root).toBeHidden()
     await bottomPanel.toggleButton.click()
     await expect(bottomPanel.root).toBeVisible()
   })
@@ -35,7 +31,7 @@ test.describe('Bottom Panel Logs', { tag: '@ui' }, () => {
     await expect(bottomPanel.root).toBeVisible()
 
     await bottomPanel.toggleButton.click()
-    await expect(bottomPanel.root).not.toBeVisible()
+    await expect(bottomPanel.root).toBeHidden()
   })
 
   test('should switch between shortcuts and terminal panels', async ({
@@ -55,7 +51,7 @@ test.describe('Bottom Panel Logs', { tag: '@ui' }, () => {
     await expect(logsTab).toBeVisible()
     await expect(
       comfyPage.page.locator('[id*="tab_shortcuts-essentials"]')
-    ).not.toBeVisible()
+    ).toBeHidden()
   })
 
   test('should persist Logs tab content in bottom panel', async ({
diff --git a/browser_tests/tests/bottomPanelShortcuts.spec.ts b/browser_tests/tests/bottomPanelShortcuts.spec.ts
index bebba30de1..767e4b87c2 100644
--- a/browser_tests/tests/bottomPanelShortcuts.spec.ts
+++ b/browser_tests/tests/bottomPanelShortcuts.spec.ts
@@ -1,20 +1,16 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.describe('Bottom Panel Shortcuts', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-  })
-
   test('should toggle shortcuts panel visibility', async ({ comfyPage }) => {
     const { bottomPanel } = comfyPage
 
-    await expect(bottomPanel.root).not.toBeVisible()
+    await expect(bottomPanel.root).toBeHidden()
     await bottomPanel.keyboardShortcutsButton.click()
     await expect(bottomPanel.root).toBeVisible()
     await bottomPanel.keyboardShortcutsButton.click()
-    await expect(bottomPanel.root).not.toBeVisible()
+    await expect(bottomPanel.root).toBeHidden()
   })
 
   test('should display essentials shortcuts tab', async ({ comfyPage }) => {
@@ -103,14 +99,15 @@ test.describe('Bottom Panel Shortcuts', { tag: '@ui' }, () => {
 
     const keyBadges = bottomPanel.shortcuts.keyBadges
     await keyBadges.first().waitFor({ state: 'visible' })
-    const count = await keyBadges.count()
-    expect(count).toBeGreaterThanOrEqual(1)
+    await expect.poll(() => keyBadges.count()).toBeGreaterThanOrEqual(1)
 
-    const badgeText = await keyBadges.allTextContents()
-    const hasModifiers = badgeText.some((text) =>
-      ['Ctrl', 'Cmd', 'Shift', 'Alt'].includes(text)
-    )
-    expect(hasModifiers).toBeTruthy()
+    await expect
+      .poll(() => keyBadges.allTextContents())
+      .toEqual(
+        expect.arrayContaining([
+          expect.stringMatching(/^(Ctrl|Cmd|Shift|Alt)$/)
+        ])
+      )
   })
 
   test('should maintain panel state when switching between panels', async ({
@@ -181,7 +178,7 @@ test.describe('Bottom Panel Shortcuts', { tag: '@ui' }, () => {
     await expect(bottomPanel.root).toBeVisible()
 
     await bottomPanel.keyboardShortcutsButton.click()
-    await expect(bottomPanel.root).not.toBeVisible()
+    await expect(bottomPanel.root).toBeHidden()
   })
 
   test('should display shortcuts in organized columns', async ({
@@ -191,13 +188,10 @@ test.describe('Bottom Panel Shortcuts', { tag: '@ui' }, () => {
 
     await bottomPanel.keyboardShortcutsButton.click()
 
-    await expect(
-      comfyPage.page.locator('[data-testid="shortcuts-columns"]')
-    ).toBeVisible()
+    await expect(comfyPage.page.getByTestId('shortcuts-columns')).toBeVisible()
 
     const subcategoryTitles = bottomPanel.shortcuts.subcategoryTitles
-    const titleCount = await subcategoryTitles.count()
-    expect(titleCount).toBeGreaterThanOrEqual(2)
+    await expect.poll(() => subcategoryTitles.count()).toBeGreaterThanOrEqual(2)
   })
 
   test('should open shortcuts panel with Ctrl+Shift+K', async ({
@@ -205,7 +199,7 @@ test.describe('Bottom Panel Shortcuts', { tag: '@ui' }, () => {
   }) => {
     const { bottomPanel } = comfyPage
 
-    await expect(bottomPanel.root).not.toBeVisible()
+    await expect(bottomPanel.root).toBeHidden()
 
     await comfyPage.page.keyboard.press('Control+Shift+KeyK')
 
diff --git a/browser_tests/tests/browserTabTitle.spec.ts b/browser_tests/tests/browserTabTitle.spec.ts
index 1ab294be39..8981691c43 100644
--- a/browser_tests/tests/browserTabTitle.spec.ts
+++ b/browser_tests/tests/browserTabTitle.spec.ts
@@ -1,14 +1,10 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import type { WorkspaceStore } from '../types/globals'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import type { WorkspaceStore } from '@e2e/types/globals'
 
 test.describe('Browser tab title', { tag: '@smoke' }, () => {
   test.describe('Beta Menu', () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    })
-
     test('Can display workflow name', async ({ comfyPage }) => {
       const workflowName = await comfyPage.page.evaluate(async () => {
         return (window.app!.extensionManager as WorkspaceStore).workflow
@@ -19,24 +15,26 @@ test.describe('Browser tab title', { tag: '@smoke' }, () => {
         .toBe(`*${workflowName} - ComfyUI`)
     })
 
-    // Failing on CI
-    // Cannot reproduce locally
-    test.skip('Can display workflow name with unsaved changes', async ({
+    test('Can display workflow name with unsaved changes', async ({
       comfyPage
     }) => {
-      const workflowName = await comfyPage.page.evaluate(async () => {
-        return (window.app!.extensionManager as WorkspaceStore).workflow
-          .activeWorkflow?.filename
+      const workflowName = `test-${Date.now()}`
+      await comfyPage.menu.topbar.saveWorkflow(workflowName)
+      await expect
+        .poll(() => comfyPage.page.title())
+        .toBe(`${workflowName} - ComfyUI`)
+
+      await comfyPage.page.evaluate(async () => {
+        const node = window.app!.graph!.nodes[0]
+        node.pos[0] += 50
+        window.app!.graph!.setDirtyCanvas(true, true)
+        ;(
+          window.app!.extensionManager as WorkspaceStore
+        ).workflow.activeWorkflow?.changeTracker?.captureCanvasState()
       })
-      expect(await comfyPage.page.title()).toBe(`${workflowName} - ComfyUI`)
-
-      await comfyPage.menu.topbar.saveWorkflow('test')
-      expect(await comfyPage.page.title()).toBe('test - ComfyUI')
-
-      const textBox = comfyPage.widgetTextBox
-      await textBox.fill('Hello World')
-      await comfyPage.canvasOps.clickEmptySpace()
-      expect(await comfyPage.page.title()).toBe(`*test - ComfyUI`)
+      await expect
+        .poll(() => comfyPage.page.title())
+        .toBe(`*${workflowName} - ComfyUI`)
 
       // Delete the saved workflow for cleanup.
       await comfyPage.page.evaluate(async () => {
diff --git a/browser_tests/tests/builderReorder.spec.ts b/browser_tests/tests/builderReorder.spec.ts
new file mode 100644
index 0000000000..ede4cbd860
--- /dev/null
+++ b/browser_tests/tests/builderReorder.spec.ts
@@ -0,0 +1,199 @@
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '@e2e/fixtures/ComfyPage'
+import type { AppModeHelper } from '@e2e/fixtures/helpers/AppModeHelper'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import {
+  builderSaveAs,
+  openWorkflowFromSidebar,
+  setupBuilder
+} from '@e2e/helpers/builderTestUtils'
+
+const WIDGETS = ['seed', 'steps', 'cfg']
+
+/** Save as app, close it by loading default, reopen from sidebar, enter app mode. */
+async function saveCloseAndReopenAsApp(
+  comfyPage: ComfyPage,
+  appMode: AppModeHelper,
+  workflowName: string
+) {
+  await appMode.steps.goToPreview()
+  await builderSaveAs(appMode, workflowName)
+  await appMode.saveAs.closeButton.click()
+  await expect(appMode.saveAs.successDialog).toBeHidden()
+
+  await appMode.footer.exitBuilder()
+  await openWorkflowFromSidebar(comfyPage, workflowName)
+  await appMode.toggleAppMode()
+}
+
+test.describe('Builder input reordering', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.appMode.enableLinearMode()
+    await comfyPage.settings.setSetting(
+      'Comfy.AppBuilder.VueNodeSwitchDismissed',
+      true
+    )
+  })
+
+  test('Drag first input to last position', async ({ comfyPage }) => {
+    const { appMode } = comfyPage
+    await setupBuilder(comfyPage, undefined, WIDGETS)
+
+    await appMode.steps.goToInputs()
+    await expect(appMode.select.inputItemTitles).toHaveText(WIDGETS)
+
+    await appMode.select.dragInputItem(0, 2)
+    await expect(appMode.select.inputItemTitles).toHaveText([
+      'steps',
+      'cfg',
+      'seed'
+    ])
+
+    await appMode.steps.goToPreview()
+    await expect(appMode.select.previewWidgetLabels).toHaveText([
+      'steps',
+      'cfg',
+      'seed'
+    ])
+  })
+
+  test('Drag last input to first position', async ({ comfyPage }) => {
+    const { appMode } = comfyPage
+    await setupBuilder(comfyPage, undefined, WIDGETS)
+
+    await appMode.steps.goToInputs()
+    await expect(appMode.select.inputItemTitles).toHaveText(WIDGETS)
+
+    await appMode.select.dragInputItem(2, 0)
+    await expect(appMode.select.inputItemTitles).toHaveText([
+      'cfg',
+      'seed',
+      'steps'
+    ])
+
+    await appMode.steps.goToPreview()
+    await expect(appMode.select.previewWidgetLabels).toHaveText([
+      'cfg',
+      'seed',
+      'steps'
+    ])
+  })
+
+  test('Drag input to middle position', async ({ comfyPage }) => {
+    const { appMode } = comfyPage
+    await setupBuilder(comfyPage, undefined, WIDGETS)
+
+    await appMode.steps.goToInputs()
+    await expect(appMode.select.inputItemTitles).toHaveText(WIDGETS)
+
+    await appMode.select.dragInputItem(0, 1)
+    await expect(appMode.select.inputItemTitles).toHaveText([
+      'steps',
+      'seed',
+      'cfg'
+    ])
+
+    await appMode.steps.goToPreview()
+    await expect(appMode.select.previewWidgetLabels).toHaveText([
+      'steps',
+      'seed',
+      'cfg'
+    ])
+  })
+
+  test('Reorder in preview step reflects in app mode after save', async ({
+    comfyPage
+  }) => {
+    const { appMode } = comfyPage
+    await setupBuilder(comfyPage, undefined, WIDGETS)
+
+    await appMode.steps.goToPreview()
+    await expect(appMode.select.previewWidgetLabels).toHaveText(WIDGETS)
+
+    await appMode.select.dragPreviewItem(0, 2)
+    await expect(appMode.select.previewWidgetLabels).toHaveText([
+      'steps',
+      'cfg',
+      'seed'
+    ])
+
+    const workflowName = `${Date.now()} reorder-preview`
+    await saveCloseAndReopenAsApp(comfyPage, appMode, workflowName)
+
+    await expect(appMode.linearWidgets).toBeVisible()
+    await expect(appMode.select.previewWidgetLabels).toHaveText([
+      'steps',
+      'cfg',
+      'seed'
+    ])
+  })
+
+  test('Reorder inputs persists after save and reload', async ({
+    comfyPage
+  }) => {
+    const { appMode } = comfyPage
+    await setupBuilder(comfyPage, undefined, WIDGETS)
+
+    await appMode.steps.goToInputs()
+    await appMode.select.dragInputItem(0, 2)
+    await expect(appMode.select.inputItemTitles).toHaveText([
+      'steps',
+      'cfg',
+      'seed'
+    ])
+
+    const workflowName = `${Date.now()} reorder-persist`
+    await saveCloseAndReopenAsApp(comfyPage, appMode, workflowName)
+
+    await expect(appMode.linearWidgets).toBeVisible()
+    await expect(appMode.select.previewWidgetLabels).toHaveText([
+      'steps',
+      'cfg',
+      'seed'
+    ])
+  })
+
+  test('Reordering inputs in one app does not corrupt another app', async ({
+    comfyPage
+  }, testInfo) => {
+    // This test creates 2 apps, switches tabs 3 times, and enters builder 3
+    // times — the default 15s timeout is insufficient in CI.
+    testInfo.setTimeout(45_000)
+    const { appMode } = comfyPage
+    const app2Widgets = ['seed', 'steps']
+    const app1Reordered = ['steps', 'cfg', 'seed']
+
+    await test.step('Load both apps', async () => {
+      await comfyPage.workflow.loadWorkflow('linear-basic-app-1')
+      await comfyPage.workflow.loadWorkflow('linear-basic-app-2')
+    })
+
+    await test.step('Reorder app1 inputs', async () => {
+      await comfyPage.workflow.switchToTab('linear-basic-app-1')
+      await appMode.enterBuilder()
+      await appMode.steps.goToInputs()
+      await expect(appMode.select.inputItemTitles).toHaveText(WIDGETS)
+
+      await appMode.select.dragInputItem(0, 2)
+      await expect(appMode.select.inputItemTitles).toHaveText(app1Reordered)
+    })
+
+    await test.step('Verify app2 inputs are not corrupted', async () => {
+      await appMode.footer.exitBuilder()
+      await comfyPage.workflow.switchToTab('linear-basic-app-2')
+      await appMode.enterBuilder()
+      await appMode.steps.goToInputs()
+      await expect(appMode.select.inputItemTitles).toHaveText(app2Widgets)
+    })
+
+    await test.step('Verify app1 reorder persisted', async () => {
+      await appMode.footer.exitBuilder()
+      await comfyPage.workflow.switchToTab('linear-basic-app-1')
+      await appMode.enterBuilder()
+      await appMode.steps.goToInputs()
+      await expect(appMode.select.inputItemTitles).toHaveText(app1Reordered)
+    })
+  })
+})
diff --git a/browser_tests/tests/builderSaveFlow.spec.ts b/browser_tests/tests/builderSaveFlow.spec.ts
index 103d372e0d..7d98e305f7 100644
--- a/browser_tests/tests/builderSaveFlow.spec.ts
+++ b/browser_tests/tests/builderSaveFlow.spec.ts
@@ -1,19 +1,42 @@
 import {
   comfyPageFixture as test,
   comfyExpect as expect
-} from '../fixtures/ComfyPage'
-import { setupSubgraphBuilder } from '../helpers/builderTestUtils'
-import { fitToViewInstant } from '../helpers/fitToView'
+} from '@e2e/fixtures/ComfyPage'
+import type { AppModeHelper } from '@e2e/fixtures/helpers/AppModeHelper'
+import type { BuilderSaveAsHelper } from '@e2e/fixtures/helpers/BuilderSaveAsHelper'
+import {
+  builderSaveAs,
+  openWorkflowFromSidebar,
+  setupBuilder
+} from '@e2e/helpers/builderTestUtils'
+import { fitToViewInstant } from '@e2e/helpers/fitToView'
 
-test.describe('Builder save flow', { tag: ['@ui', '@subgraph'] }, () => {
+/**
+ * After a first save, open save-as again from the chevron,
+ * fill name + view type, and save.
+ */
+async function reSaveAs(
+  appMode: AppModeHelper,
+  workflowName: string,
+  viewType: 'App' | 'Node graph'
+) {
+  await appMode.footer.openSaveAsFromChevron()
+  await expect(appMode.saveAs.nameInput).toBeVisible()
+  await appMode.saveAs.fillAndSave(workflowName, viewType)
+}
+
+async function dismissSuccessDialog(
+  saveAs: BuilderSaveAsHelper,
+  button: 'close' | 'dismiss' = 'close'
+) {
+  const btn = button === 'close' ? saveAs.closeButton : saveAs.dismissButton
+  await btn.click()
+  await expect(saveAs.successDialog).toBeHidden()
+}
+
+test.describe('Builder save flow', { tag: ['@ui'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.page.evaluate(() => {
-      window.app!.api.serverFeatureFlags.value = {
-        ...window.app!.api.serverFeatureFlags.value,
-        linear_toggle_enabled: true
-      }
-    })
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.appMode.enableLinearMode()
     await comfyPage.settings.setSetting(
       'Comfy.AppBuilder.VueNodeSwitchDismissed',
       true
@@ -21,231 +44,352 @@ test.describe('Builder save flow', { tag: ['@ui', '@subgraph'] }, () => {
   })
 
   test('Save as dialog appears for unsaved workflow', async ({ comfyPage }) => {
-    const { page, appMode } = comfyPage
-    await setupSubgraphBuilder(comfyPage)
-    await appMode.goToPreview()
-    await appMode.clickSave()
+    const { saveAs } = comfyPage.appMode
+    await setupBuilder(comfyPage)
+    await comfyPage.appMode.footer.saveAsButton.click()
 
-    // The save-as dialog should appear with filename input and view type selection
-    const dialog = page.getByRole('dialog')
-    await expect(dialog).toBeVisible({ timeout: 5000 })
-    await expect(dialog.getByRole('textbox')).toBeVisible()
-    await expect(dialog.getByText('Save as')).toBeVisible()
-
-    // View type radio group should be present
-    const radioGroup = dialog.getByRole('radiogroup')
-    await expect(radioGroup).toBeVisible()
+    await expect(saveAs.dialog).toBeVisible()
+    await expect(saveAs.nameInput).toBeVisible()
+    await expect(saveAs.title).toBeVisible()
+    await expect(saveAs.radioGroup).toBeVisible()
   })
 
   test('Save as dialog allows entering filename and saving', async ({
     comfyPage
   }) => {
-    const { page, appMode } = comfyPage
-    await setupSubgraphBuilder(comfyPage)
-    await appMode.goToPreview()
-    await appMode.clickSave()
-
-    const dialog = page.getByRole('dialog')
-    await expect(dialog).toBeVisible({ timeout: 5000 })
-
-    const workflowName = `${Date.now()} builder-save-test`
-    const input = dialog.getByRole('textbox')
-    await input.fill(workflowName)
-
-    // Save button should be enabled now
-    const saveButton = dialog.getByRole('button', { name: 'Save' })
-    await expect(saveButton).toBeEnabled()
-    await saveButton.click()
-
-    // Success dialog should appear
-    const successDialog = page.getByRole('dialog')
-    await expect(successDialog.getByText('Successfully saved')).toBeVisible({
-      timeout: 5000
-    })
+    await setupBuilder(comfyPage)
+    await builderSaveAs(comfyPage.appMode, `${Date.now()} builder-save`, 'App')
   })
 
   test('Save as dialog disables save when filename is empty', async ({
     comfyPage
   }) => {
-    const { page, appMode } = comfyPage
-    await setupSubgraphBuilder(comfyPage)
-    await appMode.goToPreview()
-    await appMode.clickSave()
+    const { saveAs } = comfyPage.appMode
+    await setupBuilder(comfyPage)
+    await comfyPage.appMode.footer.saveAsButton.click()
 
-    const dialog = page.getByRole('dialog')
-    await expect(dialog).toBeVisible({ timeout: 5000 })
+    await expect(saveAs.dialog).toBeVisible()
+    await saveAs.nameInput.fill('')
+    await expect(saveAs.saveButton).toBeDisabled()
+  })
 
-    // Clear the filename input
-    const input = dialog.getByRole('textbox')
-    await input.fill('')
+  test('View type can be toggled in save-as dialog', async ({ comfyPage }) => {
+    const { saveAs } = comfyPage.appMode
+    await setupBuilder(comfyPage)
+    await comfyPage.appMode.footer.saveAsButton.click()
 
-    // Save button should be disabled
-    const saveButton = dialog.getByRole('button', { name: 'Save' })
-    await expect(saveButton).toBeDisabled()
+    await expect(saveAs.dialog).toBeVisible()
+
+    const appRadio = saveAs.viewTypeRadio('App')
+    await expect(appRadio).toHaveAttribute('aria-checked', 'true')
+
+    const graphRadio = saveAs.viewTypeRadio('Node graph')
+    await graphRadio.click()
+    await expect(graphRadio).toHaveAttribute('aria-checked', 'true')
+    await expect(appRadio).toHaveAttribute('aria-checked', 'false')
   })
 
   test('Builder step navigation works correctly', async ({ comfyPage }) => {
-    const { appMode } = comfyPage
-    await setupSubgraphBuilder(comfyPage)
+    const { footer } = comfyPage.appMode
+    await setupBuilder(comfyPage)
 
-    // Should start at outputs (we ended there in setup)
-    // Navigate to inputs
-    await appMode.goToInputs()
+    await comfyPage.appMode.steps.goToInputs()
 
-    // Back button should be disabled on first step
-    const backButton = appMode.getFooterButton('Back')
-    await expect(backButton).toBeDisabled()
+    await expect(footer.backButton).toBeDisabled()
+    await expect(footer.nextButton).toBeEnabled()
 
-    // Next button should be enabled
-    const nextButton = appMode.getFooterButton('Next')
-    await expect(nextButton).toBeEnabled()
+    await footer.next()
+    await expect(footer.backButton).toBeEnabled()
 
-    // Navigate forward
-    await appMode.next()
-
-    // Back button should now be enabled
-    await expect(backButton).toBeEnabled()
-
-    // Navigate to preview (last step)
-    await appMode.next()
-
-    // Next button should be disabled on last step
-    await expect(nextButton).toBeDisabled()
+    await footer.next()
+    await expect(footer.nextButton).toBeDisabled()
   })
 
   test('Escape key exits builder mode', async ({ comfyPage }) => {
-    const { page } = comfyPage
-    await setupSubgraphBuilder(comfyPage)
+    await setupBuilder(comfyPage)
 
-    // Verify builder toolbar is visible
-    const toolbar = page.getByRole('navigation', { name: 'App Builder' })
-    await expect(toolbar).toBeVisible()
+    await expect(comfyPage.appMode.steps.toolbar).toBeVisible()
 
-    // Press Escape
-    await page.keyboard.press('Escape')
-    await comfyPage.nextFrame()
+    await comfyPage.keyboard.press('Escape')
 
-    // Builder toolbar should be gone
-    await expect(toolbar).not.toBeVisible()
+    await expect(comfyPage.appMode.steps.toolbar).toBeHidden()
   })
 
   test('Exit builder button exits builder mode', async ({ comfyPage }) => {
-    const { page, appMode } = comfyPage
-    await setupSubgraphBuilder(comfyPage)
+    await setupBuilder(comfyPage)
 
-    const toolbar = page.getByRole('navigation', { name: 'App Builder' })
-    await expect(toolbar).toBeVisible()
-
-    await appMode.exitBuilder()
-
-    await expect(toolbar).not.toBeVisible()
+    await expect(comfyPage.appMode.steps.toolbar).toBeVisible()
+    await comfyPage.appMode.footer.exitBuilder()
+    await expect(comfyPage.appMode.steps.toolbar).toBeHidden()
   })
 
   test('Save button directly saves for previously saved workflow', async ({
     comfyPage
   }) => {
-    const { page, appMode } = comfyPage
-    await setupSubgraphBuilder(comfyPage)
-    await appMode.goToPreview()
+    const { footer, saveAs } = comfyPage.appMode
+    await setupBuilder(comfyPage)
 
-    // First save via builder save-as to make it non-temporary
-    await appMode.clickSave()
-    const saveAsDialog = page.getByRole('dialog')
-    await expect(saveAsDialog).toBeVisible({ timeout: 5000 })
-    const workflowName = `${Date.now()} builder-direct-save`
-    await saveAsDialog.getByRole('textbox').fill(workflowName)
-    await saveAsDialog.getByRole('button', { name: 'Save' }).click()
+    await builderSaveAs(comfyPage.appMode, `${Date.now()} direct-save`, 'App')
+    await dismissSuccessDialog(saveAs)
 
-    // Dismiss the success dialog
-    const successDialog = page.getByRole('dialog')
-    await expect(successDialog.getByText('Successfully saved')).toBeVisible({
-      timeout: 5000
-    })
-    await successDialog.getByText('Close', { exact: true }).click()
+    // Modify the workflow so the save button becomes enabled
+    await comfyPage.appMode.steps.goToInputs()
+    await comfyPage.appMode.select.deleteInput('seed')
+    await expect(footer.saveButton).toBeEnabled()
+
+    await footer.saveButton.click()
     await comfyPage.nextFrame()
 
-    // Now click save again — should save directly
-    await appMode.clickSave()
-
-    await expect(page.getByRole('dialog')).not.toBeVisible({ timeout: 2000 })
-    await expect(appMode.getFooterButton(/^Save$/)).toBeDisabled()
+    await expect(saveAs.dialog).toBeHidden()
+    await expect(footer.saveButton).toBeDisabled()
   })
 
   test('Split button chevron opens save-as for saved workflow', async ({
     comfyPage
   }) => {
-    const { page, appMode } = comfyPage
-    await setupSubgraphBuilder(comfyPage)
-    await appMode.goToPreview()
+    const { footer, saveAs } = comfyPage.appMode
+    await setupBuilder(comfyPage)
 
-    // First save via builder save-as to make it non-temporary
-    await appMode.clickSave()
-    const saveAsDialog = page.getByRole('dialog')
-    await expect(saveAsDialog).toBeVisible({ timeout: 5000 })
-    const workflowName = `${Date.now()} builder-split-btn`
-    await saveAsDialog.getByRole('textbox').fill(workflowName)
-    await saveAsDialog.getByRole('button', { name: 'Save' }).click()
+    await builderSaveAs(comfyPage.appMode, `${Date.now()} split-btn`, 'App')
+    await dismissSuccessDialog(saveAs)
 
-    // Dismiss the success dialog
-    const successDialog = page.getByRole('dialog')
-    await expect(successDialog.getByText('Successfully saved')).toBeVisible({
-      timeout: 5000
-    })
-    await successDialog.getByText('Close', { exact: true }).click()
-    await comfyPage.nextFrame()
+    await footer.openSaveAsFromChevron()
 
-    // Click the chevron dropdown trigger
-    const chevronButton = appMode.getFooterButton('Save as')
-    await chevronButton.click()
+    await expect(saveAs.title).toBeVisible()
+    await expect(saveAs.nameInput).toBeVisible()
+  })
 
-    // "Save as" menu item should appear
-    const menuItem = page.getByRole('menuitem', { name: 'Save as' })
-    await expect(menuItem).toBeVisible({ timeout: 5000 })
-    await menuItem.click()
+  test('Save button width is consistent across all states', async ({
+    comfyPage
+  }) => {
+    const { appMode } = comfyPage
+    await comfyPage.workflow.loadWorkflow('default')
+    await fitToViewInstant(comfyPage)
+    await appMode.enterBuilder()
 
-    // Save-as dialog should appear
-    const newSaveAsDialog = page.getByRole('dialog')
-    await expect(newSaveAsDialog.getByText('Save as')).toBeVisible({
-      timeout: 5000
-    })
-    await expect(newSaveAsDialog.getByRole('textbox')).toBeVisible()
+    // State 1: Disabled "Save as" (no outputs selected)
+    await expect(appMode.footer.saveAsButton).toBeVisible()
+    const disabledBox = await appMode.footer.saveAsButton.boundingBox()
+    if (!disabledBox)
+      throw new Error('saveAsButton boundingBox returned null while visible')
+    const disabledWidth = disabledBox.width
+
+    // Select I/O to enable the button
+    await appMode.steps.goToInputs()
+    await appMode.select.selectInputWidget('KSampler', 'seed')
+    await appMode.steps.goToOutputs()
+    await appMode.select.selectOutputNode('Save Image')
+
+    // State 2: Enabled "Save as" (unsaved, has outputs)
+    await expect
+      .poll(
+        async () => (await appMode.footer.saveAsButton.boundingBox())?.width
+      )
+      .toBe(disabledWidth)
+
+    // Save the workflow to transition to the Save + chevron state
+    await builderSaveAs(appMode, `${Date.now()} width-test`, 'App')
+    await dismissSuccessDialog(appMode.saveAs)
+
+    // State 3: Save + chevron button group (saved workflow)
+    await expect
+      .poll(async () => (await appMode.footer.saveGroup.boundingBox())?.width)
+      .toBe(disabledWidth)
   })
 
   test('Connect output popover appears when no outputs selected', async ({
     comfyPage
   }) => {
-    const { page, appMode } = comfyPage
     await comfyPage.workflow.loadWorkflow('default')
     await fitToViewInstant(comfyPage)
-    await appMode.enterBuilder()
+    await comfyPage.appMode.enterBuilder()
 
-    // Without selecting any outputs, click the save button
-    // It should trigger the connect-output popover
-    await appMode.clickSave()
+    await comfyPage.appMode.footer.saveAsButton.click()
 
-    // The popover should show a message about connecting outputs
     await expect(
-      page.getByText('Connect an output', { exact: false })
-    ).toBeVisible({ timeout: 5000 })
+      comfyPage.page.getByText('Connect an output', { exact: false })
+    ).toBeVisible()
   })
 
-  test('View type can be toggled in save-as dialog', async ({ comfyPage }) => {
-    const { page, appMode } = comfyPage
-    await setupSubgraphBuilder(comfyPage)
-    await appMode.goToPreview()
-    await appMode.clickSave()
+  test('save as app produces correct extension and linearMode', async ({
+    comfyPage
+  }) => {
+    await setupBuilder(comfyPage)
+    await builderSaveAs(comfyPage.appMode, `${Date.now()} app-ext`, 'App')
 
-    const dialog = page.getByRole('dialog')
-    await expect(dialog).toBeVisible({ timeout: 5000 })
+    await expect
+      .poll(() => comfyPage.workflow.getActiveWorkflowPath())
+      .toContain('.app.json')
 
-    // App should be selected by default
-    const appRadio = dialog.getByRole('radio', { name: /App/ })
-    await expect(appRadio).toHaveAttribute('aria-checked', 'true')
+    await expect
+      .poll(() => comfyPage.workflow.getLinearModeFromGraph())
+      .toBe(true)
+  })
 
-    // Click Node graph option
-    const graphRadio = dialog.getByRole('radio', { name: /Node graph/ })
-    await graphRadio.click()
-    await expect(graphRadio).toHaveAttribute('aria-checked', 'true')
-    await expect(appRadio).toHaveAttribute('aria-checked', 'false')
+  test('save as node graph produces correct extension and linearMode', async ({
+    comfyPage
+  }) => {
+    await setupBuilder(comfyPage)
+    await builderSaveAs(
+      comfyPage.appMode,
+      `${Date.now()} graph-ext`,
+      'Node graph'
+    )
+
+    await expect(async () => {
+      const path = await comfyPage.workflow.getActiveWorkflowPath()
+      expect(path).toMatch(/\.json$/)
+      expect(path).not.toContain('.app.json')
+    }).toPass({ timeout: 5000 })
+
+    await expect
+      .poll(() => comfyPage.workflow.getLinearModeFromGraph())
+      .toBe(false)
+  })
+
+  test('save as app View App button enters app mode', async ({ comfyPage }) => {
+    await setupBuilder(comfyPage)
+    await builderSaveAs(comfyPage.appMode, `${Date.now()} app-view`, 'App')
+
+    await comfyPage.appMode.saveAs.viewAppButton.click()
+    await expect(comfyPage.appMode.saveAs.successDialog).toBeHidden()
+
+    await expect
+      .poll(() => comfyPage.workflow.getActiveWorkflowActiveAppMode())
+      .toBe('app')
+  })
+
+  test('save as node graph Exit builder exits builder mode', async ({
+    comfyPage
+  }) => {
+    await setupBuilder(comfyPage)
+    await builderSaveAs(
+      comfyPage.appMode,
+      `${Date.now()} graph-exit`,
+      'Node graph'
+    )
+
+    await comfyPage.appMode.saveAs.exitBuilderButton.click()
+    await expect(comfyPage.appMode.saveAs.successDialog).toBeHidden()
+
+    await expect(comfyPage.appMode.steps.toolbar).toBeHidden()
+  })
+
+  test('save as with different mode does not modify the original workflow', async ({
+    comfyPage
+  }) => {
+    const { appMode } = comfyPage
+    await setupBuilder(comfyPage)
+
+    const originalName = `${Date.now()} original`
+    await builderSaveAs(appMode, originalName, 'App')
+    await expect
+      .poll(() => comfyPage.workflow.getActiveWorkflowPath())
+      .toContain('.app.json')
+    await dismissSuccessDialog(appMode.saveAs)
+
+    // Re-save as node graph — creates a copy
+    await reSaveAs(appMode, `${Date.now()} copy`, 'Node graph')
+    await expect(appMode.saveAs.successMessage).toBeVisible()
+
+    await expect
+      .poll(() => comfyPage.workflow.getActiveWorkflowPath())
+      .not.toContain('.app.json')
+
+    // Dismiss success dialog, exit app mode, reopen the original
+    await dismissSuccessDialog(appMode.saveAs, 'dismiss')
+    await appMode.toggleAppMode()
+    await openWorkflowFromSidebar(comfyPage, originalName)
+
+    await expect
+      .poll(() => comfyPage.workflow.getLinearModeFromGraph())
+      .toBe(true)
+  })
+
+  test('save as with same name and same mode overwrites in place', async ({
+    comfyPage
+  }) => {
+    const { appMode } = comfyPage
+    const name = `${Date.now()} overwrite`
+    await setupBuilder(comfyPage)
+
+    await builderSaveAs(appMode, name, 'App')
+    await dismissSuccessDialog(appMode.saveAs)
+    await comfyPage.nextFrame()
+
+    await expect
+      .poll(() => comfyPage.workflow.getActiveWorkflowPath())
+      .toContain('.app.json')
+    const pathAfterFirst = await comfyPage.workflow.getActiveWorkflowPath()
+
+    await reSaveAs(appMode, name, 'App')
+
+    await expect(appMode.saveAs.overwriteDialog).toBeVisible()
+    await appMode.saveAs.overwriteButton.click()
+    await expect(appMode.saveAs.overwriteDialog).toBeHidden()
+
+    await expect(appMode.saveAs.successMessage).toBeVisible()
+
+    await expect
+      .poll(() => comfyPage.workflow.getActiveWorkflowPath())
+      .toBe(pathAfterFirst)
+  })
+
+  test('save as with same name but different mode creates a new file', async ({
+    comfyPage
+  }) => {
+    const { appMode } = comfyPage
+    const name = `${Date.now()} mode-change`
+    await setupBuilder(comfyPage)
+
+    await builderSaveAs(appMode, name, 'App')
+    await expect
+      .poll(() => comfyPage.workflow.getActiveWorkflowPath())
+      .toContain('.app.json')
+    const pathAfterFirst = await comfyPage.workflow.getActiveWorkflowPath()
+    await dismissSuccessDialog(appMode.saveAs)
+
+    await reSaveAs(appMode, name, 'Node graph')
+    await expect(appMode.saveAs.successMessage).toBeVisible()
+
+    await expect
+      .poll(() => comfyPage.workflow.getActiveWorkflowPath())
+      .not.toBe(pathAfterFirst)
+    await expect
+      .poll(() => comfyPage.workflow.getActiveWorkflowPath())
+      .toMatch(/\.json$/)
+    await expect
+      .poll(() => comfyPage.workflow.getActiveWorkflowPath())
+      .not.toContain('.app.json')
+  })
+
+  test('save as app workflow reloads in app mode', async ({ comfyPage }) => {
+    const name = `${Date.now()} reload-app`
+    await setupBuilder(comfyPage)
+    await builderSaveAs(comfyPage.appMode, name, 'App')
+    await dismissSuccessDialog(comfyPage.appMode.saveAs, 'dismiss')
+    await comfyPage.appMode.footer.exitBuilder()
+
+    await openWorkflowFromSidebar(comfyPage, name)
+
+    await expect
+      .poll(() => comfyPage.workflow.getActiveWorkflowInitialMode())
+      .toBe('app')
+  })
+
+  test('save as node graph workflow reloads in node graph mode', async ({
+    comfyPage
+  }) => {
+    const name = `${Date.now()} reload-graph`
+    await setupBuilder(comfyPage)
+    await builderSaveAs(comfyPage.appMode, name, 'Node graph')
+    await dismissSuccessDialog(comfyPage.appMode.saveAs, 'dismiss')
+    await comfyPage.appMode.toggleAppMode()
+
+    await openWorkflowFromSidebar(comfyPage, name)
+
+    await expect
+      .poll(() => comfyPage.workflow.getActiveWorkflowInitialMode())
+      .toBe('graph')
   })
 })
diff --git a/browser_tests/tests/canvasModeSelector.spec.ts b/browser_tests/tests/canvasModeSelector.spec.ts
new file mode 100644
index 0000000000..2e770d3ce4
--- /dev/null
+++ b/browser_tests/tests/canvasModeSelector.spec.ts
@@ -0,0 +1,267 @@
+import type { Page } from '@playwright/test'
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+
+const getLocators = (page: Page) => ({
+  trigger: page.getByRole('button', { name: 'Canvas Mode' }),
+  menu: page.getByRole('menu', { name: 'Canvas Mode' }),
+  selectItem: page.getByRole('menuitemradio', { name: 'Select' }),
+  handItem: page.getByRole('menuitemradio', { name: 'Hand' })
+})
+
+const MODES = [
+  {
+    label: 'Select',
+    activateCommand: 'Comfy.Canvas.Unlock',
+    isReadOnly: false,
+    iconPattern: /lucide--mouse-pointer-2/
+  },
+  {
+    label: 'Hand',
+    activateCommand: 'Comfy.Canvas.Lock',
+    isReadOnly: true,
+    iconPattern: /lucide--hand/
+  }
+]
+
+test.describe('CanvasModeSelector', { tag: '@canvas' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', true)
+    await comfyPage.command.executeCommand('Comfy.Canvas.Unlock')
+  })
+
+  test.describe('Trigger button', () => {
+    test('visible in canvas toolbar with ARIA markup', async ({
+      comfyPage
+    }) => {
+      const { trigger } = getLocators(comfyPage.page)
+      await expect(trigger).toBeVisible()
+      await expect(trigger).toHaveAttribute('aria-expanded', 'false')
+    })
+
+    for (const mode of MODES) {
+      test(`shows ${mode.label}-mode icon on trigger button`, async ({
+        comfyPage
+      }) => {
+        await comfyPage.command.executeCommand(mode.activateCommand)
+        const { trigger } = getLocators(comfyPage.page)
+        const modeIcon = trigger.locator('i[aria-hidden="true"]').first()
+        await expect(modeIcon).toHaveClass(mode.iconPattern)
+      })
+    }
+  })
+
+  test.describe('Popover lifecycle', () => {
+    test('opens when trigger is clicked', async ({ comfyPage }) => {
+      const { trigger, menu } = getLocators(comfyPage.page)
+      await trigger.click()
+      await comfyPage.nextFrame()
+      await expect(menu).toBeVisible()
+      await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+    })
+
+    test('closes when trigger is clicked again', async ({ comfyPage }) => {
+      const { trigger, menu } = getLocators(comfyPage.page)
+      await trigger.click()
+      await comfyPage.nextFrame()
+      await expect(menu).toBeVisible()
+      await trigger.click()
+      await comfyPage.nextFrame()
+      await expect(menu).toBeHidden()
+      await expect(trigger).toHaveAttribute('aria-expanded', 'false')
+    })
+
+    test('closes after a mode item is selected', async ({ comfyPage }) => {
+      const { trigger, menu, handItem } = getLocators(comfyPage.page)
+      await trigger.click()
+      await comfyPage.nextFrame()
+      await expect(menu).toBeVisible()
+      await handItem.click()
+      await comfyPage.nextFrame()
+      await expect(menu).toBeHidden()
+    })
+
+    test('closes when Escape is pressed', async ({ comfyPage }) => {
+      const { trigger, menu, selectItem } = getLocators(comfyPage.page)
+      await trigger.click()
+      await comfyPage.nextFrame()
+      await expect(menu).toBeVisible()
+      await selectItem.press('Escape')
+      await comfyPage.nextFrame()
+      await expect(menu).toBeHidden()
+      await expect(trigger).toHaveAttribute('aria-expanded', 'false')
+    })
+  })
+
+  test.describe('Mode switching', () => {
+    for (const mode of MODES) {
+      test(`clicking "${mode.label}" sets canvas readOnly=${mode.isReadOnly}`, async ({
+        comfyPage
+      }) => {
+        if (!mode.isReadOnly) {
+          await comfyPage.command.executeCommand('Comfy.Canvas.Lock')
+        }
+        const { trigger, menu, selectItem, handItem } = getLocators(
+          comfyPage.page
+        )
+        const item = mode.isReadOnly ? handItem : selectItem
+        await trigger.click()
+        await comfyPage.nextFrame()
+        await expect(menu).toBeVisible()
+        await item.click()
+        await comfyPage.nextFrame()
+        await expect
+          .poll(() => comfyPage.canvasOps.isReadOnly())
+          .toBe(mode.isReadOnly)
+      })
+    }
+
+    test('clicking the currently active item is a no-op', async ({
+      comfyPage
+    }) => {
+      expect(
+        await comfyPage.canvasOps.isReadOnly(),
+        'Precondition: canvas starts in Select mode'
+      ).toBe(false)
+      const { trigger, menu, selectItem } = getLocators(comfyPage.page)
+      await trigger.click()
+      await comfyPage.nextFrame()
+      await expect(menu).toBeVisible()
+      await selectItem.click()
+      await comfyPage.nextFrame()
+      await expect.poll(() => comfyPage.canvasOps.isReadOnly()).toBe(false)
+    })
+  })
+
+  test.describe('ARIA state', () => {
+    test('aria-checked marks Select active on default load', async ({
+      comfyPage
+    }) => {
+      const { trigger, menu, selectItem, handItem } = getLocators(
+        comfyPage.page
+      )
+      await trigger.click()
+      await comfyPage.nextFrame()
+      await expect(menu).toBeVisible()
+      await expect(selectItem).toHaveAttribute('aria-checked', 'true')
+      await expect(handItem).toHaveAttribute('aria-checked', 'false')
+    })
+
+    for (const mode of MODES) {
+      test(`tabindex=0 is on the active "${mode.label}" item`, async ({
+        comfyPage
+      }) => {
+        await comfyPage.command.executeCommand(mode.activateCommand)
+        const { trigger, menu, selectItem, handItem } = getLocators(
+          comfyPage.page
+        )
+        await trigger.click()
+        await comfyPage.nextFrame()
+        await expect(menu).toBeVisible()
+
+        const activeItem = mode.isReadOnly ? handItem : selectItem
+        const inactiveItem = mode.isReadOnly ? selectItem : handItem
+
+        await expect(activeItem).toHaveAttribute('tabindex', '0')
+        await expect(inactiveItem).toHaveAttribute('tabindex', '-1')
+      })
+    }
+  })
+
+  test.describe('Keyboard navigation', () => {
+    test('ArrowDown moves focus from Select to Hand', async ({ comfyPage }) => {
+      const { trigger, menu, selectItem, handItem } = getLocators(
+        comfyPage.page
+      )
+      await trigger.click()
+      await comfyPage.nextFrame()
+      await expect(menu).toBeVisible()
+      await selectItem.press('ArrowDown')
+      await expect(handItem).toBeFocused()
+    })
+
+    test('Escape closes popover and restores focus to trigger', async ({
+      comfyPage
+    }) => {
+      const { trigger, menu, selectItem, handItem } = getLocators(
+        comfyPage.page
+      )
+      await trigger.click()
+      await comfyPage.nextFrame()
+      await expect(menu).toBeVisible()
+      await selectItem.press('ArrowDown')
+      await handItem.press('Escape')
+      await comfyPage.nextFrame()
+      await expect(menu).toBeHidden()
+      await expect(trigger).toBeFocused()
+    })
+  })
+
+  test.describe('Focus management on open', () => {
+    for (const mode of MODES) {
+      test(`auto-focuses the checked "${mode.label}" item on open`, async ({
+        comfyPage
+      }) => {
+        await comfyPage.command.executeCommand(mode.activateCommand)
+        const { trigger, menu, selectItem, handItem } = getLocators(
+          comfyPage.page
+        )
+        const item = mode.isReadOnly ? handItem : selectItem
+        await trigger.click()
+        await comfyPage.nextFrame()
+        await expect(menu).toBeVisible()
+        await expect(item).toBeFocused()
+      })
+    }
+  })
+
+  test.describe('Keybinding integration', { tag: '@keyboard' }, () => {
+    test("'H' locks canvas and updates trigger icon to Hand", async ({
+      comfyPage
+    }) => {
+      expect(
+        await comfyPage.canvasOps.isReadOnly(),
+        'Precondition: canvas starts unlocked'
+      ).toBe(false)
+      await comfyPage.keyboard.press('KeyH')
+      expect(await comfyPage.canvasOps.isReadOnly()).toBe(true)
+      const { trigger } = getLocators(comfyPage.page)
+      const modeIcon = trigger.locator('i[aria-hidden="true"]').first()
+      await expect(modeIcon).toHaveClass(/lucide--hand/)
+    })
+
+    test("'V' unlocks canvas and updates trigger icon to Select", async ({
+      comfyPage
+    }) => {
+      await comfyPage.command.executeCommand('Comfy.Canvas.Lock')
+      expect(
+        await comfyPage.canvasOps.isReadOnly(),
+        'Precondition: canvas starts locked'
+      ).toBe(true)
+      await comfyPage.keyboard.press('KeyV')
+      expect(await comfyPage.canvasOps.isReadOnly()).toBe(false)
+      const { trigger } = getLocators(comfyPage.page)
+      const modeIcon = trigger.locator('i[aria-hidden="true"]').first()
+      await expect(modeIcon).toHaveClass(/lucide--mouse-pointer-2/)
+    })
+  })
+
+  test.describe('Shortcut hint display', () => {
+    test('menu items show non-empty keyboard shortcut text', async ({
+      comfyPage
+    }) => {
+      const { trigger, menu, selectItem, handItem } = getLocators(
+        comfyPage.page
+      )
+      await trigger.click()
+      await comfyPage.nextFrame()
+      await expect(menu).toBeVisible()
+      const selectHint = selectItem.getByTestId('shortcut-hint')
+      const handHint = handItem.getByTestId('shortcut-hint')
+
+      await expect(selectHint).not.toBeEmpty()
+      await expect(handHint).not.toBeEmpty()
+    })
+  })
+})
diff --git a/browser_tests/tests/changeTracker.spec.ts b/browser_tests/tests/changeTracker.spec.ts
index ad12179349..c4087888f9 100644
--- a/browser_tests/tests/changeTracker.spec.ts
+++ b/browser_tests/tests/changeTracker.spec.ts
@@ -1,14 +1,94 @@
-import type { ComfyPage } from '../fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import type { WorkspaceStore } from '@e2e/types/globals'
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../fixtures/ComfyPage'
+} from '@e2e/fixtures/ComfyPage'
+
+type ChangeTrackerDebugState = {
+  changeCount: number
+  graphMatchesActiveState: boolean
+  isLoadingGraph: boolean
+  isModified: boolean | undefined
+  redoQueueSize: number
+  restoringState: boolean
+  undoQueueSize: number
+}
+
+async function getChangeTrackerDebugState(comfyPage: ComfyPage) {
+  return await comfyPage.page.evaluate(() => {
+    type ChangeTrackerClassLike = {
+      graphEqual: (left: unknown, right: unknown) => boolean
+      isLoadingGraph: boolean
+    }
+
+    type ChangeTrackerLike = {
+      _restoringState: boolean
+      activeState: unknown
+      changeCount: number
+      constructor: ChangeTrackerClassLike
+      redoQueue: unknown[]
+      undoQueue: unknown[]
+    }
+
+    type ActiveWorkflowLike = {
+      changeTracker?: ChangeTrackerLike
+      isModified?: boolean
+    }
+
+    const workflowStore = window.app!.extensionManager as WorkspaceStore
+    const workflow = workflowStore.workflow
+      .activeWorkflow as ActiveWorkflowLike | null
+    const tracker = workflow?.changeTracker
+    if (!workflow || !tracker) {
+      throw new Error('Active workflow change tracker is not available')
+    }
+
+    const currentState = JSON.parse(
+      JSON.stringify(window.app!.rootGraph.serialize())
+    )
+    return {
+      changeCount: tracker.changeCount,
+      graphMatchesActiveState: tracker.constructor.graphEqual(
+        tracker.activeState,
+        currentState
+      ),
+      isLoadingGraph: tracker.constructor.isLoadingGraph,
+      isModified: workflow.isModified,
+      redoQueueSize: tracker.redoQueue.length,
+      restoringState: tracker._restoringState,
+      undoQueueSize: tracker.undoQueue.length
+    } satisfies ChangeTrackerDebugState
+  })
+}
+
+async function waitForChangeTrackerSettled(
+  comfyPage: ComfyPage,
+  expected: Pick<
+    ChangeTrackerDebugState,
+    'isModified' | 'redoQueueSize' | 'undoQueueSize'
+  >
+) {
+  // Visible node flags can flip before undo finishes loadGraphData() and
+  // updates the tracker. Poll the tracker's own settled state so we do not
+  // start the next transaction while captureCanvasState() is still gated.
+  await expect
+    .poll(() => getChangeTrackerDebugState(comfyPage))
+    .toMatchObject({
+      changeCount: 0,
+      graphMatchesActiveState: true,
+      isLoadingGraph: false,
+      restoringState: false,
+      ...expected
+    })
+}
 
 async function beforeChange(comfyPage: ComfyPage) {
   await comfyPage.page.evaluate(() => {
     window.app!.canvas!.emitBeforeChange()
   })
 }
+
 async function afterChange(comfyPage: ComfyPage) {
   await comfyPage.page.evaluate(() => {
     window.app!.canvas!.emitAfterChange()
@@ -27,41 +107,51 @@ test.describe('Change Tracker', { tag: '@workflow' }, () => {
     })
 
     test('Can undo multiple operations', async ({ comfyPage }) => {
-      expect(await comfyPage.workflow.getUndoQueueSize()).toBe(0)
-      expect(await comfyPage.workflow.getRedoQueueSize()).toBe(0)
+      await expect.poll(() => comfyPage.workflow.getUndoQueueSize()).toBe(0)
+      await expect.poll(() => comfyPage.workflow.getRedoQueueSize()).toBe(0)
 
       // Save, confirm no errors & workflow modified flag removed
       await comfyPage.menu.topbar.saveWorkflow('undo-redo-test')
-      expect(await comfyPage.toast.getToastErrorCount()).toBe(0)
-      expect(await comfyPage.workflow.isCurrentWorkflowModified()).toBe(false)
-      expect(await comfyPage.workflow.getUndoQueueSize()).toBe(0)
-      expect(await comfyPage.workflow.getRedoQueueSize()).toBe(0)
+      await expect(comfyPage.toast.toastErrors).toHaveCount(0)
+      await expect
+        .poll(() => comfyPage.workflow.isCurrentWorkflowModified())
+        .toBe(false)
+      await expect.poll(() => comfyPage.workflow.getUndoQueueSize()).toBe(0)
+      await expect.poll(() => comfyPage.workflow.getRedoQueueSize()).toBe(0)
 
       const node = (await comfyPage.nodeOps.getFirstNodeRef())!
       await node.click('title')
       await node.click('collapse')
       await expect(node).toBeCollapsed()
-      expect(await comfyPage.workflow.isCurrentWorkflowModified()).toBe(true)
-      expect(await comfyPage.workflow.getUndoQueueSize()).toBe(1)
-      expect(await comfyPage.workflow.getRedoQueueSize()).toBe(0)
+      await expect
+        .poll(() => comfyPage.workflow.isCurrentWorkflowModified())
+        .toBe(true)
+      await expect.poll(() => comfyPage.workflow.getUndoQueueSize()).toBe(1)
+      await expect.poll(() => comfyPage.workflow.getRedoQueueSize()).toBe(0)
 
       await comfyPage.keyboard.bypass()
       await expect(node).toBeBypassed()
-      expect(await comfyPage.workflow.isCurrentWorkflowModified()).toBe(true)
-      expect(await comfyPage.workflow.getUndoQueueSize()).toBe(2)
-      expect(await comfyPage.workflow.getRedoQueueSize()).toBe(0)
+      await expect
+        .poll(() => comfyPage.workflow.isCurrentWorkflowModified())
+        .toBe(true)
+      await expect.poll(() => comfyPage.workflow.getUndoQueueSize()).toBe(2)
+      await expect.poll(() => comfyPage.workflow.getRedoQueueSize()).toBe(0)
 
       await comfyPage.keyboard.undo()
       await expect(node).not.toBeBypassed()
-      expect(await comfyPage.workflow.isCurrentWorkflowModified()).toBe(true)
-      expect(await comfyPage.workflow.getUndoQueueSize()).toBe(1)
-      expect(await comfyPage.workflow.getRedoQueueSize()).toBe(1)
+      await waitForChangeTrackerSettled(comfyPage, {
+        isModified: true,
+        redoQueueSize: 1,
+        undoQueueSize: 1
+      })
 
       await comfyPage.keyboard.undo()
       await expect(node).not.toBeCollapsed()
-      expect(await comfyPage.workflow.isCurrentWorkflowModified()).toBe(false)
-      expect(await comfyPage.workflow.getUndoQueueSize()).toBe(0)
-      expect(await comfyPage.workflow.getRedoQueueSize()).toBe(2)
+      await waitForChangeTrackerSettled(comfyPage, {
+        isModified: false,
+        redoQueueSize: 2,
+        undoQueueSize: 0
+      })
     })
   })
 
@@ -88,6 +178,11 @@ test.describe('Change Tracker', { tag: '@workflow' }, () => {
     await comfyPage.keyboard.undo()
     await expect(node).not.toBeBypassed()
     await expect(node).not.toBeCollapsed()
+    await waitForChangeTrackerSettled(comfyPage, {
+      isModified: false,
+      redoQueueSize: 2,
+      undoQueueSize: 0
+    })
 
     // Prevent clicks registering a double-click
     await comfyPage.canvasOps.clickEmptySpace()
@@ -103,11 +198,21 @@ test.describe('Change Tracker', { tag: '@workflow' }, () => {
 
     // End transaction
     await afterChange(comfyPage)
+    await waitForChangeTrackerSettled(comfyPage, {
+      isModified: true,
+      redoQueueSize: 0,
+      undoQueueSize: 1
+    })
 
     // Ensure undo reverts both changes
     await comfyPage.keyboard.undo()
     await expect(node).not.toBeBypassed()
     await expect(node).not.toBeCollapsed()
+    await waitForChangeTrackerSettled(comfyPage, {
+      isModified: false,
+      redoQueueSize: 1,
+      undoQueueSize: 0
+    })
   })
 
   test('Can nest multiple change transactions without adding undo steps', async ({
@@ -118,8 +223,7 @@ test.describe('Change Tracker', { tag: '@workflow' }, () => {
       await beforeChange(comfyPage)
       await comfyPage.keyboard.bypass()
       await expect(node).toBeBypassed()
-      await comfyPage.page.keyboard.press('KeyP')
-      await comfyPage.nextFrame()
+      await comfyPage.keyboard.press('KeyP')
       await expect(node).toBePinned()
       await afterChange(comfyPage)
     }
@@ -154,7 +258,7 @@ test.describe('Change Tracker', { tag: '@workflow' }, () => {
   })
 
   test('Can detect changes in workflow.extra', async ({ comfyPage }) => {
-    expect(await comfyPage.workflow.getUndoQueueSize()).toBe(0)
+    await expect.poll(() => comfyPage.workflow.getUndoQueueSize()).toBe(0)
     await comfyPage.page.evaluate(() => {
       window.app!.graph!.extra.foo = 'bar'
     })
@@ -164,8 +268,46 @@ test.describe('Change Tracker', { tag: '@workflow' }, () => {
   })
 
   test('Ignores changes in workflow.ds', async ({ comfyPage }) => {
-    expect(await comfyPage.workflow.getUndoQueueSize()).toBe(0)
+    await expect.poll(() => comfyPage.workflow.getUndoQueueSize()).toBe(0)
     await comfyPage.canvasOps.pan({ x: 10, y: 10 })
     await expect.poll(() => comfyPage.workflow.getUndoQueueSize()).toBe(0)
   })
+
+  test('Undo preserves viewport offset', async ({ comfyPage }) => {
+    // Pan to a distinct offset so we can detect drift
+    await comfyPage.canvasOps.pan({ x: 200, y: 150 })
+
+    const viewportBefore = await comfyPage.page.evaluate(() => {
+      const ds = window.app!.canvas.ds
+      return { scale: ds.scale, offset: [...ds.offset] }
+    })
+
+    // Make a graph change so we have something to undo
+    const node = (await comfyPage.nodeOps.getFirstNodeRef())!
+    await node.click('title')
+    await node.click('collapse')
+    await expect(node).toBeCollapsed()
+    await expect.poll(() => comfyPage.workflow.getUndoQueueSize()).toBe(1)
+
+    // Undo the collapse — viewport should be preserved
+    await comfyPage.keyboard.undo()
+    await expect(node).not.toBeCollapsed()
+
+    await expect
+      .poll(
+        () =>
+          comfyPage.page.evaluate(() => {
+            const ds = window.app!.canvas.ds
+            return { scale: ds.scale, offset: [...ds.offset] }
+          }),
+        { timeout: 2_000 }
+      )
+      .toEqual({
+        scale: expect.closeTo(viewportBefore.scale, 2),
+        offset: [
+          expect.closeTo(viewportBefore.offset[0], 0),
+          expect.closeTo(viewportBefore.offset[1], 0)
+        ]
+      })
+  })
 })
diff --git a/browser_tests/tests/changeTrackerLoadGuard.spec.ts b/browser_tests/tests/changeTrackerLoadGuard.spec.ts
index 07cbbdc3ce..38f969da79 100644
--- a/browser_tests/tests/changeTrackerLoadGuard.spec.ts
+++ b/browser_tests/tests/changeTrackerLoadGuard.spec.ts
@@ -1,8 +1,8 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../fixtures/ComfyPage'
-import type { WorkspaceStore } from '../types/globals'
+} from '@e2e/fixtures/ComfyPage'
+import type { WorkspaceStore } from '@e2e/types/globals'
 
 test.describe(
   'Change Tracker - isLoadingGraph guard',
@@ -12,18 +12,18 @@ test.describe(
       await comfyPage.workflow.setupWorkflowsDirectory({})
     })
 
-    test('Prevents checkState from corrupting workflow state during tab switch', async ({
+    test('Prevents captureCanvasState from corrupting workflow state during tab switch', async ({
       comfyPage
     }) => {
       // Tab 0: default workflow (7 nodes)
-      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(7)
+      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(7)
 
       // Save tab 0 so it has a unique name for tab switching
       await comfyPage.menu.topbar.saveWorkflow('workflow-a')
 
-      // Register an extension that forces checkState during graph loading.
+      // Register an extension that forces captureCanvasState during graph loading.
       // This simulates the bug scenario where a user clicks during graph loading
-      // which triggers a checkState call on the wrong graph, corrupting the activeState.
+      // which triggers a captureCanvasState call on the wrong graph, corrupting the activeState.
       await comfyPage.page.evaluate(() => {
         window.app!.registerExtension({
           name: 'TestCheckStateDuringLoad',
@@ -35,32 +35,28 @@ test.describe(
             // ; (workflow.changeTracker.constructor as unknown as { isLoadingGraph: boolean }).isLoadingGraph = false
 
             // Simulate the user clicking during graph loading
-            workflow.changeTracker.checkState()
+            workflow.changeTracker.captureCanvasState()
           }
         })
       })
 
       // Create tab 1: blank workflow (0 nodes)
       await comfyPage.menu.topbar.triggerTopbarCommand(['New'])
-      await comfyPage.nextFrame()
-      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
+      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
 
       // Switch back to tab 0 (workflow-a).
       const tab0 = comfyPage.menu.topbar.getWorkflowTab('workflow-a')
       await tab0.click()
-      await comfyPage.nextFrame()
-      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(7)
+      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(7)
 
       // switch to blank tab and back to verify no corruption
       const tab1 = comfyPage.menu.topbar.getWorkflowTab('Unsaved Workflow')
       await tab1.click()
-      await comfyPage.nextFrame()
-      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
+      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
 
       // switch again and verify no corruption
       await tab0.click()
-      await comfyPage.nextFrame()
-      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(7)
+      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(7)
     })
   }
 )
diff --git a/browser_tests/tests/cloud-asset-default.spec.ts b/browser_tests/tests/cloud-asset-default.spec.ts
new file mode 100644
index 0000000000..3b557b2fba
--- /dev/null
+++ b/browser_tests/tests/cloud-asset-default.spec.ts
@@ -0,0 +1,97 @@
+import { expect } from '@playwright/test'
+
+import type { Asset, ListAssetsResponse } from '@comfyorg/ingest-types'
+import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import {
+  STABLE_CHECKPOINT,
+  STABLE_CHECKPOINT_2
+} from '@e2e/fixtures/data/assetFixtures'
+
+function makeAssetsResponse(assets: Asset[]): ListAssetsResponse {
+  return { assets, total: assets.length, has_more: false }
+}
+
+const CLOUD_ASSETS: Asset[] = [STABLE_CHECKPOINT, STABLE_CHECKPOINT_2]
+
+// Stub /api/assets before the app loads. The local ComfyUI backend has no
+// /api/assets endpoint (returns 503), which poisons the assets store on
+// first load. Narrow pattern avoids intercepting static /assets/*.js bundles.
+//
+// TODO: Consider moving this stub into ComfyPage fixture for all @cloud tests.
+const test = comfyPageFixture.extend<{ stubCloudAssets: void }>({
+  stubCloudAssets: [
+    async ({ page }, use) => {
+      const pattern = '**/api/assets?*'
+      await page.route(pattern, (route) =>
+        route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify(makeAssetsResponse(CLOUD_ASSETS))
+        })
+      )
+      await use()
+      await page.unroute(pattern)
+    },
+    { auto: true }
+  ]
+})
+
+test.describe('Asset-supported node default value', { tag: '@cloud' }, () => {
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.nodeOps.clearGraph()
+  })
+
+  test('should use first cloud asset when server default is not in assets', async ({
+    comfyPage
+  }) => {
+    // The default workflow contains a CheckpointLoaderSimple node whose
+    // server default (from object_info) is a local file not in cloud assets.
+    // Wait for the existing node's asset widget to mount, confirming the
+    // assets store has been populated from the stub before adding a new node.
+    await expect
+      .poll(
+        () =>
+          comfyPage.page.evaluate(() => {
+            const node = window.app!.graph.nodes.find(
+              (n: { type: string }) => n.type === 'CheckpointLoaderSimple'
+            )
+            return node?.widgets?.find(
+              (w: { name: string }) => w.name === 'ckpt_name'
+            )?.type
+          }),
+        { timeout: 10_000 }
+      )
+      .toBe('asset')
+
+    // Add a new CheckpointLoaderSimple — should use first cloud asset,
+    // not the server's object_info default.
+    // Production resolves via getAssetFilename (user_metadata.filename →
+    // metadata.filename → asset.name). Test fixtures have no metadata
+    // filename, so asset.name is the resolved value.
+    const nodeId = await comfyPage.page.evaluate(() => {
+      const node = window.LiteGraph!.createNode('CheckpointLoaderSimple')
+      window.app!.graph.add(node!)
+      return node!.id
+    })
+
+    // Wait for the asset widget to mount AND its value to resolve.
+    // The widget type becomes 'asset' before the value is populated,
+    // so poll for both conditions together to avoid a race where the
+    // type check passes but the value is still the placeholder.
+    await expect
+      .poll(
+        () =>
+          comfyPage.page.evaluate((id) => {
+            const node = window.app!.graph.getNodeById(id)
+            const widget = node?.widgets?.find(
+              (w: { name: string }) => w.name === 'ckpt_name'
+            )
+            if (widget?.type !== 'asset') return 'waiting:type'
+            const val = String(widget?.value ?? '')
+            return val === 'Select model' ? 'waiting:value' : val
+          }, nodeId),
+        { timeout: 15_000 }
+      )
+      .toBe(CLOUD_ASSETS[0].name)
+  })
+})
diff --git a/browser_tests/tests/cloud.spec.ts b/browser_tests/tests/cloud.spec.ts
new file mode 100644
index 0000000000..3aa339af6b
--- /dev/null
+++ b/browser_tests/tests/cloud.spec.ts
@@ -0,0 +1,30 @@
+import { expect } from '@playwright/test'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+
+/**
+ * Cloud distribution E2E tests.
+ *
+ * These tests run against the cloud build (DISTRIBUTION=cloud) and verify
+ * that cloud-specific behavior is present. In CI, no Firebase auth is
+ * configured, so the auth guard redirects to /cloud/login. The tests
+ * verify the cloud build loaded correctly by checking for cloud-only
+ * routes and elements.
+ */
+test.describe('Cloud distribution UI', { tag: '@cloud' }, () => {
+  test('cloud build redirects unauthenticated users to login', async ({
+    page
+  }) => {
+    await page.goto('http://localhost:8188')
+    // Cloud build has an auth guard that redirects to /cloud/login.
+    // This route only exists in the cloud distribution — it's tree-shaken
+    // in the OSS build. Its presence confirms the cloud build is active.
+    await expect(page).toHaveURL(/\/cloud\/login/, { timeout: 10_000 })
+  })
+
+  test('cloud login page renders sign-in options', async ({ page }) => {
+    await page.goto('http://localhost:8188')
+    await expect(page).toHaveURL(/\/cloud\/login/, { timeout: 10_000 })
+    // Verify cloud-specific login UI is rendered
+    await expect(page.getByRole('button', { name: /google/i })).toBeVisible()
+  })
+})
diff --git a/browser_tests/tests/collapsedNodeLinks.spec.ts b/browser_tests/tests/collapsedNodeLinks.spec.ts
new file mode 100644
index 0000000000..2f433b21ec
--- /dev/null
+++ b/browser_tests/tests/collapsedNodeLinks.spec.ts
@@ -0,0 +1,92 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { assertNodeSlotsWithinBounds } from '@e2e/fixtures/utils/slotBoundsUtil'
+
+const NODE_ID = '3'
+const NODE_TITLE = 'KSampler'
+
+test.describe(
+  'Collapsed node link positions',
+  { tag: ['@canvas', '@node', '@vue-nodes'] },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('default')
+    })
+
+    test.afterEach(async ({ comfyPage }) => {
+      await comfyPage.canvasOps.resetView()
+    })
+
+    test('link endpoints stay within collapsed node bounds', async ({
+      comfyPage
+    }) => {
+      const node = await comfyPage.vueNodes.getFixtureByTitle(NODE_TITLE)
+      await node.toggleCollapse()
+      await comfyPage.nextFrame()
+
+      await assertNodeSlotsWithinBounds(comfyPage.page, NODE_ID)
+    })
+
+    test('links follow collapsed node after drag', async ({ comfyPage }) => {
+      const node = await comfyPage.vueNodes.getFixtureByTitle(NODE_TITLE)
+      await node.toggleCollapse()
+      await comfyPage.nextFrame()
+
+      await expect.poll(async () => await node.boundingBox()).not.toBeNull()
+      const box = await node.boundingBox()
+      await comfyPage.page.mouse.move(
+        box!.x + box!.width / 2,
+        box!.y + box!.height / 2
+      )
+      await comfyPage.page.mouse.down()
+      await comfyPage.page.mouse.move(
+        box!.x + box!.width / 2 + 200,
+        box!.y + box!.height / 2 + 100,
+        { steps: 10 }
+      )
+      await comfyPage.page.mouse.up()
+      await comfyPage.nextFrame()
+
+      await assertNodeSlotsWithinBounds(comfyPage.page, NODE_ID)
+    })
+
+    test('links recover correct positions after expand', async ({
+      comfyPage
+    }) => {
+      const node = await comfyPage.vueNodes.getFixtureByTitle(NODE_TITLE)
+      await node.toggleCollapse()
+      await comfyPage.nextFrame()
+      await node.toggleCollapse()
+      await comfyPage.nextFrame()
+
+      await assertNodeSlotsWithinBounds(comfyPage.page, NODE_ID)
+    })
+  }
+)
+
+test.describe(
+  'Collapsed node links inside subgraph on first entry',
+  { tag: ['@canvas', '@node', '@vue-nodes', '@subgraph', '@screenshot'] },
+  () => {
+    test('renders collapsed node links correctly after fitView on first subgraph entry', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-with-collapsed-node'
+      )
+      await comfyPage.nextFrame()
+
+      await comfyPage.vueNodes.enterSubgraph('2')
+
+      await expect.poll(() => comfyPage.subgraph.isInSubgraph()).toBe(true)
+
+      // fitView runs on first entry and re-syncs slot layouts for the
+      // pre-collapsed KSampler. Screenshot captures the rendered canvas
+      // links to guard against regressing the stale-coordinate bug.
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'subgraph-entry-collapsed-node-links.png'
+      )
+    })
+  }
+)
diff --git a/browser_tests/tests/collapsedNodeLinks.spec.ts-snapshots/subgraph-entry-collapsed-node-links-chromium-linux.png b/browser_tests/tests/collapsedNodeLinks.spec.ts-snapshots/subgraph-entry-collapsed-node-links-chromium-linux.png
new file mode 100644
index 0000000000..ff5d959f49
Binary files /dev/null and b/browser_tests/tests/collapsedNodeLinks.spec.ts-snapshots/subgraph-entry-collapsed-node-links-chromium-linux.png differ
diff --git a/browser_tests/tests/colorPalette.spec.ts b/browser_tests/tests/colorPalette.spec.ts
index 968baab73a..fe3a68f0ed 100644
--- a/browser_tests/tests/colorPalette.spec.ts
+++ b/browser_tests/tests/colorPalette.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import type { WorkspaceStore } from '../types/globals'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import type { WorkspaceStore } from '@e2e/types/globals'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -161,13 +161,11 @@ test.describe('Color Palette', { tag: ['@screenshot', '@settings'] }, () => {
       'custom-color-palette-obsidian-dark-all-colors.png'
     )
     await comfyPage.settings.setSetting('Comfy.ColorPalette', 'light_red')
-    await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot(
       'custom-color-palette-light-red.png'
     )
 
     await comfyPage.settings.setSetting('Comfy.ColorPalette', 'dark')
-    await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot('default-color-palette.png')
   })
 
@@ -177,10 +175,9 @@ test.describe('Color Palette', { tag: ['@screenshot', '@settings'] }, () => {
         window.app!.extensionManager as WorkspaceStore
       ).colorPalette.addCustomColorPalette(p)
     }, customColorPalettes.obsidian_dark)
-    expect(await comfyPage.toast.getToastErrorCount()).toBe(0)
+    await expect(comfyPage.toast.toastErrors).toHaveCount(0)
 
     await comfyPage.settings.setSetting('Comfy.ColorPalette', 'obsidian_dark')
-    await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot(
       'custom-color-palette-obsidian-dark.png'
     )
@@ -189,7 +186,6 @@ test.describe('Color Palette', { tag: ['@screenshot', '@settings'] }, () => {
       'Comfy.ColorPalette',
       'custom_obsidian_dark'
     )
-    await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot(
       'custom-color-palette-obsidian-dark.png'
     )
@@ -211,13 +207,12 @@ test.describe(
 
       // Drag mouse to force canvas to redraw
       await comfyPage.page.mouse.move(0, 0)
-
-      await expect(comfyPage.canvas).toHaveScreenshot('node-opacity-0.5.png')
+      await comfyPage.expectScreenshot(comfyPage.canvas, 'node-opacity-0.5.png')
 
       await comfyPage.settings.setSetting('Comfy.Node.Opacity', 1.0)
 
       await comfyPage.page.mouse.move(8, 8)
-      await expect(comfyPage.canvas).toHaveScreenshot('node-opacity-1.png')
+      await comfyPage.expectScreenshot(comfyPage.canvas, 'node-opacity-1.png')
     })
 
     test('should persist color adjustments when changing themes', async ({
@@ -225,9 +220,9 @@ test.describe(
     }) => {
       await comfyPage.settings.setSetting('Comfy.Node.Opacity', 0.2)
       await comfyPage.settings.setSetting('Comfy.ColorPalette', 'arc')
-      await comfyPage.nextFrame()
       await comfyPage.page.mouse.move(0, 0)
-      await expect(comfyPage.canvas).toHaveScreenshot(
+      await comfyPage.expectScreenshot(
+        comfyPage.canvas,
         'node-opacity-0.2-arc-theme.png'
       )
     })
@@ -237,30 +232,44 @@ test.describe(
     }) => {
       await comfyPage.settings.setSetting('Comfy.Node.Opacity', 0.5)
       await comfyPage.settings.setSetting('Comfy.ColorPalette', 'light')
-      await comfyPage.nextFrame()
-      const parsed = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.graph!
-        if (typeof graph.serialize !== 'function') {
-          throw new Error('app.graph.serialize is not available')
-        }
-        return graph.serialize() as {
-          nodes: Array<{ bgcolor?: string; color?: string }>
-        }
-      })
-      expect(parsed.nodes).toBeDefined()
-      expect(Array.isArray(parsed.nodes)).toBe(true)
-      const nodes = parsed.nodes
-      for (const node of nodes) {
-        if (node.bgcolor) expect(node.bgcolor).not.toMatch(/hsla/)
-        if (node.color) expect(node.color).not.toMatch(/hsla/)
-      }
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(() => {
+            const graph = window.app!.graph!
+            if (typeof graph.serialize !== 'function') return undefined
+            const parsed = graph.serialize() as {
+              nodes: Array<{ bgcolor?: string; color?: string }>
+            }
+            return parsed.nodes
+          })
+        )
+        .toBeDefined()
+
+      await expect
+        .poll(async () => {
+          const nodes = await comfyPage.page.evaluate(() => {
+            return (
+              window.app!.graph!.serialize() as {
+                nodes: Array<{ bgcolor?: string; color?: string }>
+              }
+            ).nodes
+          })
+          if (!Array.isArray(nodes)) return 'not an array'
+          for (const node of nodes) {
+            if (node.bgcolor && /hsla/.test(node.bgcolor))
+              return `bgcolor contains hsla: ${node.bgcolor}`
+            if (node.color && /hsla/.test(node.color))
+              return `color contains hsla: ${node.color}`
+          }
+          return 'ok'
+        })
+        .toBe('ok')
     })
 
     test('should lighten node colors when switching to light theme', async ({
       comfyPage
     }) => {
       await comfyPage.settings.setSetting('Comfy.ColorPalette', 'light')
-      await comfyPage.nextFrame()
       await expect(comfyPage.canvas).toHaveScreenshot(
         'node-lightened-colors.png'
       )
diff --git a/browser_tests/tests/commands.spec.ts b/browser_tests/tests/commands.spec.ts
index d4e4f7fbfc..71440f6e5e 100644
--- a/browser_tests/tests/commands.spec.ts
+++ b/browser_tests/tests/commands.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -13,7 +13,9 @@ test.describe('Keybindings', { tag: '@keyboard' }, () => {
     })
 
     await comfyPage.command.executeCommand('TestCommand')
-    expect(await comfyPage.page.evaluate(() => window.foo)).toBe(true)
+    await expect
+      .poll(() => comfyPage.page.evaluate(() => window.foo))
+      .toBe(true)
   })
 
   test('Should execute async command', async ({ comfyPage }) => {
@@ -27,7 +29,9 @@ test.describe('Keybindings', { tag: '@keyboard' }, () => {
     })
 
     await comfyPage.command.executeCommand('TestCommand')
-    expect(await comfyPage.page.evaluate(() => window.foo)).toBe(true)
+    await expect
+      .poll(() => comfyPage.page.evaluate(() => window.foo))
+      .toBe(true)
   })
 
   test('Should handle command errors', async ({ comfyPage }) => {
@@ -36,7 +40,7 @@ test.describe('Keybindings', { tag: '@keyboard' }, () => {
     })
 
     await comfyPage.command.executeCommand('TestCommand')
-    expect(await comfyPage.toast.getToastErrorCount()).toBe(1)
+    await expect(comfyPage.toast.toastErrors).toHaveCount(1)
   })
 
   test('Should handle async command errors', async ({ comfyPage }) => {
@@ -49,6 +53,6 @@ test.describe('Keybindings', { tag: '@keyboard' }, () => {
     })
 
     await comfyPage.command.executeCommand('TestCommand')
-    expect(await comfyPage.toast.getToastErrorCount()).toBe(1)
+    await expect(comfyPage.toast.toastErrors).toHaveCount(1)
   })
 })
diff --git a/browser_tests/tests/confirmDialogTextWrap.spec.ts b/browser_tests/tests/confirmDialogTextWrap.spec.ts
index 6a12ccd1b6..5cb09788d8 100644
--- a/browser_tests/tests/confirmDialogTextWrap.spec.ts
+++ b/browser_tests/tests/confirmDialogTextWrap.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.describe('Confirm dialog text wrapping', { tag: ['@mobile'] }, () => {
   test('@mobile confirm dialog buttons are visible with long unbreakable text', async ({
@@ -18,15 +18,13 @@ test.describe('Confirm dialog text wrapping', { tag: ['@mobile'] }, () => {
         .catch(() => {})
     }, longFilename)
 
-    const dialog = comfyPage.page.getByRole('dialog')
-    await expect(dialog).toBeVisible()
+    const { root, confirm, reject } = comfyPage.confirmDialog
+    await expect(root).toBeVisible()
 
-    const confirmButton = dialog.getByRole('button', { name: 'Confirm' })
-    await expect(confirmButton).toBeVisible()
-    await expect(confirmButton).toBeInViewport()
+    await expect(confirm).toBeVisible()
+    await expect(confirm).toBeInViewport()
 
-    const cancelButton = dialog.getByRole('button', { name: 'Cancel' })
-    await expect(cancelButton).toBeVisible()
-    await expect(cancelButton).toBeInViewport()
+    await expect(reject).toBeVisible()
+    await expect(reject).toBeInViewport()
   })
 })
diff --git a/browser_tests/tests/containAudit.spec.ts b/browser_tests/tests/containAudit.spec.ts
index 52008664ac..ea2237e41f 100644
--- a/browser_tests/tests/containAudit.spec.ts
+++ b/browser_tests/tests/containAudit.spec.ts
@@ -1,8 +1,8 @@
 import { expect } from '@playwright/test'
 
-import type { PerfMeasurement } from '../fixtures/helpers/PerformanceHelper'
+import type { PerfMeasurement } from '@e2e/fixtures/helpers/PerformanceHelper'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 interface ContainCandidate {
   selector: string
diff --git a/browser_tests/tests/copyPaste.spec.ts b/browser_tests/tests/copyPaste.spec.ts
index 2d1b1b0899..236ad70113 100644
--- a/browser_tests/tests/copyPaste.spec.ts
+++ b/browser_tests/tests/copyPaste.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { DefaultGraphPositions } from '../fixtures/constants/defaultGraphPositions'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { DefaultGraphPositions } from '@e2e/fixtures/constants/defaultGraphPositions'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -38,8 +38,9 @@ test.describe('Copy Paste', { tag: ['@screenshot', '@workflow'] }, () => {
     await comfyPage.clipboard.copy(null)
     await comfyPage.clipboard.paste(null)
     await comfyPage.clipboard.paste(null)
-    const resultString = await textBox.inputValue()
-    expect(resultString).toBe(originalString + originalString)
+    await expect
+      .poll(() => textBox.inputValue())
+      .toBe(originalString + originalString)
   })
 
   test('Can copy and paste widget value', async ({ comfyPage }) => {
@@ -114,20 +115,24 @@ test.describe('Copy Paste', { tag: ['@screenshot', '@workflow'] }, () => {
   test('Can undo paste multiple nodes as single action', async ({
     comfyPage
   }) => {
+    await expect
+      .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+      .toBeGreaterThan(1)
     const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
-    expect(initialCount).toBeGreaterThan(1)
     await comfyPage.canvas.click()
     await comfyPage.keyboard.selectAll()
     await comfyPage.page.mouse.move(10, 10)
     await comfyPage.clipboard.copy()
     await comfyPage.clipboard.paste()
 
-    const pasteCount = await comfyPage.nodeOps.getGraphNodesCount()
-    expect(pasteCount).toBe(initialCount * 2)
+    await expect
+      .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+      .toBe(initialCount * 2)
 
     await comfyPage.keyboard.undo()
-    const undoCount = await comfyPage.nodeOps.getGraphNodesCount()
-    expect(undoCount).toBe(initialCount)
+    await expect
+      .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+      .toBe(initialCount)
   })
 
   test(
@@ -135,26 +140,23 @@ test.describe('Copy Paste', { tag: ['@screenshot', '@workflow'] }, () => {
     { tag: ['@node'] },
     async ({ comfyPage }) => {
       await comfyPage.workflow.loadWorkflow('nodes/load_image_with_ksampler')
-      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(2)
+      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(2)
 
       // Step 1: Copy a KSampler node with Ctrl+C and paste with Ctrl+V
       const ksamplerNodes =
         await comfyPage.nodeOps.getNodeRefsByType('KSampler')
       await ksamplerNodes[0].copy()
-      await comfyPage.canvas.click({ position: { x: 50, y: 500 } })
+      await comfyPage.canvas.click({
+        position: DefaultGraphPositions.emptyCanvasClick
+      })
       await comfyPage.nextFrame()
       await comfyPage.clipboard.paste()
-      await expect
-        .poll(() => comfyPage.nodeOps.getGraphNodesCount(), {
-          timeout: 5_000
-        })
-        .toBe(3)
+      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(3)
 
       // Step 2: Paste image onto selected LoadImage node
       const loadImageNodes =
         await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
       await loadImageNodes[0].click('title')
-      await comfyPage.nextFrame()
 
       const uploadPromise = comfyPage.page.waitForResponse(
         (resp) => resp.url().includes('/upload/') && resp.status() === 200,
@@ -166,18 +168,17 @@ test.describe('Copy Paste', { tag: ['@screenshot', '@workflow'] }, () => {
       await uploadPromise
 
       await expect
-        .poll(
-          async () => {
-            const fileWidget = await loadImageNodes[0].getWidget(0)
-            return fileWidget.getValue()
-          },
-          { timeout: 5_000 }
-        )
+        .poll(async () => {
+          const fileWidget = await loadImageNodes[0].getWidget(0)
+          return fileWidget.getValue()
+        })
         .toContain('image32x32')
-      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(3)
+      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(3)
 
       // Step 3: Click empty canvas area, paste image → creates new LoadImage
-      await comfyPage.canvas.click({ position: { x: 50, y: 500 } })
+      await comfyPage.canvas.click({
+        position: DefaultGraphPositions.emptyCanvasClick
+      })
       await comfyPage.nextFrame()
 
       const uploadPromise2 = comfyPage.page.waitForResponse(
@@ -189,11 +190,7 @@ test.describe('Copy Paste', { tag: ['@screenshot', '@workflow'] }, () => {
       )
       await uploadPromise2
 
-      await expect
-        .poll(() => comfyPage.nodeOps.getGraphNodesCount(), {
-          timeout: 5_000
-        })
-        .toBe(4)
+      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(4)
       const allLoadImageNodes =
         await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
       expect(allLoadImageNodes).toHaveLength(2)
diff --git a/browser_tests/tests/customIcons.spec.ts b/browser_tests/tests/customIcons.spec.ts
index ed9680406e..8958ec94d2 100644
--- a/browser_tests/tests/customIcons.spec.ts
+++ b/browser_tests/tests/customIcons.spec.ts
@@ -1,32 +1,25 @@
 import { expect } from '@playwright/test'
 import type { Locator } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 async function verifyCustomIconSvg(iconElement: Locator) {
-  const svgVariable = await iconElement.evaluate((element) => {
-    const styles = getComputedStyle(element)
-    return styles.getPropertyValue('--svg')
-  })
-
-  expect(svgVariable).toBeTruthy()
-  const dataUrlMatch = svgVariable.match(
-    /url\("data:image\/svg\+xml,([^"]+)"\)/
-  )
-  expect(dataUrlMatch).toBeTruthy()
-
-  const encodedSvg = dataUrlMatch![1]
-  const decodedSvg = decodeURIComponent(encodedSvg)
-
-  // Check for SVG header to confirm it's a valid SVG
-  expect(decodedSvg).toContain("<svg xmlns='http://www.w3.org/2000/svg'")
+  await expect
+    .poll(async () => {
+      const svgVariable = await iconElement.evaluate((element) =>
+        getComputedStyle(element).getPropertyValue('--svg')
+      )
+      if (!svgVariable) return null
+      const dataUrlMatch = svgVariable.match(
+        /url\("data:image\/svg\+xml,([^"]+)"\)/
+      )
+      if (!dataUrlMatch) return null
+      return decodeURIComponent(dataUrlMatch[1])
+    })
+    .toContain("<svg xmlns='http://www.w3.org/2000/svg'")
 }
 
 test.describe('Custom Icons', { tag: '@settings' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-  })
-
   test('sidebar tab icons use custom SVGs', async ({ comfyPage }) => {
     // Find the icon in the sidebar
     const icon = comfyPage.page.locator(
diff --git a/browser_tests/tests/defaultKeybindings.spec.ts b/browser_tests/tests/defaultKeybindings.spec.ts
index 59ecf85f3b..3ecdf0e89a 100644
--- a/browser_tests/tests/defaultKeybindings.spec.ts
+++ b/browser_tests/tests/defaultKeybindings.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test'
 
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 async function pressKeyAndExpectRequest(
   comfyPage: ComfyPage,
@@ -20,7 +20,6 @@ async function pressKeyAndExpectRequest(
 test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
   test.describe('Sidebar Toggle Shortcuts', () => {
     test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
       await comfyPage.canvas.click({ position: { x: 400, y: 400 } })
       await comfyPage.nextFrame()
     })
@@ -38,15 +37,13 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
           `.${tabId}-tab-button.side-bar-button-selected`
         )
 
-        await expect(selectedButton).not.toBeVisible()
+        await expect(selectedButton).toBeHidden()
 
         await comfyPage.canvas.press(key)
-        await comfyPage.nextFrame()
         await expect(selectedButton).toBeVisible()
 
         await comfyPage.canvas.press(key)
-        await comfyPage.nextFrame()
-        await expect(selectedButton).not.toBeVisible()
+        await expect(selectedButton).toBeHidden()
       })
     }
   })
@@ -55,59 +52,57 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
     test("'Alt+=' zooms in", async ({ comfyPage }) => {
       const initialScale = await comfyPage.canvasOps.getScale()
 
-      await comfyPage.canvas.press('Alt+Equal')
-      await comfyPage.nextFrame()
+      await comfyPage.keyboard.press('Alt+Equal')
 
-      const newScale = await comfyPage.canvasOps.getScale()
-      expect(newScale).toBeGreaterThan(initialScale)
+      await expect
+        .poll(() => comfyPage.canvasOps.getScale())
+        .toBeGreaterThan(initialScale)
     })
 
     test("'Alt+-' zooms out", async ({ comfyPage }) => {
       const initialScale = await comfyPage.canvasOps.getScale()
 
-      await comfyPage.canvas.press('Alt+Minus')
-      await comfyPage.nextFrame()
+      await comfyPage.keyboard.press('Alt+Minus')
 
-      const newScale = await comfyPage.canvasOps.getScale()
-      expect(newScale).toBeLessThan(initialScale)
+      await expect
+        .poll(() => comfyPage.canvasOps.getScale())
+        .toBeLessThan(initialScale)
     })
 
     test("'.' fits view to nodes", async ({ comfyPage }) => {
       // Set scale very small so fit-view will zoom back to fit nodes
       await comfyPage.canvasOps.setScale(0.1)
-      const scaleBefore = await comfyPage.canvasOps.getScale()
-      expect(scaleBefore).toBeCloseTo(0.1, 1)
+      await expect
+        .poll(() => comfyPage.canvasOps.getScale())
+        .toBeCloseTo(0.1, 1)
 
       // Click canvas to ensure focus is within graph-canvas-container
       await comfyPage.canvas.click({ position: { x: 400, y: 400 } })
       await comfyPage.nextFrame()
 
-      await comfyPage.canvas.press('Period')
-      await comfyPage.nextFrame()
+      await comfyPage.keyboard.press('Period')
 
-      const scaleAfter = await comfyPage.canvasOps.getScale()
-      expect(scaleAfter).toBeGreaterThan(scaleBefore)
+      await expect
+        .poll(() => comfyPage.canvasOps.getScale())
+        .toBeGreaterThan(0.1)
     })
 
     test("'h' locks canvas", async ({ comfyPage }) => {
-      expect(await comfyPage.canvasOps.isReadOnly()).toBe(false)
+      await expect.poll(() => comfyPage.canvasOps.isReadOnly()).toBe(false)
 
-      await comfyPage.canvas.press('KeyH')
-      await comfyPage.nextFrame()
+      await comfyPage.keyboard.press('KeyH')
 
-      expect(await comfyPage.canvasOps.isReadOnly()).toBe(true)
+      await expect.poll(() => comfyPage.canvasOps.isReadOnly()).toBe(true)
     })
 
     test("'v' unlocks canvas", async ({ comfyPage }) => {
       // Lock first
       await comfyPage.command.executeCommand('Comfy.Canvas.Lock')
-      await comfyPage.nextFrame()
-      expect(await comfyPage.canvasOps.isReadOnly()).toBe(true)
+      await expect.poll(() => comfyPage.canvasOps.isReadOnly()).toBe(true)
 
-      await comfyPage.canvas.press('KeyV')
-      await comfyPage.nextFrame()
+      await comfyPage.keyboard.press('KeyV')
 
-      expect(await comfyPage.canvasOps.isReadOnly()).toBe(false)
+      await expect.poll(() => comfyPage.canvasOps.isReadOnly()).toBe(false)
     })
   })
 
@@ -120,17 +115,14 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
       const node = nodes[0]
 
       await node.click('title')
-      await comfyPage.nextFrame()
 
-      expect(await node.isCollapsed()).toBe(false)
+      await expect.poll(() => node.isCollapsed()).toBe(false)
 
-      await comfyPage.canvas.press('Alt+KeyC')
-      await comfyPage.nextFrame()
-      expect(await node.isCollapsed()).toBe(true)
+      await comfyPage.keyboard.press('Alt+KeyC')
+      await expect.poll(() => node.isCollapsed()).toBe(true)
 
-      await comfyPage.canvas.press('Alt+KeyC')
-      await comfyPage.nextFrame()
-      expect(await node.isCollapsed()).toBe(false)
+      await comfyPage.keyboard.press('Alt+KeyC')
+      await expect.poll(() => node.isCollapsed()).toBe(false)
     })
 
     test("'Ctrl+m' mutes and unmutes selected nodes", async ({ comfyPage }) => {
@@ -139,7 +131,6 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
       const node = nodes[0]
 
       await node.click('title')
-      await comfyPage.nextFrame()
 
       // Normal mode is ALWAYS (0)
       const getMode = () =>
@@ -147,40 +138,33 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
           return window.app!.canvas.graph!.getNodeById(nodeId)!.mode
         }, node.id)
 
-      expect(await getMode()).toBe(0)
+      await expect.poll(() => getMode()).toBe(0)
 
-      await comfyPage.canvas.press('Control+KeyM')
-      await comfyPage.nextFrame()
+      await comfyPage.keyboard.press('Control+KeyM')
       // NEVER (2) = muted
-      expect(await getMode()).toBe(2)
+      await expect.poll(() => getMode()).toBe(2)
 
-      await comfyPage.canvas.press('Control+KeyM')
-      await comfyPage.nextFrame()
-      expect(await getMode()).toBe(0)
+      await comfyPage.keyboard.press('Control+KeyM')
+      await expect.poll(() => getMode()).toBe(0)
     })
   })
 
   test.describe('Mode and Panel Toggles', () => {
     test("'Alt+m' toggles app mode", async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-
       // Set up linearData so app mode has something to show
       await comfyPage.appMode.enterAppModeWithInputs([])
       await expect(comfyPage.appMode.linearWidgets).toBeVisible()
 
       // Toggle off with Alt+m
       await comfyPage.page.keyboard.press('Alt+KeyM')
-      await comfyPage.nextFrame()
-      await expect(comfyPage.appMode.linearWidgets).not.toBeVisible()
+      await expect(comfyPage.appMode.linearWidgets).toBeHidden()
 
       // Toggle on again
       await comfyPage.page.keyboard.press('Alt+KeyM')
-      await comfyPage.nextFrame()
       await expect(comfyPage.appMode.linearWidgets).toBeVisible()
     })
 
     test("'Alt+Shift+m' toggles minimap", async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
       await comfyPage.settings.setSetting('Comfy.Minimap.Visible', true)
       await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', true)
       await comfyPage.workflow.loadWorkflow('default')
@@ -189,26 +173,20 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
       await expect(minimap).toBeVisible()
 
       await comfyPage.page.keyboard.press('Alt+Shift+KeyM')
-      await comfyPage.nextFrame()
-      await expect(minimap).not.toBeVisible()
+      await expect(minimap).toBeHidden()
 
       await comfyPage.page.keyboard.press('Alt+Shift+KeyM')
-      await comfyPage.nextFrame()
       await expect(minimap).toBeVisible()
     })
 
     test("'Ctrl+`' toggles terminal/logs panel", async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-
-      await expect(comfyPage.bottomPanel.root).not.toBeVisible()
+      await expect(comfyPage.bottomPanel.root).toBeHidden()
 
       await comfyPage.page.keyboard.press('Control+Backquote')
-      await comfyPage.nextFrame()
       await expect(comfyPage.bottomPanel.root).toBeVisible()
 
       await comfyPage.page.keyboard.press('Control+Backquote')
-      await comfyPage.nextFrame()
-      await expect(comfyPage.bottomPanel.root).not.toBeVisible()
+      await expect(comfyPage.bottomPanel.root).toBeHidden()
     })
   })
 
@@ -249,16 +227,14 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
     test("'Ctrl+s' triggers save workflow", async ({ comfyPage }) => {
       // On a new unsaved workflow, Ctrl+s triggers Save As dialog.
       // The dialog appearing proves the keybinding was intercepted by the app.
-      await comfyPage.page.keyboard.press('Control+s')
-      await comfyPage.nextFrame()
+      await comfyPage.keyboard.press('Control+s')
 
       // The Save As dialog should appear (p-dialog overlay)
       const dialogOverlay = comfyPage.page.locator('.p-dialog-mask')
-      await expect(dialogOverlay).toBeVisible({ timeout: 3000 })
+      await expect(dialogOverlay).toBeVisible()
 
       // Dismiss the dialog
-      await comfyPage.page.keyboard.press('Escape')
-      await comfyPage.nextFrame()
+      await comfyPage.keyboard.press('Escape')
     })
 
     test("'Ctrl+o' triggers open workflow", async ({ comfyPage }) => {
@@ -275,10 +251,11 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
         }
       })
 
-      await comfyPage.page.keyboard.press('Control+o')
-      await comfyPage.nextFrame()
+      await comfyPage.keyboard.press('Control+o')
 
-      expect(await comfyPage.page.evaluate(() => window.TestCommand)).toBe(true)
+      await expect
+        .poll(() => comfyPage.page.evaluate(() => window.TestCommand))
+        .toBe(true)
     })
   })
 
@@ -286,22 +263,24 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
     test("'Ctrl+Shift+e' converts selection to subgraph", async ({
       comfyPage
     }) => {
+      await expect
+        .poll(
+          () => comfyPage.nodeOps.getGraphNodesCount(),
+          'Default workflow should have multiple nodes'
+        )
+        .toBeGreaterThan(1)
+
       const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
-      expect(initialCount).toBeGreaterThan(1)
 
       // Select all nodes
-      await comfyPage.canvas.press('Control+a')
-      await comfyPage.nextFrame()
+      await comfyPage.keyboard.press('Control+a')
 
-      await comfyPage.page.keyboard.press('Control+Shift+KeyE')
-      await comfyPage.nextFrame()
+      await comfyPage.keyboard.press('Control+Shift+KeyE')
 
       // After conversion, node count should decrease
       // (multiple nodes replaced by single subgraph node)
       await expect
-        .poll(() => comfyPage.nodeOps.getGraphNodesCount(), {
-          timeout: 5000
-        })
+        .poll(() => comfyPage.nodeOps.getGraphNodesCount())
         .toBeLessThan(initialCount)
     })
 
diff --git a/browser_tests/tests/dialog.spec.ts b/browser_tests/tests/dialog.spec.ts
index 9a2220f8cd..b15e3e9bd8 100644
--- a/browser_tests/tests/dialog.spec.ts
+++ b/browser_tests/tests/dialog.spec.ts
@@ -1,336 +1,63 @@
 import { expect } from '@playwright/test'
 
-import type { Keybinding } from '../../src/platform/keybindings/types'
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { DefaultGraphPositions } from '../fixtures/constants/defaultGraphPositions'
-import { TestIds } from '../fixtures/selectors'
+import type { Keybinding } from '@/platform/keybindings/types'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { SignInDialog } from '@e2e/fixtures/components/SignInDialog'
+import { ApiSignin } from '@e2e/fixtures/components/ApiSignin'
+import { CloudNotification } from '@e2e/fixtures/components/CloudNotification'
+import { UpdatePassword } from '@e2e/fixtures/components/UpdatePassword'
+import { DefaultGraphPositions } from '@e2e/fixtures/constants/defaultGraphPositions'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
 })
 
-test.describe('Missing nodes in Error Overlay', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting(
-      'Comfy.RightSidePanel.ShowErrorsTab',
-      true
-    )
-  })
-
-  test('Should show error overlay when loading a workflow with missing nodes', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
-
-    const errorOverlay = comfyPage.page.getByTestId(
-      TestIds.dialogs.errorOverlay
-    )
-    await expect(errorOverlay).toBeVisible()
-
-    const messages = errorOverlay.getByTestId(
-      TestIds.dialogs.errorOverlayMessages
-    )
-    await expect(messages).toBeVisible()
-    await expect(messages).toHaveText(/missing.*installed/i)
-  })
-
-  test('Should show error overlay when loading a workflow with missing nodes in subgraphs', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow('missing/missing_nodes_in_subgraph')
-
-    const errorOverlay = comfyPage.page.getByTestId(
-      TestIds.dialogs.errorOverlay
-    )
-    await expect(errorOverlay).toBeVisible()
-
-    const messages = errorOverlay.getByTestId(
-      TestIds.dialogs.errorOverlayMessages
-    )
-    await expect(messages).toBeVisible()
-    await expect(messages).toHaveText(/missing.*installed/i)
-
-    // Click "See Errors" to open the errors tab and verify subgraph node content
-    await errorOverlay
-      .getByTestId(TestIds.dialogs.errorOverlaySeeErrors)
-      .click()
-    await expect(errorOverlay).not.toBeVisible()
-
-    const missingNodeCard = comfyPage.page.getByTestId(
-      TestIds.dialogs.missingNodeCard
-    )
-    await expect(missingNodeCard).toBeVisible()
-
-    // Expand the pack group row to reveal node type names
-    await missingNodeCard
-      .getByRole('button', { name: /expand/i })
-      .first()
-      .click()
-    await expect(
-      missingNodeCard.getByText('MISSING_NODE_TYPE_IN_SUBGRAPH')
-    ).toBeVisible()
-  })
-
-  test('Should show MissingNodeCard in errors tab when clicking See Errors', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
-
-    const errorOverlay = comfyPage.page.getByTestId(
-      TestIds.dialogs.errorOverlay
-    )
-    await expect(errorOverlay).toBeVisible()
-
-    // Click "See Errors" to open the right side panel errors tab
-    await errorOverlay
-      .getByTestId(TestIds.dialogs.errorOverlaySeeErrors)
-      .click()
-    await expect(errorOverlay).not.toBeVisible()
-
-    // Verify MissingNodeCard is rendered in the errors tab
-    const missingNodeCard = comfyPage.page.getByTestId(
-      TestIds.dialogs.missingNodeCard
-    )
-    await expect(missingNodeCard).toBeVisible()
-  })
-})
-
-test('Does not resurface missing nodes on undo/redo', async ({ comfyPage }) => {
-  await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-  await comfyPage.settings.setSetting(
-    'Comfy.RightSidePanel.ShowErrorsTab',
-    true
-  )
-  await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
-
-  const errorOverlay = comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
-  await expect(errorOverlay).toBeVisible()
-
-  // Dismiss the error overlay
-  await errorOverlay.getByTestId(TestIds.dialogs.errorOverlayDismiss).click()
-  await expect(errorOverlay).not.toBeVisible()
-
-  // Make a change to the graph by moving a node
-  await comfyPage.canvas.click()
-  await comfyPage.nextFrame()
-  await comfyPage.page.keyboard.press('Control+a')
-  await comfyPage.page.mouse.move(400, 300)
-  await comfyPage.page.mouse.down()
-  await comfyPage.page.mouse.move(450, 350, { steps: 5 })
-  await comfyPage.page.mouse.up()
-  await comfyPage.nextFrame()
-
-  // Undo and redo should not resurface the error overlay
-  await comfyPage.keyboard.undo()
-  await expect(errorOverlay).not.toBeVisible({ timeout: 5000 })
-
-  await comfyPage.keyboard.redo()
-  await expect(errorOverlay).not.toBeVisible({ timeout: 5000 })
-})
-
-test.describe('Execution error', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting(
-      'Comfy.RightSidePanel.ShowErrorsTab',
-      true
-    )
-    await comfyPage.setup()
-  })
-
-  test('Should display an error message when an execution error occurs', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow('nodes/execution_error')
-    await comfyPage.command.executeCommand('Comfy.QueuePrompt')
-    await comfyPage.nextFrame()
-
-    // Wait for the error overlay to be visible
-    const errorOverlay = comfyPage.page.getByTestId(
-      TestIds.dialogs.errorOverlay
-    )
-    await expect(errorOverlay).toBeVisible()
-  })
-})
-
-test.describe('Error actions in Errors Tab', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting(
-      'Comfy.RightSidePanel.ShowErrorsTab',
-      true
-    )
-  })
-
-  test('Should show Find on GitHub and Copy buttons in error card after execution error', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow('nodes/execution_error')
-    await comfyPage.command.executeCommand('Comfy.QueuePrompt')
-    await comfyPage.nextFrame()
-
-    // Wait for error overlay and click "See Errors"
-    const errorOverlay = comfyPage.page.getByTestId(
-      TestIds.dialogs.errorOverlay
-    )
-    await expect(errorOverlay).toBeVisible()
-    await errorOverlay
-      .getByTestId(TestIds.dialogs.errorOverlaySeeErrors)
-      .click()
-    await expect(errorOverlay).not.toBeVisible()
-
-    // Verify Find on GitHub button is present in the error card
-    const findOnGithubButton = comfyPage.page.getByTestId(
-      TestIds.dialogs.errorCardFindOnGithub
-    )
-    await expect(findOnGithubButton).toBeVisible()
-
-    // Verify Copy button is present in the error card
-    const copyButton = comfyPage.page.getByTestId(TestIds.dialogs.errorCardCopy)
-    await expect(copyButton).toBeVisible()
-  })
-})
-
-test.describe('Missing models in Error Tab', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting(
-      'Comfy.RightSidePanel.ShowErrorsTab',
-      true
-    )
-    const cleanupOk = await comfyPage.page.evaluate(async (url: string) => {
-      const response = await fetch(`${url}/api/devtools/cleanup_fake_model`)
-      return response.ok
-    }, comfyPage.url)
-    expect(cleanupOk).toBeTruthy()
-  })
-
-  test('Should show error overlay with missing models when workflow has missing models', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow('missing/missing_models')
-
-    const errorOverlay = comfyPage.page.getByTestId(
-      TestIds.dialogs.errorOverlay
-    )
-    await expect(errorOverlay).toBeVisible()
-
-    const messages = errorOverlay.getByTestId(
-      TestIds.dialogs.errorOverlayMessages
-    )
-    await expect(messages).toBeVisible()
-    await expect(messages).toHaveText(/required model.*missing/i)
-  })
-
-  test('Should show missing models from node properties', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow(
-      'missing/missing_models_from_node_properties'
-    )
-
-    const errorOverlay = comfyPage.page.getByTestId(
-      TestIds.dialogs.errorOverlay
-    )
-    await expect(errorOverlay).toBeVisible()
-
-    const messages = errorOverlay.getByTestId(
-      TestIds.dialogs.errorOverlayMessages
-    )
-    await expect(messages).toBeVisible()
-    await expect(messages).toHaveText(/required model.*missing/i)
-  })
-
-  test('Should not show missing models when widget values have changed', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow(
-      'missing/model_metadata_widget_mismatch'
-    )
-
-    await expect(
-      comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
-    ).not.toBeVisible()
-    await expect(
-      comfyPage.page.getByTestId(TestIds.dialogs.errorOverlayMessages)
-    ).not.toBeVisible()
-  })
-
-  // Flaky test after parallelization
-  // https://github.com/Comfy-Org/ComfyUI_frontend/pull/1400
-  test.skip('Should download missing model when clicking download button', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow('missing/missing_models')
-
-    const errorOverlay = comfyPage.page.getByTestId(
-      TestIds.dialogs.errorOverlay
-    )
-    await expect(errorOverlay).toBeVisible()
-
-    const downloadAllButton = comfyPage.page.getByText('Download all')
-    await expect(downloadAllButton).toBeVisible()
-    const downloadPromise = comfyPage.page.waitForEvent('download')
-    await downloadAllButton.click()
-
-    const download = await downloadPromise
-    expect(download.suggestedFilename()).toBe('fake_model.safetensors')
-  })
-})
-
 test.describe('Settings', () => {
   test('@mobile Should be visible on mobile', async ({ comfyPage }) => {
     await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator(
-      '[data-testid="settings-dialog"]'
-    )
+    const settingsDialog = comfyPage.page.getByTestId('settings-dialog')
     await expect(settingsDialog).toBeVisible()
     const contentArea = settingsDialog.locator('main')
     await expect(contentArea).toBeVisible()
-    const isUsableHeight = await contentArea.evaluate(
-      (el) => el.clientHeight > 30
-    )
-    expect(isUsableHeight).toBeTruthy()
+    await expect
+      .poll(() => contentArea.evaluate((el) => el.clientHeight))
+      .toBeGreaterThan(30)
   })
 
   test('Can open settings with hotkey', async ({ comfyPage }) => {
     await comfyPage.page.keyboard.down('ControlOrMeta')
     await comfyPage.page.keyboard.press(',')
     await comfyPage.page.keyboard.up('ControlOrMeta')
-    const settingsLocator = comfyPage.page.locator(
-      '[data-testid="settings-dialog"]'
-    )
+    const settingsLocator = comfyPage.page.getByTestId('settings-dialog')
     await expect(settingsLocator).toBeVisible()
     await comfyPage.page.keyboard.press('Escape')
-    await expect(settingsLocator).not.toBeVisible()
+    await expect(settingsLocator).toBeHidden()
   })
 
   test('Can change canvas zoom speed setting', async ({ comfyPage }) => {
     const maxSpeed = 2.5
     await comfyPage.settings.setSetting('Comfy.Graph.ZoomSpeed', maxSpeed)
+
     await test.step('Setting should persist', async () => {
-      expect(await comfyPage.settings.getSetting('Comfy.Graph.ZoomSpeed')).toBe(
-        maxSpeed
-      )
+      await expect
+        .poll(() => comfyPage.settings.getSetting('Comfy.Graph.ZoomSpeed'))
+        .toBe(maxSpeed)
     })
   })
 
   test('Should persist keybinding setting', async ({ comfyPage }) => {
     // Open the settings dialog
     await comfyPage.page.keyboard.press('Control+,')
-    await comfyPage.page.waitForSelector('[data-testid="settings-dialog"]')
 
     // Open the keybinding tab
-    const settingsDialog = comfyPage.page.locator(
-      '[data-testid="settings-dialog"]'
-    )
+    const settingsDialog = comfyPage.page.getByTestId('settings-dialog')
+    await expect(settingsDialog).toBeVisible()
     await settingsDialog
       .locator('nav [role="button"]', { hasText: 'Keybinding' })
       .click()
-    await comfyPage.page.waitForSelector(
-      '[placeholder="Search Keybindings..."]'
-    )
+    await expect(
+      comfyPage.page.getByPlaceholder('Search Keybindings...')
+    ).toBeVisible()
 
     // Focus the 'New Blank Workflow' row
     const newBlankWorkflowRow = comfyPage.page.locator('tr', {
@@ -380,7 +107,6 @@ test.describe('Support', () => {
     comfyPage
   }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-
     // Prevent loading the external page
     await comfyPage.page
       .context()
@@ -400,38 +126,6 @@ test.describe('Support', () => {
   })
 })
 
-test.describe('Error dialog', () => {
-  test('Should display an error dialog when graph configure fails', async ({
-    comfyPage
-  }) => {
-    await comfyPage.page.evaluate(() => {
-      const graph = window.graph!
-      ;(graph as { configure: () => void }).configure = () => {
-        throw new Error('Error on configure!')
-      }
-    })
-
-    await comfyPage.workflow.loadWorkflow('default')
-
-    const errorDialog = comfyPage.page.locator('.comfy-error-report')
-    await expect(errorDialog).toBeVisible()
-  })
-
-  test('Should display an error dialog when prompt execution fails', async ({
-    comfyPage
-  }) => {
-    await comfyPage.page.evaluate(async () => {
-      const app = window.app!
-      app.api.queuePrompt = () => {
-        throw new Error('Error on queuePrompt!')
-      }
-      await app.queuePrompt(0)
-    })
-    const errorDialog = comfyPage.page.locator('.comfy-error-report')
-    await expect(errorDialog).toBeVisible()
-  })
-})
-
 test.describe('Signin dialog', () => {
   test('Paste content to signin dialog should not paste node on canvas', async ({
     comfyPage
@@ -459,6 +153,163 @@ test.describe('Signin dialog', () => {
     await input.press('Control+v')
     await expect(input).toHaveValue('test_password')
 
-    expect(await comfyPage.nodeOps.getNodeCount()).toBe(nodeNum)
+    await expect.poll(() => comfyPage.nodeOps.getNodeCount()).toBe(nodeNum)
+  })
+
+  test('Sign-in dialog resolves true on login', async ({ comfyPage }) => {
+    const dialog = new SignInDialog(comfyPage.page)
+    const { result: dialogResult } = await dialog.openWithResult()
+
+    await dialog.emailInput.fill('test@example.com')
+    await dialog.passwordInput.fill('TestPassword123!')
+    await expect(dialog.root).toBeVisible()
+
+    await dialog.signInButton.click()
+    await expect(dialog.root).toBeHidden()
+    expect(await dialogResult).toBe(true)
+  })
+
+  test('Sign-in dialog resolves false when closed without sign-in', async ({
+    comfyPage
+  }) => {
+    const dialog = new SignInDialog(comfyPage.page)
+    const { result: dialogResult } = await dialog.openWithResult()
+
+    await dialog.close()
+    await expect(dialog.root).toBeHidden()
+    expect(await dialogResult).toBe(false)
+  })
+})
+
+test('API Nodes sign-in dialog', async ({ comfyPage }) => {
+  const dialog = new ApiSignin(comfyPage.page)
+  const { result: dialogResult } = await dialog.open([
+    'FluxProGenerate',
+    'StableDiffusion3Generate'
+  ])
+
+  await expect(dialog.root.getByText('FluxProGenerate')).toBeVisible()
+  await expect(dialog.root.getByText('StableDiffusion3Generate')).toBeVisible()
+
+  await dialog.cancel.click()
+  await expect(dialog.root).toBeHidden()
+  expect(await dialogResult).toBe(false)
+})
+
+test.describe('Update password dialog', () => {
+  test('Should only allow submission when inputs are valid', async ({
+    comfyPage
+  }) => {
+    const dialog = new UpdatePassword(comfyPage.page)
+    await dialog.open()
+
+    await dialog.confirm.click()
+    await expect(dialog.root, 'Check that password exists').toBeVisible()
+
+    const testPassword = 'Unguessable Password #2'
+    await dialog.password.fill(testPassword)
+
+    await dialog.confirm.click()
+    await expect(dialog.root, 'Check that inputs match').toBeVisible()
+
+    await dialog.confirmPassword.fill(testPassword)
+    await dialog.confirm.click()
+    await expect(dialog.root, 'Dialog closes after submission').toBeHidden()
+  })
+})
+
+test.describe('Cloud notification dialog', () => {
+  test('Should display cloud notification and navigate to comfy.org on Explore', async ({
+    comfyPage
+  }) => {
+    const dialog = new CloudNotification(comfyPage.page)
+    await dialog.open()
+
+    await expect(
+      dialog.root.getByText('Run ComfyUI in the Cloud')
+    ).toBeVisible()
+
+    const popupPromise = comfyPage.page.waitForEvent('popup')
+    await dialog.toCloud.click()
+    const popup = await popupPromise
+
+    expect(new URL(popup.url()).hostname).toContain('comfy.org')
+    await popup.close()
+    await expect(dialog.root).toBeHidden()
+  })
+
+  test('Should close when Continue Locally is clicked', async ({
+    comfyPage
+  }) => {
+    const dialog = new CloudNotification(comfyPage.page)
+    await dialog.open()
+
+    await dialog.back.click()
+    await expect(dialog.root).toBeHidden()
+  })
+})
+
+test('Blueprint overwrite', { tag: ['@subgraph'] }, async ({ comfyPage }) => {
+  const blueprintName = `test-blueprint-overwrite-${Date.now()}`
+  await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+  await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+  await comfyPage.settings.setSetting(
+    'Comfy.Workflow.WarnBlueprintOverwrite',
+    true
+  )
+
+  const tab = comfyPage.menu.nodeLibraryTabV2
+
+  await test.step('Publish a basic subgraph', async () => {
+    const ksampler = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+    await comfyPage.contextMenu.openForVueNode(ksampler.header)
+    await comfyPage.contextMenu.clickMenuItemExact('Convert to Subgraph')
+    await comfyPage.subgraph.publishSubgraph(blueprintName)
+
+    await tab.open()
+    await tab.getFolder('My Blueprints').click()
+    await tab.getFolder('User').click()
+  })
+
+  const steps = comfyPage.vueNodes.getWidgetByName('KSampler', 'steps')
+
+  await test.step('Edit the published subgraph', async () => {
+    const blueprintNode = tab.getNode(blueprintName)
+    await expect(blueprintNode, 'blueprint visible in library').toBeVisible()
+    await blueprintNode.getByRole('button', { name: 'Edit' }).click()
+    await steps.waitFor({ state: 'visible' })
+  })
+
+  const confirmDialog = comfyPage.confirmDialog.root
+  const { incrementButton } = comfyPage.vueNodes.getInputNumberControls(steps)
+  const dirtyGraphAndSave = async () => {
+    await incrementButton.click()
+    await comfyPage.page.keyboard.press('Control+s')
+  }
+
+  await test.step('No dialog: user prompted on publish', async () => {
+    await dirtyGraphAndSave()
+    await comfyPage.nextFrame()
+    await expect(confirmDialog).toBeHidden()
+  })
+
+  await test.step('Should show dialog', async () => {
+    await comfyPage.subgraph.setSaveUnpromptedOnActiveBlueprint()
+    await dirtyGraphAndSave()
+    const { noWarnOverwriteToggle } = comfyPage.confirmDialog
+    await expect(noWarnOverwriteToggle).toBeVisible()
+
+    await test.step('Disable overwrite warning', async () => {
+      await noWarnOverwriteToggle.check()
+      await expect(confirmDialog.getByText(/Re-enable in/i)).toBeVisible()
+      await comfyPage.confirmDialog.click('overwrite')
+    })
+  })
+
+  await test.step('No dialog: disabled by setting', async () => {
+    await comfyPage.subgraph.setSaveUnpromptedOnActiveBlueprint()
+    await dirtyGraphAndSave()
+    await comfyPage.nextFrame()
+    await expect(confirmDialog).toBeHidden()
   })
 })
diff --git a/browser_tests/tests/dialogs/managerDialog.spec.ts b/browser_tests/tests/dialogs/managerDialog.spec.ts
new file mode 100644
index 0000000000..60da868072
--- /dev/null
+++ b/browser_tests/tests/dialogs/managerDialog.spec.ts
@@ -0,0 +1,417 @@
+import { expect } from '@playwright/test'
+
+import type { AlgoliaNodePack } from '@/types/algoliaTypes'
+import type { components as ManagerComponents } from '@/workbench/extensions/manager/types/generatedManagerTypes'
+import type { components as RegistryComponents } from '@comfyorg/registry-types'
+
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { mockSystemStats } from '@e2e/fixtures/data/systemStats'
+
+type InstalledPacksResponse =
+  ManagerComponents['schemas']['InstalledPacksResponse']
+type RegistryNodePack = RegistryComponents['schemas']['Node']
+
+interface AlgoliaSearchResult {
+  hits: Partial<AlgoliaNodePack>[]
+  nbHits: number
+  page: number
+  nbPages: number
+  hitsPerPage: number
+}
+
+interface AlgoliaSearchResponse {
+  results: AlgoliaSearchResult[]
+}
+
+const MOCK_PACK_A: RegistryNodePack = {
+  id: 'test-pack-a',
+  name: 'Test Pack A',
+  description: 'A test custom node pack',
+  downloads: 5000,
+  status: 'NodeStatusActive',
+  publisher: { id: 'test-publisher', name: 'Test Publisher' },
+  latest_version: { version: '1.0.0', status: 'NodeVersionStatusActive' },
+  repository: 'https://github.com/test/pack-a',
+  tags: ['image', 'processing']
+}
+
+const MOCK_PACK_B: RegistryNodePack = {
+  id: 'test-pack-b',
+  name: 'Test Pack B',
+  description: 'Another test custom node pack for testing search',
+  downloads: 3000,
+  status: 'NodeStatusActive',
+  publisher: { id: 'another-publisher', name: 'Another Publisher' },
+  latest_version: { version: '2.1.0', status: 'NodeVersionStatusActive' },
+  repository: 'https://github.com/test/pack-b',
+  tags: ['video', 'generation']
+}
+
+const MOCK_PACK_C: RegistryNodePack = {
+  id: 'test-pack-c',
+  name: 'Test Pack C',
+  description: 'Third test pack',
+  downloads: 100,
+  status: 'NodeStatusActive',
+  publisher: { id: 'test-publisher', name: 'Test Publisher' },
+  latest_version: { version: '0.5.0', status: 'NodeVersionStatusActive' },
+  repository: 'https://github.com/test/pack-c'
+}
+
+const MOCK_INSTALLED_PACKS: InstalledPacksResponse = {
+  'test-pack-a': {
+    ver: '1.0.0',
+    cnr_id: 'test-pack-a',
+    enabled: true
+  },
+  'test-pack-c': {
+    ver: '0.5.0',
+    cnr_id: 'test-pack-c',
+    enabled: false
+  }
+}
+
+const MOCK_HIT_A: Partial<AlgoliaNodePack> = {
+  objectID: 'test-pack-a',
+  id: 'test-pack-a',
+  name: 'Test Pack A',
+  description: 'A test custom node pack',
+  total_install: 5000,
+  status: 'NodeStatusActive',
+  publisher_id: 'test-publisher',
+  latest_version: '1.0.0',
+  latest_version_status: 'NodeVersionStatusActive',
+  repository_url: 'https://github.com/test/pack-a',
+  comfy_nodes: ['TestNodeA1', 'TestNodeA2'],
+  create_time: '2024-01-01T00:00:00Z',
+  update_time: '2024-06-01T00:00:00Z',
+  license: 'MIT',
+  tags: ['image', 'processing']
+}
+
+const MOCK_HIT_B: Partial<AlgoliaNodePack> = {
+  objectID: 'test-pack-b',
+  id: 'test-pack-b',
+  name: 'Test Pack B',
+  description: 'Another test custom node pack for testing search',
+  total_install: 3000,
+  status: 'NodeStatusActive',
+  publisher_id: 'another-publisher',
+  latest_version: '2.1.0',
+  latest_version_status: 'NodeVersionStatusActive',
+  repository_url: 'https://github.com/test/pack-b',
+  comfy_nodes: ['TestNodeB1'],
+  create_time: '2024-02-01T00:00:00Z',
+  update_time: '2024-07-01T00:00:00Z',
+  license: 'Apache-2.0',
+  tags: ['video', 'generation']
+}
+
+const MOCK_HIT_C: Partial<AlgoliaNodePack> = {
+  objectID: 'test-pack-c',
+  id: 'test-pack-c',
+  name: 'Test Pack C',
+  description: 'Third test pack',
+  total_install: 100,
+  status: 'NodeStatusActive',
+  publisher_id: 'test-publisher',
+  latest_version: '0.5.0',
+  latest_version_status: 'NodeVersionStatusActive',
+  repository_url: 'https://github.com/test/pack-c',
+  comfy_nodes: ['TestNodeC1'],
+  create_time: '2024-03-01T00:00:00Z',
+  update_time: '2024-05-01T00:00:00Z',
+  license: 'MIT'
+}
+
+const MOCK_ALGOLIA_RESPONSE: AlgoliaSearchResponse = {
+  results: [
+    {
+      hits: [MOCK_HIT_A, MOCK_HIT_B, MOCK_HIT_C],
+      nbHits: 3,
+      page: 0,
+      nbPages: 1,
+      hitsPerPage: 20
+    }
+  ]
+}
+
+const MOCK_ALGOLIA_PACK_B_ONLY: AlgoliaSearchResponse = {
+  results: [
+    {
+      hits: [MOCK_HIT_B],
+      nbHits: 1,
+      page: 0,
+      nbPages: 1,
+      hitsPerPage: 20
+    }
+  ]
+}
+
+const MOCK_ALGOLIA_EMPTY: AlgoliaSearchResponse = {
+  results: [
+    {
+      hits: [],
+      nbHits: 0,
+      page: 0,
+      nbPages: 0,
+      hitsPerPage: 20
+    }
+  ]
+}
+
+test.describe('ManagerDialog', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    const statsWithManager = {
+      ...mockSystemStats,
+      system: {
+        ...mockSystemStats.system,
+        argv: ['main.py', '--listen', '0.0.0.0', '--enable-manager']
+      }
+    }
+    await comfyPage.page.route('**/system_stats**', async (route) => {
+      await route.fulfill({ json: statsWithManager })
+    })
+
+    await comfyPage.featureFlags.mockServerFeatures({
+      'extension.manager.supports_v4': true
+    })
+
+    await comfyPage.page.route(
+      '**/v2/customnode/installed**',
+      async (route) => {
+        await route.fulfill({ json: MOCK_INSTALLED_PACKS })
+      }
+    )
+
+    await comfyPage.page.route(
+      '**/v2/manager/queue/status**',
+      async (route) => {
+        await route.fulfill({
+          json: {
+            history: {},
+            running_queue: [],
+            pending_queue: [],
+            installed_packs: {}
+          }
+        })
+      }
+    )
+
+    await comfyPage.page.route(
+      '**/v2/manager/queue/history**',
+      async (route) => {
+        await route.fulfill({ json: {} })
+      }
+    )
+
+    await comfyPage.page.route('**/*.algolia.net/**', async (route) => {
+      await route.fulfill({ json: MOCK_ALGOLIA_RESPONSE })
+    })
+
+    await comfyPage.page.route('**/*.algolianet.com/**', async (route) => {
+      await route.fulfill({ json: MOCK_ALGOLIA_RESPONSE })
+    })
+
+    // Mock Comfy Registry API (fallback when Algolia credentials are unavailable)
+    const registryListResponse = {
+      total: 3,
+      nodes: [MOCK_PACK_A, MOCK_PACK_B, MOCK_PACK_C],
+      page: 1,
+      limit: 64,
+      totalPages: 1
+    }
+
+    await comfyPage.page.route(
+      '**/api.comfy.org/nodes/search**',
+      async (route) => {
+        await route.fulfill({ json: registryListResponse })
+      }
+    )
+
+    await comfyPage.page.route(
+      (url) => url.hostname === 'api.comfy.org' && url.pathname === '/nodes',
+      async (route) => {
+        await route.fulfill({ json: registryListResponse })
+      }
+    )
+
+    await comfyPage.page.route(
+      '**/v2/customnode/getmappings**',
+      async (route) => {
+        await route.fulfill({ json: {} })
+      }
+    )
+
+    await comfyPage.page.route(
+      '**/v2/customnode/import_fail_info**',
+      async (route) => {
+        await route.fulfill({ json: {} })
+      }
+    )
+
+    await comfyPage.setup()
+  })
+
+  async function openManagerDialog(comfyPage: ComfyPage) {
+    await comfyPage.command.executeCommand('Comfy.OpenManagerDialog')
+  }
+
+  test('Opens the manager dialog via command', async ({ comfyPage }) => {
+    await openManagerDialog(comfyPage)
+
+    const dialog = comfyPage.page.getByRole('dialog')
+    await expect(dialog).toBeVisible()
+  })
+
+  test('Displays pack cards from search results', async ({ comfyPage }) => {
+    await openManagerDialog(comfyPage)
+
+    const dialog = comfyPage.page.getByRole('dialog')
+    await expect(dialog).toBeVisible()
+
+    await expect(dialog.getByText('Test Pack A')).toBeVisible()
+    await expect(dialog.getByText('Test Pack B')).toBeVisible()
+    await expect(dialog.getByText('Test Pack C')).toBeVisible()
+  })
+
+  test('Search filters displayed packs', async ({ comfyPage }) => {
+    await comfyPage.page.route('**/*.algolia.net/**', async (route) => {
+      await route.fulfill({ json: MOCK_ALGOLIA_PACK_B_ONLY })
+    })
+    await comfyPage.page.route('**/*.algolianet.com/**', async (route) => {
+      await route.fulfill({ json: MOCK_ALGOLIA_PACK_B_ONLY })
+    })
+    await comfyPage.page.route(
+      '**/api.comfy.org/nodes/search**',
+      async (route) => {
+        await route.fulfill({
+          json: {
+            total: 1,
+            nodes: [MOCK_PACK_B],
+            page: 1,
+            limit: 64,
+            totalPages: 1
+          }
+        })
+      }
+    )
+
+    await openManagerDialog(comfyPage)
+
+    const dialog = comfyPage.page.getByRole('dialog')
+    await expect(dialog).toBeVisible()
+
+    const searchInput = dialog.getByPlaceholder(/search/i)
+    await searchInput.fill('Test Pack B')
+
+    await expect(dialog.getByText('Test Pack B')).toBeVisible()
+    await expect(dialog.getByText('Test Pack A')).toBeHidden()
+  })
+
+  test('Clicking a pack card opens the info panel', async ({ comfyPage }) => {
+    await comfyPage.page.route(
+      '**/api.comfy.org/nodes/test-pack-a',
+      async (route) => {
+        await route.fulfill({ json: MOCK_PACK_A })
+      }
+    )
+
+    await openManagerDialog(comfyPage)
+
+    const dialog = comfyPage.page.getByRole('dialog')
+    await expect(dialog).toBeVisible()
+
+    await dialog.getByText('Test Pack A').first().click()
+
+    await expect(dialog.getByText('Test Publisher').first()).toBeVisible()
+  })
+
+  test('Left side panel navigation tabs exist', async ({ comfyPage }) => {
+    await openManagerDialog(comfyPage)
+
+    const dialog = comfyPage.page.getByRole('dialog')
+    await expect(dialog).toBeVisible()
+
+    const nav = dialog.locator('nav')
+    await expect(nav.getByText('All Extensions')).toBeVisible()
+    await expect(nav.getByText('Not Installed')).toBeVisible()
+    await expect(nav.getByText('All Installed')).toBeVisible()
+    await expect(nav.getByText('Updates Available')).toBeVisible()
+  })
+
+  test('Switching tabs changes the content view', async ({ comfyPage }) => {
+    await openManagerDialog(comfyPage)
+
+    const dialog = comfyPage.page.getByRole('dialog')
+    await expect(dialog).toBeVisible()
+
+    const nav = dialog.locator('nav')
+    await nav.getByText('All Installed').click()
+
+    await expect(dialog.getByText('Test Pack A')).toBeVisible()
+  })
+
+  test('Closes via Escape key', async ({ comfyPage }) => {
+    await openManagerDialog(comfyPage)
+
+    const dialog = comfyPage.page.getByRole('dialog')
+    await expect(dialog).toBeVisible()
+
+    await comfyPage.page.keyboard.press('Escape')
+    await expect(dialog).toBeHidden()
+  })
+
+  test('Empty search shows no results message', async ({ comfyPage }) => {
+    await comfyPage.page.route('**/*.algolia.net/**', async (route) => {
+      await route.fulfill({ json: MOCK_ALGOLIA_EMPTY })
+    })
+    await comfyPage.page.route('**/*.algolianet.com/**', async (route) => {
+      await route.fulfill({ json: MOCK_ALGOLIA_EMPTY })
+    })
+    await comfyPage.page.route(
+      '**/api.comfy.org/nodes/search**',
+      async (route) => {
+        await route.fulfill({
+          json: {
+            total: 0,
+            nodes: [],
+            page: 1,
+            limit: 64,
+            totalPages: 0
+          }
+        })
+      }
+    )
+
+    await openManagerDialog(comfyPage)
+
+    const dialog = comfyPage.page.getByRole('dialog')
+    await expect(dialog).toBeVisible()
+
+    const searchInput = dialog.getByPlaceholder(/search/i)
+    await searchInput.fill('nonexistent-pack-xyz-999')
+
+    await expect(
+      dialog.getByText(/no results found|try a different search/i).first()
+    ).toBeVisible()
+  })
+
+  test('Search mode can be switched between packs and nodes', async ({
+    comfyPage
+  }) => {
+    await openManagerDialog(comfyPage)
+
+    const dialog = comfyPage.page.getByRole('dialog')
+    await expect(dialog).toBeVisible()
+
+    const modeSelector = dialog.getByText('Node Pack').first()
+    await expect(modeSelector).toBeVisible()
+
+    await modeSelector.click()
+    const nodesOption = comfyPage.page.getByRole('option', { name: 'Nodes' })
+    await expect(nodesOption).toBeVisible()
+    await nodesOption.click()
+  })
+})
diff --git a/browser_tests/tests/dialogs/queueClearHistory.spec.ts b/browser_tests/tests/dialogs/queueClearHistory.spec.ts
new file mode 100644
index 0000000000..523f74cb7e
--- /dev/null
+++ b/browser_tests/tests/dialogs/queueClearHistory.spec.ts
@@ -0,0 +1,125 @@
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '@e2e/fixtures/ComfyPage'
+
+test.describe('Queue Clear History Dialog', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.queuePanel.overlayToggle.click()
+  })
+
+  test('Dialog opens from queue panel history actions menu', async ({
+    comfyPage
+  }) => {
+    await comfyPage.queuePanel.openClearHistoryDialog()
+
+    const dialog = comfyPage.confirmDialog.root
+    await expect(dialog).toBeVisible()
+  })
+
+  test('Dialog shows confirmation message with title, description, and assets note', async ({
+    comfyPage
+  }) => {
+    await comfyPage.queuePanel.openClearHistoryDialog()
+
+    const dialog = comfyPage.confirmDialog.root
+    await expect(dialog).toBeVisible()
+
+    await expect(
+      dialog.getByText('Clear your job queue history?')
+    ).toBeVisible()
+
+    await expect(
+      dialog.getByText(
+        'All the finished or failed jobs below will be removed from this Job queue panel.'
+      )
+    ).toBeVisible()
+
+    await expect(
+      dialog.getByText(
+        'Assets generated by these jobs won\u2019t be deleted and can always be viewed from the assets panel.'
+      )
+    ).toBeVisible()
+  })
+
+  test('Cancel button closes dialog without clearing history', async ({
+    comfyPage
+  }) => {
+    await comfyPage.queuePanel.openClearHistoryDialog()
+
+    const dialog = comfyPage.confirmDialog.root
+    await expect(dialog).toBeVisible()
+
+    let clearCalled = false
+    await comfyPage.page.route('**/api/history', (route) => {
+      if (route.request().method() === 'POST') {
+        clearCalled = true
+      }
+      return route.continue()
+    })
+
+    await dialog.getByRole('button', { name: 'Cancel' }).click()
+    await expect(dialog).toBeHidden()
+    expect(clearCalled).toBe(false)
+
+    await comfyPage.page.unroute('**/api/history')
+  })
+
+  test('Close (X) button closes dialog without clearing history', async ({
+    comfyPage
+  }) => {
+    await comfyPage.queuePanel.openClearHistoryDialog()
+
+    const dialog = comfyPage.confirmDialog.root
+    await expect(dialog).toBeVisible()
+
+    let clearCalled = false
+    await comfyPage.page.route('**/api/history', (route) => {
+      if (route.request().method() === 'POST') {
+        clearCalled = true
+      }
+      return route.continue()
+    })
+
+    await dialog.getByLabel('Close').click()
+    await expect(dialog).toBeHidden()
+    expect(clearCalled).toBe(false)
+
+    await comfyPage.page.unroute('**/api/history')
+  })
+
+  test('Confirm clears queue history and closes dialog', async ({
+    comfyPage
+  }) => {
+    await comfyPage.queuePanel.openClearHistoryDialog()
+
+    const dialog = comfyPage.confirmDialog.root
+    await expect(dialog).toBeVisible()
+
+    const clearPromise = comfyPage.page.waitForRequest(
+      (req) => req.url().includes('/api/history') && req.method() === 'POST'
+    )
+
+    await dialog.getByRole('button', { name: 'Clear' }).click()
+
+    const request = await clearPromise
+    expect(request.postDataJSON()).toEqual({ clear: true })
+
+    await expect(dialog).toBeHidden()
+  })
+
+  test('Dialog state resets after close and reopen', async ({ comfyPage }) => {
+    await comfyPage.queuePanel.openClearHistoryDialog()
+    const dialog = comfyPage.confirmDialog.root
+    await expect(dialog).toBeVisible()
+    await dialog.getByRole('button', { name: 'Cancel' }).click()
+    await expect(dialog).toBeHidden()
+
+    await comfyPage.queuePanel.openClearHistoryDialog()
+    await expect(dialog).toBeVisible()
+
+    const clearButton = dialog.getByRole('button', { name: 'Clear' })
+    await expect(clearButton).toBeVisible()
+    await expect(clearButton).toBeEnabled()
+  })
+})
diff --git a/browser_tests/tests/dialogs/settingsDialog.spec.ts b/browser_tests/tests/dialogs/settingsDialog.spec.ts
new file mode 100644
index 0000000000..802171108a
--- /dev/null
+++ b/browser_tests/tests/dialogs/settingsDialog.spec.ts
@@ -0,0 +1,183 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { mockSystemStats } from '@e2e/fixtures/data/systemStats'
+
+const MOCK_COMFYUI_VERSION = '9.99.0-e2e-test'
+
+test.describe('Settings dialog', { tag: '@ui' }, () => {
+  test('About panel renders mocked version from server', async ({
+    comfyPage
+  }) => {
+    const stats = {
+      ...mockSystemStats,
+      system: {
+        ...mockSystemStats.system,
+        comfyui_version: MOCK_COMFYUI_VERSION
+      }
+    }
+    await comfyPage.page.route('**/system_stats**', async (route) => {
+      await route.fulfill({ json: stats })
+    })
+    await comfyPage.setup()
+
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
+    await dialog.goToAboutPanel()
+
+    const aboutPanel = comfyPage.page.getByTestId('about-panel')
+    await expect(aboutPanel).toBeVisible()
+    await expect(aboutPanel).toContainText(MOCK_COMFYUI_VERSION)
+    await expect(aboutPanel).toContainText('ComfyUI_frontend')
+  })
+
+  test('Toggling a boolean setting through UI persists the value', async ({
+    comfyPage
+  }) => {
+    const settingId = 'Comfy.Validation.Workflows'
+    const initialValue = await comfyPage.settings.getSetting<boolean>(settingId)
+
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
+
+    try {
+      await dialog.searchBox.fill('Validate workflows')
+      const settingRow = dialog.root.locator(`[data-setting-id="${settingId}"]`)
+      await expect(settingRow).toBeVisible()
+
+      await settingRow.locator('.p-toggleswitch').click()
+
+      await expect
+        .poll(() => comfyPage.settings.getSetting<boolean>(settingId))
+        .toBe(!initialValue)
+    } finally {
+      await comfyPage.settings.setSetting(settingId, initialValue)
+    }
+  })
+
+  test('Can be closed via close button', async ({ comfyPage }) => {
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
+    await expect(dialog.root).toBeVisible()
+
+    await dialog.close()
+    await expect(dialog.root).toBeHidden()
+  })
+
+  test('Escape key closes dialog', async ({ comfyPage }) => {
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
+    await expect(dialog.root).toBeVisible()
+
+    await comfyPage.page.keyboard.press('Escape')
+    await expect(dialog.root).toBeHidden()
+  })
+
+  test('Search filters settings list', async ({ comfyPage }) => {
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
+
+    const settingItems = dialog.root.locator('[data-setting-id]')
+    const countBeforeSearch = await settingItems.count()
+
+    await dialog.searchBox.fill('Validate workflows')
+    await expect
+      .poll(() => settingItems.count())
+      .toBeLessThan(countBeforeSearch)
+  })
+
+  test('Search can be cleared to restore all settings', async ({
+    comfyPage
+  }) => {
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
+
+    const settingItems = dialog.root.locator('[data-setting-id]')
+    const countBeforeSearch = await settingItems.count()
+
+    await dialog.searchBox.fill('Validate workflows')
+    await expect
+      .poll(() => settingItems.count())
+      .toBeLessThan(countBeforeSearch)
+
+    await dialog.searchBox.clear()
+    await expect.poll(() => settingItems.count()).toBe(countBeforeSearch)
+  })
+
+  test('Category navigation changes content area', async ({ comfyPage }) => {
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
+
+    const firstCategory = dialog.categories.first()
+    const firstCategoryName = await firstCategory.textContent()
+    await firstCategory.click()
+    const firstContent = await dialog.contentArea.textContent()
+
+    // Find a different category to click
+    const categoryCount = await dialog.categories.count()
+    let switched = false
+    for (let i = 1; i < categoryCount; i++) {
+      const cat = dialog.categories.nth(i)
+      const catName = await cat.textContent()
+      if (catName !== firstCategoryName) {
+        await cat.click()
+        await expect
+          .poll(() => dialog.contentArea.textContent())
+          .not.toBe(firstContent)
+        switched = true
+        break
+      }
+    }
+    expect(switched).toBe(true)
+  })
+
+  test('Dropdown setting can be changed and persists', async ({
+    comfyPage
+  }) => {
+    const settingId = 'Comfy.UseNewMenu'
+    const initialValue = await comfyPage.settings.getSetting<string>(settingId)
+
+    const dialog = comfyPage.settingDialog
+    await dialog.open()
+
+    try {
+      await dialog.searchBox.fill('Use new menu')
+      const settingRow = dialog.root.locator(`[data-setting-id="${settingId}"]`)
+      await expect(settingRow).toBeVisible()
+
+      // Wait for the search filter to fully settle — PrimeVue re-renders
+      // the entire settings list after typing, and the combobox element is
+      // replaced during re-render. Wait until the filtered list stabilises
+      // before interacting with the combobox.
+      const settingItems = dialog.root.locator('[data-setting-id]')
+      await expect
+        .poll(() => settingItems.count(), { timeout: 5000 })
+        .toBeLessThanOrEqual(5)
+
+      const select = settingRow.getByRole('combobox')
+      await expect(select).toBeVisible()
+      await expect(select).toBeEnabled()
+
+      // Open the dropdown via its combobox role and verify it expanded.
+      // Retry because the PrimeVue Select may still re-render after the
+      // filter settles, causing the first click to land on a stale element.
+      await expect(async () => {
+        const expanded = await select.getAttribute('aria-expanded')
+        if (expanded !== 'true') await select.click()
+        await expect(select).toHaveAttribute('aria-expanded', 'true')
+      }).toPass({ timeout: 10_000 })
+
+      // Pick the option that is not the current value
+      const targetValue = initialValue === 'Top' ? 'Disabled' : 'Top'
+      await comfyPage.page
+        .getByRole('option', { name: targetValue, exact: true })
+        .click()
+
+      await expect
+        .poll(() => comfyPage.settings.getSetting<string>(settingId))
+        .toBe(targetValue)
+    } finally {
+      await comfyPage.settings.setSetting(settingId, initialValue)
+    }
+  })
+})
diff --git a/browser_tests/tests/dialogs/shareWorkflowDialog.spec.ts b/browser_tests/tests/dialogs/shareWorkflowDialog.spec.ts
new file mode 100644
index 0000000000..0472d0b792
--- /dev/null
+++ b/browser_tests/tests/dialogs/shareWorkflowDialog.spec.ts
@@ -0,0 +1,352 @@
+import type { Page } from '@playwright/test'
+import { expect } from '@playwright/test'
+
+import type { AssetInfo } from '@/schemas/apiSchema'
+import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+
+interface PublishRecord {
+  workflow_id: string
+  share_id: string | null
+  listed: boolean
+  publish_time: string | null
+}
+
+const PUBLISHED_RECORD: PublishRecord = {
+  workflow_id: 'wf-1',
+  share_id: 'share-abc',
+  listed: false,
+  publish_time: new Date(Date.now() + 60_000).toISOString()
+}
+
+const PRIVATE_ASSET: AssetInfo = {
+  id: 'asset-1',
+  name: 'photo.png',
+  preview_url: '',
+  storage_url: '',
+  model: false,
+  public: false,
+  in_library: false
+}
+
+const test = comfyPageFixture
+
+/**
+ * Enable the workflow_sharing_enabled server feature flag at runtime.
+ * FeatureFlagHelper.mockServerFeatures() intercepts `/api/features` but the
+ * flags are already loaded by the time tests run, so direct mutation of the
+ * reactive ref is the only reliable approach for server-side flags.
+ */
+async function enableWorkflowSharing(page: Page): Promise<void> {
+  await page.evaluate(() => {
+    const api = window.app!.api
+    api.serverFeatureFlags.value = {
+      ...api.serverFeatureFlags.value,
+      workflow_sharing_enabled: true
+    }
+  })
+}
+
+async function mockPublishStatus(
+  page: Page,
+  record: PublishRecord | null
+): Promise<void> {
+  await page.route('**/api/userdata/*/publish', async (route) => {
+    if (route.request().method() === 'GET') {
+      if (!record || !record.share_id) {
+        await route.fulfill({ status: 404, body: 'Not found' })
+      } else {
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify(record)
+        })
+      }
+    } else {
+      await route.fallback()
+    }
+  })
+}
+
+async function mockPublishWorkflow(
+  page: Page,
+  result: PublishRecord
+): Promise<void> {
+  await page.route('**/api/userdata/*/publish', async (route) => {
+    if (route.request().method() === 'POST') {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(result)
+      })
+    } else {
+      await route.fallback()
+    }
+  })
+}
+
+async function mockShareableAssets(
+  page: Page,
+  assets: AssetInfo[] = []
+): Promise<void> {
+  await page.route('**/api/assets/from-workflow', async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ assets })
+    })
+  })
+}
+
+/**
+ * Dismiss stale PrimeVue dialog masks left by cloud-mode's onboarding flow
+ * or auth-triggered modals by pressing Escape until they clear.
+ */
+async function dismissOverlays(page: Page): Promise<void> {
+  const mask = page.locator('.p-dialog-mask')
+  for (let attempt = 0; attempt < 3; attempt++) {
+    if ((await mask.count()) === 0) break
+    await page.keyboard.press('Escape')
+    await mask
+      .first()
+      .waitFor({ state: 'hidden', timeout: 2000 })
+      .catch(() => {})
+  }
+}
+
+/**
+ * Save the active workflow via the topbar Save menu action.
+ * Mocks the userdata POST endpoint to avoid real server calls in tests.
+ */
+async function saveAndWait(
+  comfyPage: {
+    page: Page
+    menu: { topbar: { saveWorkflow: (name: string) => Promise<void> } }
+  },
+  workflowName: string
+): Promise<void> {
+  const filename =
+    workflowName + (workflowName.endsWith('.json') ? '' : '.json')
+  await comfyPage.page.route(
+    /\/api\/userdata\/workflows(%2F|\/).*$/,
+    async (route) => {
+      if (route.request().method() === 'POST') {
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({
+            path: `workflows/${filename}`,
+            size: 1024,
+            modified: Date.now()
+          })
+        })
+      } else {
+        await route.fallback()
+      }
+    }
+  )
+
+  await comfyPage.menu.topbar.saveWorkflow(workflowName)
+}
+
+async function openShareDialog(page: Page): Promise<void> {
+  await enableWorkflowSharing(page)
+  await dismissOverlays(page)
+  const shareButton = page.getByRole('button', { name: 'Share workflow' })
+  await shareButton.click()
+}
+
+function getShareDialog(page: Page) {
+  return page.getByRole('dialog')
+}
+
+test.describe('Share Workflow Dialog', { tag: '@cloud' }, () => {
+  test('should show unsaved state for a new workflow', async ({
+    comfyPage
+  }) => {
+    const { page } = comfyPage
+
+    await mockPublishStatus(page, null)
+    await mockShareableAssets(page)
+    await openShareDialog(page)
+
+    const dialog = getShareDialog(page)
+    await expect(dialog).toBeVisible()
+    await expect(
+      dialog.getByRole('button', { name: /save workflow/i })
+    ).toBeVisible()
+  })
+
+  test('should show ready state with create link button', async ({
+    comfyPage
+  }) => {
+    const { page } = comfyPage
+    const workflowName = 'share-test-ready'
+
+    await saveAndWait(comfyPage, workflowName)
+
+    await mockPublishStatus(page, null)
+    await mockShareableAssets(page)
+    await openShareDialog(page)
+
+    const dialog = getShareDialog(page)
+    await expect(dialog).toBeVisible()
+    await expect(
+      dialog.getByRole('button', { name: /create a link/i })
+    ).toBeVisible()
+  })
+
+  test('should show shared state with copy URL after publishing', async ({
+    comfyPage
+  }) => {
+    const { page } = comfyPage
+    const workflowName = 'share-test-shared'
+
+    await saveAndWait(comfyPage, workflowName)
+
+    await mockPublishStatus(page, PUBLISHED_RECORD)
+    await mockShareableAssets(page)
+    await openShareDialog(page)
+
+    const dialog = getShareDialog(page)
+    await expect(dialog).toBeVisible()
+    await expect(
+      dialog.getByRole('textbox', { name: /share.*url/i })
+    ).toBeVisible()
+  })
+
+  test('should show stale state with update link button', async ({
+    comfyPage
+  }) => {
+    const { page } = comfyPage
+    const workflowName = 'share-test-stale'
+
+    await saveAndWait(comfyPage, workflowName)
+
+    const staleRecord: PublishRecord = {
+      ...PUBLISHED_RECORD,
+      publish_time: '2020-01-01T00:00:00Z'
+    }
+
+    await mockPublishStatus(page, staleRecord)
+    await mockShareableAssets(page)
+    await openShareDialog(page)
+
+    const dialog = getShareDialog(page)
+    await expect(dialog).toBeVisible()
+    await expect(
+      dialog.getByRole('button', { name: /update\s+link/i })
+    ).toBeVisible()
+  })
+
+  test('should close dialog when close button is clicked', async ({
+    comfyPage
+  }) => {
+    const { page } = comfyPage
+
+    await mockPublishStatus(page, null)
+    await mockShareableAssets(page)
+    await openShareDialog(page)
+
+    const dialog = getShareDialog(page)
+    await expect(dialog).toBeVisible()
+
+    await dialog.getByRole('button', { name: /close/i }).click()
+    await expect(dialog).toBeHidden()
+  })
+
+  test('should create link and transition to shared state', async ({
+    comfyPage
+  }) => {
+    const { page } = comfyPage
+    const workflowName = 'share-test-create'
+
+    await saveAndWait(comfyPage, workflowName)
+
+    await mockPublishStatus(page, null)
+    await mockShareableAssets(page)
+    await mockPublishWorkflow(page, PUBLISHED_RECORD)
+    await openShareDialog(page)
+
+    const dialog = getShareDialog(page)
+    const createButton = dialog.getByRole('button', { name: /create a link/i })
+    await expect(createButton).toBeVisible()
+    await createButton.click()
+
+    await expect(
+      dialog.getByRole('textbox', { name: /share.*url/i })
+    ).toBeVisible()
+  })
+
+  test('should show tab buttons when comfyHubUploadEnabled is true', async ({
+    comfyPage
+  }) => {
+    const { page } = comfyPage
+
+    await page.evaluate(() => {
+      const api = window.app!.api
+      api.serverFeatureFlags.value = {
+        ...api.serverFeatureFlags.value,
+        comfyhub_upload_enabled: true
+      }
+    })
+
+    await mockPublishStatus(page, null)
+    await mockShareableAssets(page)
+    await openShareDialog(page)
+
+    const dialog = getShareDialog(page)
+    await expect(dialog).toBeVisible()
+    await expect(dialog.getByRole('tab', { name: /share/i })).toBeVisible()
+    await expect(dialog.getByRole('tab', { name: /publish/i })).toBeVisible()
+  })
+
+  test('should switch between share link and publish tabs', async ({
+    comfyPage
+  }) => {
+    const { page } = comfyPage
+
+    await page.evaluate(() => {
+      const api = window.app!.api
+      api.serverFeatureFlags.value = {
+        ...api.serverFeatureFlags.value,
+        comfyhub_upload_enabled: true
+      }
+    })
+
+    await mockPublishStatus(page, null)
+    await mockShareableAssets(page)
+    await openShareDialog(page)
+
+    const dialog = getShareDialog(page)
+    await expect(dialog).toBeVisible()
+
+    await dialog.getByRole('tab', { name: /publish/i }).click()
+
+    const publishPanel = dialog.getByTestId(TestIds.dialogs.publishTabPanel)
+    await expect(publishPanel).toBeVisible()
+
+    await dialog.getByRole('tab', { name: /share/i }).click()
+    await expect(publishPanel).toBeHidden()
+  })
+
+  test('should require acknowledgment before publishing private assets', async ({
+    comfyPage
+  }) => {
+    const { page } = comfyPage
+    const workflowName = 'share-test-ack'
+
+    await saveAndWait(comfyPage, workflowName)
+
+    await mockPublishStatus(page, null)
+    await mockShareableAssets(page, [PRIVATE_ASSET])
+    await openShareDialog(page)
+
+    const dialog = getShareDialog(page)
+    const createButton = dialog.getByRole('button', { name: /create a link/i })
+    await expect(createButton).toBeDisabled()
+
+    await dialog.getByRole('checkbox').check()
+    await expect(createButton).toBeEnabled()
+  })
+})
diff --git a/browser_tests/tests/dialogs/signInDialog.spec.ts b/browser_tests/tests/dialogs/signInDialog.spec.ts
new file mode 100644
index 0000000000..64ccbb207d
--- /dev/null
+++ b/browser_tests/tests/dialogs/signInDialog.spec.ts
@@ -0,0 +1,93 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { SignInDialog } from '@e2e/fixtures/components/SignInDialog'
+
+test.describe('Sign In dialog', { tag: '@ui' }, () => {
+  let dialog: SignInDialog
+
+  test.beforeEach(async ({ comfyPage }) => {
+    dialog = new SignInDialog(comfyPage.page)
+    await dialog.open()
+  })
+
+  test('Should open and show the sign-in form by default', async () => {
+    await expect(
+      dialog.root.getByRole('heading', { name: 'Log in to your account' })
+    ).toBeVisible()
+    await expect(dialog.emailInput).toBeVisible()
+    await expect(dialog.passwordInput).toBeVisible()
+    await expect(dialog.signInButton).toBeVisible()
+  })
+
+  test('Should toggle from sign-in to sign-up form', async () => {
+    await dialog.signUpLink.click()
+
+    await expect(
+      dialog.root.getByRole('heading', { name: 'Create an account' })
+    ).toBeVisible()
+    await expect(dialog.signUpEmailInput).toBeVisible()
+    await expect(dialog.signUpPasswordInput).toBeVisible()
+    await expect(dialog.signUpConfirmPasswordInput).toBeVisible()
+    await expect(dialog.signUpButton).toBeVisible()
+  })
+
+  test('Should toggle back from sign-up to sign-in form', async () => {
+    await dialog.signUpLink.click()
+    await expect(
+      dialog.root.getByRole('heading', { name: 'Create an account' })
+    ).toBeVisible()
+
+    await dialog.signInLink.click()
+    await expect(
+      dialog.root.getByRole('heading', { name: 'Log in to your account' })
+    ).toBeVisible()
+    await expect(dialog.emailInput).toBeVisible()
+    await expect(dialog.passwordInput).toBeVisible()
+  })
+
+  test('Should navigate to the API Key form and back', async () => {
+    await dialog.apiKeyButton.click()
+
+    await expect(dialog.apiKeyHeading).toBeVisible()
+    await expect(dialog.apiKeyInput).toBeVisible()
+
+    await dialog.backButton.click()
+    await expect(
+      dialog.root.getByRole('heading', { name: 'Log in to your account' })
+    ).toBeVisible()
+  })
+
+  test('Should display Terms of Service and Privacy Policy links', async () => {
+    await expect(dialog.termsLink).toBeVisible()
+    await expect(dialog.termsLink).toHaveAttribute(
+      'href',
+      'https://www.comfy.org/terms-of-service'
+    )
+
+    await expect(dialog.privacyLink).toBeVisible()
+    await expect(dialog.privacyLink).toHaveAttribute(
+      'href',
+      'https://www.comfy.org/privacy'
+    )
+  })
+
+  test('Should display the "Or continue with" divider and API key button', async () => {
+    await expect(dialog.dividerText).toBeVisible()
+    await expect(dialog.apiKeyButton).toBeVisible()
+  })
+
+  test('Should show forgot password link on sign-in form', async () => {
+    await expect(dialog.forgotPasswordLink).toBeVisible()
+  })
+
+  test('Should close dialog via close button', async () => {
+    await dialog.closeButton.click()
+    await expect(dialog.root).toBeHidden()
+  })
+
+  test('Should close dialog via Escape key', async ({ comfyPage }) => {
+    await comfyPage.page.keyboard.press('Escape')
+    await expect(dialog.root).toBeHidden()
+  })
+})
diff --git a/browser_tests/tests/domWidget.spec.ts b/browser_tests/tests/domWidget.spec.ts
index d8e2dab9b3..1611d364ab 100644
--- a/browser_tests/tests/domWidget.spec.ts
+++ b/browser_tests/tests/domWidget.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -10,7 +10,7 @@ test.describe('DOM Widget', { tag: '@widget' }, () => {
   test('Collapsed multiline textarea is not visible', async ({ comfyPage }) => {
     await comfyPage.workflow.loadWorkflow('widgets/collapsed_multiline')
     const textareaWidget = comfyPage.page.locator('.comfy-multiline-input')
-    await expect(textareaWidget).not.toBeVisible()
+    await expect(textareaWidget).toBeHidden()
   })
 
   test('Multiline textarea correctly collapses', async ({ comfyPage }) => {
@@ -25,8 +25,8 @@ test.describe('DOM Widget', { tag: '@widget' }, () => {
     for (const node of nodes) {
       await node.click('collapse')
     }
-    await expect(firstMultiline).not.toBeVisible()
-    await expect(lastMultiline).not.toBeVisible()
+    await expect(firstMultiline).toBeHidden()
+    await expect(lastMultiline).toBeHidden()
   })
 
   test(
@@ -35,14 +35,14 @@ test.describe('DOM Widget', { tag: '@widget' }, () => {
     async ({ comfyPage }) => {
       await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
       await comfyPage.command.executeCommand('Workspace.ToggleFocusMode')
-      await comfyPage.nextFrame()
+      await expect(comfyPage.menu.sideToolbar).toBeHidden()
       await expect(comfyPage.canvas).toHaveScreenshot('focus-mode-on.png')
     }
   )
 
   // No DOM widget should be created by creation of interim LGraphNode objects.
   test('Copy node with DOM widget by dragging + alt', async ({ comfyPage }) => {
-    const initialCount = await comfyPage.getDOMWidgetCount()
+    const initialCount = await comfyPage.domWidgets.count()
 
     // TextEncodeNode1
     await comfyPage.page.mouse.move(618, 191)
@@ -52,49 +52,6 @@ test.describe('DOM Widget', { tag: '@widget' }, () => {
     await comfyPage.page.mouse.up()
     await comfyPage.page.keyboard.up('Alt')
 
-    const finalCount = await comfyPage.getDOMWidgetCount()
-    expect(finalCount).toBe(initialCount + 1)
-  })
-
-  test('should reposition when layout changes', async ({ comfyPage }) => {
-    test.skip(
-      true,
-      'Only recalculates when the Canvas size changes, need to recheck the logic'
-    )
-    // --- setup ---
-
-    const textareaWidget = comfyPage.page
-      .locator('.comfy-multiline-input')
-      .first()
-    await expect(textareaWidget).toBeVisible()
-
-    await comfyPage.settings.setSetting('Comfy.Sidebar.Size', 'small')
-    await comfyPage.settings.setSetting('Comfy.Sidebar.Location', 'left')
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.nextFrame()
-
-    let oldPos: [number, number]
-    const checkBboxChange = async () => {
-      const boudningBox = (await textareaWidget.boundingBox())!
-      expect(boudningBox).not.toBeNull()
-      const position: [number, number] = [boudningBox.x, boudningBox.y]
-      expect(position).not.toEqual(oldPos)
-      oldPos = position
-    }
-    await checkBboxChange()
-
-    // --- test ---
-
-    await comfyPage.settings.setSetting('Comfy.Sidebar.Size', 'normal')
-    await comfyPage.nextFrame()
-    await checkBboxChange()
-
-    await comfyPage.settings.setSetting('Comfy.Sidebar.Location', 'right')
-    await comfyPage.nextFrame()
-    await checkBboxChange()
-
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Bottom')
-    await comfyPage.nextFrame()
-    await checkBboxChange()
+    await expect(comfyPage.domWidgets).toHaveCount(initialCount + 1)
   })
 })
diff --git a/browser_tests/tests/errorDialog.spec.ts b/browser_tests/tests/errorDialog.spec.ts
new file mode 100644
index 0000000000..218cdd7a74
--- /dev/null
+++ b/browser_tests/tests/errorDialog.spec.ts
@@ -0,0 +1,195 @@
+import type { Page } from '@playwright/test'
+
+import { expect } from '@playwright/test'
+
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+import {
+  interceptClipboardWrite,
+  getClipboardText
+} from '@e2e/helpers/clipboardSpy'
+
+async function triggerConfigureError(
+  comfyPage: ComfyPage,
+  message = 'Error on configure!'
+) {
+  await comfyPage.page.evaluate((msg: string) => {
+    const graph = window.graph!
+    ;(graph as { configure: () => void }).configure = () => {
+      throw new Error(msg)
+    }
+  }, message)
+
+  await comfyPage.workflow.loadWorkflow('default')
+
+  return comfyPage.page.getByTestId(TestIds.dialogs.errorDialog)
+}
+
+async function waitForPopupNavigation(page: Page, action: () => Promise<void>) {
+  const popupPromise = page.waitForEvent('popup')
+  await action()
+  const popup = await popupPromise
+  await popup.waitForLoadState()
+  return popup
+}
+
+test.describe('Error dialog', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+  })
+
+  test('Should display an error dialog when graph configure fails', async ({
+    comfyPage
+  }) => {
+    const errorDialog = await triggerConfigureError(comfyPage)
+    await expect(errorDialog).toBeVisible()
+  })
+
+  test('Should display an error dialog when prompt execution fails', async ({
+    comfyPage
+  }) => {
+    await comfyPage.page.evaluate(async () => {
+      const app = window.app!
+      app.api.queuePrompt = () => {
+        throw new Error('Error on queuePrompt!')
+      }
+      await app.queuePrompt(0)
+    })
+    const errorDialog = comfyPage.page.getByTestId(TestIds.dialogs.errorDialog)
+    await expect(errorDialog).toBeVisible()
+  })
+
+  test('Should display error message body', async ({ comfyPage }) => {
+    const errorDialog = await triggerConfigureError(
+      comfyPage,
+      'Test error message body'
+    )
+    await expect(errorDialog).toBeVisible()
+    await expect(errorDialog).toContainText('Test error message body')
+  })
+
+  test('Should show report section when "Show Report" is clicked', async ({
+    comfyPage
+  }) => {
+    const errorDialog = await triggerConfigureError(comfyPage)
+    await expect(errorDialog).toBeVisible()
+    await expect(errorDialog.locator('pre')).toBeHidden()
+
+    await errorDialog.getByTestId(TestIds.dialogs.errorDialogShowReport).click()
+
+    const reportPre = errorDialog.locator('pre')
+    await expect(reportPre).toBeVisible()
+    await expect(reportPre).toHaveText(/\S/)
+    await expect(
+      errorDialog.getByTestId(TestIds.dialogs.errorDialogShowReport)
+    ).toBeHidden()
+  })
+
+  test('Should copy report to clipboard when "Copy to Clipboard" is clicked', async ({
+    comfyPage
+  }) => {
+    const errorDialog = await triggerConfigureError(comfyPage)
+    await expect(errorDialog).toBeVisible()
+
+    await errorDialog.getByTestId(TestIds.dialogs.errorDialogShowReport).click()
+    await expect(errorDialog.locator('pre')).toBeVisible()
+
+    await interceptClipboardWrite(comfyPage.page)
+
+    await errorDialog.getByTestId(TestIds.dialogs.errorDialogCopyReport).click()
+
+    const reportText = await errorDialog.locator('pre').textContent()
+    await expect
+      .poll(async () => await getClipboardText(comfyPage.page))
+      .toBe(reportText)
+  })
+
+  test('Should open GitHub issues search when "Find Issues" is clicked', async ({
+    comfyPage
+  }) => {
+    const errorDialog = await triggerConfigureError(comfyPage)
+    await expect(errorDialog).toBeVisible()
+
+    const popup = await waitForPopupNavigation(comfyPage.page, () =>
+      errorDialog.getByTestId(TestIds.dialogs.errorDialogFindIssues).click()
+    )
+
+    const url = new URL(popup.url())
+    expect(url.hostname).toBe('github.com')
+    expect(url.pathname).toContain('/issues')
+
+    await popup.close()
+  })
+
+  test('Should open contact support when "Help Fix This" is clicked', async ({
+    comfyPage
+  }) => {
+    const errorDialog = await triggerConfigureError(comfyPage)
+    await expect(errorDialog).toBeVisible()
+
+    const popup = await waitForPopupNavigation(comfyPage.page, () =>
+      errorDialog.getByTestId(TestIds.dialogs.errorDialogContactSupport).click()
+    )
+
+    const url = new URL(popup.url())
+    expect(url.hostname).toBe('support.comfy.org')
+
+    await popup.close()
+  })
+
+  test('Should display extension file hint when available', async ({
+    comfyPage
+  }) => {
+    await comfyPage.page.evaluate(() => {
+      const error = new Error('Extension error!')
+      ;(error as Error & { fileName: string }).fileName =
+        '/extensions/my-custom-extension/main.js'
+
+      window.app!.extensionManager.dialog.showErrorDialog(error)
+    })
+
+    const errorDialog = comfyPage.page.getByTestId(TestIds.dialogs.errorDialog)
+    await expect(errorDialog).toBeVisible()
+
+    await expect(
+      errorDialog.getByText('/extensions/my-custom-extension/main.js')
+    ).toBeVisible()
+    await expect(
+      errorDialog.getByText('This may be due to the following script')
+    ).toBeVisible()
+  })
+
+  test('Should display string error messages', async ({ comfyPage }) => {
+    await comfyPage.page.evaluate(() => {
+      window.app!.extensionManager.dialog.showErrorDialog(
+        'Something went wrong',
+        {
+          title: 'Custom Error Title'
+        }
+      )
+    })
+
+    const errorDialog = comfyPage.page.getByTestId(TestIds.dialogs.errorDialog)
+    await expect(errorDialog).toBeVisible()
+
+    await expect(errorDialog.getByText('Custom Error Title')).toBeVisible()
+    await expect(errorDialog.getByText('Something went wrong')).toBeVisible()
+  })
+
+  test('Should display default title when no title provided', async ({
+    comfyPage
+  }) => {
+    await comfyPage.page.evaluate(() => {
+      window.app!.extensionManager.dialog.showErrorDialog(
+        'A simple string error'
+      )
+    })
+
+    const errorDialog = comfyPage.page.getByTestId(TestIds.dialogs.errorDialog)
+    await expect(errorDialog).toBeVisible()
+
+    await expect(errorDialog.getByText('Unknown Error')).toBeVisible()
+    await expect(errorDialog.getByText('A simple string error')).toBeVisible()
+  })
+})
diff --git a/browser_tests/tests/errorOverlay.spec.ts b/browser_tests/tests/errorOverlay.spec.ts
new file mode 100644
index 0000000000..6ebfee36ab
--- /dev/null
+++ b/browser_tests/tests/errorOverlay.spec.ts
@@ -0,0 +1,247 @@
+import type { Page } from '@playwright/test'
+
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+import { cleanupFakeModel } from '@e2e/tests/propertiesPanel/ErrorsTabHelper'
+
+test.describe('Error overlay', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting(
+      'Comfy.RightSidePanel.ShowErrorsTab',
+      true
+    )
+  })
+
+  function getOverlay(page: Page) {
+    return page.getByTestId(TestIds.dialogs.errorOverlay)
+  }
+
+  function getSeeErrorsButton(page: Page) {
+    return getOverlay(page).getByTestId(TestIds.dialogs.errorOverlaySeeErrors)
+  }
+
+  test.describe('Labels', () => {
+    test('Should display singular error count label for single error', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
+
+      await expect(getOverlay(comfyPage.page)).toBeVisible()
+      await expect(getOverlay(comfyPage.page)).toContainText(/1 ERROR/i)
+    })
+
+    test('Should display "Show missing nodes" button for missing node errors', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
+
+      await expect(getOverlay(comfyPage.page)).toBeVisible()
+      await expect(getSeeErrorsButton(comfyPage.page)).toContainText(
+        /Show missing nodes/i
+      )
+    })
+
+    test('Should display "Show missing models" button for missing model errors', async ({
+      comfyPage
+    }) => {
+      await cleanupFakeModel(comfyPage)
+
+      await comfyPage.workflow.loadWorkflow('missing/missing_models')
+
+      await expect(getOverlay(comfyPage.page)).toBeVisible()
+      await expect(getSeeErrorsButton(comfyPage.page)).toContainText(
+        /Show missing models/i
+      )
+    })
+
+    test('Should display "Show missing inputs" button for missing media errors', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('missing/missing_media_single')
+
+      await expect(getOverlay(comfyPage.page)).toBeVisible()
+      await expect(getSeeErrorsButton(comfyPage.page)).toContainText(
+        /Show missing inputs/i
+      )
+    })
+
+    test('Should display generic "See Errors" button for multiple error types', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('missing/missing_nodes_and_media')
+
+      await expect(getOverlay(comfyPage.page)).toBeVisible()
+      await expect(getSeeErrorsButton(comfyPage.page)).toContainText(
+        /See Errors/i
+      )
+    })
+  })
+
+  test.describe('Persistence', () => {
+    test('Does not resurface missing nodes on undo/redo', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
+
+      const errorOverlay = getOverlay(comfyPage.page)
+      await expect(errorOverlay).toBeVisible()
+      await errorOverlay
+        .getByTestId(TestIds.dialogs.errorOverlayDismiss)
+        .click()
+      await expect(errorOverlay).toBeHidden()
+
+      await comfyPage.canvas.click()
+      await comfyPage.nextFrame()
+      await comfyPage.page.keyboard.press('Control+a')
+      await comfyPage.page.mouse.move(400, 300)
+      await comfyPage.page.mouse.down()
+      await comfyPage.page.mouse.move(450, 350, { steps: 5 })
+      await comfyPage.page.mouse.up()
+      await comfyPage.nextFrame()
+
+      await comfyPage.keyboard.undo()
+      await expect(errorOverlay).toBeHidden()
+
+      await comfyPage.keyboard.redo()
+      await expect(errorOverlay).toBeHidden()
+    })
+
+    test('Does not resurface error overlay when switching back to workflow with missing nodes', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Workflow.WorkflowTabsPosition',
+        'Sidebar'
+      )
+      await comfyPage.menu.workflowsTab.open()
+
+      await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
+
+      const errorOverlay = getOverlay(comfyPage.page)
+      await expect(errorOverlay).toBeVisible()
+
+      await errorOverlay
+        .getByTestId(TestIds.dialogs.errorOverlayDismiss)
+        .click()
+      await expect(errorOverlay).toBeHidden()
+
+      await comfyPage.menu.workflowsTab.open()
+      await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
+
+      await comfyPage.menu.workflowsTab.switchToWorkflow('missing_nodes')
+
+      await expect(errorOverlay).toBeHidden()
+    })
+  })
+
+  test.describe('See Errors flow', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setup()
+    })
+
+    async function triggerExecutionError(comfyPage: {
+      canvasOps: { disconnectEdge: () => Promise<void> }
+      page: Page
+      command: { executeCommand: (cmd: string) => Promise<void> }
+    }) {
+      await comfyPage.canvasOps.disconnectEdge()
+      await comfyPage.page.keyboard.press('Escape')
+      await comfyPage.command.executeCommand('Comfy.QueuePrompt')
+    }
+
+    test('Error overlay appears on execution error', async ({ comfyPage }) => {
+      await triggerExecutionError(comfyPage)
+
+      await expect(getOverlay(comfyPage.page)).toBeVisible()
+    })
+
+    test('Error overlay shows error message', async ({ comfyPage }) => {
+      await triggerExecutionError(comfyPage)
+
+      const overlay = getOverlay(comfyPage.page)
+      await expect(overlay).toBeVisible()
+      await expect(overlay).toHaveText(/\S/)
+    })
+
+    test('"See Errors" opens right side panel', async ({ comfyPage }) => {
+      await triggerExecutionError(comfyPage)
+
+      const overlay = getOverlay(comfyPage.page)
+      await expect(overlay).toBeVisible()
+
+      await overlay.getByTestId(TestIds.dialogs.errorOverlaySeeErrors).click()
+
+      await expect(overlay).toBeHidden()
+      await expect(comfyPage.page.getByTestId('properties-panel')).toBeVisible()
+    })
+
+    test('"See Errors" dismisses the overlay', async ({ comfyPage }) => {
+      await triggerExecutionError(comfyPage)
+
+      const overlay = getOverlay(comfyPage.page)
+      await expect(overlay).toBeVisible()
+
+      await overlay.getByTestId(TestIds.dialogs.errorOverlaySeeErrors).click()
+
+      await expect(overlay).toBeHidden()
+    })
+
+    test('"Dismiss" closes overlay without opening panel', async ({
+      comfyPage
+    }) => {
+      await triggerExecutionError(comfyPage)
+
+      const overlay = getOverlay(comfyPage.page)
+      await expect(overlay).toBeVisible()
+
+      await overlay.getByTestId(TestIds.dialogs.errorOverlayDismiss).click()
+
+      await expect(overlay).toBeHidden()
+      await expect(comfyPage.page.getByTestId('properties-panel')).toBeHidden()
+    })
+
+    test('Close button (X) dismisses overlay', async ({ comfyPage }) => {
+      await triggerExecutionError(comfyPage)
+
+      const overlay = getOverlay(comfyPage.page)
+      await expect(overlay).toBeVisible()
+
+      await overlay.getByRole('button', { name: /close/i }).click()
+
+      await expect(overlay).toBeHidden()
+    })
+  })
+
+  test.describe('Count independence from node selection', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await cleanupFakeModel(comfyPage)
+    })
+
+    test.afterEach(async ({ comfyPage }) => {
+      await cleanupFakeModel(comfyPage)
+    })
+
+    test('missing model count stays constant when a node is selected', async ({
+      comfyPage
+    }) => {
+      // Regression: ErrorOverlay previously read the selection-filtered
+      // missingModelGroups from useErrorGroups, so selecting one of two
+      // missing-model nodes would shrink the overlay label from
+      // "2 required models are missing" to "1". The overlay must show
+      // the workflow total regardless of canvas selection.
+      await comfyPage.workflow.loadWorkflow('missing/missing_models_distinct')
+
+      const overlay = getOverlay(comfyPage.page)
+      await expect(overlay).toBeVisible()
+      await expect(overlay).toContainText(/2 required models are missing/i)
+
+      const node = await comfyPage.nodeOps.getNodeRefById('1')
+      await node.click('title')
+
+      await expect(overlay).toContainText(/2 required models are missing/i)
+    })
+  })
+})
diff --git a/browser_tests/tests/errorOverlaySeeErrors.spec.ts b/browser_tests/tests/errorOverlaySeeErrors.spec.ts
deleted file mode 100644
index 0f7a4ed2a3..0000000000
--- a/browser_tests/tests/errorOverlaySeeErrors.spec.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import type { Page } from '@playwright/test'
-
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
-
-test.describe('Error overlay See Errors flow', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting(
-      'Comfy.RightSidePanel.ShowErrorsTab',
-      true
-    )
-    await comfyPage.setup()
-  })
-
-  async function triggerExecutionError(comfyPage: {
-    canvasOps: { disconnectEdge: () => Promise<void> }
-    page: Page
-    command: { executeCommand: (cmd: string) => Promise<void> }
-  }) {
-    await comfyPage.canvasOps.disconnectEdge()
-    await comfyPage.page.keyboard.press('Escape')
-    await comfyPage.command.executeCommand('Comfy.QueuePrompt')
-  }
-
-  test('Error overlay appears on execution error', async ({ comfyPage }) => {
-    await triggerExecutionError(comfyPage)
-
-    await expect(
-      comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
-    ).toBeVisible()
-  })
-
-  test('Error overlay shows error message', async ({ comfyPage }) => {
-    await triggerExecutionError(comfyPage)
-
-    const overlay = comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
-    await expect(overlay).toBeVisible()
-    await expect(overlay).toHaveText(/\S/)
-  })
-
-  test('"See Errors" opens right side panel', async ({ comfyPage }) => {
-    await triggerExecutionError(comfyPage)
-
-    const overlay = comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
-    await expect(overlay).toBeVisible()
-
-    await overlay.getByTestId(TestIds.dialogs.errorOverlaySeeErrors).click()
-
-    await expect(comfyPage.page.getByTestId('properties-panel')).toBeVisible()
-  })
-
-  test('"See Errors" dismisses the overlay', async ({ comfyPage }) => {
-    await triggerExecutionError(comfyPage)
-
-    const overlay = comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
-    await expect(overlay).toBeVisible()
-
-    await overlay.getByTestId(TestIds.dialogs.errorOverlaySeeErrors).click()
-
-    await expect(overlay).not.toBeVisible()
-  })
-
-  test('"Dismiss" closes overlay without opening panel', async ({
-    comfyPage
-  }) => {
-    await triggerExecutionError(comfyPage)
-
-    const overlay = comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
-    await expect(overlay).toBeVisible()
-
-    await overlay.getByTestId(TestIds.dialogs.errorOverlayDismiss).click()
-
-    await expect(overlay).not.toBeVisible()
-    await expect(
-      comfyPage.page.getByTestId('properties-panel')
-    ).not.toBeVisible()
-  })
-
-  test('Close button (X) dismisses overlay', async ({ comfyPage }) => {
-    await triggerExecutionError(comfyPage)
-
-    const overlay = comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
-    await expect(overlay).toBeVisible()
-
-    await overlay.getByRole('button', { name: /close/i }).click()
-
-    await expect(overlay).not.toBeVisible()
-  })
-})
diff --git a/browser_tests/tests/execution.spec.ts b/browser_tests/tests/execution.spec.ts
index c5624f797f..32bf42394c 100644
--- a/browser_tests/tests/execution.spec.ts
+++ b/browser_tests/tests/execution.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -49,18 +49,28 @@ test.describe(
       const input = await comfyPage.nodeOps.getNodeRefById(3)
       const output1 = await comfyPage.nodeOps.getNodeRefById(1)
       const output2 = await comfyPage.nodeOps.getNodeRefById(4)
-      expect(await (await input.getWidget(0)).getValue()).toBe('foo')
-      expect(await (await output1.getWidget(0)).getValue()).toBe('')
-      expect(await (await output2.getWidget(0)).getValue()).toBe('')
+      await expect
+        .poll(async () => (await input.getWidget(0)).getValue())
+        .toBe('foo')
+      await expect
+        .poll(async () => (await output1.getWidget(0)).getValue())
+        .toBe('')
+      await expect
+        .poll(async () => (await output2.getWidget(0)).getValue())
+        .toBe('')
 
       await output1.click('title')
 
       await comfyPage.command.executeCommand('Comfy.QueueSelectedOutputNodes')
-      await expect(async () => {
-        expect(await (await input.getWidget(0)).getValue()).toBe('foo')
-        expect(await (await output1.getWidget(0)).getValue()).toBe('foo')
-        expect(await (await output2.getWidget(0)).getValue()).toBe('')
-      }).toPass({ timeout: 2_000 })
+      await expect
+        .poll(async () => (await input.getWidget(0)).getValue())
+        .toBe('foo')
+      await expect
+        .poll(async () => (await output1.getWidget(0)).getValue())
+        .toBe('foo')
+      await expect
+        .poll(async () => (await output2.getWidget(0)).getValue())
+        .toBe('')
     })
   }
 )
diff --git a/browser_tests/tests/extensionAPI.spec.ts b/browser_tests/tests/extensionAPI.spec.ts
index 97d4424c95..cb41720b6d 100644
--- a/browser_tests/tests/extensionAPI.spec.ts
+++ b/browser_tests/tests/extensionAPI.spec.ts
@@ -1,8 +1,8 @@
 import { expect } from '@playwright/test'
 
-import type { Settings } from '../../src/schemas/apiSchema'
-import type { SettingParams } from '../../src/platform/settings/types'
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import type { Settings } from '@/schemas/apiSchema'
+import type { SettingParams } from '@/platform/settings/types'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 /**
  * Type helper for test settings with arbitrary IDs.
@@ -13,10 +13,6 @@ import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 type TestSettingId = keyof Settings
 
 test.describe('Topbar commands', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-  })
-
   test('Should allow registering topbar commands', async ({ comfyPage }) => {
     await comfyPage.page.evaluate(() => {
       window.app!.registerExtension({
@@ -40,7 +36,9 @@ test.describe('Topbar commands', () => {
     })
 
     await comfyPage.menu.topbar.triggerTopbarCommand(['ext', 'foo-command'])
-    expect(await comfyPage.page.evaluate(() => window.foo)).toBe(true)
+    await expect
+      .poll(() => comfyPage.page.evaluate(() => window.foo))
+      .toBe(true)
   })
 
   test('Should not allow register command defined in other extension', async ({
@@ -60,7 +58,7 @@ test.describe('Topbar commands', () => {
     })
 
     const menuItem = comfyPage.menu.topbar.getMenuItem('ext')
-    expect(await menuItem.count()).toBe(0)
+    await expect(menuItem).toHaveCount(0)
   })
 
   test('Should allow registering keybindings', async ({ comfyPage }) => {
@@ -86,7 +84,9 @@ test.describe('Topbar commands', () => {
     })
 
     await comfyPage.page.keyboard.press('k')
-    expect(await comfyPage.page.evaluate(() => window.TestCommand)).toBe(true)
+    await expect
+      .poll(() => comfyPage.page.evaluate(() => window.TestCommand))
+      .toBe(true)
   })
 
   test.describe('Settings', () => {
@@ -109,16 +109,20 @@ test.describe('Topbar commands', () => {
         })
       })
       // onChange is called when the setting is first added
-      expect(await comfyPage.page.evaluate(() => window.changeCount)).toBe(1)
-      expect(await comfyPage.settings.getSetting('TestSetting')).toBe(
-        'Hello, world!'
-      )
+      await expect
+        .poll(() => comfyPage.page.evaluate(() => window.changeCount))
+        .toBe(1)
+      await expect
+        .poll(() => comfyPage.settings.getSetting('TestSetting'))
+        .toBe('Hello, world!')
 
       await comfyPage.settings.setSetting('TestSetting', 'Hello, universe!')
-      expect(await comfyPage.settings.getSetting('TestSetting')).toBe(
-        'Hello, universe!'
-      )
-      expect(await comfyPage.page.evaluate(() => window.changeCount)).toBe(2)
+      await expect
+        .poll(() => comfyPage.settings.getSetting('TestSetting'))
+        .toBe('Hello, universe!')
+      await expect
+        .poll(() => comfyPage.page.evaluate(() => window.changeCount))
+        .toBe(2)
     })
 
     test('Should allow setting boolean settings', async ({ comfyPage }) => {
@@ -140,17 +144,21 @@ test.describe('Topbar commands', () => {
         })
       })
 
-      expect(await comfyPage.settings.getSetting('Comfy.TestSetting')).toBe(
-        false
-      )
-      expect(await comfyPage.page.evaluate(() => window.changeCount)).toBe(1)
+      await expect
+        .poll(() => comfyPage.settings.getSetting('Comfy.TestSetting'))
+        .toBe(false)
+      await expect
+        .poll(() => comfyPage.page.evaluate(() => window.changeCount))
+        .toBe(1)
 
       await comfyPage.settingDialog.open()
       await comfyPage.settingDialog.toggleBooleanSetting('Comfy.TestSetting')
-      expect(await comfyPage.settings.getSetting('Comfy.TestSetting')).toBe(
-        true
-      )
-      expect(await comfyPage.page.evaluate(() => window.changeCount)).toBe(2)
+      await expect
+        .poll(() => comfyPage.settings.getSetting('Comfy.TestSetting'))
+        .toBe(true)
+      await expect
+        .poll(() => comfyPage.page.evaluate(() => window.changeCount))
+        .toBe(2)
     })
 
     test.describe('Passing through attrs to setting components', () => {
@@ -228,12 +236,15 @@ test.describe('Topbar commands', () => {
             .getByText('TestSetting Test')
             .locator(selector)
 
-          const isDisabled = await component.evaluate((el) =>
-            el.tagName === 'INPUT'
-              ? (el as HTMLInputElement).disabled
-              : el.classList.contains('p-disabled')
-          )
-          expect(isDisabled).toBe(true)
+          await expect
+            .poll(() =>
+              component.evaluate((el) =>
+                el.tagName === 'INPUT'
+                  ? (el as HTMLInputElement).disabled
+                  : el.classList.contains('p-disabled')
+              )
+            )
+            .toBe(true)
         })
       }
     })
@@ -258,7 +269,7 @@ test.describe('Topbar commands', () => {
       await comfyPage.settingDialog.goToAboutPanel()
       const badge = comfyPage.page.locator('.about-badge').last()
       expect(badge).toBeDefined()
-      expect(await badge.textContent()).toContain('Test Badge')
+      await expect(badge).toContainText('Test Badge')
     })
   })
 
@@ -276,11 +287,13 @@ test.describe('Topbar commands', () => {
       })
 
       await comfyPage.nodeOps.fillPromptDialog('Hello, world!')
-      expect(
-        await comfyPage.page.evaluate(
-          () => (window as unknown as Record<string, unknown>)['value']
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(
+            () => (window as unknown as Record<string, unknown>)['value']
+          )
         )
-      ).toBe('Hello, world!')
+        .toBe('Hello, world!')
     })
 
     test('Should allow showing a confirmation dialog', async ({
@@ -298,11 +311,13 @@ test.describe('Topbar commands', () => {
       })
 
       await comfyPage.confirmDialog.click('confirm')
-      expect(
-        await comfyPage.page.evaluate(
-          () => (window as unknown as Record<string, unknown>)['value']
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(
+            () => (window as unknown as Record<string, unknown>)['value']
+          )
         )
-      ).toBe(true)
+        .toBe(true)
     })
 
     test('Should allow dismissing a dialog', async ({ comfyPage }) => {
@@ -319,11 +334,13 @@ test.describe('Topbar commands', () => {
       })
 
       await comfyPage.confirmDialog.click('reject')
-      expect(
-        await comfyPage.page.evaluate(
-          () => (window as unknown as Record<string, unknown>)['value']
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(
+            () => (window as unknown as Record<string, unknown>)['value']
+          )
         )
-      ).toBeNull()
+        .toBeNull()
     })
   })
 
@@ -363,14 +380,16 @@ test.describe('Topbar commands', () => {
       )
       await toolboxButton.click()
 
-      expect(
-        await comfyPage.page.evaluate(
-          () =>
-            (window as unknown as Record<string, unknown>)[
-              'selectionCommandExecuted'
-            ]
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(
+            () =>
+              (window as unknown as Record<string, unknown>)[
+                'selectionCommandExecuted'
+              ]
+          )
         )
-      ).toBe(true)
+        .toBe(true)
     })
   })
 })
diff --git a/browser_tests/tests/featureFlags.spec.ts b/browser_tests/tests/featureFlags.spec.ts
index 3f81a924ec..bea1875aea 100644
--- a/browser_tests/tests/featureFlags.spec.ts
+++ b/browser_tests/tests/featureFlags.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -59,31 +59,30 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
       { timeout: 10000 }
     )
 
-    // Get the captured messages
-    const messages = await newPage.evaluate(() => window.__capturedMessages)
-
     // Verify client sent feature flags
-    expect(messages!.clientFeatureFlags).toBeTruthy()
-    expect(messages!.clientFeatureFlags).toHaveProperty('type', 'feature_flags')
-    expect(messages!.clientFeatureFlags).toHaveProperty('data')
-    expect(messages!.clientFeatureFlags!.data).toHaveProperty(
-      'supports_preview_metadata'
-    )
-    expect(
-      typeof messages!.clientFeatureFlags!.data.supports_preview_metadata
-    ).toBe('boolean')
+    await expect(async () => {
+      const flags = await newPage.evaluate(
+        () => window.__capturedMessages?.clientFeatureFlags
+      )
+      expect(flags).not.toBeNull()
+      expect(flags?.type).toBe('feature_flags')
+      expect(flags?.data).not.toBeNull()
+      expect(flags?.data).toHaveProperty('supports_preview_metadata')
+      expect(typeof flags?.data?.supports_preview_metadata).toBe('boolean')
+    }).toPass({ timeout: 5000 })
 
     // Verify server sent feature flags back
-    expect(messages!.serverFeatureFlags).toBeTruthy()
-    expect(messages!.serverFeatureFlags).toHaveProperty(
-      'supports_preview_metadata'
-    )
-    expect(typeof messages!.serverFeatureFlags!.supports_preview_metadata).toBe(
-      'boolean'
-    )
-    expect(messages!.serverFeatureFlags).toHaveProperty('max_upload_size')
-    expect(typeof messages!.serverFeatureFlags!.max_upload_size).toBe('number')
-    expect(Object.keys(messages!.serverFeatureFlags!).length).toBeGreaterThan(0)
+    await expect(async () => {
+      const flags = await newPage.evaluate(
+        () => window.__capturedMessages?.serverFeatureFlags
+      )
+      expect(flags).not.toBeNull()
+      expect(flags).toHaveProperty('supports_preview_metadata')
+      expect(typeof flags?.supports_preview_metadata).toBe('boolean')
+      expect(flags).toHaveProperty('max_upload_size')
+      expect(typeof flags?.max_upload_size).toBe('number')
+      expect(Object.keys(flags ?? {}).length).toBeGreaterThan(0)
+    }).toPass({ timeout: 5000 })
 
     await newPage.close()
   })
@@ -91,37 +90,44 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
   test('Server feature flags are received and accessible', async ({
     comfyPage
   }) => {
-    // Get the actual server feature flags from the backend
-    const serverFlags = await comfyPage.page.evaluate(() => {
-      return window.app!.api.serverFeatureFlags.value
-    })
-
     // Verify we received real feature flags from the backend
-    expect(serverFlags).toBeTruthy()
-    expect(Object.keys(serverFlags).length).toBeGreaterThan(0)
-
-    // The backend should send feature flags
-    expect(serverFlags).toHaveProperty('supports_preview_metadata')
-    expect(typeof serverFlags.supports_preview_metadata).toBe('boolean')
-    expect(serverFlags).toHaveProperty('max_upload_size')
-    expect(typeof serverFlags.max_upload_size).toBe('number')
+    await expect(async () => {
+      const flags = await comfyPage.page.evaluate(
+        () => window.app!.api.serverFeatureFlags.value
+      )
+      expect(flags).not.toBeNull()
+      expect(Object.keys(flags).length).toBeGreaterThan(0)
+      // The backend should send feature flags
+      expect(flags).toHaveProperty('supports_preview_metadata')
+      expect(typeof flags.supports_preview_metadata).toBe('boolean')
+      expect(flags).toHaveProperty('max_upload_size')
+      expect(typeof flags.max_upload_size).toBe('number')
+    }).toPass({ timeout: 5000 })
   })
 
   test('serverSupportsFeature method works with real backend flags', async ({
     comfyPage
   }) => {
     // Test serverSupportsFeature with real backend flags
-    const supportsPreviewMetadata = await comfyPage.page.evaluate(() => {
-      return window.app!.api.serverSupportsFeature('supports_preview_metadata')
-    })
-    // The method should return a boolean based on the backend's value
-    expect(typeof supportsPreviewMetadata).toBe('boolean')
+    await expect
+      .poll(() =>
+        comfyPage.page.evaluate(
+          () =>
+            typeof window.app!.api.serverSupportsFeature(
+              'supports_preview_metadata'
+            )
+        )
+      )
+      .toBe('boolean')
 
     // Test non-existent feature - should always return false
-    const supportsNonExistent = await comfyPage.page.evaluate(() => {
-      return window.app!.api.serverSupportsFeature('non_existent_feature_xyz')
-    })
-    expect(supportsNonExistent).toBe(false)
+    await expect
+      .poll(() =>
+        comfyPage.page.evaluate(() =>
+          window.app!.api.serverSupportsFeature('non_existent_feature_xyz')
+        )
+      )
+      .toBe(false)
 
     // Test that the method only returns true for boolean true values
     const testResults = await comfyPage.page.evaluate(() => {
@@ -160,41 +166,51 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
     comfyPage
   }) => {
     // Test getServerFeature method
-    const previewMetadataValue = await comfyPage.page.evaluate(() => {
-      return window.app!.api.getServerFeature('supports_preview_metadata')
-    })
-    expect(typeof previewMetadataValue).toBe('boolean')
+    await expect
+      .poll(() =>
+        comfyPage.page.evaluate(
+          () =>
+            typeof window.app!.api.getServerFeature('supports_preview_metadata')
+        )
+      )
+      .toBe('boolean')
 
     // Test getting max_upload_size
-    const maxUploadSize = await comfyPage.page.evaluate(() => {
-      return window.app!.api.getServerFeature('max_upload_size')
-    })
-    expect(typeof maxUploadSize).toBe('number')
-    expect(maxUploadSize).toBeGreaterThan(0)
+    await expect(async () => {
+      const maxUpload = await comfyPage.page.evaluate(() =>
+        window.app!.api.getServerFeature('max_upload_size')
+      )
+      expect(typeof maxUpload).toBe('number')
+      expect(maxUpload as number).toBeGreaterThan(0)
+    }).toPass({ timeout: 5000 })
 
     // Test getServerFeature with default value for non-existent feature
-    const defaultValue = await comfyPage.page.evaluate(() => {
-      return window.app!.api.getServerFeature(
-        'non_existent_feature_xyz',
-        'default'
+    await expect
+      .poll(() =>
+        comfyPage.page.evaluate(() =>
+          window.app!.api.getServerFeature(
+            'non_existent_feature_xyz',
+            'default'
+          )
+        )
       )
-    })
-    expect(defaultValue).toBe('default')
+      .toBe('default')
   })
 
   test('getServerFeatures returns all backend feature flags', async ({
     comfyPage
   }) => {
     // Test getServerFeatures returns all flags
-    const allFeatures = await comfyPage.page.evaluate(() => {
-      return window.app!.api.getServerFeatures()
-    })
-
-    expect(allFeatures).toBeTruthy()
-    expect(allFeatures).toHaveProperty('supports_preview_metadata')
-    expect(typeof allFeatures.supports_preview_metadata).toBe('boolean')
-    expect(allFeatures).toHaveProperty('max_upload_size')
-    expect(Object.keys(allFeatures).length).toBeGreaterThan(0)
+    await expect(async () => {
+      const features = await comfyPage.page.evaluate(() =>
+        window.app!.api.getServerFeatures()
+      )
+      expect(features).not.toBeNull()
+      expect(features).toHaveProperty('supports_preview_metadata')
+      expect(typeof features.supports_preview_metadata).toBe('boolean')
+      expect(features).toHaveProperty('max_upload_size')
+      expect(Object.keys(features).length).toBeGreaterThan(0)
+    }).toPass({ timeout: 5000 })
   })
 
   test('Client feature flags are immutable', async ({ comfyPage }) => {
@@ -324,26 +340,22 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
       }
     )
 
-    // Get readiness state
-    const readiness = await newPage.evaluate(() => {
-      return {
-        ...window.__appReadiness,
-        currentFlags: window.app!.api.serverFeatureFlags.value
-      }
-    })
-
     // Verify feature flags are available
-    expect(readiness.currentFlags).toHaveProperty('supports_preview_metadata')
-    expect(typeof readiness.currentFlags.supports_preview_metadata).toBe(
-      'boolean'
-    )
-    expect(readiness.currentFlags).toHaveProperty('max_upload_size')
+    await expect(async () => {
+      const flags = await newPage.evaluate(
+        () => window.app!.api.serverFeatureFlags.value
+      )
+      expect(flags).toHaveProperty('supports_preview_metadata')
+      expect(typeof flags?.supports_preview_metadata).toBe('boolean')
+      expect(flags).toHaveProperty('max_upload_size')
+    }).toPass({ timeout: 5000 })
 
-    // Verify feature flags were received (we detected them via polling)
-    expect(readiness.featureFlagsReceived).toBe(true)
-
-    // Verify API was initialized (feature flags require API)
-    expect(readiness.apiInitialized).toBe(true)
+    // Verify feature flags were received and API was initialized
+    await expect(async () => {
+      const readiness = await newPage.evaluate(() => window.__appReadiness)
+      expect(readiness?.featureFlagsReceived).toBe(true)
+      expect(readiness?.apiInitialized).toBe(true)
+    }).toPass({ timeout: 5000 })
 
     await newPage.close()
   })
diff --git a/browser_tests/tests/focusMode.spec.ts b/browser_tests/tests/focusMode.spec.ts
index b38bc41635..ad16aa25c5 100644
--- a/browser_tests/tests/focusMode.spec.ts
+++ b/browser_tests/tests/focusMode.spec.ts
@@ -1,25 +1,20 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../fixtures/ComfyPage'
+} from '@e2e/fixtures/ComfyPage'
 
 test.describe('Focus Mode', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.setup()
-  })
-
   test('Focus mode hides UI chrome', async ({ comfyPage }) => {
     await expect(comfyPage.menu.sideToolbar).toBeVisible()
 
     await comfyPage.setFocusMode(true)
 
-    await expect(comfyPage.menu.sideToolbar).not.toBeVisible()
+    await expect(comfyPage.menu.sideToolbar).toBeHidden()
   })
 
   test('Focus mode restores UI chrome', async ({ comfyPage }) => {
     await comfyPage.setFocusMode(true)
-    await expect(comfyPage.menu.sideToolbar).not.toBeVisible()
+    await expect(comfyPage.menu.sideToolbar).toBeHidden()
 
     await comfyPage.setFocusMode(false)
     await expect(comfyPage.menu.sideToolbar).toBeVisible()
@@ -29,11 +24,9 @@ test.describe('Focus Mode', { tag: '@ui' }, () => {
     await expect(comfyPage.menu.sideToolbar).toBeVisible()
 
     await comfyPage.command.executeCommand('Workspace.ToggleFocusMode')
-    await comfyPage.nextFrame()
-    await expect(comfyPage.menu.sideToolbar).not.toBeVisible()
+    await expect(comfyPage.menu.sideToolbar).toBeHidden()
 
     await comfyPage.command.executeCommand('Workspace.ToggleFocusMode')
-    await comfyPage.nextFrame()
     await expect(comfyPage.menu.sideToolbar).toBeVisible()
   })
 
@@ -43,7 +36,7 @@ test.describe('Focus Mode', { tag: '@ui' }, () => {
 
     await comfyPage.setFocusMode(true)
 
-    await expect(topMenu).not.toBeVisible()
+    await expect(topMenu).toBeHidden()
   })
 
   test('Canvas remains visible in focus mode', async ({ comfyPage }) => {
@@ -54,12 +47,38 @@ test.describe('Focus Mode', { tag: '@ui' }, () => {
 
   test('Focus mode can be toggled multiple times', async ({ comfyPage }) => {
     await comfyPage.setFocusMode(true)
-    await expect(comfyPage.menu.sideToolbar).not.toBeVisible()
+    await expect(comfyPage.menu.sideToolbar).toBeHidden()
 
     await comfyPage.setFocusMode(false)
     await expect(comfyPage.menu.sideToolbar).toBeVisible()
 
     await comfyPage.setFocusMode(true)
-    await expect(comfyPage.menu.sideToolbar).not.toBeVisible()
+    await expect(comfyPage.menu.sideToolbar).toBeHidden()
+  })
+
+  test('Focus mode toggle preserves properties panel width', async ({
+    comfyPage
+  }) => {
+    // Open the properties panel
+    await comfyPage.actionbar.propertiesButton.click()
+    await expect(comfyPage.menu.propertiesPanel.root).toBeVisible()
+
+    // Record the initial panel width
+    const initialBox = await comfyPage.menu.propertiesPanel.root.boundingBox()
+    expect(initialBox).not.toBeNull()
+    const initialWidth = initialBox!.width
+
+    // Toggle focus mode on then off
+    await comfyPage.setFocusMode(true)
+    await comfyPage.setFocusMode(false)
+
+    // Properties panel should be visible again with the same width
+    await expect(comfyPage.menu.propertiesPanel.root).toBeVisible()
+    await expect
+      .poll(async () => {
+        const box = await comfyPage.menu.propertiesPanel.root.boundingBox()
+        return box ? Math.abs(box.width - initialWidth) : Infinity
+      })
+      .toBeLessThan(2)
   })
 })
diff --git a/browser_tests/tests/graph.spec.ts b/browser_tests/tests/graph.spec.ts
index 830e050a9e..1a1db16a37 100644
--- a/browser_tests/tests/graph.spec.ts
+++ b/browser_tests/tests/graph.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -11,17 +11,19 @@ test.describe('Graph', { tag: ['@smoke', '@canvas'] }, () => {
   // Ref: https://github.com/Comfy-Org/ComfyUI_frontend/issues/3348
   test('Fix link input slots', async ({ comfyPage }) => {
     await comfyPage.workflow.loadWorkflow('inputs/input_order_swap')
-    expect(
-      await comfyPage.page.evaluate(() => {
-        return window.app!.graph!.links.get(1)?.target_slot
-      })
-    ).toBe(1)
+    await expect
+      .poll(() =>
+        comfyPage.page.evaluate(() => {
+          return window.app!.graph!.links.get(1)?.target_slot
+        })
+      )
+      .toBe(1)
   })
 
   test('Validate workflow links', async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.Validation.Workflows', true)
     await comfyPage.workflow.loadWorkflow('links/bad_link')
-    await expect.poll(() => comfyPage.toast.getVisibleToastCount()).toBe(2)
+    await expect(comfyPage.toast.visibleToasts).toHaveCount(2)
   })
 
   // Regression: duplicate links with shifted target_slot (widget-to-input
@@ -36,72 +38,77 @@ test.describe('Graph', { tag: ['@smoke', '@canvas'] }, () => {
   }) => {
     await comfyPage.workflow.loadWorkflow('links/duplicate_links_slot_drift')
 
-    const result = await comfyPage.page.evaluate(() => {
-      const graph = window.app!.graph!
+    function evaluateGraph() {
+      return comfyPage.page.evaluate(() => {
+        const graph = window.app!.graph!
 
-      const subgraph = graph.subgraphs.values().next().value
-      if (!subgraph) return { error: 'No subgraph found' }
+        const subgraph = graph.subgraphs.values().next().value
+        if (!subgraph) return { error: 'No subgraph found' }
 
-      // Node 120 = Switch (CFG), connects to both KSamplerAdvanced 85 and 86
-      const switchCfg = subgraph.getNodeById(120)
-      const ksampler85 = subgraph.getNodeById(85)
-      const ksampler86 = subgraph.getNodeById(86)
-      if (!switchCfg || !ksampler85 || !ksampler86)
-        return { error: 'Required nodes not found' }
+        // Node 120 = Switch (CFG), connects to both KSamplerAdvanced 85 and 86
+        const switchCfg = subgraph.getNodeById(120)
+        const ksampler85 = subgraph.getNodeById(85)
+        const ksampler86 = subgraph.getNodeById(86)
+        if (!switchCfg || !ksampler85 || !ksampler86)
+          return { error: 'Required nodes not found' }
 
-      // Find cfg inputs by name (slot indices shift due to widget-to-input)
-      const cfgInput85 = ksampler85.inputs.find(
-        (i: { name: string }) => i.name === 'cfg'
+        // Find cfg inputs by name (slot indices shift due to widget-to-input)
+        const cfgInput85 = ksampler85.inputs.find(
+          (i: { name: string }) => i.name === 'cfg'
+        )
+        const cfgInput86 = ksampler86.inputs.find(
+          (i: { name: string }) => i.name === 'cfg'
+        )
+        const cfg85Linked = cfgInput85?.link != null
+        const cfg86Linked = cfgInput86?.link != null
+
+        // Verify the surviving links exist in the subgraph link map
+        const cfg85LinkValid =
+          cfg85Linked && subgraph.links.has(cfgInput85!.link!)
+        const cfg86LinkValid =
+          cfg86Linked && subgraph.links.has(cfgInput86!.link!)
+
+        // Switch(CFG) output should have exactly 2 links (one to each KSampler)
+        const switchOutputLinkCount = switchCfg.outputs[0]?.links?.length ?? 0
+
+        // Count links from Switch(CFG) to node 85 cfg (should be 1, not 2)
+        let cfgLinkToNode85Count = 0
+        for (const link of subgraph.links.values()) {
+          if (link.origin_id === 120 && link.target_id === 85)
+            cfgLinkToNode85Count++
+        }
+
+        return {
+          cfg85Linked,
+          cfg86Linked,
+          cfg85LinkValid,
+          cfg86LinkValid,
+          cfg85LinkId: cfgInput85?.link ?? null,
+          cfg86LinkId: cfgInput86?.link ?? null,
+          switchOutputLinkIds: [...(switchCfg.outputs[0]?.links ?? [])],
+          switchOutputLinkCount,
+          cfgLinkToNode85Count
+        }
+      })
+    }
+
+    // Poll graph state once, then assert all properties
+    await expect(async () => {
+      const r = await evaluateGraph()
+      // Both KSamplerAdvanced nodes must have their cfg input connected
+      expect(r.cfg85Linked).toBe(true)
+      expect(r.cfg86Linked).toBe(true)
+      // Links must exist in the subgraph link map
+      expect(r.cfg85LinkValid).toBe(true)
+      expect(r.cfg86LinkValid).toBe(true)
+      // Switch(CFG) output has exactly 2 links (one per KSamplerAdvanced)
+      expect(r.switchOutputLinkCount).toBe(2)
+      // Only 1 link from Switch(CFG) to node 85 (duplicate removed)
+      expect(r.cfgLinkToNode85Count).toBe(1)
+      // Output link IDs must match the input link IDs (source/target integrity)
+      expect(r.switchOutputLinkIds).toEqual(
+        expect.arrayContaining([r.cfg85LinkId, r.cfg86LinkId])
       )
-      const cfgInput86 = ksampler86.inputs.find(
-        (i: { name: string }) => i.name === 'cfg'
-      )
-      const cfg85Linked = cfgInput85?.link != null
-      const cfg86Linked = cfgInput86?.link != null
-
-      // Verify the surviving links exist in the subgraph link map
-      const cfg85LinkValid =
-        cfg85Linked && subgraph.links.has(cfgInput85!.link!)
-      const cfg86LinkValid =
-        cfg86Linked && subgraph.links.has(cfgInput86!.link!)
-
-      // Switch(CFG) output should have exactly 2 links (one to each KSampler)
-      const switchOutputLinkCount = switchCfg.outputs[0]?.links?.length ?? 0
-
-      // Count links from Switch(CFG) to node 85 cfg (should be 1, not 2)
-      let cfgLinkToNode85Count = 0
-      for (const link of subgraph.links.values()) {
-        if (link.origin_id === 120 && link.target_id === 85)
-          cfgLinkToNode85Count++
-      }
-
-      return {
-        cfg85Linked,
-        cfg86Linked,
-        cfg85LinkValid,
-        cfg86LinkValid,
-        cfg85LinkId: cfgInput85?.link ?? null,
-        cfg86LinkId: cfgInput86?.link ?? null,
-        switchOutputLinkIds: [...(switchCfg.outputs[0]?.links ?? [])],
-        switchOutputLinkCount,
-        cfgLinkToNode85Count
-      }
-    })
-
-    expect(result).not.toHaveProperty('error')
-    // Both KSamplerAdvanced nodes must have their cfg input connected
-    expect(result.cfg85Linked).toBe(true)
-    expect(result.cfg86Linked).toBe(true)
-    // Links must exist in the subgraph link map
-    expect(result.cfg85LinkValid).toBe(true)
-    expect(result.cfg86LinkValid).toBe(true)
-    // Switch(CFG) output has exactly 2 links (one per KSamplerAdvanced)
-    expect(result.switchOutputLinkCount).toBe(2)
-    // Only 1 link from Switch(CFG) to node 85 (duplicate removed)
-    expect(result.cfgLinkToNode85Count).toBe(1)
-    // Output link IDs must match the input link IDs (source/target integrity)
-    expect(result.switchOutputLinkIds).toEqual(
-      expect.arrayContaining([result.cfg85LinkId, result.cfg86LinkId])
-    )
+    }).toPass({ timeout: 5000 })
   })
 })
diff --git a/browser_tests/tests/graphCanvasMenu.spec.ts b/browser_tests/tests/graphCanvasMenu.spec.ts
index 2a6e8b3927..332ae1c577 100644
--- a/browser_tests/tests/graphCanvasMenu.spec.ts
+++ b/browser_tests/tests/graphCanvasMenu.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -24,25 +24,25 @@ test.describe('Graph Canvas Menu', { tag: ['@screenshot', '@canvas'] }, () => {
         TestIds.canvas.toggleLinkVisibilityButton
       )
       await button.click()
-      await comfyPage.nextFrame()
-      await expect(comfyPage.canvas).toHaveScreenshot(
+      await comfyPage.expectScreenshot(
+        comfyPage.canvas,
         'canvas-with-hidden-links.png'
       )
       const hiddenLinkRenderMode = await comfyPage.page.evaluate(() => {
         return window.LiteGraph!.HIDDEN_LINK
       })
-      expect(await comfyPage.settings.getSetting('Comfy.LinkRenderMode')).toBe(
-        hiddenLinkRenderMode
-      )
+      await expect
+        .poll(() => comfyPage.settings.getSetting('Comfy.LinkRenderMode'))
+        .toBe(hiddenLinkRenderMode)
 
       await button.click()
-      await comfyPage.nextFrame()
-      await expect(comfyPage.canvas).toHaveScreenshot(
+      await comfyPage.expectScreenshot(
+        comfyPage.canvas,
         'canvas-with-visible-links.png'
       )
-      expect(
-        await comfyPage.settings.getSetting('Comfy.LinkRenderMode')
-      ).not.toBe(hiddenLinkRenderMode)
+      await expect
+        .poll(() => comfyPage.settings.getSetting('Comfy.LinkRenderMode'))
+        .not.toBe(hiddenLinkRenderMode)
     }
   )
 
@@ -92,9 +92,8 @@ test.describe('Graph Canvas Menu', { tag: ['@screenshot', '@canvas'] }, () => {
     // Click backdrop to close
     const backdrop = comfyPage.page.locator('.fixed.inset-0').first()
     await backdrop.click()
-    await comfyPage.nextFrame()
 
     // Modal should be hidden
-    await expect(zoomModal).not.toBeVisible()
+    await expect(zoomModal).toBeHidden()
   })
 })
diff --git a/browser_tests/tests/groupCopyPaste.spec.ts b/browser_tests/tests/groupCopyPaste.spec.ts
index 7ae4ad0e7f..8263b4aa4b 100644
--- a/browser_tests/tests/groupCopyPaste.spec.ts
+++ b/browser_tests/tests/groupCopyPaste.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.describe('Group Copy Paste', { tag: ['@canvas'] }, () => {
   test.afterEach(async ({ comfyPage }) => {
@@ -28,17 +28,20 @@ test.describe('Group Copy Paste', { tag: ['@canvas'] }, () => {
     await comfyPage.clipboard.paste()
     await comfyPage.nextFrame()
 
-    const positions = await comfyPage.page.evaluate(() =>
-      window.app!.graph.groups.map((g: { pos: number[] }) => ({
-        x: g.pos[0],
-        y: g.pos[1]
-      }))
-    )
+    const getGroupPositions = () =>
+      comfyPage.page.evaluate(() =>
+        window.app!.graph.groups.map((g: { pos: number[] }) => ({
+          x: g.pos[0],
+          y: g.pos[1]
+        }))
+      )
 
-    expect(positions).toHaveLength(2)
-    const dx = Math.abs(positions[0].x - positions[1].x)
-    const dy = Math.abs(positions[0].y - positions[1].y)
-    expect(dx).toBeCloseTo(50, 0)
-    expect(dy).toBeCloseTo(15, 0)
+    await expect.poll(getGroupPositions).toHaveLength(2)
+
+    await expect(async () => {
+      const positions = await getGroupPositions()
+      expect(Math.abs(positions[0].x - positions[1].x)).toBeCloseTo(50, 0)
+      expect(Math.abs(positions[0].y - positions[1].y)).toBeCloseTo(15, 0)
+    }).toPass({ timeout: 5000 })
   })
 })
diff --git a/browser_tests/tests/groupNode.spec.ts b/browser_tests/tests/groupNode.spec.ts
index 5266a4b4de..d002d83681 100644
--- a/browser_tests/tests/groupNode.spec.ts
+++ b/browser_tests/tests/groupNode.spec.ts
@@ -1,13 +1,14 @@
-import { expect } from '@playwright/test'
-
 import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import type { NodeLibrarySidebarTab } from '../fixtures/components/SidebarTab'
-import { TestIds } from '../fixtures/selectors'
-import { DefaultGraphPositions } from '../fixtures/constants/defaultGraphPositions'
-import type { NodeReference } from '../fixtures/utils/litegraphUtils'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '@e2e/fixtures/ComfyPage'
+import type { NodeLibrarySidebarTab } from '@e2e/fixtures/components/SidebarTab'
+import { TestIds } from '@e2e/fixtures/selectors'
+import { DefaultGraphPositions } from '@e2e/fixtures/constants/defaultGraphPositions'
+import type { NodeReference } from '@e2e/fixtures/utils/litegraphUtils'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -32,7 +33,7 @@ test.describe('Group Node', { tag: '@node' }, () => {
     test('Is added to node library sidebar', async ({
       comfyPage: _comfyPage
     }) => {
-      expect(await libraryTab.getFolder(groupNodeCategory).count()).toBe(1)
+      await expect(libraryTab.getFolder(groupNodeCategory)).toHaveCount(1)
     })
 
     test('Can be added to canvas using node library sidebar', async ({
@@ -45,9 +46,9 @@ test.describe('Group Node', { tag: '@node' }, () => {
       await libraryTab.getNode(groupNodeName).click()
 
       // Verify the node is added to the canvas
-      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(
-        initialNodeCount + 1
-      )
+      await expect
+        .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+        .toBe(initialNodeCount + 1)
     })
 
     test('Can be bookmarked and unbookmarked', async ({ comfyPage }) => {
@@ -58,11 +59,13 @@ test.describe('Group Node', { tag: '@node' }, () => {
         .click()
 
       // Verify the node is added to the bookmarks tab
-      expect(
-        await comfyPage.settings.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
-      ).toEqual([groupNodeBookmarkName])
+      await expect
+        .poll(() =>
+          comfyPage.settings.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+        )
+        .toEqual([groupNodeBookmarkName])
       // Verify the bookmark node with the same name is added to the tree
-      expect(await libraryTab.getNode(groupNodeName).count()).not.toBe(0)
+      await expect(libraryTab.getNode(groupNodeName)).not.toHaveCount(0)
 
       // Unbookmark the node
       await libraryTab
@@ -72,9 +75,11 @@ test.describe('Group Node', { tag: '@node' }, () => {
         .click()
 
       // Verify the node is removed from the bookmarks tab
-      expect(
-        await comfyPage.settings.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
-      ).toHaveLength(0)
+      await expect
+        .poll(() =>
+          comfyPage.settings.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+        )
+        .toHaveLength(0)
     })
 
     test('Displays preview on bookmark hover', async ({ comfyPage }) => {
@@ -83,10 +88,13 @@ test.describe('Group Node', { tag: '@node' }, () => {
         .getNode(groupNodeName)
         .locator('.bookmark-button')
         .click()
-      await comfyPage.page.hover('.p-tree-node-label.tree-explorer-node-label')
-      expect(await comfyPage.page.isVisible('.node-lib-node-preview')).toBe(
-        true
-      )
+      await comfyPage.page
+        .locator('.p-tree-node-label.tree-explorer-node-label')
+        .first()
+        .hover()
+      await expect(
+        comfyPage.page.locator('.node-lib-node-preview')
+      ).toBeVisible()
       await libraryTab
         .getNode(groupNodeName)
         .locator('.bookmark-button')
@@ -94,13 +102,8 @@ test.describe('Group Node', { tag: '@node' }, () => {
         .click()
     })
   })
-  // The 500ms fixed delay on the search results is causing flakiness
-  // Potential solution: add a spinner state when the search is in progress,
-  // and observe that state from the test. Blocker: the PrimeVue AutoComplete
-  // does not have a v-model on the query, so we cannot observe the raw
-  // query update, and thus cannot set the spinning state between the raw query
-  // update and the debounced search update.
-  test.skip(
+
+  test(
     'Can be added to canvas using search',
     { tag: '@screenshot' },
     async ({ comfyPage }) => {
@@ -108,7 +111,16 @@ test.describe('Group Node', { tag: '@node' }, () => {
       await comfyPage.nodeOps.convertAllNodesToGroupNode(groupNodeName)
       await comfyPage.canvasOps.doubleClick()
       await comfyPage.nextFrame()
-      await comfyPage.searchBox.fillAndSelectFirstNode(groupNodeName)
+      await comfyPage.searchBox.input.waitFor({ state: 'visible' })
+      await comfyPage.searchBox.input.fill(groupNodeName)
+      await comfyPage.searchBox.dropdown.waitFor({ state: 'visible' })
+
+      const exactGroupNodeResult = comfyPage.searchBox.dropdown
+        .locator(`li[aria-label="${groupNodeName}"]`)
+        .first()
+      await expect(exactGroupNodeResult).toBeVisible()
+      await exactGroupNodeResult.click()
+
       await expect(comfyPage.canvas).toHaveScreenshot(
         'group-node-copy-added-from-search.png'
       )
@@ -144,12 +156,12 @@ test.describe('Group Node', { tag: '@node' }, () => {
 
     const manage1 = await group1.manageGroupNode()
     await comfyPage.nextFrame()
-    expect(await manage1.getSelectedNodeType()).toBe('g1')
+    await expect(manage1.selectedNodeTypeSelect).toHaveValue('g1')
     await manage1.close()
-    await expect(manage1.root).not.toBeVisible()
+    await expect(manage1.root).toBeHidden()
 
     const manage2 = await group2.manageGroupNode()
-    expect(await manage2.getSelectedNodeType()).toBe('g2')
+    await expect(manage2.selectedNodeTypeSelect).toHaveValue('g2')
   })
 
   test('Preserves hidden input configuration when containing duplicate node types', async ({
@@ -158,29 +170,35 @@ test.describe('Group Node', { tag: '@node' }, () => {
     await comfyPage.workflow.loadWorkflow(
       'groupnodes/group_node_identical_nodes_hidden_inputs'
     )
-    await comfyPage.nextFrame()
 
     const groupNodeId = 19
     const groupNodeName = 'two_VAE_decode'
 
-    const totalInputCount = await comfyPage.page.evaluate((nodeName) => {
-      const {
-        extra: { groupNodes }
-      } = window.app!.graph!
-      const { nodes } = groupNodes![nodeName]
-      return nodes.reduce((acc, node) => acc + (node.inputs?.length ?? 0), 0)
-    }, groupNodeName)
-
-    const visibleInputCount = await comfyPage.page.evaluate((id) => {
-      const node = window.app!.graph!.getNodeById(id)
-      return node!.inputs.length
-    }, groupNodeId)
-
     // Verify there are 4 total inputs (2 VAE decode nodes with 2 inputs each)
-    expect(totalInputCount).toBe(4)
+    await expect
+      .poll(() =>
+        comfyPage.page.evaluate((nodeName) => {
+          const {
+            extra: { groupNodes }
+          } = window.app!.graph!
+          const { nodes } = groupNodes![nodeName]
+          return nodes.reduce(
+            (acc, node) => acc + (node.inputs?.length ?? 0),
+            0
+          )
+        }, groupNodeName)
+      )
+      .toBe(4)
 
     // Verify there are 2 visible inputs (2 have been hidden in config)
-    expect(visibleInputCount).toBe(2)
+    await expect
+      .poll(() =>
+        comfyPage.page.evaluate((id) => {
+          const node = window.app!.graph!.getNodeById(id)
+          return node!.inputs.length
+        }, groupNodeId)
+      )
+      .toBe(2)
   })
 
   test('Reconnects inputs after configuration changed via manage dialog save', async ({
@@ -207,7 +225,7 @@ test.describe('Group Node', { tag: '@node' }, () => {
     // Connect node to group
     const ckpt = await expectSingleNode('CheckpointLoaderSimple')
     const input = await ckpt.connectOutput(0, groupNode, 0)
-    expect(await input.getLinkCount()).toBe(1)
+    await expect.poll(() => input.getLinkCount()).toBe(1)
     // Modify the group node via manage dialog
     const manage = await groupNode.manageGroupNode()
     await manage.selectNode('KSampler')
@@ -216,17 +234,17 @@ test.describe('Group Node', { tag: '@node' }, () => {
     await manage.save()
     await manage.close()
     // Ensure the link is still present
-    expect(await input.getLinkCount()).toBe(1)
+    await expect.poll(() => input.getLinkCount()).toBe(1)
   })
 
   test('Loads from a workflow using the legacy path separator ("/")', async ({
     comfyPage
   }) => {
     await comfyPage.workflow.loadWorkflow('groupnodes/legacy_group_node')
-    expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(1)
+    await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(1)
     await expect(
       comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
-    ).not.toBeVisible()
+    ).toBeHidden()
   })
 
   test.describe('Copy and paste', () => {
@@ -258,8 +276,8 @@ test.describe('Group Node', { tag: '@node' }, () => {
       expect(
         await comfyPage.nodeOps.getNodeRefsByType(GROUP_NODE_TYPE)
       ).toHaveLength(expectedCount)
-      expect(await isRegisteredLitegraph(comfyPage)).toBe(true)
-      expect(await isRegisteredNodeDefStore(comfyPage)).toBe(true)
+      await expect.poll(() => isRegisteredLitegraph(comfyPage)).toBe(true)
+      await expect.poll(() => isRegisteredNodeDefStore(comfyPage)).toBe(true)
     }
 
     test.beforeEach(async ({ comfyPage }) => {
@@ -317,12 +335,9 @@ test.describe('Group Node', { tag: '@node' }, () => {
       )
 
       await test.step('Load workflow containing a group node pasted from a different workflow', async () => {
-        await comfyPage.page.evaluate(
-          (workflow) =>
-            window.app!.loadGraphData(workflow as ComfyWorkflowJSON),
-          currentGraphState
+        await comfyPage.workflow.loadGraphData(
+          currentGraphState as ComfyWorkflowJSON
         )
-        await comfyPage.nextFrame()
         await verifyNodeLoaded(comfyPage, 1)
       })
     })
@@ -330,18 +345,19 @@ test.describe('Group Node', { tag: '@node' }, () => {
 
   test.describe('Keybindings', () => {
     test('Convert to group node, no selection', async ({ comfyPage }) => {
-      await expect.poll(() => comfyPage.toast.getVisibleToastCount()).toBe(0)
+      await expect(comfyPage.toast.visibleToasts).toHaveCount(0)
       await comfyPage.page.keyboard.press('Alt+g')
-      await expect.poll(() => comfyPage.toast.getVisibleToastCount()).toBe(1)
+      await expect(comfyPage.toast.visibleToasts).toHaveCount(1)
     })
+
     test('Convert to group node, selected 1 node', async ({ comfyPage }) => {
-      await expect.poll(() => comfyPage.toast.getVisibleToastCount()).toBe(0)
+      await expect(comfyPage.toast.visibleToasts).toHaveCount(0)
       await comfyPage.canvas.click({
         position: DefaultGraphPositions.textEncodeNode1
       })
       await comfyPage.nextFrame()
       await comfyPage.page.keyboard.press('Alt+g')
-      await expect.poll(() => comfyPage.toast.getVisibleToastCount()).toBe(1)
+      await expect(comfyPage.toast.visibleToasts).toHaveCount(1)
     })
   })
 })
diff --git a/browser_tests/tests/groupNode.spec.ts-snapshots/group-node-copy-added-from-search-chromium-linux.png b/browser_tests/tests/groupNode.spec.ts-snapshots/group-node-copy-added-from-search-chromium-linux.png
index 9a794a8264..dba0a5a754 100644
Binary files a/browser_tests/tests/groupNode.spec.ts-snapshots/group-node-copy-added-from-search-chromium-linux.png and b/browser_tests/tests/groupNode.spec.ts-snapshots/group-node-copy-added-from-search-chromium-linux.png differ
diff --git a/browser_tests/tests/groupSelectChildren.spec.ts b/browser_tests/tests/groupSelectChildren.spec.ts
index 7530dbd418..931bbf8d94 100644
--- a/browser_tests/tests/groupSelectChildren.spec.ts
+++ b/browser_tests/tests/groupSelectChildren.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import type { ComfyPage } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 
 /**
  * Returns the client-space position of a group's title bar (for clicking).
@@ -60,17 +60,19 @@ test.describe('Group Select Children', { tag: ['@canvas', '@node'] }, () => {
       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)
+    await expect
+      .poll(() => getSelectionCounts(comfyPage))
+      .toMatchObject({
+        selectedItemCount: 3,
+        selectedGroupCount: 2,
+        selectedNodeCount: 1
+      })
   })
 
   test('Setting disabled: clicking outer group selects only the group', async ({
@@ -81,16 +83,18 @@ test.describe('Group Select Children', { tag: ['@canvas', '@node'] }, () => {
       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)
+    await expect
+      .poll(() => getSelectionCounts(comfyPage))
+      .toMatchObject({
+        selectedItemCount: 1,
+        selectedGroupCount: 1,
+        selectedNodeCount: 0
+      })
   })
 
   test('Deselecting outer group deselects all children', async ({
@@ -101,15 +105,15 @@ test.describe('Group Select Children', { tag: ['@canvas', '@node'] }, () => {
       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)
+    await expect
+      .poll(() => getSelectionCounts(comfyPage))
+      .toMatchObject({ selectedItemCount: 3 })
 
     // Deselect all via page.evaluate to avoid UI overlay interception
     await comfyPage.page.evaluate(() => {
@@ -117,7 +121,8 @@ test.describe('Group Select Children', { tag: ['@canvas', '@node'] }, () => {
     })
     await comfyPage.nextFrame()
 
-    counts = await getSelectionCounts(comfyPage)
-    expect(counts.selectedItemCount).toBe(0)
+    await expect
+      .poll(() => getSelectionCounts(comfyPage))
+      .toMatchObject({ selectedItemCount: 0 })
   })
 })
diff --git a/browser_tests/tests/imageCompare.spec.ts b/browser_tests/tests/imageCompare.spec.ts
index 0c61dbf15c..1f14565822 100644
--- a/browser_tests/tests/imageCompare.spec.ts
+++ b/browser_tests/tests/imageCompare.spec.ts
@@ -1,13 +1,13 @@
+import type { Locator, Page } from '@playwright/test'
 import { expect } from '@playwright/test'
 
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
 
-test.describe('Image Compare', () => {
+test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
     await comfyPage.workflow.loadWorkflow('widgets/image_compare_widget')
-    await comfyPage.vueNodes.waitForNodes()
   })
 
   function createTestImageDataUrl(label: string, color: string): string {
@@ -21,7 +21,12 @@ test.describe('Image Compare', () => {
 
   async function setImageCompareValue(
     comfyPage: ComfyPage,
-    value: { beforeImages: string[]; afterImages: string[] }
+    value: {
+      beforeImages: string[]
+      afterImages: string[]
+      beforeAlt?: string
+      afterAlt?: string
+    }
   ) {
     await comfyPage.page.evaluate(
       ({ value }) => {
@@ -37,6 +42,52 @@ test.describe('Image Compare', () => {
     await comfyPage.nextFrame()
   }
 
+  async function moveToPercentage(
+    page: Page,
+    containerLocator: Locator,
+    percentage: number
+  ) {
+    await expect
+      .poll(async () => {
+        const b = await containerLocator.boundingBox()
+        return b !== null && b.width > 0 && b.height > 0
+      })
+      .toBe(true)
+    const box = await containerLocator.boundingBox()
+    if (!box || box.width <= 0 || box.height <= 0) {
+      throw new Error('Slider move target has no layout box')
+    }
+    await page.mouse.move(
+      box.x + box.width * (percentage / 100),
+      box.y + box.height / 2
+    )
+  }
+
+  async function waitForImagesLoaded(node: Locator) {
+    await expect
+      .poll(() =>
+        node.evaluate((el) => {
+          const imgs = el.querySelectorAll('img')
+          return (
+            imgs.length > 0 &&
+            Array.from(imgs).every(
+              (img) => img.complete && img.naturalWidth > 0
+            )
+          )
+        })
+      )
+      .toBe(true)
+  }
+
+  async function getClipPathInsetRightPercent(imgLocator: Locator) {
+    return imgLocator.evaluate((el) => {
+      // Accessing raw style avoids cross-browser getComputedStyle normalization issues
+      // Format is uniformly "inset(0 60% 0 0)" per Vue runtime inline style bindings
+      const parts = (el as HTMLElement).style.clipPath.split(' ')
+      return parts.length > 1 ? parseFloat(parts[1]) : -1
+    })
+  }
+
   test(
     'Shows empty state when no images are set',
     { tag: '@smoke' },
@@ -44,9 +95,31 @@ test.describe('Image Compare', () => {
       const node = comfyPage.vueNodes.getNodeLocator('1')
       await expect(node).toBeVisible()
 
-      await expect(node).toContainText('No images to compare')
+      await expect(node.getByTestId(TestIds.imageCompare.empty)).toBeVisible()
       await expect(node.locator('img')).toHaveCount(0)
-      await expect(node.locator('[role="presentation"]')).toHaveCount(0)
+      await expect(node.getByRole('presentation')).toHaveCount(0)
+    }
+  )
+
+  test(
+    'Widget displays images and handle after value is set',
+    { tag: '@smoke' },
+    async ({ comfyPage }) => {
+      const beforeUrl = createTestImageDataUrl('Before', '#c00')
+      const afterUrl = createTestImageDataUrl('After', '#00c')
+      await setImageCompareValue(comfyPage, {
+        beforeImages: [beforeUrl],
+        afterImages: [afterUrl]
+      })
+
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      const beforeImg = node.locator('img[alt="Before image"]')
+      const afterImg = node.locator('img[alt="After image"]')
+      await expect(beforeImg).toBeVisible()
+      await expect(afterImg).toBeVisible()
+      await expect(node.getByRole('presentation')).toBeVisible()
+
+      await waitForImagesLoaded(node)
     }
   )
 
@@ -67,15 +140,542 @@ test.describe('Image Compare', () => {
       await expect(beforeImg).toBeVisible()
       await expect(afterImg).toBeVisible()
 
-      const handle = node.locator('[role="presentation"]')
+      const handle = node.getByRole('presentation')
       await expect(handle).toBeVisible()
 
       expect(
-        await handle.evaluate((el) => (el as HTMLElement).style.left)
+        await handle.evaluate((el) => (el as HTMLElement).style.left),
+        'Slider should default to 50% before screenshot'
       ).toBe('50%')
-      await expect(beforeImg).toHaveCSS('clip-path', /50%/)
+      await expect
+        .poll(() => getClipPathInsetRightPercent(beforeImg))
+        .toBeCloseTo(50, 0)
 
+      await waitForImagesLoaded(node)
+      await comfyPage.page.mouse.move(0, 0)
       await expect(node).toHaveScreenshot('image-compare-default-50.png')
     }
   )
+
+  test(
+    'Mouse hover moves slider position',
+    { tag: '@smoke' },
+    async ({ comfyPage }) => {
+      const beforeUrl = createTestImageDataUrl('Before', '#c00')
+      const afterUrl = createTestImageDataUrl('After', '#00c')
+      await setImageCompareValue(comfyPage, {
+        beforeImages: [beforeUrl],
+        afterImages: [afterUrl]
+      })
+
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      const handle = node.getByRole('presentation')
+      const beforeImg = node.locator('img[alt="Before image"]')
+      const afterImg = node.locator('img[alt="After image"]')
+      const viewport = node.getByTestId(TestIds.imageCompare.viewport)
+      await expect(afterImg).toBeVisible()
+      await expect(viewport).toBeVisible()
+
+      // Left edge: sliderPosition ≈ 5 → clip-path inset right ≈ 95%
+      await moveToPercentage(comfyPage.page, viewport, 5)
+      await expect
+        .poll(() => getClipPathInsetRightPercent(beforeImg))
+        .toBeGreaterThan(90)
+      await expect
+        .poll(() =>
+          handle.evaluate((el) => parseFloat((el as HTMLElement).style.left))
+        )
+        .toBeLessThan(10)
+
+      // Right edge: sliderPosition ≈ 95 → clip-path inset right ≈ 5%
+      await moveToPercentage(comfyPage.page, viewport, 95)
+      await expect
+        .poll(() => getClipPathInsetRightPercent(beforeImg))
+        .toBeLessThan(10)
+      await expect
+        .poll(() =>
+          handle.evaluate((el) => parseFloat((el as HTMLElement).style.left))
+        )
+        .toBeGreaterThan(90)
+    }
+  )
+
+  test('Slider preserves last position when mouse leaves widget', async ({
+    comfyPage
+  }) => {
+    const beforeUrl = createTestImageDataUrl('Before', '#c00')
+    const afterUrl = createTestImageDataUrl('After', '#00c')
+    await setImageCompareValue(comfyPage, {
+      beforeImages: [beforeUrl],
+      afterImages: [afterUrl]
+    })
+
+    const node = comfyPage.vueNodes.getNodeLocator('1')
+    const handle = node.getByRole('presentation')
+    const afterImg = node.locator('img[alt="After image"]')
+    const viewport = node.getByTestId(TestIds.imageCompare.viewport)
+    await expect(afterImg).toBeVisible()
+    await expect(viewport).toBeVisible()
+
+    await moveToPercentage(comfyPage.page, viewport, 30)
+    // Wait for Vue to commit the slider update
+    await expect
+      .poll(() =>
+        handle.evaluate((el) => parseFloat((el as HTMLElement).style.left))
+      )
+      .toBeCloseTo(30, 0)
+    const positionWhileInside = parseFloat(
+      await handle.evaluate((el) => (el as HTMLElement).style.left)
+    )
+
+    await comfyPage.page.mouse.move(0, 0)
+
+    // Position must not reset to default 50%
+    await expect
+      .poll(() =>
+        handle.evaluate((el) => parseFloat((el as HTMLElement).style.left))
+      )
+      .toBeCloseTo(positionWhileInside, 0)
+  })
+
+  test('Slider position clamps to 0-100% range at container edges', async ({
+    comfyPage
+  }) => {
+    const beforeUrl = createTestImageDataUrl('Before', '#c00')
+    const afterUrl = createTestImageDataUrl('After', '#00c')
+    await setImageCompareValue(comfyPage, {
+      beforeImages: [beforeUrl],
+      afterImages: [afterUrl]
+    })
+
+    const node = comfyPage.vueNodes.getNodeLocator('1')
+    const handle = node.getByRole('presentation')
+    const compareArea = node.getByTestId(TestIds.imageCompare.viewport)
+    await expect(compareArea).toBeVisible()
+
+    await expect
+      .poll(async () => {
+        const b = await compareArea.boundingBox()
+        return b !== null && b.width > 0 && b.height > 0
+      })
+      .toBe(true)
+
+    const box = await compareArea.boundingBox()
+    if (!box || box.width <= 0 || box.height <= 0) {
+      throw new Error('Compare viewport layout not ready')
+    }
+
+    await comfyPage.page.mouse.move(box.x, box.y + box.height / 2)
+    await expect
+      .poll(() => handle.evaluate((el) => (el as HTMLElement).style.left))
+      .toBe('0%')
+
+    await comfyPage.page.mouse.move(
+      box.x + box.width - 0.5,
+      box.y + box.height / 2
+    )
+    await expect
+      .poll(() =>
+        handle.evaluate((el) => parseFloat((el as HTMLElement).style.left))
+      )
+      .toBeCloseTo(100, 0)
+  })
+
+  test('Only before image shows without slider when afterImages is empty', async ({
+    comfyPage
+  }) => {
+    const url = createTestImageDataUrl('Before', '#c00')
+    await setImageCompareValue(comfyPage, {
+      beforeImages: [url],
+      afterImages: []
+    })
+
+    const node = comfyPage.vueNodes.getNodeLocator('1')
+    await expect(node.locator('img')).toHaveCount(1)
+    await expect(node.getByRole('presentation')).toBeHidden()
+  })
+
+  test('Only after image shows without slider when beforeImages is empty', async ({
+    comfyPage
+  }) => {
+    const url = createTestImageDataUrl('After', '#00c')
+    await setImageCompareValue(comfyPage, {
+      beforeImages: [],
+      afterImages: [url]
+    })
+
+    const node = comfyPage.vueNodes.getNodeLocator('1')
+    await expect(node.locator('img')).toHaveCount(1)
+    await expect(node.getByRole('presentation')).toBeHidden()
+  })
+
+  test(
+    'Batch navigation appears when before side has multiple images',
+    { tag: '@smoke' },
+    async ({ comfyPage }) => {
+      const url1 = createTestImageDataUrl('A1', '#c00')
+      const url2 = createTestImageDataUrl('A2', '#0c0')
+      const url3 = createTestImageDataUrl('A3', '#00c')
+      const afterUrl = createTestImageDataUrl('B1', '#888')
+      await setImageCompareValue(comfyPage, {
+        beforeImages: [url1, url2, url3],
+        afterImages: [afterUrl]
+      })
+
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      const beforeBatch = node.getByTestId(TestIds.imageCompare.beforeBatch)
+
+      await expect(
+        node.getByTestId(TestIds.imageCompare.batchNav)
+      ).toBeVisible()
+      await expect(
+        beforeBatch.getByTestId(TestIds.imageCompare.batchCounter)
+      ).toHaveText('1 / 3')
+      // after-batch renders only when afterBatchCount > 1
+      await expect(
+        node.getByTestId(TestIds.imageCompare.afterBatch)
+      ).toBeHidden()
+      await expect(
+        beforeBatch.getByTestId(TestIds.imageCompare.batchPrev)
+      ).toBeDisabled()
+    }
+  )
+
+  test('Batch navigation is hidden when both sides have single images', async ({
+    comfyPage
+  }) => {
+    const url = createTestImageDataUrl('Image', '#c00')
+    await setImageCompareValue(comfyPage, {
+      beforeImages: [url],
+      afterImages: [url]
+    })
+
+    const node = comfyPage.vueNodes.getNodeLocator('1')
+    await expect(node.getByTestId(TestIds.imageCompare.batchNav)).toBeHidden()
+  })
+
+  test(
+    'Navigate forward through before images',
+    { tag: '@smoke' },
+    async ({ comfyPage }) => {
+      const url1 = createTestImageDataUrl('A1', '#c00')
+      const url2 = createTestImageDataUrl('A2', '#0c0')
+      const url3 = createTestImageDataUrl('A3', '#00c')
+      await setImageCompareValue(comfyPage, {
+        beforeImages: [url1, url2, url3],
+        afterImages: [createTestImageDataUrl('B1', '#888')]
+      })
+
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      const beforeBatch = node.getByTestId(TestIds.imageCompare.beforeBatch)
+      const counter = beforeBatch.getByTestId(TestIds.imageCompare.batchCounter)
+      const nextBtn = beforeBatch.getByTestId(TestIds.imageCompare.batchNext)
+      const prevBtn = beforeBatch.getByTestId(TestIds.imageCompare.batchPrev)
+
+      await nextBtn.click()
+      await expect(counter).toHaveText('2 / 3')
+      await expect(node.locator('img[alt="Before image"]')).toHaveAttribute(
+        'src',
+        url2
+      )
+      await expect(prevBtn).toBeEnabled()
+
+      await nextBtn.click()
+      await expect(counter).toHaveText('3 / 3')
+      await expect(nextBtn).toBeDisabled()
+    }
+  )
+
+  test('Navigate backward through before images', async ({ comfyPage }) => {
+    const url1 = createTestImageDataUrl('A1', '#c00')
+    const url2 = createTestImageDataUrl('A2', '#0c0')
+    const url3 = createTestImageDataUrl('A3', '#00c')
+    await setImageCompareValue(comfyPage, {
+      beforeImages: [url1, url2, url3],
+      afterImages: [createTestImageDataUrl('B1', '#888')]
+    })
+
+    const node = comfyPage.vueNodes.getNodeLocator('1')
+    const beforeBatch = node.getByTestId(TestIds.imageCompare.beforeBatch)
+    const counter = beforeBatch.getByTestId(TestIds.imageCompare.batchCounter)
+    const nextBtn = beforeBatch.getByTestId(TestIds.imageCompare.batchNext)
+    const prevBtn = beforeBatch.getByTestId(TestIds.imageCompare.batchPrev)
+
+    await nextBtn.click()
+    await nextBtn.click()
+    await expect(counter).toHaveText('3 / 3')
+
+    await prevBtn.click()
+    await expect(counter).toHaveText('2 / 3')
+    await expect(prevBtn).toBeEnabled()
+    await expect(nextBtn).toBeEnabled()
+  })
+
+  test('Before and after batch navigation are independent', async ({
+    comfyPage
+  }) => {
+    const url1 = createTestImageDataUrl('A1', '#c00')
+    const url2 = createTestImageDataUrl('A2', '#0c0')
+    const url3 = createTestImageDataUrl('A3', '#00c')
+    const urlA = createTestImageDataUrl('B1', '#880')
+    const urlB = createTestImageDataUrl('B2', '#008')
+    await setImageCompareValue(comfyPage, {
+      beforeImages: [url1, url2, url3],
+      afterImages: [urlA, urlB]
+    })
+
+    const node = comfyPage.vueNodes.getNodeLocator('1')
+    const beforeBatch = node.getByTestId(TestIds.imageCompare.beforeBatch)
+    const afterBatch = node.getByTestId(TestIds.imageCompare.afterBatch)
+
+    await beforeBatch.getByTestId(TestIds.imageCompare.batchNext).click()
+    await afterBatch.getByTestId(TestIds.imageCompare.batchNext).click()
+
+    await expect(
+      beforeBatch.getByTestId(TestIds.imageCompare.batchCounter)
+    ).toHaveText('2 / 3')
+    await expect(
+      afterBatch.getByTestId(TestIds.imageCompare.batchCounter)
+    ).toHaveText('2 / 2')
+    await expect(node.locator('img[alt="Before image"]')).toHaveAttribute(
+      'src',
+      url2
+    )
+    await expect(node.locator('img[alt="After image"]')).toHaveAttribute(
+      'src',
+      urlB
+    )
+  })
+
+  test('ImageCompare node enforces minimum size', async ({ comfyPage }) => {
+    const minWidth = 400
+    const minHeight = 350
+    const size = await comfyPage.page.evaluate(() => {
+      const graphNode = window.app!.graph.getNodeById(1)
+      if (!graphNode?.size) return null
+      return { width: graphNode.size[0], height: graphNode.size[1] }
+    })
+    expect(
+      size,
+      'ImageCompare node id 1 must exist in loaded workflow graph'
+    ).not.toBeNull()
+    if (size === null) return
+    expect(
+      size.width,
+      'ImageCompare node minimum width'
+    ).toBeGreaterThanOrEqual(minWidth)
+    expect(
+      size.height,
+      'ImageCompare node minimum height'
+    ).toBeGreaterThanOrEqual(minHeight)
+  })
+
+  for (const { pct, expectedClipMin, expectedClipMax } of [
+    { pct: 25, expectedClipMin: 70, expectedClipMax: 80 },
+    { pct: 75, expectedClipMin: 20, expectedClipMax: 30 }
+  ]) {
+    test(
+      `Screenshot at ${pct}% slider position`,
+      { tag: '@screenshot' },
+      async ({ comfyPage }) => {
+        const beforeUrl = createTestImageDataUrl('Before', '#c00')
+        const afterUrl = createTestImageDataUrl('After', '#00c')
+        await setImageCompareValue(comfyPage, {
+          beforeImages: [beforeUrl],
+          afterImages: [afterUrl]
+        })
+
+        const node = comfyPage.vueNodes.getNodeLocator('1')
+        const beforeImg = node.locator('img[alt="Before image"]')
+        const viewport = node.getByTestId(TestIds.imageCompare.viewport)
+        await waitForImagesLoaded(node)
+        await expect(viewport).toBeVisible()
+        await moveToPercentage(comfyPage.page, viewport, pct)
+        await expect
+          .poll(() => getClipPathInsetRightPercent(beforeImg))
+          .toBeGreaterThan(expectedClipMin)
+        await expect
+          .poll(() => getClipPathInsetRightPercent(beforeImg))
+          .toBeLessThan(expectedClipMax)
+
+        await expect(node).toHaveScreenshot(`image-compare-slider-${pct}.png`)
+      }
+    )
+  }
+
+  test('Widget handles image load failure gracefully', async ({
+    comfyPage
+  }) => {
+    const brokenBefore = 'http://127.0.0.1:1/broken.png'
+    const brokenAfter = 'http://127.0.0.1:1/broken2.png'
+
+    const pageErrors: Error[] = []
+    const onPageError = (err: Error) => {
+      pageErrors.push(err)
+    }
+    comfyPage.page.on('pageerror', onPageError)
+
+    try {
+      await setImageCompareValue(comfyPage, {
+        beforeImages: [brokenBefore],
+        afterImages: [brokenAfter]
+      })
+
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      await expect.soft(node, 'ImageCompare node stays on canvas').toBeVisible()
+      await expect
+        .soft(node.locator('img'), 'Broken URLs still render img elements')
+        .toHaveCount(2)
+      await expect
+        .soft(
+          node.getByRole('presentation'),
+          'Compare slider remains for failed network loads'
+        )
+        .toBeVisible()
+
+      await expect
+        .poll(() =>
+          node.evaluate((el) => {
+            const imgs = el.querySelectorAll('img')
+            let errors = 0
+            imgs.forEach((img) => {
+              if (img.complete && img.naturalWidth === 0 && img.src) errors++
+            })
+            return errors
+          })
+        )
+        .toBe(2)
+
+      expect(
+        pageErrors,
+        'Image load failures must not surface as uncaught page errors'
+      ).toHaveLength(0)
+    } finally {
+      comfyPage.page.off('pageerror', onPageError)
+    }
+  })
+
+  test('Rapid value updates show latest images and reset batch index', async ({
+    comfyPage
+  }) => {
+    const redUrl = createTestImageDataUrl('Red', '#c00')
+    const green1Url = createTestImageDataUrl('G1', '#0c0')
+    const green2Url = createTestImageDataUrl('G2', '#090')
+    const blueUrl = createTestImageDataUrl('Blue', '#00c')
+
+    await setImageCompareValue(comfyPage, {
+      beforeImages: [redUrl, green1Url],
+      afterImages: [blueUrl]
+    })
+
+    const node = comfyPage.vueNodes.getNodeLocator('1')
+    await node
+      .getByTestId(TestIds.imageCompare.beforeBatch)
+      .getByTestId(TestIds.imageCompare.batchNext)
+      .click()
+    await expect(
+      node
+        .getByTestId(TestIds.imageCompare.beforeBatch)
+        .getByTestId(TestIds.imageCompare.batchCounter)
+    ).toHaveText('2 / 2')
+
+    await setImageCompareValue(comfyPage, {
+      beforeImages: [green1Url, green2Url],
+      afterImages: [blueUrl]
+    })
+
+    await expect(node.locator('img[alt="Before image"]')).toHaveAttribute(
+      'src',
+      green1Url
+    )
+    await expect(
+      node
+        .getByTestId(TestIds.imageCompare.beforeBatch)
+        .getByTestId(TestIds.imageCompare.batchCounter)
+    ).toHaveText('1 / 2')
+  })
+
+  test('Legacy string value shows single image without slider', async ({
+    comfyPage
+  }) => {
+    const url = createTestImageDataUrl('Legacy', '#c00')
+    await comfyPage.page.evaluate(
+      ({ url }) => {
+        const node = window.app!.graph.getNodeById(1)
+        const widget = node?.widgets?.find((w) => w.type === 'imagecompare')
+        if (widget) {
+          widget.value = url
+          widget.callback?.(url)
+        }
+      },
+      { url }
+    )
+    await comfyPage.nextFrame()
+
+    const node = comfyPage.vueNodes.getNodeLocator('1')
+    await expect(node.locator('img')).toHaveCount(1)
+    await expect(node.getByRole('presentation')).toBeHidden()
+  })
+
+  test('Custom beforeAlt and afterAlt are used as img alt text', async ({
+    comfyPage
+  }) => {
+    const beforeUrl = createTestImageDataUrl('Before', '#c00')
+    const afterUrl = createTestImageDataUrl('After', '#00c')
+    await setImageCompareValue(comfyPage, {
+      beforeImages: [beforeUrl],
+      afterImages: [afterUrl],
+      beforeAlt: 'Custom before',
+      afterAlt: 'Custom after'
+    })
+
+    const node = comfyPage.vueNodes.getNodeLocator('1')
+    await expect(node.locator('img[alt="Custom before"]')).toBeVisible()
+    await expect(node.locator('img[alt="Custom after"]')).toBeVisible()
+  })
+
+  test('Large batch sizes show correct counter and end navigation state', async ({
+    comfyPage
+  }) => {
+    const images = Array.from({ length: 20 }, (_, i) =>
+      createTestImageDataUrl(String(i + 1), '#c00')
+    )
+    await setImageCompareValue(comfyPage, {
+      beforeImages: images,
+      afterImages: images
+    })
+
+    const node = comfyPage.vueNodes.getNodeLocator('1')
+    const beforeBatch = node.getByTestId(TestIds.imageCompare.beforeBatch)
+    const afterBatch = node.getByTestId(TestIds.imageCompare.afterBatch)
+
+    await expect(
+      beforeBatch.getByTestId(TestIds.imageCompare.batchCounter)
+    ).toHaveText('1 / 20')
+    await expect(
+      afterBatch.getByTestId(TestIds.imageCompare.batchCounter)
+    ).toHaveText('1 / 20')
+
+    const beforeNext = beforeBatch.getByTestId(TestIds.imageCompare.batchNext)
+    const afterNext = afterBatch.getByTestId(TestIds.imageCompare.batchNext)
+    for (let i = 0; i < 19; i++) {
+      await beforeNext.click()
+      await afterNext.click()
+    }
+
+    await expect(
+      beforeBatch.getByTestId(TestIds.imageCompare.batchCounter)
+    ).toHaveText('20 / 20')
+    await expect(
+      afterBatch.getByTestId(TestIds.imageCompare.batchCounter)
+    ).toHaveText('20 / 20')
+    await expect(
+      beforeBatch.getByTestId(TestIds.imageCompare.batchPrev)
+    ).toBeEnabled()
+    await expect(
+      afterBatch.getByTestId(TestIds.imageCompare.batchPrev)
+    ).toBeEnabled()
+    await expect(beforeNext).toBeDisabled()
+    await expect(afterNext).toBeDisabled()
+  })
 })
diff --git a/browser_tests/tests/imageCompare.spec.ts-snapshots/image-compare-default-50-chromium-linux.png b/browser_tests/tests/imageCompare.spec.ts-snapshots/image-compare-default-50-chromium-linux.png
index 38c762bc23..194fd5756d 100644
Binary files a/browser_tests/tests/imageCompare.spec.ts-snapshots/image-compare-default-50-chromium-linux.png and b/browser_tests/tests/imageCompare.spec.ts-snapshots/image-compare-default-50-chromium-linux.png differ
diff --git a/browser_tests/tests/imageCompare.spec.ts-snapshots/image-compare-slider-25-chromium-linux.png b/browser_tests/tests/imageCompare.spec.ts-snapshots/image-compare-slider-25-chromium-linux.png
new file mode 100644
index 0000000000..7886baf27b
Binary files /dev/null and b/browser_tests/tests/imageCompare.spec.ts-snapshots/image-compare-slider-25-chromium-linux.png differ
diff --git a/browser_tests/tests/imageCompare.spec.ts-snapshots/image-compare-slider-75-chromium-linux.png b/browser_tests/tests/imageCompare.spec.ts-snapshots/image-compare-slider-75-chromium-linux.png
new file mode 100644
index 0000000000..c26fb12929
Binary files /dev/null and b/browser_tests/tests/imageCompare.spec.ts-snapshots/image-compare-slider-75-chromium-linux.png differ
diff --git a/browser_tests/tests/imageCrop.spec.ts b/browser_tests/tests/imageCrop.spec.ts
new file mode 100644
index 0000000000..b619cdbe8c
--- /dev/null
+++ b/browser_tests/tests/imageCrop.spec.ts
@@ -0,0 +1,122 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+
+test.describe('Image Crop', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.workflow.loadWorkflow('widgets/image_crop_widget')
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test(
+    'Shows empty state when no input image is connected',
+    { tag: '@smoke' },
+    async ({ comfyPage }) => {
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      await expect(node).toBeVisible()
+
+      await expect(node.getByText('No input image connected')).toBeVisible()
+      await expect(node.locator('img[alt="Crop preview"]')).toHaveCount(0)
+    }
+  )
+
+  test(
+    'Renders bounding box coordinate inputs',
+    { tag: '@smoke' },
+    async ({ comfyPage }) => {
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      await expect(node).toBeVisible()
+
+      await expect(node.getByText('X')).toBeVisible()
+      await expect(node.getByText('Y')).toBeVisible()
+      await expect(node.getByText('Width')).toBeVisible()
+      await expect(node.getByText('Height')).toBeVisible()
+    }
+  )
+
+  test(
+    'Renders ratio selector and lock button',
+    { tag: '@ui' },
+    async ({ comfyPage }) => {
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      await expect(node).toBeVisible()
+
+      await expect(node.getByText('Ratio')).toBeVisible()
+      await expect(node.getByRole('button', { name: /lock/i })).toBeVisible()
+    }
+  )
+
+  test(
+    'Lock button toggles aspect ratio lock',
+    { tag: '@ui' },
+    async ({ comfyPage }) => {
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+
+      const lockButton = node.getByRole('button', {
+        name: 'Lock aspect ratio'
+      })
+      await expect(lockButton).toBeVisible()
+
+      await lockButton.click()
+      await expect(
+        node.getByRole('button', { name: 'Unlock aspect ratio' })
+      ).toBeVisible()
+
+      await node.getByRole('button', { name: 'Unlock aspect ratio' }).click()
+      await expect(
+        node.getByRole('button', { name: 'Lock aspect ratio' })
+      ).toBeVisible()
+    }
+  )
+
+  test(
+    'Ratio selector offers expected presets',
+    { tag: '@ui' },
+    async ({ comfyPage }) => {
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+
+      const trigger = node.getByRole('combobox')
+      await trigger.click()
+
+      const expectedRatios = ['1:1', '3:4', '4:3', '16:9', '9:16', 'Custom']
+      for (const label of expectedRatios) {
+        await expect(
+          comfyPage.page.getByRole('option', { name: label, exact: true })
+        ).toBeVisible()
+      }
+    }
+  )
+
+  test(
+    'Programmatically setting widget value updates bounding box inputs',
+    { tag: '@ui' },
+    async ({ comfyPage }) => {
+      const newBounds = { x: 50, y: 100, width: 200, height: 300 }
+
+      await comfyPage.page.evaluate(
+        ({ bounds }) => {
+          const node = window.app!.graph.getNodeById(1)
+          const widget = node?.widgets?.find((w) => w.type === 'imagecrop')
+          if (widget) {
+            widget.value = bounds
+            widget.callback?.(bounds)
+          }
+        },
+        { bounds: newBounds }
+      )
+      await comfyPage.nextFrame()
+
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      const inputs = node.locator('input[inputmode="decimal"]')
+
+      await expect.poll(() => inputs.nth(0).inputValue()).toBe('50')
+
+      await expect.poll(() => inputs.nth(1).inputValue()).toBe('100')
+
+      await expect.poll(() => inputs.nth(2).inputValue()).toBe('200')
+
+      await expect.poll(() => inputs.nth(3).inputValue()).toBe('300')
+    }
+  )
+})
diff --git a/browser_tests/tests/imagePastePriority.spec.ts b/browser_tests/tests/imagePastePriority.spec.ts
index 9bbab8634c..76ff1af689 100644
--- a/browser_tests/tests/imagePastePriority.spec.ts
+++ b/browser_tests/tests/imagePastePriority.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.describe(
   'Image paste priority over stale node metadata',
@@ -11,8 +11,8 @@ test.describe(
     }) => {
       await comfyPage.workflow.loadWorkflow('nodes/load_image_with_ksampler')
 
+      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(2)
       const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
-      expect(initialCount).toBe(2)
 
       // Copy the KSampler node (puts data-metadata in clipboard)
       const ksamplerNodes =
@@ -51,8 +51,9 @@ test.describe(
 
       // 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)
+      await expect
+        .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+        .toBe(initialCount)
     })
   }
 )
diff --git a/browser_tests/tests/interaction.spec.ts b/browser_tests/tests/interaction.spec.ts
index 3286e5f7fa..b90338ec60 100644
--- a/browser_tests/tests/interaction.spec.ts
+++ b/browser_tests/tests/interaction.spec.ts
@@ -5,12 +5,12 @@ import type { Position } from '@vueuse/core'
 import {
   comfyPageFixture as test,
   testComfySnapToGridGridSize
-} from '../fixtures/ComfyPage'
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import { DefaultGraphPositions } from '../fixtures/constants/defaultGraphPositions'
-import { TestIds } from '../fixtures/selectors'
-import type { NodeReference } from '../fixtures/utils/litegraphUtils'
-import type { WorkspaceStore } from '../types/globals'
+} from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { DefaultGraphPositions } from '@e2e/fixtures/constants/defaultGraphPositions'
+import { TestIds } from '@e2e/fixtures/selectors'
+import type { NodeReference } from '@e2e/fixtures/utils/litegraphUtils'
+import type { WorkspaceStore } from '@e2e/types/globals'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -31,11 +31,9 @@ test.describe('Item Interaction', { tag: ['@screenshot', '@node'] }, () => {
   test('Can pin/unpin items with keyboard shortcut', async ({ comfyPage }) => {
     await comfyPage.workflow.loadWorkflow('groups/mixed_graph_items')
     await comfyPage.canvas.press('Control+a')
-    await comfyPage.canvas.press('KeyP')
-    await comfyPage.nextFrame()
+    await comfyPage.keyboard.press('KeyP')
     await expect(comfyPage.canvas).toHaveScreenshot('pinned-all.png')
-    await comfyPage.canvas.press('KeyP')
-    await comfyPage.nextFrame()
+    await comfyPage.keyboard.press('KeyP')
     await expect(comfyPage.canvas).toHaveScreenshot('unpinned-all.png')
   })
 })
@@ -62,9 +60,9 @@ test.describe('Node Interaction', () => {
         for (const node of clipNodes) {
           await node.click('title', { modifiers: [modifier] })
         }
-        const selectedNodeCount =
-          await comfyPage.nodeOps.getSelectedGraphNodesCount()
-        expect(selectedNodeCount).toBe(clipNodes.length)
+        await expect
+          .poll(() => comfyPage.nodeOps.getSelectedGraphNodesCount())
+          .toBe(clipNodes.length)
       })
     })
 
@@ -76,13 +74,11 @@ test.describe('Node Interaction', () => {
         await comfyPage.canvas.click({
           position: DefaultGraphPositions.textEncodeNode1
         })
-        await comfyPage.nextFrame()
-        await expect(comfyPage.canvas).toHaveScreenshot('selected-node1.png')
+        await comfyPage.expectScreenshot(comfyPage.canvas, 'selected-node1.png')
         await comfyPage.canvas.click({
           position: DefaultGraphPositions.textEncodeNode2
         })
-        await comfyPage.nextFrame()
-        await expect(comfyPage.canvas).toHaveScreenshot('selected-node2.png')
+        await comfyPage.expectScreenshot(comfyPage.canvas, 'selected-node2.png')
       }
     )
 
@@ -111,9 +107,9 @@ test.describe('Node Interaction', () => {
       const clipNodes =
         await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
       await dragSelectNodes(comfyPage, clipNodes)
-      expect(await comfyPage.nodeOps.getSelectedGraphNodesCount()).toBe(
-        clipNodes.length
-      )
+      await expect
+        .poll(() => comfyPage.nodeOps.getSelectedGraphNodesCount())
+        .toBe(clipNodes.length)
     })
 
     test('Can move selected nodes using the Comfy.Canvas.MoveSelectedNodes.{Up|Down|Left|Right} commands', async ({
@@ -174,8 +170,50 @@ test.describe('Node Interaction', () => {
     await comfyPage.nodeOps.dragTextEncodeNode2()
     // Move mouse away to avoid hover highlight on the node at the drop position.
     await comfyPage.canvasOps.moveMouseToEmptyArea()
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot('dragged-node1.png')
+    await comfyPage.expectScreenshot(comfyPage.canvas, 'dragged-node1.png', {
+      maxDiffPixels: 50
+    })
+  })
+
+  test.describe('Node Duplication', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      // Pin this suite to the legacy canvas path so Alt+drag exercises
+      // LGraphCanvas, not the Vue node drag handler.
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
+    })
+
+    test('Can duplicate a regular node via Alt+drag', async ({ comfyPage }) => {
+      const before = await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
+      expect(
+        before,
+        'Expected exactly 2 CLIPTextEncode nodes in default graph'
+      ).toHaveLength(2)
+
+      const target = before[0]
+      const pos = await target.getPosition()
+      const src = { x: pos.x + 16, y: pos.y + 16 }
+
+      await comfyPage.page.mouse.move(src.x, src.y)
+      await comfyPage.page.keyboard.down('Alt')
+      try {
+        await comfyPage.page.mouse.down()
+        await comfyPage.nextFrame()
+        await comfyPage.page.mouse.move(src.x + 120, src.y + 80, { steps: 20 })
+        await comfyPage.page.mouse.up()
+        await comfyPage.nextFrame()
+      } finally {
+        await comfyPage.page.keyboard.up('Alt')
+      }
+      await comfyPage.canvasOps.moveMouseToEmptyArea()
+
+      await expect
+        .poll(
+          async () =>
+            (await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')).length
+        )
+        .toBe(3)
+      expect(await target.exists()).toBe(true)
+    })
   })
 
   test.describe('Edge Interaction', { tag: '@screenshot' }, () => {
@@ -220,10 +258,7 @@ test.describe('Node Interaction', () => {
       await expect(comfyPage.canvas).toHaveScreenshot('moved-link.png')
     })
 
-    // Shift drag copy link regressed. See https://github.com/Comfy-Org/ComfyUI_frontend/issues/2941
-    test.skip('Can copy link by shift-drag existing link', async ({
-      comfyPage
-    }) => {
+    test('Can copy link by shift-drag existing link', async ({ comfyPage }) => {
       await comfyPage.canvasOps.dragAndDrop(
         DefaultGraphPositions.clipTextEncodeNode1InputSlot,
         DefaultGraphPositions.emptySpace
@@ -317,8 +352,8 @@ test.describe('Node Interaction', () => {
         modifiers: ['Control', 'Alt'],
         position: loadCheckpointClipSlotPos
       })
-      await comfyPage.nextFrame()
-      await expect(comfyPage.canvas).toHaveScreenshot(
+      await comfyPage.expectScreenshot(
+        comfyPage.canvas,
         'batch-disconnect-links-disconnected.png'
       )
     }
@@ -328,20 +363,48 @@ test.describe('Node Interaction', () => {
     'Can toggle dom widget node open/closed',
     { tag: '@screenshot' },
     async ({ comfyPage }) => {
+      // Find the node whose collapse toggler matches the hardcoded position.
+      // getNodeRefsByType order is non-deterministic, so identify by proximity.
+      const nodes = await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
+      const togglerPos = DefaultGraphPositions.textEncodeNodeToggler
+      let targetNode = nodes[0]
+      let minDist = Infinity
+      for (const n of nodes) {
+        const pos = await n.getPosition()
+        const dist = Math.hypot(pos.x - togglerPos.x, pos.y - togglerPos.y)
+        if (dist < minDist) {
+          minDist = dist
+          targetNode = n
+        }
+      }
+
       await expect(comfyPage.canvas).toHaveScreenshot('default.png')
       await comfyPage.canvas.click({
-        position: DefaultGraphPositions.textEncodeNodeToggler
+        position: togglerPos
       })
-      await comfyPage.nextFrame()
+      await expect.poll(() => targetNode.isCollapsed()).toBe(true)
       await expect(comfyPage.canvas).toHaveScreenshot(
         'text-encode-toggled-off.png'
       )
-      await comfyPage.delay(1000)
+      // Wait for the double-click window (300ms) to expire so the next
+      // click at the same position isn't interpreted as a double-click.
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(() => {
+            const pointer = window.app!.canvas.pointer
+            if (!pointer.eLastDown) return true
+            return performance.now() - pointer.eLastDown.timeStamp > 300
+          })
+        )
+        .toBe(true)
       await comfyPage.canvas.click({
-        position: DefaultGraphPositions.textEncodeNodeToggler
+        position: togglerPos
       })
-      await comfyPage.nextFrame()
-      await expect(comfyPage.canvas).toHaveScreenshot(
+      await expect.poll(() => targetNode.isCollapsed()).toBe(false)
+      // Move mouse away to avoid hover highlight differences.
+      await comfyPage.canvasOps.moveMouseToEmptyArea()
+      await comfyPage.expectScreenshot(
+        comfyPage.canvas,
         'text-encode-toggled-back-open.png'
       )
     }
@@ -359,14 +422,17 @@ test.describe('Node Interaction', () => {
     })
     const legacyPrompt = comfyPage.page.locator('.graphdialog')
     await expect(legacyPrompt).toBeVisible()
-    await comfyPage.delay(300)
-    await comfyPage.canvas.click({
-      position: {
-        x: 10,
-        y: 10
-      }
-    })
-    await expect(legacyPrompt).toBeHidden()
+    // LiteGraph's graphdialog has a 256ms dismiss guard (Date.now() - clickTime > 256).
+    // Retry the canvas click until the dialog actually closes.
+    await expect(async () => {
+      await comfyPage.canvas.click({
+        position: {
+          x: 10,
+          y: 10
+        }
+      })
+      await expect(legacyPrompt).toBeHidden({ timeout: 500 })
+    }).toPass({ timeout: 5000 })
   })
 
   test('Can close prompt dialog with canvas click (text widget)', async ({
@@ -382,14 +448,17 @@ test.describe('Node Interaction', () => {
     })
     const legacyPrompt = comfyPage.page.locator('.graphdialog')
     await expect(legacyPrompt).toBeVisible()
-    await comfyPage.delay(300)
-    await comfyPage.canvas.click({
-      position: {
-        x: 10,
-        y: 10
-      }
-    })
-    await expect(legacyPrompt).toBeHidden()
+    // LiteGraph's graphdialog has a 256ms dismiss guard (Date.now() - clickTime > 256).
+    // Retry the canvas click until the dialog actually closes.
+    await expect(async () => {
+      await comfyPage.canvas.click({
+        position: {
+          x: 10,
+          y: 10
+        }
+      })
+      await expect(legacyPrompt).toBeHidden({ timeout: 500 })
+    }).toPass({ timeout: 5000 })
   })
 
   test(
@@ -421,7 +490,7 @@ test.describe('Node Interaction', () => {
       },
       delay: 5
     })
-    expect(await comfyPage.page.locator('.node-title-editor').count()).toBe(0)
+    await expect(comfyPage.page.locator('.node-title-editor')).toHaveCount(0)
   })
 
   test(
@@ -438,8 +507,7 @@ test.describe('Node Interaction', () => {
       await comfyPage.page.keyboard.up('Control')
       await comfyPage.nextFrame()
       // Confirm group title
-      await comfyPage.page.keyboard.press('Enter')
-      await comfyPage.nextFrame()
+      await comfyPage.keyboard.press('Enter')
       await expect(comfyPage.canvas).toHaveScreenshot(
         'group-selected-nodes.png'
       )
@@ -451,10 +519,31 @@ test.describe('Node Interaction', () => {
     { tag: '@screenshot' },
     async ({ comfyPage }) => {
       await comfyPage.workflow.loadWorkflow('groups/oversized_group')
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(() => {
+            const group = window.app!.graph.groups[0]
+            return group ? [group.size[0], group.size[1]] : null
+          })
+        )
+        .not.toBeNull()
+
+      const initialGroupSize = await comfyPage.page.evaluate(() => {
+        const group = window.app!.graph.groups[0]
+        return group ? [group.size[0], group.size[1]] : null
+      })
+
       await comfyPage.keyboard.selectAll()
       await comfyPage.nextFrame()
       await comfyPage.command.executeCommand('Comfy.Graph.FitGroupToContents')
-      await comfyPage.nextFrame()
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(() => {
+            const group = window.app!.graph.groups[0]
+            return group ? [group.size[0], group.size[1]] : null
+          })
+        )
+        .not.toEqual(initialGroupSize)
       await expect(comfyPage.canvas).toHaveScreenshot(
         'group-fit-to-contents.png'
       )
@@ -463,15 +552,19 @@ test.describe('Node Interaction', () => {
 
   test('Can pin/unpin nodes', { tag: '@screenshot' }, async ({ comfyPage }) => {
     await comfyPage.nodeOps.selectNodes(['CLIP Text Encode (Prompt)'])
+    const nodeRef = (
+      await comfyPage.nodeOps.getNodeRefsByTitle('CLIP Text Encode (Prompt)')
+    )[0]
+
     await comfyPage.command.executeCommand(
       'Comfy.Canvas.ToggleSelectedNodes.Pin'
     )
-    await comfyPage.nextFrame()
+    await expect.poll(() => nodeRef.isPinned()).toBe(true)
     await expect(comfyPage.canvas).toHaveScreenshot('nodes-pinned.png')
     await comfyPage.command.executeCommand(
       'Comfy.Canvas.ToggleSelectedNodes.Pin'
     )
-    await comfyPage.nextFrame()
+    await expect.poll(() => nodeRef.isPinned()).toBe(false)
     await expect(comfyPage.canvas).toHaveScreenshot('nodes-unpinned.png')
   })
 
@@ -480,11 +573,15 @@ test.describe('Node Interaction', () => {
     { tag: '@screenshot' },
     async ({ comfyPage }) => {
       await comfyPage.nodeOps.selectNodes(['CLIP Text Encode (Prompt)'])
+      const nodeRef = (
+        await comfyPage.nodeOps.getNodeRefsByTitle('CLIP Text Encode (Prompt)')
+      )[0]
+
       await comfyPage.canvas.press('Control+b')
-      await comfyPage.nextFrame()
+      await expect.poll(() => nodeRef.isBypassed()).toBe(true)
       await expect(comfyPage.canvas).toHaveScreenshot('nodes-bypassed.png')
       await comfyPage.canvas.press('Control+b')
-      await comfyPage.nextFrame()
+      await expect.poll(() => nodeRef.isBypassed()).toBe(false)
       await expect(comfyPage.canvas).toHaveScreenshot('nodes-unbypassed.png')
     }
   )
@@ -583,23 +680,23 @@ test.describe('Canvas Interaction', { tag: '@screenshot' }, () => {
     }
 
     await comfyPage.page.mouse.move(10, 10)
-    expect(await getCursorStyle()).toBe('default')
+    await expect.poll(() => getCursorStyle()).toBe('default')
     await comfyPage.page.mouse.down()
-    expect(await getCursorStyle()).toBe('grabbing')
+    await expect.poll(() => getCursorStyle()).toBe('grabbing')
     // Move mouse should not alter cursor style.
     await comfyPage.page.mouse.move(10, 20)
-    expect(await getCursorStyle()).toBe('grabbing')
+    await expect.poll(() => getCursorStyle()).toBe('grabbing')
     await comfyPage.page.mouse.up()
-    expect(await getCursorStyle()).toBe('default')
+    await expect.poll(() => getCursorStyle()).toBe('default')
 
     await comfyPage.page.keyboard.down('Space')
-    expect(await getCursorStyle()).toBe('grab')
+    await expect.poll(() => getCursorStyle()).toBe('grab')
     await comfyPage.page.mouse.down()
-    expect(await getCursorStyle()).toBe('grabbing')
+    await expect.poll(() => getCursorStyle()).toBe('grabbing')
     await comfyPage.page.mouse.up()
-    expect(await getCursorStyle()).toBe('grab')
+    await expect.poll(() => getCursorStyle()).toBe('grab')
     await comfyPage.page.keyboard.up('Space')
-    expect(await getCursorStyle()).toBe('default')
+    await expect.poll(() => getCursorStyle()).toBe('default')
   })
 
   // https://github.com/Comfy-Org/litegraph.js/pull/424
@@ -616,27 +713,27 @@ test.describe('Canvas Interaction', { tag: '@screenshot' }, () => {
 
     // Initial state check
     await comfyPage.page.mouse.move(10, 10)
-    expect(await getCursorStyle()).toBe('default')
+    await expect.poll(() => getCursorStyle()).toBe('default')
 
     // Click and hold
     await comfyPage.page.mouse.down()
-    expect(await getCursorStyle()).toBe('grabbing')
+    await expect.poll(() => getCursorStyle()).toBe('grabbing')
 
     // Press space while holding click
     await comfyPage.page.keyboard.down('Space')
-    expect(await getCursorStyle()).toBe('grabbing')
+    await expect.poll(() => getCursorStyle()).toBe('grabbing')
 
     // Release click while space is still down
     await comfyPage.page.mouse.up()
-    expect(await getCursorStyle()).toBe('grab')
+    await expect.poll(() => getCursorStyle()).toBe('grab')
 
     // Release space
     await comfyPage.page.keyboard.up('Space')
-    expect(await getCursorStyle()).toBe('default')
+    await expect.poll(() => getCursorStyle()).toBe('default')
 
     // Move mouse - cursor should remain default
     await comfyPage.page.mouse.move(20, 20)
-    expect(await getCursorStyle()).toBe('default')
+    await expect.poll(() => getCursorStyle()).toBe('default')
   })
 
   test('Can pan when dragging a link', async ({ comfyPage, comfyMouse }) => {
@@ -727,11 +824,14 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
     await comfyPage.settings.setSetting('Comfy.Workflow.Persist', false)
     await comfyPage.setup()
 
-    const openCount = await comfyPage.page.evaluate(() => {
-      return (window.app!.extensionManager as WorkspaceStore).workflow
-        .openWorkflows.length
-    })
-    expect(openCount).toBeGreaterThanOrEqual(1)
+    await expect
+      .poll(() =>
+        comfyPage.page.evaluate(() => {
+          return (window.app!.extensionManager as WorkspaceStore).workflow
+            .openWorkflows.length
+        })
+      )
+      .toBeGreaterThanOrEqual(1)
   })
 
   test('Restore workflow on reload (switch workflow)', async ({
@@ -787,7 +887,6 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
 
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-
       workflowA = generateUniqueFilename()
       await comfyPage.menu.topbar.saveWorkflow(workflowA)
       workflowB = generateUniqueFilename()
@@ -815,12 +914,24 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
         'Comfy.Workflow.WorkflowTabsPosition',
         'Topbar'
       )
-      const tabs = await comfyPage.menu.topbar.getTabNames()
-      const activeWorkflowName = await comfyPage.menu.topbar.getActiveTabName()
 
-      expect(tabs).toEqual(expect.arrayContaining([workflowA, workflowB]))
-      expect(tabs.indexOf(workflowA)).toBeLessThan(tabs.indexOf(workflowB))
-      expect(activeWorkflowName).toEqual(workflowB)
+      await expect
+        .poll(() => comfyPage.menu.topbar.getTabNames())
+        .toEqual(expect.arrayContaining([workflowA, workflowB]))
+
+      await expect
+        .poll(async () => {
+          const tabs = await comfyPage.menu.topbar.getTabNames()
+          return (
+            tabs.indexOf(workflowA) < tabs.indexOf(workflowB) &&
+            tabs.indexOf(workflowA) >= 0
+          )
+        })
+        .toBe(true)
+
+      await expect(comfyPage.menu.topbar.getActiveTab()).toContainText(
+        workflowB
+      )
     })
 
     test('Restores sidebar workflows after reload', async ({ comfyPage }) => {
@@ -829,17 +940,18 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
         'Sidebar'
       )
       await comfyPage.menu.workflowsTab.open()
-      const openWorkflows =
-        await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
-      const activeWorkflowName =
-        await comfyPage.menu.workflowsTab.getActiveWorkflowName()
-      expect(openWorkflows).toEqual(
-        expect.arrayContaining([workflowA, workflowB])
+      await expect
+        .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
+        .toEqual(expect.arrayContaining([workflowA, workflowB]))
+      await expect
+        .poll(async () => {
+          const ws = await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
+          return ws.indexOf(workflowA) < ws.indexOf(workflowB)
+        })
+        .toBe(true)
+      await expect(comfyPage.menu.workflowsTab.activeWorkflowLabel).toHaveText(
+        workflowB
       )
-      expect(openWorkflows.indexOf(workflowA)).toBeLessThan(
-        openWorkflows.indexOf(workflowB)
-      )
-      expect(activeWorkflowName).toEqual(workflowB)
     })
   })
 
@@ -849,7 +961,6 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
 
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-
       workflowA = generateUniqueFilename()
       await comfyPage.menu.topbar.saveWorkflow(workflowA)
       workflowB = generateUniqueFilename()
@@ -889,12 +1000,20 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
         })
       ).toBeVisible()
 
-      const tabs = await comfyPage.menu.topbar.getTabNames()
-      const activeWorkflowName = await comfyPage.menu.topbar.getActiveTabName()
+      await expect
+        .poll(async () => {
+          const tabs = await comfyPage.menu.topbar.getTabNames()
+          return (
+            tabs.includes(workflowA) &&
+            tabs.includes(workflowB) &&
+            tabs.indexOf(workflowA) < tabs.indexOf(workflowB)
+          )
+        })
+        .toBe(true)
 
-      expect(tabs).toEqual(expect.arrayContaining([workflowA, workflowB]))
-      expect(tabs.indexOf(workflowA)).toBeLessThan(tabs.indexOf(workflowB))
-      expect(activeWorkflowName).toEqual(workflowB)
+      await expect(comfyPage.menu.topbar.getActiveTab()).toContainText(
+        workflowB
+      )
     })
 
     test('Restores sidebar workflows after browser restart', async ({
@@ -905,17 +1024,18 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
         'Sidebar'
       )
       await comfyPage.menu.workflowsTab.open()
-      const openWorkflows =
-        await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
-      const activeWorkflowName =
-        await comfyPage.menu.workflowsTab.getActiveWorkflowName()
-      expect(openWorkflows).toEqual(
-        expect.arrayContaining([workflowA, workflowB])
+      await expect
+        .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
+        .toEqual(expect.arrayContaining([workflowA, workflowB]))
+      await expect
+        .poll(async () => {
+          const ws = await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
+          return ws.indexOf(workflowA) < ws.indexOf(workflowB)
+        })
+        .toBe(true)
+      await expect(comfyPage.menu.workflowsTab.activeWorkflowLabel).toHaveText(
+        workflowB
       )
-      expect(openWorkflows.indexOf(workflowA)).toBeLessThan(
-        openWorkflows.indexOf(workflowB)
-      )
-      expect(activeWorkflowName).toEqual(workflowB)
     })
   })
 
@@ -930,18 +1050,15 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
 })
 
 test.describe('Load duplicate workflow', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-  })
-
   test('A workflow can be loaded multiple times in a row', async ({
     comfyPage
   }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')
     await comfyPage.menu.workflowsTab.open()
     await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
     await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')
-    expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(1)
+    await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(1)
   })
 })
 
@@ -1046,8 +1163,8 @@ test.describe('Canvas Navigation', { tag: '@screenshot' }, () => {
       await comfyPage.page.mouse.down({ button: 'middle' })
       await comfyPage.page.mouse.move(150, 150)
       await comfyPage.page.mouse.up({ button: 'middle' })
-      await comfyPage.nextFrame()
-      await expect(comfyPage.canvas).toHaveScreenshot(
+      await comfyPage.expectScreenshot(
+        comfyPage.canvas,
         'legacy-middle-drag-pan.png'
       )
     })
@@ -1055,14 +1172,14 @@ test.describe('Canvas Navigation', { tag: '@screenshot' }, () => {
     test('Mouse wheel should zoom in/out', async ({ comfyPage }) => {
       await comfyPage.page.mouse.move(400, 300)
       await comfyPage.page.mouse.wheel(0, -120)
-      await comfyPage.nextFrame()
-      await expect(comfyPage.canvas).toHaveScreenshot(
+      await comfyPage.expectScreenshot(
+        comfyPage.canvas,
         'legacy-wheel-zoom-in.png'
       )
 
       await comfyPage.page.mouse.wheel(0, 240)
-      await comfyPage.nextFrame()
-      await expect(comfyPage.canvas).toHaveScreenshot(
+      await comfyPage.expectScreenshot(
+        comfyPage.canvas,
         'legacy-wheel-zoom-out.png'
       )
     })
@@ -1072,8 +1189,9 @@ test.describe('Canvas Navigation', { tag: '@screenshot' }, () => {
         position: DefaultGraphPositions.textEncodeNode1
       })
       await comfyPage.nextFrame()
-      const selectedCount = await comfyPage.nodeOps.getSelectedGraphNodesCount()
-      expect(selectedCount).toBe(1)
+      await expect
+        .poll(() => comfyPage.nodeOps.getSelectedGraphNodesCount())
+        .toBe(1)
       await expect(comfyPage.canvas).toHaveScreenshot(
         'legacy-click-node-select.png'
       )
@@ -1108,8 +1226,9 @@ test.describe('Canvas Navigation', { tag: '@screenshot' }, () => {
         }
       )
 
-      const selectedCount = await comfyPage.nodeOps.getSelectedGraphNodesCount()
-      expect(selectedCount).toBe(clipNodes.length)
+      await expect
+        .poll(() => comfyPage.nodeOps.getSelectedGraphNodesCount())
+        .toBe(clipNodes.length)
       await expect(comfyPage.canvas).toHaveScreenshot(
         'standard-left-drag-select.png'
       )
@@ -1120,8 +1239,8 @@ test.describe('Canvas Navigation', { tag: '@screenshot' }, () => {
       await comfyPage.page.mouse.down({ button: 'middle' })
       await comfyPage.page.mouse.move(150, 150)
       await comfyPage.page.mouse.up({ button: 'middle' })
-      await comfyPage.nextFrame()
-      await expect(comfyPage.canvas).toHaveScreenshot(
+      await comfyPage.expectScreenshot(
+        comfyPage.canvas,
         'standard-middle-drag-pan.png'
       )
     })
@@ -1131,16 +1250,16 @@ test.describe('Canvas Navigation', { tag: '@screenshot' }, () => {
       await comfyPage.page.keyboard.down('Control')
       await comfyPage.page.mouse.wheel(0, -120)
       await comfyPage.page.keyboard.up('Control')
-      await comfyPage.nextFrame()
-      await expect(comfyPage.canvas).toHaveScreenshot(
+      await comfyPage.expectScreenshot(
+        comfyPage.canvas,
         'standard-ctrl-wheel-zoom-in.png'
       )
 
       await comfyPage.page.keyboard.down('Control')
       await comfyPage.page.mouse.wheel(0, 240)
       await comfyPage.page.keyboard.up('Control')
-      await comfyPage.nextFrame()
-      await expect(comfyPage.canvas).toHaveScreenshot(
+      await comfyPage.expectScreenshot(
+        comfyPage.canvas,
         'standard-ctrl-wheel-zoom-out.png'
       )
     })
@@ -1152,8 +1271,9 @@ test.describe('Canvas Navigation', { tag: '@screenshot' }, () => {
         position: DefaultGraphPositions.textEncodeNode1
       })
       await comfyPage.nextFrame()
-      const selectedCount = await comfyPage.nodeOps.getSelectedGraphNodesCount()
-      expect(selectedCount).toBe(1)
+      await expect
+        .poll(() => comfyPage.nodeOps.getSelectedGraphNodesCount())
+        .toBe(1)
       await expect(comfyPage.canvas).toHaveScreenshot(
         'standard-click-node-select.png'
       )
@@ -1161,7 +1281,7 @@ test.describe('Canvas Navigation', { tag: '@screenshot' }, () => {
 
     test('Space + left-click drag should pan canvas', async ({ comfyPage }) => {
       // Click canvas to focus it
-      await comfyPage.page.click('canvas')
+      await comfyPage.canvas.click()
       await comfyPage.nextFrame()
 
       await comfyPage.page.keyboard.down('Space')
@@ -1194,14 +1314,14 @@ test.describe('Canvas Navigation', { tag: '@screenshot' }, () => {
         }
       )
 
-      const selectedCountAfterDrag =
-        await comfyPage.nodeOps.getSelectedGraphNodesCount()
-      expect(selectedCountAfterDrag).toBeGreaterThan(0)
+      await expect
+        .poll(() => comfyPage.nodeOps.getSelectedGraphNodesCount())
+        .toBeGreaterThan(0)
 
       await comfyPage.canvasOps.clickEmptySpace()
-      const selectedCountAfterClear =
-        await comfyPage.nodeOps.getSelectedGraphNodesCount()
-      expect(selectedCountAfterClear).toBe(0)
+      await expect
+        .poll(() => comfyPage.nodeOps.getSelectedGraphNodesCount())
+        .toBe(0)
 
       await comfyPage.page.keyboard.down('Space')
       await comfyPage.canvasOps.dragAndDrop(
@@ -1216,9 +1336,9 @@ test.describe('Canvas Navigation', { tag: '@screenshot' }, () => {
       )
       await comfyPage.page.keyboard.up('Space')
 
-      const selectedCountAfterSpaceDrag =
-        await comfyPage.nodeOps.getSelectedGraphNodesCount()
-      expect(selectedCountAfterSpaceDrag).toBe(0)
+      await expect
+        .poll(() => comfyPage.nodeOps.getSelectedGraphNodesCount())
+        .toBe(0)
     })
   })
 
@@ -1230,34 +1350,32 @@ test.describe('Canvas Navigation', { tag: '@screenshot' }, () => {
       'panning'
     )
 
-    await comfyPage.page.click('canvas')
-    await comfyPage.nextFrame()
-
-    await expect(comfyPage.canvas).toHaveScreenshot('standard-initial.png')
+    await comfyPage.canvas.click()
+    await comfyPage.expectScreenshot(comfyPage.canvas, 'standard-initial.png')
 
     await comfyPage.page.mouse.move(400, 300)
 
     await comfyPage.page.keyboard.down('Shift')
     await comfyPage.page.mouse.wheel(0, 120)
     await comfyPage.page.keyboard.up('Shift')
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot(
+    await comfyPage.expectScreenshot(
+      comfyPage.canvas,
       'standard-shift-wheel-pan-right.png'
     )
 
     await comfyPage.page.keyboard.down('Shift')
     await comfyPage.page.mouse.wheel(0, -240)
     await comfyPage.page.keyboard.up('Shift')
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot(
+    await comfyPage.expectScreenshot(
+      comfyPage.canvas,
       'standard-shift-wheel-pan-left.png'
     )
 
     await comfyPage.page.keyboard.down('Shift')
     await comfyPage.page.mouse.wheel(0, 120)
     await comfyPage.page.keyboard.up('Shift')
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot(
+    await comfyPage.expectScreenshot(
+      comfyPage.canvas,
       'standard-shift-wheel-pan-center.png'
     )
   })
@@ -1302,7 +1420,7 @@ test.describe('Canvas Navigation', { tag: '@screenshot' }, () => {
       )
       await comfyPage.page.mouse.move(50, 50)
       await comfyPage.page.mouse.down()
-      expect(await getCursorStyle()).toBe('grabbing')
+      await expect.poll(() => getCursorStyle()).toBe('grabbing')
       await comfyPage.page.mouse.up()
     })
   })
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/copied-link-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/copied-link-chromium-linux.png
new file mode 100644
index 0000000000..72361c51b6
Binary files /dev/null and b/browser_tests/tests/interaction.spec.ts-snapshots/copied-link-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/text-encode-toggled-back-open-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/text-encode-toggled-back-open-chromium-linux.png
index 72361c51b6..8c17dbc6fb 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/text-encode-toggled-back-open-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/text-encode-toggled-back-open-chromium-linux.png differ
diff --git a/browser_tests/tests/jobHistoryActions.spec.ts b/browser_tests/tests/jobHistoryActions.spec.ts
index f993c80332..ef91c94d3a 100644
--- a/browser_tests/tests/jobHistoryActions.spec.ts
+++ b/browser_tests/tests/jobHistoryActions.spec.ts
@@ -3,13 +3,10 @@ import type { Locator } from '@playwright/test'
 import {
   comfyPageFixture as test,
   comfyExpect as expect
-} from '../fixtures/ComfyPage'
+} from '@e2e/fixtures/ComfyPage'
 
 test.describe('Job History Actions', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.setup()
-
     // Expand the queue overlay so the JobHistoryActionsMenu is visible
     await comfyPage.page.getByTestId('queue-overlay-toggle').click()
   })
@@ -25,7 +22,7 @@ test.describe('Job History Actions', { tag: '@ui' }, () => {
     await openMoreOptionsPopover(comfyPage)
 
     await expect(
-      comfyPage.page.locator('[data-testid="docked-job-history-action"]')
+      comfyPage.page.getByTestId('docked-job-history-action')
     ).toBeVisible()
   })
 
@@ -34,9 +31,7 @@ test.describe('Job History Actions', { tag: '@ui' }, () => {
   }) => {
     await openMoreOptionsPopover(comfyPage)
 
-    const action = comfyPage.page.locator(
-      '[data-testid="docked-job-history-action"]'
-    )
+    const action = comfyPage.page.getByTestId('docked-job-history-action')
     await expect(action).toBeVisible()
     await expect(action).not.toBeEmpty()
   })
@@ -45,7 +40,7 @@ test.describe('Job History Actions', { tag: '@ui' }, () => {
     await openMoreOptionsPopover(comfyPage)
 
     await expect(
-      comfyPage.page.locator('[data-testid="show-run-progress-bar-action"]')
+      comfyPage.page.getByTestId('show-run-progress-bar-action')
     ).toBeVisible()
   })
 
@@ -53,20 +48,18 @@ test.describe('Job History Actions', { tag: '@ui' }, () => {
     await openMoreOptionsPopover(comfyPage)
 
     await expect(
-      comfyPage.page.locator('[data-testid="clear-history-action"]')
+      comfyPage.page.getByTestId('clear-history-action')
     ).toBeVisible()
   })
 
   test('Clicking docked job history closes popover', async ({ comfyPage }) => {
     await openMoreOptionsPopover(comfyPage)
 
-    const action = comfyPage.page.locator(
-      '[data-testid="docked-job-history-action"]'
-    )
+    const action = comfyPage.page.getByTestId('docked-job-history-action')
     await expect(action).toBeVisible()
     await action.click()
 
-    await expect(action).not.toBeVisible()
+    await expect(action).toBeHidden()
   })
 
   test('Clicking show run progress bar toggles setting', async ({
@@ -78,14 +71,13 @@ test.describe('Job History Actions', { tag: '@ui' }, () => {
 
     await openMoreOptionsPopover(comfyPage)
 
-    const action = comfyPage.page.locator(
-      '[data-testid="show-run-progress-bar-action"]'
-    )
+    const action = comfyPage.page.getByTestId('show-run-progress-bar-action')
     await action.click()
 
-    const settingAfter = await comfyPage.settings.getSetting<boolean>(
-      'Comfy.Queue.ShowRunProgressBar'
-    )
-    expect(settingAfter).toBe(!settingBefore)
+    await expect
+      .poll(() =>
+        comfyPage.settings.getSetting<boolean>('Comfy.Queue.ShowRunProgressBar')
+      )
+      .toBe(!settingBefore)
   })
 })
diff --git a/browser_tests/tests/keybindingPresets.spec.ts b/browser_tests/tests/keybindingPresets.spec.ts
index b416488222..43c5629d8a 100644
--- a/browser_tests/tests/keybindingPresets.spec.ts
+++ b/browser_tests/tests/keybindingPresets.spec.ts
@@ -5,7 +5,7 @@ import path from 'node:path'
 import type { Page } from '@playwright/test'
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 const TEST_PRESET = {
   name: 'test-preset',
@@ -79,9 +79,7 @@ test.describe('Keybinding Presets', { tag: '@keyboard' }, () => {
     await expect(presetTrigger).toContainText('test-preset')
 
     // Wait for toast to auto-dismiss, then close settings via Escape
-    await expect(comfyPage.toast.visibleToasts).toHaveCount(0, {
-      timeout: 5000
-    })
+    await expect(comfyPage.toast.visibleToasts).toHaveCount(0)
     await page.keyboard.press('Escape')
     await comfyPage.settingDialog.waitForHidden()
 
@@ -133,9 +131,7 @@ test.describe('Keybinding Presets', { tag: '@keyboard' }, () => {
     await expect(presetTrigger).toContainText('test-preset')
 
     // Wait for toast to auto-dismiss
-    await expect(comfyPage.toast.visibleToasts).toHaveCount(0, {
-      timeout: 5000
-    })
+    await expect(comfyPage.toast.visibleToasts).toHaveCount(0)
 
     // Export via ellipsis menu
     await menuButton.click()
@@ -183,9 +179,7 @@ test.describe('Keybinding Presets', { tag: '@keyboard' }, () => {
     await expect(presetTrigger).toContainText('test-preset')
 
     // Wait for toast to auto-dismiss
-    await expect(comfyPage.toast.visibleToasts).toHaveCount(0, {
-      timeout: 5000
-    })
+    await expect(comfyPage.toast.visibleToasts).toHaveCount(0)
 
     // Delete via ellipsis menu
     await menuButton.click()
@@ -223,9 +217,7 @@ test.describe('Keybinding Presets', { tag: '@keyboard' }, () => {
     await expect(presetTrigger).toContainText('test-preset')
 
     // Wait for toast to auto-dismiss
-    await expect(comfyPage.toast.visibleToasts).toHaveCount(0, {
-      timeout: 5000
-    })
+    await expect(comfyPage.toast.visibleToasts).toHaveCount(0)
 
     // Save as new preset via ellipsis menu
     await menuButton.click()
@@ -237,9 +229,7 @@ test.describe('Keybinding Presets', { tag: '@keyboard' }, () => {
     await promptInput.press('Enter')
 
     // Wait for toast to auto-dismiss
-    await expect(comfyPage.toast.visibleToasts).toHaveCount(0, {
-      timeout: 5000
-    })
+    await expect(comfyPage.toast.visibleToasts).toHaveCount(0)
 
     // Verify preset trigger shows my-custom-preset
     await expect(presetTrigger).toContainText('my-custom-preset')
diff --git a/browser_tests/tests/keybindings.spec.ts b/browser_tests/tests/keybindings.spec.ts
index 4810a3fb14..04cee46cfa 100644
--- a/browser_tests/tests/keybindings.spec.ts
+++ b/browser_tests/tests/keybindings.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -18,9 +18,9 @@ test.describe('Keybindings', { tag: '@keyboard' }, () => {
     await textBox.click()
     await textBox.fill('k')
     await expect(textBox).toHaveValue('k')
-    expect(await comfyPage.page.evaluate(() => window.TestCommand)).toBe(
-      undefined
-    )
+    await expect
+      .poll(() => comfyPage.page.evaluate(() => window.TestCommand))
+      .toBe(undefined)
   })
 
   test('Should not trigger modifier keybinding when typing in input fields', async ({
@@ -35,7 +35,9 @@ test.describe('Keybindings', { tag: '@keyboard' }, () => {
     await textBox.fill('q')
     await textBox.press('Control+k')
     await expect(textBox).toHaveValue('q')
-    expect(await comfyPage.page.evaluate(() => window.TestCommand)).toBe(true)
+    await expect
+      .poll(() => comfyPage.page.evaluate(() => window.TestCommand))
+      .toBe(true)
   })
 
   test('Should not trigger keybinding reserved by text input when typing in input fields', async ({
@@ -49,8 +51,8 @@ test.describe('Keybindings', { tag: '@keyboard' }, () => {
     await textBox.click()
     await textBox.press('Control+v')
     await expect(textBox).toBeFocused()
-    expect(await comfyPage.page.evaluate(() => window.TestCommand)).toBe(
-      undefined
-    )
+    await expect
+      .poll(() => comfyPage.page.evaluate(() => window.TestCommand))
+      .toBe(undefined)
   })
 })
diff --git a/browser_tests/tests/linearMode.spec.ts b/browser_tests/tests/linearMode.spec.ts
index 7551e31bbc..d9a5045f45 100644
--- a/browser_tests/tests/linearMode.spec.ts
+++ b/browser_tests/tests/linearMode.spec.ts
@@ -1,61 +1,46 @@
 import {
   comfyPageFixture as test,
   comfyExpect as expect
-} from '../fixtures/ComfyPage'
+} from '@e2e/fixtures/ComfyPage'
 
 test.describe('Linear Mode', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.setup()
-  })
-
   test('Displays linear controls when app mode active', async ({
     comfyPage
   }) => {
     await comfyPage.appMode.enterAppModeWithInputs([])
 
-    await expect(
-      comfyPage.page.locator('[data-testid="linear-widgets"]')
-    ).toBeVisible({ timeout: 5000 })
+    await expect(comfyPage.page.getByTestId('linear-widgets')).toBeVisible()
   })
 
   test('Run button visible in linear mode', async ({ comfyPage }) => {
     await comfyPage.appMode.enterAppModeWithInputs([])
 
-    await expect(
-      comfyPage.page.locator('[data-testid="linear-run-button"]')
-    ).toBeVisible({ timeout: 5000 })
+    await expect(comfyPage.page.getByTestId('linear-run-button')).toBeVisible()
   })
 
   test('Workflow info section visible', async ({ comfyPage }) => {
     await comfyPage.appMode.enterAppModeWithInputs([])
 
     await expect(
-      comfyPage.page.locator('[data-testid="linear-workflow-info"]')
-    ).toBeVisible({ timeout: 5000 })
+      comfyPage.page.getByTestId('linear-workflow-info')
+    ).toBeVisible()
   })
 
   test('Returns to graph mode', async ({ comfyPage }) => {
     await comfyPage.appMode.enterAppModeWithInputs([])
 
-    await expect(
-      comfyPage.page.locator('[data-testid="linear-widgets"]')
-    ).toBeVisible({ timeout: 5000 })
+    await expect(comfyPage.page.getByTestId('linear-widgets')).toBeVisible()
 
     await comfyPage.appMode.toggleAppMode()
 
-    await expect(comfyPage.canvas).toBeVisible({ timeout: 5000 })
-    await expect(
-      comfyPage.page.locator('[data-testid="linear-widgets"]')
-    ).not.toBeVisible()
+    await expect(comfyPage.canvas).toBeVisible()
+    await expect(comfyPage.page.getByTestId('linear-widgets')).toBeHidden()
   })
 
   test('Canvas not visible in app mode', async ({ comfyPage }) => {
     await comfyPage.appMode.enterAppModeWithInputs([])
 
-    await expect(
-      comfyPage.page.locator('[data-testid="linear-widgets"]')
-    ).toBeVisible({ timeout: 5000 })
-    await expect(comfyPage.canvas).not.toBeVisible()
+    await expect(comfyPage.page.getByTestId('linear-widgets')).toBeVisible()
+    await expect(comfyPage.canvas).toBeHidden()
   })
 })
diff --git a/browser_tests/tests/litegraphEvent.spec.ts b/browser_tests/tests/litegraphEvent.spec.ts
index a412200b5e..d6e1062552 100644
--- a/browser_tests/tests/litegraphEvent.spec.ts
+++ b/browser_tests/tests/litegraphEvent.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
diff --git a/browser_tests/tests/load3d/Load3DHelper.ts b/browser_tests/tests/load3d/Load3DHelper.ts
new file mode 100644
index 0000000000..f0a2ff6779
--- /dev/null
+++ b/browser_tests/tests/load3d/Load3DHelper.ts
@@ -0,0 +1,53 @@
+import { expect } from '@playwright/test'
+import type { Locator } from '@playwright/test'
+
+import { TestIds } from '@e2e/fixtures/selectors'
+
+export class Load3DHelper {
+  constructor(readonly node: Locator) {}
+
+  get canvas(): Locator {
+    return this.node.locator('canvas')
+  }
+
+  get menuButton(): Locator {
+    return this.node.getByRole('button', { name: /show menu/i })
+  }
+
+  get recordingButton(): Locator {
+    return this.node.getByRole('button', { name: /start recording/i })
+  }
+
+  get colorInput(): Locator {
+    return this.node.locator('input[type="color"]')
+  }
+
+  get openViewerButton(): Locator {
+    return this.node.getByRole('button', { name: /open in 3d viewer/i })
+  }
+
+  getUploadButton(label: string): Locator {
+    return this.node.getByText(label)
+  }
+
+  getMenuCategory(name: string): Locator {
+    return this.node.getByText(name, { exact: true })
+  }
+
+  async openMenu(): Promise<void> {
+    await this.menuButton.click()
+  }
+
+  async setBackgroundColor(hex: string): Promise<void> {
+    await this.colorInput.evaluate((el, value) => {
+      ;(el as HTMLInputElement).value = value
+      el.dispatchEvent(new Event('input', { bubbles: true }))
+    }, hex)
+  }
+
+  async waitForModelLoaded(): Promise<void> {
+    await expect(this.node.getByTestId(TestIds.loading.overlay)).toBeHidden({
+      timeout: 30000
+    })
+  }
+}
diff --git a/browser_tests/tests/load3d/Load3DViewerHelper.ts b/browser_tests/tests/load3d/Load3DViewerHelper.ts
new file mode 100644
index 0000000000..ebff17b00b
--- /dev/null
+++ b/browser_tests/tests/load3d/Load3DViewerHelper.ts
@@ -0,0 +1,30 @@
+import { expect } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
+
+export class Load3DViewerHelper {
+  readonly dialog: Locator
+
+  constructor(readonly page: Page) {
+    this.dialog = page.locator('[aria-labelledby="global-load3d-viewer"]')
+  }
+
+  get canvas(): Locator {
+    return this.dialog.locator('canvas')
+  }
+
+  get sidebar(): Locator {
+    return this.dialog.getByTestId('load3d-viewer-sidebar')
+  }
+
+  get cancelButton(): Locator {
+    return this.dialog.getByRole('button', { name: /cancel/i })
+  }
+
+  async waitForOpen(): Promise<void> {
+    await expect(this.dialog).toBeVisible({ timeout: 10000 })
+  }
+
+  async waitForClosed(): Promise<void> {
+    await expect(this.dialog).toBeHidden()
+  }
+}
diff --git a/browser_tests/tests/load3d/load3d.spec.ts b/browser_tests/tests/load3d/load3d.spec.ts
new file mode 100644
index 0000000000..573fa0c595
--- /dev/null
+++ b/browser_tests/tests/load3d/load3d.spec.ts
@@ -0,0 +1,151 @@
+import { expect } from '@playwright/test'
+
+import { assetPath } from '@e2e/fixtures/utils/paths'
+import { load3dTest as test } from '@e2e/fixtures/helpers/Load3DFixtures'
+
+test.describe('Load3D', () => {
+  test(
+    'Renders canvas with upload buttons and controls menu',
+    { tag: ['@smoke', '@screenshot'] },
+    async ({ load3d }) => {
+      await expect(load3d.node).toBeVisible()
+
+      await expect(load3d.canvas).toBeVisible()
+
+      await expect
+        .poll(async () => {
+          const b = await load3d.canvas.boundingBox()
+          return b?.width ?? 0
+        })
+        .toBeGreaterThan(0)
+      await expect
+        .poll(async () => {
+          const b = await load3d.canvas.boundingBox()
+          return b?.height ?? 0
+        })
+        .toBeGreaterThan(0)
+
+      await expect(load3d.getUploadButton('upload 3d model')).toBeVisible()
+      await expect(
+        load3d.getUploadButton('upload extra resources')
+      ).toBeVisible()
+      await expect(load3d.getUploadButton('clear')).toBeVisible()
+
+      await expect(load3d.menuButton).toBeVisible()
+
+      await expect(load3d.node).toHaveScreenshot('load3d-empty-node.png', {
+        maxDiffPixelRatio: 0.05
+      })
+    }
+  )
+
+  test(
+    'Controls menu opens and shows all categories',
+    { tag: ['@smoke', '@screenshot'] },
+    async ({ load3d }) => {
+      await load3d.openMenu()
+
+      await expect(load3d.getMenuCategory('Scene')).toBeVisible()
+      await expect(load3d.getMenuCategory('Model')).toBeVisible()
+      await expect(load3d.getMenuCategory('Camera')).toBeVisible()
+      await expect(load3d.getMenuCategory('Light')).toBeVisible()
+      await expect(load3d.getMenuCategory('Export')).toBeVisible()
+
+      await expect(load3d.node).toHaveScreenshot(
+        'load3d-controls-menu-open.png',
+        { maxDiffPixelRatio: 0.05 }
+      )
+    }
+  )
+
+  test(
+    'Changing background color updates the scene',
+    { tag: ['@smoke', '@screenshot'] },
+    async ({ comfyPage, load3d }) => {
+      await load3d.setBackgroundColor('#cc3333')
+      await comfyPage.nextFrame()
+
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(() => {
+            const n = window.app!.graph.getNodeById(1)
+            const config = n?.properties?.['Scene Config'] as
+              | Record<string, string>
+              | undefined
+            return config?.backgroundColor
+          })
+        )
+        .toBe('#cc3333')
+
+      await expect(load3d.node).toHaveScreenshot('load3d-red-background.png', {
+        maxDiffPixelRatio: 0.05
+      })
+    }
+  )
+
+  test(
+    'Recording controls are visible for Load3D',
+    { tag: '@smoke' },
+    async ({ load3d }) => {
+      await expect(load3d.recordingButton).toBeVisible()
+    }
+  )
+
+  test(
+    'Uploads a 3D model via button and renders it',
+    { tag: ['@screenshot'] },
+    async ({ comfyPage, load3d }) => {
+      const uploadResponsePromise = comfyPage.page.waitForResponse(
+        (resp) => resp.url().includes('/upload/') && resp.status() === 200,
+        { timeout: 15000 }
+      )
+
+      const fileChooserPromise = comfyPage.page.waitForEvent('filechooser')
+      await load3d.getUploadButton('upload 3d model').click()
+      const fileChooser = await fileChooserPromise
+      await fileChooser.setFiles(assetPath('cube.obj'))
+
+      await uploadResponsePromise
+
+      const node = await comfyPage.nodeOps.getNodeRefById(1)
+      const modelFileWidget = await node.getWidget(0)
+      await expect.poll(() => modelFileWidget.getValue()).toContain('cube.obj')
+
+      await load3d.waitForModelLoaded()
+      await comfyPage.expectScreenshot(
+        load3d.node,
+        'load3d-uploaded-cube-obj.png',
+        { maxDiffPixelRatio: 0.1 }
+      )
+    }
+  )
+
+  test(
+    'Drag-and-drops a 3D model onto the canvas',
+    { tag: ['@screenshot'] },
+    async ({ comfyPage, load3d }) => {
+      const canvasBox = await load3d.canvas.boundingBox()
+      expect(canvasBox, 'Canvas bounding box should exist').not.toBeNull()
+      const dropPosition = {
+        x: canvasBox!.x + canvasBox!.width / 2,
+        y: canvasBox!.y + canvasBox!.height / 2
+      }
+
+      await comfyPage.dragDrop.dragAndDropFile('cube.obj', {
+        dropPosition,
+        waitForUpload: true
+      })
+
+      const node = await comfyPage.nodeOps.getNodeRefById(1)
+      const modelFileWidget = await node.getWidget(0)
+      await expect.poll(() => modelFileWidget.getValue()).toContain('cube.obj')
+
+      await load3d.waitForModelLoaded()
+      await comfyPage.expectScreenshot(
+        load3d.node,
+        'load3d-dropped-cube-obj.png',
+        { maxDiffPixelRatio: 0.1 }
+      )
+    }
+  )
+})
diff --git a/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-controls-menu-open-chromium-linux.png b/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-controls-menu-open-chromium-linux.png
new file mode 100644
index 0000000000..a2accb818e
Binary files /dev/null and b/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-controls-menu-open-chromium-linux.png differ
diff --git a/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-dropped-cube-obj-chromium-linux.png b/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-dropped-cube-obj-chromium-linux.png
new file mode 100644
index 0000000000..4871976d50
Binary files /dev/null and b/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-dropped-cube-obj-chromium-linux.png differ
diff --git a/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-empty-node-chromium-linux.png b/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-empty-node-chromium-linux.png
new file mode 100644
index 0000000000..26242916f8
Binary files /dev/null and b/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-empty-node-chromium-linux.png differ
diff --git a/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-red-background-chromium-linux.png b/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-red-background-chromium-linux.png
new file mode 100644
index 0000000000..edf33f281d
Binary files /dev/null and b/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-red-background-chromium-linux.png differ
diff --git a/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-uploaded-cube-obj-chromium-linux.png b/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-uploaded-cube-obj-chromium-linux.png
new file mode 100644
index 0000000000..39de870310
Binary files /dev/null and b/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-uploaded-cube-obj-chromium-linux.png differ
diff --git a/browser_tests/tests/load3d/load3dViewer.spec.ts b/browser_tests/tests/load3d/load3dViewer.spec.ts
new file mode 100644
index 0000000000..639899a137
--- /dev/null
+++ b/browser_tests/tests/load3d/load3dViewer.spec.ts
@@ -0,0 +1,54 @@
+import { expect } from '@playwright/test'
+
+import { assetPath } from '@e2e/fixtures/utils/paths'
+import { load3dViewerTest as test } from '@e2e/fixtures/helpers/Load3DFixtures'
+
+test.describe('Load3D Viewer', () => {
+  test.beforeEach(async ({ comfyPage, load3d }) => {
+    // Upload cube.obj so the node has a model loaded
+    const uploadResponsePromise = comfyPage.page.waitForResponse(
+      (resp) => resp.url().includes('/upload/') && resp.status() === 200,
+      { timeout: 15000 }
+    )
+    const fileChooserPromise = comfyPage.page.waitForEvent('filechooser')
+    await load3d.getUploadButton('upload 3d model').click()
+    const fileChooser = await fileChooserPromise
+    await fileChooser.setFiles(assetPath('cube.obj'))
+    await uploadResponsePromise
+
+    const nodeRef = await comfyPage.nodeOps.getNodeRefById(1)
+    const modelFileWidget = await nodeRef.getWidget(0)
+    await expect.poll(() => modelFileWidget.getValue()).toContain('cube.obj')
+
+    await load3d.waitForModelLoaded()
+  })
+
+  test(
+    'Opens viewer dialog with canvas and controls sidebar',
+    { tag: '@smoke' },
+    async ({ load3d, viewer }) => {
+      await load3d.openViewerButton.click()
+      await viewer.waitForOpen()
+
+      await expect(viewer.canvas).toBeVisible()
+      const canvasBox = await viewer.canvas.boundingBox()
+      expect(canvasBox!.width).toBeGreaterThan(0)
+      expect(canvasBox!.height).toBeGreaterThan(0)
+
+      await expect(viewer.sidebar).toBeVisible()
+      await expect(viewer.cancelButton).toBeVisible()
+    }
+  )
+
+  test(
+    'Cancel button closes the viewer dialog',
+    { tag: '@smoke' },
+    async ({ load3d, viewer }) => {
+      await load3d.openViewerButton.click()
+      await viewer.waitForOpen()
+
+      await viewer.cancelButton.click()
+      await viewer.waitForClosed()
+    }
+  )
+})
diff --git a/browser_tests/tests/load3d/preview3dExecution.spec.ts b/browser_tests/tests/load3d/preview3dExecution.spec.ts
new file mode 100644
index 0000000000..87ad765853
--- /dev/null
+++ b/browser_tests/tests/load3d/preview3dExecution.spec.ts
@@ -0,0 +1,41 @@
+import {
+  preview3dPipelineTest as test,
+  Preview3DPipelineContext
+} from '@e2e/fixtures/helpers/Preview3DPipelineFixture'
+
+test.describe('Preview3D execution flow', { tag: ['@slow', '@node'] }, () => {
+  test('Preview3D loads model from execution output', async ({
+    preview3dPipeline: pipeline
+  }) => {
+    test.setTimeout(120_000)
+
+    await pipeline.seedLoad3dWithCubeObj()
+    await pipeline.queuePromptAndWaitIdle(90_000)
+    await pipeline.assertPreview3dExecutionOutputSettled()
+    await pipeline.assertPreview3dCanvasNonEmpty()
+  })
+
+  test('Preview3D restores last model and camera after save and full reload', async ({
+    preview3dPipeline: pipeline
+  }) => {
+    test.setTimeout(180_000)
+
+    await pipeline.seedLoad3dWithCubeObj()
+    await pipeline.setNonDefaultLoad3dCameraState()
+    await pipeline.queuePromptAndWaitIdle(90_000)
+    await pipeline.assertPreview3dExecutionOutputSettled()
+    await pipeline.nudgePreview3dCameraIntoProperties()
+
+    const savedPath = await pipeline.getModelFileWidgetValue(
+      Preview3DPipelineContext.previewNodeId
+    )
+    const savedCamera = await pipeline.getPreview3dCameraStateWhenReady()
+    const workflowName =
+      await pipeline.saveNamedWorkflowToSidebar('p3d-restore')
+    await pipeline.reloadPageAndWaitForAppShell()
+    await pipeline.openPersistedWorkflowFromSidebar(workflowName)
+    await pipeline.assertPreview3dModelPathAndLastTime(savedPath)
+    await pipeline.assertPreview3dCanvasNonEmpty()
+    await pipeline.assertPreview3dCameraRestored(savedCamera)
+  })
+})
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts b/browser_tests/tests/loadWorkflowInMedia.spec.ts
index 0e95cfbbbb..48d2a9f271 100644
--- a/browser_tests/tests/loadWorkflowInMedia.spec.ts
+++ b/browser_tests/tests/loadWorkflowInMedia.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -60,15 +60,21 @@ test.describe(
       test(`Load workflow from URL ${url} (drop from different browser tabs)`, async ({
         comfyPage
       }) => {
+        const initialNodeCount = await comfyPage.nodeOps.getGraphNodesCount()
+
         await comfyPage.dragDrop.dragAndDropURL(url)
-        const readableName = url.split('/').pop()
-        await expect(comfyPage.canvas).toHaveScreenshot(
-          `dropped_workflow_url_${readableName}.png`
-        )
+
+        // The drop triggers an async fetch → parse → loadGraphData chain.
+        // Poll until the graph settles with the loaded workflow's nodes.
+        await expect
+          .poll(() => comfyPage.nodeOps.getGraphNodesCount(), {
+            timeout: 15000
+          })
+          .toBeGreaterThan(initialNodeCount)
       })
     })
 
-    test.fixme('Load workflow from URL dropped onto Vue node', async ({
+    test('Load workflow from URL dropped onto Vue node', async ({
       comfyPage
     }) => {
       const fakeUrl = 'https://example.com/workflow.png'
@@ -84,12 +90,12 @@ test.describe(
       const initialNodeCount = await comfyPage.nodeOps.getGraphNodesCount()
 
       const node = comfyPage.vueNodes.getNodeByTitle('KSampler')
-      const box = await node.boundingBox()
-      expect(box).not.toBeNull()
+      await expect.poll(() => node.boundingBox()).toBeTruthy()
+      const box = (await node.boundingBox())!
 
       const dropPosition = {
-        x: box!.x + box!.width / 2,
-        y: box!.y + box!.height / 2
+        x: box.x + box.width / 2,
+        y: box.y + box.height / 2
       }
 
       await comfyPage.dragDrop.dragAndDropURL(fakeUrl, {
@@ -103,8 +109,9 @@ test.describe(
         { timeout: 10000 }
       )
 
-      const newNodeCount = await comfyPage.nodeOps.getGraphNodesCount()
-      expect(newNodeCount).not.toBe(initialNodeCount)
+      await expect
+        .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+        .not.toBe(initialNodeCount)
     })
   }
 )
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/dropped-workflow-url-hidream-dev-example-png-chromium-linux.png b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/dropped-workflow-url-hidream-dev-example-png-chromium-linux.png
deleted file mode 100644
index 1535c58e45..0000000000
Binary files a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/dropped-workflow-url-hidream-dev-example-png-chromium-linux.png and /dev/null differ
diff --git a/browser_tests/tests/lodThreshold.spec.ts b/browser_tests/tests/lodThreshold.spec.ts
index e1bf11dae9..5fc2342346 100644
--- a/browser_tests/tests/lodThreshold.spec.ts
+++ b/browser_tests/tests/lodThreshold.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -13,6 +13,14 @@ test.describe('LOD Threshold', { tag: ['@screenshot', '@canvas'] }, () => {
     // Load a workflow with some nodes to render
     await comfyPage.workflow.loadWorkflow('default')
 
+    // Should start at normal zoom (not low quality)
+    await expect
+      .poll(() => comfyPage.page.evaluate(() => window.app!.canvas.low_quality))
+      .toBe(false)
+    await expect
+      .poll(() => comfyPage.page.evaluate(() => window.app!.canvas.ds.scale))
+      .toBeCloseTo(1, 1)
+
     // Get initial LOD state and settings
     const initialState = await comfyPage.page.evaluate(() => {
       const canvas = window.app!.canvas
@@ -23,62 +31,55 @@ test.describe('LOD Threshold', { tag: ['@screenshot', '@canvas'] }, () => {
       }
     })
 
-    // Should start at normal zoom (not low quality)
-    expect(initialState.lowQuality).toBe(false)
-    expect(initialState.scale).toBeCloseTo(1, 1)
-
     // Calculate expected threshold (8px / 14px ≈ 0.571)
     const expectedThreshold = initialState.minFontSize / 14
-    // Can't access private _lowQualityZoomThreshold directly
 
     // Zoom out just above threshold (should still be high quality)
     await comfyPage.canvasOps.zoom(120, 5) // Zoom out 5 steps
     await comfyPage.nextFrame()
 
-    const aboveThresholdState = await comfyPage.page.evaluate(() => {
-      const canvas = window.app!.canvas
-      return {
-        lowQuality: canvas.low_quality,
-        scale: canvas.ds.scale
-      }
-    })
-
-    // If still above threshold, should be high quality
-    if (aboveThresholdState.scale > expectedThreshold) {
-      expect(aboveThresholdState.lowQuality).toBe(false)
-    }
+    await expect
+      .poll(() =>
+        comfyPage.page.evaluate(() => {
+          const canvas = window.app!.canvas
+          return { lowQuality: canvas.low_quality, scale: canvas.ds.scale }
+        })
+      )
+      .toMatchObject({ lowQuality: false })
 
     // Zoom out more to trigger LOD (below threshold)
     await comfyPage.canvasOps.zoom(120, 5) // Zoom out 5 more steps
     await comfyPage.nextFrame()
 
-    // Check that LOD is now active
-    const zoomedOutState = await comfyPage.page.evaluate(() => {
-      const canvas = window.app!.canvas
-      return {
-        lowQuality: canvas.low_quality,
-        scale: canvas.ds.scale
-      }
-    })
+    await expect
+      .poll(() =>
+        comfyPage.page.evaluate(() => {
+          const canvas = window.app!.canvas
+          return { lowQuality: canvas.low_quality, scale: canvas.ds.scale }
+        })
+      )
+      .toMatchObject({ lowQuality: true })
 
-    expect(zoomedOutState.scale).toBeLessThan(expectedThreshold)
-    expect(zoomedOutState.lowQuality).toBe(true)
+    await expect
+      .poll(() => comfyPage.page.evaluate(() => window.app!.canvas.ds.scale))
+      .toBeLessThan(expectedThreshold)
 
     // Zoom back in to disable LOD (above threshold)
     await comfyPage.canvasOps.zoom(-120, 15) // Zoom in 15 steps
     await comfyPage.nextFrame()
 
-    // Check that LOD is now inactive
-    const zoomedInState = await comfyPage.page.evaluate(() => {
-      const canvas = window.app!.canvas
-      return {
-        lowQuality: canvas.low_quality,
-        scale: canvas.ds.scale
-      }
-    })
+    await expect
+      .poll(() =>
+        comfyPage.page.evaluate(() => {
+          const canvas = window.app!.canvas
+          return { lowQuality: canvas.low_quality, scale: canvas.ds.scale }
+        })
+      )
+      .toMatchObject({ lowQuality: false })
 
-    expect(zoomedInState.scale).toBeGreaterThan(expectedThreshold)
-    expect(zoomedInState.lowQuality).toBe(false)
+    await expect
+      .poll(() => comfyPage.page.evaluate(() => window.app!.canvas.ds.scale))
+      .toBeGreaterThan(expectedThreshold)
   })
 
   test('Should update threshold when font size setting changes', async ({
@@ -93,36 +94,28 @@ test.describe('LOD Threshold', { tag: ['@screenshot', '@canvas'] }, () => {
     )
 
     // Check that font size updated
-    const newState = await comfyPage.page.evaluate(() => {
-      const canvas = window.app!.canvas
-      return {
-        minFontSize: canvas.min_font_size_for_lod
-      }
-    })
-
-    expect(newState.minFontSize).toBe(14)
-    // Expected threshold would be 14px / 14px = 1.0
+    await expect
+      .poll(() =>
+        comfyPage.page.evaluate(() => window.app!.canvas.min_font_size_for_lod)
+      )
+      .toBe(14)
 
     // At default zoom, LOD should still be inactive (scale is exactly 1.0, not less than)
-    const lodState = await comfyPage.page.evaluate(() => {
-      return window.app!.canvas.low_quality
-    })
-    expect(lodState).toBe(false)
+    await expect
+      .poll(() => comfyPage.page.evaluate(() => window.app!.canvas.low_quality))
+      .toBe(false)
 
     // Zoom out slightly to trigger LOD
     await comfyPage.canvasOps.zoom(120, 1) // Zoom out 1 step
     await comfyPage.nextFrame()
 
-    const afterZoom = await comfyPage.page.evaluate(() => {
-      const canvas = window.app!.canvas
-      return {
-        lowQuality: canvas.low_quality,
-        scale: canvas.ds.scale
-      }
-    })
+    await expect
+      .poll(() => comfyPage.page.evaluate(() => window.app!.canvas.low_quality))
+      .toBe(true)
 
-    expect(afterZoom.scale).toBeLessThan(1.0)
-    expect(afterZoom.lowQuality).toBe(true)
+    await expect
+      .poll(() => comfyPage.page.evaluate(() => window.app!.canvas.ds.scale))
+      .toBeLessThan(1.0)
   })
 
   test('Should disable LOD when font size is set to 0', async ({
@@ -138,18 +131,19 @@ test.describe('LOD Threshold', { tag: ['@screenshot', '@canvas'] }, () => {
     await comfyPage.nextFrame()
 
     // LOD should remain disabled even at very low zoom
-    const state = await comfyPage.page.evaluate(() => {
-      const canvas = window.app!.canvas
-      return {
-        lowQuality: canvas.low_quality,
-        scale: canvas.ds.scale,
-        minFontSize: canvas.min_font_size_for_lod
-      }
-    })
+    await expect
+      .poll(() =>
+        comfyPage.page.evaluate(() => window.app!.canvas.min_font_size_for_lod)
+      )
+      .toBe(0)
 
-    expect(state.minFontSize).toBe(0) // LOD disabled
-    expect(state.lowQuality).toBe(false)
-    expect(state.scale).toBeLessThan(0.2) // Very zoomed out
+    await expect
+      .poll(() => comfyPage.page.evaluate(() => window.app!.canvas.low_quality))
+      .toBe(false)
+
+    await expect
+      .poll(() => comfyPage.page.evaluate(() => window.app!.canvas.ds.scale))
+      .toBeLessThan(0.2) // Very zoomed out
   })
 
   test(
@@ -169,41 +163,39 @@ test.describe('LOD Threshold', { tag: ['@screenshot', '@canvas'] }, () => {
       }, targetZoom)
       await comfyPage.nextFrame()
 
+      // Wait for LOD to activate before taking screenshot
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(() => window.app!.canvas.low_quality)
+        )
+        .toBe(true)
+
       // Take snapshot with LOD active (default 8px setting)
       await expect(comfyPage.canvas).toHaveScreenshot(
         'lod-comparison-low-quality.png'
       )
 
-      const lowQualityState = await comfyPage.page.evaluate(() => {
-        const canvas = window.app!.canvas
-        return {
-          lowQuality: canvas.low_quality,
-          scale: canvas.ds.scale
-        }
-      })
-      expect(lowQualityState.lowQuality).toBe(true)
-
       // Disable LOD to see high quality at same zoom
       await comfyPage.settings.setSetting(
         'LiteGraph.Canvas.MinFontSizeForLOD',
         0
       )
-      await comfyPage.nextFrame()
+
+      // Wait for LOD to deactivate after setting change
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(() => window.app!.canvas.low_quality)
+        )
+        .toBe(false)
 
       // Take snapshot with LOD disabled (full quality at same zoom)
       await expect(comfyPage.canvas).toHaveScreenshot(
         'lod-comparison-high-quality.png'
       )
 
-      const highQualityState = await comfyPage.page.evaluate(() => {
-        const canvas = window.app!.canvas
-        return {
-          lowQuality: canvas.low_quality,
-          scale: canvas.ds.scale
-        }
-      })
-      expect(highQualityState.lowQuality).toBe(false)
-      expect(highQualityState.scale).toBeCloseTo(targetZoom, 2)
+      await expect
+        .poll(() => comfyPage.page.evaluate(() => window.app!.canvas.ds.scale))
+        .toBeCloseTo(targetZoom, 2)
     }
   )
 })
diff --git a/browser_tests/tests/maskEditor.spec.ts b/browser_tests/tests/maskEditor.spec.ts
index 15231c78c6..d9bce93dc3 100644
--- a/browser_tests/tests/maskEditor.spec.ts
+++ b/browser_tests/tests/maskEditor.spec.ts
@@ -1,16 +1,12 @@
+import type { Page } from '@playwright/test'
 import { expect } from '@playwright/test'
 
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-test.describe('Mask Editor', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-  })
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
+test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
   async function loadImageOnNode(comfyPage: ComfyPage) {
     await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
-    await comfyPage.vueNodes.waitForNodes()
 
     const loadImageNode = (
       await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
@@ -32,6 +28,85 @@ test.describe('Mask Editor', () => {
     }
   }
 
+  async function openMaskEditorDialog(comfyPage: ComfyPage) {
+    const { imagePreview } = await loadImageOnNode(comfyPage)
+
+    await imagePreview.getByRole('region').hover()
+    await comfyPage.page.getByLabel('Edit or mask image').click()
+
+    const dialog = comfyPage.page.locator('.mask-editor-dialog')
+    await expect(dialog).toBeVisible()
+    await expect(
+      dialog.getByRole('heading', { name: 'Mask Editor' })
+    ).toBeVisible()
+
+    const canvasContainer = dialog.locator('#maskEditorCanvasContainer')
+    await expect(canvasContainer).toBeVisible()
+    await expect(canvasContainer.locator('canvas')).toHaveCount(4)
+
+    return dialog
+  }
+
+  async function getMaskCanvasPixelData(page: Page) {
+    return page.evaluate(() => {
+      const canvases = document.querySelectorAll(
+        '#maskEditorCanvasContainer canvas'
+      )
+      // The mask canvas is the 3rd canvas (index 2, z-30)
+      const maskCanvas = canvases[2] as HTMLCanvasElement
+      if (!maskCanvas) return null
+      const ctx = maskCanvas.getContext('2d')
+      if (!ctx) return null
+      const data = ctx.getImageData(0, 0, maskCanvas.width, maskCanvas.height)
+      let nonTransparentPixels = 0
+      for (let i = 3; i < data.data.length; i += 4) {
+        if (data.data[i] > 0) nonTransparentPixels++
+      }
+      return { nonTransparentPixels, totalPixels: data.data.length / 4 }
+    })
+  }
+
+  function pollMaskPixelCount(page: Page): Promise<number> {
+    return getMaskCanvasPixelData(page).then(
+      (d) => d?.nonTransparentPixels ?? 0
+    )
+  }
+
+  async function drawStrokeOnPointerZone(
+    page: Page,
+    dialog: ReturnType<typeof page.locator>
+  ) {
+    const pointerZone = dialog.locator(
+      '.maskEditor-ui-container [class*="w-[calc"]'
+    )
+    await expect(pointerZone).toBeVisible()
+
+    const box = await pointerZone.boundingBox()
+    if (!box) throw new Error('Pointer zone bounding box not found')
+
+    const startX = box.x + box.width * 0.3
+    const startY = box.y + box.height * 0.5
+    const endX = box.x + box.width * 0.7
+    const endY = box.y + box.height * 0.5
+
+    await page.mouse.move(startX, startY)
+    await page.mouse.down()
+    await page.mouse.move(endX, endY, { steps: 10 })
+    await page.mouse.up()
+
+    return { startX, startY, endX, endY, box }
+  }
+
+  async function drawStrokeAndExpectPixels(
+    comfyPage: ComfyPage,
+    dialog: ReturnType<typeof comfyPage.page.locator>
+  ) {
+    await drawStrokeOnPointerZone(comfyPage.page, dialog)
+    await expect
+      .poll(() => pollMaskPixelCount(comfyPage.page))
+      .toBeGreaterThan(0)
+  }
+
   test(
     'opens mask editor from image preview button',
     { tag: ['@smoke', '@screenshot'] },
@@ -57,7 +132,7 @@ test.describe('Mask Editor', () => {
       await expect(dialog.getByText('Save')).toBeVisible()
       await expect(dialog.getByText('Cancel')).toBeVisible()
 
-      await expect(dialog).toHaveScreenshot('mask-editor-dialog-open.png')
+      await comfyPage.expectScreenshot(dialog, 'mask-editor-dialog-open.png')
     }
   )
 
@@ -84,9 +159,245 @@ test.describe('Mask Editor', () => {
         dialog.getByRole('heading', { name: 'Mask Editor' })
       ).toBeVisible()
 
-      await expect(dialog).toHaveScreenshot(
+      await comfyPage.expectScreenshot(
+        dialog,
         'mask-editor-dialog-from-context-menu.png'
       )
     }
   )
+
+  test('draws a brush stroke on the mask canvas', async ({ comfyPage }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    const dataBefore = await getMaskCanvasPixelData(comfyPage.page)
+    expect(dataBefore).not.toBeNull()
+    expect(dataBefore!.nonTransparentPixels).toBe(0)
+
+    await drawStrokeAndExpectPixels(comfyPage, dialog)
+  })
+
+  test('undo reverts a brush stroke', async ({ comfyPage }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    await drawStrokeAndExpectPixels(comfyPage, dialog)
+
+    const undoButton = dialog.locator('button[title="Undo"]')
+    await expect(undoButton).toBeVisible()
+    await undoButton.click()
+
+    await expect.poll(() => pollMaskPixelCount(comfyPage.page)).toBe(0)
+  })
+
+  test('redo restores an undone stroke', async ({ comfyPage }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    await drawStrokeAndExpectPixels(comfyPage, dialog)
+
+    const undoButton = dialog.locator('button[title="Undo"]')
+    await undoButton.click()
+
+    await expect.poll(() => pollMaskPixelCount(comfyPage.page)).toBe(0)
+
+    const redoButton = dialog.locator('button[title="Redo"]')
+    await expect(redoButton).toBeVisible()
+    await redoButton.click()
+
+    await expect
+      .poll(() => pollMaskPixelCount(comfyPage.page))
+      .toBeGreaterThan(0)
+  })
+
+  test('clear button removes all mask content', async ({ comfyPage }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    await drawStrokeAndExpectPixels(comfyPage, dialog)
+
+    const clearButton = dialog.getByRole('button', { name: 'Clear' })
+    await expect(clearButton).toBeVisible()
+    await clearButton.click()
+
+    await expect.poll(() => pollMaskPixelCount(comfyPage.page)).toBe(0)
+  })
+
+  test('cancel closes the dialog without saving', async ({ comfyPage }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    await drawStrokeAndExpectPixels(comfyPage, dialog)
+
+    const cancelButton = dialog.getByRole('button', { name: 'Cancel' })
+    await cancelButton.click()
+
+    await expect(dialog).toBeHidden()
+  })
+
+  test('invert button inverts the mask', async ({ comfyPage }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    const dataBefore = await getMaskCanvasPixelData(comfyPage.page)
+    expect(dataBefore).not.toBeNull()
+    const pixelsBefore = dataBefore!.nonTransparentPixels
+
+    const invertButton = dialog.getByRole('button', { name: 'Invert' })
+    await expect(invertButton).toBeVisible()
+    await invertButton.click()
+
+    await expect
+      .poll(() => pollMaskPixelCount(comfyPage.page))
+      .toBeGreaterThan(pixelsBefore)
+  })
+
+  test('keyboard shortcut Ctrl+Z triggers undo', async ({ comfyPage }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    await drawStrokeAndExpectPixels(comfyPage, dialog)
+
+    const modifier = process.platform === 'darwin' ? 'Meta+z' : 'Control+z'
+    await comfyPage.page.keyboard.press(modifier)
+
+    await expect.poll(() => pollMaskPixelCount(comfyPage.page)).toBe(0)
+  })
+
+  test(
+    'tool panel shows all five tools',
+    { tag: ['@smoke'] },
+    async ({ comfyPage }) => {
+      const dialog = await openMaskEditorDialog(comfyPage)
+
+      const toolPanel = dialog.locator('.maskEditor-ui-container')
+      await expect(toolPanel).toBeVisible()
+
+      // The tool panel should contain exactly 5 tool entries
+      const toolEntries = dialog.locator('.maskEditor_toolPanelContainer')
+      await expect(toolEntries).toHaveCount(5)
+
+      // First tool (MaskPen) should be selected by default
+      const selectedTool = dialog.locator(
+        '.maskEditor_toolPanelContainerSelected'
+      )
+      await expect(selectedTool).toHaveCount(1)
+    }
+  )
+
+  test('switching tools updates the selected indicator', async ({
+    comfyPage
+  }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    const toolEntries = dialog.locator('.maskEditor_toolPanelContainer')
+    await expect(toolEntries).toHaveCount(5)
+
+    // Click the third tool (Eraser, index 2)
+    await toolEntries.nth(2).click()
+
+    // The third tool should now be selected
+    const selectedTool = dialog.locator(
+      '.maskEditor_toolPanelContainerSelected'
+    )
+    await expect(selectedTool).toHaveCount(1)
+
+    // Verify it's the eraser (3rd entry)
+    await expect(toolEntries.nth(2)).toHaveClass(/Selected/)
+  })
+
+  test('brush settings panel is visible with thickness controls', async ({
+    comfyPage
+  }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    // The side panel should show brush settings by default
+    const thicknessLabel = dialog.getByText('Thickness')
+    await expect(thicknessLabel).toBeVisible()
+
+    const opacityLabel = dialog.getByText('Opacity').first()
+    await expect(opacityLabel).toBeVisible()
+
+    const hardnessLabel = dialog.getByText('Hardness')
+    await expect(hardnessLabel).toBeVisible()
+  })
+
+  test('save uploads all layers and closes dialog', async ({ comfyPage }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    let maskUploadCount = 0
+    let imageUploadCount = 0
+
+    await comfyPage.page.route('**/upload/mask', (route) => {
+      maskUploadCount++
+      return route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          name: `test-mask-${maskUploadCount}.png`,
+          subfolder: 'clipspace',
+          type: 'input'
+        })
+      })
+    })
+    await comfyPage.page.route('**/upload/image', (route) => {
+      imageUploadCount++
+      return route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          name: `test-image-${imageUploadCount}.png`,
+          subfolder: 'clipspace',
+          type: 'input'
+        })
+      })
+    })
+
+    const saveButton = dialog.getByRole('button', { name: 'Save' })
+    await expect(saveButton).toBeVisible()
+    await saveButton.click()
+
+    await expect(dialog).toBeHidden()
+
+    // The save pipeline uploads multiple layers (mask + image variants)
+    expect(
+      maskUploadCount + imageUploadCount,
+      'save should trigger upload calls'
+    ).toBeGreaterThan(0)
+  })
+
+  test('save failure keeps dialog open', async ({ comfyPage }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    // Fail all upload routes
+    await comfyPage.page.route('**/upload/mask', (route) =>
+      route.fulfill({ status: 500 })
+    )
+    await comfyPage.page.route('**/upload/image', (route) =>
+      route.fulfill({ status: 500 })
+    )
+
+    const saveButton = dialog.getByRole('button', { name: 'Save' })
+    await saveButton.click()
+
+    // Dialog should remain open when save fails
+    await expect(dialog).toBeVisible()
+  })
+
+  test(
+    'eraser tool removes mask content',
+    { tag: ['@screenshot'] },
+    async ({ comfyPage }) => {
+      const dialog = await openMaskEditorDialog(comfyPage)
+
+      // Draw a stroke with the mask pen (default tool)
+      await drawStrokeAndExpectPixels(comfyPage, dialog)
+
+      const pixelsAfterDraw = await getMaskCanvasPixelData(comfyPage.page)
+
+      // Switch to eraser tool (3rd tool, index 2)
+      const toolEntries = dialog.locator('.maskEditor_toolPanelContainer')
+      await toolEntries.nth(2).click()
+
+      // Draw over the same area with the eraser
+      await drawStrokeOnPointerZone(comfyPage.page, dialog)
+
+      await expect
+        .poll(() => pollMaskPixelCount(comfyPage.page))
+        .toBeLessThan(pixelsAfterDraw!.nonTransparentPixels)
+    }
+  )
 })
diff --git a/browser_tests/tests/menu.spec.ts b/browser_tests/tests/menu.spec.ts
index d5d64dd0a9..34c3cfb330 100644
--- a/browser_tests/tests/menu.spec.ts
+++ b/browser_tests/tests/menu.spec.ts
@@ -1,12 +1,8 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.describe('Menu', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-  })
-
   test('Can register sidebar tab', async ({ comfyPage }) => {
     const initialChildrenCount = await comfyPage.menu.buttons.count()
 
@@ -22,10 +18,7 @@ test.describe('Menu', { tag: '@ui' }, () => {
         }
       })
     })
-    await comfyPage.nextFrame()
-
-    const newChildrenCount = await comfyPage.menu.buttons.count()
-    expect(newChildrenCount).toBe(initialChildrenCount + 1)
+    await expect(comfyPage.menu.buttons).toHaveCount(initialChildrenCount + 1)
   })
 
   test.describe('Workflows topbar tabs', () => {
@@ -38,20 +31,21 @@ test.describe('Menu', { tag: '@ui' }, () => {
     })
 
     test('Can show opened workflows', async ({ comfyPage }) => {
-      expect(await comfyPage.menu.topbar.getTabNames()).toEqual([
-        'Unsaved Workflow'
-      ])
+      await expect
+        .poll(() => comfyPage.menu.topbar.getTabNames())
+        .toEqual(['Unsaved Workflow'])
     })
 
     test('Can close saved-workflow tabs', async ({ comfyPage }) => {
       const workflowName = `tempWorkflow-${test.info().title}`
       await comfyPage.menu.topbar.saveWorkflow(workflowName)
-      expect(await comfyPage.menu.topbar.getTabNames()).toEqual([workflowName])
+      await expect
+        .poll(() => comfyPage.menu.topbar.getTabNames())
+        .toEqual([workflowName])
       await comfyPage.menu.topbar.closeWorkflowTab(workflowName)
-      await comfyPage.nextFrame()
-      expect(await comfyPage.menu.topbar.getTabNames()).toEqual([
-        'Unsaved Workflow'
-      ])
+      await expect
+        .poll(() => comfyPage.menu.topbar.getTabNames())
+        .toEqual(['Unsaved Workflow'])
     })
   })
 
@@ -63,10 +57,11 @@ test.describe('Menu', { tag: '@ui' }, () => {
       const topLevelMenuItem = comfyPage.page
         .locator('a.p-menubar-item-link')
         .first()
-      const isTextCutoff = await topLevelMenuItem.evaluate((el) => {
-        return el.scrollWidth > el.clientWidth
-      })
-      expect(isTextCutoff).toBe(false)
+      await expect
+        .poll(() =>
+          topLevelMenuItem.evaluate((el) => el.scrollWidth > el.clientWidth)
+        )
+        .toBe(false)
     })
 
     test('Clicking on active state items does not close menu', async ({
@@ -102,7 +97,7 @@ test.describe('Menu', { tag: '@ui' }, () => {
 
       // Check initial state of bottom panel (it's initially hidden)
       const { bottomPanel } = comfyPage
-      await expect(bottomPanel.root).not.toBeVisible()
+      await expect(bottomPanel.root).toBeHidden()
 
       // Checkmark should be invisible initially (panel is hidden)
       await expect(checkmark).toHaveClass(/invisible/)
@@ -127,7 +122,7 @@ test.describe('Menu', { tag: '@ui' }, () => {
       await expect(viewSubmenu).toBeVisible()
 
       // Verify bottom panel is hidden again
-      await expect(bottomPanel.root).not.toBeVisible()
+      await expect(bottomPanel.root).toBeHidden()
 
       // Checkmark should be invisible again (panel is hidden)
       await expect(checkmark).toHaveClass(/invisible/)
@@ -139,7 +134,7 @@ test.describe('Menu', { tag: '@ui' }, () => {
         .click({ position: { x: viewport.width - 10, y: 10 } })
 
       // Verify menu is now closed
-      await expect(menu).not.toBeVisible()
+      await expect(menu).toBeHidden()
     })
 
     test('Displays keybinding next to item', async ({ comfyPage }) => {
@@ -149,7 +144,7 @@ test.describe('Menu', { tag: '@ui' }, () => {
       const exportTag = comfyPage.page.locator('.keybinding-tag', {
         hasText: 'Ctrl + s'
       })
-      expect(await exportTag.count()).toBe(1)
+      await expect(exportTag).toHaveCount(1)
     })
 
     test('Can catch error when executing command', async ({ comfyPage }) => {
@@ -174,7 +169,7 @@ test.describe('Menu', { tag: '@ui' }, () => {
         })
       })
       await comfyPage.menu.topbar.triggerTopbarCommand(['ext', 'foo-command'])
-      await expect.poll(() => comfyPage.toast.getVisibleToastCount()).toBe(1)
+      await expect(comfyPage.toast.visibleToasts).toHaveCount(1)
     })
 
     test('Can navigate Theme menu and switch between Dark and Light themes', async ({
@@ -206,7 +201,9 @@ test.describe('Menu', { tag: '@ui' }, () => {
       await expect(async () => {
         await expect(menu).toBeVisible()
         await expect(themeSubmenu).toBeVisible()
-        expect(await topbar.isMenuItemActive(lightThemeItem)).toBe(true)
+        await expect(lightThemeItem.locator('.pi-check')).not.toHaveClass(
+          /invisible/
+        )
       }).toPass({ timeout: 5000 })
 
       // Screenshot with light theme active
@@ -231,9 +228,11 @@ test.describe('Menu', { tag: '@ui' }, () => {
       await expect(async () => {
         await expect(menu).toBeVisible()
         await expect(themeItems2.submenu).toBeVisible()
-        expect(await topbar.isMenuItemActive(themeItems2.darkTheme)).toBe(true)
-        expect(await topbar.isMenuItemActive(themeItems2.lightTheme)).toBe(
-          false
+        await expect(
+          themeItems2.darkTheme.locator('.pi-check')
+        ).not.toHaveClass(/invisible/)
+        await expect(themeItems2.lightTheme.locator('.pi-check')).toHaveClass(
+          /invisible/
         )
       }).toPass({ timeout: 5000 })
 
@@ -257,9 +256,9 @@ test.describe('Menu', { tag: '@ui' }, () => {
       comfyPage
     }) => {
       await comfyPage.settings.setSetting('Comfy.UseNewMenu', position)
-      expect(await comfyPage.settings.getSetting('Comfy.UseNewMenu')).toBe(
-        'Top'
-      )
+      await expect
+        .poll(() => comfyPage.settings.getSetting('Comfy.UseNewMenu'))
+        .toBe('Top')
     })
 
     test(`Can migrate deprecated menu positions on initial load (${position})`, async ({
@@ -267,9 +266,9 @@ test.describe('Menu', { tag: '@ui' }, () => {
     }) => {
       await comfyPage.settings.setSetting('Comfy.UseNewMenu', position)
       await comfyPage.setup()
-      expect(await comfyPage.settings.getSetting('Comfy.UseNewMenu')).toBe(
-        'Top'
-      )
+      await expect
+        .poll(() => comfyPage.settings.getSetting('Comfy.UseNewMenu'))
+        .toBe('Top')
     })
   })
 })
diff --git a/browser_tests/tests/minimap.spec.ts b/browser_tests/tests/minimap.spec.ts
index 175d5324d3..638738499b 100644
--- a/browser_tests/tests/minimap.spec.ts
+++ b/browser_tests/tests/minimap.spec.ts
@@ -1,11 +1,44 @@
+import type { Locator, Page } from '@playwright/test'
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+
+function hasCanvasContent(canvas: Locator): Promise<boolean> {
+  return canvas.evaluate((el: HTMLCanvasElement) => {
+    const ctx = el.getContext('2d')
+    if (!ctx) return false
+    const { data } = ctx.getImageData(0, 0, el.width, el.height)
+    for (let i = 3; i < data.length; i += 4) {
+      if (data[i] > 0) return true
+    }
+    return false
+  })
+}
+
+function getMinimapLocators(comfyPage: ComfyPage) {
+  const container = comfyPage.page.getByTestId(TestIds.canvas.minimapContainer)
+  return {
+    container,
+    canvas: comfyPage.page.getByTestId(TestIds.canvas.minimapCanvas),
+    viewport: comfyPage.page.getByTestId(TestIds.canvas.minimapViewport),
+    toggleButton: comfyPage.page.getByTestId(
+      TestIds.canvas.toggleMinimapButton
+    ),
+    closeButton: comfyPage.page.getByTestId(TestIds.canvas.closeMinimapButton)
+  }
+}
+
+function getCanvasOffset(page: Page): Promise<[number, number]> {
+  return page.evaluate(() => {
+    const ds = window.app!.canvas.ds
+    return [ds.offset[0], ds.offset[1]] as [number, number]
+  })
+}
 
 test.describe('Minimap', { tag: '@canvas' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting('Comfy.Minimap.Visible', true)
     await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', true)
     await comfyPage.workflow.loadWorkflow('default')
@@ -13,17 +46,13 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
   })
 
   test('Validate minimap is visible by default', async ({ comfyPage }) => {
-    const minimapContainer = comfyPage.page.locator('.litegraph-minimap')
+    const { container, canvas, viewport } = getMinimapLocators(comfyPage)
 
-    await expect(minimapContainer).toBeVisible()
+    await expect(container).toBeVisible()
+    await expect(canvas).toBeVisible()
+    await expect(viewport).toBeVisible()
 
-    const minimapCanvas = minimapContainer.locator('.minimap-canvas')
-    await expect(minimapCanvas).toBeVisible()
-
-    const minimapViewport = minimapContainer.locator('.minimap-viewport')
-    await expect(minimapViewport).toBeVisible()
-
-    await expect(minimapContainer).toHaveCSS('position', 'relative')
+    await expect(container).toHaveCSS('position', 'relative')
 
     // position and z-index validation moved to the parent container of the minimap
     const minimapMainContainer = comfyPage.page.locator(
@@ -34,48 +63,258 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
   })
 
   test('Validate minimap toggle button state', async ({ comfyPage }) => {
-    const toggleButton = comfyPage.page.getByTestId(
-      TestIds.canvas.toggleMinimapButton
-    )
+    const { container, toggleButton } = getMinimapLocators(comfyPage)
 
     await expect(toggleButton).toBeVisible()
-
-    const minimapContainer = comfyPage.page.locator('.litegraph-minimap')
-    await expect(minimapContainer).toBeVisible()
+    await expect(container).toBeVisible()
   })
 
   test('Validate minimap can be toggled off and on', async ({ comfyPage }) => {
-    const minimapContainer = comfyPage.page.locator('.litegraph-minimap')
-    const toggleButton = comfyPage.page.getByTestId(
-      TestIds.canvas.toggleMinimapButton
-    )
+    const { container, toggleButton } = getMinimapLocators(comfyPage)
 
-    await expect(minimapContainer).toBeVisible()
+    await expect(container).toBeVisible()
 
     await toggleButton.click()
     await comfyPage.nextFrame()
 
-    await expect(minimapContainer).not.toBeVisible()
+    await expect(container).toBeHidden()
 
     await toggleButton.click()
     await comfyPage.nextFrame()
 
-    await expect(minimapContainer).toBeVisible()
+    await expect(container).toBeVisible()
   })
 
   test('Validate minimap keyboard shortcut Alt+M', async ({ comfyPage }) => {
-    const minimapContainer = comfyPage.page.locator('.litegraph-minimap')
+    const { container } = getMinimapLocators(comfyPage)
 
-    await expect(minimapContainer).toBeVisible()
+    await expect(container).toBeVisible()
 
     await comfyPage.page.keyboard.press('Alt+KeyM')
     await comfyPage.nextFrame()
 
-    await expect(minimapContainer).not.toBeVisible()
+    await expect(container).toBeHidden()
 
     await comfyPage.page.keyboard.press('Alt+KeyM')
     await comfyPage.nextFrame()
 
-    await expect(minimapContainer).toBeVisible()
+    await expect(container).toBeVisible()
+  })
+
+  test('Close button hides minimap', async ({ comfyPage }) => {
+    const { container, toggleButton, closeButton } =
+      getMinimapLocators(comfyPage)
+
+    await expect(container).toBeVisible()
+
+    await closeButton.click()
+    await expect(container).toBeHidden()
+
+    await expect(toggleButton).toBeVisible()
+  })
+
+  test(
+    'Panning canvas moves minimap viewport',
+    { tag: '@screenshot' },
+    async ({ comfyPage }) => {
+      const { container } = getMinimapLocators(comfyPage)
+      await expect(container).toBeVisible()
+
+      await comfyPage.expectScreenshot(container, 'minimap-before-pan.png')
+
+      await comfyPage.page.evaluate(() => {
+        const canvas = window.app!.canvas
+        canvas.ds.scale = 3
+        canvas.ds.offset[0] = -800
+        canvas.ds.offset[1] = -600
+        canvas.setDirty(true, true)
+      })
+      await comfyPage.expectScreenshot(container, 'minimap-after-pan.png')
+    }
+  )
+
+  test(
+    'Viewport rectangle is visible and positioned within minimap',
+    { tag: '@screenshot' },
+    async ({ comfyPage }) => {
+      const { container, viewport } = getMinimapLocators(comfyPage)
+      await expect(container).toBeVisible()
+      await expect(viewport).toBeVisible()
+
+      const minimapBox = await container.boundingBox()
+      const viewportBox = await viewport.boundingBox()
+
+      expect(minimapBox).toBeTruthy()
+      expect(viewportBox).toBeTruthy()
+      expect(viewportBox!.width).toBeGreaterThan(0)
+      expect(viewportBox!.height).toBeGreaterThan(0)
+
+      expect(viewportBox!.x + viewportBox!.width).toBeGreaterThan(minimapBox!.x)
+      expect(viewportBox!.y + viewportBox!.height).toBeGreaterThan(
+        minimapBox!.y
+      )
+      expect(viewportBox!.x).toBeLessThan(minimapBox!.x + minimapBox!.width)
+      expect(viewportBox!.y).toBeLessThan(minimapBox!.y + minimapBox!.height)
+
+      await comfyPage.expectScreenshot(container, 'minimap-with-viewport.png')
+    }
+  )
+
+  test('Clicking on minimap pans the canvas to that position', async ({
+    comfyPage
+  }) => {
+    const { container } = getMinimapLocators(comfyPage)
+    await expect(container).toBeVisible()
+
+    const offsetBefore = await getCanvasOffset(comfyPage.page)
+
+    const minimapBox = await container.boundingBox()
+    expect(minimapBox).toBeTruthy()
+
+    // Click the top-left quadrant — canvas should pan so that region
+    // becomes centered, meaning offset increases (moves right/down)
+    await comfyPage.page.mouse.click(
+      minimapBox!.x + minimapBox!.width * 0.2,
+      minimapBox!.y + minimapBox!.height * 0.2
+    )
+    await comfyPage.nextFrame()
+
+    await expect
+      .poll(() => getCanvasOffset(comfyPage.page))
+      .not.toEqual(offsetBefore)
+  })
+
+  test('Dragging on minimap continuously pans the canvas', async ({
+    comfyPage
+  }) => {
+    const { container } = getMinimapLocators(comfyPage)
+    await expect(container).toBeVisible()
+
+    const minimapBox = await container.boundingBox()
+    expect(minimapBox).toBeTruthy()
+
+    const startX = minimapBox!.x + minimapBox!.width * 0.3
+    const startY = minimapBox!.y + minimapBox!.height * 0.3
+    const endX = minimapBox!.x + minimapBox!.width * 0.7
+    const endY = minimapBox!.y + minimapBox!.height * 0.7
+
+    const offsetBefore = await getCanvasOffset(comfyPage.page)
+
+    // Drag from top-left toward bottom-right on the minimap
+    await comfyPage.page.mouse.move(startX, startY)
+    await comfyPage.page.mouse.down()
+    await comfyPage.page.mouse.move(endX, endY, { steps: 10 })
+
+    // Mid-drag: offset should already differ from initial state
+    const offsetMidDrag = await getCanvasOffset(comfyPage.page)
+    expect(
+      offsetMidDrag[0] !== offsetBefore[0] ||
+        offsetMidDrag[1] !== offsetBefore[1]
+    ).toBe(true)
+
+    await comfyPage.page.mouse.up()
+    await comfyPage.nextFrame()
+
+    // Final offset should also differ (drag was not discarded on mouseup)
+    await expect
+      .poll(() => getCanvasOffset(comfyPage.page))
+      .not.toEqual(offsetBefore)
+  })
+
+  test('Minimap viewport updates when canvas is zoomed', async ({
+    comfyPage
+  }) => {
+    const { container, viewport } = getMinimapLocators(comfyPage)
+    await expect(container).toBeVisible()
+    await expect(viewport).toBeVisible()
+
+    const viewportBefore = await viewport.boundingBox()
+    expect(viewportBefore).toBeTruthy()
+
+    // Zoom in significantly
+    await comfyPage.page.evaluate(() => {
+      const canvas = window.app!.canvas
+      canvas.ds.scale = 3
+      canvas.setDirty(true, true)
+    })
+    await comfyPage.nextFrame()
+
+    // Viewport rectangle should shrink when zoomed in
+    await expect
+      .poll(async () => {
+        const box = await viewport.boundingBox()
+        return box?.width ?? 0
+      })
+      .toBeLessThan(viewportBefore!.width)
+  })
+
+  test('Minimap canvas is empty after all nodes are deleted', async ({
+    comfyPage
+  }) => {
+    const { canvas } = getMinimapLocators(comfyPage)
+    await expect(canvas).toBeVisible()
+
+    // Minimap should have content before deletion
+    await expect.poll(() => hasCanvasContent(canvas)).toBe(true)
+
+    // Remove all nodes
+    await comfyPage.canvas.press('Control+a')
+    await comfyPage.canvas.press('Delete')
+    await comfyPage.nextFrame()
+
+    await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
+
+    // Minimap canvas should be empty — no nodes means nothing to render
+    await expect
+      .poll(() => hasCanvasContent(canvas), { timeout: 5000 })
+      .toBe(false)
+  })
+
+  test('Minimap re-renders after loading a different workflow', async ({
+    comfyPage
+  }) => {
+    const { canvas } = getMinimapLocators(comfyPage)
+    await expect(canvas).toBeVisible()
+
+    // Default workflow has content
+    await expect.poll(() => hasCanvasContent(canvas)).toBe(true)
+
+    // Load a very different workflow
+    await comfyPage.workflow.loadWorkflow('large-graph-workflow')
+    await comfyPage.nextFrame()
+
+    // Minimap should still have content (different workflow, still has nodes)
+    await expect
+      .poll(() => hasCanvasContent(canvas), { timeout: 5000 })
+      .toBe(true)
+  })
+
+  test('Minimap viewport position reflects canvas pan state', async ({
+    comfyPage
+  }) => {
+    const { container, viewport } = getMinimapLocators(comfyPage)
+    await expect(container).toBeVisible()
+    await expect(viewport).toBeVisible()
+
+    const positionBefore = await viewport.boundingBox()
+    expect(positionBefore).toBeTruthy()
+
+    // Pan the canvas by a large amount to the right and down
+    await comfyPage.page.evaluate(() => {
+      const canvas = window.app!.canvas
+      canvas.ds.offset[0] -= 500
+      canvas.ds.offset[1] -= 500
+      canvas.setDirty(true, true)
+    })
+    await comfyPage.nextFrame()
+
+    // The viewport indicator should have moved within the minimap
+    await expect
+      .poll(async () => {
+        const box = await viewport.boundingBox()
+        if (!box || !positionBefore) return false
+        return box.x !== positionBefore.x || box.y !== positionBefore.y
+      })
+      .toBe(true)
   })
 })
diff --git a/browser_tests/tests/minimap.spec.ts-snapshots/minimap-after-pan-chromium-linux.png b/browser_tests/tests/minimap.spec.ts-snapshots/minimap-after-pan-chromium-linux.png
new file mode 100644
index 0000000000..3580ecf605
Binary files /dev/null and b/browser_tests/tests/minimap.spec.ts-snapshots/minimap-after-pan-chromium-linux.png differ
diff --git a/browser_tests/tests/minimap.spec.ts-snapshots/minimap-before-pan-chromium-linux.png b/browser_tests/tests/minimap.spec.ts-snapshots/minimap-before-pan-chromium-linux.png
new file mode 100644
index 0000000000..af0e63aca7
Binary files /dev/null and b/browser_tests/tests/minimap.spec.ts-snapshots/minimap-before-pan-chromium-linux.png differ
diff --git a/browser_tests/tests/minimap.spec.ts-snapshots/minimap-with-viewport-chromium-linux.png b/browser_tests/tests/minimap.spec.ts-snapshots/minimap-with-viewport-chromium-linux.png
new file mode 100644
index 0000000000..af0e63aca7
Binary files /dev/null and b/browser_tests/tests/minimap.spec.ts-snapshots/minimap-with-viewport-chromium-linux.png differ
diff --git a/browser_tests/tests/mobileBaseline.spec.ts b/browser_tests/tests/mobileBaseline.spec.ts
index 0884b822b5..f26306502c 100644
--- a/browser_tests/tests/mobileBaseline.spec.ts
+++ b/browser_tests/tests/mobileBaseline.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
 
 test.describe(
   'Mobile Baseline Snapshots',
@@ -10,11 +10,11 @@ test.describe(
     test('@mobile empty canvas', async ({ comfyPage }) => {
       await comfyPage.settings.setSetting('Comfy.ConfirmClear', false)
       await comfyPage.command.executeCommand('Comfy.ClearWorkflow')
-      await expect(async () => {
-        expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
-      }).toPass({ timeout: 5000 })
-      await comfyPage.nextFrame()
-      await expect(comfyPage.canvas).toHaveScreenshot('mobile-empty-canvas.png')
+      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
+      await comfyPage.expectScreenshot(
+        comfyPage.canvas,
+        'mobile-empty-canvas.png'
+      )
     })
 
     test('@mobile default workflow', async ({ comfyPage }) => {
@@ -26,7 +26,6 @@ test.describe(
 
     test('@mobile graph canvas toolbar visible', async ({ comfyPage }) => {
       await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', true)
-      await comfyPage.nextFrame()
 
       const minimapButton = comfyPage.page.getByTestId(
         TestIds.canvas.toggleMinimapButton
@@ -40,9 +39,8 @@ test.describe(
 
     test('@mobile settings dialog', async ({ comfyPage }) => {
       await comfyPage.settingDialog.open()
-      await comfyPage.nextFrame()
-
-      await expect(comfyPage.settingDialog.root).toHaveScreenshot(
+      await comfyPage.expectScreenshot(
+        comfyPage.settingDialog.root,
         'mobile-settings-dialog.png',
         {
           mask: [
diff --git a/browser_tests/tests/nodeBadge.spec.ts b/browser_tests/tests/nodeBadge.spec.ts
index 873ac10058..e33237be11 100644
--- a/browser_tests/tests/nodeBadge.spec.ts
+++ b/browser_tests/tests/nodeBadge.spec.ts
@@ -1,8 +1,8 @@
 import { expect } from '@playwright/test'
 
-import type { ComfyApp } from '../../src/scripts/app'
-import { NodeBadgeMode } from '../../src/types/nodeSource'
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import type { ComfyApp } from '@/scripts/app'
+import { NodeBadgeMode } from '@/types/nodeSource'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -82,7 +82,13 @@ test.describe(
           'Comfy.NodeBadge.NodeIdBadgeMode',
           mode
         )
-        await comfyPage.nextFrame()
+        await expect
+          .poll(
+            () =>
+              comfyPage.settings.getSetting('Comfy.NodeBadge.NodeIdBadgeMode'),
+            { message: 'NodeIdBadgeMode setting should be applied' }
+          )
+          .toBe(mode)
         await comfyPage.canvasOps.resetView()
         await expect(comfyPage.canvas).toHaveScreenshot(
           `node-badge-${mode}.png`
@@ -104,8 +110,11 @@ test.describe(
         NodeBadgeMode.ShowAll
       )
       await comfyPage.settings.setSetting('Comfy.ColorPalette', 'unknown')
-      await comfyPage.nextFrame()
-      // Click empty space to trigger canvas re-render.
+      await expect
+        .poll(() => comfyPage.settings.getSetting('Comfy.ColorPalette'), {
+          message: 'ColorPalette setting should be applied'
+        })
+        .toBe('unknown')
       await comfyPage.canvasOps.clickEmptySpace()
       await expect(comfyPage.canvas).toHaveScreenshot(
         'node-badge-unknown-color-palette.png'
@@ -120,8 +129,11 @@ test.describe(
         NodeBadgeMode.ShowAll
       )
       await comfyPage.settings.setSetting('Comfy.ColorPalette', 'light')
-      await comfyPage.nextFrame()
-      // Click empty space to trigger canvas re-render.
+      await expect
+        .poll(() => comfyPage.settings.getSetting('Comfy.ColorPalette'), {
+          message: 'ColorPalette setting should be applied'
+        })
+        .toBe('light')
       await comfyPage.canvasOps.clickEmptySpace()
       await expect(comfyPage.canvas).toHaveScreenshot(
         'node-badge-light-color-palette.png'
diff --git a/browser_tests/tests/nodeContextMenuOverflow.spec.ts b/browser_tests/tests/nodeContextMenuOverflow.spec.ts
new file mode 100644
index 0000000000..c4c75cfb37
--- /dev/null
+++ b/browser_tests/tests/nodeContextMenuOverflow.spec.ts
@@ -0,0 +1,96 @@
+import { expect } from '@playwright/test'
+
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+
+test.describe(
+  'Node context menu viewport overflow (#10824)',
+  { tag: '@ui' },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      // Keep the viewport well below the menu content height so overflow is guaranteed.
+      await comfyPage.page.setViewportSize({ width: 1280, height: 520 })
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+      await comfyPage.settings.setSetting('Comfy.Canvas.SelectionToolbox', true)
+      await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')
+    })
+
+    async function openMoreOptions(comfyPage: ComfyPage) {
+      const ksamplerNodes =
+        await comfyPage.nodeOps.getNodeRefsByTitle('KSampler')
+      if (ksamplerNodes.length === 0) {
+        throw new Error('No KSampler nodes found')
+      }
+
+      // Drag the KSampler toward the lower-left so the menu has limited space below it.
+      const nodePos = await ksamplerNodes[0].getPosition()
+      const viewportSize = comfyPage.page.viewportSize()!
+      const centerX = viewportSize.width / 3
+      const centerY = viewportSize.height * 0.75
+      await comfyPage.canvasOps.dragAndDrop(
+        { x: nodePos.x, y: nodePos.y },
+        { x: centerX, y: centerY }
+      )
+      await comfyPage.nextFrame()
+
+      await ksamplerNodes[0].click('title')
+
+      await expect(comfyPage.page.locator('.selection-toolbox')).toBeVisible()
+
+      const moreOptionsBtn = comfyPage.page.getByTestId('more-options-button')
+      await expect(moreOptionsBtn).toBeVisible()
+      await moreOptionsBtn.click()
+      await comfyPage.nextFrame()
+
+      const menu = comfyPage.page.locator('.p-contextmenu')
+      await expect(menu).toBeVisible()
+
+      // Wait for constrainMenuHeight (runs via requestAnimationFrame in onMenuShow)
+      await comfyPage.nextFrame()
+
+      return menu
+    }
+
+    test('last menu item "Remove" is reachable via scroll', async ({
+      comfyPage
+    }) => {
+      const menu = await openMoreOptions(comfyPage)
+      const rootList = menu.locator(':scope > ul')
+
+      await expect
+        .poll(
+          () => rootList.evaluate((el) => el.scrollHeight > el.clientHeight),
+          {
+            message:
+              'Menu should overflow vertically so this test exercises the viewport clamp'
+          }
+        )
+        .toBe(true)
+
+      // "Remove" is the last item in the More Options menu.
+      // It must become reachable by scrolling the bounded menu list.
+      const removeItem = menu.getByText('Remove', { exact: true })
+      const didScroll = await rootList.evaluate((el) => {
+        const previousScrollTop = el.scrollTop
+        el.scrollTo({ top: el.scrollHeight })
+        return el.scrollTop > previousScrollTop
+      })
+      expect(didScroll).toBe(true)
+      await expect(removeItem).toBeVisible()
+    })
+
+    test('last menu item "Remove" is clickable and removes the node', async ({
+      comfyPage
+    }) => {
+      const menu = await openMoreOptions(comfyPage)
+
+      const removeItem = menu.getByText('Remove', { exact: true })
+      await removeItem.scrollIntoViewIfNeeded()
+      await removeItem.click()
+      await comfyPage.nextFrame()
+
+      // The node should be removed from the graph
+      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
+    })
+  }
+)
diff --git a/browser_tests/tests/nodeDisplay.spec.ts b/browser_tests/tests/nodeDisplay.spec.ts
index d99756dc28..cdabd2dcfa 100644
--- a/browser_tests/tests/nodeDisplay.spec.ts
+++ b/browser_tests/tests/nodeDisplay.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -37,16 +37,17 @@ test.describe('Optional input', { tag: ['@screenshot', '@node'] }, () => {
 
   test('Only optional inputs', async ({ comfyPage }) => {
     await comfyPage.workflow.loadWorkflow('inputs/only_optional_inputs')
-    expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(1)
+    await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(1)
     await expect(
       comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
-    ).not.toBeVisible()
+    ).toBeHidden()
 
     // If the node's multiline text widget is visible, then it was loaded successfully
     await expect(comfyPage.page.locator('.comfy-multiline-input')).toHaveCount(
       1
     )
   })
+
   test('Old workflow with converted input', async ({ comfyPage }) => {
     await comfyPage.workflow.loadWorkflow('inputs/old_workflow_converted_input')
     const node = await comfyPage.nodeOps.getNodeRefById('1')
@@ -62,6 +63,7 @@ test.describe('Optional input', { tag: ['@screenshot', '@node'] }, () => {
     expect(vaeInput!.link).toBeNull()
     expect(convertedInput!.link).not.toBeNull()
   })
+
   test('Renamed converted input', async ({ comfyPage }) => {
     await comfyPage.workflow.loadWorkflow('inputs/renamed_converted_widget')
     const node = await comfyPage.nodeOps.getNodeRefById('3')
@@ -69,10 +71,12 @@ test.describe('Optional input', { tag: ['@screenshot', '@node'] }, () => {
     const renamedInput = inputs.find((w) => w.name === 'breadth')
     expect(renamedInput).toBeUndefined()
   })
+
   test('slider', async ({ comfyPage }) => {
     await comfyPage.workflow.loadWorkflow('inputs/simple_slider')
     await expect(comfyPage.canvas).toHaveScreenshot('simple_slider.png')
   })
+
   test('unknown converted widget', async ({ comfyPage }) => {
     await comfyPage.workflow.loadWorkflow(
       'missing/missing_nodes_converted_widget'
@@ -81,6 +85,7 @@ test.describe('Optional input', { tag: ['@screenshot', '@node'] }, () => {
       'missing_nodes_converted_widget.png'
     )
   })
+
   test('dynamically added input', async ({ comfyPage }) => {
     await comfyPage.workflow.loadWorkflow('inputs/dynamically_added_input')
     await expect(comfyPage.canvas).toHaveScreenshot(
diff --git a/browser_tests/tests/nodeGhostPlacement.spec.ts b/browser_tests/tests/nodeGhostPlacement.spec.ts
index bac11bc6c7..6e4392f21b 100644
--- a/browser_tests/tests/nodeGhostPlacement.spec.ts
+++ b/browser_tests/tests/nodeGhostPlacement.spec.ts
@@ -1,7 +1,7 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../fixtures/ComfyPage'
+} from '@e2e/fixtures/ComfyPage'
 
 type ComfyPage = Parameters<Parameters<typeof test>[2]>[0]['comfyPage']
 
@@ -14,7 +14,6 @@ async function setVueMode(comfyPage: ComfyPage, enabled: boolean) {
 
 async function addGhostAtCenter(comfyPage: ComfyPage) {
   await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
-  await comfyPage.nextFrame()
 
   const viewport = comfyPage.page.viewportSize()!
   const centerX = Math.round(viewport.width / 2)
@@ -53,7 +52,6 @@ for (const mode of ['litegraph', 'vue'] as const) {
 
     test('positions ghost node at cursor', async ({ comfyPage }) => {
       await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
-      await comfyPage.nextFrame()
 
       const viewport = comfyPage.page.viewportSize()!
       const centerX = Math.round(viewport.width / 2)
@@ -110,8 +108,7 @@ for (const mode of ['litegraph', 'vue'] as const) {
       expect(before).not.toBeNull()
       expect(before!.ghost).toBe(true)
 
-      await comfyPage.page.keyboard.press('Escape')
-      await comfyPage.nextFrame()
+      await comfyPage.keyboard.press('Escape')
 
       const after = await getNodeById(comfyPage, nodeId)
       expect(after).toBeNull()
@@ -124,8 +121,7 @@ for (const mode of ['litegraph', 'vue'] as const) {
       expect(before).not.toBeNull()
       expect(before!.ghost).toBe(true)
 
-      await comfyPage.page.keyboard.press('Delete')
-      await comfyPage.nextFrame()
+      await comfyPage.keyboard.press('Delete')
 
       const after = await getNodeById(comfyPage, nodeId)
       expect(after).toBeNull()
@@ -138,8 +134,7 @@ for (const mode of ['litegraph', 'vue'] as const) {
       expect(before).not.toBeNull()
       expect(before!.ghost).toBe(true)
 
-      await comfyPage.page.keyboard.press('Backspace')
-      await comfyPage.nextFrame()
+      await comfyPage.keyboard.press('Backspace')
 
       const after = await getNodeById(comfyPage, nodeId)
       expect(after).toBeNull()
diff --git a/browser_tests/tests/nodeHelp.spec.ts b/browser_tests/tests/nodeHelp.spec.ts
index 7f0f1541f8..a70b989cca 100644
--- a/browser_tests/tests/nodeHelp.spec.ts
+++ b/browser_tests/tests/nodeHelp.spec.ts
@@ -1,10 +1,11 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../fixtures/ComfyPage'
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import { fitToViewInstant } from '../helpers/fitToView'
-import type { NodeReference } from '../fixtures/utils/litegraphUtils'
+} from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { fitToViewInstant } from '@e2e/helpers/fitToView'
+import type { WorkspaceStore } from '@e2e/types/globals'
+import type { NodeReference } from '@e2e/fixtures/utils/litegraphUtils'
 
 // TODO: there might be a better solution for this
 // Helper function to pan canvas and select node
@@ -23,10 +24,69 @@ async function selectNodeWithPan(comfyPage: ComfyPage, nodeRef: NodeReference) {
   await nodeRef.click('title')
 }
 
+async function openSelectionToolboxHelp(comfyPage: ComfyPage) {
+  await expect(comfyPage.selectionToolbox).toBeVisible()
+
+  const helpButton = comfyPage.selectionToolbox.getByTestId('info-button')
+  await expect(helpButton).toBeVisible()
+  await helpButton.click()
+  await comfyPage.nextFrame()
+
+  return comfyPage.page.getByTestId('properties-panel')
+}
+
+async function setLocaleAndWaitForWorkflowReload(
+  comfyPage: ComfyPage,
+  locale: string
+) {
+  await comfyPage.page.evaluate(async (targetLocale) => {
+    const workflow = (window.app!.extensionManager as WorkspaceStore).workflow
+      .activeWorkflow
+
+    if (!workflow) {
+      throw new Error('No active workflow while waiting for locale reload')
+    }
+
+    const changeTracker = workflow.changeTracker.constructor as unknown as {
+      isLoadingGraph: boolean
+    }
+
+    let sawLoading = false
+    const waitForReload = new Promise<void>((resolve, reject) => {
+      const timeoutAt = performance.now() + 5000
+
+      const tick = () => {
+        if (changeTracker.isLoadingGraph) {
+          sawLoading = true
+        }
+
+        if (sawLoading && !changeTracker.isLoadingGraph) {
+          resolve()
+          return
+        }
+
+        if (performance.now() > timeoutAt) {
+          reject(
+            new Error(
+              `Timed out waiting for workflow reload after setting locale to ${targetLocale}`
+            )
+          )
+          return
+        }
+
+        requestAnimationFrame(tick)
+      }
+
+      tick()
+    })
+
+    await window.app!.extensionManager.setting.set('Comfy.Locale', targetLocale)
+    await waitForReload
+  }, locale)
+}
+
 test.describe('Node Help', { tag: ['@slow', '@ui'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setup()
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
   })
 
@@ -46,20 +106,8 @@ test.describe('Node Help', { tag: ['@slow', '@ui'] }, () => {
       // Select the node with panning to ensure toolbox is visible
       await selectNodeWithPan(comfyPage, ksamplerNodes[0])
 
-      // Wait for selection toolbox to appear
-      await expect(comfyPage.selectionToolbox).toBeVisible()
-
-      // Click the help button in the selection toolbox
-      const helpButton = comfyPage.selectionToolbox.locator(
-        'button[data-testid="info-button"]'
-      )
-      await expect(helpButton).toBeVisible()
-      await helpButton.click()
-
       // Verify that the help page is shown for the correct node
-      const helpPage = comfyPage.page.locator(
-        '[data-testid="properties-panel"]'
-      )
+      const helpPage = await openSelectionToolboxHelp(comfyPage)
       await expect(helpPage).toContainText('KSampler')
       await expect(helpPage.locator('.node-help-content')).toBeVisible()
     })
@@ -141,7 +189,7 @@ test.describe('Node Help', { tag: ['@slow', '@ui'] }, () => {
       ).toBeVisible()
 
       // Verify help page is no longer visible
-      await expect(helpPage.locator('.node-help-content')).not.toBeVisible()
+      await expect(helpPage.locator('.node-help-content')).toBeHidden()
     })
   })
 
@@ -168,16 +216,8 @@ test.describe('Node Help', { tag: ['@slow', '@ui'] }, () => {
         await comfyPage.nodeOps.getNodeRefsByType('KSampler')
       await selectNodeWithPan(comfyPage, ksamplerNodes[0])
 
-      // Click help button
-      const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
-      )
-      await helpButton.click()
-
       // Verify loading spinner is shown
-      const helpPage = comfyPage.page.locator(
-        '[data-testid="properties-panel"]'
-      )
+      const helpPage = await openSelectionToolboxHelp(comfyPage)
       await expect(helpPage.locator('.p-progressspinner')).toBeVisible()
 
       // Wait for content to load
@@ -201,16 +241,8 @@ test.describe('Node Help', { tag: ['@slow', '@ui'] }, () => {
         await comfyPage.nodeOps.getNodeRefsByType('KSampler')
       await selectNodeWithPan(comfyPage, ksamplerNodes[0])
 
-      // Click help button
-      const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
-      )
-      await helpButton.click()
-
       // Verify fallback content is shown (description, inputs, outputs)
-      const helpPage = comfyPage.page.locator(
-        '[data-testid="properties-panel"]'
-      )
+      const helpPage = await openSelectionToolboxHelp(comfyPage)
       await expect(helpPage).toContainText('Description')
       await expect(helpPage).toContainText('Inputs')
       await expect(helpPage).toContainText('Outputs')
@@ -239,14 +271,7 @@ test.describe('Node Help', { tag: ['@slow', '@ui'] }, () => {
         await comfyPage.nodeOps.getNodeRefsByType('KSampler')
       await selectNodeWithPan(comfyPage, ksamplerNodes[0])
 
-      const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
-      )
-      await helpButton.click()
-
-      const helpPage = comfyPage.page.locator(
-        '[data-testid="properties-panel"]'
-      )
+      const helpPage = await openSelectionToolboxHelp(comfyPage)
       await expect(helpPage).toContainText('KSampler Documentation')
 
       // Check that relative image paths are prefixed correctly
@@ -290,14 +315,7 @@ test.describe('Node Help', { tag: ['@slow', '@ui'] }, () => {
         await comfyPage.nodeOps.getNodeRefsByType('KSampler')
       await selectNodeWithPan(comfyPage, ksamplerNodes[0])
 
-      const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
-      )
-      await helpButton.click()
-
-      const helpPage = comfyPage.page.locator(
-        '[data-testid="properties-panel"]'
-      )
+      const helpPage = await openSelectionToolboxHelp(comfyPage)
 
       // Check relative video paths are prefixed
       const relativeVideo = helpPage.locator('video[src*="demo.mp4"]')
@@ -364,15 +382,9 @@ This is documentation for a custom node.
         await selectNodeWithPan(comfyPage, firstNode)
       }
 
-      const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
-      )
+      const helpButton = comfyPage.selectionToolbox.getByTestId('info-button')
       if (await helpButton.isVisible()) {
-        await helpButton.click()
-
-        const helpPage = comfyPage.page.locator(
-          '[data-testid="properties-panel"]'
-        )
+        const helpPage = await openSelectionToolboxHelp(comfyPage)
         await expect(helpPage).toContainText('Custom Node Documentation')
 
         // Check image path for custom nodes
@@ -408,14 +420,7 @@ This is documentation for a custom node.
         await comfyPage.nodeOps.getNodeRefsByType('KSampler')
       await selectNodeWithPan(comfyPage, ksamplerNodes[0])
 
-      const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
-      )
-      await helpButton.click()
-
-      const helpPage = comfyPage.page.locator(
-        '[data-testid="properties-panel"]'
-      )
+      const helpPage = await openSelectionToolboxHelp(comfyPage)
 
       // Dangerous elements should be removed
       await expect(helpPage.locator('script')).toHaveCount(0)
@@ -426,8 +431,7 @@ This is documentation for a custom node.
       const imageCount = await images.count()
       for (let i = 0; i < imageCount; i++) {
         const img = images.nth(i)
-        const onError = await img.getAttribute('onerror')
-        expect(onError).toBeNull()
+        await expect(img).not.toHaveAttribute('onerror')
       }
 
       // Check that javascript: links are sanitized
@@ -435,10 +439,7 @@ This is documentation for a custom node.
       const linkCount = await links.count()
       for (let i = 0; i < linkCount; i++) {
         const link = links.nth(i)
-        const href = await link.getAttribute('href')
-        if (href !== null) {
-          expect(href).not.toContain('javascript:')
-        }
+        await expect(link).not.toHaveAttribute('href', /^javascript:/i)
       }
 
       // Safe content should remain
@@ -471,26 +472,20 @@ This is English documentation.
       })
 
       // Set locale to Japanese
-      await comfyPage.settings.setSetting('Comfy.Locale', 'ja')
+      await setLocaleAndWaitForWorkflowReload(comfyPage, 'ja')
 
-      await comfyPage.workflow.loadWorkflow('default')
-      const ksamplerNodes =
-        await comfyPage.nodeOps.getNodeRefsByType('KSampler')
-      await selectNodeWithPan(comfyPage, ksamplerNodes[0])
+      try {
+        await comfyPage.workflow.loadWorkflow('default')
+        const ksamplerNodes =
+          await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+        await selectNodeWithPan(comfyPage, ksamplerNodes[0])
 
-      const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
-      )
-      await helpButton.click()
-
-      const helpPage = comfyPage.page.locator(
-        '[data-testid="properties-panel"]'
-      )
-      await expect(helpPage).toContainText('KSamplerノード')
-      await expect(helpPage).toContainText('これは日本語のドキュメントです')
-
-      // Reset locale
-      await comfyPage.settings.setSetting('Comfy.Locale', 'en')
+        const helpPage = await openSelectionToolboxHelp(comfyPage)
+        await expect(helpPage).toContainText('KSamplerノード')
+        await expect(helpPage).toContainText('これは日本語のドキュメントです')
+      } finally {
+        await setLocaleAndWaitForWorkflowReload(comfyPage, 'en')
+      }
     })
 
     test('Should handle network errors gracefully', async ({ comfyPage }) => {
@@ -504,22 +499,14 @@ This is English documentation.
         await comfyPage.nodeOps.getNodeRefsByType('KSampler')
       await selectNodeWithPan(comfyPage, ksamplerNodes[0])
 
-      const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
-      )
-      await helpButton.click()
-
-      const helpPage = comfyPage.page.locator(
-        '[data-testid="properties-panel"]'
-      )
+      const helpPage = await openSelectionToolboxHelp(comfyPage)
 
       // Should show fallback content (node description)
       await expect(helpPage).toBeVisible()
-      await expect(helpPage.locator('.p-progressspinner')).not.toBeVisible()
+      await expect(helpPage.locator('.p-progressspinner')).toBeHidden()
 
       // Should show some content even on error
-      const content = await helpPage.textContent()
-      expect(content).toBeTruthy()
+      await expect(helpPage).not.toHaveText('')
     })
 
     test('Should update help content when switching between nodes', async ({
@@ -551,14 +538,7 @@ This is English documentation.
         await comfyPage.nodeOps.getNodeRefsByType('KSampler')
       await selectNodeWithPan(comfyPage, ksamplerNodes[0])
 
-      const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
-      )
-      await helpButton.click()
-
-      const helpPage = comfyPage.page.locator(
-        '[data-testid="properties-panel"]'
-      )
+      const helpPage = await openSelectionToolboxHelp(comfyPage)
       await expect(helpPage).toContainText('KSampler Help')
       await expect(helpPage).toContainText('This is KSampler documentation')
 
diff --git a/browser_tests/tests/nodeLibraryEssentials.spec.ts b/browser_tests/tests/nodeLibraryEssentials.spec.ts
index 4f4cb4354e..805007cbd2 100644
--- a/browser_tests/tests/nodeLibraryEssentials.spec.ts
+++ b/browser_tests/tests/nodeLibraryEssentials.spec.ts
@@ -1,12 +1,10 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../fixtures/ComfyPage'
+} from '@e2e/fixtures/ComfyPage'
 
 test.describe('Node Library Essentials Tab', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-
     // Enable the essentials feature flag via the reactive serverFeatureFlags ref.
     // In production, this flag comes via WebSocket or remoteConfig (cloud only).
     // The localhost test server has neither, so we set it directly.
@@ -82,9 +80,7 @@ test.describe('Node Library Essentials Tab', { tag: '@ui' }, () => {
     const firstCard = comfyPage.page.locator('[data-node-name]').first()
     await expect(firstCard).toBeVisible()
 
-    const nodeName = await firstCard.getAttribute('data-node-name')
-    expect(nodeName).toBeTruthy()
-    expect(nodeName!.length).toBeGreaterThan(0)
+    await expect(firstCard).toHaveAttribute('data-node-name', /.+/)
   })
 
   test('Node library can switch between all and essentials tabs', async ({
diff --git a/browser_tests/tests/nodeSearchBox.spec.ts b/browser_tests/tests/nodeSearchBox.spec.ts
index cd840fcc88..bcb9903a0a 100644
--- a/browser_tests/tests/nodeSearchBox.spec.ts
+++ b/browser_tests/tests/nodeSearchBox.spec.ts
@@ -1,8 +1,18 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../fixtures/ComfyPage'
-import type { ComfyPage } from '../fixtures/ComfyPage'
+} from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+
+async function waitForSearchInsertion(
+  comfyPage: ComfyPage,
+  initialNodeCount: number
+) {
+  await expect(comfyPage.searchBox.input).toHaveCount(0)
+  await expect
+    .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+    .toBe(initialNodeCount + 1)
+}
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -60,18 +70,22 @@ test.describe('Node search box', { tag: '@node' }, () => {
   })
 
   test('Can add node', { tag: '@screenshot' }, async ({ comfyPage }) => {
+    const initialNodeCount = await comfyPage.nodeOps.getGraphNodesCount()
     await comfyPage.canvasOps.doubleClick()
     await expect(comfyPage.searchBox.input).toHaveCount(1)
     await comfyPage.searchBox.fillAndSelectFirstNode('KSampler')
+    await waitForSearchInsertion(comfyPage, initialNodeCount)
     await expect(comfyPage.canvas).toHaveScreenshot('added-node.png')
   })
 
   test('Can auto link node', { tag: '@screenshot' }, async ({ comfyPage }) => {
+    const initialNodeCount = await comfyPage.nodeOps.getGraphNodesCount()
     await comfyPage.canvasOps.disconnectEdge()
     // Select the second item as the first item is always reroute
     await comfyPage.searchBox.fillAndSelectFirstNode('CLIPTextEncode', {
       suggestionIndex: 0
     })
+    await waitForSearchInsertion(comfyPage, initialNodeCount)
     await expect(comfyPage.canvas).toHaveScreenshot('auto-linked-node.png')
   })
 
@@ -81,6 +95,7 @@ test.describe('Node search box', { tag: '@node' }, () => {
     async ({ comfyPage }) => {
       await comfyPage.settings.setSetting('Comfy.Graph.AutoPanSpeed', 0)
       await comfyPage.workflow.loadWorkflow('links/batch_move_links')
+      const initialNodeCount = await comfyPage.nodeOps.getGraphNodesCount()
 
       // Get the CLIP output slot (index 1) from the first CheckpointLoaderSimple node (id: 4)
       const checkpointNode = await comfyPage.nodeOps.getNodeRefById(4)
@@ -98,6 +113,7 @@ test.describe('Node search box', { tag: '@node' }, () => {
       await comfyPage.searchBox.fillAndSelectFirstNode('Load Checkpoint', {
         suggestionIndex: 0
       })
+      await waitForSearchInsertion(comfyPage, initialNodeCount)
       await expect(comfyPage.canvas).toHaveScreenshot(
         'auto-linked-node-batch.png'
       )
@@ -108,12 +124,14 @@ test.describe('Node search box', { tag: '@node' }, () => {
     'Link release connecting to node with no slots',
     { tag: '@screenshot' },
     async ({ comfyPage }) => {
+      const initialNodeCount = await comfyPage.nodeOps.getGraphNodesCount()
       await comfyPage.canvasOps.disconnectEdge()
       await expect(comfyPage.searchBox.input).toHaveCount(1)
       await comfyPage.searchBox.removeFilter(0)
       await comfyPage.searchBox.fillAndSelectFirstNode('KSampler', {
         exact: true
       })
+      await waitForSearchInsertion(comfyPage, initialNodeCount)
       await expect(comfyPage.canvas).toHaveScreenshot(
         'added-node-no-connection.png'
       )
@@ -176,43 +194,16 @@ test.describe('Node search box', { tag: '@node' }, () => {
       await expectFilterChips(comfyPage, ['MODEL'])
     })
 
-    // Flaky test.
-    // Sample test failure:
-    // https://github.com/Comfy-Org/ComfyUI_frontend/actions/runs/12696912248/job/35391990861?pr=2210
-    /*
-    1) [chromium-2x] › nodeSearchBox.spec.ts:135:5 › Node search box › Filtering › Outer click dismisses filter panel but keeps search box visible
-
-    Error: expect(locator).not.toBeVisible()
-
-    Locator: getByRole('dialog').locator('div').filter({ hasText: 'Add node filter condition' })
-    Expected: not visible
-    Received: visible
-    Call log:
-      - expect.not.toBeVisible with timeout 5000ms
-      - waiting for getByRole('dialog').locator('div').filter({ hasText: 'Add node filter condition' })
-
-
-      143 |
-      144 |       // Verify the filter selection panel is hidden
-    > 145 |       expect(panel.header).not.toBeVisible()
-          |                                ^
-      146 |
-      147 |       // Verify the node search dialog is still visible
-      148 |       expect(comfyPage.searchBox.input).toBeVisible()
-
-        at /home/runner/work/ComfyUI_frontend/ComfyUI_frontend/ComfyUI_frontend/browser_tests/nodeSearchBox.spec.ts:145:32
-     */
-    test.skip('Outer click dismisses filter panel but keeps search box visible', async ({
+    test('Outer click dismisses filter panel but keeps search box visible', async ({
       comfyPage
     }) => {
       await comfyPage.searchBox.filterButton.click()
       const panel = comfyPage.searchBox.filterSelectionPanel
       await panel.header.waitFor({ state: 'visible' })
-      const panelBounds = await panel.header.boundingBox()
-      await comfyPage.page.mouse.click(panelBounds!.x - 10, panelBounds!.y - 10)
+      await comfyPage.page.keyboard.press('Escape')
 
       // Verify the filter selection panel is hidden
-      await expect(panel.header).not.toBeVisible()
+      await expect(panel.header).toBeHidden()
 
       // Verify the node search dialog is still visible
       await expect(comfyPage.searchBox.input).toBeVisible()
@@ -312,8 +303,8 @@ test.describe('Release context menu', { tag: '@node' }, () => {
         'CLIP | CLIP'
       )
       await comfyPage.page.mouse.move(10, 10)
-      await comfyPage.nextFrame()
-      await expect(comfyPage.canvas).toHaveScreenshot(
+      await comfyPage.expectScreenshot(
+        comfyPage.canvas,
         'link-release-context-menu.png'
       )
     }
@@ -323,11 +314,13 @@ test.describe('Release context menu', { tag: '@node' }, () => {
     'Can search and add node from context menu',
     { tag: '@screenshot' },
     async ({ comfyPage, comfyMouse }) => {
+      const initialNodeCount = await comfyPage.nodeOps.getGraphNodesCount()
       await comfyPage.canvasOps.disconnectEdge()
       await comfyMouse.move({ x: 10, y: 10 })
       await comfyPage.contextMenu.clickMenuItem('Search')
       await comfyPage.nextFrame()
       await comfyPage.searchBox.fillAndSelectFirstNode('CLIP Prompt')
+      await waitForSearchInsertion(comfyPage, initialNodeCount)
       await expect(comfyPage.canvas).toHaveScreenshot(
         'link-context-menu-search.png'
       )
diff --git a/browser_tests/tests/nodeSearchBoxV2.spec.ts b/browser_tests/tests/nodeSearchBoxV2.spec.ts
index 0c91963eed..ee0571a4d4 100644
--- a/browser_tests/tests/nodeSearchBoxV2.spec.ts
+++ b/browser_tests/tests/nodeSearchBoxV2.spec.ts
@@ -1,7 +1,7 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../fixtures/ComfyPage'
+} from '@e2e/fixtures/ComfyPage'
 
 test.describe('Node search box V2', { tag: '@node' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -29,10 +29,11 @@ test.describe('Node search box V2', { tag: '@node' }, () => {
     await expect(searchBoxV2.results.first()).toBeVisible()
 
     await comfyPage.page.keyboard.press('Enter')
-    await expect(searchBoxV2.input).not.toBeVisible()
+    await expect(searchBoxV2.input).toBeHidden()
 
-    const newCount = await comfyPage.nodeOps.getGraphNodesCount()
-    expect(newCount).toBe(initialCount + 1)
+    await expect
+      .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+      .toBe(initialCount + 1)
   })
 
   test('Can add first default result with Enter', async ({ comfyPage }) => {
@@ -47,10 +48,11 @@ test.describe('Node search box V2', { tag: '@node' }, () => {
 
     // Enter should add the first (selected) result
     await comfyPage.page.keyboard.press('Enter')
-    await expect(searchBoxV2.input).not.toBeVisible()
+    await expect(searchBoxV2.input).toBeHidden()
 
-    const newCount = await comfyPage.nodeOps.getGraphNodesCount()
-    expect(newCount).toBe(initialCount + 1)
+    await expect
+      .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+      .toBe(initialCount + 1)
   })
 
   test.describe('Category navigation', () => {
@@ -81,8 +83,7 @@ test.describe('Node search box V2', { tag: '@node' }, () => {
       await searchBoxV2.categoryButton('sampling').click()
 
       await expect(searchBoxV2.results.first()).toBeVisible()
-      const count = await searchBoxV2.results.count()
-      expect(count).toBeGreaterThan(0)
+      await expect.poll(() => searchBoxV2.results.count()).toBeGreaterThan(0)
     })
   })
 
@@ -140,10 +141,11 @@ test.describe('Node search box V2', { tag: '@node' }, () => {
 
       // Enter selects and adds node
       await comfyPage.page.keyboard.press('Enter')
-      await expect(searchBoxV2.input).not.toBeVisible()
+      await expect(searchBoxV2.input).toBeHidden()
 
-      const newCount = await comfyPage.nodeOps.getGraphNodesCount()
-      expect(newCount).toBe(initialCount + 1)
+      await expect
+        .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+        .toBe(initialCount + 1)
     })
   })
 })
diff --git a/browser_tests/tests/nodeSearchBoxV2Extended.spec.ts b/browser_tests/tests/nodeSearchBoxV2Extended.spec.ts
index 2853d72027..9d2abbf670 100644
--- a/browser_tests/tests/nodeSearchBoxV2Extended.spec.ts
+++ b/browser_tests/tests/nodeSearchBoxV2Extended.spec.ts
@@ -1,7 +1,7 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../fixtures/ComfyPage'
+} from '@e2e/fixtures/ComfyPage'
 
 test.describe('Node search box V2 extended', { tag: '@node' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -39,10 +39,11 @@ test.describe('Node search box V2 extended', { tag: '@node' }, () => {
     await expect(searchBoxV2.results.first()).toBeVisible()
 
     await comfyPage.page.keyboard.press('Escape')
-    await expect(searchBoxV2.input).not.toBeVisible()
+    await expect(searchBoxV2.input).toBeHidden()
 
-    const newCount = await comfyPage.nodeOps.getGraphNodesCount()
-    expect(newCount).toBe(initialCount)
+    await expect
+      .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+      .toBe(initialCount)
   })
 
   test('Search clears when reopening', async ({ comfyPage }) => {
@@ -55,7 +56,7 @@ test.describe('Node search box V2 extended', { tag: '@node' }, () => {
     await expect(searchBoxV2.results.first()).toBeVisible()
 
     await comfyPage.page.keyboard.press('Escape')
-    await expect(searchBoxV2.input).not.toBeVisible()
+    await expect(searchBoxV2.input).toBeHidden()
 
     await comfyPage.canvasOps.doubleClick()
     await expect(searchBoxV2.input).toBeVisible()
@@ -75,9 +76,10 @@ test.describe('Node search box V2 extended', { tag: '@node' }, () => {
 
       await searchBoxV2.categoryButton('loaders').click()
       await expect(searchBoxV2.results.first()).toBeVisible()
-      const loaderResults = await searchBoxV2.results.allTextContents()
 
-      expect(samplingResults).not.toEqual(loaderResults)
+      await expect
+        .poll(() => searchBoxV2.results.allTextContents())
+        .not.toEqual(samplingResults)
     })
   })
 
@@ -102,19 +104,18 @@ test.describe('Node search box V2 extended', { tag: '@node' }, () => {
         .click()
 
       // Verify filter chip appeared and results changed
-      const filterChip = searchBoxV2.dialog.locator(
-        '[data-testid="filter-chip"]'
-      )
+      const filterChip = searchBoxV2.dialog.getByTestId('filter-chip')
       await expect(filterChip).toBeVisible()
       await expect(searchBoxV2.results.first()).toBeVisible()
-      const filteredResults = await searchBoxV2.results.allTextContents()
-      expect(filteredResults).not.toEqual(unfilteredResults)
+      await expect
+        .poll(() => searchBoxV2.results.allTextContents())
+        .not.toEqual(unfilteredResults)
 
       // Remove filter by clicking the chip delete button
       await filterChip.getByTestId('chip-delete').click()
 
       // Filter chip should be removed
-      await expect(filterChip).not.toBeVisible()
+      await expect(filterChip).toBeHidden()
       await expect(searchBoxV2.results.first()).toBeVisible()
     })
   })
diff --git a/browser_tests/tests/noteNode.spec.ts b/browser_tests/tests/noteNode.spec.ts
index c50a533ea5..4fc4545e3e 100644
--- a/browser_tests/tests/noteNode.spec.ts
+++ b/browser_tests/tests/noteNode.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
diff --git a/browser_tests/tests/outputHistory.spec.ts b/browser_tests/tests/outputHistory.spec.ts
new file mode 100644
index 0000000000..63287ee885
--- /dev/null
+++ b/browser_tests/tests/outputHistory.spec.ts
@@ -0,0 +1,415 @@
+import type { WebSocketRoute } from '@playwright/test'
+import { mergeTests } from '@playwright/test'
+
+import type { RawJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
+import {
+  comfyPageFixture,
+  comfyExpect as expect
+} from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { webSocketFixture } from '@e2e/fixtures/ws'
+import { ExecutionHelper } from '@e2e/fixtures/helpers/ExecutionHelper'
+
+const test = mergeTests(comfyPageFixture, webSocketFixture)
+
+// Node IDs from the default workflow (browser_tests/assets/default.json, 7 nodes)
+const SAVE_IMAGE_NODE = '9'
+const KSAMPLER_NODE = '3'
+const ALL_NODE_IDS = ['4', '6', '7', '5', KSAMPLER_NODE, '8', SAVE_IMAGE_NODE]
+
+/** Queue a prompt, intercept it, and send execution_start. */
+async function startExecution(
+  comfyPage: ComfyPage,
+  ws: WebSocketRoute,
+  exec?: ExecutionHelper
+) {
+  exec ??= new ExecutionHelper(comfyPage, ws)
+  const jobId = await exec.run()
+  // Allow storeJob() to complete before sending WS events
+  await comfyPage.nextFrame()
+  exec.executionStart(jobId)
+  return { exec, jobId }
+}
+
+function imageOutput(...filenames: string[]) {
+  return {
+    images: filenames.map((filename) => ({
+      filename,
+      subfolder: '',
+      type: 'output'
+    }))
+  }
+}
+
+test.describe('Output History', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.appMode.enterAppModeWithInputs([[KSAMPLER_NODE, 'seed']])
+    await expect(comfyPage.appMode.linearWidgets).toBeVisible()
+    await comfyPage.nextFrame()
+  })
+
+  test('Skeleton appears on execution start', async ({
+    comfyPage,
+    getWebSocket
+  }) => {
+    const ws = await getWebSocket()
+    await startExecution(comfyPage, ws)
+
+    await expect(
+      comfyPage.appMode.outputHistory.skeletons.first()
+    ).toBeVisible()
+  })
+
+  test('Latent preview replaces skeleton', async ({
+    comfyPage,
+    getWebSocket
+  }) => {
+    const ws = await getWebSocket()
+    const { exec, jobId } = await startExecution(comfyPage, ws)
+
+    await expect(
+      comfyPage.appMode.outputHistory.skeletons.first()
+    ).toBeVisible()
+
+    exec.latentPreview(jobId, SAVE_IMAGE_NODE)
+
+    await expect(
+      comfyPage.appMode.outputHistory.latentPreviews.first()
+    ).toBeVisible()
+    await expect(comfyPage.appMode.outputHistory.skeletons).toHaveCount(0)
+  })
+
+  test('Image output replaces skeleton on executed', async ({
+    comfyPage,
+    getWebSocket
+  }) => {
+    const ws = await getWebSocket()
+    const { exec, jobId } = await startExecution(comfyPage, ws)
+
+    await expect(
+      comfyPage.appMode.outputHistory.inProgressItems.first()
+    ).toBeVisible()
+
+    exec.executed(jobId, SAVE_IMAGE_NODE, imageOutput('test_output.png'))
+
+    await expect(
+      comfyPage.appMode.outputHistory.imageOutputs.first()
+    ).toBeVisible()
+    await expect(comfyPage.appMode.outputHistory.skeletons).toHaveCount(0)
+  })
+
+  test('Multiple outputs from single execution', async ({
+    comfyPage,
+    getWebSocket
+  }) => {
+    const ws = await getWebSocket()
+    const { exec, jobId } = await startExecution(comfyPage, ws)
+
+    await expect(
+      comfyPage.appMode.outputHistory.inProgressItems.first()
+    ).toBeVisible()
+
+    exec.executed(
+      jobId,
+      SAVE_IMAGE_NODE,
+      imageOutput('output_001.png', 'output_002.png', 'output_003.png')
+    )
+
+    await expect(comfyPage.appMode.outputHistory.imageOutputs).toHaveCount(3)
+  })
+
+  test('Video output renders video element', async ({
+    comfyPage,
+    getWebSocket
+  }) => {
+    const ws = await getWebSocket()
+    const { exec, jobId } = await startExecution(comfyPage, ws)
+
+    await expect(
+      comfyPage.appMode.outputHistory.inProgressItems.first()
+    ).toBeVisible()
+
+    exec.executed(jobId, SAVE_IMAGE_NODE, {
+      gifs: [{ filename: 'output.mp4', subfolder: '', type: 'output' }]
+    })
+
+    await expect(
+      comfyPage.appMode.outputHistory.videoOutputs.first()
+    ).toBeVisible()
+  })
+
+  test('Cancel button sends interrupt during execution', async ({
+    comfyPage,
+    getWebSocket
+  }) => {
+    const ws = await getWebSocket()
+    const { exec, jobId } = await startExecution(comfyPage, ws)
+
+    const job: RawJobListItem = {
+      id: jobId,
+      status: 'in_progress',
+      create_time: Date.now() / 1000,
+      priority: 0
+    }
+    await comfyPage.page.route(
+      /\/api\/jobs\?status=in_progress/,
+      async (route) => {
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({
+            jobs: [job],
+            pagination: { offset: 0, limit: 200, total: 1, has_more: false }
+          })
+        })
+      },
+      { times: 1 }
+    )
+    // Trigger queue refresh
+    exec.status(1)
+    await comfyPage.nextFrame()
+
+    await expect(comfyPage.appMode.cancelRunButton).toBeVisible()
+
+    await comfyPage.page.route('**/interrupt', (route) =>
+      route.fulfill({ status: 200 })
+    )
+    const interruptRequest = comfyPage.page.waitForRequest('**/interrupt')
+    await comfyPage.appMode.cancelRunButton.click()
+    await interruptRequest
+  })
+
+  test('Full execution lifecycle cleans up in-progress items', async ({
+    comfyPage,
+    getWebSocket
+  }) => {
+    const ws = await getWebSocket()
+    const { exec, jobId } = await startExecution(comfyPage, ws)
+
+    // Skeleton appears
+    await expect(
+      comfyPage.appMode.outputHistory.skeletons.first()
+    ).toBeVisible()
+
+    // Latent preview replaces skeleton
+    exec.latentPreview(jobId, SAVE_IMAGE_NODE)
+    await expect(
+      comfyPage.appMode.outputHistory.latentPreviews.first()
+    ).toBeVisible()
+
+    // Image output replaces latent
+    exec.executed(jobId, SAVE_IMAGE_NODE, imageOutput('lifecycle_out.png'))
+    await expect(
+      comfyPage.appMode.outputHistory.imageOutputs.first()
+    ).toBeVisible()
+
+    // Job completes with history mock - in-progress items fully resolved
+    await exec.completeWithHistory(jobId, SAVE_IMAGE_NODE, 'lifecycle_out.png')
+
+    await expect(comfyPage.appMode.outputHistory.inProgressItems).toHaveCount(0)
+    // Output now appears as a history item
+    await expect(
+      comfyPage.appMode.outputHistory.historyItems.first()
+    ).toBeVisible()
+  })
+
+  test('Auto-selection follows latest in-progress item', async ({
+    comfyPage,
+    getWebSocket
+  }) => {
+    const ws = await getWebSocket()
+    const { exec, jobId } = await startExecution(comfyPage, ws)
+
+    // Skeleton is auto-selected
+    await expect(
+      comfyPage.appMode.outputHistory.selectedInProgressItem
+    ).toBeVisible()
+
+    // First image is auto-selected
+    exec.executed(jobId, SAVE_IMAGE_NODE, imageOutput('first.png'))
+    await expect(
+      comfyPage.appMode.outputHistory.selectedInProgressItem.getByTestId(
+        'linear-image-output'
+      )
+    ).toHaveAttribute('src', /first\.png/)
+
+    // Second image arrives - selection auto-follows without user click
+    exec.executed(jobId, SAVE_IMAGE_NODE, imageOutput('second.png'))
+    await expect(
+      comfyPage.appMode.outputHistory.selectedInProgressItem.getByTestId(
+        'linear-image-output'
+      )
+    ).toHaveAttribute('src', /second\.png/)
+  })
+
+  test('Clicking item breaks auto-follow during execution', async ({
+    comfyPage,
+    getWebSocket
+  }) => {
+    const ws = await getWebSocket()
+    const { exec, jobId } = await startExecution(comfyPage, ws)
+
+    // Send first image
+    exec.executed(jobId, SAVE_IMAGE_NODE, imageOutput('first.png'))
+    await expect(comfyPage.appMode.outputHistory.imageOutputs).toHaveCount(1)
+
+    // Click the first image to break auto-follow
+    await comfyPage.appMode.outputHistory.inProgressItems.first().click()
+
+    // Send second image - selection should NOT move to it
+    exec.executed(jobId, SAVE_IMAGE_NODE, imageOutput('second.png'))
+    await expect(comfyPage.appMode.outputHistory.imageOutputs).toHaveCount(2)
+
+    // The first item should still be selected (not auto-followed to second)
+    await expect(
+      comfyPage.appMode.outputHistory.selectedInProgressItem
+    ).toHaveCount(1)
+    await expect(
+      comfyPage.appMode.outputHistory.selectedInProgressItem.getByTestId(
+        'linear-image-output'
+      )
+    ).toHaveAttribute('src', /first\.png/)
+  })
+
+  test('Non-output node executed events are filtered', async ({
+    comfyPage,
+    getWebSocket
+  }) => {
+    const ws = await getWebSocket()
+    const { exec, jobId } = await startExecution(comfyPage, ws)
+
+    await expect(
+      comfyPage.appMode.outputHistory.inProgressItems.first()
+    ).toBeVisible()
+
+    // KSampler is not an output node - should be filtered
+    exec.executed(jobId, KSAMPLER_NODE, imageOutput('ksampler_out.png'))
+    await comfyPage.nextFrame()
+
+    // KSampler output should not create image outputs
+    await expect(comfyPage.appMode.outputHistory.imageOutputs).toHaveCount(0)
+
+    // Now send from the actual output node (SaveImage)
+    exec.executed(jobId, SAVE_IMAGE_NODE, imageOutput('save_image_out.png'))
+    await expect(
+      comfyPage.appMode.outputHistory.imageOutputs.first()
+    ).toBeVisible()
+  })
+
+  test('In-progress items are outside the scrollable area', async ({
+    comfyPage,
+    getWebSocket
+  }) => {
+    const ws = await getWebSocket()
+
+    // Complete one execution with 100 image outputs
+    const { exec, jobId } = await startExecution(comfyPage, ws)
+    exec.executed(
+      jobId,
+      SAVE_IMAGE_NODE,
+      imageOutput(
+        ...Array.from(
+          { length: 100 },
+          (_, i) => `image_${String(i).padStart(3, '0')}.png`
+        )
+      )
+    )
+    await exec.completeWithHistory(jobId, SAVE_IMAGE_NODE, 'image_000.png')
+
+    await expect(comfyPage.appMode.outputHistory.historyItems).toHaveCount(100)
+
+    // First history item is visible before scrolling
+    const firstItem = comfyPage.appMode.outputHistory.historyItems.first()
+    await expect(firstItem).toBeInViewport()
+
+    // Scroll the history feed all the way to the right
+    await comfyPage.appMode.outputHistory.outputs.evaluate((el) => {
+      el.scrollLeft = el.scrollWidth
+    })
+
+    // First history item is now off-screen
+    await expect(firstItem).not.toBeInViewport()
+
+    // Start a new execution to get an in-progress item
+    await startExecution(comfyPage, ws, exec)
+
+    // In-progress item is visible despite scrolling
+    await expect(
+      comfyPage.appMode.outputHistory.inProgressItems.first()
+    ).toBeInViewport()
+  })
+
+  test('Execution error cleans up in-progress items', async ({
+    comfyPage,
+    getWebSocket
+  }) => {
+    const ws = await getWebSocket()
+    const { exec, jobId } = await startExecution(comfyPage, ws)
+
+    await expect(
+      comfyPage.appMode.outputHistory.inProgressItems.first()
+    ).toBeVisible()
+
+    exec.executionError(jobId, KSAMPLER_NODE, 'Test error')
+
+    await expect(comfyPage.appMode.outputHistory.inProgressItems).toHaveCount(0)
+  })
+
+  test('Progress bars update for both node and overall progress', async ({
+    comfyPage,
+    getWebSocket
+  }) => {
+    const ws = await getWebSocket()
+    const { exec, jobId } = await startExecution(comfyPage, ws)
+
+    const {
+      inProgressItems,
+      headerOverallProgress,
+      headerNodeProgress,
+      itemOverallProgress,
+      itemNodeProgress
+    } = comfyPage.appMode.outputHistory
+
+    await expect(inProgressItems.first()).toBeVisible()
+
+    // Initially both bars are at 0%
+    await expect(headerOverallProgress).toHaveAttribute('style', /width:\s*0%/)
+    await expect(headerNodeProgress).toHaveAttribute('style', /width:\s*0%/)
+
+    // KSampler starts executing - node progress at 50%
+    exec.executing(jobId, KSAMPLER_NODE)
+    exec.progress(jobId, KSAMPLER_NODE, 5, 10)
+
+    await expect(headerNodeProgress).toHaveAttribute('style', /width:\s*50%/)
+    await expect(itemNodeProgress).toHaveAttribute('style', /width:\s*50%/)
+    // Overall still 0% - no nodes completed yet
+    await expect(headerOverallProgress).toHaveAttribute('style', /width:\s*0%/)
+
+    // KSampler finishes - overall advances (1 of 7 nodes)
+    exec.executed(jobId, KSAMPLER_NODE, {})
+
+    const oneNodePercent = Math.round((1 / ALL_NODE_IDS.length) * 100)
+    const pct = new RegExp(`width:\\s*${oneNodePercent}%`)
+    await expect(headerOverallProgress).toHaveAttribute('style', pct)
+    await expect(itemOverallProgress).toHaveAttribute('style', pct)
+
+    // Node progress reaches 100%
+    exec.progress(jobId, KSAMPLER_NODE, 10, 10)
+
+    await expect(headerNodeProgress).toHaveAttribute('style', /width:\s*100%/)
+    await expect(itemNodeProgress).toHaveAttribute('style', /width:\s*100%/)
+
+    // Complete remaining nodes - overall reaches 100%
+    const remainingNodes = ALL_NODE_IDS.filter((id) => id !== KSAMPLER_NODE)
+    for (const nodeId of remainingNodes) {
+      exec.executing(jobId, nodeId)
+      exec.executed(jobId, nodeId, {})
+    }
+
+    await expect(headerOverallProgress).toHaveAttribute(
+      'style',
+      /width:\s*100%/
+    )
+    await expect(itemOverallProgress).toHaveAttribute('style', /width:\s*100%/)
+  })
+})
diff --git a/browser_tests/tests/painter.spec.ts b/browser_tests/tests/painter.spec.ts
index 974cadb05e..503485b51d 100644
--- a/browser_tests/tests/painter.spec.ts
+++ b/browser_tests/tests/painter.spec.ts
@@ -1,12 +1,18 @@
+import type { UploadImageResponse } from '@comfyorg/ingest-types'
+
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import {
+  drawStroke,
+  hasCanvasContent,
+  triggerSerialization
+} from '@e2e/helpers/painter'
 
-test.describe('Painter', () => {
+test.describe('Painter', { tag: ['@widget', '@vue-nodes'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.page.evaluate(() => window.app?.graph?.clear())
     await comfyPage.workflow.loadWorkflow('widgets/painter_widget')
-    await comfyPage.vueNodes.waitForNodes()
   })
 
   test(
@@ -20,9 +26,15 @@ test.describe('Painter', () => {
       await expect(painterWidget).toBeVisible()
 
       await expect(painterWidget.locator('canvas')).toBeVisible()
-      await expect(painterWidget.getByText('Brush')).toBeVisible()
-      await expect(painterWidget.getByText('Eraser')).toBeVisible()
-      await expect(painterWidget.getByText('Clear')).toBeVisible()
+      await expect(
+        painterWidget.getByRole('button', { name: 'Brush' })
+      ).toBeVisible()
+      await expect(
+        painterWidget.getByRole('button', { name: 'Eraser' })
+      ).toBeVisible()
+      await expect(
+        painterWidget.getByTestId('painter-clear-button')
+      ).toBeVisible()
       await expect(
         painterWidget.locator('input[type="color"]').first()
       ).toBeVisible()
@@ -39,19 +51,66 @@ test.describe('Painter', () => {
       const canvas = node.locator('.widget-expands canvas')
       await expect(canvas).toBeVisible()
 
-      const isEmptyBefore = await canvas.evaluate((el) => {
-        const ctx = (el as HTMLCanvasElement).getContext('2d')
-        if (!ctx) return true
-        const data = ctx.getImageData(
-          0,
-          0,
-          (el as HTMLCanvasElement).width,
-          (el as HTMLCanvasElement).height
-        )
-        return data.data.every((v, i) => (i % 4 === 3 ? v === 0 : true))
-      })
-      expect(isEmptyBefore).toBe(true)
+      expect(await hasCanvasContent(canvas), 'canvas should start empty').toBe(
+        false
+      )
 
+      await drawStroke(comfyPage.page, canvas)
+
+      await expect
+        .poll(() => hasCanvasContent(canvas), {
+          message: 'canvas should have content after stroke'
+        })
+        .toBe(true)
+
+      await expect(node).toHaveScreenshot('painter-after-stroke.png')
+    }
+  )
+
+  test.describe('Drawing', () => {
+    test(
+      'Eraser removes drawn content',
+      { tag: '@smoke' },
+      async ({ comfyPage }) => {
+        const node = comfyPage.vueNodes.getNodeLocator('1')
+        const painterWidget = node.locator('.widget-expands')
+        const canvas = painterWidget.locator('canvas')
+
+        await drawStroke(comfyPage.page, canvas)
+
+        await expect
+          .poll(() => hasCanvasContent(canvas), {
+            message: 'canvas must have content before erasing'
+          })
+          .toBe(true)
+
+        await painterWidget.getByRole('button', { name: 'Eraser' }).click()
+        await drawStroke(comfyPage.page, canvas)
+
+        await expect
+          .poll(
+            () =>
+              canvas.evaluate((el: HTMLCanvasElement) => {
+                const ctx = el.getContext('2d')
+                if (!ctx) return false
+                const cx = Math.floor(el.width / 2)
+                const cy = Math.floor(el.height / 2)
+                const { data } = ctx.getImageData(cx - 5, cy - 5, 10, 10)
+                return data.every((v, i) => i % 4 !== 3 || v === 0)
+              }),
+            { message: 'erased area should be transparent' }
+          )
+          .toBe(true)
+      }
+    )
+
+    test('Stroke ends cleanly when pointer up fires outside canvas', async ({
+      comfyPage
+    }) => {
+      const painterWidget = comfyPage.vueNodes
+        .getNodeLocator('1')
+        .locator('.widget-expands')
+      const canvas = painterWidget.locator('canvas')
       const box = await canvas.boundingBox()
       if (!box) throw new Error('Canvas bounding box not found')
 
@@ -65,28 +124,310 @@ test.describe('Painter', () => {
         box.y + box.height * 0.5,
         { steps: 10 }
       )
+      await comfyPage.page.mouse.move(box.x - 20, box.y + box.height * 0.5)
       await comfyPage.page.mouse.up()
+
       await comfyPage.nextFrame()
 
-      await expect(async () => {
-        const hasContent = await canvas.evaluate((el) => {
-          const ctx = (el as HTMLCanvasElement).getContext('2d')
-          if (!ctx) return false
-          const data = ctx.getImageData(
-            0,
-            0,
-            (el as HTMLCanvasElement).width,
-            (el as HTMLCanvasElement).height
-          )
-          for (let i = 3; i < data.data.length; i += 4) {
-            if (data.data[i] > 0) return true
-          }
-          return false
+      await expect
+        .poll(() => hasCanvasContent(canvas), {
+          message:
+            'canvas should have content after stroke with pointer up outside'
         })
-        expect(hasContent).toBe(true)
-      }).toPass()
+        .toBe(true)
+    })
+  })
 
-      await expect(node).toHaveScreenshot('painter-after-stroke.png')
-    }
-  )
+  test.describe('Tool selection', () => {
+    test('Tool switching toggles brush-only controls', async ({
+      comfyPage
+    }) => {
+      const painterWidget = comfyPage.vueNodes
+        .getNodeLocator('1')
+        .locator('.widget-expands')
+
+      await expect(painterWidget.getByTestId('painter-color-row')).toBeVisible()
+      await expect(
+        painterWidget.getByTestId('painter-hardness-row')
+      ).toBeVisible()
+
+      await painterWidget.getByRole('button', { name: 'Eraser' }).click()
+
+      await expect(
+        painterWidget.getByTestId('painter-color-row'),
+        'color row should be hidden in eraser mode'
+      ).toBeHidden()
+      await expect(
+        painterWidget.getByTestId('painter-hardness-row')
+      ).toBeHidden()
+
+      await painterWidget.getByRole('button', { name: 'Brush' }).click()
+
+      await expect(painterWidget.getByTestId('painter-color-row')).toBeVisible()
+      await expect(
+        painterWidget.getByTestId('painter-hardness-row')
+      ).toBeVisible()
+    })
+  })
+
+  test.describe('Brush settings', () => {
+    test('Size slider updates the displayed value', async ({ comfyPage }) => {
+      const painterWidget = comfyPage.vueNodes
+        .getNodeLocator('1')
+        .locator('.widget-expands')
+      const sizeRow = painterWidget.getByTestId('painter-size-row')
+      const sizeSlider = sizeRow.getByRole('slider')
+      const sizeDisplay = sizeRow.getByTestId('painter-size-value')
+
+      await expect(sizeDisplay).toHaveText('20')
+
+      await sizeSlider.focus()
+      for (let i = 0; i < 10; i++) {
+        await sizeSlider.press('ArrowRight')
+      }
+
+      await expect(sizeDisplay).toHaveText('30')
+    })
+
+    test('Opacity input clamps out-of-range values', async ({ comfyPage }) => {
+      const painterWidget = comfyPage.vueNodes
+        .getNodeLocator('1')
+        .locator('.widget-expands')
+      const opacityInput = painterWidget
+        .getByTestId('painter-color-row')
+        .locator('input[type="number"]')
+
+      await opacityInput.fill('150')
+      await opacityInput.press('Tab')
+      await expect(opacityInput).toHaveValue('100')
+
+      await opacityInput.fill('-10')
+      await opacityInput.press('Tab')
+      await expect(opacityInput).toHaveValue('0')
+    })
+  })
+
+  test.describe('Canvas size controls', () => {
+    test('Width and height sliders visible without connected input', async ({
+      comfyPage
+    }) => {
+      const painterWidget = comfyPage.vueNodes
+        .getNodeLocator('1')
+        .locator('.widget-expands')
+
+      await expect(painterWidget.getByTestId('painter-width-row')).toBeVisible()
+      await expect(
+        painterWidget.getByTestId('painter-height-row')
+      ).toBeVisible()
+
+      await expect(
+        painterWidget.getByTestId('painter-dimension-text')
+      ).toBeHidden()
+    })
+
+    test('Width slider resizes the canvas element', async ({ comfyPage }) => {
+      const painterWidget = comfyPage.vueNodes
+        .getNodeLocator('1')
+        .locator('.widget-expands')
+      const canvas = painterWidget.locator('canvas')
+      const widthSlider = painterWidget
+        .getByTestId('painter-width-row')
+        .getByRole('slider')
+
+      const initialWidth = await canvas.evaluate(
+        (el: HTMLCanvasElement) => el.width
+      )
+      expect(initialWidth, 'canvas should start at default width').toBe(512)
+
+      await widthSlider.focus()
+      await widthSlider.press('ArrowRight')
+
+      await expect
+        .poll(() => canvas.evaluate((el: HTMLCanvasElement) => el.width))
+        .toBe(576)
+    })
+
+    test(
+      'Resize preserves existing drawing',
+      { tag: ['@smoke', '@screenshot'] },
+      async ({ comfyPage }) => {
+        const node = comfyPage.vueNodes.getNodeLocator('1')
+        const painterWidget = node.locator('.widget-expands')
+        const canvas = painterWidget.locator('canvas')
+        const widthSlider = painterWidget
+          .getByTestId('painter-width-row')
+          .getByRole('slider')
+
+        await drawStroke(comfyPage.page, canvas)
+        await expect
+          .poll(() => hasCanvasContent(canvas), {
+            message: 'canvas must have content before resize'
+          })
+          .toBe(true)
+
+        await widthSlider.focus()
+        await widthSlider.press('ArrowRight')
+
+        await expect
+          .poll(() => canvas.evaluate((el: HTMLCanvasElement) => el.width))
+          .toBe(576)
+
+        await expect.poll(() => hasCanvasContent(canvas)).toBe(true)
+        await expect(node).toHaveScreenshot('painter-after-resize.png')
+      }
+    )
+  })
+
+  test.describe('Clear', () => {
+    test(
+      'Clear removes all drawn content',
+      { tag: '@smoke' },
+      async ({ comfyPage }) => {
+        const painterWidget = comfyPage.vueNodes
+          .getNodeLocator('1')
+          .locator('.widget-expands')
+        const canvas = painterWidget.locator('canvas')
+
+        await drawStroke(comfyPage.page, canvas)
+        await expect
+          .poll(() => hasCanvasContent(canvas), {
+            message: 'canvas must have content before clear'
+          })
+          .toBe(true)
+
+        const clearButton = painterWidget.getByTestId('painter-clear-button')
+        await clearButton.dispatchEvent('click')
+
+        await expect
+          .poll(() => hasCanvasContent(canvas), {
+            message: 'canvas should be clear after click'
+          })
+          .toBe(false)
+      }
+    )
+  })
+
+  test.describe('Serialization', () => {
+    test('Drawing triggers upload on serialization', async ({ comfyPage }) => {
+      const mockUploadResponse: UploadImageResponse = {
+        name: 'painter-test.png'
+      }
+      let uploadCount = 0
+
+      await comfyPage.page.route('**/upload/image', async (route) => {
+        uploadCount++
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify(mockUploadResponse)
+        })
+      })
+
+      const canvas = comfyPage.vueNodes
+        .getNodeLocator('1')
+        .locator('.widget-expands canvas')
+
+      await drawStroke(comfyPage.page, canvas)
+
+      await triggerSerialization(comfyPage.page)
+
+      expect(uploadCount, 'should upload exactly once').toBe(1)
+    })
+
+    test('Empty canvas does not upload on serialization', async ({
+      comfyPage
+    }) => {
+      let uploadCount = 0
+
+      await comfyPage.page.route('**/upload/image', async (route) => {
+        uploadCount++
+        const mockResponse: UploadImageResponse = { name: 'painter-test.png' }
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify(mockResponse)
+        })
+      })
+
+      await triggerSerialization(comfyPage.page)
+
+      expect(uploadCount, 'empty canvas should not upload').toBe(0)
+    })
+
+    test('Upload failure shows error toast', async ({ comfyPage }) => {
+      await comfyPage.page.route('**/upload/image', async (route) => {
+        await route.fulfill({ status: 500 })
+      })
+
+      const canvas = comfyPage.vueNodes
+        .getNodeLocator('1')
+        .locator('.widget-expands canvas')
+
+      await drawStroke(comfyPage.page, canvas)
+
+      await expect(triggerSerialization(comfyPage.page)).rejects.toThrow()
+
+      await expect(comfyPage.toast.visibleToasts.first()).toBeVisible()
+    })
+  })
+
+  test.describe('Eraser', () => {
+    test('Eraser removes previously drawn content', async ({ comfyPage }) => {
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      const painterWidget = node.locator('.widget-expands')
+      const canvas = painterWidget.locator('canvas')
+      await expect(canvas).toBeVisible()
+
+      await drawStroke(comfyPage.page, canvas)
+      await comfyPage.nextFrame()
+      await expect.poll(() => hasCanvasContent(canvas)).toBe(true)
+
+      await painterWidget.getByRole('button', { name: 'Eraser' }).click()
+      await drawStroke(comfyPage.page, canvas)
+      await comfyPage.nextFrame()
+
+      await expect
+        .poll(
+          () =>
+            canvas.evaluate((el: HTMLCanvasElement) => {
+              const ctx = el.getContext('2d')
+              if (!ctx) return false
+              const cx = Math.floor(el.width / 2)
+              const cy = Math.floor(el.height / 2)
+              const { data } = ctx.getImageData(cx - 5, cy - 5, 10, 10)
+              return data.every((v, i) => i % 4 !== 3 || v === 0)
+            }),
+          { message: 'erased area should be transparent' }
+        )
+        .toBe(true)
+    })
+
+    test('Eraser on empty canvas adds no content', async ({ comfyPage }) => {
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      const painterWidget = node.locator('.widget-expands')
+      const canvas = painterWidget.locator('canvas')
+      await expect(canvas).toBeVisible()
+
+      await painterWidget.getByRole('button', { name: 'Eraser' }).click()
+      await drawStroke(comfyPage.page, canvas)
+      await comfyPage.nextFrame()
+
+      await expect.poll(() => hasCanvasContent(canvas)).toBe(false)
+    })
+  })
+
+  test('Multiple strokes accumulate on the canvas', async ({ comfyPage }) => {
+    const canvas = comfyPage.vueNodes
+      .getNodeLocator('1')
+      .locator('.widget-expands canvas')
+    await expect(canvas).toBeVisible()
+
+    await drawStroke(comfyPage.page, canvas, { yPct: 0.3 })
+    await comfyPage.nextFrame()
+    await expect.poll(() => hasCanvasContent(canvas)).toBe(true)
+
+    await drawStroke(comfyPage.page, canvas, { yPct: 0.7 })
+    await comfyPage.nextFrame()
+    await expect.poll(() => hasCanvasContent(canvas)).toBe(true)
+  })
 })
diff --git a/browser_tests/tests/painter.spec.ts-snapshots/painter-after-resize-chromium-linux.png b/browser_tests/tests/painter.spec.ts-snapshots/painter-after-resize-chromium-linux.png
new file mode 100644
index 0000000000..a1db2ac4a1
Binary files /dev/null and b/browser_tests/tests/painter.spec.ts-snapshots/painter-after-resize-chromium-linux.png differ
diff --git a/browser_tests/tests/pasteImageContextMenu.spec.ts b/browser_tests/tests/pasteImageContextMenu.spec.ts
index 6617f2d058..314741763c 100644
--- a/browser_tests/tests/pasteImageContextMenu.spec.ts
+++ b/browser_tests/tests/pasteImageContextMenu.spec.ts
@@ -1,54 +1,54 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
-test.describe('Paste Image context menu option', { tag: ['@node'] }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-  })
+test.describe(
+  'Paste Image context menu option',
+  { tag: ['@node', '@vue-nodes'] },
+  () => {
+    test('shows Paste Image in LoadImage node context menu', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
 
-  test('shows Paste Image in LoadImage node context menu', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
+      const loadImageNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
+      )[0]
 
-    const loadImageNode = (
-      await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
-    )[0]
+      const nodeEl = comfyPage.page.locator(
+        `[data-node-id="${loadImageNode.id}"]`
+      )
+      await nodeEl.click({ button: 'right' })
+      const menu = comfyPage.page.locator('.p-contextmenu')
+      await menu.waitFor({ state: 'visible' })
+      const menuLabels = await menu
+        .locator('[role="menuitem"] span.flex-1')
+        .allInnerTexts()
 
-    const nodeEl = comfyPage.page.locator(
-      `[data-node-id="${loadImageNode.id}"]`
-    )
-    await nodeEl.click({ button: 'right' })
-    const menu = comfyPage.page.locator('.p-contextmenu')
-    await menu.waitFor({ state: 'visible' })
-    const menuLabels = await menu
-      .locator('[role="menuitem"] span.flex-1')
-      .allInnerTexts()
+      expect(menuLabels).toContain('Paste Image')
+    })
 
-    expect(menuLabels).toContain('Paste Image')
-  })
+    test('does not show Paste Image on output-only image nodes', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('nodes/single_save_image_node')
 
-  test('does not show Paste Image on output-only image nodes', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow('nodes/single_save_image_node')
+      const saveImageNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('SaveImage')
+      )[0]
 
-    const saveImageNode = (
-      await comfyPage.nodeOps.getNodeRefsByType('SaveImage')
-    )[0]
+      const nodeEl = comfyPage.page.locator(
+        `[data-node-id="${saveImageNode.id}"]`
+      )
+      await nodeEl.click({ button: 'right' })
+      const menu = comfyPage.page.locator('.p-contextmenu')
+      await menu.waitFor({ state: 'visible' })
+      const menuLabels = await menu
+        .locator('[role="menuitem"] span.flex-1')
+        .allInnerTexts()
 
-    const nodeEl = comfyPage.page.locator(
-      `[data-node-id="${saveImageNode.id}"]`
-    )
-    await nodeEl.click({ button: 'right' })
-    const menu = comfyPage.page.locator('.p-contextmenu')
-    await menu.waitFor({ state: 'visible' })
-    const menuLabels = await menu
-      .locator('[role="menuitem"] span.flex-1')
-      .allInnerTexts()
-
-    expect(menuLabels).not.toContain('Paste Image')
-    expect(menuLabels).not.toContain('Open Image')
-  })
-})
+      expect(menuLabels).not.toContain('Paste Image')
+      expect(menuLabels).not.toContain('Open Image')
+    })
+  }
+)
diff --git a/browser_tests/tests/performance.spec.ts b/browser_tests/tests/performance.spec.ts
index fcf74a6351..10a0ac8fb4 100644
--- a/browser_tests/tests/performance.spec.ts
+++ b/browser_tests/tests/performance.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { recordMeasurement } from '../helpers/perfReporter'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { logMeasurement, recordMeasurement } from '@e2e/helpers/perfReporter'
 
 test.describe('Performance', { tag: ['@perf'] }, () => {
   test('canvas idle style recalculations', async ({ comfyPage }) => {
@@ -186,6 +186,23 @@ test.describe('Performance', { tag: ['@perf'] }, () => {
     )
   })
 
+  test('large graph viewport pan sweep', async ({ comfyPage }) => {
+    await comfyPage.workflow.loadWorkflow('large-graph-workflow')
+
+    await comfyPage.perf.startMeasuring()
+    await comfyPage.canvasOps.panSweep()
+
+    const measurement = await comfyPage.perf.stopMeasuring('viewport-pan-sweep')
+    recordMeasurement(measurement)
+    logMeasurement('Viewport pan sweep', measurement, [
+      'styleRecalcs',
+      'layouts',
+      'taskDurationMs',
+      'heapDeltaBytes',
+      'domNodes'
+    ])
+  })
+
   test('subgraph DOM widget clipping during node selection', async ({
     comfyPage
   }) => {
@@ -311,8 +328,7 @@ test.describe('Performance', { tag: ['@perf'] }, () => {
       // Verify we actually entered the culling regime.
       // isNodeTooSmall triggers when max(width, height) * scale < 4px.
       // Typical nodes are ~200px wide, so scale must be < 0.02.
-      const scale = await comfyPage.canvasOps.getScale()
-      expect(scale).toBeLessThan(0.02)
+      await expect.poll(() => comfyPage.canvasOps.getScale()).toBeLessThan(0.02)
 
       // Idle at extreme zoom-out — most nodes should be culled
       for (let i = 0; i < 60; i++) {
@@ -342,9 +358,11 @@ test.describe('Performance', { tag: ['@perf'] }, () => {
 
     // Wait for the output widget to populate (execution_success)
     const outputNode = await comfyPage.nodeOps.getNodeRefById(1)
-    await expect(async () => {
-      expect(await (await outputNode.getWidget(0)).getValue()).toBe('foo')
-    }).toPass({ timeout: 10000 })
+    await expect
+      .poll(async () => (await outputNode.getWidget(0)).getValue(), {
+        timeout: 10000
+      })
+      .toBe('foo')
 
     const m = await comfyPage.perf.stopMeasuring('workflow-execution')
     recordMeasurement(m)
diff --git a/browser_tests/tests/primitiveNode.spec.ts b/browser_tests/tests/primitiveNode.spec.ts
index 6d1ffd0e6e..a1eb77042f 100644
--- a/browser_tests/tests/primitiveNode.spec.ts
+++ b/browser_tests/tests/primitiveNode.spec.ts
@@ -1,8 +1,8 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
-import type { NodeReference } from '../fixtures/utils/litegraphUtils'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+import type { NodeReference } from '@e2e/fixtures/utils/litegraphUtils'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
diff --git a/browser_tests/tests/propertiesPanel/AGENTS.md b/browser_tests/tests/propertiesPanel/AGENTS.md
new file mode 100644
index 0000000000..ab632c1504
--- /dev/null
+++ b/browser_tests/tests/propertiesPanel/AGENTS.md
@@ -0,0 +1,34 @@
+# Properties Panel E2E Tests
+
+Tests for the right-side properties panel (`RightSidePanel.vue`).
+
+## Structure
+
+| File                              | Coverage                                                    |
+| --------------------------------- | ----------------------------------------------------------- |
+| `openClose.spec.ts`               | Panel open/close via actionbar and close button             |
+| `workflowOverview.spec.ts`        | No-selection state: tabs, nodes list, global settings       |
+| `nodeSelection.spec.ts`           | Single/multi-node selection, selection changes, tab labels  |
+| `titleEditing.spec.ts`            | Node title editing via pencil icon                          |
+| `searchFiltering.spec.ts`         | Widget search and clear                                     |
+| `nodeSettings.spec.ts`            | Settings tab: node state, color, pinned (requires VueNodes) |
+| `infoTab.spec.ts`                 | Node help content                                           |
+| `errorsTab.spec.ts`               | Errors tab visibility                                       |
+| `propertiesPanelPosition.spec.ts` | Panel position relative to sidebar                          |
+
+## Shared Helper
+
+`PropertiesPanelHelper.ts` — Encapsulates panel locators and actions. Instantiated in `beforeEach`:
+
+```typescript
+let panel: PropertiesPanelHelper
+test.beforeEach(async ({ comfyPage }) => {
+  panel = new PropertiesPanelHelper(comfyPage.page)
+})
+```
+
+## Conventions
+
+- Tests requiring VueNodes rendering enable it in `beforeEach` via `comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)` and call `comfyPage.vueNodes.waitForNodes()`.
+- Verify node state changes via user-facing indicators (text labels like "Bypassed"/"Muted", pin indicator test IDs) rather than internal properties.
+- Color changes are verified via `page.evaluate` accessing node properties, per the guidance in `docs/guidance/playwright.md`.
diff --git a/browser_tests/tests/propertiesPanel/ErrorsTabHelper.ts b/browser_tests/tests/propertiesPanel/ErrorsTabHelper.ts
new file mode 100644
index 0000000000..0e76d2d7e2
--- /dev/null
+++ b/browser_tests/tests/propertiesPanel/ErrorsTabHelper.ts
@@ -0,0 +1,45 @@
+import { expect } from '@playwright/test'
+
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+import { PropertiesPanelHelper } from '@e2e/tests/propertiesPanel/PropertiesPanelHelper'
+
+export async function loadWorkflowAndOpenErrorsTab(
+  comfyPage: ComfyPage,
+  workflow: string
+) {
+  await comfyPage.workflow.loadWorkflow(workflow)
+
+  const errorOverlay = comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
+  await expect(errorOverlay).toBeVisible()
+
+  await errorOverlay.getByTestId(TestIds.dialogs.errorOverlaySeeErrors).click()
+  await expect(errorOverlay).toBeHidden()
+}
+
+export async function openErrorsTab(comfyPage: ComfyPage) {
+  const panel = new PropertiesPanelHelper(comfyPage.page)
+  await panel.open(comfyPage.actionbar.propertiesButton)
+
+  const errorsTab = comfyPage.page.getByTestId(
+    TestIds.propertiesPanel.errorsTab
+  )
+  await expect(errorsTab).toBeVisible()
+  await errorsTab.click()
+}
+
+/**
+ * Remove the fake model file from the backend so it is detected as missing.
+ * Fixture URLs (e.g. http://localhost:8188/...) are not actually downloaded
+ * during tests — they only serve as metadata for the missing model UI.
+ */
+export async function cleanupFakeModel(comfyPage: ComfyPage) {
+  await expect
+    .poll(() =>
+      comfyPage.page.evaluate(async (url: string) => {
+        const response = await fetch(`${url}/api/devtools/cleanup_fake_model`)
+        return response.ok
+      }, comfyPage.url)
+    )
+    .toBeTruthy()
+}
diff --git a/browser_tests/tests/propertiesPanel/PropertiesPanelHelper.ts b/browser_tests/tests/propertiesPanel/PropertiesPanelHelper.ts
new file mode 100644
index 0000000000..d7b425af8d
--- /dev/null
+++ b/browser_tests/tests/propertiesPanel/PropertiesPanelHelper.ts
@@ -0,0 +1,100 @@
+import type { Locator, Page } from '@playwright/test'
+import { expect } from '@playwright/test'
+
+import { TestIds } from '@e2e/fixtures/selectors'
+
+export class PropertiesPanelHelper {
+  readonly root: Locator
+  readonly panelTitle: Locator
+  readonly searchBox: Locator
+  readonly closeButton: Locator
+
+  constructor(readonly page: Page) {
+    this.root = page.getByTestId(TestIds.propertiesPanel.root)
+    this.panelTitle = this.root.locator('h3')
+    this.searchBox = this.root.getByPlaceholder(/^Search/)
+    this.closeButton = this.root.locator('button[aria-pressed]')
+  }
+
+  get tabs(): Locator {
+    return this.root.locator('nav button')
+  }
+
+  getTab(label: string): Locator {
+    return this.root.locator('nav button', { hasText: label })
+  }
+
+  get titleEditIcon(): Locator {
+    return this.panelTitle.locator('i[class*="lucide--pencil"]')
+  }
+
+  get titleInput(): Locator {
+    return this.root.getByTestId(TestIds.node.titleInput)
+  }
+
+  getNodeStateButton(state: 'Normal' | 'Bypass' | 'Mute'): Locator {
+    return this.root.locator('button', { hasText: state })
+  }
+
+  getColorSwatch(colorName: string): Locator {
+    return this.root.locator(`[data-testid="${colorName}"]`)
+  }
+
+  get pinnedSwitch(): Locator {
+    return this.root.locator('[data-p-checked]').first()
+  }
+
+  get subgraphEditButton(): Locator {
+    return this.root.locator('button:has(i[class*="lucide--settings-2"])')
+  }
+
+  get contentArea(): Locator {
+    return this.root.locator('.scrollbar-thin')
+  }
+
+  get errorsTabIcon(): Locator {
+    return this.root.locator('nav i[class*="lucide--octagon-alert"]')
+  }
+
+  get viewAllSettingsButton(): Locator {
+    return this.root.getByRole('button', { name: /view all settings/i })
+  }
+
+  get collapseToggleButton(): Locator {
+    return this.root.locator(
+      'button:has(i[class*="lucide--chevrons-down-up"]), button:has(i[class*="lucide--chevrons-up-down"])'
+    )
+  }
+
+  async open(actionbar: Locator): Promise<void> {
+    if (!(await this.root.isVisible())) {
+      await actionbar.click()
+      await expect(this.root).toBeVisible()
+    }
+  }
+
+  async close(): Promise<void> {
+    if (await this.root.isVisible()) {
+      await this.closeButton.click()
+      await expect(this.root).toBeHidden()
+    }
+  }
+
+  async switchToTab(label: string): Promise<void> {
+    await this.getTab(label).click()
+  }
+
+  async editTitle(newTitle: string): Promise<void> {
+    await this.titleEditIcon.click()
+    await this.titleInput.fill(newTitle)
+    await this.titleInput.press('Enter')
+  }
+
+  async searchWidgets(query: string): Promise<void> {
+    await this.searchBox.fill(query)
+  }
+
+  async clearSearch(): Promise<void> {
+    await this.searchBox.fill('')
+  }
+}
diff --git a/browser_tests/tests/propertiesPanel/errorsTab.spec.ts b/browser_tests/tests/propertiesPanel/errorsTab.spec.ts
new file mode 100644
index 0000000000..8eda69b3ad
--- /dev/null
+++ b/browser_tests/tests/propertiesPanel/errorsTab.spec.ts
@@ -0,0 +1,70 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+import { PropertiesPanelHelper } from '@e2e/tests/propertiesPanel/PropertiesPanelHelper'
+
+test.describe('Errors tab - common', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting(
+      'Comfy.RightSidePanel.ShowErrorsTab',
+      true
+    )
+  })
+
+  test.describe('Tab visibility', () => {
+    test('Should show Errors tab when errors exist', async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
+      await comfyPage.actionbar.propertiesButton.click()
+
+      const panel = new PropertiesPanelHelper(comfyPage.page)
+      await expect(panel.errorsTabIcon).toBeVisible()
+    })
+
+    test('Should not show Errors tab when setting is disabled', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
+      await comfyPage.settings.setSetting(
+        'Comfy.RightSidePanel.ShowErrorsTab',
+        false
+      )
+      await comfyPage.actionbar.propertiesButton.click()
+
+      const panel = new PropertiesPanelHelper(comfyPage.page)
+      await expect(panel.errorsTabIcon).toBeHidden()
+    })
+  })
+
+  test.describe('Search and filter', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setup()
+    })
+
+    test('Should filter execution errors by search query', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('nodes/execution_error')
+      await comfyPage.command.executeCommand('Comfy.QueuePrompt')
+
+      const errorOverlay = comfyPage.page.getByTestId(
+        TestIds.dialogs.errorOverlay
+      )
+      await expect(errorOverlay).toBeVisible()
+      await errorOverlay
+        .getByTestId(TestIds.dialogs.errorOverlaySeeErrors)
+        .click()
+      await expect(errorOverlay).toBeHidden()
+
+      const runtimePanel = comfyPage.page.getByTestId(
+        TestIds.dialogs.runtimeErrorPanel
+      )
+      await expect(runtimePanel).toBeVisible()
+
+      const searchInput = comfyPage.page.getByPlaceholder(/^Search/)
+      await searchInput.fill('nonexistent_query_xyz_12345')
+
+      await expect(runtimePanel).toHaveCount(0)
+    })
+  })
+})
diff --git a/browser_tests/tests/propertiesPanel/errorsTabExecution.spec.ts b/browser_tests/tests/propertiesPanel/errorsTabExecution.spec.ts
new file mode 100644
index 0000000000..cee32842db
--- /dev/null
+++ b/browser_tests/tests/propertiesPanel/errorsTabExecution.spec.ts
@@ -0,0 +1,55 @@
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+
+test.describe('Errors tab - Execution errors', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting(
+      'Comfy.RightSidePanel.ShowErrorsTab',
+      true
+    )
+    await comfyPage.setup()
+  })
+
+  async function openExecutionErrorTab(comfyPage: ComfyPage) {
+    await comfyPage.workflow.loadWorkflow('nodes/execution_error')
+    await comfyPage.command.executeCommand('Comfy.QueuePrompt')
+
+    const errorOverlay = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorOverlay
+    )
+    await expect(errorOverlay).toBeVisible()
+    await errorOverlay
+      .getByTestId(TestIds.dialogs.errorOverlaySeeErrors)
+      .click()
+    await expect(errorOverlay).toBeHidden()
+  }
+
+  test('Should show Find on GitHub and Copy buttons in error card', async ({
+    comfyPage
+  }) => {
+    await openExecutionErrorTab(comfyPage)
+
+    await expect(
+      comfyPage.page.getByTestId(TestIds.dialogs.errorCardFindOnGithub)
+    ).toBeVisible()
+    await expect(
+      comfyPage.page.getByTestId(TestIds.dialogs.errorCardCopy)
+    ).toBeVisible()
+  })
+
+  test('Should show error message in runtime error panel', async ({
+    comfyPage
+  }) => {
+    await openExecutionErrorTab(comfyPage)
+
+    const runtimePanel = comfyPage.page.getByTestId(
+      TestIds.dialogs.runtimeErrorPanel
+    )
+    await expect(runtimePanel).toBeVisible()
+    await expect(runtimePanel).toContainText(/\S/)
+  })
+})
diff --git a/browser_tests/tests/propertiesPanel/errorsTabMissingMedia.spec.ts b/browser_tests/tests/propertiesPanel/errorsTabMissingMedia.spec.ts
new file mode 100644
index 0000000000..b6f6325298
--- /dev/null
+++ b/browser_tests/tests/propertiesPanel/errorsTabMissingMedia.spec.ts
@@ -0,0 +1,205 @@
+import { expect } from '@playwright/test'
+
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+import { loadWorkflowAndOpenErrorsTab } from '@e2e/tests/propertiesPanel/ErrorsTabHelper'
+
+async function uploadFileViaDropzone(comfyPage: ComfyPage) {
+  const dropzone = comfyPage.page.getByTestId(
+    TestIds.dialogs.missingMediaUploadDropzone
+  )
+  const [fileChooser] = await Promise.all([
+    comfyPage.page.waitForEvent('filechooser'),
+    dropzone.click()
+  ])
+  await fileChooser.setFiles(comfyPage.assetPath('test_upload_image.png'))
+}
+
+async function confirmPendingSelection(comfyPage: ComfyPage) {
+  const confirmButton = comfyPage.page.getByTestId(
+    TestIds.dialogs.missingMediaConfirmButton
+  )
+  await expect(confirmButton).toBeEnabled()
+  await confirmButton.click()
+}
+
+function getMediaRow(comfyPage: ComfyPage) {
+  return comfyPage.page.getByTestId(TestIds.dialogs.missingMediaRow)
+}
+
+function getStatusCard(comfyPage: ComfyPage) {
+  return comfyPage.page.getByTestId(TestIds.dialogs.missingMediaStatusCard)
+}
+
+function getDropzone(comfyPage: ComfyPage) {
+  return comfyPage.page.getByTestId(TestIds.dialogs.missingMediaUploadDropzone)
+}
+
+test.describe('Errors tab - Missing media', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting(
+      'Comfy.RightSidePanel.ShowErrorsTab',
+      true
+    )
+  })
+
+  test.describe('Detection', () => {
+    test('Shows missing media group in errors tab', async ({ comfyPage }) => {
+      await loadWorkflowAndOpenErrorsTab(
+        comfyPage,
+        'missing/missing_media_single'
+      )
+
+      await expect(
+        comfyPage.page.getByTestId(TestIds.dialogs.missingMediaGroup)
+      ).toBeVisible()
+    })
+
+    test('Shows correct number of missing media rows', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(
+        comfyPage,
+        'missing/missing_media_multiple'
+      )
+
+      await expect(getMediaRow(comfyPage)).toHaveCount(2)
+    })
+
+    test('Shows upload dropzone and library select for each missing item', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(
+        comfyPage,
+        'missing/missing_media_single'
+      )
+
+      await expect(getDropzone(comfyPage)).toBeVisible()
+      await expect(
+        comfyPage.page.getByTestId(TestIds.dialogs.missingMediaLibrarySelect)
+      ).toBeVisible()
+    })
+  })
+
+  test.describe('Upload flow', () => {
+    test('Upload via file picker shows status card then allows confirm', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(
+        comfyPage,
+        'missing/missing_media_single'
+      )
+      await uploadFileViaDropzone(comfyPage)
+
+      await expect(getStatusCard(comfyPage)).toBeVisible()
+
+      await confirmPendingSelection(comfyPage)
+      await expect(getMediaRow(comfyPage)).toHaveCount(0)
+    })
+  })
+
+  test.describe('Library select flow', () => {
+    test('Selecting from library shows status card then allows confirm', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(
+        comfyPage,
+        'missing/missing_media_single'
+      )
+
+      const librarySelect = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingMediaLibrarySelect
+      )
+      await librarySelect.getByRole('combobox').click()
+
+      const optionCount = await comfyPage.page.getByRole('option').count()
+      if (optionCount === 0) {
+        // oxlint-disable-next-line playwright/no-skipped-test -- no library options available in CI
+        test.skip()
+        return
+      }
+
+      await comfyPage.page.getByRole('option').first().click()
+
+      await expect(getStatusCard(comfyPage)).toBeVisible()
+
+      await confirmPendingSelection(comfyPage)
+      await expect(getMediaRow(comfyPage)).toHaveCount(0)
+    })
+  })
+
+  test.describe('Cancel selection', () => {
+    test('Cancelling pending selection returns to upload/library UI', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(
+        comfyPage,
+        'missing/missing_media_single'
+      )
+      await uploadFileViaDropzone(comfyPage)
+
+      await expect(getStatusCard(comfyPage)).toBeVisible()
+      await expect(getDropzone(comfyPage)).toBeHidden()
+
+      await comfyPage.page
+        .getByTestId(TestIds.dialogs.missingMediaCancelButton)
+        .click()
+
+      await expect(getStatusCard(comfyPage)).toBeHidden()
+      await expect(getDropzone(comfyPage)).toBeVisible()
+    })
+  })
+
+  test.describe('All resolved', () => {
+    test('Missing Inputs group disappears when all items are resolved', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(
+        comfyPage,
+        'missing/missing_media_single'
+      )
+      await uploadFileViaDropzone(comfyPage)
+      await confirmPendingSelection(comfyPage)
+
+      await expect(
+        comfyPage.page.getByTestId(TestIds.dialogs.missingMediaGroup)
+      ).toBeHidden()
+    })
+  })
+
+  test.describe('Locate node', () => {
+    test('Locate button navigates canvas to the missing media node', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(
+        comfyPage,
+        'missing/missing_media_single'
+      )
+
+      const offsetBefore = await comfyPage.page.evaluate(() => {
+        const canvas = window['app']?.canvas
+        return canvas?.ds?.offset
+          ? [canvas.ds.offset[0], canvas.ds.offset[1]]
+          : null
+      })
+
+      const locateButton = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingMediaLocateButton
+      )
+      await expect(locateButton).toBeVisible()
+      await locateButton.click()
+
+      await expect
+        .poll(async () => {
+          return await comfyPage.page.evaluate(() => {
+            const canvas = window['app']?.canvas
+            return canvas?.ds?.offset
+              ? [canvas.ds.offset[0], canvas.ds.offset[1]]
+              : null
+          })
+        })
+        .not.toEqual(offsetBefore)
+    })
+  })
+})
diff --git a/browser_tests/tests/propertiesPanel/errorsTabMissingModels.spec.ts b/browser_tests/tests/propertiesPanel/errorsTabMissingModels.spec.ts
new file mode 100644
index 0000000000..eb2803efc6
--- /dev/null
+++ b/browser_tests/tests/propertiesPanel/errorsTabMissingModels.spec.ts
@@ -0,0 +1,103 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+import {
+  interceptClipboardWrite,
+  getClipboardText
+} from '@e2e/helpers/clipboardSpy'
+import {
+  cleanupFakeModel,
+  loadWorkflowAndOpenErrorsTab
+} from '@e2e/tests/propertiesPanel/ErrorsTabHelper'
+
+test.describe('Errors tab - Missing models', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting(
+      'Comfy.RightSidePanel.ShowErrorsTab',
+      true
+    )
+    await cleanupFakeModel(comfyPage)
+  })
+
+  test('Should show missing models group in errors tab', async ({
+    comfyPage
+  }) => {
+    await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
+
+    await expect(
+      comfyPage.page.getByTestId(TestIds.dialogs.missingModelsGroup)
+    ).toBeVisible()
+  })
+
+  test('Should display model name with referencing node count', async ({
+    comfyPage
+  }) => {
+    await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
+
+    const modelsGroup = comfyPage.page.getByTestId(
+      TestIds.dialogs.missingModelsGroup
+    )
+    await expect(modelsGroup).toContainText(/fake_model\.safetensors\s*\(\d+\)/)
+  })
+
+  test('Should expand model row to show referencing nodes', async ({
+    comfyPage
+  }) => {
+    await loadWorkflowAndOpenErrorsTab(
+      comfyPage,
+      'missing/missing_models_with_nodes'
+    )
+
+    const locateButton = comfyPage.page.getByTestId(
+      TestIds.dialogs.missingModelLocate
+    )
+    await expect(locateButton.first()).toBeHidden()
+
+    const expandButton = comfyPage.page.getByTestId(
+      TestIds.dialogs.missingModelExpand
+    )
+    await expect(expandButton.first()).toBeVisible()
+    await expandButton.first().click()
+
+    await expect(locateButton.first()).toBeVisible()
+  })
+
+  test('Should copy model name to clipboard', async ({ comfyPage }) => {
+    await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
+    await interceptClipboardWrite(comfyPage.page)
+
+    const copyButton = comfyPage.page.getByTestId(
+      TestIds.dialogs.missingModelCopyName
+    )
+    await expect(copyButton.first()).toBeVisible()
+    await copyButton.first().dispatchEvent('click')
+
+    const copiedText = await getClipboardText(comfyPage.page)
+    expect(copiedText).toContain('fake_model.safetensors')
+  })
+
+  test.describe('OSS-specific', { tag: '@oss' }, () => {
+    test('Should show Copy URL button for non-asset models', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
+
+      const copyUrlButton = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingModelCopyUrl
+      )
+      await expect(copyUrlButton.first()).toBeVisible()
+    })
+
+    test('Should show Download button for downloadable models', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
+
+      const downloadButton = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingModelDownload
+      )
+      await expect(downloadButton.first()).toBeVisible()
+    })
+  })
+})
diff --git a/browser_tests/tests/propertiesPanel/errorsTabMissingNodes.spec.ts b/browser_tests/tests/propertiesPanel/errorsTabMissingNodes.spec.ts
new file mode 100644
index 0000000000..8cd1a993f5
--- /dev/null
+++ b/browser_tests/tests/propertiesPanel/errorsTabMissingNodes.spec.ts
@@ -0,0 +1,104 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+import { loadWorkflowAndOpenErrorsTab } from '@e2e/tests/propertiesPanel/ErrorsTabHelper'
+
+test.describe('Errors tab - Missing nodes', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting(
+      'Comfy.RightSidePanel.ShowErrorsTab',
+      true
+    )
+  })
+
+  test('Should show MissingNodeCard in errors tab', async ({ comfyPage }) => {
+    await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_nodes')
+
+    await expect(
+      comfyPage.page.getByTestId(TestIds.dialogs.missingNodeCard)
+    ).toBeVisible()
+  })
+
+  test('Should show missing node packs group', async ({ comfyPage }) => {
+    await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_nodes')
+
+    await expect(
+      comfyPage.page.getByTestId(TestIds.dialogs.missingNodePacksGroup)
+    ).toBeVisible()
+  })
+
+  test('Should expand pack group to reveal node type names', async ({
+    comfyPage
+  }) => {
+    await loadWorkflowAndOpenErrorsTab(
+      comfyPage,
+      'missing/missing_nodes_in_subgraph'
+    )
+
+    const missingNodeCard = comfyPage.page.getByTestId(
+      TestIds.dialogs.missingNodeCard
+    )
+    await expect(missingNodeCard).toBeVisible()
+
+    await missingNodeCard
+      .getByRole('button', { name: /expand/i })
+      .first()
+      .click()
+    await expect(
+      missingNodeCard.getByText('MISSING_NODE_TYPE_IN_SUBGRAPH')
+    ).toBeVisible()
+  })
+
+  test('Should collapse expanded pack group', async ({ comfyPage }) => {
+    await loadWorkflowAndOpenErrorsTab(
+      comfyPage,
+      'missing/missing_nodes_in_subgraph'
+    )
+
+    const missingNodeCard = comfyPage.page.getByTestId(
+      TestIds.dialogs.missingNodeCard
+    )
+    await missingNodeCard
+      .getByRole('button', { name: /expand/i })
+      .first()
+      .click()
+    await expect(
+      missingNodeCard.getByText('MISSING_NODE_TYPE_IN_SUBGRAPH')
+    ).toBeVisible()
+
+    await missingNodeCard
+      .getByRole('button', { name: /collapse/i })
+      .first()
+      .click()
+    await expect(
+      missingNodeCard.getByText('MISSING_NODE_TYPE_IN_SUBGRAPH')
+    ).toBeHidden()
+  })
+
+  test('Locate node button is visible for expanded pack nodes', async ({
+    comfyPage
+  }) => {
+    await loadWorkflowAndOpenErrorsTab(
+      comfyPage,
+      'missing/missing_nodes_in_subgraph'
+    )
+
+    const missingNodeCard = comfyPage.page.getByTestId(
+      TestIds.dialogs.missingNodeCard
+    )
+    await missingNodeCard
+      .getByRole('button', { name: /expand/i })
+      .first()
+      .click()
+
+    const locateButton = missingNodeCard.getByRole('button', {
+      name: /locate/i
+    })
+    await expect(locateButton.first()).toBeVisible()
+    // TODO: Add navigation assertion once subgraph node ID deduplication
+    // timing is fixed. Currently, collectMissingNodes runs before
+    // configure(), so execution IDs use pre-remapped node IDs that don't
+    // match the runtime graph. See PR #9510 / #8762.
+  })
+})
diff --git a/browser_tests/tests/propertiesPanel/errorsTabModeAware.spec.ts b/browser_tests/tests/propertiesPanel/errorsTabModeAware.spec.ts
new file mode 100644
index 0000000000..7db9ff9c46
--- /dev/null
+++ b/browser_tests/tests/propertiesPanel/errorsTabModeAware.spec.ts
@@ -0,0 +1,599 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+import {
+  cleanupFakeModel,
+  openErrorsTab,
+  loadWorkflowAndOpenErrorsTab
+} from '@e2e/tests/propertiesPanel/ErrorsTabHelper'
+
+test.describe('Errors tab - Mode-aware errors', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.settings.setSetting(
+      'Comfy.RightSidePanel.ShowErrorsTab',
+      true
+    )
+  })
+
+  test.describe('Missing nodes', () => {
+    test('Deleting a missing node removes its error from the errors tab', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_nodes')
+
+      const missingNodeGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingNodePacksGroup
+      )
+      await expect(missingNodeGroup).toBeVisible()
+
+      const node = await comfyPage.nodeOps.getNodeRefById('1')
+      await node.delete()
+
+      await expect(missingNodeGroup).toBeHidden()
+    })
+
+    test('Undo after bypass restores error without showing overlay', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_nodes')
+
+      const missingNodeGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingNodePacksGroup
+      )
+      const errorOverlay = comfyPage.page.getByTestId(
+        TestIds.dialogs.errorOverlay
+      )
+      await expect(missingNodeGroup).toBeVisible()
+
+      const node = await comfyPage.nodeOps.getNodeRefById('1')
+      await node.click('title')
+      await comfyPage.keyboard.bypass()
+      await expect.poll(() => node.isBypassed()).toBeTruthy()
+      await expect(missingNodeGroup).toBeHidden()
+
+      await comfyPage.keyboard.undo()
+      await expect.poll(() => node.isBypassed()).toBeFalsy()
+      await expect(errorOverlay).toBeHidden()
+      await openErrorsTab(comfyPage)
+      await expect(missingNodeGroup).toBeVisible()
+
+      await comfyPage.keyboard.redo()
+      await expect.poll(() => node.isBypassed()).toBeTruthy()
+      await expect(missingNodeGroup).toBeHidden()
+    })
+  })
+
+  test.describe('Missing models', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await cleanupFakeModel(comfyPage)
+    })
+
+    test.afterEach(async ({ comfyPage }) => {
+      await cleanupFakeModel(comfyPage)
+    })
+
+    test('Loading a workflow with all nodes bypassed shows no errors', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('missing/missing_models_bypassed')
+
+      const errorOverlay = comfyPage.page.getByTestId(
+        TestIds.dialogs.errorOverlay
+      )
+      await expect(errorOverlay).toBeHidden()
+
+      await comfyPage.actionbar.propertiesButton.click()
+      await expect(
+        comfyPage.page.getByTestId(TestIds.propertiesPanel.errorsTab)
+      ).toBeHidden()
+    })
+
+    test('Bypassing a node hides its error, un-bypassing restores it', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
+
+      const missingModelGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingModelsGroup
+      )
+      await expect(missingModelGroup).toBeVisible()
+
+      const node = await comfyPage.nodeOps.getNodeRefById('1')
+      await node.click('title')
+      await comfyPage.keyboard.bypass()
+      await expect.poll(() => node.isBypassed()).toBeTruthy()
+      await expect(missingModelGroup).toBeHidden()
+
+      await node.click('title')
+      await comfyPage.keyboard.bypass()
+      await expect.poll(() => node.isBypassed()).toBeFalsy()
+      await openErrorsTab(comfyPage)
+      await expect(missingModelGroup).toBeVisible()
+    })
+
+    test('Bypass/un-bypass cycle preserves Copy URL button on the restored row', async ({
+      comfyPage
+    }) => {
+      // Regression: on un-bypass, the realtime scan produced a fresh
+      // candidate without url/hash/directory — those fields were only
+      // attached by the full pipeline's enrichWithEmbeddedMetadata. The
+      // row's Copy URL button (v-if gated on representative.url) then
+      // disappeared. Per-node scan now enriches from node.properties.models
+      // which persists across mode toggles. Uses the `_from_node_properties`
+      // fixture because the enrichment source is per-node metadata, not
+      // the workflow-level `models[]` array (which the realtime scan
+      // path does not see).
+      await loadWorkflowAndOpenErrorsTab(
+        comfyPage,
+        'missing/missing_models_from_node_properties'
+      )
+
+      const copyUrlButton = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingModelCopyUrl
+      )
+      await expect(copyUrlButton.first()).toBeVisible()
+
+      const node = await comfyPage.nodeOps.getNodeRefById('1')
+      await node.click('title')
+      await comfyPage.keyboard.bypass()
+      await expect.poll(() => node.isBypassed()).toBeTruthy()
+
+      await node.click('title')
+      await comfyPage.keyboard.bypass()
+      await expect.poll(() => node.isBypassed()).toBeFalsy()
+      await openErrorsTab(comfyPage)
+      await expect(copyUrlButton.first()).toBeVisible()
+    })
+
+    test('Pasting a node with missing model increases referencing node count', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
+
+      const missingModelGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingModelsGroup
+      )
+      await expect(missingModelGroup).toBeVisible()
+      await expect(missingModelGroup).toContainText(
+        /fake_model\.safetensors\s*\(1\)/
+      )
+
+      const node = await comfyPage.nodeOps.getNodeRefById('1')
+      await node.click('title')
+      await comfyPage.clipboard.copy()
+      await comfyPage.clipboard.paste()
+
+      await expect.poll(() => comfyPage.nodeOps.getNodeCount()).toBe(2)
+
+      await comfyPage.canvas.click()
+      await expect(missingModelGroup).toContainText(
+        /fake_model\.safetensors\s*\(2\)/
+      )
+    })
+
+    test('Pasting a bypassed node does not add a new error', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
+
+      const missingModelGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingModelsGroup
+      )
+
+      const node = await comfyPage.nodeOps.getNodeRefById('1')
+      await node.click('title')
+      await comfyPage.keyboard.bypass()
+      await expect.poll(() => node.isBypassed()).toBeTruthy()
+      await expect(missingModelGroup).toBeHidden()
+
+      await comfyPage.clipboard.copy()
+      await comfyPage.clipboard.paste()
+
+      await expect.poll(() => comfyPage.nodeOps.getNodeCount()).toBe(2)
+      await expect(missingModelGroup).toBeHidden()
+    })
+
+    test('Deleting a node with missing model removes its error', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
+
+      const missingModelGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingModelsGroup
+      )
+      await expect(missingModelGroup).toBeVisible()
+
+      const node = await comfyPage.nodeOps.getNodeRefById('1')
+      await node.delete()
+
+      await expect(missingModelGroup).toBeHidden()
+    })
+
+    test('Undo after bypass restores error without showing overlay', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
+
+      const missingModelGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingModelsGroup
+      )
+      const errorOverlay = comfyPage.page.getByTestId(
+        TestIds.dialogs.errorOverlay
+      )
+      await expect(missingModelGroup).toBeVisible()
+
+      const node = await comfyPage.nodeOps.getNodeRefById('1')
+      await node.click('title')
+      await comfyPage.keyboard.bypass()
+      await expect.poll(() => node.isBypassed()).toBeTruthy()
+      await expect(missingModelGroup).toBeHidden()
+
+      await comfyPage.keyboard.undo()
+      await expect.poll(() => node.isBypassed()).toBeFalsy()
+      await expect(errorOverlay).toBeHidden()
+      await openErrorsTab(comfyPage)
+      await expect(missingModelGroup).toBeVisible()
+
+      await comfyPage.keyboard.redo()
+      await expect.poll(() => node.isBypassed()).toBeTruthy()
+      await expect(missingModelGroup).toBeHidden()
+    })
+
+    test('Selecting a node filters errors tab to only that node', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(
+        comfyPage,
+        'missing/missing_models_with_nodes'
+      )
+
+      const missingModelGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingModelsGroup
+      )
+      await expect(missingModelGroup).toContainText(/\(2\)/)
+
+      const node1 = await comfyPage.nodeOps.getNodeRefById('1')
+      await node1.click('title')
+      await expect(missingModelGroup).toContainText(/\(1\)/)
+
+      await comfyPage.canvas.click()
+      await expect(missingModelGroup).toContainText(/\(2\)/)
+    })
+  })
+
+  test.describe('Missing media', () => {
+    test('Loading a workflow with all nodes bypassed shows no errors', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('missing/missing_media_bypassed')
+
+      const errorOverlay = comfyPage.page.getByTestId(
+        TestIds.dialogs.errorOverlay
+      )
+      await expect(errorOverlay).toBeHidden()
+
+      await comfyPage.actionbar.propertiesButton.click()
+      await expect(
+        comfyPage.page.getByTestId(TestIds.propertiesPanel.errorsTab)
+      ).toBeHidden()
+    })
+
+    test('Bypassing a node hides its error, un-bypassing restores it', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(
+        comfyPage,
+        'missing/missing_media_single'
+      )
+
+      const missingMediaGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingMediaGroup
+      )
+      await expect(missingMediaGroup).toBeVisible()
+
+      const node = await comfyPage.nodeOps.getNodeRefById('10')
+      await node.click('title')
+      await comfyPage.keyboard.bypass()
+      await expect.poll(() => node.isBypassed()).toBeTruthy()
+      await expect(missingMediaGroup).toBeHidden()
+
+      await node.click('title')
+      await comfyPage.keyboard.bypass()
+      await expect.poll(() => node.isBypassed()).toBeFalsy()
+      await openErrorsTab(comfyPage)
+      await expect(missingMediaGroup).toBeVisible()
+    })
+
+    test('Pasting a bypassed node does not add a new error', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(
+        comfyPage,
+        'missing/missing_media_single'
+      )
+
+      const missingMediaGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingMediaGroup
+      )
+
+      const node = await comfyPage.nodeOps.getNodeRefById('10')
+      await node.click('title')
+      await comfyPage.keyboard.bypass()
+      await expect.poll(() => node.isBypassed()).toBeTruthy()
+      await expect(missingMediaGroup).toBeHidden()
+
+      await comfyPage.clipboard.copy()
+      await comfyPage.clipboard.paste()
+
+      await expect.poll(() => comfyPage.nodeOps.getNodeCount()).toBe(2)
+      await expect(missingMediaGroup).toBeHidden()
+    })
+
+    test('Selecting a node filters errors tab to only that node', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('missing/missing_media_multiple')
+
+      const errorOverlay = comfyPage.page.getByTestId(
+        TestIds.dialogs.errorOverlay
+      )
+      await expect(errorOverlay).toBeVisible()
+      await errorOverlay
+        .getByTestId(TestIds.dialogs.errorOverlayDismiss)
+        .click()
+
+      const mediaRows = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingMediaRow
+      )
+
+      await openErrorsTab(comfyPage)
+      await expect(mediaRows).toHaveCount(2)
+
+      const node = await comfyPage.nodeOps.getNodeRefById('10')
+      await node.click('title')
+      await expect(mediaRows).toHaveCount(1)
+
+      await comfyPage.canvas.click({ position: { x: 400, y: 600 } })
+      await expect(mediaRows).toHaveCount(2)
+    })
+  })
+
+  test.describe('Subgraph', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await cleanupFakeModel(comfyPage)
+    })
+
+    test.afterEach(async ({ comfyPage }) => {
+      await cleanupFakeModel(comfyPage)
+    })
+
+    test('Bypassing a subgraph hides interior errors, un-bypassing restores them', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'missing/missing_models_in_subgraph'
+      )
+
+      const errorOverlay = comfyPage.page.getByTestId(
+        TestIds.dialogs.errorOverlay
+      )
+      await expect(errorOverlay).toBeVisible()
+      await errorOverlay
+        .getByTestId(TestIds.dialogs.errorOverlayDismiss)
+        .click()
+
+      const missingModelGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingModelsGroup
+      )
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      const errorsTab = comfyPage.page.getByTestId(
+        TestIds.propertiesPanel.errorsTab
+      )
+
+      await comfyPage.keyboard.selectAll()
+      await comfyPage.keyboard.bypass()
+      await expect.poll(() => subgraphNode.isBypassed()).toBeTruthy()
+
+      await comfyPage.actionbar.propertiesButton.click()
+      await expect(errorsTab).toBeHidden()
+
+      await comfyPage.keyboard.selectAll()
+      await comfyPage.keyboard.bypass()
+      await expect.poll(() => subgraphNode.isBypassed()).toBeFalsy()
+      await openErrorsTab(comfyPage)
+      await expect(missingModelGroup).toBeVisible()
+    })
+
+    test('Deleting a node inside a subgraph removes its missing model error', async ({
+      comfyPage
+    }) => {
+      // Regression: before the execId fix, onNodeRemoved fell back to the
+      // interior node's local id (e.g. "1") when node.graph was already
+      // null, so the error keyed under "2:1" was never removed.
+      await comfyPage.workflow.loadWorkflow(
+        'missing/missing_models_in_subgraph'
+      )
+
+      const errorOverlay = comfyPage.page.getByTestId(
+        TestIds.dialogs.errorOverlay
+      )
+      await expect(errorOverlay).toBeVisible()
+      await errorOverlay
+        .getByTestId(TestIds.dialogs.errorOverlayDismiss)
+        .click()
+
+      const missingModelGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingModelsGroup
+      )
+      await openErrorsTab(comfyPage)
+      await expect(missingModelGroup).toBeVisible()
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      // Select-all + Delete: interior node IDs may be reassigned during
+      // subgraph configure when they collide with root-graph IDs, so
+      // looking up by static id can fail.
+      await comfyPage.keyboard.selectAll()
+      await comfyPage.page.keyboard.press('Delete')
+
+      await expect(missingModelGroup).toBeHidden()
+    })
+
+    test('Deleting a node inside a subgraph removes its missing node-type error', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('missing/missing_nodes_in_subgraph')
+
+      const errorOverlay = comfyPage.page.getByTestId(
+        TestIds.dialogs.errorOverlay
+      )
+      await expect(errorOverlay).toBeVisible()
+      await errorOverlay
+        .getByTestId(TestIds.dialogs.errorOverlayDismiss)
+        .click()
+
+      const missingNodeGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingNodePacksGroup
+      )
+      await openErrorsTab(comfyPage)
+      await expect(missingNodeGroup).toBeVisible()
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      // Select-all + Delete: interior node IDs may be reassigned during
+      // subgraph configure when they collide with root-graph IDs, so
+      // looking up by static id can fail.
+      await comfyPage.keyboard.selectAll()
+      await comfyPage.page.keyboard.press('Delete')
+
+      await expect(missingNodeGroup).toBeHidden()
+    })
+
+    test('Bypassing a node inside a subgraph hides its error, un-bypassing restores it', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'missing/missing_models_in_subgraph'
+      )
+
+      const errorOverlay = comfyPage.page.getByTestId(
+        TestIds.dialogs.errorOverlay
+      )
+      await expect(errorOverlay).toBeVisible()
+      await errorOverlay
+        .getByTestId(TestIds.dialogs.errorOverlayDismiss)
+        .click()
+
+      const missingModelGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingModelsGroup
+      )
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      await comfyPage.keyboard.selectAll()
+      await comfyPage.keyboard.bypass()
+
+      const errorsTab = comfyPage.page.getByTestId(
+        TestIds.propertiesPanel.errorsTab
+      )
+      await comfyPage.actionbar.propertiesButton.click()
+      await expect(errorsTab).toBeHidden()
+
+      await comfyPage.keyboard.selectAll()
+      await comfyPage.keyboard.bypass()
+      await openErrorsTab(comfyPage)
+      await expect(missingModelGroup).toBeVisible()
+    })
+
+    test('Loading a workflow with bypassed subgraph suppresses interior missing model error', async ({
+      comfyPage
+    }) => {
+      // Regression: the initial scan pipeline only checked each node's
+      // own mode, so interior nodes of a bypassed subgraph container
+      // surfaced errors even though the container was excluded from
+      // execution. The pipeline now post-filters candidates whose
+      // ancestor path is not fully active.
+      await comfyPage.workflow.loadWorkflow(
+        'missing/missing_models_in_bypassed_subgraph'
+      )
+
+      const errorOverlay = comfyPage.page.getByTestId(
+        TestIds.dialogs.errorOverlay
+      )
+      await expect(errorOverlay).toBeHidden()
+
+      await comfyPage.actionbar.propertiesButton.click()
+      await expect(
+        comfyPage.page.getByTestId(TestIds.propertiesPanel.errorsTab)
+      ).toBeHidden()
+    })
+
+    test('Entering a bypassed subgraph does not resurface interior missing model error', async ({
+      comfyPage
+    }) => {
+      // Regression: useGraphNodeManager replays graph.onNodeAdded for
+      // each interior node on subgraph entry; without an ancestor-aware
+      // guard in scanSingleNodeErrors, that re-scan reintroduced the
+      // error that the initial pipeline had correctly suppressed.
+      await comfyPage.workflow.loadWorkflow(
+        'missing/missing_models_in_bypassed_subgraph'
+      )
+
+      const errorsTab = comfyPage.page.getByTestId(
+        TestIds.propertiesPanel.errorsTab
+      )
+      await comfyPage.actionbar.propertiesButton.click()
+      await expect(errorsTab).toBeHidden()
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      await expect(errorsTab).toBeHidden()
+    })
+  })
+
+  test.describe('Workflow switching', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Workflow.WorkflowTabsPosition',
+        'Sidebar'
+      )
+      await comfyPage.menu.workflowsTab.open()
+    })
+
+    test('Restores missing nodes in errors tab when switching back to workflow', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
+
+      const errorOverlay = comfyPage.page.getByTestId(
+        TestIds.dialogs.errorOverlay
+      )
+      await expect(errorOverlay).toBeVisible()
+      await errorOverlay
+        .getByTestId(TestIds.dialogs.errorOverlayDismiss)
+        .click()
+
+      const missingNodeGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingNodePacksGroup
+      )
+
+      await openErrorsTab(comfyPage)
+      await expect(missingNodeGroup).toBeVisible()
+
+      await comfyPage.menu.workflowsTab.open()
+      await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
+      await expect(missingNodeGroup).toBeHidden()
+
+      await comfyPage.menu.workflowsTab.switchToWorkflow('missing_nodes')
+      await openErrorsTab(comfyPage)
+      await expect(missingNodeGroup).toBeVisible()
+    })
+  })
+})
diff --git a/browser_tests/tests/propertiesPanel/infoTab.spec.ts b/browser_tests/tests/propertiesPanel/infoTab.spec.ts
new file mode 100644
index 0000000000..957b91d5c3
--- /dev/null
+++ b/browser_tests/tests/propertiesPanel/infoTab.spec.ts
@@ -0,0 +1,22 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { PropertiesPanelHelper } from '@e2e/tests/propertiesPanel/PropertiesPanelHelper'
+
+test.describe('Properties panel - Info tab', () => {
+  let panel: PropertiesPanelHelper
+
+  test.beforeEach(async ({ comfyPage }) => {
+    panel = new PropertiesPanelHelper(comfyPage.page)
+    await comfyPage.actionbar.propertiesButton.click()
+    await comfyPage.nodeOps.selectNodes(['KSampler'])
+    await panel.switchToTab('Info')
+  })
+
+  test('should show node help content', async () => {
+    await expect(panel.contentArea).toBeVisible()
+    await expect(
+      panel.contentArea.getByRole('heading', { name: 'Inputs' })
+    ).toBeVisible()
+  })
+})
diff --git a/browser_tests/tests/propertiesPanel/nodeSelection.spec.ts b/browser_tests/tests/propertiesPanel/nodeSelection.spec.ts
new file mode 100644
index 0000000000..041445939d
--- /dev/null
+++ b/browser_tests/tests/propertiesPanel/nodeSelection.spec.ts
@@ -0,0 +1,126 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { PropertiesPanelHelper } from '@e2e/tests/propertiesPanel/PropertiesPanelHelper'
+
+test.describe('Properties panel - Node selection', () => {
+  let panel: PropertiesPanelHelper
+
+  test.beforeEach(async ({ comfyPage }) => {
+    panel = new PropertiesPanelHelper(comfyPage.page)
+    await comfyPage.actionbar.propertiesButton.click()
+  })
+
+  test.describe('Single node', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.nodeOps.selectNodes(['KSampler'])
+    })
+
+    test('should show node title in panel header', async () => {
+      await expect(panel.panelTitle).toContainText('KSampler')
+    })
+
+    test('should show Parameters, Info, and Settings tabs', async () => {
+      await expect(panel.getTab('Parameters')).toBeVisible()
+      await expect(panel.getTab('Info')).toBeVisible()
+      await expect(panel.getTab('Settings')).toBeVisible()
+    })
+
+    test('should not show Nodes tab for single node', async () => {
+      await expect(panel.getTab('Nodes')).toBeHidden()
+    })
+
+    test('should display node widgets in Parameters tab', async () => {
+      await expect(panel.contentArea.getByText('seed')).toBeVisible()
+      await expect(panel.contentArea.getByText('steps')).toBeVisible()
+    })
+  })
+
+  test.describe('Multi-node', () => {
+    test('should show item count in title', async ({ comfyPage }) => {
+      await comfyPage.nodeOps.selectNodes([
+        'KSampler',
+        'CLIP Text Encode (Prompt)'
+      ])
+      await expect(panel.panelTitle).toContainText('3 items selected')
+    })
+
+    test('should list all selected nodes in Parameters tab', async ({
+      comfyPage
+    }) => {
+      await comfyPage.nodeOps.selectNodes([
+        'KSampler',
+        'CLIP Text Encode (Prompt)'
+      ])
+      await expect(panel.root.getByText('KSampler')).toHaveCount(1)
+      await expect(
+        panel.root.getByText('CLIP Text Encode (Prompt)')
+      ).toHaveCount(2)
+    })
+
+    test('should not show Info tab for multi-selection', async ({
+      comfyPage
+    }) => {
+      await comfyPage.nodeOps.selectNodes([
+        'KSampler',
+        'CLIP Text Encode (Prompt)'
+      ])
+      await expect(panel.getTab('Info')).toBeHidden()
+    })
+  })
+
+  test.describe('Selection changes', () => {
+    test('should update from no selection to node selection', async ({
+      comfyPage
+    }) => {
+      await expect(panel.panelTitle).toContainText('Workflow Overview')
+      await comfyPage.nodeOps.selectNodes(['KSampler'])
+      await expect(panel.panelTitle).toContainText('KSampler')
+    })
+
+    test('should update from node selection back to no selection', async ({
+      comfyPage
+    }) => {
+      await comfyPage.nodeOps.selectNodes(['KSampler'])
+      await expect(panel.panelTitle).toContainText('KSampler')
+      await comfyPage.page.evaluate(() => {
+        window.app!.canvas.deselectAll()
+      })
+      await comfyPage.nextFrame()
+      await expect(panel.panelTitle).toContainText('Workflow Overview')
+    })
+
+    test('should update between different single node selections', async ({
+      comfyPage
+    }) => {
+      await comfyPage.nodeOps.selectNodes(['KSampler'])
+      await expect(panel.panelTitle).toContainText('KSampler')
+
+      await comfyPage.page.evaluate(() => {
+        window.app!.canvas.deselectAll()
+      })
+      await comfyPage.nextFrame()
+      await comfyPage.nodeOps.selectNodes(['Empty Latent Image'])
+      await expect(panel.panelTitle).toContainText('Empty Latent Image')
+    })
+  })
+
+  test.describe('Tab labels', () => {
+    test('should show "Parameters" tab for single node', async ({
+      comfyPage
+    }) => {
+      await comfyPage.nodeOps.selectNodes(['KSampler'])
+      await expect(panel.getTab('Parameters')).toBeVisible()
+    })
+
+    test('should show "Nodes" tab label for multi-selection', async ({
+      comfyPage
+    }) => {
+      await comfyPage.nodeOps.selectNodes([
+        'KSampler',
+        'CLIP Text Encode (Prompt)'
+      ])
+      await expect(panel.getTab('Nodes')).toBeVisible()
+    })
+  })
+})
diff --git a/browser_tests/tests/propertiesPanel/nodeSettings.spec.ts b/browser_tests/tests/propertiesPanel/nodeSettings.spec.ts
new file mode 100644
index 0000000000..08be8e1d9d
--- /dev/null
+++ b/browser_tests/tests/propertiesPanel/nodeSettings.spec.ts
@@ -0,0 +1,118 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { PropertiesPanelHelper } from '@e2e/tests/propertiesPanel/PropertiesPanelHelper'
+
+test.describe('Properties panel - Node settings', { tag: '@vue-nodes' }, () => {
+  let panel: PropertiesPanelHelper
+
+  test.beforeEach(async ({ comfyPage }) => {
+    panel = new PropertiesPanelHelper(comfyPage.page)
+    await comfyPage.actionbar.propertiesButton.click()
+    await comfyPage.nodeOps.selectNodes(['KSampler'])
+    await panel.switchToTab('Settings')
+  })
+
+  test.describe('Node state', () => {
+    test('should show Normal, Bypass, and Mute state buttons', async () => {
+      await expect(panel.getNodeStateButton('Normal')).toBeVisible()
+      await expect(panel.getNodeStateButton('Bypass')).toBeVisible()
+      await expect(panel.getNodeStateButton('Mute')).toBeVisible()
+    })
+
+    test('should set node to Bypass mode', async ({ comfyPage }) => {
+      await panel.getNodeStateButton('Bypass').click()
+
+      const nodeLocator = comfyPage.vueNodes.getNodeByTitle('KSampler')
+      await expect(nodeLocator.getByText('Bypassed')).toBeVisible()
+    })
+
+    test('should set node to Mute mode', async ({ comfyPage }) => {
+      await panel.getNodeStateButton('Mute').click()
+
+      const nodeLocator = comfyPage.vueNodes.getNodeByTitle('KSampler')
+      await expect(nodeLocator.getByText('Muted')).toBeVisible()
+    })
+
+    test('should restore node to Normal mode', async ({ comfyPage }) => {
+      await panel.getNodeStateButton('Bypass').click()
+      const nodeLocator = comfyPage.vueNodes.getNodeByTitle('KSampler')
+      await expect(nodeLocator.getByText('Bypassed')).toBeVisible()
+
+      await panel.getNodeStateButton('Normal').click()
+      await expect(nodeLocator.getByText('Bypassed')).toBeHidden()
+      await expect(nodeLocator.getByText('Muted')).toBeHidden()
+    })
+  })
+
+  test.describe('Node color', () => {
+    test('should display color swatches', async () => {
+      await expect(panel.getColorSwatch('noColor')).toBeVisible()
+      await expect(panel.getColorSwatch('red')).toBeVisible()
+      await expect(panel.getColorSwatch('blue')).toBeVisible()
+    })
+
+    test('should apply color to node', async ({ comfyPage }) => {
+      await panel.getColorSwatch('red').click()
+
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(() => {
+            const selected = window.app!.canvas.selected_nodes
+            const node = Object.values(selected)[0]
+            return node?.color != null
+          })
+        )
+        .toBe(true)
+    })
+
+    test('should remove color with noColor swatch', async ({ comfyPage }) => {
+      await panel.getColorSwatch('red').click()
+
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(() => {
+            const selected = window.app!.canvas.selected_nodes
+            const node = Object.values(selected)[0]
+            return node?.color != null
+          })
+        )
+        .toBe(true)
+
+      await panel.getColorSwatch('noColor').click()
+
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(() => {
+            const selected = window.app!.canvas.selected_nodes
+            const node = Object.values(selected)[0]
+            return node?.color
+          })
+        )
+        .toBeFalsy()
+    })
+  })
+
+  test.describe('Pinned state', () => {
+    test('should display pinned toggle', async () => {
+      await expect(panel.pinnedSwitch).toBeVisible()
+    })
+
+    test('should toggle pinned state', async ({ comfyPage }) => {
+      await panel.pinnedSwitch.click()
+
+      const nodeLocator = comfyPage.vueNodes.getNodeByTitle('KSampler')
+      await expect(nodeLocator.getByTestId('node-pin-indicator')).toBeVisible()
+    })
+
+    test('should unpin previously pinned node', async ({ comfyPage }) => {
+      const nodeLocator = comfyPage.vueNodes.getNodeByTitle('KSampler')
+
+      await panel.pinnedSwitch.click()
+      await expect(nodeLocator.getByTestId('node-pin-indicator')).toBeVisible()
+
+      await panel.pinnedSwitch.click()
+      await expect(nodeLocator.getByTestId('node-pin-indicator')).toBeHidden()
+    })
+  })
+})
diff --git a/browser_tests/tests/propertiesPanel/openClose.spec.ts b/browser_tests/tests/propertiesPanel/openClose.spec.ts
new file mode 100644
index 0000000000..c190c5d20c
--- /dev/null
+++ b/browser_tests/tests/propertiesPanel/openClose.spec.ts
@@ -0,0 +1,32 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { PropertiesPanelHelper } from '@e2e/tests/propertiesPanel/PropertiesPanelHelper'
+
+test.describe('Properties panel - Open and close', () => {
+  let panel: PropertiesPanelHelper
+
+  test.beforeEach(async ({ comfyPage }) => {
+    panel = new PropertiesPanelHelper(comfyPage.page)
+  })
+
+  test('should open via actionbar toggle button', async ({ comfyPage }) => {
+    await expect(panel.root).toBeHidden()
+    await comfyPage.actionbar.propertiesButton.click()
+    await expect(panel.root).toBeVisible()
+  })
+
+  test('should close via panel close button', async ({ comfyPage }) => {
+    await comfyPage.actionbar.propertiesButton.click()
+    await expect(panel.root).toBeVisible()
+    await panel.closeButton.click()
+    await expect(panel.root).toBeHidden()
+  })
+
+  test('should close via close button after opening', async ({ comfyPage }) => {
+    await comfyPage.actionbar.propertiesButton.click()
+    await expect(panel.root).toBeVisible()
+    await panel.close()
+    await expect(panel.root).toBeHidden()
+  })
+})
diff --git a/browser_tests/tests/propertiesPanel/propertiesPanel.spec.ts b/browser_tests/tests/propertiesPanel/propertiesPanel.spec.ts
deleted file mode 100644
index 32ff8722db..0000000000
--- a/browser_tests/tests/propertiesPanel/propertiesPanel.spec.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
-
-test.describe('Properties panel', () => {
-  test('opens and updates title based on selection', async ({ comfyPage }) => {
-    await comfyPage.actionbar.propertiesButton.click()
-
-    const { propertiesPanel } = comfyPage.menu
-
-    await expect(propertiesPanel.panelTitle).toContainText('Workflow Overview')
-
-    await comfyPage.nodeOps.selectNodes([
-      'KSampler',
-      'CLIP Text Encode (Prompt)'
-    ])
-
-    await expect(propertiesPanel.panelTitle).toContainText('3 items selected')
-    await expect(propertiesPanel.root.getByText('KSampler')).toHaveCount(1)
-    await expect(
-      propertiesPanel.root.getByText('CLIP Text Encode (Prompt)')
-    ).toHaveCount(2)
-
-    await propertiesPanel.searchBox.fill('seed')
-    await expect(propertiesPanel.root.getByText('KSampler')).toHaveCount(1)
-    await expect(
-      propertiesPanel.root.getByText('CLIP Text Encode (Prompt)')
-    ).toHaveCount(0)
-
-    await propertiesPanel.searchBox.fill('')
-    await expect(propertiesPanel.root.getByText('KSampler')).toHaveCount(1)
-    await expect(
-      propertiesPanel.root.getByText('CLIP Text Encode (Prompt)')
-    ).toHaveCount(2)
-  })
-})
diff --git a/browser_tests/tests/propertiesPanel/propertiesPanelPosition.spec.ts b/browser_tests/tests/propertiesPanel/propertiesPanelPosition.spec.ts
index fd235ea0d3..8db6208c13 100644
--- a/browser_tests/tests/propertiesPanel/propertiesPanelPosition.spec.ts
+++ b/browser_tests/tests/propertiesPanel/propertiesPanelPosition.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
-import { TestIds } from '../../fixtures/selectors'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
 
 test.describe('Properties panel position', () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -15,7 +15,6 @@ test.describe('Properties panel position', () => {
     comfyPage
   }) => {
     await comfyPage.settings.setSetting('Comfy.Sidebar.Location', 'left')
-    await comfyPage.nextFrame()
 
     const propertiesPanel = comfyPage.page.getByTestId(
       TestIds.propertiesPanel.root
@@ -25,23 +24,24 @@ test.describe('Properties panel position', () => {
     await expect(propertiesPanel).toBeVisible()
     await expect(sidebar).toBeVisible()
 
-    const propsBoundingBox = await propertiesPanel.boundingBox()
-    const sidebarBoundingBox = await sidebar.boundingBox()
+    await expect
+      .poll(async () => {
+        const propsBoundingBox = await propertiesPanel.boundingBox()
+        const sidebarBoundingBox = await sidebar.boundingBox()
 
-    expect(propsBoundingBox).not.toBeNull()
-    expect(sidebarBoundingBox).not.toBeNull()
+        if (!propsBoundingBox || !sidebarBoundingBox) return false
 
-    // Properties panel should be to the right of the sidebar
-    expect(propsBoundingBox!.x).toBeGreaterThan(
-      sidebarBoundingBox!.x + sidebarBoundingBox!.width
-    )
+        return (
+          propsBoundingBox.x > sidebarBoundingBox.x + sidebarBoundingBox.width
+        )
+      })
+      .toBe(true)
   })
 
   test('positions on the left when sidebar is on the right', async ({
     comfyPage
   }) => {
     await comfyPage.settings.setSetting('Comfy.Sidebar.Location', 'right')
-    await comfyPage.nextFrame()
 
     const propertiesPanel = comfyPage.page.getByTestId(
       TestIds.propertiesPanel.root
@@ -51,16 +51,18 @@ test.describe('Properties panel position', () => {
     await expect(propertiesPanel).toBeVisible()
     await expect(sidebar).toBeVisible()
 
-    const propsBoundingBox = await propertiesPanel.boundingBox()
-    const sidebarBoundingBox = await sidebar.boundingBox()
+    await expect
+      .poll(async () => {
+        const propsBoundingBox = await propertiesPanel.boundingBox()
+        const sidebarBoundingBox = await sidebar.boundingBox()
 
-    expect(propsBoundingBox).not.toBeNull()
-    expect(sidebarBoundingBox).not.toBeNull()
+        if (!propsBoundingBox || !sidebarBoundingBox) return false
 
-    // Properties panel should be to the left of the sidebar
-    expect(propsBoundingBox!.x + propsBoundingBox!.width).toBeLessThan(
-      sidebarBoundingBox!.x
-    )
+        return (
+          propsBoundingBox.x + propsBoundingBox.width < sidebarBoundingBox.x
+        )
+      })
+      .toBe(true)
   })
 
   test('close button icon updates based on sidebar location', async ({
@@ -72,7 +74,6 @@ test.describe('Properties panel position', () => {
 
     // When sidebar is on the left, panel is on the right
     await comfyPage.settings.setSetting('Comfy.Sidebar.Location', 'left')
-    await comfyPage.nextFrame()
 
     await expect(propertiesPanel).toBeVisible()
     const closeButtonLeft = propertiesPanel
@@ -83,7 +84,6 @@ test.describe('Properties panel position', () => {
 
     // When sidebar is on the right, panel is on the left
     await comfyPage.settings.setSetting('Comfy.Sidebar.Location', 'right')
-    await comfyPage.nextFrame()
 
     const closeButtonRight = propertiesPanel
       .locator('button[aria-pressed]')
diff --git a/browser_tests/tests/propertiesPanel/searchFiltering.spec.ts b/browser_tests/tests/propertiesPanel/searchFiltering.spec.ts
new file mode 100644
index 0000000000..34820d27e7
--- /dev/null
+++ b/browser_tests/tests/propertiesPanel/searchFiltering.spec.ts
@@ -0,0 +1,41 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { PropertiesPanelHelper } from '@e2e/tests/propertiesPanel/PropertiesPanelHelper'
+
+test.describe('Properties panel - Search filtering', () => {
+  let panel: PropertiesPanelHelper
+
+  test.beforeEach(async ({ comfyPage }) => {
+    panel = new PropertiesPanelHelper(comfyPage.page)
+    await comfyPage.actionbar.propertiesButton.click()
+    await comfyPage.nodeOps.selectNodes([
+      'KSampler',
+      'CLIP Text Encode (Prompt)'
+    ])
+  })
+
+  test('should filter nodes by search query', async () => {
+    await panel.searchWidgets('seed')
+    await expect(panel.root.getByText('KSampler')).toHaveCount(1)
+    await expect(panel.root.getByText('CLIP Text Encode (Prompt)')).toHaveCount(
+      0
+    )
+  })
+
+  test('should restore all nodes when search is cleared', async () => {
+    await panel.searchWidgets('seed')
+    await panel.clearSearch()
+    await expect(panel.root.getByText('KSampler')).toHaveCount(1)
+    await expect(panel.root.getByText('CLIP Text Encode (Prompt)')).toHaveCount(
+      2
+    )
+  })
+
+  test('should show empty state for no matches', async () => {
+    await panel.searchWidgets('nonexistent_widget_xyz')
+    await expect(
+      panel.contentArea.getByText(/no .* match|no results|no items/i)
+    ).toBeVisible()
+  })
+})
diff --git a/browser_tests/tests/propertiesPanel/titleEditing.spec.ts b/browser_tests/tests/propertiesPanel/titleEditing.spec.ts
new file mode 100644
index 0000000000..6656ca4893
--- /dev/null
+++ b/browser_tests/tests/propertiesPanel/titleEditing.spec.ts
@@ -0,0 +1,49 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { PropertiesPanelHelper } from '@e2e/tests/propertiesPanel/PropertiesPanelHelper'
+
+test.describe('Properties panel - Title editing', () => {
+  let panel: PropertiesPanelHelper
+
+  test.beforeEach(async ({ comfyPage }) => {
+    panel = new PropertiesPanelHelper(comfyPage.page)
+    await comfyPage.actionbar.propertiesButton.click()
+    await comfyPage.nodeOps.selectNodes(['KSampler'])
+  })
+
+  test('should show pencil icon for editable title', async () => {
+    await expect(panel.titleEditIcon).toBeVisible()
+  })
+
+  test('should enter edit mode on pencil click', async () => {
+    await panel.titleEditIcon.click()
+    await expect(panel.titleInput).toBeVisible()
+  })
+
+  test('should update node title on edit', async () => {
+    const newTitle = 'My Custom Sampler'
+    await panel.editTitle(newTitle)
+    await expect(panel.panelTitle).toContainText(newTitle)
+  })
+
+  test('should not show pencil icon for multi-selection', async ({
+    comfyPage
+  }) => {
+    await comfyPage.nodeOps.selectNodes([
+      'KSampler',
+      'CLIP Text Encode (Prompt)'
+    ])
+    await expect(panel.titleEditIcon).toBeHidden()
+  })
+
+  test('should not show pencil icon when nothing is selected', async ({
+    comfyPage
+  }) => {
+    await comfyPage.page.evaluate(() => {
+      window.app!.canvas.deselectAll()
+    })
+    await expect(panel.panelTitle).toContainText('Workflow Overview')
+    await expect(panel.titleEditIcon).toBeHidden()
+  })
+})
diff --git a/browser_tests/tests/propertiesPanel/workflowOverview.spec.ts b/browser_tests/tests/propertiesPanel/workflowOverview.spec.ts
new file mode 100644
index 0000000000..d2d715e405
--- /dev/null
+++ b/browser_tests/tests/propertiesPanel/workflowOverview.spec.ts
@@ -0,0 +1,69 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { PropertiesPanelHelper } from '@e2e/tests/propertiesPanel/PropertiesPanelHelper'
+
+test.describe('Properties panel - Workflow Overview', () => {
+  let panel: PropertiesPanelHelper
+
+  test.beforeEach(async ({ comfyPage }) => {
+    panel = new PropertiesPanelHelper(comfyPage.page)
+    await comfyPage.actionbar.propertiesButton.click()
+    await expect(panel.root).toBeVisible()
+  })
+
+  test('should show "Workflow Overview" title when nothing is selected', async () => {
+    await expect(panel.panelTitle).toContainText('Workflow Overview')
+  })
+
+  test('should show Parameters, Nodes, and Settings tabs', async () => {
+    await expect(panel.getTab('Parameters')).toBeVisible()
+    await expect(panel.getTab('Nodes')).toBeVisible()
+    await expect(panel.getTab('Settings')).toBeVisible()
+  })
+
+  test('should not show Info tab when nothing is selected', async () => {
+    await expect(panel.getTab('Info')).toBeHidden()
+  })
+
+  test('should switch to Nodes tab and list all workflow nodes', async ({
+    comfyPage
+  }) => {
+    await panel.switchToTab('Nodes')
+    await expect.poll(() => comfyPage.nodeOps.getNodeCount()).toBeGreaterThan(0)
+    await expect(panel.contentArea.locator('text=KSampler')).toBeVisible()
+  })
+
+  test('should filter nodes by search in Nodes tab', async () => {
+    await panel.switchToTab('Nodes')
+    await panel.searchWidgets('KSampler')
+    await expect(panel.contentArea.getByText('KSampler').first()).toBeVisible()
+  })
+
+  test('should switch to Settings tab and show global settings', async () => {
+    await panel.switchToTab('Settings')
+    await expect(panel.viewAllSettingsButton).toBeVisible()
+  })
+
+  test('should show "View all settings" button', async () => {
+    await panel.switchToTab('Settings')
+    await expect(panel.viewAllSettingsButton).toBeVisible()
+  })
+
+  test('should show Nodes section with toggles', async () => {
+    await panel.switchToTab('Settings')
+    await expect(
+      panel.contentArea.getByRole('button', { name: 'NODES' })
+    ).toBeVisible()
+  })
+
+  test('should show Canvas section with grid settings', async () => {
+    await panel.switchToTab('Settings')
+    await expect(panel.contentArea.getByText('Canvas')).toBeVisible()
+  })
+
+  test('should show Connection Links section', async () => {
+    await panel.switchToTab('Settings')
+    await expect(panel.contentArea.getByText('Connection Links')).toBeVisible()
+  })
+})
diff --git a/browser_tests/tests/queue/queueOverlay.spec.ts b/browser_tests/tests/queue/queueOverlay.spec.ts
new file mode 100644
index 0000000000..a10d102c3e
--- /dev/null
+++ b/browser_tests/tests/queue/queueOverlay.spec.ts
@@ -0,0 +1,109 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { createMockJob } from '@e2e/fixtures/helpers/AssetsHelper'
+import { TestIds } from '@e2e/fixtures/selectors'
+import type { RawJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
+
+const now = Date.now()
+
+const MOCK_JOBS: RawJobListItem[] = [
+  createMockJob({
+    id: 'job-completed-1',
+    status: 'completed',
+    create_time: now - 60_000,
+    execution_start_time: now - 60_000,
+    execution_end_time: now - 50_000,
+    outputs_count: 2
+  }),
+  createMockJob({
+    id: 'job-completed-2',
+    status: 'completed',
+    create_time: now - 120_000,
+    execution_start_time: now - 120_000,
+    execution_end_time: now - 115_000,
+    outputs_count: 1
+  }),
+  createMockJob({
+    id: 'job-failed-1',
+    status: 'failed',
+    create_time: now - 30_000,
+    execution_start_time: now - 30_000,
+    execution_end_time: now - 28_000,
+    outputs_count: 0
+  })
+]
+
+test.describe('Queue overlay', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.assets.mockOutputHistory(MOCK_JOBS)
+    await comfyPage.settings.setSetting('Comfy.Queue.QPOV2', false)
+    await comfyPage.setup()
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
+  test('Toggle button opens expanded queue overlay', async ({ comfyPage }) => {
+    const toggle = comfyPage.page.getByTestId(TestIds.queue.overlayToggle)
+    await toggle.click()
+
+    // Expanded overlay should show job items
+    await expect(comfyPage.page.locator('[data-job-id]').first()).toBeVisible()
+  })
+
+  test('Overlay shows filter tabs (All, Completed)', async ({ comfyPage }) => {
+    const toggle = comfyPage.page.getByTestId(TestIds.queue.overlayToggle)
+    await toggle.click()
+
+    await expect(
+      comfyPage.page.getByRole('button', { name: 'All', exact: true })
+    ).toBeVisible()
+    await expect(
+      comfyPage.page.getByRole('button', { name: 'Completed', exact: true })
+    ).toBeVisible()
+  })
+
+  test('Overlay shows Failed tab when failed jobs exist', async ({
+    comfyPage
+  }) => {
+    const toggle = comfyPage.page.getByTestId(TestIds.queue.overlayToggle)
+    await toggle.click()
+
+    await expect(comfyPage.page.locator('[data-job-id]').first()).toBeVisible()
+
+    await expect(
+      comfyPage.page.getByRole('button', { name: 'Failed', exact: true })
+    ).toBeVisible()
+  })
+
+  test('Completed filter shows only completed jobs', async ({ comfyPage }) => {
+    const toggle = comfyPage.page.getByTestId(TestIds.queue.overlayToggle)
+    await toggle.click()
+
+    await expect(comfyPage.page.locator('[data-job-id]').first()).toBeVisible()
+
+    await comfyPage.page
+      .getByRole('button', { name: 'Completed', exact: true })
+      .click()
+
+    await expect(
+      comfyPage.page.locator('[data-job-id="job-completed-1"]')
+    ).toBeVisible()
+    await expect(
+      comfyPage.page.locator('[data-job-id="job-failed-1"]')
+    ).toBeHidden()
+  })
+
+  test('Toggling overlay again closes it', async ({ comfyPage }) => {
+    const toggle = comfyPage.page.getByTestId(TestIds.queue.overlayToggle)
+    await toggle.click()
+
+    await expect(comfyPage.page.locator('[data-job-id]').first()).toBeVisible()
+
+    await toggle.click()
+
+    await expect(comfyPage.page.locator('[data-job-id]').first()).toBeHidden()
+  })
+})
diff --git a/browser_tests/tests/recordAudio.spec.ts b/browser_tests/tests/recordAudio.spec.ts
index c46a5168e6..c6cdc8d097 100644
--- a/browser_tests/tests/recordAudio.spec.ts
+++ b/browser_tests/tests/recordAudio.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -16,13 +16,18 @@ test.describe('Record Audio Node', { tag: '@screenshot' }, () => {
     await expect(comfyPage.searchBox.input).toHaveCount(1)
 
     // Search for and add the RecordAudio node
-    await comfyPage.searchBox.fillAndSelectFirstNode('RecordAudio')
+    await comfyPage.searchBox.fillAndSelectFirstNode('Record Audio', {
+      exact: true
+    })
     await comfyPage.nextFrame()
 
     // Verify the RecordAudio node was added
-    const recordAudioNodes =
-      await comfyPage.nodeOps.getNodeRefsByType('RecordAudio')
-    expect(recordAudioNodes.length).toBe(1)
+    await expect
+      .poll(
+        async () =>
+          (await comfyPage.nodeOps.getNodeRefsByType('RecordAudio')).length
+      )
+      .toBe(1)
 
     // Take a screenshot of the canvas with the RecordAudio node
     await expect(comfyPage.canvas).toHaveScreenshot('record_audio_node.png')
diff --git a/browser_tests/tests/releaseNotifications.spec.ts b/browser_tests/tests/releaseNotifications.spec.ts
index 74ae32c389..446fb3ef9f 100644
--- a/browser_tests/tests/releaseNotifications.spec.ts
+++ b/browser_tests/tests/releaseNotifications.spec.ts
@@ -1,13 +1,24 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
+import type { components } from '@comfyorg/registry-types'
+
+type ReleaseNote = components['schemas']['ReleaseNote']
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+
+function createMockRelease(overrides?: Partial<ReleaseNote>): ReleaseNote {
+  return {
+    id: 1,
+    project: 'comfyui',
+    version: 'v0.3.44',
+    attention: 'medium',
+    content: '## New Features\n\n- Added awesome feature',
+    published_at: new Date().toISOString(),
+    ...overrides
+  }
+}
 
 test.describe('Release Notifications', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-  })
-
   test('should show help center with release information', async ({
     comfyPage
   }) => {
@@ -22,15 +33,10 @@ test.describe('Release Notifications', () => {
           status: 200,
           contentType: 'application/json',
           body: JSON.stringify([
-            {
-              id: 1,
-              project: 'comfyui',
-              version: 'v0.3.44',
-              attention: 'medium',
+            createMockRelease({
               content:
-                '## New Features\n\n- Added awesome feature\n- Fixed important bug',
-              published_at: new Date().toISOString()
-            }
+                '## New Features\n\n- Added awesome feature\n- Fixed important bug'
+            })
           ])
         })
       } else {
@@ -62,8 +68,8 @@ test.describe('Release Notifications', () => {
     ).toBeVisible()
 
     // Close help center by dismissable mask
-    await comfyPage.page.click('.help-center-backdrop')
-    await expect(helpMenu).not.toBeVisible()
+    await comfyPage.page.locator('.help-center-backdrop').click()
+    await expect(helpMenu).toBeHidden()
   })
 
   test('should not show release notifications when mocked (default behavior)', async ({
@@ -93,10 +99,10 @@ test.describe('Release Notifications', () => {
     ).toBeVisible()
 
     // Should not show any popups or toasts
-    await expect(comfyPage.page.locator('.whats-new-popup')).not.toBeVisible()
+    await expect(comfyPage.page.locator('.whats-new-popup')).toBeHidden()
     await expect(
       comfyPage.page.locator('.release-notification-toast')
-    ).not.toBeVisible()
+    ).toBeHidden()
   })
 
   test('should handle release API errors gracefully', async ({ comfyPage }) => {
@@ -157,16 +163,7 @@ test.describe('Release Notifications', () => {
         await route.fulfill({
           status: 200,
           contentType: 'application/json',
-          body: JSON.stringify([
-            {
-              id: 1,
-              project: 'comfyui',
-              version: 'v0.3.44',
-              attention: 'high',
-              content: '## New Features\n\n- Added awesome feature',
-              published_at: new Date().toISOString()
-            }
-          ])
+          body: JSON.stringify([createMockRelease({ attention: 'high' })])
         })
       } else {
         await route.continue()
@@ -188,13 +185,13 @@ test.describe('Release Notifications', () => {
     const whatsNewSection = comfyPage.page.getByTestId(
       TestIds.dialogs.whatsNewSection
     )
-    await expect(whatsNewSection).not.toBeVisible()
+    await expect(whatsNewSection).toBeHidden()
 
     // Should not show any popups or toasts
-    await expect(comfyPage.page.locator('.whats-new-popup')).not.toBeVisible()
+    await expect(comfyPage.page.locator('.whats-new-popup')).toBeHidden()
     await expect(
       comfyPage.page.locator('.release-notification-toast')
-    ).not.toBeVisible()
+    ).toBeHidden()
   })
 
   test('should not make API calls when notifications are disabled', async ({
@@ -250,16 +247,7 @@ test.describe('Release Notifications', () => {
         await route.fulfill({
           status: 200,
           contentType: 'application/json',
-          body: JSON.stringify([
-            {
-              id: 1,
-              project: 'comfyui',
-              version: 'v0.3.44',
-              attention: 'medium',
-              content: '## New Features\n\n- Added awesome feature',
-              published_at: new Date().toISOString()
-            }
-          ])
+          body: JSON.stringify([createMockRelease()])
         })
       } else {
         await route.continue()
@@ -303,14 +291,10 @@ test.describe('Release Notifications', () => {
           status: 200,
           contentType: 'application/json',
           body: JSON.stringify([
-            {
-              id: 1,
-              project: 'comfyui',
-              version: 'v0.3.44',
+            createMockRelease({
               attention: 'low',
-              content: '## Bug Fixes\n\n- Fixed minor issue',
-              published_at: new Date().toISOString()
-            }
+              content: '## Bug Fixes\n\n- Fixed minor issue'
+            })
           ])
         })
       } else {
@@ -337,7 +321,7 @@ test.describe('Release Notifications', () => {
     await expect(whatsNewSection).toBeVisible()
 
     // Close help center
-    await comfyPage.page.click('.help-center-backdrop')
+    await comfyPage.page.locator('.help-center-backdrop').click()
 
     // Disable notifications
     await comfyPage.settings.setSetting(
@@ -349,7 +333,7 @@ test.describe('Release Notifications', () => {
     await helpCenterButton.click()
 
     // Verify "What's New?" section is now hidden
-    await expect(whatsNewSection).not.toBeVisible()
+    await expect(whatsNewSection).toBeHidden()
   })
 
   test('should handle edge case with empty releases and disabled notifications', async ({
@@ -393,6 +377,6 @@ test.describe('Release Notifications', () => {
     const whatsNewSection = comfyPage.page.getByTestId(
       TestIds.dialogs.whatsNewSection
     )
-    await expect(whatsNewSection).not.toBeVisible()
+    await expect(whatsNewSection).toBeHidden()
   })
 })
diff --git a/browser_tests/tests/remoteWidgets.spec.ts b/browser_tests/tests/remoteWidgets.spec.ts
index a84dfd0273..f5eddc115f 100644
--- a/browser_tests/tests/remoteWidgets.spec.ts
+++ b/browser_tests/tests/remoteWidgets.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test'
 
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.describe('Remote COMBO Widget', { tag: '@widget' }, () => {
   const mockOptions = ['d', 'c', 'b', 'a']
@@ -46,13 +46,7 @@ test.describe('Remote COMBO Widget', { tag: '@widget' }, () => {
     }, nodeName)
   }
 
-  const waitForWidgetUpdate = async (comfyPage: ComfyPage) => {
-    // Force re-render to trigger first access of widget's options
-    await comfyPage.page.mouse.click(400, 300)
-  }
-
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
     await comfyPage.settings.setSetting(
       'Comfy.NodeSearchBoxImpl',
@@ -62,7 +56,6 @@ test.describe('Remote COMBO Widget', { tag: '@widget' }, () => {
 
   test.describe('Loading options', () => {
     test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
       await comfyPage.page.route(
         '**/api/models/checkpoints**',
         async (route, request) => {
@@ -85,9 +78,9 @@ test.describe('Remote COMBO Widget', { tag: '@widget' }, () => {
     }) => {
       const nodeName = 'Remote Widget Node'
       await addRemoteWidgetNode(comfyPage, nodeName)
-      await waitForWidgetUpdate(comfyPage)
-      const widgetOptions = await getWidgetOptions(comfyPage, nodeName)
-      expect(widgetOptions).toEqual(mockOptions)
+      await expect
+        .poll(() => getWidgetOptions(comfyPage, nodeName))
+        .toEqual(mockOptions)
     })
 
     test('lazy loads options when widget is added via workflow load', async ({
@@ -96,23 +89,28 @@ test.describe('Remote COMBO Widget', { tag: '@widget' }, () => {
       const nodeName = 'Remote Widget Node'
       await comfyPage.workflow.loadWorkflow('inputs/remote_widget')
 
-      const node = await comfyPage.page.evaluate((name) => {
-        return window.app!.graph!.nodes.find((node) => node.title === name)
-      }, nodeName)
-      expect(node).toBeDefined()
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate((name) => {
+            return (
+              window.app!.graph!.nodes.find((node) => node.title === name) !=
+              null
+            )
+          }, nodeName)
+        )
+        .toBe(true)
 
-      await waitForWidgetUpdate(comfyPage)
-      const widgetOptions = await getWidgetOptions(comfyPage, nodeName)
-      expect(widgetOptions).toEqual(mockOptions)
+      await expect
+        .poll(() => getWidgetOptions(comfyPage, nodeName))
+        .toEqual(mockOptions)
     })
 
     test('applies query parameters from input spec', async ({ comfyPage }) => {
       const nodeName = 'Remote Widget Node With Sort Query Param'
       await addRemoteWidgetNode(comfyPage, nodeName)
-      await waitForWidgetUpdate(comfyPage)
-      const widgetOptions = await getWidgetOptions(comfyPage, nodeName)
-      expect(widgetOptions).not.toEqual(mockOptions)
-      expect(widgetOptions).toEqual([...mockOptions].sort())
+      await expect
+        .poll(() => getWidgetOptions(comfyPage, nodeName))
+        .toEqual([...mockOptions].sort())
     })
 
     test('handles empty list of options', async ({ comfyPage }) => {
@@ -125,9 +123,7 @@ test.describe('Remote COMBO Widget', { tag: '@widget' }, () => {
 
       const nodeName = 'Remote Widget Node'
       await addRemoteWidgetNode(comfyPage, nodeName)
-      await waitForWidgetUpdate(comfyPage)
-      const widgetOptions = await getWidgetOptions(comfyPage, nodeName)
-      expect(widgetOptions).toEqual([])
+      await expect.poll(() => getWidgetOptions(comfyPage, nodeName)).toEqual([])
     })
 
     test('falls back to default value when non-200 response', async ({
@@ -142,11 +138,9 @@ test.describe('Remote COMBO Widget', { tag: '@widget' }, () => {
 
       const nodeName = 'Remote Widget Node'
       await addRemoteWidgetNode(comfyPage, nodeName)
-      await waitForWidgetUpdate(comfyPage)
-      const widgetOptions = await getWidgetOptions(comfyPage, nodeName)
-
-      const defaultValue = 'Loading...'
-      expect(widgetOptions).toEqual(defaultValue)
+      await expect
+        .poll(() => getWidgetOptions(comfyPage, nodeName))
+        .toEqual('Loading...')
     })
   })
 
@@ -185,7 +179,6 @@ test.describe('Remote COMBO Widget', { tag: '@widget' }, () => {
 
       const nodeName = 'Remote Widget Node'
       await addRemoteWidgetNode(comfyPage, nodeName)
-      await waitForWidgetUpdate(comfyPage)
 
       // Select remote widget node
       await comfyPage.page.keyboard.press('Control+A')
@@ -211,18 +204,18 @@ test.describe('Remote COMBO Widget', { tag: '@widget' }, () => {
 
       const nodeName = 'Remote Widget Node With 300ms Refresh'
       await addRemoteWidgetNode(comfyPage, nodeName)
-      await waitForWidgetUpdate(comfyPage)
+      // Wait for initial options to load before capturing baseline
+      await expect
+        .poll(() => getWidgetOptions(comfyPage, nodeName))
+        .toBeTruthy()
       const initialOptions = await getWidgetOptions(comfyPage, nodeName)
 
       // Click on the canvas to trigger widget refresh
       await comfyPage.page.mouse.click(400, 300)
 
-      await expect(async () => {
-        const refreshedOptions = await getWidgetOptions(comfyPage, nodeName)
-        expect(refreshedOptions).not.toEqual(initialOptions)
-      }).toPass({
-        timeout: 2_000
-      })
+      await expect
+        .poll(() => getWidgetOptions(comfyPage, nodeName))
+        .not.toEqual(initialOptions)
     })
 
     test('does not refresh when TTL is not set', async ({ comfyPage }) => {
@@ -237,7 +230,10 @@ test.describe('Remote COMBO Widget', { tag: '@widget' }, () => {
 
       const nodeName = 'Remote Widget Node'
       await addRemoteWidgetNode(comfyPage, nodeName)
-      await waitForWidgetUpdate(comfyPage)
+      // Wait for initial fetch to complete
+      await expect
+        .poll(() => getWidgetOptions(comfyPage, nodeName))
+        .toEqual(['test'])
 
       // Force multiple re-renders
       for (let i = 0; i < 3; i++) {
@@ -245,7 +241,7 @@ test.describe('Remote COMBO Widget', { tag: '@widget' }, () => {
         await comfyPage.nextFrame()
       }
 
-      expect(requestCount).toBe(1) // Should only make initial request
+      await expect.poll(() => requestCount, { timeout: 1000 }).toBe(1) // Should only make initial request
     })
 
     test('retries failed requests with backoff', async ({ comfyPage }) => {
@@ -260,17 +256,20 @@ test.describe('Remote COMBO Widget', { tag: '@widget' }, () => {
 
       const nodeName = 'Remote Widget Node'
       await addRemoteWidgetNode(comfyPage, nodeName)
-      await waitForWidgetUpdate(comfyPage)
 
-      // Wait for exponential backoff retries to accumulate timestamps
+      // Initial canvas click to trigger widget render
+      await comfyPage.page.mouse.click(400, 300)
+
+      // Drive canvas redraws to let the retry scheduler fire
       await expect(async () => {
-        await waitForWidgetUpdate(comfyPage)
+        await comfyPage.page.mouse.click(400, 300)
+        await comfyPage.nextFrame()
         expect(timestamps.length).toBeGreaterThanOrEqual(3)
-      }).toPass({ timeout: 10000, intervals: [500, 1000, 1500] })
+      }).toPass({ timeout: 15000, intervals: [500, 1000, 1500] })
 
-      // Verify exponential backoff between retries
+      // Verify backoff: last interval should exceed first
       const intervals = timestamps.slice(1).map((t, i) => t - timestamps[i])
-      expect(intervals[1]).toBeGreaterThan(intervals[0])
+      expect(intervals[intervals.length - 1]).toBeGreaterThan(intervals[0])
     })
 
     test('clicking refresh button forces a refresh', async ({ comfyPage }) => {
@@ -288,15 +287,19 @@ test.describe('Remote COMBO Widget', { tag: '@widget' }, () => {
 
       // Trigger initial fetch when adding node to the graph
       await addRemoteWidgetNode(comfyPage, nodeName)
-      await waitForWidgetUpdate(comfyPage)
+      // Wait for initial options to load before capturing baseline
+      await expect
+        .poll(() => getWidgetOptions(comfyPage, nodeName))
+        .toBeTruthy()
       const initialOptions = await getWidgetOptions(comfyPage, nodeName)
 
       // Click refresh button
       await clickRefreshButton(comfyPage, nodeName)
 
       // Verify refresh occurred
-      const refreshedOptions = await getWidgetOptions(comfyPage, nodeName)
-      expect(refreshedOptions).not.toEqual(initialOptions)
+      await expect
+        .poll(() => getWidgetOptions(comfyPage, nodeName))
+        .not.toEqual(initialOptions)
     })
 
     test('control_after_refresh is applied after refresh', async ({
@@ -322,18 +325,18 @@ test.describe('Remote COMBO Widget', { tag: '@widget' }, () => {
 
       // Trigger initial fetch when adding node to the graph
       await addRemoteWidgetNode(comfyPage, nodeName)
-      await waitForWidgetUpdate(comfyPage)
+      // Wait for initial options to load
+      await expect
+        .poll(() => getWidgetOptions(comfyPage, nodeName))
+        .toBeTruthy()
 
       // Click refresh button
       await clickRefreshButton(comfyPage, nodeName)
 
       // Verify the selected value of the widget is the first option in the refreshed list
-      await expect(async () => {
-        const refreshedValue = await getWidgetValue(comfyPage, nodeName)
-        expect(refreshedValue).toEqual('new first option')
-      }).toPass({
-        timeout: 2_000
-      })
+      await expect
+        .poll(() => getWidgetValue(comfyPage, nodeName))
+        .toEqual('new first option')
     })
   })
 
@@ -356,9 +359,12 @@ test.describe('Remote COMBO Widget', { tag: '@widget' }, () => {
       // Add two widgets with same config
       const nodeName = 'Remote Widget Node'
       await addRemoteWidgetNode(comfyPage, nodeName, 2)
-      await waitForWidgetUpdate(comfyPage)
+      // Wait for options to be populated before checking request count
+      await expect
+        .poll(() => getWidgetOptions(comfyPage, nodeName))
+        .toEqual(mockOptions)
 
-      expect(requestCount).toBe(1) // Should reuse cached data
+      await expect.poll(() => requestCount, { timeout: 1000 }).toBe(1) // Should reuse cached data
     })
   })
 })
diff --git a/browser_tests/tests/rendererToggleStability.spec.ts b/browser_tests/tests/rendererToggleStability.spec.ts
index 8bdb673d8a..dcda124509 100644
--- a/browser_tests/tests/rendererToggleStability.spec.ts
+++ b/browser_tests/tests/rendererToggleStability.spec.ts
@@ -1,9 +1,9 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../fixtures/ComfyPage'
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import type { Position } from '../fixtures/types'
+} from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import type { Position } from '@e2e/fixtures/types'
 
 type NodeSnapshot = { id: number } & Position
 
diff --git a/browser_tests/tests/rerouteNode.spec.ts b/browser_tests/tests/rerouteNode.spec.ts
index 19c919117c..548d87a173 100644
--- a/browser_tests/tests/rerouteNode.spec.ts
+++ b/browser_tests/tests/rerouteNode.spec.ts
@@ -1,13 +1,9 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { getMiddlePoint } from '../fixtures/utils/litegraphUtils'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { getMiddlePoint } from '@e2e/fixtures/utils/litegraphUtils'
 
 test.describe('Reroute Node', { tag: ['@screenshot', '@node'] }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-  })
-
   test.afterEach(async ({ comfyPage }) => {
     await comfyPage.workflow.setupWorkflowsDirectory({})
   })
@@ -113,21 +109,48 @@ test.describe(
         'reroute/single-native-reroute-default-workflow'
       )
 
-      // To find the clickable midpoint button, we use the hardcoded value from the browser logs
-      // since the link is a bezier curve and not a straight line.
-      const middlePoint = { x: 359.4188232421875, y: 468.7716979980469 }
+      const checkpointNode = await comfyPage.nodeOps.getNodeRefById(4)
+      const positiveClipNode = await comfyPage.nodeOps.getNodeRefById(6)
+      const negativeClipNode = await comfyPage.nodeOps.getNodeRefById(7)
+
+      const checkpointClipOutput = await checkpointNode.getOutput(1)
+      const positiveClipInput = await positiveClipNode.getInput(0)
+      const negativeClipInput = await negativeClipNode.getInput(0)
+
+      // Dynamically read the rendered link marker position from the canvas,
+      // targeting link 5 (CLIP from CheckpointLoaderSimple to negative CLIPTextEncode).
+      const middlePoint = await comfyPage.page.waitForFunction(() => {
+        const canvas = window['app']?.canvas
+        if (!canvas?.renderedPaths) return null
+        for (const segment of canvas.renderedPaths) {
+          if (segment.id === 5 && segment._pos) {
+            return { x: segment._pos[0], y: segment._pos[1] }
+          }
+        }
+        return null
+      })
+      const pos = await middlePoint.jsonValue()
+      if (!pos) throw new Error('Rendered midpoint for link 5 was not found')
 
       // Click the middle point of the link to open the context menu.
-      await comfyPage.page.mouse.click(middlePoint.x, middlePoint.y)
+      await comfyPage.page.mouse.click(pos.x, pos.y)
 
       // Click the "Delete" context menu option.
       await comfyPage.page
         .locator('.litecontextmenu .litemenu-entry', { hasText: 'Delete' })
         .click()
 
-      await expect(comfyPage.canvas).toHaveScreenshot(
-        'native_reroute_delete_from_midpoint_context_menu.png'
-      )
+      await expect
+        .poll(async () => ({
+          checkpointClipOutputLinks: await checkpointClipOutput.getLinkCount(),
+          positiveClipInputLinks: await positiveClipInput.getLinkCount(),
+          negativeClipInputLinks: await negativeClipInput.getLinkCount()
+        }))
+        .toEqual({
+          checkpointClipOutputLinks: 1,
+          positiveClipInputLinks: 1,
+          negativeClipInputLinks: 0
+        })
     })
   }
 )
diff --git a/browser_tests/tests/resultGallery.spec.ts b/browser_tests/tests/resultGallery.spec.ts
index f090f0fa69..2620601ffb 100644
--- a/browser_tests/tests/resultGallery.spec.ts
+++ b/browser_tests/tests/resultGallery.spec.ts
@@ -1,20 +1,13 @@
 import { expect } from '@playwright/test'
 
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-test.describe('MediaLightbox', { tag: ['@slow'] }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.setup()
-  })
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
+test.describe('MediaLightbox', { tag: ['@slow', '@vue-nodes'] }, () => {
   async function runAndOpenGallery(comfyPage: ComfyPage) {
     await comfyPage.workflow.loadWorkflow(
       'widgets/save_image_and_animated_webp'
     )
-    await comfyPage.vueNodes.waitForNodes()
     await comfyPage.runButton.click()
 
     // Wait for SaveImage node to produce output
@@ -31,7 +24,7 @@ test.describe('MediaLightbox', { tag: ['@slow'] }, () => {
 
     // Wait for any asset card to appear (may contain img or video)
     const assetCard = comfyPage.page
-      .locator('[role="button"]')
+      .getByRole('button')
       .filter({ has: comfyPage.page.locator('img, video') })
       .first()
 
@@ -41,30 +34,28 @@ test.describe('MediaLightbox', { tag: ['@slow'] }, () => {
     await assetCard.hover()
     await assetCard.getByLabel('Zoom in').click()
 
-    const gallery = comfyPage.page.getByRole('dialog')
-    await expect(gallery).toBeVisible()
-
-    return { gallery }
+    const { root } = comfyPage.mediaLightbox
+    await expect(root).toBeVisible()
   }
 
   test('opens gallery and shows dialog with close button', async ({
     comfyPage
   }) => {
-    const { gallery } = await runAndOpenGallery(comfyPage)
-    await expect(gallery.getByLabel('Close')).toBeVisible()
+    await runAndOpenGallery(comfyPage)
+    await expect(comfyPage.mediaLightbox.closeButton).toBeVisible()
   })
 
   test('closes gallery on Escape key', async ({ comfyPage }) => {
     await runAndOpenGallery(comfyPage)
 
     await comfyPage.page.keyboard.press('Escape')
-    await expect(comfyPage.page.getByRole('dialog')).not.toBeVisible()
+    await expect(comfyPage.mediaLightbox.root).toBeHidden()
   })
 
   test('closes gallery when clicking close button', async ({ comfyPage }) => {
-    const { gallery } = await runAndOpenGallery(comfyPage)
+    await runAndOpenGallery(comfyPage)
 
-    await gallery.getByLabel('Close').click()
-    await expect(comfyPage.page.getByRole('dialog')).not.toBeVisible()
+    await comfyPage.mediaLightbox.closeButton.click()
+    await expect(comfyPage.mediaLightbox.root).toBeHidden()
   })
 })
diff --git a/browser_tests/tests/rightClickMenu.spec.ts b/browser_tests/tests/rightClickMenu.spec.ts
index 5630810399..49f39860e1 100644
--- a/browser_tests/tests/rightClickMenu.spec.ts
+++ b/browser_tests/tests/rightClickMenu.spec.ts
@@ -1,8 +1,8 @@
 import { expect } from '@playwright/test'
 
-import { NodeBadgeMode } from '../../src/types/nodeSource'
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { DefaultGraphPositions } from '../fixtures/constants/defaultGraphPositions'
+import { NodeBadgeMode } from '@/types/nodeSource'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { DefaultGraphPositions } from '@e2e/fixtures/constants/defaultGraphPositions'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -16,20 +16,22 @@ test.describe(
       await comfyPage.canvasOps.rightClick()
       await expect(comfyPage.canvas).toHaveScreenshot('right-click-menu.png')
       await comfyPage.page.getByText('Add Node').click()
-      await comfyPage.nextFrame()
       await comfyPage.page.getByText('loaders').click()
-      await comfyPage.nextFrame()
       await comfyPage.page.getByText('Load VAE').click()
-      await comfyPage.nextFrame()
-      await expect(comfyPage.canvas).toHaveScreenshot('add-node-node-added.png')
+      await comfyPage.contextMenu.waitForHidden()
+      await comfyPage.expectScreenshot(
+        comfyPage.canvas,
+        'add-node-node-added.png'
+      )
     })
 
     test('Can add group', async ({ comfyPage }) => {
       await comfyPage.canvasOps.rightClick()
       await expect(comfyPage.canvas).toHaveScreenshot('right-click-menu.png')
       await comfyPage.page.getByText('Add Group', { exact: true }).click()
-      await comfyPage.nextFrame()
-      await expect(comfyPage.canvas).toHaveScreenshot(
+      await comfyPage.contextMenu.waitForHidden()
+      await comfyPage.expectScreenshot(
+        comfyPage.canvas,
         'add-group-group-added.png'
       )
     })
@@ -41,12 +43,12 @@ test.describe(
       await comfyPage.contextMenu.clickMenuItem(
         'Convert to Group Node (Deprecated)'
       )
-      await comfyPage.nextFrame()
+      await comfyPage.contextMenu.waitForHidden()
       await comfyPage.nodeOps.promptDialogInput.fill('GroupNode2CLIP')
       await comfyPage.page.keyboard.press('Enter')
       await comfyPage.nodeOps.promptDialogInput.waitFor({ state: 'hidden' })
-      await comfyPage.nextFrame()
-      await expect(comfyPage.canvas).toHaveScreenshot(
+      await comfyPage.expectScreenshot(
+        comfyPage.canvas,
         'right-click-node-group-node.png'
       )
     })
@@ -60,11 +62,11 @@ test.describe('Node Right Click Menu', { tag: ['@screenshot', '@ui'] }, () => {
       button: 'right'
     })
     await comfyPage.page.mouse.move(10, 10)
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot('right-click-node.png')
+    await comfyPage.expectScreenshot(comfyPage.canvas, 'right-click-node.png')
     await comfyPage.page.getByText('Properties Panel').click()
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot(
+    await comfyPage.contextMenu.waitForHidden()
+    await comfyPage.expectScreenshot(
+      comfyPage.canvas,
       'right-click-node-properties-panel.png'
     )
   })
@@ -75,11 +77,11 @@ test.describe('Node Right Click Menu', { tag: ['@screenshot', '@ui'] }, () => {
       button: 'right'
     })
     await comfyPage.page.mouse.move(10, 10)
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot('right-click-node.png')
+    await comfyPage.expectScreenshot(comfyPage.canvas, 'right-click-node.png')
     await comfyPage.page.getByText('Collapse').click()
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot(
+    await comfyPage.contextMenu.waitForHidden()
+    await comfyPage.expectScreenshot(
+      comfyPage.canvas,
       'right-click-node-collapsed.png'
     )
   })
@@ -101,8 +103,9 @@ test.describe('Node Right Click Menu', { tag: ['@screenshot', '@ui'] }, () => {
     await comfyPage.page.mouse.move(10, 10)
     await comfyPage.nextFrame()
     await comfyPage.page.getByText('Collapse').click()
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot(
+    await comfyPage.contextMenu.waitForHidden()
+    await comfyPage.expectScreenshot(
+      comfyPage.canvas,
       'right-click-node-collapsed-badge.png'
     )
   })
@@ -113,11 +116,11 @@ test.describe('Node Right Click Menu', { tag: ['@screenshot', '@ui'] }, () => {
       button: 'right'
     })
     await comfyPage.page.mouse.move(10, 10)
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot('right-click-node.png')
+    await comfyPage.expectScreenshot(comfyPage.canvas, 'right-click-node.png')
     await comfyPage.page.getByText('Bypass').click()
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot(
+    await comfyPage.contextMenu.waitForHidden()
+    await comfyPage.expectScreenshot(
+      comfyPage.canvas,
       'right-click-node-bypassed.png'
     )
   })
@@ -129,9 +132,9 @@ test.describe('Node Right Click Menu', { tag: ['@screenshot', '@ui'] }, () => {
       button: 'right'
     })
     await comfyPage.page.mouse.move(10, 10)
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot('right-click-node.png')
-    await comfyPage.page.click('.litemenu-entry:has-text("Pin")')
+    await comfyPage.expectScreenshot(comfyPage.canvas, 'right-click-node.png')
+    await comfyPage.page.locator('.litemenu-entry:has-text("Pin")').click()
+    await comfyPage.contextMenu.waitForHidden()
     await comfyPage.nextFrame()
 
     // Get EmptyLatentImage node title position dynamically (for dragging)
@@ -144,19 +147,19 @@ test.describe('Node Right Click Menu', { tag: ['@screenshot', '@ui'] }, () => {
       button: 'right'
     })
     await comfyPage.page.mouse.move(10, 10)
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot(
+    await comfyPage.expectScreenshot(
+      comfyPage.canvas,
       'right-click-pinned-node.png'
     )
-    await comfyPage.page.click('.litemenu-entry:has-text("Unpin")')
-    await comfyPage.nextFrame()
+    await comfyPage.page.locator('.litemenu-entry:has-text("Unpin")').click()
+    await comfyPage.contextMenu.waitForHidden()
     await comfyPage.canvas.click({
       position: DefaultGraphPositions.emptyLatentWidgetClick,
       button: 'right'
     })
     await comfyPage.page.mouse.move(10, 10)
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot(
+    await comfyPage.expectScreenshot(
+      comfyPage.canvas,
       'right-click-unpinned-node.png'
     )
   })
@@ -168,15 +171,16 @@ test.describe('Node Right Click Menu', { tag: ['@screenshot', '@ui'] }, () => {
     })
     await comfyPage.page.mouse.move(10, 10)
     await comfyPage.nextFrame()
-    await comfyPage.page.click('.litemenu-entry:has-text("Pin")')
-    await comfyPage.nextFrame()
+    await comfyPage.page.locator('.litemenu-entry:has-text("Pin")').click()
+    await comfyPage.contextMenu.waitForHidden()
     await comfyPage.canvas.click({
       position: DefaultGraphPositions.emptyLatentWidgetClick,
       button: 'right'
     })
     await comfyPage.page.mouse.move(10, 10)
     await comfyPage.nextFrame()
-    await comfyPage.page.click('.litemenu-entry:has-text("Unpin")')
+    await comfyPage.page.locator('.litemenu-entry:has-text("Unpin")').click()
+    await comfyPage.contextMenu.waitForHidden()
     await comfyPage.nextFrame()
 
     // Get EmptyLatentImage node title position dynamically (for dragging)
@@ -197,19 +201,23 @@ test.describe('Node Right Click Menu', { tag: ['@screenshot', '@ui'] }, () => {
     })
     await comfyPage.page.mouse.move(10, 10)
     await comfyPage.nextFrame()
-    await comfyPage.page.click('.litemenu-entry:has-text("Pin")')
+    await comfyPage.page.locator('.litemenu-entry:has-text("Pin")').click()
     await comfyPage.page.keyboard.up('Control')
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot('selected-nodes-pinned.png')
+    await comfyPage.contextMenu.waitForHidden()
+    await comfyPage.expectScreenshot(
+      comfyPage.canvas,
+      'selected-nodes-pinned.png'
+    )
     await comfyPage.canvas.click({
       position: DefaultGraphPositions.emptyLatentWidgetClick,
       button: 'right'
     })
     await comfyPage.page.mouse.move(10, 10)
     await comfyPage.nextFrame()
-    await comfyPage.page.click('.litemenu-entry:has-text("Unpin")')
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot(
+    await comfyPage.page.locator('.litemenu-entry:has-text("Unpin")').click()
+    await comfyPage.contextMenu.waitForHidden()
+    await comfyPage.expectScreenshot(
+      comfyPage.canvas,
       'selected-nodes-unpinned.png'
     )
   })
@@ -218,7 +226,7 @@ test.describe('Node Right Click Menu', { tag: ['@screenshot', '@ui'] }, () => {
     const nodeCount = await comfyPage.nodeOps.getGraphNodesCount()
     const node = (await comfyPage.nodeOps.getFirstNodeRef())!
     await node.clickContextMenuOption('Pin')
-    await comfyPage.nextFrame()
+    await comfyPage.contextMenu.waitForHidden()
     await node.click('title', { button: 'right' })
     await expect(
       comfyPage.page.locator('.litemenu-entry:has-text("Unpin")')
@@ -227,8 +235,9 @@ test.describe('Node Right Click Menu', { tag: ['@screenshot', '@ui'] }, () => {
       '.litemenu-entry:has-text("Clone")'
     )
     await cloneItem.click()
-    await expect(cloneItem).toHaveCount(0)
-    await comfyPage.nextFrame()
-    expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(nodeCount + 1)
+    await comfyPage.contextMenu.waitForHidden()
+    await expect
+      .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+      .toBe(nodeCount + 1)
   })
 })
diff --git a/browser_tests/tests/rightSidePanelTabs.spec.ts b/browser_tests/tests/rightSidePanelTabs.spec.ts
index 3ac1e8e920..6110971fba 100644
--- a/browser_tests/tests/rightSidePanelTabs.spec.ts
+++ b/browser_tests/tests/rightSidePanelTabs.spec.ts
@@ -1,14 +1,10 @@
 import {
   comfyPageFixture as test,
   comfyExpect as expect
-} from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
+} from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
 
 test.describe('Right Side Panel Tabs', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-  })
-
   test('Properties panel opens with workflow overview', async ({
     comfyPage
   }) => {
diff --git a/browser_tests/tests/saveImageAndWebp.spec.ts b/browser_tests/tests/saveImageAndWebp.spec.ts
index a4929c5e42..36357fa042 100644
--- a/browser_tests/tests/saveImageAndWebp.spec.ts
+++ b/browser_tests/tests/saveImageAndWebp.spec.ts
@@ -1,23 +1,17 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.describe(
   'Save Image and WEBM preview',
-  { tag: ['@screenshot', '@widget'] },
+  { tag: ['@screenshot', '@widget', '@vue-nodes'] },
   () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-      await comfyPage.vueNodes.waitForNodes()
-    })
-
     test('Can preview both SaveImage and SaveWEBM outputs', async ({
       comfyPage
     }) => {
       await comfyPage.workflow.loadWorkflow(
         'widgets/save_image_and_animated_webp'
       )
-      await comfyPage.vueNodes.waitForNodes()
 
       await comfyPage.runButton.click()
 
diff --git a/browser_tests/tests/selectionRectangle.spec.ts b/browser_tests/tests/selectionRectangle.spec.ts
index 1c14ff43bc..aeff0b3178 100644
--- a/browser_tests/tests/selectionRectangle.spec.ts
+++ b/browser_tests/tests/selectionRectangle.spec.ts
@@ -1,31 +1,24 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../fixtures/ComfyPage'
-
-test.describe('@canvas Selection Rectangle', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.setup()
-    await comfyPage.vueNodes.waitForNodes()
-  })
+} from '@e2e/fixtures/ComfyPage'
 
+test.describe('@canvas Selection Rectangle', { tag: '@vue-nodes' }, () => {
   test('Ctrl+A selects all nodes', async ({ comfyPage }) => {
+    await expect
+      .poll(() => comfyPage.vueNodes.getNodeCount())
+      .toBeGreaterThan(0)
     const totalCount = await comfyPage.vueNodes.getNodeCount()
-    expect(totalCount).toBeGreaterThan(0)
 
     // Use canvas press for keyboard shortcuts (doesn't need click target)
-    await comfyPage.canvas.press('Control+a')
-    await comfyPage.nextFrame()
+    await comfyPage.keyboard.press('Control+a')
 
-    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(totalCount)
+    await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(totalCount)
   })
 
   test('Click empty space deselects all', async ({ comfyPage }) => {
-    await comfyPage.canvas.press('Control+a')
-    await comfyPage.nextFrame()
-    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBeGreaterThan(0)
+    await comfyPage.keyboard.press('Control+a')
+    await expect(comfyPage.vueNodes.selectedNodes).not.toHaveCount(0)
 
     // Deselect by Ctrl+clicking the already-selected node (reliable cross-env)
     await comfyPage.page
@@ -37,26 +30,26 @@ test.describe('@canvas Selection Rectangle', () => {
     })
     await comfyPage.nextFrame()
 
-    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(0)
+    await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(0)
   })
 
   test('Single click selects one node', async ({ comfyPage }) => {
     await comfyPage.page.getByText('Load Checkpoint').click()
     await comfyPage.nextFrame()
 
-    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(1)
+    await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(1)
   })
 
   test('Ctrl+click adds to selection', async ({ comfyPage }) => {
     await comfyPage.page.getByText('Load Checkpoint').click()
     await comfyPage.nextFrame()
-    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(1)
+    await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(1)
 
     await comfyPage.page.getByText('Empty Latent Image').click({
       modifiers: ['Control']
     })
     await comfyPage.nextFrame()
-    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(2)
+    await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(2)
   })
 
   test('Selected nodes have visual indicator', async ({ comfyPage }) => {
@@ -71,15 +64,16 @@ test.describe('@canvas Selection Rectangle', () => {
   test('Drag-select rectangle selects multiple nodes', async ({
     comfyPage
   }) => {
-    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(0)
+    await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(0)
 
     // Use Ctrl+A to select all, which is functionally equivalent to
     // drag-selecting the entire canvas and more reliable in CI
-    await comfyPage.canvas.press('Control+a')
-    await comfyPage.nextFrame()
+    await comfyPage.keyboard.press('Control+a')
 
+    await expect
+      .poll(() => comfyPage.vueNodes.getNodeCount())
+      .toBeGreaterThan(1)
     const totalCount = await comfyPage.vueNodes.getNodeCount()
-    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(totalCount)
-    expect(totalCount).toBeGreaterThan(1)
+    await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(totalCount)
   })
 })
diff --git a/browser_tests/tests/selectionToolbox.spec.ts b/browser_tests/tests/selectionToolbox.spec.ts
index 5a89da6dd2..c673a2a879 100644
--- a/browser_tests/tests/selectionToolbox.spec.ts
+++ b/browser_tests/tests/selectionToolbox.spec.ts
@@ -1,14 +1,15 @@
 import { expect } from '@playwright/test'
 import type { Page } from '@playwright/test'
 
-import { comfyPageFixture } from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
+import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
 
 const test = comfyPageFixture
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
 })
+
 const BLUE_COLOR = 'rgb(51, 51, 85)'
 const RED_COLOR = 'rgb(85, 51, 51)'
 
@@ -30,7 +31,7 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
 
   test('shows selection toolbox', async ({ comfyPage }) => {
     // By default, selection toolbox should be enabled
-    await expect(comfyPage.selectionToolbox).not.toBeVisible()
+    await expect(comfyPage.selectionToolbox).toBeHidden()
 
     // Select multiple nodes
     await comfyPage.nodeOps.selectNodes([
@@ -59,12 +60,19 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
     await expect(toolboxContainer).toBeVisible()
 
     // Verify toolbox is positioned (canvas-based positioning has different coordinates)
-    const boundingBox = await toolboxContainer.boundingBox()
-    expect(boundingBox).not.toBeNull()
+    await expect
+      .poll(async () => await toolboxContainer.boundingBox())
+      .not.toBeNull()
     // Canvas-based positioning can vary, just verify toolbox appears in reasonable bounds
-    expect(boundingBox!.x).toBeGreaterThan(-200) // Not too far off-screen left
-    expect(boundingBox!.x).toBeLessThan(1000) // Not too far off-screen right
-    expect(boundingBox!.y).toBeGreaterThan(-100) // Not too far off-screen top
+    await expect
+      .poll(async () => (await toolboxContainer.boundingBox())?.x)
+      .toBeGreaterThan(-200) // Not too far off-screen left
+    await expect
+      .poll(async () => (await toolboxContainer.boundingBox())?.x)
+      .toBeLessThan(1000) // Not too far off-screen right
+    await expect
+      .poll(async () => (await toolboxContainer.boundingBox())?.y)
+      .toBeGreaterThan(-100) // Not too far off-screen top
   })
 
   test('hide when select and drag happen at the same time', async ({
@@ -79,7 +87,7 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
     await comfyPage.page.mouse.down()
     await comfyPage.page.mouse.move(nodePos.x + 200, nodePos.y + 200)
     await comfyPage.nextFrame()
-    await expect(comfyPage.selectionToolbox).not.toBeVisible()
+    await expect(comfyPage.selectionToolbox).toBeHidden()
   })
 
   test('shows border only with multiple selections', async ({ comfyPage }) => {
@@ -120,7 +128,7 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
     await comfyPage.workflow.loadWorkflow('groups/single_group')
 
     // Select group + node should show bypass button
-    await comfyPage.page.focus('canvas')
+    await comfyPage.canvas.focus()
     await comfyPage.page.keyboard.press('Control+A')
     await expect(
       comfyPage.page.locator(
@@ -134,7 +142,7 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
       comfyPage.page.locator(
         '.selection-toolbox *[data-testid="bypass-button"]'
       )
-    ).not.toBeVisible()
+    ).toBeHidden()
   })
 
   test.describe('Color Picker', () => {
@@ -162,14 +170,14 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
       await blueColorOption.click()
 
       // Dropdown should close after selection
-      await expect(colorPickerGroup).not.toBeVisible()
+      await expect(colorPickerGroup).toBeHidden()
 
       // Node should have the selected color class/style
       // Note: Exact verification method depends on how color is applied to nodes
       const selectedNode = (
         await comfyPage.nodeOps.getNodeRefsByTitle('KSampler')
       )[0]
-      expect(await selectedNode.getProperty('color')).not.toBeNull()
+      await expect.poll(() => selectedNode.getProperty('color')).toBeDefined()
     })
 
     test('color picker shows current color of selected nodes', async ({
@@ -259,14 +267,13 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
         .click()
 
       // Undo the colorization
-      await comfyPage.page.keyboard.press('Control+Z')
-      await comfyPage.nextFrame()
+      await comfyPage.keyboard.press('Control+Z')
 
       // Node should be uncolored again
       const selectedNode = (
         await comfyPage.nodeOps.getNodeRefsByTitle('KSampler')
       )[0]
-      expect(await selectedNode.getProperty('color')).toBeUndefined()
+      await expect.poll(() => selectedNode.getProperty('color')).toBeUndefined()
     })
   })
 })
diff --git a/browser_tests/tests/selectionToolboxActions.spec.ts b/browser_tests/tests/selectionToolboxActions.spec.ts
index e59e99a592..6b7de614f9 100644
--- a/browser_tests/tests/selectionToolboxActions.spec.ts
+++ b/browser_tests/tests/selectionToolboxActions.spec.ts
@@ -1,9 +1,20 @@
+import type { Locator } from '@playwright/test'
+
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../fixtures/ComfyPage'
-import type { NodeReference } from '../fixtures/utils/litegraphUtils'
-import type { ComfyPage } from '../fixtures/ComfyPage'
+} from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import type { NodeReference } from '@e2e/fixtures/utils/litegraphUtils'
+
+const BYPASS_CLASS = /before:bg-bypass\/60/
+
+function getNodeWrapper(comfyPage: ComfyPage, nodeTitle: string): Locator {
+  return comfyPage.page
+    .locator('[data-node-id]')
+    .filter({ hasText: nodeTitle })
+    .getByTestId('node-inner-wrapper')
+}
 
 async function selectNodeWithPan(comfyPage: ComfyPage, nodeRef: NodeReference) {
   const nodePos = await nodeRef.getPosition()
@@ -17,15 +28,10 @@ async function selectNodeWithPan(comfyPage: ComfyPage, nodeRef: NodeReference) {
   await nodeRef.click('title')
 }
 
-test.beforeEach(async ({ comfyPage }) => {
-  await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-})
-
 test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.Canvas.SelectionToolbox', true)
     await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')
-    await comfyPage.nextFrame()
   })
 
   test('delete button removes selected node', async ({ comfyPage }) => {
@@ -36,42 +42,38 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
       () => window.app!.graph!._nodes.length
     )
 
-    const deleteButton = comfyPage.page.locator('[data-testid="delete-button"]')
+    const deleteButton = comfyPage.page.getByTestId('delete-button')
     await expect(deleteButton).toBeVisible()
-    await deleteButton.click({ force: true })
+    await deleteButton.click()
     await comfyPage.nextFrame()
 
-    const newCount = await comfyPage.page.evaluate(
-      () => window.app!.graph!._nodes.length
-    )
-    expect(newCount).toBe(initialCount - 1)
+    await expect
+      .poll(() =>
+        comfyPage.page.evaluate(() => window.app!.graph!._nodes.length)
+      )
+      .toBe(initialCount - 1)
   })
 
   test('info button opens properties panel', async ({ comfyPage }) => {
     const nodeRef = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
     await selectNodeWithPan(comfyPage, nodeRef)
 
-    const infoButton = comfyPage.page.locator('[data-testid="info-button"]')
+    const infoButton = comfyPage.page.getByTestId('info-button')
     await expect(infoButton).toBeVisible()
-    await infoButton.click({ force: true })
-    await comfyPage.nextFrame()
-
-    await expect(
-      comfyPage.page.locator('[data-testid="properties-panel"]')
-    ).toBeVisible()
+    await infoButton.click()
+    await expect(comfyPage.page.getByTestId('properties-panel')).toBeVisible()
   })
 
   test('convert-to-subgraph button visible with multi-select', async ({
     comfyPage
   }) => {
     await comfyPage.workflow.loadWorkflow('default')
-    await comfyPage.nextFrame()
 
     await comfyPage.nodeOps.selectNodes(['KSampler', 'Empty Latent Image'])
     await comfyPage.nextFrame()
 
     await expect(
-      comfyPage.page.locator('[data-testid="convert-to-subgraph-button"]')
+      comfyPage.page.getByTestId('convert-to-subgraph-button')
     ).toBeVisible()
   })
 
@@ -79,7 +81,6 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
     comfyPage
   }) => {
     await comfyPage.workflow.loadWorkflow('default')
-    await comfyPage.nextFrame()
 
     await comfyPage.nodeOps.selectNodes(['KSampler', 'Empty Latent Image'])
     await comfyPage.nextFrame()
@@ -88,14 +89,163 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
       () => window.app!.graph!._nodes.length
     )
 
-    const deleteButton = comfyPage.page.locator('[data-testid="delete-button"]')
+    const deleteButton = comfyPage.page.getByTestId('delete-button')
     await expect(deleteButton).toBeVisible()
-    await deleteButton.click({ force: true })
+    await deleteButton.click()
     await comfyPage.nextFrame()
 
-    const newCount = await comfyPage.page.evaluate(
-      () => window.app!.graph!._nodes.length
+    await expect
+      .poll(() =>
+        comfyPage.page.evaluate(() => window.app!.graph!._nodes.length)
+      )
+      .toBe(initialCount - 2)
+  })
+
+  test('bypass button toggles bypass on single node', async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')
+    await comfyPage.vueNodes.waitForNodes()
+
+    const nodeRef = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
+    await selectNodeWithPan(comfyPage, nodeRef)
+
+    await expect.poll(() => nodeRef.isBypassed()).toBe(false)
+
+    const bypassButton = comfyPage.page.getByTestId('bypass-button')
+    await expect(bypassButton).toBeVisible()
+    await bypassButton.click()
+    await comfyPage.nextFrame()
+
+    await expect.poll(() => nodeRef.isBypassed()).toBe(true)
+    await expect(getNodeWrapper(comfyPage, 'KSampler')).toHaveClass(
+      BYPASS_CLASS
     )
-    expect(newCount).toBe(initialCount - 2)
+
+    await bypassButton.click()
+    await comfyPage.nextFrame()
+
+    await expect.poll(() => nodeRef.isBypassed()).toBe(false)
+    await expect(getNodeWrapper(comfyPage, 'KSampler')).not.toHaveClass(
+      BYPASS_CLASS
+    )
+  })
+
+  test('convert-to-subgraph button converts node to subgraph', async ({
+    comfyPage
+  }) => {
+    const nodeRef = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
+    await selectNodeWithPan(comfyPage, nodeRef)
+
+    const convertButton = comfyPage.page.getByTestId(
+      'convert-to-subgraph-button'
+    )
+    await expect(convertButton).toBeVisible()
+    await convertButton.click()
+    await comfyPage.nextFrame()
+
+    // KSampler should be gone, replaced by a subgraph node
+    await expect
+      .poll(() => comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))
+      .toHaveLength(0)
+
+    await expect
+      .poll(() => comfyPage.nodeOps.getNodeRefsByTitle('New Subgraph'))
+      .toHaveLength(1)
+  })
+
+  test('convert-to-subgraph button converts multiple nodes', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow('default')
+
+    const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
+
+    await comfyPage.nodeOps.selectNodes(['KSampler', 'Empty Latent Image'])
+    await comfyPage.nextFrame()
+
+    const convertButton = comfyPage.page.getByTestId(
+      'convert-to-subgraph-button'
+    )
+    await expect(convertButton).toBeVisible()
+    await convertButton.click()
+    await comfyPage.nextFrame()
+
+    await expect
+      .poll(() => comfyPage.nodeOps.getNodeRefsByTitle('New Subgraph'))
+      .toHaveLength(1)
+
+    await expect
+      .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+      .toBe(initialCount - 1)
+  })
+
+  test('frame nodes button creates group from multiple selected nodes', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow('default')
+
+    const initialGroupCount = await comfyPage.page.evaluate(
+      () => window.app!.graph.groups.length
+    )
+
+    await comfyPage.nodeOps.selectNodes(['KSampler', 'Empty Latent Image'])
+    await comfyPage.nextFrame()
+
+    await expect(
+      comfyPage.selectionToolbox.getByRole('button', {
+        name: /Frame Nodes/i
+      })
+    ).toBeVisible()
+    await comfyPage.selectionToolbox
+      .getByRole('button', { name: /Frame Nodes/i })
+      .click()
+    await comfyPage.nextFrame()
+
+    await expect
+      .poll(() =>
+        comfyPage.page.evaluate(() => window.app!.graph.groups.length)
+      )
+      .toBe(initialGroupCount + 1)
+  })
+
+  test('frame nodes button is not visible for single selection', async ({
+    comfyPage
+  }) => {
+    const nodeRef = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
+    await selectNodeWithPan(comfyPage, nodeRef)
+
+    const frameButton = comfyPage.page.getByRole('button', {
+      name: /Frame Nodes/i
+    })
+    await expect(frameButton).toBeHidden()
+  })
+
+  test('execute button visible when output node selected', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow('default')
+
+    // Select the SaveImage node by panning to it
+    const saveImageRef = (
+      await comfyPage.nodeOps.getNodeRefsByTitle('Save Image')
+    )[0]
+    await selectNodeWithPan(comfyPage, saveImageRef)
+
+    const executeButton = comfyPage.page.getByRole('button', {
+      name: /Execute to selected output nodes/i
+    })
+    await expect(executeButton).toBeVisible()
+  })
+
+  test('execute button not visible when non-output node selected', async ({
+    comfyPage
+  }) => {
+    const nodeRef = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
+    await selectNodeWithPan(comfyPage, nodeRef)
+
+    const executeButton = comfyPage.page.getByRole('button', {
+      name: /Execute to selected output nodes/i
+    })
+    await expect(executeButton).toBeHidden()
   })
 })
diff --git a/browser_tests/tests/selectionToolboxMoreActions.spec.ts b/browser_tests/tests/selectionToolboxMoreActions.spec.ts
new file mode 100644
index 0000000000..ee700e2081
--- /dev/null
+++ b/browser_tests/tests/selectionToolboxMoreActions.spec.ts
@@ -0,0 +1,168 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+
+async function openMoreOptions(comfyPage: ComfyPage) {
+  await expect(comfyPage.selectionToolbox).toBeVisible()
+
+  const moreOptionsBtn = comfyPage.page.getByTestId('more-options-button')
+  await expect(moreOptionsBtn).toBeVisible()
+  await moreOptionsBtn.click()
+  await comfyPage.nextFrame()
+
+  // Wait for the context menu to appear by checking for 'Copy', which is
+  // always present regardless of single or multi-node selection.
+  const menu = comfyPage.page.locator('.p-contextmenu')
+  await expect(menu.getByText('Copy', { exact: true })).toBeVisible()
+}
+
+test.describe('Selection Toolbox - More Options', { tag: '@ui' }, () => {
+  test.describe('Single node actions', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.Canvas.SelectionToolbox', true)
+      await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')
+      await comfyPage.nextFrame()
+    })
+
+    test('pin and unpin node via More Options menu', async ({ comfyPage }) => {
+      const nodeRef = (
+        await comfyPage.nodeOps.getNodeRefsByTitle('KSampler')
+      )[0]
+      await comfyPage.nodeOps.selectNodeWithPan(nodeRef)
+
+      await expect(nodeRef).not.toBePinned()
+
+      await openMoreOptions(comfyPage)
+      await comfyPage.page.getByText('Pin', { exact: true }).click()
+      await comfyPage.nextFrame()
+
+      await expect(nodeRef).toBePinned()
+
+      await openMoreOptions(comfyPage)
+      await comfyPage.page.getByText('Unpin', { exact: true }).click()
+      await comfyPage.nextFrame()
+
+      await expect(nodeRef).not.toBePinned()
+    })
+
+    test('minimize and expand node via More Options menu', async ({
+      comfyPage
+    }) => {
+      const nodeRef = (
+        await comfyPage.nodeOps.getNodeRefsByTitle('KSampler')
+      )[0]
+      await comfyPage.nodeOps.selectNodeWithPan(nodeRef)
+
+      await expect(nodeRef).not.toBeCollapsed()
+
+      await openMoreOptions(comfyPage)
+      await comfyPage.page.getByText('Minimize Node', { exact: true }).click()
+      await comfyPage.nextFrame()
+
+      await expect(nodeRef).toBeCollapsed()
+
+      await openMoreOptions(comfyPage)
+      await comfyPage.page.getByText('Expand Node', { exact: true }).click()
+      await comfyPage.nextFrame()
+
+      await expect(nodeRef).not.toBeCollapsed()
+    })
+
+    test('copy via More Options menu', async ({ comfyPage }) => {
+      const nodeRef = (
+        await comfyPage.nodeOps.getNodeRefsByTitle('KSampler')
+      )[0]
+      await comfyPage.nodeOps.selectNodeWithPan(nodeRef)
+
+      const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
+
+      await openMoreOptions(comfyPage)
+      await comfyPage.page.getByText('Copy', { exact: true }).click()
+      await comfyPage.nextFrame()
+
+      // Paste the copied node
+      await comfyPage.clipboard.paste()
+      await comfyPage.nextFrame()
+
+      await expect
+        .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+        .toBe(initialCount + 1)
+    })
+
+    test('duplicate via More Options menu', async ({ comfyPage }) => {
+      const nodeRef = (
+        await comfyPage.nodeOps.getNodeRefsByTitle('KSampler')
+      )[0]
+      await comfyPage.nodeOps.selectNodeWithPan(nodeRef)
+
+      const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
+
+      await openMoreOptions(comfyPage)
+      await comfyPage.page.getByText('Duplicate', { exact: true }).click()
+      await comfyPage.nextFrame()
+
+      await expect
+        .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+        .toBe(initialCount + 1)
+    })
+
+    test('refresh button is rendered in toolbox when node is selected', async ({
+      comfyPage
+    }) => {
+      const nodeRef = (
+        await comfyPage.nodeOps.getNodeRefsByTitle('KSampler')
+      )[0]
+      await comfyPage.nodeOps.selectNodeWithPan(nodeRef)
+
+      await expect(comfyPage.selectionToolbox).toBeVisible()
+
+      // The refresh button uses v-show so it's always in the DOM;
+      // actual visibility depends on backend-provided widget refresh
+      // capabilities which vary between local and CI environments.
+      const refreshButton = comfyPage.page.getByTestId('refresh-button')
+      await expect(refreshButton).toBeAttached()
+    })
+  })
+
+  test.describe('Multiple node actions', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.Canvas.SelectionToolbox', true)
+      await comfyPage.workflow.loadWorkflow('default')
+      await comfyPage.nextFrame()
+    })
+
+    test('bypass button toggles bypass on multiple selected nodes', async ({
+      comfyPage
+    }) => {
+      await comfyPage.nodeOps.selectNodes(['KSampler', 'Empty Latent Image'])
+      await comfyPage.nextFrame()
+
+      const ksampler = (
+        await comfyPage.nodeOps.getNodeRefsByTitle('KSampler')
+      )[0]
+      const emptyLatent = (
+        await comfyPage.nodeOps.getNodeRefsByTitle('Empty Latent Image')
+      )[0]
+
+      await expect(ksampler).not.toBeBypassed()
+      await expect(emptyLatent).not.toBeBypassed()
+
+      const bypassButton = comfyPage.page.getByTestId('bypass-button')
+      await expect(bypassButton).toBeVisible()
+      await bypassButton.click()
+      await comfyPage.nextFrame()
+
+      await expect(ksampler).toBeBypassed()
+      await expect(emptyLatent).toBeBypassed()
+
+      // Toggle back
+      await bypassButton.click()
+      await comfyPage.nextFrame()
+
+      await expect(ksampler).not.toBeBypassed()
+      await expect(emptyLatent).not.toBeBypassed()
+    })
+  })
+})
diff --git a/browser_tests/tests/selectionToolboxSubmenus.spec.ts b/browser_tests/tests/selectionToolboxSubmenus.spec.ts
index c97d5d5b35..68f38793b4 100644
--- a/browser_tests/tests/selectionToolboxSubmenus.spec.ts
+++ b/browser_tests/tests/selectionToolboxSubmenus.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import type { ComfyPage } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -14,7 +14,6 @@ test.describe(
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.settings.setSetting('Comfy.Canvas.SelectionToolbox', true)
       await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')
-      await comfyPage.nextFrame()
       await comfyPage.nodeOps.selectNodes(['KSampler'])
       await comfyPage.nextFrame()
     })
@@ -43,18 +42,13 @@ test.describe(
       await comfyPage.nextFrame()
 
       await ksamplerNodes[0].click('title')
-      await comfyPage.nextFrame()
 
-      await expect(comfyPage.page.locator('.selection-toolbox')).toBeVisible({
-        timeout: 5000
-      })
+      await expect(comfyPage.page.locator('.selection-toolbox')).toBeVisible()
 
-      const moreOptionsBtn = comfyPage.page.locator(
-        '[data-testid="more-options-button"]'
-      )
-      await expect(moreOptionsBtn).toBeVisible({ timeout: 3000 })
+      const moreOptionsBtn = comfyPage.page.getByTestId('more-options-button')
+      await expect(moreOptionsBtn).toBeVisible()
 
-      await comfyPage.page.click('[data-testid="more-options-button"]')
+      await moreOptionsBtn.click()
 
       await comfyPage.nextFrame()
 
@@ -66,7 +60,7 @@ test.describe(
         return
       }
 
-      await moreOptionsBtn.click({ force: true })
+      await moreOptionsBtn.click()
       await comfyPage.nextFrame()
 
       const menuOptionsVisibleAfterClick = await comfyPage.page
@@ -94,21 +88,16 @@ test.describe(
       const nodeRef = (
         await comfyPage.nodeOps.getNodeRefsByTitle('KSampler')
       )[0]
-      const initialShape = await nodeRef.getProperty<number>('shape')
 
       await openMoreOptions(comfyPage)
       await comfyPage.page.getByText('Shape', { exact: true }).hover()
       await expect(
         comfyPage.page.getByText('Box', { exact: true })
-      ).toBeVisible({
-        timeout: 5000
-      })
+      ).toBeVisible()
       await comfyPage.page.getByText('Box', { exact: true }).click()
       await comfyPage.nextFrame()
 
-      const newShape = await nodeRef.getProperty<number>('shape')
-      expect(newShape).not.toBe(initialShape)
-      expect(newShape).toBe(1)
+      await expect.poll(() => nodeRef.getProperty<number>('shape')).toBe(1)
     })
 
     test('changes node color via Color submenu swatch', async ({
@@ -117,22 +106,17 @@ test.describe(
       const nodeRef = (
         await comfyPage.nodeOps.getNodeRefsByTitle('KSampler')
       )[0]
-      const initialColor = await nodeRef.getProperty<string | undefined>(
-        'color'
-      )
 
       await openMoreOptions(comfyPage)
       await comfyPage.page.getByText('Color', { exact: true }).click()
-      const blueSwatch = comfyPage.page.locator('[title="Blue"]')
-      await expect(blueSwatch.first()).toBeVisible({ timeout: 5000 })
+      const blueSwatch = comfyPage.page.getByTitle('Blue')
+      await expect(blueSwatch.first()).toBeVisible()
       await blueSwatch.first().click()
       await comfyPage.nextFrame()
 
-      const newColor = await nodeRef.getProperty<string | undefined>('color')
-      expect(newColor).toBe('#223')
-      if (initialColor) {
-        expect(newColor).not.toBe(initialColor)
-      }
+      await expect
+        .poll(() => nodeRef.getProperty<string | undefined>('color'))
+        .toBe('#223')
     })
 
     test('renames a node using Rename action', async ({ comfyPage }) => {
@@ -140,9 +124,7 @@ test.describe(
         await comfyPage.nodeOps.getNodeRefsByTitle('KSampler')
       )[0]
       await openMoreOptions(comfyPage)
-      await comfyPage.page
-        .getByText('Rename', { exact: true })
-        .click({ force: true })
+      await comfyPage.page.getByText('Rename', { exact: true }).click()
       const input = comfyPage.page.locator(
         '.group-title-editor.node-title-editor .editable-text input'
       )
@@ -150,8 +132,9 @@ test.describe(
       await input.fill('RenamedNode')
       await input.press('Enter')
       await comfyPage.nextFrame()
-      const newTitle = await nodeRef.getProperty<string>('title')
-      expect(newTitle).toBe('RenamedNode')
+      await expect
+        .poll(() => nodeRef.getProperty<string>('title'))
+        .toBe('RenamedNode')
     })
 
     test('closes More Options menu when clicking outside', async ({
@@ -159,21 +142,17 @@ test.describe(
     }) => {
       await openMoreOptions(comfyPage)
       const renameItem = comfyPage.page.getByText('Rename', { exact: true })
-      await expect(renameItem).toBeVisible({ timeout: 5000 })
+      await expect(renameItem).toBeVisible()
 
       // Wait for multiple frames to allow PrimeVue's outside click handler to initialize
       for (let i = 0; i < 30; i++) {
         await comfyPage.nextFrame()
       }
 
-      await comfyPage.page
-        .locator('#graph-canvas')
-        .click({ position: { x: 0, y: 50 }, force: true })
-
-      await comfyPage.nextFrame()
+      await comfyPage.canvasOps.mouseClickAt({ x: 0, y: 50 })
       await expect(
         comfyPage.page.getByText('Rename', { exact: true })
-      ).not.toBeVisible()
+      ).toBeHidden()
     })
 
     test('closes More Options menu when clicking the button again (toggle)', async ({
@@ -182,7 +161,7 @@ test.describe(
       await openMoreOptions(comfyPage)
       await expect(
         comfyPage.page.getByText('Rename', { exact: true })
-      ).toBeVisible({ timeout: 5000 })
+      ).toBeVisible()
 
       await comfyPage.page.evaluate(() => {
         const btn = document.querySelector(
@@ -202,7 +181,7 @@ test.describe(
 
       await expect(
         comfyPage.page.getByText('Rename', { exact: true })
-      ).not.toBeVisible()
+      ).toBeHidden()
     })
   }
 )
diff --git a/browser_tests/tests/sidebar/assets.spec.ts b/browser_tests/tests/sidebar/assets.spec.ts
index 5f7653ec8a..69a258c1ea 100644
--- a/browser_tests/tests/sidebar/assets.spec.ts
+++ b/browser_tests/tests/sidebar/assets.spec.ts
@@ -1,8 +1,72 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import {
+  createMockJob,
+  createMockJobs
+} from '@e2e/fixtures/helpers/AssetsHelper'
+import type { RawJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
 
-test.describe('Assets sidebar', () => {
+// ---------------------------------------------------------------------------
+// Shared fixtures
+// ---------------------------------------------------------------------------
+
+const SAMPLE_JOBS: RawJobListItem[] = [
+  createMockJob({
+    id: 'job-alpha',
+    create_time: 1000,
+    execution_start_time: 1000,
+    execution_end_time: 1010,
+    preview_output: {
+      filename: 'landscape.png',
+      subfolder: '',
+      type: 'output',
+      nodeId: '1',
+      mediaType: 'images'
+    },
+    outputs_count: 1
+  }),
+  createMockJob({
+    id: 'job-beta',
+    create_time: 2000,
+    execution_start_time: 2000,
+    execution_end_time: 2003,
+    preview_output: {
+      filename: 'portrait.png',
+      subfolder: '',
+      type: 'output',
+      nodeId: '2',
+      mediaType: 'images'
+    },
+    outputs_count: 1
+  }),
+  createMockJob({
+    id: 'job-gamma',
+    create_time: 3000,
+    execution_start_time: 3000,
+    execution_end_time: 3020,
+    preview_output: {
+      filename: 'abstract_art.png',
+      subfolder: '',
+      type: 'output',
+      nodeId: '3',
+      mediaType: 'images'
+    },
+    outputs_count: 2
+  })
+]
+
+const SAMPLE_IMPORTED_FILES = [
+  'reference_photo.png',
+  'background.jpg',
+  'audio_clip.wav'
+]
+
+// ==========================================================================
+// 1. Empty states
+// ==========================================================================
+
+test.describe('Assets sidebar - empty states', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.assets.mockEmptyState()
     await comfyPage.setup()
@@ -12,19 +76,699 @@ test.describe('Assets sidebar', () => {
     await comfyPage.assets.clearMocks()
   })
 
-  test('Shows empty-state copy for generated and imported tabs', async ({
-    comfyPage
-  }) => {
+  test('Shows empty-state copy for generated tab', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
-
     await tab.open()
 
     await expect(tab.emptyStateTitle('No generated files found')).toBeVisible()
     await expect(tab.emptyStateMessage).toBeVisible()
+  })
 
-    await tab.importedTab.click()
+  test('Shows empty-state copy for imported tab', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.switchToImported()
 
     await expect(tab.emptyStateTitle('No imported files found')).toBeVisible()
     await expect(tab.emptyStateMessage).toBeVisible()
   })
+
+  test('No asset cards are rendered when empty', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+
+    await expect(tab.assetCards).toHaveCount(0)
+  })
+})
+
+// ==========================================================================
+// 2. Tab navigation
+// ==========================================================================
+
+test.describe('Assets sidebar - tab navigation', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
+    await comfyPage.assets.mockInputFiles(SAMPLE_IMPORTED_FILES)
+    await comfyPage.setup()
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
+  test('Generated tab is active by default', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+
+    await expect(tab.generatedTab).toHaveAttribute('aria-selected', 'true')
+    await expect(tab.importedTab).toHaveAttribute('aria-selected', 'false')
+  })
+
+  test('Can switch between Generated and Imported tabs', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+
+    // Switch to Imported
+    await tab.switchToImported()
+    await expect(tab.importedTab).toHaveAttribute('aria-selected', 'true')
+    await expect(tab.generatedTab).toHaveAttribute('aria-selected', 'false')
+
+    // Switch back to Generated
+    await tab.switchToGenerated()
+    await expect(tab.generatedTab).toHaveAttribute('aria-selected', 'true')
+  })
+
+  test('Search is cleared when switching tabs', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+
+    // Type search in Generated tab
+    await tab.searchInput.fill('landscape')
+    await expect(tab.searchInput).toHaveValue('landscape')
+
+    // Switch to Imported tab
+    await tab.switchToImported()
+    await expect(tab.searchInput).toHaveValue('')
+  })
+})
+
+// ==========================================================================
+// 3. Asset display - grid view
+// ==========================================================================
+
+test.describe('Assets sidebar - grid view display', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
+    await comfyPage.assets.mockInputFiles(SAMPLE_IMPORTED_FILES)
+    await comfyPage.setup()
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
+  test('Displays generated assets as cards in grid view', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+
+    await tab.waitForAssets()
+    await expect.poll(() => tab.assetCards.count()).toBeGreaterThanOrEqual(1)
+  })
+
+  test('Displays imported files when switching to Imported tab', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.switchToImported()
+
+    // Wait for imported assets to render
+    await expect(tab.assetCards.first()).toBeVisible()
+
+    // Imported tab should show the mocked files
+    await expect.poll(() => tab.assetCards.count()).toBeGreaterThanOrEqual(1)
+  })
+
+  test('Displays svg outputs', async ({ comfyPage }) => {
+    await comfyPage.assets.mockOutputHistory([
+      createMockJob({
+        id: 'job-alpha',
+        create_time: 1000,
+        execution_start_time: 1000,
+        execution_end_time: 1010,
+        preview_output: {
+          filename: 'logo.svg',
+          subfolder: '',
+          type: 'output',
+          nodeId: '1',
+          mediaType: 'images'
+        },
+        outputs_count: 1
+      })
+    ])
+
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+
+    await expect(tab.assetCards.locator('.pi-image')).toBeVisible()
+  })
+})
+
+// ==========================================================================
+// 4. View mode toggle (grid <-> list)
+// ==========================================================================
+
+test.describe('Assets sidebar - view mode toggle', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
+    await comfyPage.assets.mockInputFiles([])
+    await comfyPage.setup()
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
+  test('Can switch to list view via settings menu', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    // Open settings menu and select list view
+    await tab.openSettingsMenu()
+    await tab.listViewOption.click()
+
+    // List view items should now be visible
+    await expect(tab.listViewItems.first()).toBeVisible()
+  })
+
+  test('Can switch back to grid view', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    // Switch to list view
+    await tab.openSettingsMenu()
+    await tab.listViewOption.click()
+    await expect(tab.listViewItems.first()).toBeVisible()
+
+    // Switch back to grid view (settings popover is still open)
+    await tab.gridViewOption.click()
+    await tab.waitForAssets()
+
+    // Grid cards (with data-selected attribute) should be visible again
+    await expect(tab.assetCards.first()).toBeVisible()
+  })
+})
+
+// ==========================================================================
+// 5. Search functionality
+// ==========================================================================
+
+test.describe('Assets sidebar - search', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
+    await comfyPage.assets.mockInputFiles([])
+    await comfyPage.setup()
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
+  test('Search input is visible', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+
+    await expect(tab.searchInput).toBeVisible()
+  })
+
+  test('Filtering assets by search query reduces displayed count', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    const initialCount = await tab.assetCards.count()
+
+    // Search for a specific filename that matches only one asset
+    await tab.searchInput.fill('landscape')
+
+    // Wait for filter to reduce the count
+    await expect.poll(() => tab.assetCards.count()).toBeLessThan(initialCount)
+  })
+
+  test('Clearing search restores all assets', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    const initialCount = await tab.assetCards.count()
+
+    // Filter then clear
+    await tab.searchInput.fill('landscape')
+    await expect.poll(() => tab.assetCards.count()).toBeLessThan(initialCount)
+
+    await tab.searchInput.fill('')
+    await expect(tab.assetCards).toHaveCount(initialCount)
+  })
+
+  test('Search with no matches shows empty state', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    await tab.searchInput.fill('nonexistent_file_xyz')
+    await expect(tab.assetCards).toHaveCount(0)
+  })
+})
+
+// ==========================================================================
+// 6. Asset selection
+// ==========================================================================
+
+test.describe('Assets sidebar - selection', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
+    await comfyPage.assets.mockInputFiles([])
+    await comfyPage.setup()
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
+  test('Clicking an asset card selects it', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    // Click first asset card
+    await tab.assetCards.first().click()
+
+    // Should have data-selected="true"
+    await expect(tab.selectedCards).toHaveCount(1)
+  })
+
+  test('Ctrl+click adds to selection', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    const cards = tab.assetCards
+    await expect.poll(() => cards.count()).toBeGreaterThanOrEqual(2)
+
+    // Click first card
+    await cards.first().click()
+    await expect(tab.selectedCards).toHaveCount(1)
+
+    // Ctrl+click second card
+    await cards.nth(1).click({ modifiers: ['ControlOrMeta'] })
+    await expect(tab.selectedCards).toHaveCount(2)
+  })
+
+  test('Selection shows footer with count and actions', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    // Select an asset
+    await tab.assetCards.first().click()
+
+    // Footer should show selection count
+    await expect(tab.selectionCountButton).toBeVisible()
+  })
+
+  test('Deselect all clears selection', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    // Select an asset
+    await tab.assetCards.first().click()
+    await expect(tab.selectedCards).toHaveCount(1)
+
+    // Hover over the selection count button to reveal "Deselect all"
+    await tab.selectionCountButton.hover()
+    await expect(tab.deselectAllButton).toBeVisible()
+
+    // Click "Deselect all"
+    await tab.deselectAllButton.click()
+    await expect(tab.selectedCards).toHaveCount(0)
+  })
+
+  test('Selection is cleared when switching tabs', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    // Select an asset
+    await tab.assetCards.first().click()
+    await expect(tab.selectedCards).toHaveCount(1)
+
+    // Switch to Imported tab
+    await tab.switchToImported()
+
+    // Switch back - selection should be cleared
+    await tab.switchToGenerated()
+    await tab.waitForAssets()
+    await expect(tab.selectedCards).toHaveCount(0)
+  })
+})
+
+// ==========================================================================
+// 7. Context menu
+// ==========================================================================
+
+test.describe('Assets sidebar - context menu', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
+    await comfyPage.assets.mockInputFiles([])
+    await comfyPage.setup()
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
+  test('Right-clicking an asset shows context menu', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    // Right-click first asset
+    await tab.assetCards.first().click({ button: 'right' })
+
+    // Context menu should appear with standard items
+    const contextMenu = comfyPage.page.locator('.p-contextmenu')
+    await expect(contextMenu).toBeVisible()
+  })
+
+  test('Context menu contains Download action for output asset', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    await tab.assetCards.first().click({ button: 'right' })
+    await comfyPage.page
+      .locator('.p-contextmenu')
+      .waitFor({ state: 'visible', timeout: 3000 })
+
+    await expect(tab.contextMenuItem('Download')).toBeVisible()
+  })
+
+  test('Context menu contains Inspect action for image assets', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    await tab.assetCards.first().click({ button: 'right' })
+    await comfyPage.page
+      .locator('.p-contextmenu')
+      .waitFor({ state: 'visible', timeout: 3000 })
+
+    await expect(tab.contextMenuItem('Inspect asset')).toBeVisible()
+  })
+
+  test('Context menu contains Delete action for output assets', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    await tab.assetCards.first().click({ button: 'right' })
+    await comfyPage.page
+      .locator('.p-contextmenu')
+      .waitFor({ state: 'visible', timeout: 3000 })
+
+    await expect(tab.contextMenuItem('Delete')).toBeVisible()
+  })
+
+  test('Context menu contains Copy job ID for output assets', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    await tab.assetCards.first().click({ button: 'right' })
+    await comfyPage.page
+      .locator('.p-contextmenu')
+      .waitFor({ state: 'visible', timeout: 3000 })
+
+    await expect(tab.contextMenuItem('Copy job ID')).toBeVisible()
+  })
+
+  test('Context menu contains workflow actions for output assets', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    await tab.assetCards.first().click({ button: 'right' })
+
+    const contextMenu = comfyPage.page.locator('.p-contextmenu')
+    await expect(contextMenu).toBeVisible()
+
+    await expect(
+      tab.contextMenuItem('Open as workflow in new tab')
+    ).toBeVisible()
+    await expect(tab.contextMenuItem('Export workflow')).toBeVisible()
+  })
+
+  test('Bulk context menu shows when multiple assets selected', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    const cards = tab.assetCards
+    await expect.poll(() => cards.count()).toBeGreaterThanOrEqual(2)
+
+    // Dismiss any toasts that appeared after asset loading
+    await tab.dismissToasts()
+
+    // Multi-select: use keyboard.down/up so useKeyModifier('Control') detects
+    // the modifier — click({ modifiers }) only sets the mouse event flag and
+    // does not fire a keydown event that VueUse tracks.
+    await cards.first().click()
+    await comfyPage.page.keyboard.down('Control')
+    await cards.nth(1).click()
+    await comfyPage.page.keyboard.up('Control')
+
+    // Verify multi-selection took effect and footer is stable before right-clicking
+    await expect(tab.selectedCards).toHaveCount(2)
+    await expect(tab.selectionFooter).toBeVisible()
+
+    // Use dispatchEvent instead of click({ button: 'right' }) to avoid any
+    // overlay intercepting the event, and assert directly without toPass.
+    const contextMenu = comfyPage.page.locator('.p-contextmenu')
+    await cards.first().dispatchEvent('contextmenu', {
+      bubbles: true,
+      cancelable: true,
+      button: 2
+    })
+    await expect(contextMenu).toBeVisible()
+
+    // Bulk menu should show bulk download action
+    await expect(tab.contextMenuItem('Download all')).toBeVisible()
+  })
+})
+
+// ==========================================================================
+// 8. Bulk actions (footer)
+// ==========================================================================
+
+test.describe('Assets sidebar - bulk actions', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
+    await comfyPage.assets.mockInputFiles([])
+    await comfyPage.setup()
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
+  test('Footer shows download button when assets selected', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    await tab.assetCards.first().click()
+
+    // Download button in footer should be visible
+    await expect(tab.downloadSelectedButton).toBeVisible()
+  })
+
+  test('Footer shows delete button when output assets selected', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    await tab.assetCards.first().click()
+
+    // Delete button in footer should be visible
+    await expect(tab.deleteSelectedButton).toBeVisible()
+  })
+
+  test('Selection count displays correct number', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    // Select the two single-output assets (job-alpha, job-beta).
+    // The count reflects total outputs, not cards — job-gamma has
+    // outputs_count: 2 which would inflate the total.
+    const cards = tab.assetCards
+    await expect.poll(() => cards.count()).toBeGreaterThanOrEqual(3)
+
+    // Cards are sorted newest-first: gamma (idx 0), beta (1), alpha (2)
+    await cards.nth(1).click()
+    await comfyPage.page.keyboard.down('Control')
+    await cards.nth(2).click()
+    await comfyPage.page.keyboard.up('Control')
+
+    // Selection count should show the count
+    await expect(tab.selectionCountButton).toBeVisible()
+    await expect(tab.selectionCountButton).toHaveText(/Assets Selected:\s*2\b/)
+  })
+})
+
+// ==========================================================================
+// 9. Pagination
+// ==========================================================================
+
+test.describe('Assets sidebar - pagination', () => {
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
+  test('initial load fetches first batch with offset 0', async ({
+    comfyPage
+  }) => {
+    const manyJobs = createMockJobs(250)
+    await comfyPage.assets.mockOutputHistory(manyJobs)
+    await comfyPage.setup()
+
+    // Capture the first history fetch (terminal statuses only).
+    // Queue polling also hits /jobs but with status=in_progress,pending.
+    const firstRequest = comfyPage.page.waitForRequest((req) => {
+      if (!/\/api\/jobs\?/.test(req.url())) return false
+      const url = new URL(req.url())
+      const status = url.searchParams.get('status') ?? ''
+      return status.includes('completed')
+    })
+
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    const req = await firstRequest
+    const url = new URL(req.url())
+    expect(url.searchParams.get('offset')).toBe('0')
+    expect(Number(url.searchParams.get('limit'))).toBeGreaterThan(0)
+  })
+})
+
+// ==========================================================================
+// 10. Settings menu visibility
+// ==========================================================================
+
+test.describe('Assets sidebar - settings menu', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
+    await comfyPage.assets.mockInputFiles([])
+    await comfyPage.setup()
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
+  test('Settings menu shows view mode options', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+
+    await tab.openSettingsMenu()
+
+    await expect(tab.listViewOption).toBeVisible()
+    await expect(tab.gridViewOption).toBeVisible()
+  })
+})
+
+// ==========================================================================
+// 11. Delete confirmation
+// ==========================================================================
+
+test.describe('Assets sidebar - delete confirmation', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
+    await comfyPage.assets.mockDeleteHistory()
+    await comfyPage.assets.mockInputFiles([])
+    await comfyPage.setup()
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
+  test('Right-click delete shows confirmation dialog', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    await tab.assetCards.first().click({ button: 'right' })
+    await tab.contextMenuItem('Delete').click()
+
+    const dialog = comfyPage.confirmDialog.root
+    await expect(dialog).toBeVisible()
+    await expect(dialog.getByText('Delete this asset?')).toBeVisible()
+    await expect(
+      dialog.getByText('This asset will be permanently removed.')
+    ).toBeVisible()
+  })
+
+  test('Confirming delete removes asset and shows success toast', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    const initialCount = await tab.assetCards.count()
+
+    await tab.assetCards.first().click({ button: 'right' })
+    await tab.contextMenuItem('Delete').click()
+
+    const dialog = comfyPage.confirmDialog.root
+    await expect(dialog).toBeVisible()
+
+    await comfyPage.confirmDialog.delete.click()
+
+    await expect(dialog).toBeHidden()
+    await expect(tab.assetCards).toHaveCount(initialCount - 1)
+
+    const successToast = comfyPage.page.locator('.p-toast-message-success')
+    await expect(successToast).toBeVisible()
+  })
+
+  test('Cancelling delete preserves asset', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    const initialCount = await tab.assetCards.count()
+
+    await tab.assetCards.first().click({ button: 'right' })
+    await tab.contextMenuItem('Delete').click()
+
+    const dialog = comfyPage.confirmDialog.root
+    await expect(dialog).toBeVisible()
+
+    await comfyPage.confirmDialog.reject.click()
+
+    await expect(dialog).toBeHidden()
+    await expect(tab.assetCards).toHaveCount(initialCount)
+  })
 })
diff --git a/browser_tests/tests/sidebar/modelLibrary.spec.ts b/browser_tests/tests/sidebar/modelLibrary.spec.ts
new file mode 100644
index 0000000000..b49adc7cd5
--- /dev/null
+++ b/browser_tests/tests/sidebar/modelLibrary.spec.ts
@@ -0,0 +1,236 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+
+const MOCK_FOLDERS: Record<string, string[]> = {
+  checkpoints: [
+    'sd_xl_base_1.0.safetensors',
+    'dreamshaper_8.safetensors',
+    'realisticVision_v51.safetensors'
+  ],
+  loras: ['detail_tweaker_xl.safetensors', 'add_brightness.safetensors'],
+  vae: ['sdxl_vae.safetensors']
+}
+
+// ==========================================================================
+// 1. Tab open/close
+// ==========================================================================
+
+test.describe('Model library sidebar - tab', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.modelLibrary.mockFoldersWithFiles(MOCK_FOLDERS)
+    await comfyPage.setup()
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.modelLibrary.clearMocks()
+  })
+
+  test('Opens model library tab and shows tree', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.modelLibraryTab
+    await tab.open()
+
+    await expect(tab.modelTree).toBeVisible()
+    await expect(tab.searchInput).toBeVisible()
+  })
+
+  test('Shows refresh and load all folders buttons', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.modelLibraryTab
+    await tab.open()
+
+    await expect(tab.refreshButton).toBeVisible()
+    await expect(tab.loadAllFoldersButton).toBeVisible()
+  })
+})
+
+// ==========================================================================
+// 2. Folder display
+// ==========================================================================
+
+test.describe('Model library sidebar - folders', () => {
+  // Mocks are set up before setup(), so app.ts's loadModelFolders()
+  // call during initialization hits the mock and populates the store.
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.modelLibrary.mockFoldersWithFiles(MOCK_FOLDERS)
+    await comfyPage.setup()
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.modelLibrary.clearMocks()
+  })
+
+  test('Displays model folders after opening tab', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.modelLibraryTab
+    await tab.open()
+
+    await expect(tab.getFolderByLabel('checkpoints')).toBeVisible()
+    await expect(tab.getFolderByLabel('loras')).toBeVisible()
+    await expect(tab.getFolderByLabel('vae')).toBeVisible()
+  })
+
+  test('Expanding a folder loads and shows models', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.modelLibraryTab
+    await tab.open()
+
+    // Click the folder to expand it
+    await tab.getFolderByLabel('checkpoints').click()
+
+    // Models should appear as leaf nodes
+    await expect(tab.getLeafByLabel('sd_xl_base_1.0')).toBeVisible()
+    await expect(tab.getLeafByLabel('dreamshaper_8')).toBeVisible()
+    await expect(tab.getLeafByLabel('realisticVision_v51')).toBeVisible()
+  })
+
+  test('Expanding a different folder shows its models', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.modelLibraryTab
+    await tab.open()
+
+    await tab.getFolderByLabel('loras').click()
+
+    await expect(tab.getLeafByLabel('detail_tweaker_xl')).toBeVisible()
+    await expect(tab.getLeafByLabel('add_brightness')).toBeVisible()
+  })
+})
+
+// ==========================================================================
+// 3. Search
+// ==========================================================================
+
+test.describe('Model library sidebar - search', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.modelLibrary.mockFoldersWithFiles(MOCK_FOLDERS)
+    await comfyPage.setup()
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.modelLibrary.clearMocks()
+  })
+
+  test('Search filters models by filename', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.modelLibraryTab
+    await tab.open()
+
+    await tab.searchInput.fill('dreamshaper')
+
+    // Wait for debounce (300ms) + load + render
+    await expect(tab.getLeafByLabel('dreamshaper_8')).toBeVisible()
+
+    // Other models should not be visible
+    await expect(tab.getLeafByLabel('sd_xl_base_1.0')).toBeHidden()
+  })
+
+  test('Clearing search restores folder view', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.modelLibraryTab
+    await tab.open()
+
+    await tab.searchInput.fill('dreamshaper')
+    await expect(tab.getLeafByLabel('dreamshaper_8')).toBeVisible()
+
+    // Clear the search
+    await tab.searchInput.fill('')
+
+    // Folders should be visible again (collapsed)
+    await expect(tab.getFolderByLabel('checkpoints')).toBeVisible()
+    await expect(tab.getFolderByLabel('loras')).toBeVisible()
+  })
+
+  test('Search with no matches shows empty tree', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.modelLibraryTab
+    await tab.open()
+
+    // Expand a folder and verify models are present before searching
+    await tab.getFolderByLabel('checkpoints').click()
+    await expect(tab.leafNodes).not.toHaveCount(0)
+
+    await tab.searchInput.fill('nonexistent_model_xyz')
+
+    // Wait for debounce, then verify no leaf nodes
+    await expect.poll(() => tab.leafNodes.count()).toBe(0)
+  })
+})
+
+// ==========================================================================
+// 4. Refresh and load all
+// ==========================================================================
+
+test.describe('Model library sidebar - refresh', () => {
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.modelLibrary.clearMocks()
+  })
+
+  test('Refresh button reloads folder list', async ({ comfyPage }) => {
+    await comfyPage.modelLibrary.mockFoldersWithFiles({
+      checkpoints: ['model_a.safetensors']
+    })
+    await comfyPage.setup()
+
+    const tab = comfyPage.menu.modelLibraryTab
+    await tab.open()
+
+    await expect(tab.getFolderByLabel('checkpoints')).toBeVisible()
+
+    // Update mock to include a new folder
+    await comfyPage.modelLibrary.clearMocks()
+    await comfyPage.modelLibrary.mockFoldersWithFiles({
+      checkpoints: ['model_a.safetensors'],
+      loras: ['lora_b.safetensors']
+    })
+
+    // Wait for the refresh request to complete
+    const refreshRequest = comfyPage.page.waitForRequest(
+      (req) => req.url().endsWith('/experiment/models'),
+      { timeout: 5000 }
+    )
+    await tab.refreshButton.click()
+    await refreshRequest
+
+    await expect(tab.getFolderByLabel('loras')).toBeVisible()
+  })
+
+  test('Load all folders button triggers loading all model data', async ({
+    comfyPage
+  }) => {
+    await comfyPage.modelLibrary.mockFoldersWithFiles(MOCK_FOLDERS)
+    await comfyPage.setup()
+
+    const tab = comfyPage.menu.modelLibraryTab
+    await tab.open()
+
+    // Wait for a per-folder model files request triggered by load all
+    const folderRequest = comfyPage.page.waitForRequest(
+      (req) =>
+        /\/api\/experiment\/models\/[^/]+$/.test(req.url()) &&
+        req.method() === 'GET',
+      { timeout: 5000 }
+    )
+
+    await tab.loadAllFoldersButton.click()
+    await folderRequest
+  })
+})
+
+// ==========================================================================
+// 5. Empty state
+// ==========================================================================
+
+test.describe('Model library sidebar - empty state', () => {
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.modelLibrary.clearMocks()
+  })
+
+  test('Shows empty tree when no model folders exist', async ({
+    comfyPage
+  }) => {
+    await comfyPage.modelLibrary.mockFoldersWithFiles({})
+    await comfyPage.setup()
+
+    const tab = comfyPage.menu.modelLibraryTab
+    await tab.open()
+
+    await expect(tab.modelTree).toBeVisible()
+    await expect(tab.folderNodes).toHaveCount(0)
+    await expect(tab.leafNodes).toHaveCount(0)
+  })
+})
diff --git a/browser_tests/tests/sidebar/nodeLibrary.spec.ts b/browser_tests/tests/sidebar/nodeLibrary.spec.ts
index c6304fe983..231e3a725f 100644
--- a/browser_tests/tests/sidebar/nodeLibrary.spec.ts
+++ b/browser_tests/tests/sidebar/nodeLibrary.spec.ts
@@ -1,16 +1,51 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+
+const bookmarksSettingId = 'Comfy.NodeLibrary.Bookmarks.V2'
+const bookmarksCustomizationSettingId =
+  'Comfy.NodeLibrary.BookmarksCustomization'
+
+type BookmarkCustomizationMap = Record<
+  string,
+  {
+    icon?: string
+    color?: string
+  }
+>
+
+async function expectBookmarks(comfyPage: ComfyPage, bookmarks: string[]) {
+  await expect
+    .poll(() => comfyPage.settings.getSetting<string[]>(bookmarksSettingId))
+    .toEqual(bookmarks)
+}
+
+async function expectBookmarkCustomization(
+  comfyPage: ComfyPage,
+  customization: BookmarkCustomizationMap
+) {
+  await expect
+    .poll(() =>
+      comfyPage.settings.getSetting<BookmarkCustomizationMap>(
+        bookmarksCustomizationSettingId
+      )
+    )
+    .toEqual(customization)
+}
+
+async function renameInlineFolder(comfyPage: ComfyPage, newName: string) {
+  const renameInput = comfyPage.page.locator('.editable-text input')
+  await expect(renameInput).toBeVisible()
+  await renameInput.fill(newName)
+  await renameInput.press('Enter')
+}
 
 test.describe('Node library sidebar', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
-    await comfyPage.settings.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [])
-    await comfyPage.settings.setSetting(
-      'Comfy.NodeLibrary.BookmarksCustomization',
-      {}
-    )
+    await comfyPage.settings.setSetting(bookmarksSettingId, [])
+    await comfyPage.settings.setSetting(bookmarksCustomizationSettingId, {})
     // Open the sidebar
     const tab = comfyPage.menu.nodeLibraryTab
     await tab.open()
@@ -21,14 +56,11 @@ test.describe('Node library sidebar', () => {
     await tab.getFolder('sampling').click()
 
     // Hover over a node to display the preview
-    const nodeSelector = '.p-tree-node-leaf'
-    await comfyPage.page.hover(nodeSelector)
+    const nodeSelector = tab.nodeSelector('KSampler (Advanced)')
+    await comfyPage.page.locator(nodeSelector).hover()
 
     // Verify the preview is displayed
-    const previewVisible = await comfyPage.page.isVisible(
-      '.node-lib-node-preview'
-    )
-    expect(previewVisible).toBe(true)
+    await expect(tab.nodePreview).toBeVisible()
 
     const count = await comfyPage.nodeOps.getGraphNodesCount()
     // Drag the node onto the canvas
@@ -45,12 +77,15 @@ test.describe('Node library sidebar', () => {
       y: canvasBoundingBox.y + canvasBoundingBox.height / 2
     }
 
-    await comfyPage.page.dragAndDrop(nodeSelector, canvasSelector, {
-      targetPosition
-    })
+    await comfyPage.page
+      .locator(nodeSelector)
+      .dragTo(comfyPage.page.locator(canvasSelector), { targetPosition })
+    await comfyPage.nextFrame()
 
     // Verify the node is added to the canvas
-    expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(count + 1)
+    await expect
+      .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+      .toBe(count + 1)
   })
 
   test('Bookmark node', async ({ comfyPage }) => {
@@ -61,33 +96,31 @@ test.describe('Node library sidebar', () => {
     await tab.getNode('KSampler (Advanced)').locator('.bookmark-button').click()
 
     // Verify the bookmark is added to the bookmarks tab
-    expect(
-      await comfyPage.settings.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
-    ).toEqual(['KSamplerAdvanced'])
+    await expectBookmarks(comfyPage, ['KSamplerAdvanced'])
     // Verify the bookmark node with the same name is added to the tree.
-    expect(await tab.getNode('KSampler (Advanced)').count()).toBe(2)
+    await expect(tab.getNode('KSampler (Advanced)')).toHaveCount(2)
 
     // Hover on the bookmark node to display the preview
-    await comfyPage.page.hover('.node-lib-bookmark-tree-explorer .tree-leaf')
-    expect(await comfyPage.page.isVisible('.node-lib-node-preview')).toBe(true)
+    await comfyPage.page
+      .locator('.node-lib-bookmark-tree-explorer .tree-leaf')
+      .hover()
+    await expect(tab.nodePreview).toBeVisible()
   })
 
   test('Ignores unrecognized node', async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [
-      'foo'
-    ])
+    await comfyPage.settings.setSetting(bookmarksSettingId, ['foo'])
+    await expectBookmarks(comfyPage, ['foo'])
+    await comfyPage.nextFrame()
 
     const tab = comfyPage.menu.nodeLibraryTab
-    expect(await tab.getFolder('sampling').count()).toBe(1)
-    expect(await tab.getNode('foo').count()).toBe(0)
+    await expect(tab.getFolder('sampling')).toHaveCount(1)
+    await expect(tab.getNode('foo')).toHaveCount(0)
   })
 
   test('Displays empty bookmarks folder', async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [
-      'foo/'
-    ])
+    await comfyPage.settings.setSetting(bookmarksSettingId, ['foo/'])
     const tab = comfyPage.menu.nodeLibraryTab
-    expect(await tab.getFolder('foo').count()).toBe(1)
+    await expect(tab.getFolder('foo')).toHaveCount(1)
   })
 
   test('Can add new bookmark folder', async ({ comfyPage }) => {
@@ -97,17 +130,14 @@ test.describe('Node library sidebar', () => {
     await textInput.waitFor({ state: 'visible' })
     await textInput.fill('New Folder')
     await textInput.press('Enter')
-    expect(await tab.getFolder('New Folder').count()).toBe(1)
-    expect(
-      await comfyPage.settings.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
-    ).toEqual(['New Folder/'])
+    await expect(tab.getFolder('New Folder')).toHaveCount(1)
+    await expectBookmarks(comfyPage, ['New Folder/'])
   })
 
   test('Can add nested bookmark folder', async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [
-      'foo/'
-    ])
+    await comfyPage.settings.setSetting(bookmarksSettingId, ['foo/'])
     const tab = comfyPage.menu.nodeLibraryTab
+    await expect(tab.getFolder('foo')).toBeVisible()
 
     await tab.getFolder('foo').click({ button: 'right' })
     await comfyPage.page.getByRole('menuitem', { name: 'New Folder' }).click()
@@ -116,59 +146,47 @@ test.describe('Node library sidebar', () => {
     await textInput.fill('bar')
     await textInput.press('Enter')
 
-    expect(await tab.getFolder('bar').count()).toBe(1)
-    expect(
-      await comfyPage.settings.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
-    ).toEqual(['foo/', 'foo/bar/'])
+    await expect(tab.getFolder('bar')).toHaveCount(1)
+    await expectBookmarks(comfyPage, ['foo/', 'foo/bar/'])
   })
 
   test('Can delete bookmark folder', async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [
-      'foo/'
-    ])
+    await comfyPage.settings.setSetting(bookmarksSettingId, ['foo/'])
     const tab = comfyPage.menu.nodeLibraryTab
+    await expect(tab.getFolder('foo')).toBeVisible()
 
     await tab.getFolder('foo').click({ button: 'right' })
     await comfyPage.page.getByLabel('Delete').click()
 
-    expect(
-      await comfyPage.settings.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
-    ).toEqual([])
+    await expectBookmarks(comfyPage, [])
   })
 
   test('Can rename bookmark folder', async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [
-      'foo/'
-    ])
+    await comfyPage.settings.setSetting(bookmarksSettingId, ['foo/'])
     const tab = comfyPage.menu.nodeLibraryTab
+    await expect(tab.getFolder('foo')).toBeVisible()
 
     await tab.getFolder('foo').click({ button: 'right' })
     await comfyPage.page
       .locator('.p-contextmenu-item-label:has-text("Rename")')
       .click()
-    await comfyPage.page.keyboard.insertText('bar')
-    await comfyPage.page.keyboard.press('Enter')
+    await renameInlineFolder(comfyPage, 'bar')
 
-    expect(
-      await comfyPage.settings.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
-    ).toEqual(['bar/'])
+    await expectBookmarks(comfyPage, ['bar/'])
   })
 
   test('Can add bookmark by dragging node to bookmark folder', async ({
     comfyPage
   }) => {
-    await comfyPage.settings.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [
-      'foo/'
-    ])
+    await comfyPage.settings.setSetting(bookmarksSettingId, ['foo/'])
     const tab = comfyPage.menu.nodeLibraryTab
+    await expect(tab.getFolder('foo')).toBeVisible()
     await tab.getFolder('sampling').click()
     await comfyPage.page.dragAndDrop(
       tab.nodeSelector('KSampler (Advanced)'),
       tab.folderSelector('foo')
     )
-    expect(
-      await comfyPage.settings.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
-    ).toEqual(['foo/', 'foo/KSamplerAdvanced'])
+    await expectBookmarks(comfyPage, ['foo/', 'foo/KSamplerAdvanced'])
   })
 
   test('Can add bookmark by clicking bookmark button', async ({
@@ -177,41 +195,37 @@ test.describe('Node library sidebar', () => {
     const tab = comfyPage.menu.nodeLibraryTab
     await tab.getFolder('sampling').click()
     await tab.getNode('KSampler (Advanced)').locator('.bookmark-button').click()
-    expect(
-      await comfyPage.settings.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
-    ).toEqual(['KSamplerAdvanced'])
+    await expectBookmarks(comfyPage, ['KSamplerAdvanced'])
   })
 
   test('Can unbookmark node (Top level bookmark)', async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [
+    await comfyPage.settings.setSetting(bookmarksSettingId, [
       'KSamplerAdvanced'
     ])
     const tab = comfyPage.menu.nodeLibraryTab
+    await expect(tab.getNode('KSampler (Advanced)')).toHaveCount(1)
     await tab.getNode('KSampler (Advanced)').locator('.bookmark-button').click()
-    expect(
-      await comfyPage.settings.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
-    ).toEqual([])
+    await expectBookmarks(comfyPage, [])
   })
 
   test('Can unbookmark node (Library node bookmark)', async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [
+    await comfyPage.settings.setSetting(bookmarksSettingId, [
       'KSamplerAdvanced'
     ])
     const tab = comfyPage.menu.nodeLibraryTab
     await tab.getFolder('sampling').click()
+    await expect(tab.getNode('KSampler (Advanced)')).toHaveCount(2)
     await tab
       .getNodeInFolder('KSampler (Advanced)', 'sampling')
       .locator('.bookmark-button')
       .click()
-    expect(
-      await comfyPage.settings.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
-    ).toEqual([])
+    await expectBookmarks(comfyPage, [])
   })
+
   test('Can customize icon', async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [
-      'foo/'
-    ])
+    await comfyPage.settings.setSetting(bookmarksSettingId, ['foo/'])
     const tab = comfyPage.menu.nodeLibraryTab
+    await expect(tab.getFolder('foo')).toBeVisible()
     await tab.getFolder('foo').click({ button: 'right' })
     await comfyPage.page.getByLabel('Customize').click()
     const dialog = comfyPage.page.getByRole('dialog', {
@@ -228,23 +242,19 @@ test.describe('Node library sidebar', () => {
     await colorGroup.getByRole('button').nth(1).click()
     await dialog.getByRole('button', { name: 'Confirm' }).click()
     await comfyPage.nextFrame()
-    expect(
-      await comfyPage.settings.getSetting(
-        'Comfy.NodeLibrary.BookmarksCustomization'
-      )
-    ).toEqual({
+    await expectBookmarkCustomization(comfyPage, {
       'foo/': {
         icon: 'pi-folder',
         color: '#007bff'
       }
     })
   })
+
   // If color is left as default, it should not be saved
   test('Can customize icon (default field)', async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [
-      'foo/'
-    ])
+    await comfyPage.settings.setSetting(bookmarksSettingId, ['foo/'])
     const tab = comfyPage.menu.nodeLibraryTab
+    await expect(tab.getFolder('foo')).toBeVisible()
     await tab.getFolder('foo').click({ button: 'right' })
     await comfyPage.page.getByLabel('Customize').click()
     const dialog = comfyPage.page.getByRole('dialog', {
@@ -255,11 +265,7 @@ test.describe('Node library sidebar', () => {
     await iconGroup.getByRole('button').nth(1).click()
     await dialog.getByRole('button', { name: 'Confirm' }).click()
     await comfyPage.nextFrame()
-    expect(
-      await comfyPage.settings.getSetting(
-        'Comfy.NodeLibrary.BookmarksCustomization'
-      )
-    ).toEqual({
+    await expectBookmarkCustomization(comfyPage, {
       'foo/': {
         icon: 'pi-folder'
       }
@@ -270,10 +276,9 @@ test.describe('Node library sidebar', () => {
     comfyPage
   }) => {
     // Open customization dialog
-    await comfyPage.settings.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [
-      'foo/'
-    ])
+    await comfyPage.settings.setSetting(bookmarksSettingId, ['foo/'])
     const tab = comfyPage.menu.nodeLibraryTab
+    await expect(tab.getFolder('foo')).toBeVisible()
     await tab.getFolder('foo').click({ button: 'right' })
     await comfyPage.page.getByLabel('Customize').click()
 
@@ -302,84 +307,76 @@ test.describe('Node library sidebar', () => {
     await comfyPage.nextFrame()
 
     // Verify the color selection is saved
-    const setting = await comfyPage.settings.getSetting<
-      Record<string, { icon?: string; color?: string }>
-    >('Comfy.NodeLibrary.BookmarksCustomization')
-    await expect(setting).toHaveProperty(['foo/', 'color'])
-    await expect(setting['foo/'].color).not.toBeNull()
-    await expect(setting['foo/'].color).not.toBeUndefined()
-    await expect(setting['foo/'].color).not.toBe('')
+    await expect
+      .poll(async () => {
+        return (
+          (
+            await comfyPage.settings.getSetting<BookmarkCustomizationMap>(
+              bookmarksCustomizationSettingId
+            )
+          )['foo/']?.color ?? ''
+        )
+      })
+      .toMatch(/^#.+/)
   })
 
   test('Can rename customized bookmark folder', async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [
-      'foo/'
-    ])
-    await comfyPage.settings.setSetting(
-      'Comfy.NodeLibrary.BookmarksCustomization',
-      {
-        'foo/': {
-          icon: 'pi-folder',
-          color: '#007bff'
-        }
+    await comfyPage.settings.setSetting(bookmarksSettingId, ['foo/'])
+    await comfyPage.settings.setSetting(bookmarksCustomizationSettingId, {
+      'foo/': {
+        icon: 'pi-folder',
+        color: '#007bff'
       }
-    )
+    })
     const tab = comfyPage.menu.nodeLibraryTab
+    await expect(tab.getFolder('foo')).toBeVisible()
     await tab.getFolder('foo').click({ button: 'right' })
     await comfyPage.page
       .locator('.p-contextmenu-item-label:has-text("Rename")')
       .click()
-    await comfyPage.page.keyboard.insertText('bar')
-    await comfyPage.page.keyboard.press('Enter')
+    await renameInlineFolder(comfyPage, 'bar')
     await comfyPage.nextFrame()
-    await expect(async () => {
-      expect(
-        await comfyPage.settings.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
-      ).toEqual(['bar/'])
-      expect(
-        await comfyPage.settings.getSetting(
-          'Comfy.NodeLibrary.BookmarksCustomization'
-        )
-      ).toEqual({
-        'bar/': {
-          icon: 'pi-folder',
-          color: '#007bff'
+    await expect
+      .poll(async () => {
+        return {
+          bookmarks:
+            await comfyPage.settings.getSetting<string[]>(bookmarksSettingId),
+          customization:
+            await comfyPage.settings.getSetting<BookmarkCustomizationMap>(
+              bookmarksCustomizationSettingId
+            )
+        }
+      })
+      .toEqual({
+        bookmarks: ['bar/'],
+        customization: {
+          'bar/': {
+            icon: 'pi-folder',
+            color: '#007bff'
+          }
         }
       })
-    }).toPass({
-      timeout: 2_000
-    })
   })
 
   test('Can delete customized bookmark folder', async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [
-      'foo/'
-    ])
-    await comfyPage.settings.setSetting(
-      'Comfy.NodeLibrary.BookmarksCustomization',
-      {
-        'foo/': {
-          icon: 'pi-folder',
-          color: '#007bff'
-        }
+    await comfyPage.settings.setSetting(bookmarksSettingId, ['foo/'])
+    await comfyPage.settings.setSetting(bookmarksCustomizationSettingId, {
+      'foo/': {
+        icon: 'pi-folder',
+        color: '#007bff'
       }
-    )
+    })
     const tab = comfyPage.menu.nodeLibraryTab
+    await expect(tab.getFolder('foo')).toBeVisible()
     await tab.getFolder('foo').click({ button: 'right' })
     await comfyPage.page.getByLabel('Delete').click()
     await comfyPage.nextFrame()
-    expect(
-      await comfyPage.settings.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
-    ).toEqual([])
-    expect(
-      await comfyPage.settings.getSetting(
-        'Comfy.NodeLibrary.BookmarksCustomization'
-      )
-    ).toEqual({})
+    await expectBookmarks(comfyPage, [])
+    await expectBookmarkCustomization(comfyPage, {})
   })
 
   test('Can filter nodes in both trees', async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [
+    await comfyPage.settings.setSetting(bookmarksSettingId, [
       'foo/',
       'foo/KSamplerAdvanced',
       'KSampler'
diff --git a/browser_tests/tests/sidebar/nodeLibraryV2.spec.ts b/browser_tests/tests/sidebar/nodeLibraryV2.spec.ts
new file mode 100644
index 0000000000..636d93dab0
--- /dev/null
+++ b/browser_tests/tests/sidebar/nodeLibraryV2.spec.ts
@@ -0,0 +1,123 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+
+test.describe('Node library sidebar V2', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', true)
+
+    const tab = comfyPage.menu.nodeLibraryTabV2
+    await tab.open()
+  })
+
+  test('Can switch between tabs', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.nodeLibraryTabV2
+
+    await expect(tab.allTab).toHaveAttribute('aria-selected', 'true')
+
+    await tab.blueprintsTab.click()
+    await expect(tab.blueprintsTab).toHaveAttribute('aria-selected', 'true')
+    await expect(tab.allTab).toHaveAttribute('aria-selected', 'false')
+
+    await tab.allTab.click()
+    await expect(tab.allTab).toHaveAttribute('aria-selected', 'true')
+    await expect(tab.blueprintsTab).toHaveAttribute('aria-selected', 'false')
+  })
+
+  test('All tab displays node tree with folders', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.nodeLibraryTabV2
+
+    await expect(tab.allTab).toHaveAttribute('aria-selected', 'true')
+    await expect(tab.getFolder('sampling')).toBeVisible()
+  })
+
+  test('Can expand folder and see nodes in All tab', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.nodeLibraryTabV2
+
+    await tab.expandFolder('sampling')
+    await expect(tab.getNode('KSampler (Advanced)')).toBeVisible()
+  })
+
+  test('Search filters nodes in All tab', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.nodeLibraryTabV2
+
+    await expect(tab.getNode('KSampler (Advanced)')).toBeHidden()
+
+    await tab.searchInput.fill('KSampler')
+    await expect(tab.getNode('KSampler (Advanced)')).toBeVisible()
+    await expect(tab.getNode('CLIPLoader')).toBeHidden()
+  })
+
+  test('Drag node to canvas adds it', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.nodeLibraryTabV2
+
+    await tab.expandFolder('sampling')
+    await expect(tab.getNode('KSampler (Advanced)')).toBeVisible()
+
+    const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
+
+    await expect
+      .poll(
+        async () => await comfyPage.page.locator('#graph-canvas').boundingBox()
+      )
+      .toBeTruthy()
+    const canvasBoundingBox = (await comfyPage.page
+      .locator('#graph-canvas')
+      .boundingBox())!
+    const targetPosition = {
+      x: canvasBoundingBox.x + canvasBoundingBox.width / 2,
+      y: canvasBoundingBox.y + canvasBoundingBox.height / 2
+    }
+
+    const nodeLocator = tab.getNode('KSampler (Advanced)')
+    await nodeLocator.dragTo(comfyPage.page.locator('#graph-canvas'), {
+      targetPosition
+    })
+
+    await expect
+      .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+      .toBe(initialCount + 1)
+  })
+
+  test('Right-click node shows context menu with bookmark option', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.nodeLibraryTabV2
+
+    await tab.expandFolder('sampling')
+    const node = tab.getNode('KSampler (Advanced)')
+    await expect(node).toBeVisible()
+
+    await node.click({ button: 'right' })
+
+    const contextMenu = comfyPage.page.getByRole('menuitem', {
+      name: /Bookmark Node/
+    })
+    await expect(contextMenu).toBeVisible()
+  })
+
+  test('Search clear restores folder view', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.nodeLibraryTabV2
+
+    await expect(tab.getFolder('sampling')).toBeVisible()
+
+    await tab.searchInput.fill('KSampler')
+    await expect(tab.getNode('KSampler (Advanced)')).toBeVisible()
+
+    await tab.searchInput.clear()
+    await tab.searchInput.press('Enter')
+
+    await expect(tab.getFolder('sampling')).toBeVisible()
+  })
+
+  test('Sort dropdown shows sorting options', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.nodeLibraryTabV2
+
+    await tab.sortButton.click()
+
+    // Reka UI DropdownMenuRadioItem renders with role="menuitemradio"
+    const options = comfyPage.page.getByRole('menuitemradio')
+    await expect(options.first()).toBeVisible()
+    await expect.poll(() => options.count()).toBeGreaterThanOrEqual(2)
+  })
+})
diff --git a/browser_tests/tests/sidebar/sidebarSplitterWidth.spec.ts b/browser_tests/tests/sidebar/sidebarSplitterWidth.spec.ts
index 1617187d8c..6e955335e9 100644
--- a/browser_tests/tests/sidebar/sidebarSplitterWidth.spec.ts
+++ b/browser_tests/tests/sidebar/sidebarSplitterWidth.spec.ts
@@ -1,11 +1,10 @@
 import { expect } from '@playwright/test'
 
-import type { ComfyPage } from '../../fixtures/ComfyPage'
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.describe('Sidebar splitter width independence', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting('Comfy.Sidebar.UnifiedWidth', true)
     await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
   })
@@ -24,10 +23,10 @@ test.describe('Sidebar splitter width independence', () => {
       .locator('.p-splitter-gutter:not(.hidden)')
       .first()
     await expect(gutter).toBeVisible()
-    const box = await gutter.boundingBox()
-    expect(box).not.toBeNull()
-    const centerX = box!.x + box!.width / 2
-    const centerY = box!.y + box!.height / 2
+    await expect.poll(() => gutter.boundingBox()).not.toBeNull()
+    const box = (await gutter.boundingBox())!
+    const centerX = box.x + box.width / 2
+    const centerY = box.y + box.height / 2
     await comfyPage.page.mouse.move(centerX, centerY)
     await comfyPage.page.mouse.down()
     await comfyPage.page.mouse.move(centerX + deltaX, centerY, { steps: 10 })
@@ -40,7 +39,6 @@ test.describe('Sidebar splitter width independence', () => {
     location: 'left' | 'right'
   ) {
     await comfyPage.settings.setSetting('Comfy.Sidebar.Location', location)
-    await comfyPage.nextFrame()
     await dismissToasts(comfyPage)
     await comfyPage.menu.nodeLibraryTab.open()
   }
@@ -63,12 +61,16 @@ test.describe('Sidebar splitter width independence', () => {
     // Right sidebar should use its default width, not the left's resized width
     const rightSidebar = comfyPage.page.locator('.side-bar-panel').first()
     await expect(rightSidebar).toBeVisible()
-    const rightWidth = (await rightSidebar.boundingBox())!.width
 
     // The right sidebar should NOT match the left's resized width.
     // We dragged the left sidebar 100px wider, so there should be a noticeable
     // difference between the left (resized) and right (default) widths.
-    expect(Math.abs(rightWidth - leftWidth)).toBeGreaterThan(50)
+    await expect
+      .poll(async () => {
+        const b = await rightSidebar.boundingBox()
+        return b ? Math.abs(b.width - leftWidth) : -1
+      })
+      .toBeGreaterThan(50)
   })
 
   test('localStorage keys include sidebar location', async ({ comfyPage }) => {
@@ -77,10 +79,11 @@ test.describe('Sidebar splitter width independence', () => {
     await dragGutter(comfyPage, 50)
 
     // Left-only sidebar should use the legacy key (no location suffix)
-    const leftKey = await comfyPage.page.evaluate(() =>
-      localStorage.getItem('unified-sidebar')
-    )
-    expect(leftKey).not.toBeNull()
+    await expect
+      .poll(() =>
+        comfyPage.page.evaluate(() => localStorage.getItem('unified-sidebar'))
+      )
+      .not.toBeNull()
 
     // Switch to right and resize
     await comfyPage.menu.nodeLibraryTab.close()
@@ -88,16 +91,20 @@ test.describe('Sidebar splitter width independence', () => {
     await dragGutter(comfyPage, -50)
 
     // Right sidebar should use a different key with location suffix
-    const rightKey = await comfyPage.page.evaluate(() =>
-      localStorage.getItem('unified-sidebar-right')
-    )
-    expect(rightKey).not.toBeNull()
+    await expect
+      .poll(() =>
+        comfyPage.page.evaluate(() =>
+          localStorage.getItem('unified-sidebar-right')
+        )
+      )
+      .not.toBeNull()
 
     // Both keys should exist independently
-    const leftKeyStillExists = await comfyPage.page.evaluate(() =>
-      localStorage.getItem('unified-sidebar')
-    )
-    expect(leftKeyStillExists).not.toBeNull()
+    await expect
+      .poll(() =>
+        comfyPage.page.evaluate(() => localStorage.getItem('unified-sidebar'))
+      )
+      .not.toBeNull()
   })
 
   test('normalized panel sizes sum to approximately 100%', async ({
@@ -107,16 +114,33 @@ test.describe('Sidebar splitter width independence', () => {
     await dragGutter(comfyPage, 80)
 
     // Check that saved sizes sum to ~100%
-    const sizes = await comfyPage.page.evaluate(() => {
-      const raw = localStorage.getItem('unified-sidebar')
-      return raw ? JSON.parse(raw) : null
-    })
+    const getSidebarSizes = () =>
+      comfyPage.page.evaluate(() => {
+        const raw = localStorage.getItem('unified-sidebar')
+        return raw ? (JSON.parse(raw) as number[]) : null
+      })
 
-    expect(sizes).not.toBeNull()
-    expect(Array.isArray(sizes)).toBe(true)
+    await expect
+      .poll(async () => {
+        const sizes = await getSidebarSizes()
+        return Array.isArray(sizes)
+      })
+      .toBe(true)
 
-    const sum = (sizes as number[]).reduce((a, b) => a + b, 0)
-    expect(sum).toBeGreaterThan(99)
-    expect(sum).toBeLessThanOrEqual(101)
+    await expect
+      .poll(async () => {
+        const sizes = await getSidebarSizes()
+        if (!sizes) return 0
+        return sizes.reduce((a, b) => a + b, 0)
+      })
+      .toBeGreaterThan(99)
+
+    await expect
+      .poll(async () => {
+        const sizes = await getSidebarSizes()
+        if (!sizes) return Infinity
+        return sizes.reduce((a, b) => a + b, 0)
+      })
+      .toBeLessThanOrEqual(101)
   })
 })
diff --git a/browser_tests/tests/sidebar/workflowSearch.spec.ts b/browser_tests/tests/sidebar/workflowSearch.spec.ts
new file mode 100644
index 0000000000..c39c38703d
--- /dev/null
+++ b/browser_tests/tests/sidebar/workflowSearch.spec.ts
@@ -0,0 +1,57 @@
+import type { Page } from '@playwright/test'
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+
+/** Locate a workflow label in whatever panel is visible (browse or search). */
+function findWorkflow(page: Page, name: string) {
+  return page
+    .getByTestId(TestIds.sidebar.workflows)
+    .locator('.node-label', { hasText: name })
+}
+
+test.describe('Workflow sidebar - search', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.workflow.setupWorkflowsDirectory({
+      'alpha-workflow.json': 'default.json',
+      'beta-workflow.json': 'default.json'
+    })
+  })
+
+  test('Search filters saved workflows by name', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.workflowsTab
+    await tab.open()
+
+    const searchInput = comfyPage.page.getByPlaceholder('Search Workflow...')
+    await searchInput.fill('alpha')
+
+    await expect(findWorkflow(comfyPage.page, 'alpha-workflow')).toBeVisible()
+    await expect(findWorkflow(comfyPage.page, 'beta-workflow')).toBeHidden()
+  })
+
+  test('Clearing search restores all workflows', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.workflowsTab
+    await tab.open()
+
+    const searchInput = comfyPage.page.getByPlaceholder('Search Workflow...')
+    await searchInput.fill('alpha')
+    await expect(findWorkflow(comfyPage.page, 'beta-workflow')).toBeHidden()
+
+    await searchInput.fill('')
+
+    await expect(tab.getPersistedItem('alpha-workflow')).toBeVisible()
+    await expect(tab.getPersistedItem('beta-workflow')).toBeVisible()
+  })
+
+  test('Search with no matches shows empty results', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.workflowsTab
+    await tab.open()
+
+    const searchInput = comfyPage.page.getByPlaceholder('Search Workflow...')
+    await searchInput.fill('nonexistent_xyz')
+
+    await expect(findWorkflow(comfyPage.page, 'alpha-workflow')).toBeHidden()
+    await expect(findWorkflow(comfyPage.page, 'beta-workflow')).toBeHidden()
+  })
+})
diff --git a/browser_tests/tests/sidebar/workflows.spec.ts b/browser_tests/tests/sidebar/workflows.spec.ts
index 4af7b5dda2..120907bfb1 100644
--- a/browser_tests/tests/sidebar/workflows.spec.ts
+++ b/browser_tests/tests/sidebar/workflows.spec.ts
@@ -1,11 +1,11 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
-import { TestIds } from '../../fixtures/selectors'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+import { openErrorsTab } from '@e2e/tests/propertiesPanel/ErrorsTabHelper'
 
 test.describe('Workflows sidebar', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting(
       'Comfy.Workflow.WorkflowTabsPosition',
       'Sidebar'
@@ -22,13 +22,14 @@ test.describe('Workflows sidebar', () => {
 
   test('Can create new blank workflow', async ({ comfyPage }) => {
     const tab = comfyPage.menu.workflowsTab
-    expect(await tab.getOpenedWorkflowNames()).toEqual(['*Unsaved Workflow'])
+    await expect
+      .poll(() => tab.getOpenedWorkflowNames())
+      .toEqual(['*Unsaved Workflow'])
 
     await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
-    expect(await tab.getOpenedWorkflowNames()).toEqual([
-      '*Unsaved Workflow',
-      '*Unsaved Workflow (2)'
-    ])
+    await expect
+      .poll(() => tab.getOpenedWorkflowNames())
+      .toEqual(['*Unsaved Workflow', '*Unsaved Workflow (2)'])
   })
 
   test('Can show top level saved workflows', async ({ comfyPage }) => {
@@ -39,39 +40,38 @@ test.describe('Workflows sidebar', () => {
 
     const tab = comfyPage.menu.workflowsTab
     await tab.open()
-    expect(await tab.getTopLevelSavedWorkflowNames()).toEqual(
-      expect.arrayContaining(['workflow1', 'workflow2'])
-    )
+    await expect
+      .poll(() => tab.getTopLevelSavedWorkflowNames())
+      .toEqual(expect.arrayContaining(['workflow1', 'workflow2']))
   })
 
   test('Can duplicate workflow', async ({ comfyPage }) => {
     const tab = comfyPage.menu.workflowsTab
     await comfyPage.menu.topbar.saveWorkflow('workflow1')
 
-    expect(await tab.getTopLevelSavedWorkflowNames()).toEqual(
-      expect.arrayContaining(['workflow1'])
-    )
+    await expect
+      .poll(() => tab.getTopLevelSavedWorkflowNames())
+      .toEqual(expect.arrayContaining(['workflow1']))
 
     await comfyPage.command.executeCommand('Comfy.DuplicateWorkflow')
-    expect(await tab.getOpenedWorkflowNames()).toEqual([
-      'workflow1',
-      '*workflow1 (Copy)'
-    ])
+    await expect
+      .poll(() => tab.getOpenedWorkflowNames())
+      .toEqual(['workflow1', '*workflow1 (Copy)'])
 
     await comfyPage.command.executeCommand('Comfy.DuplicateWorkflow')
-    expect(await tab.getOpenedWorkflowNames()).toEqual([
-      'workflow1',
-      '*workflow1 (Copy)',
-      '*workflow1 (Copy) (2)'
-    ])
+    await expect
+      .poll(() => tab.getOpenedWorkflowNames())
+      .toEqual(['workflow1', '*workflow1 (Copy)', '*workflow1 (Copy) (2)'])
 
     await comfyPage.command.executeCommand('Comfy.DuplicateWorkflow')
-    expect(await tab.getOpenedWorkflowNames()).toEqual([
-      'workflow1',
-      '*workflow1 (Copy)',
-      '*workflow1 (Copy) (2)',
-      '*workflow1 (Copy) (3)'
-    ])
+    await expect
+      .poll(() => tab.getOpenedWorkflowNames())
+      .toEqual([
+        'workflow1',
+        '*workflow1 (Copy)',
+        '*workflow1 (Copy) (2)',
+        '*workflow1 (Copy) (3)'
+      ])
   })
 
   test('Can open workflow after insert', async ({ comfyPage }) => {
@@ -111,10 +111,9 @@ test.describe('Workflows sidebar', () => {
 
     const openedWorkflow = tab.getOpenedItem('foo/bar')
     await tab.renameWorkflow(openedWorkflow, 'foo/baz')
-    expect(await tab.getOpenedWorkflowNames()).toEqual([
-      '*Unsaved Workflow',
-      'foo/baz'
-    ])
+    await expect
+      .poll(() => tab.getOpenedWorkflowNames())
+      .toEqual(['*Unsaved Workflow', 'foo/baz'])
   })
 
   test('Can save workflow as', async ({ comfyPage }) => {
@@ -134,20 +133,28 @@ test.describe('Workflows sidebar', () => {
     comfyPage
   }) => {
     await comfyPage.workflow.loadWorkflow('default')
-    const exportedWorkflow = await comfyPage.workflow.getExportedWorkflow({
-      api: false
-    })
-    expect(exportedWorkflow).toBeDefined()
-    for (const node of exportedWorkflow.nodes) {
-      for (const slot of node.inputs ?? []) {
-        expect(slot.localized_name).toBeUndefined()
-        expect(slot.label).toBeUndefined()
-      }
-      for (const slot of node.outputs ?? []) {
-        expect(slot.localized_name).toBeUndefined()
-        expect(slot.label).toBeUndefined()
-      }
-    }
+    await expect
+      .poll(async () => {
+        const exportedWorkflow = await comfyPage.workflow.getExportedWorkflow({
+          api: false
+        })
+        for (const node of exportedWorkflow.nodes) {
+          for (const slot of node.inputs ?? []) {
+            if (slot.localized_name !== undefined)
+              return `input localized_name found: ${slot.localized_name}`
+            if (slot.label !== undefined)
+              return `input label found: ${slot.label}`
+          }
+          for (const slot of node.outputs ?? []) {
+            if (slot.localized_name !== undefined)
+              return `output localized_name found: ${slot.localized_name}`
+            if (slot.label !== undefined)
+              return `output label found: ${slot.label}`
+          }
+        }
+        return 'ok'
+      })
+      .toBe('ok')
   })
 
   test('Can export same workflow with different locales', async ({
@@ -164,6 +171,9 @@ test.describe('Workflows sidebar', () => {
     expect(download.suggestedFilename()).toBe('exported_default.json')
 
     // Get the exported workflow content
+    await expect
+      .poll(() => comfyPage.workflow.getExportedWorkflow({ api: false }))
+      .toBeDefined()
     const downloadedContent = await comfyPage.workflow.getExportedWorkflow({
       api: false
     })
@@ -171,42 +181,49 @@ test.describe('Workflows sidebar', () => {
     await comfyPage.settings.setSetting('Comfy.Locale', 'zh')
     await comfyPage.setup()
 
-    const downloadedContentZh = await comfyPage.workflow.getExportedWorkflow({
-      api: false
-    })
-
     // Compare the exported workflow with the original
     delete downloadedContent.id
-    delete downloadedContentZh.id
-    expect(downloadedContent).toBeDefined()
-    expect(downloadedContent).toEqual(downloadedContentZh)
+    await expect
+      .poll(async () => {
+        const downloadedContentZh =
+          await comfyPage.workflow.getExportedWorkflow({ api: false })
+        delete downloadedContentZh.id
+        return downloadedContentZh
+      })
+      .toEqual(downloadedContent)
   })
 
   test('Can save workflow as with same name', async ({ comfyPage }) => {
     await comfyPage.menu.topbar.saveWorkflow('workflow5')
-    expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
-      'workflow5'
-    ])
+    await expect
+      .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
+      .toEqual(['workflow5'])
 
     await comfyPage.menu.topbar.saveWorkflowAs('workflow5')
     await comfyPage.confirmDialog.click('overwrite')
-    expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
-      'workflow5'
-    ])
+    await expect
+      .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
+      .toEqual(['workflow5'])
   })
 
   test('Can save temporary workflow with unmodified name', async ({
     comfyPage
   }) => {
-    expect(await comfyPage.workflow.isCurrentWorkflowModified()).toBe(false)
+    await expect
+      .poll(() => comfyPage.workflow.isCurrentWorkflowModified())
+      .toBe(false)
 
     await comfyPage.menu.topbar.saveWorkflow('Unsaved Workflow')
     // Should not trigger the overwrite dialog
-    expect(
-      await comfyPage.page.locator('.comfy-modal-content:visible').count()
-    ).toBe(0)
+    await expect
+      .poll(() =>
+        comfyPage.page.locator('.comfy-modal-content:visible').count()
+      )
+      .toBe(0)
 
-    expect(await comfyPage.workflow.isCurrentWorkflowModified()).toBe(false)
+    await expect
+      .poll(() => comfyPage.workflow.isCurrentWorkflowModified())
+      .toBe(false)
   })
 
   test('Can overwrite other workflows with save as', async ({ comfyPage }) => {
@@ -232,7 +249,7 @@ test.describe('Workflows sidebar', () => {
       .toEqual('workflow1')
   })
 
-  test('Reports missing nodes warning again when switching back to workflow', async ({
+  test('Restores missing nodes errors silently when switching back to workflow', async ({
     comfyPage
   }) => {
     await comfyPage.settings.setSetting(
@@ -248,17 +265,23 @@ test.describe('Workflows sidebar', () => {
 
     // Dismiss the error overlay
     await errorOverlay.getByTestId(TestIds.dialogs.errorOverlayDismiss).click()
-    await expect(errorOverlay).not.toBeVisible()
+    await expect(errorOverlay).toBeHidden()
 
     // Load blank workflow
     await comfyPage.menu.workflowsTab.open()
     await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
 
-    // Switch back to the missing_nodes workflow — overlay should reappear
-    // so users can install missing node packs without a page reload
+    // Switch back to the missing_nodes workflow — overlay should NOT
+    // reappear (silent restore), but errors tab should have content
     await comfyPage.menu.workflowsTab.switchToWorkflow('missing_nodes')
 
-    await expect(errorOverlay).toBeVisible()
+    await expect(errorOverlay).toBeHidden()
+
+    // Errors tab should still show missing nodes after silent restore
+    await openErrorsTab(comfyPage)
+    await expect(
+      comfyPage.page.getByTestId(TestIds.dialogs.missingNodePacksGroup)
+    ).toBeVisible()
   })
 
   test('Can close saved-workflows from the open workflows section', async ({
@@ -271,16 +294,18 @@ test.describe('Workflows sidebar', () => {
       '.comfyui-workflows-open .close-workflow-button'
     )
     await closeButton.click()
-    expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
-      '*Unsaved Workflow'
-    ])
+    await expect
+      .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
+      .toEqual(['*Unsaved Workflow'])
   })
 
   test('Can close saved workflow with command', async ({ comfyPage }) => {
     const tab = comfyPage.menu.workflowsTab
     await comfyPage.menu.topbar.saveWorkflow('workflow1')
     await comfyPage.command.executeCommand('Workspace.CloseWorkflow')
-    expect(await tab.getOpenedWorkflowNames()).toEqual(['*Unsaved Workflow'])
+    await expect
+      .poll(() => tab.getOpenedWorkflowNames())
+      .toEqual(['*Unsaved Workflow'])
   })
 
   test('Can delete workflows (confirm disabled)', async ({ comfyPage }) => {
@@ -290,17 +315,17 @@ test.describe('Workflows sidebar', () => {
 
     const filename = 'workflow18'
     await topbar.saveWorkflow(filename)
-    expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([filename])
+    await expect
+      .poll(() => workflowsTab.getOpenedWorkflowNames())
+      .toEqual([filename])
 
     await workflowsTab.getOpenedItem(filename).click({ button: 'right' })
     await comfyPage.nextFrame()
     await comfyPage.contextMenu.clickMenuItem('Delete')
-    await comfyPage.nextFrame()
-
-    await expect(workflowsTab.getOpenedItem(filename)).not.toBeVisible()
-    expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([
-      '*Unsaved Workflow'
-    ])
+    await expect(workflowsTab.getOpenedItem(filename)).toBeHidden()
+    await expect
+      .poll(() => workflowsTab.getOpenedWorkflowNames())
+      .toEqual(['*Unsaved Workflow'])
   })
 
   test('Can delete workflows', async ({ comfyPage }) => {
@@ -308,7 +333,9 @@ test.describe('Workflows sidebar', () => {
 
     const filename = 'workflow18'
     await topbar.saveWorkflow(filename)
-    expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([filename])
+    await expect
+      .poll(() => workflowsTab.getOpenedWorkflowNames())
+      .toEqual([filename])
 
     await workflowsTab.getOpenedItem(filename).click({ button: 'right' })
     await comfyPage.contextMenu.clickMenuItem('Delete')
@@ -316,10 +343,10 @@ test.describe('Workflows sidebar', () => {
 
     await comfyPage.confirmDialog.click('delete')
 
-    await expect(workflowsTab.getOpenedItem(filename)).not.toBeVisible()
-    expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([
-      '*Unsaved Workflow'
-    ])
+    await expect(workflowsTab.getOpenedItem(filename)).toBeHidden()
+    await expect
+      .poll(() => workflowsTab.getOpenedWorkflowNames())
+      .toEqual(['*Unsaved Workflow'])
   })
 
   test('Can duplicate workflow from context menu', async ({ comfyPage }) => {
@@ -347,7 +374,7 @@ test.describe('Workflows sidebar', () => {
     // Wait for workflow to appear in Browse section after sync
     const workflowItem =
       comfyPage.menu.workflowsTab.getPersistedItem('workflow1')
-    await expect(workflowItem).toBeVisible({ timeout: 3000 })
+    await expect(workflowItem).toBeVisible()
 
     const nodeCount = await comfyPage.nodeOps.getGraphNodesCount()
 
@@ -370,7 +397,7 @@ test.describe('Workflows sidebar', () => {
 
     // Wait for nodes to be inserted after drag-drop with retryable assertion
     await expect
-      .poll(() => comfyPage.nodeOps.getGraphNodesCount(), { timeout: 3000 })
+      .poll(() => comfyPage.nodeOps.getGraphNodesCount())
       .toBe(nodeCount * 2)
   })
 })
diff --git a/browser_tests/tests/subgraph-duplicate-ids.spec.ts b/browser_tests/tests/subgraph-duplicate-ids.spec.ts
deleted file mode 100644
index 92f704bb6a..0000000000
--- a/browser_tests/tests/subgraph-duplicate-ids.spec.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-test.describe('Subgraph duplicate ID remapping', { tag: ['@subgraph'] }, () => {
-  const WORKFLOW = 'subgraphs/subgraph-nested-duplicate-ids'
-
-  test('All node IDs are globally unique after loading', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow(WORKFLOW)
-
-    const result = await comfyPage.page.evaluate(() => {
-      const graph = window.app!.canvas.graph!
-      // TODO: Extract allGraphs accessor (root + subgraphs) into LGraph
-      // TODO: Extract allNodeIds accessor into LGraph
-      const allGraphs = [graph, ...graph.subgraphs.values()]
-      const allIds = allGraphs
-        .flatMap((g) => g._nodes)
-        .map((n) => n.id)
-        .filter((id): id is number => typeof id === 'number')
-
-      return { allIds, uniqueCount: new Set(allIds).size }
-    })
-
-    expect(result.uniqueCount).toBe(result.allIds.length)
-    expect(result.allIds.length).toBeGreaterThanOrEqual(10)
-  })
-
-  test('Root graph node IDs are preserved as canonical', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow(WORKFLOW)
-
-    const rootIds = await comfyPage.page.evaluate(() => {
-      const graph = window.app!.canvas.graph!
-      return graph._nodes
-        .map((n) => n.id)
-        .filter((id): id is number => typeof id === 'number')
-        .sort((a, b) => a - b)
-    })
-
-    expect(rootIds).toEqual([1, 2, 5])
-  })
-
-  test('Promoted widget tuples are stable after full page reload boot path', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow(WORKFLOW)
-    await comfyPage.nextFrame()
-
-    const beforeSnapshot =
-      await comfyPage.subgraph.getHostPromotedTupleSnapshot()
-    expect(beforeSnapshot.length).toBeGreaterThan(0)
-    expect(
-      beforeSnapshot.some(({ promotedWidgets }) => promotedWidgets.length > 0)
-    ).toBe(true)
-
-    await comfyPage.page.reload()
-    await comfyPage.page.waitForFunction(() => !!window.app)
-    await comfyPage.workflow.loadWorkflow(WORKFLOW)
-    await comfyPage.nextFrame()
-
-    await expect(async () => {
-      const afterSnapshot =
-        await comfyPage.subgraph.getHostPromotedTupleSnapshot()
-      expect(afterSnapshot).toEqual(beforeSnapshot)
-    }).toPass({ timeout: 5_000 })
-  })
-
-  test('All links reference valid nodes in their graph', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow(WORKFLOW)
-
-    const invalidLinks = await comfyPage.page.evaluate(() => {
-      const graph = window.app!.canvas.graph!
-      const labeledGraphs: [string, typeof graph][] = [
-        ['root', graph],
-        ...[...graph.subgraphs.entries()].map(
-          ([id, sg]) => [`subgraph:${id}`, sg] as [string, typeof graph]
-        )
-      ]
-
-      const isNonNegative = (id: number | string) =>
-        typeof id === 'number' && id >= 0
-
-      return labeledGraphs.flatMap(([label, g]) =>
-        [...g._links.values()].flatMap((link) =>
-          [
-            isNonNegative(link.origin_id) &&
-              !g._nodes_by_id[link.origin_id] &&
-              `${label}: origin_id ${link.origin_id} not found`,
-            isNonNegative(link.target_id) &&
-              !g._nodes_by_id[link.target_id] &&
-              `${label}: target_id ${link.target_id} not found`
-          ].filter(Boolean)
-        )
-      )
-    })
-
-    expect(invalidLinks).toEqual([])
-  })
-
-  test('Subgraph navigation works after ID remapping', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow(WORKFLOW)
-
-    const subgraphNode = await comfyPage.nodeOps.getNodeRefById('5')
-    await subgraphNode.navigateIntoSubgraph()
-
-    const isInSubgraph = () =>
-      comfyPage.page.evaluate(
-        () => window.app!.canvas.graph?.isRootGraph === false
-      )
-
-    expect(await isInSubgraph()).toBe(true)
-
-    await comfyPage.page.keyboard.press('Escape')
-    await comfyPage.nextFrame()
-
-    expect(await isInSubgraph()).toBe(false)
-  })
-})
diff --git a/browser_tests/tests/subgraph-promoted-slot-position.spec.ts b/browser_tests/tests/subgraph-promoted-slot-position.spec.ts
deleted file mode 100644
index 94272a8864..0000000000
--- a/browser_tests/tests/subgraph-promoted-slot-position.spec.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { getTextSlotPosition } from '../helpers/subgraphTestUtils'
-
-test.describe(
-  'Subgraph promoted widget-input slot position',
-  { tag: '@subgraph' },
-  () => {
-    test('Promoted text widget slot is positioned at widget row, not header', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/subgraph-with-promoted-text-widget'
-      )
-
-      // Render a few frames so arrange() runs
-      await comfyPage.nextFrame()
-      await comfyPage.nextFrame()
-
-      const result = await getTextSlotPosition(comfyPage.page, '11')
-      expect(result).not.toBeNull()
-      expect(result!.hasPos).toBe(true)
-
-      // The slot Y position should be well below the title area.
-      // If it's near 0 or negative, the slot is stuck at the header (the bug).
-      expect(result!.posY).toBeGreaterThan(result!.titleHeight)
-    })
-
-    test('Slot position remains correct after renaming subgraph input label', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/subgraph-with-promoted-text-widget'
-      )
-      await comfyPage.nextFrame()
-      await comfyPage.nextFrame()
-
-      // Verify initial position is correct
-      const before = await getTextSlotPosition(comfyPage.page, '11')
-      expect(before).not.toBeNull()
-      expect(before!.hasPos).toBe(true)
-      expect(before!.posY).toBeGreaterThan(before!.titleHeight)
-
-      // Navigate into subgraph and rename the text input
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
-      await subgraphNode.navigateIntoSubgraph()
-
-      const initialLabel = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.canvas.graph
-        if (!graph || !('inputNode' in graph)) return null
-        const textInput = graph.inputs?.find(
-          (i: { type: string }) => i.type === 'STRING'
-        )
-        return textInput?.label || textInput?.name || null
-      })
-
-      if (!initialLabel)
-        throw new Error('Could not find STRING input in subgraph')
-
-      await comfyPage.subgraph.rightClickInputSlot(initialLabel)
-      await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
-      await comfyPage.nextFrame()
-
-      const dialog = '.graphdialog input'
-      await comfyPage.page.waitForSelector(dialog, { state: 'visible' })
-      await comfyPage.page.fill(dialog, '')
-      await comfyPage.page.fill(dialog, 'my_custom_prompt')
-      await comfyPage.page.keyboard.press('Enter')
-      await comfyPage.page.waitForSelector(dialog, { state: 'hidden' })
-
-      // Navigate back to parent graph
-      await comfyPage.subgraph.exitViaBreadcrumb()
-
-      // Verify slot position is still at the widget row after rename
-      const after = await getTextSlotPosition(comfyPage.page, '11')
-      expect(after).not.toBeNull()
-      expect(after!.hasPos).toBe(true)
-      expect(after!.posY).toBeGreaterThan(after!.titleHeight)
-
-      // widget.name is the stable identity key — it does NOT change on rename.
-      // The display label is on input.label, read via PromotedWidgetView.label.
-      expect(after!.widgetName).not.toBe('my_custom_prompt')
-    })
-  }
-)
diff --git a/browser_tests/tests/subgraph-promoted-widget-dom.spec.ts b/browser_tests/tests/subgraph-promoted-widget-dom.spec.ts
deleted file mode 100644
index c713986261..0000000000
--- a/browser_tests/tests/subgraph-promoted-widget-dom.spec.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { getPromotedWidgetNames } from '../helpers/promotedWidgets'
-
-test.describe(
-  'Subgraph promoted widget DOM position',
-  { tag: '@subgraph' },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
-    })
-
-    test('Promoted seed widget renders in node body, not header', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('default')
-
-      // Convert KSampler (id 3) to subgraph — seed is auto-promoted.
-      const ksampler = await comfyPage.nodeOps.getNodeRefById('3')
-      await ksampler.click('title')
-      const subgraphNode = await ksampler.convertToSubgraph()
-      await comfyPage.nextFrame()
-
-      // Enable Vue nodes now that the subgraph has been created
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-
-      const subgraphNodeId = String(subgraphNode.id)
-      const promotedNames = await getPromotedWidgetNames(
-        comfyPage,
-        subgraphNodeId
-      )
-      expect(promotedNames).toContain('seed')
-
-      // Wait for Vue nodes to render
-      await comfyPage.vueNodes.waitForNodes()
-
-      const nodeLocator = comfyPage.vueNodes.getNodeLocator(subgraphNodeId)
-      await expect(nodeLocator).toBeVisible()
-
-      // The seed widget should be visible inside the node body
-      const seedWidget = nodeLocator.getByLabel('seed', { exact: true }).first()
-      await expect(seedWidget).toBeVisible()
-
-      // Verify widget is inside the node body, not the header
-      const headerBox = await nodeLocator
-        .locator('[data-testid^="node-header-"]')
-        .boundingBox()
-      const widgetBox = await seedWidget.boundingBox()
-      expect(headerBox).not.toBeNull()
-      expect(widgetBox).not.toBeNull()
-
-      // Widget top should be below the header bottom
-      expect(widgetBox!.y).toBeGreaterThan(headerBox!.y + headerBox!.height)
-    })
-  }
-)
diff --git a/browser_tests/tests/subgraph-rename-dialog.spec.ts b/browser_tests/tests/subgraph-rename-dialog.spec.ts
deleted file mode 100644
index b0a36bae87..0000000000
--- a/browser_tests/tests/subgraph-rename-dialog.spec.ts
+++ /dev/null
@@ -1,177 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-// Constants
-const RENAMED_NAME = 'renamed_slot_name'
-const SECOND_RENAMED_NAME = 'second_renamed_name'
-
-// Common selectors
-const SELECTORS = {
-  promptDialog: '.graphdialog input'
-} as const
-
-test.describe('Subgraph Slot Rename Dialog', { tag: '@subgraph' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
-  })
-
-  test('Shows current slot label (not stale) in rename dialog', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-    const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-    await subgraphNode.navigateIntoSubgraph()
-
-    // Get initial slot label
-    const initialInputLabel = await comfyPage.page.evaluate(() => {
-      const graph = window.app!.canvas.graph
-      if (!graph || !('inputNode' in graph)) return null
-      return graph.inputs?.[0]?.label || graph.inputs?.[0]?.name || null
-    })
-
-    if (initialInputLabel === null) {
-      throw new Error(
-        'Expected subgraph to have an input slot label for rightClickInputSlot'
-      )
-    }
-
-    // First rename
-    await comfyPage.subgraph.rightClickInputSlot(initialInputLabel)
-    await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
-    await comfyPage.nextFrame()
-
-    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-      state: 'visible'
-    })
-
-    // Clear and enter new name
-    await comfyPage.page.fill(SELECTORS.promptDialog, '')
-    await comfyPage.page.fill(SELECTORS.promptDialog, RENAMED_NAME)
-    await comfyPage.page.keyboard.press('Enter')
-
-    // Wait for dialog to close
-    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-      state: 'hidden'
-    })
-
-    // Force re-render
-    await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
-    await comfyPage.nextFrame()
-
-    // Verify the rename worked
-    const afterFirstRename = await comfyPage.page.evaluate(() => {
-      const graph = window.app!.canvas.graph
-      if (!graph || !('inputNode' in graph))
-        return { label: null, name: null, displayName: null }
-      const slot = graph.inputs?.[0]
-      return {
-        label: slot?.label || null,
-        name: slot?.name || null,
-        displayName: slot?.displayName || slot?.label || slot?.name || null
-      }
-    })
-    expect(afterFirstRename.label).toBe(RENAMED_NAME)
-
-    // Now rename again - this is where the bug would show
-    // We need to use the index-based approach since the method looks for slot.name
-    await comfyPage.subgraph.rightClickInputSlot()
-    await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
-    await comfyPage.nextFrame()
-
-    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-      state: 'visible'
-    })
-
-    // Get the current value in the prompt dialog
-    const dialogValue = await comfyPage.page.inputValue(SELECTORS.promptDialog)
-
-    // This should show the current label (RENAMED_NAME), not the original name
-    expect(dialogValue).toBe(RENAMED_NAME)
-    expect(dialogValue).not.toBe(afterFirstRename.name) // Should not show the original slot.name
-
-    // Complete the second rename to ensure everything still works
-    await comfyPage.page.fill(SELECTORS.promptDialog, '')
-    await comfyPage.page.fill(SELECTORS.promptDialog, SECOND_RENAMED_NAME)
-    await comfyPage.page.keyboard.press('Enter')
-
-    // Wait for dialog to close
-    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-      state: 'hidden'
-    })
-
-    // Force re-render
-    await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
-    await comfyPage.nextFrame()
-
-    // Verify the second rename worked
-    const afterSecondRename = await comfyPage.page.evaluate(() => {
-      const graph = window.app!.canvas.graph
-      if (!graph || !('inputNode' in graph)) return null
-      return graph.inputs?.[0]?.label || null
-    })
-    expect(afterSecondRename).toBe(SECOND_RENAMED_NAME)
-  })
-
-  test('Shows current output slot label in rename dialog', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-    const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-    await subgraphNode.navigateIntoSubgraph()
-
-    // Get initial output slot label
-    const initialOutputLabel = await comfyPage.page.evaluate(() => {
-      const graph = window.app!.canvas.graph
-      if (!graph || !('inputNode' in graph)) return null
-      return graph.outputs?.[0]?.label || graph.outputs?.[0]?.name || null
-    })
-
-    if (initialOutputLabel === null) {
-      throw new Error(
-        'Expected subgraph to have an output slot label for rightClickOutputSlot'
-      )
-    }
-
-    // First rename
-    await comfyPage.subgraph.rightClickOutputSlot(initialOutputLabel)
-    await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
-    await comfyPage.nextFrame()
-
-    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-      state: 'visible'
-    })
-
-    // Clear and enter new name
-    await comfyPage.page.fill(SELECTORS.promptDialog, '')
-    await comfyPage.page.fill(SELECTORS.promptDialog, RENAMED_NAME)
-    await comfyPage.page.keyboard.press('Enter')
-
-    // Wait for dialog to close
-    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-      state: 'hidden'
-    })
-
-    // Force re-render
-    await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
-    await comfyPage.nextFrame()
-
-    // Now rename again to check for stale content
-    // We need to use the index-based approach since the method looks for slot.name
-    await comfyPage.subgraph.rightClickOutputSlot()
-    await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
-    await comfyPage.nextFrame()
-
-    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-      state: 'visible'
-    })
-
-    // Get the current value in the prompt dialog
-    const dialogValue = await comfyPage.page.inputValue(SELECTORS.promptDialog)
-
-    // This should show the current label (RENAMED_NAME), not the original name
-    expect(dialogValue).toBe(RENAMED_NAME)
-  })
-})
diff --git a/browser_tests/tests/subgraph.spec.ts b/browser_tests/tests/subgraph.spec.ts
deleted file mode 100644
index eebb2eb4c1..0000000000
--- a/browser_tests/tests/subgraph.spec.ts
+++ /dev/null
@@ -1,938 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
-
-// Constants
-const RENAMED_INPUT_NAME = 'renamed_input'
-const NEW_SUBGRAPH_TITLE = 'New Subgraph'
-const UPDATED_SUBGRAPH_TITLE = 'Updated Subgraph Title'
-const TEST_WIDGET_CONTENT = 'Test content that should persist'
-
-// Common selectors
-const SELECTORS = {
-  breadcrumb: '.subgraph-breadcrumb',
-  promptDialog: '.graphdialog input',
-  nodeSearchContainer: '.node-search-container',
-  domWidget: '.comfy-multiline-input'
-} as const
-
-test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
-    await comfyPage.settings.setSetting(
-      'Comfy.NodeSearchBoxImpl',
-      'v1 (legacy)'
-    )
-  })
-
-  // Helper to get subgraph slot count
-  async function getSubgraphSlotCount(
-    comfyPage: typeof test.prototype.comfyPage,
-    type: 'inputs' | 'outputs'
-  ): Promise<number> {
-    return await comfyPage.page.evaluate((slotType: 'inputs' | 'outputs') => {
-      const graph = window.app!.canvas.graph
-      // isSubgraph check: subgraphs have isRootGraph === false
-      if (!graph || !('inputNode' in graph)) return 0
-      return graph[slotType]?.length || 0
-    }, type)
-  }
-
-  // Helper to get current graph node count
-  async function getGraphNodeCount(
-    comfyPage: typeof test.prototype.comfyPage
-  ): Promise<number> {
-    return await comfyPage.page.evaluate(() => {
-      return window.app!.canvas.graph!.nodes?.length || 0
-    })
-  }
-
-  // Helper to verify we're in a subgraph
-  async function isInSubgraph(
-    comfyPage: typeof test.prototype.comfyPage
-  ): Promise<boolean> {
-    return await comfyPage.page.evaluate(() => {
-      const graph = window.app!.canvas.graph
-      return !!graph && 'inputNode' in graph
-    })
-  }
-
-  test.describe('I/O Slot Management', () => {
-    test('Can add input slots to subgraph', async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-
-      const initialCount = await getSubgraphSlotCount(comfyPage, 'inputs')
-      const [vaeEncodeNode] = await comfyPage.nodeOps.getNodeRefsByType(
-        'VAEEncode',
-        true
-      )
-
-      await comfyPage.subgraph.connectFromInput(vaeEncodeNode, 0)
-      await comfyPage.nextFrame()
-
-      const finalCount = await getSubgraphSlotCount(comfyPage, 'inputs')
-      expect(finalCount).toBe(initialCount + 1)
-    })
-
-    test('Can add output slots to subgraph', async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-
-      const initialCount = await getSubgraphSlotCount(comfyPage, 'outputs')
-      const [vaeEncodeNode] = await comfyPage.nodeOps.getNodeRefsByType(
-        'VAEEncode',
-        true
-      )
-
-      await comfyPage.subgraph.connectToOutput(vaeEncodeNode, 0)
-      await comfyPage.nextFrame()
-
-      const finalCount = await getSubgraphSlotCount(comfyPage, 'outputs')
-      expect(finalCount).toBe(initialCount + 1)
-    })
-
-    test('Can remove input slots from subgraph', async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-
-      const initialCount = await getSubgraphSlotCount(comfyPage, 'inputs')
-      expect(initialCount).toBeGreaterThan(0)
-
-      await comfyPage.subgraph.rightClickInputSlot()
-      await comfyPage.contextMenu.clickLitegraphMenuItem('Remove Slot')
-      await comfyPage.nextFrame()
-
-      // Force re-render
-      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
-      await comfyPage.nextFrame()
-
-      const finalCount = await getSubgraphSlotCount(comfyPage, 'inputs')
-      expect(finalCount).toBe(initialCount - 1)
-    })
-
-    test('Can remove output slots from subgraph', async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-
-      const initialCount = await getSubgraphSlotCount(comfyPage, 'outputs')
-      expect(initialCount).toBeGreaterThan(0)
-
-      await comfyPage.subgraph.rightClickOutputSlot()
-      await comfyPage.contextMenu.clickLitegraphMenuItem('Remove Slot')
-      await comfyPage.nextFrame()
-
-      // Force re-render
-      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
-      await comfyPage.nextFrame()
-
-      const finalCount = await getSubgraphSlotCount(comfyPage, 'outputs')
-      expect(finalCount).toBe(initialCount - 1)
-    })
-
-    test('Can rename I/O slots', async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-
-      const initialInputLabel = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.canvas.graph
-        if (!graph || !('inputNode' in graph)) return null
-        return graph.inputs?.[0]?.label || null
-      })
-
-      await comfyPage.subgraph.rightClickInputSlot(initialInputLabel!)
-      await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
-      await comfyPage.nextFrame()
-
-      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-        state: 'visible'
-      })
-      await comfyPage.page.fill(SELECTORS.promptDialog, RENAMED_INPUT_NAME)
-      await comfyPage.page.keyboard.press('Enter')
-
-      // Force re-render
-      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
-      await comfyPage.nextFrame()
-
-      const newInputName = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.canvas.graph
-        if (!graph || !('inputNode' in graph)) return null
-        return graph.inputs?.[0]?.label || null
-      })
-
-      expect(newInputName).toBe(RENAMED_INPUT_NAME)
-      expect(newInputName).not.toBe(initialInputLabel)
-    })
-
-    test('Can rename input slots via double-click', async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-
-      const initialInputLabel = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.canvas.graph
-        if (!graph || !('inputNode' in graph)) return null
-        return graph.inputs?.[0]?.label || null
-      })
-
-      await comfyPage.subgraph.doubleClickInputSlot(initialInputLabel!)
-
-      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-        state: 'visible'
-      })
-      await comfyPage.page.fill(SELECTORS.promptDialog, RENAMED_INPUT_NAME)
-      await comfyPage.page.keyboard.press('Enter')
-
-      // Force re-render
-      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
-      await comfyPage.nextFrame()
-
-      const newInputName = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.canvas.graph
-        if (!graph || !('inputNode' in graph)) return null
-        return graph.inputs?.[0]?.label || null
-      })
-
-      expect(newInputName).toBe(RENAMED_INPUT_NAME)
-      expect(newInputName).not.toBe(initialInputLabel)
-    })
-
-    test('Can rename output slots via double-click', async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-
-      const initialOutputLabel = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.canvas.graph
-        if (!graph || !('inputNode' in graph)) return null
-        return graph.outputs?.[0]?.label || null
-      })
-
-      await comfyPage.subgraph.doubleClickOutputSlot(initialOutputLabel!)
-
-      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-        state: 'visible'
-      })
-      const renamedOutputName = 'renamed_output'
-      await comfyPage.page.fill(SELECTORS.promptDialog, renamedOutputName)
-      await comfyPage.page.keyboard.press('Enter')
-
-      // Force re-render
-      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
-      await comfyPage.nextFrame()
-
-      const newOutputName = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.canvas.graph
-        if (!graph || !('inputNode' in graph)) return null
-        return graph.outputs?.[0]?.label || null
-      })
-
-      expect(newOutputName).toBe(renamedOutputName)
-      expect(newOutputName).not.toBe(initialOutputLabel)
-    })
-
-    test('Right-click context menu still works alongside double-click', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-
-      const initialInputLabel = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.canvas.graph
-        if (!graph || !('inputNode' in graph)) return null
-        return graph.inputs?.[0]?.label || null
-      })
-
-      // Test that right-click still works for renaming
-      await comfyPage.subgraph.rightClickInputSlot(initialInputLabel!)
-      await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
-      await comfyPage.nextFrame()
-
-      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-        state: 'visible'
-      })
-      const rightClickRenamedName = 'right_click_renamed'
-      await comfyPage.page.fill(SELECTORS.promptDialog, rightClickRenamedName)
-      await comfyPage.page.keyboard.press('Enter')
-
-      // Force re-render
-      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
-      await comfyPage.nextFrame()
-
-      const newInputName = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.canvas.graph
-        if (!graph || !('inputNode' in graph)) return null
-        return graph.inputs?.[0]?.label || null
-      })
-
-      expect(newInputName).toBe(rightClickRenamedName)
-      expect(newInputName).not.toBe(initialInputLabel)
-    })
-
-    test('Can double-click on slot label text to rename', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-
-      const initialInputLabel = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.canvas.graph
-        if (!graph || !('inputNode' in graph)) return null
-        return graph.inputs?.[0]?.label || null
-      })
-
-      // Use direct pointer event approach to double-click on label
-      await comfyPage.page.evaluate(() => {
-        const app = window.app!
-
-        const graph = app.canvas.graph
-        if (!graph || !('inputNode' in graph)) {
-          throw new Error('Expected to be in subgraph')
-        }
-        const input = graph.inputs?.[0]
-
-        if (!input?.labelPos) {
-          throw new Error('Could not get label position for testing')
-        }
-
-        // Use labelPos for more precise clicking on the text
-        const testX = input.labelPos[0]
-        const testY = input.labelPos[1]
-
-        // Create a minimal mock event with required properties
-        // Full PointerEvent creation is unnecessary for this test
-        const leftClickEvent = {
-          canvasX: testX,
-          canvasY: testY,
-          button: 0,
-          preventDefault: () => {},
-          stopPropagation: () => {}
-        } as Parameters<typeof graph.inputNode.onPointerDown>[0]
-
-        const inputNode = graph.inputNode
-        if (inputNode?.onPointerDown) {
-          inputNode.onPointerDown(
-            leftClickEvent,
-            app.canvas.pointer,
-            app.canvas.linkConnector
-          )
-
-          // Trigger double-click if pointer has the handler
-          if (app.canvas.pointer.onDoubleClick) {
-            app.canvas.pointer.onDoubleClick(leftClickEvent)
-          }
-        }
-      })
-
-      await comfyPage.nextFrame()
-
-      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-        state: 'visible'
-      })
-      const labelClickRenamedName = 'label_click_renamed'
-      await comfyPage.page.fill(SELECTORS.promptDialog, labelClickRenamedName)
-      await comfyPage.page.keyboard.press('Enter')
-
-      // Force re-render
-      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
-      await comfyPage.nextFrame()
-
-      const newInputName = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.canvas.graph
-        if (!graph || !('inputNode' in graph)) return null
-        return graph.inputs?.[0]?.label || null
-      })
-
-      expect(newInputName).toBe(labelClickRenamedName)
-      expect(newInputName).not.toBe(initialInputLabel)
-    })
-    test('Can create widget from link with compressed target_slot', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/subgraph-compressed-target-slot'
-      )
-      const step = await comfyPage.page.evaluate(() => {
-        return window.app!.graph!.nodes[0].widgets![0].options.step
-      })
-      expect(step).toBe(10)
-    })
-  })
-
-  test.describe('Subgraph Unpacking', () => {
-    test('Unpacking subgraph with duplicate links does not create extra links', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/subgraph-duplicate-links'
-      )
-
-      const result = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.graph!
-        const subgraphNode = graph.nodes.find((n) => n.isSubgraphNode())
-        if (!subgraphNode || !subgraphNode.isSubgraphNode()) {
-          return { error: 'No subgraph node found' }
-        }
-
-        graph.unpackSubgraph(subgraphNode)
-
-        const linkCount = graph.links.size
-        const nodes = graph.nodes
-        const ksampler = nodes.find((n) => n.type === 'KSampler')
-        if (!ksampler) return { error: 'No KSampler found after unpack' }
-
-        const linkedInputCount = ksampler.inputs.filter(
-          (i) => i.link != null
-        ).length
-
-        return { linkCount, linkedInputCount, nodeCount: nodes.length }
-      })
-
-      expect(result).not.toHaveProperty('error')
-      // Should have exactly 1 link (EmptyLatentImage→KSampler)
-      // not 4 (with 3 duplicates). The KSampler→output link is dropped
-      // because the subgraph output has no downstream connection.
-      expect(result.linkCount).toBe(1)
-      // KSampler should have exactly 1 linked input (latent_image)
-      expect(result.linkedInputCount).toBe(1)
-    })
-  })
-
-  test.describe('Subgraph Creation and Deletion', () => {
-    test('Can create subgraph from selected nodes', async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow('default')
-
-      await comfyPage.keyboard.selectAll()
-      await comfyPage.nextFrame()
-
-      const node = await comfyPage.nodeOps.getNodeRefById('5')
-      await node.convertToSubgraph()
-      await comfyPage.nextFrame()
-
-      const subgraphNodes =
-        await comfyPage.nodeOps.getNodeRefsByTitle(NEW_SUBGRAPH_TITLE)
-      expect(subgraphNodes.length).toBe(1)
-
-      const finalNodeCount = await getGraphNodeCount(comfyPage)
-      expect(finalNodeCount).toBe(1)
-    })
-
-    test('Can delete subgraph node', async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      expect(await subgraphNode.exists()).toBe(true)
-
-      const initialNodeCount = await getGraphNodeCount(comfyPage)
-
-      await subgraphNode.click('title')
-      await comfyPage.page.keyboard.press('Delete')
-      await comfyPage.nextFrame()
-
-      const finalNodeCount = await getGraphNodeCount(comfyPage)
-      expect(finalNodeCount).toBe(initialNodeCount - 1)
-
-      const deletedNode = await comfyPage.nodeOps.getNodeRefById('2')
-      expect(await deletedNode.exists()).toBe(false)
-    })
-
-    test.describe('Subgraph copy and paste', () => {
-      test('Can copy subgraph node by dragging + alt', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-
-        // Get position of subgraph node
-        const subgraphPos = await subgraphNode.getPosition()
-
-        // Alt + Click on the subgraph node
-        await comfyPage.page.mouse.move(subgraphPos.x + 16, subgraphPos.y + 16)
-        await comfyPage.page.keyboard.down('Alt')
-        await comfyPage.page.mouse.down()
-        await comfyPage.nextFrame()
-
-        // Drag slightly to trigger the copy
-        await comfyPage.page.mouse.move(subgraphPos.x + 64, subgraphPos.y + 64)
-        await comfyPage.page.mouse.up()
-        await comfyPage.page.keyboard.up('Alt')
-
-        // Find all subgraph nodes
-        const subgraphNodes =
-          await comfyPage.nodeOps.getNodeRefsByTitle(NEW_SUBGRAPH_TITLE)
-
-        // Expect a second subgraph node to be created (2 total)
-        expect(subgraphNodes.length).toBe(2)
-      })
-
-      test('Copying subgraph node by dragging + alt creates a new subgraph node with unique type', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-
-        // Get position of subgraph node
-        const subgraphPos = await subgraphNode.getPosition()
-
-        // Alt + Click on the subgraph node
-        await comfyPage.page.mouse.move(subgraphPos.x + 16, subgraphPos.y + 16)
-        await comfyPage.page.keyboard.down('Alt')
-        await comfyPage.page.mouse.down()
-        await comfyPage.nextFrame()
-
-        // Drag slightly to trigger the copy
-        await comfyPage.page.mouse.move(subgraphPos.x + 64, subgraphPos.y + 64)
-        await comfyPage.page.mouse.up()
-        await comfyPage.page.keyboard.up('Alt')
-
-        // Find all subgraph nodes and expect all unique IDs
-        const subgraphNodes =
-          await comfyPage.nodeOps.getNodeRefsByTitle(NEW_SUBGRAPH_TITLE)
-
-        // Expect the second subgraph node to have a unique type
-        const nodeType1 = await subgraphNodes[0].getType()
-        const nodeType2 = await subgraphNodes[1].getType()
-        expect(nodeType1).not.toBe(nodeType2)
-      })
-    })
-  })
-
-  test.describe('Operations Inside Subgraphs', () => {
-    test('Can copy and paste nodes in subgraph', async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-
-      const initialNodeCount = await getGraphNodeCount(comfyPage)
-
-      const nodesInSubgraph = await comfyPage.page.evaluate(() => {
-        const nodes = window.app!.canvas.graph!.nodes
-        return nodes?.[0]?.id || null
-      })
-
-      expect(nodesInSubgraph).not.toBeNull()
-
-      const nodeToClone = await comfyPage.nodeOps.getNodeRefById(
-        String(nodesInSubgraph)
-      )
-      await nodeToClone.click('title')
-      await comfyPage.nextFrame()
-
-      await comfyPage.page.keyboard.press('Control+c')
-      await comfyPage.nextFrame()
-
-      await comfyPage.page.keyboard.press('Control+v')
-      await comfyPage.nextFrame()
-
-      const finalNodeCount = await getGraphNodeCount(comfyPage)
-      expect(finalNodeCount).toBe(initialNodeCount + 1)
-    })
-
-    test('Can undo and redo operations in subgraph', async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-
-      // Add a node
-      await comfyPage.canvasOps.doubleClick()
-      await comfyPage.searchBox.fillAndSelectFirstNode('Note')
-      await comfyPage.nextFrame()
-
-      // Get initial node count
-      const initialCount = await getGraphNodeCount(comfyPage)
-
-      // Undo
-      await comfyPage.keyboard.undo()
-      await comfyPage.nextFrame()
-
-      const afterUndoCount = await getGraphNodeCount(comfyPage)
-      expect(afterUndoCount).toBe(initialCount - 1)
-
-      // Redo
-      await comfyPage.keyboard.redo()
-      await comfyPage.nextFrame()
-
-      const afterRedoCount = await getGraphNodeCount(comfyPage)
-      expect(afterRedoCount).toBe(initialCount)
-    })
-  })
-
-  test.describe('Subgraph Navigation and UI', () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    })
-
-    test('Breadcrumb updates when subgraph node title is changed', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/nested-subgraph')
-      await comfyPage.nextFrame()
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('10')
-      const nodePos = await subgraphNode.getPosition()
-      const nodeSize = await subgraphNode.getSize()
-
-      // Navigate into subgraph
-      await subgraphNode.navigateIntoSubgraph()
-
-      await comfyPage.page.waitForSelector(SELECTORS.breadcrumb, {
-        state: 'visible',
-        timeout: 20000
-      })
-
-      const breadcrumb = comfyPage.page.locator(SELECTORS.breadcrumb)
-      const initialBreadcrumbText = await breadcrumb.textContent()
-
-      // Go back and edit title
-      await comfyPage.page.keyboard.press('Escape')
-      await comfyPage.nextFrame()
-
-      await comfyPage.canvas.dblclick({
-        position: {
-          x: nodePos.x + nodeSize.width / 2,
-          y: nodePos.y - 10
-        },
-        delay: 5
-      })
-
-      await expect(comfyPage.page.locator('.node-title-editor')).toBeVisible()
-
-      await comfyPage.page.keyboard.press('Control+a')
-      await comfyPage.page.keyboard.type(UPDATED_SUBGRAPH_TITLE)
-      await comfyPage.page.keyboard.press('Enter')
-      await comfyPage.nextFrame()
-
-      // Navigate back into subgraph
-      await subgraphNode.navigateIntoSubgraph()
-
-      await comfyPage.page.waitForSelector(SELECTORS.breadcrumb)
-
-      const updatedBreadcrumbText = await breadcrumb.textContent()
-      expect(updatedBreadcrumbText).toContain(UPDATED_SUBGRAPH_TITLE)
-      expect(updatedBreadcrumbText).not.toBe(initialBreadcrumbText)
-    })
-
-    test('Switching workflows while inside subgraph returns to root graph context', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-      await comfyPage.nextFrame()
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-      await comfyPage.nextFrame()
-
-      expect(await isInSubgraph(comfyPage)).toBe(true)
-      await expect(comfyPage.page.locator(SELECTORS.breadcrumb)).toBeVisible()
-
-      await comfyPage.workflow.loadWorkflow('default')
-      await comfyPage.nextFrame()
-
-      expect(await isInSubgraph(comfyPage)).toBe(false)
-
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-      await comfyPage.nextFrame()
-      expect(await isInSubgraph(comfyPage)).toBe(false)
-    })
-
-    test('Breadcrumb disappears after switching workflows while inside subgraph', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-      await comfyPage.nextFrame()
-
-      const breadcrumb = comfyPage.page
-        .getByTestId(TestIds.breadcrumb.subgraph)
-        .locator('.p-breadcrumb')
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-      await comfyPage.nextFrame()
-
-      await expect(breadcrumb).toBeVisible()
-
-      await comfyPage.workflow.loadWorkflow('default')
-      await comfyPage.nextFrame()
-
-      await expect(breadcrumb).toBeHidden()
-    })
-  })
-
-  test.describe('DOM Widget Promotion', () => {
-    test('DOM widget visibility persists through subgraph navigation', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/subgraph-with-promoted-text-widget'
-      )
-      await comfyPage.nextFrame()
-
-      // Verify promoted widget is visible in parent graph
-      const parentTextarea = comfyPage.page.locator(SELECTORS.domWidget)
-      await expect(parentTextarea).toBeVisible()
-      await expect(parentTextarea).toHaveCount(1)
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
-      expect(await subgraphNode.exists()).toBe(true)
-
-      await subgraphNode.navigateIntoSubgraph()
-
-      // Verify widget is visible in subgraph
-      const subgraphTextarea = comfyPage.page.locator(SELECTORS.domWidget)
-      await expect(subgraphTextarea).toBeVisible()
-      await expect(subgraphTextarea).toHaveCount(1)
-
-      // Navigate back
-      await comfyPage.page.keyboard.press('Escape')
-      await comfyPage.nextFrame()
-
-      // Verify widget is still visible
-      const backToParentTextarea = comfyPage.page.locator(SELECTORS.domWidget)
-      await expect(backToParentTextarea).toBeVisible()
-      await expect(backToParentTextarea).toHaveCount(1)
-    })
-
-    test('DOM widget content is preserved through navigation', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/subgraph-with-promoted-text-widget'
-      )
-
-      const textarea = comfyPage.page.locator(SELECTORS.domWidget)
-      await textarea.fill(TEST_WIDGET_CONTENT)
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
-      await subgraphNode.navigateIntoSubgraph()
-
-      const subgraphTextarea = comfyPage.page.locator(SELECTORS.domWidget)
-      await expect(subgraphTextarea).toHaveValue(TEST_WIDGET_CONTENT)
-
-      await comfyPage.page.keyboard.press('Escape')
-      await comfyPage.nextFrame()
-
-      const parentTextarea = comfyPage.page.locator(SELECTORS.domWidget)
-      await expect(parentTextarea).toHaveValue(TEST_WIDGET_CONTENT)
-    })
-
-    test('DOM elements are cleaned up when subgraph node is removed', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/subgraph-with-promoted-text-widget'
-      )
-
-      const initialCount = await comfyPage.page
-        .locator(SELECTORS.domWidget)
-        .count()
-      expect(initialCount).toBe(1)
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
-
-      await subgraphNode.click('title')
-      await comfyPage.page.keyboard.press('Delete')
-      await comfyPage.nextFrame()
-
-      const finalCount = await comfyPage.page
-        .locator(SELECTORS.domWidget)
-        .count()
-      expect(finalCount).toBe(0)
-    })
-
-    test('DOM elements are cleaned up when widget is disconnected from I/O', async ({
-      comfyPage
-    }) => {
-      // Enable new menu for breadcrumb navigation
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-
-      const workflowName = 'subgraphs/subgraph-with-promoted-text-widget'
-      await comfyPage.workflow.loadWorkflow(workflowName)
-
-      const textareaCount = await comfyPage.page
-        .locator(SELECTORS.domWidget)
-        .count()
-      expect(textareaCount).toBe(1)
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
-
-      // Navigate into subgraph (method now handles retries internally)
-      await subgraphNode.navigateIntoSubgraph()
-
-      await comfyPage.subgraph.rightClickInputSlot('text')
-      await comfyPage.contextMenu.clickLitegraphMenuItem('Remove Slot')
-      await comfyPage.nextFrame()
-
-      // Wait for breadcrumb to be visible
-      await comfyPage.page.waitForSelector(SELECTORS.breadcrumb, {
-        state: 'visible',
-        timeout: 5000
-      })
-
-      // Click breadcrumb to navigate back to parent graph
-      const homeBreadcrumb = comfyPage.page.locator(
-        '.p-breadcrumb-list > :first-child'
-      )
-      await homeBreadcrumb.waitFor({ state: 'visible' })
-      await homeBreadcrumb.click()
-      await comfyPage.nextFrame()
-
-      // Check that the subgraph node has no widgets after removing the text slot
-      const widgetCount = await comfyPage.page.evaluate(() => {
-        return window.app!.canvas.graph!.nodes[0].widgets?.length || 0
-      })
-
-      expect(widgetCount).toBe(0)
-    })
-
-    test('Multiple promoted widgets are handled correctly', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/subgraph-with-multiple-promoted-widgets'
-      )
-
-      const parentCount = await comfyPage.page
-        .locator(SELECTORS.domWidget)
-        .count()
-      expect(parentCount).toBeGreaterThan(1)
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
-      await subgraphNode.navigateIntoSubgraph()
-
-      const subgraphCount = await comfyPage.page
-        .locator(SELECTORS.domWidget)
-        .count()
-      expect(subgraphCount).toBe(parentCount)
-
-      await comfyPage.page.keyboard.press('Escape')
-      await comfyPage.nextFrame()
-
-      const finalCount = await comfyPage.page
-        .locator(SELECTORS.domWidget)
-        .count()
-      expect(finalCount).toBe(parentCount)
-    })
-  })
-
-  test.describe('Navigation Hotkeys', () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    })
-
-    test('Navigation hotkey can be customized', async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-      await comfyPage.nextFrame()
-
-      // Change the Exit Subgraph keybinding from Escape to Alt+Q
-      await comfyPage.settings.setSetting('Comfy.Keybinding.NewBindings', [
-        {
-          commandId: 'Comfy.Graph.ExitSubgraph',
-          combo: {
-            key: 'q',
-            ctrl: false,
-            alt: true,
-            shift: false
-          }
-        }
-      ])
-
-      await comfyPage.settings.setSetting('Comfy.Keybinding.UnsetBindings', [
-        {
-          commandId: 'Comfy.Graph.ExitSubgraph',
-          combo: {
-            key: 'Escape',
-            ctrl: false,
-            alt: false,
-            shift: false
-          }
-        }
-      ])
-
-      // Reload the page
-      await comfyPage.page.reload()
-      await comfyPage.setup()
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-      await comfyPage.nextFrame()
-
-      // Navigate into subgraph
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-      await comfyPage.page.waitForSelector(SELECTORS.breadcrumb)
-
-      // Verify we're in a subgraph
-      expect(await isInSubgraph(comfyPage)).toBe(true)
-
-      // Test that Escape no longer exits subgraph
-      await comfyPage.page.keyboard.press('Escape')
-      await comfyPage.nextFrame()
-      if (!(await isInSubgraph(comfyPage))) {
-        throw new Error('Not in subgraph')
-      }
-
-      // Test that Alt+Q now exits subgraph
-      await comfyPage.page.keyboard.press('Alt+q')
-      await comfyPage.nextFrame()
-      expect(await isInSubgraph(comfyPage)).toBe(false)
-    })
-
-    test('Escape prioritizes closing dialogs over exiting subgraph', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-      await comfyPage.nextFrame()
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-      await comfyPage.page.waitForSelector(SELECTORS.breadcrumb)
-
-      // Verify we're in a subgraph
-      if (!(await isInSubgraph(comfyPage))) {
-        throw new Error('Not in subgraph')
-      }
-
-      // Open settings dialog using hotkey
-      await comfyPage.page.keyboard.press('Control+,')
-      await comfyPage.page.waitForSelector('[data-testid="settings-dialog"]', {
-        state: 'visible'
-      })
-
-      // Press Escape - should close dialog, not exit subgraph
-      await comfyPage.page.keyboard.press('Escape')
-      await comfyPage.nextFrame()
-
-      // Dialog should be closed
-      await expect(
-        comfyPage.page.locator('[data-testid="settings-dialog"]')
-      ).not.toBeVisible()
-
-      // Should still be in subgraph
-      expect(await isInSubgraph(comfyPage)).toBe(true)
-
-      // Press Escape again - now should exit subgraph
-      await comfyPage.page.keyboard.press('Escape')
-      await comfyPage.nextFrame()
-      expect(await isInSubgraph(comfyPage)).toBe(false)
-    })
-  })
-})
diff --git a/browser_tests/tests/subgraph/subgraphCrud.spec.ts b/browser_tests/tests/subgraph/subgraphCrud.spec.ts
new file mode 100644
index 0000000000..730e86a7a8
--- /dev/null
+++ b/browser_tests/tests/subgraph/subgraphCrud.spec.ts
@@ -0,0 +1,144 @@
+import { expect } from '@playwright/test'
+
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+
+const NEW_SUBGRAPH_TITLE = 'New Subgraph'
+
+test.describe('Subgraph CRUD', { tag: ['@slow', '@subgraph'] }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+  })
+
+  async function duplicateSubgraphNodeViaAltDrag(
+    comfyPage: ComfyPage
+  ): Promise<void> {
+    const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+    const subgraphPos = await subgraphNode.getPosition()
+
+    await comfyPage.page.mouse.move(subgraphPos.x + 16, subgraphPos.y + 16)
+    await comfyPage.page.keyboard.down('Alt')
+    try {
+      await comfyPage.page.mouse.down()
+      await comfyPage.nextFrame()
+
+      await comfyPage.page.mouse.move(subgraphPos.x + 64, subgraphPos.y + 64)
+      await comfyPage.page.mouse.up()
+    } finally {
+      await comfyPage.page.keyboard.up('Alt')
+    }
+  }
+
+  test.describe('Subgraph Unpacking', () => {
+    test('Unpacking subgraph with duplicate links does not create extra links', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-duplicate-links'
+      )
+
+      const result = await comfyPage.page.evaluate(() => {
+        const graph = window.app!.graph!
+        const subgraphNode = graph.nodes.find((n) => n.isSubgraphNode())
+        if (!subgraphNode || !subgraphNode.isSubgraphNode()) {
+          return { error: 'No subgraph node found' }
+        }
+
+        graph.unpackSubgraph(subgraphNode)
+
+        const linkCount = graph.links.size
+        const nodes = graph.nodes
+        const ksampler = nodes.find((n) => n.type === 'KSampler')
+        if (!ksampler) return { error: 'No KSampler found after unpack' }
+
+        const linkedInputCount = ksampler.inputs.filter(
+          (input) => input.link != null
+        ).length
+
+        return { linkCount, linkedInputCount, nodeCount: nodes.length }
+      })
+
+      expect(result).not.toHaveProperty('error')
+      expect(result.linkCount).toBe(1)
+      expect(result.linkedInputCount).toBe(1)
+    })
+  })
+
+  test.describe('Subgraph Creation and Deletion', () => {
+    test('Can create subgraph from selected nodes', async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('default')
+
+      await comfyPage.keyboard.selectAll()
+      await comfyPage.nextFrame()
+
+      const node = await comfyPage.nodeOps.getNodeRefById('5')
+      await node.convertToSubgraph()
+
+      await expect
+        .poll(
+          async () =>
+            (await comfyPage.nodeOps.getNodeRefsByTitle(NEW_SUBGRAPH_TITLE))
+              .length
+        )
+        .toBe(1)
+      await expect.poll(() => comfyPage.subgraph.getNodeCount()).toBe(1)
+    })
+
+    test('Can delete subgraph node', async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await expect.poll(() => subgraphNode.exists()).toBe(true)
+
+      const initialNodeCount = await comfyPage.subgraph.getNodeCount()
+
+      await subgraphNode.delete()
+
+      const deletedNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await expect
+        .poll(() => comfyPage.subgraph.getNodeCount())
+        .toBe(initialNodeCount - 1)
+      await expect.poll(() => deletedNode.exists()).toBe(false)
+    })
+
+    test.describe('Subgraph Copy', () => {
+      test('Can duplicate a subgraph node by alt-dragging', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+        await duplicateSubgraphNodeViaAltDrag(comfyPage)
+
+        await expect
+          .poll(
+            async () =>
+              (await comfyPage.nodeOps.getNodeRefsByTitle(NEW_SUBGRAPH_TITLE))
+                .length
+          )
+          .toBe(2)
+      })
+
+      test('Alt-dragging a subgraph node creates a new subgraph type', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+        await duplicateSubgraphNodeViaAltDrag(comfyPage)
+
+        await expect
+          .poll(
+            async () =>
+              (await comfyPage.nodeOps.getNodeRefsByTitle(NEW_SUBGRAPH_TITLE))
+                .length
+          )
+          .toBe(2)
+
+        const subgraphNodes =
+          await comfyPage.nodeOps.getNodeRefsByTitle(NEW_SUBGRAPH_TITLE)
+        const nodeType1 = await subgraphNodes[0].getType()
+        const nodeType2 = await subgraphNodes[1].getType()
+        expect(nodeType1).not.toBe(nodeType2)
+      })
+    })
+  })
+})
diff --git a/browser_tests/tests/subgraph/subgraphDraftPositions.spec.ts b/browser_tests/tests/subgraph/subgraphDraftPositions.spec.ts
new file mode 100644
index 0000000000..31eb0622b9
--- /dev/null
+++ b/browser_tests/tests/subgraph/subgraphDraftPositions.spec.ts
@@ -0,0 +1,92 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+
+test.describe(
+  'Subgraph node positions after draft reload',
+  { tag: ['@subgraph'] },
+  () => {
+    test('Node positions are preserved after draft reload with subgraph auto-entry', async ({
+      comfyPage
+    }) => {
+      test.setTimeout(30000)
+
+      // Enable workflow persistence explicitly
+      await comfyPage.settings.setSetting('Comfy.Workflow.Persist', true)
+
+      // Load a workflow containing a subgraph
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      // Enter the subgraph programmatically (fixture node is too small for UI click)
+      await comfyPage.page.evaluate(() => {
+        const sg = [...window.app!.rootGraph.subgraphs.values()][0]
+        if (sg) window.app!.canvas.setGraph(sg)
+      })
+      await comfyPage.nextFrame()
+      await expect.poll(() => comfyPage.subgraph.isInSubgraph()).toBe(true)
+
+      const positionsBefore = await comfyPage.page.evaluate(() => {
+        const sg = [...window.app!.rootGraph.subgraphs.values()][0]
+        return sg.nodes.map((n) => ({
+          id: n.id,
+          x: n.pos[0],
+          y: n.pos[1]
+        }))
+      })
+
+      await expect
+        .poll(async () => {
+          const positions = await comfyPage.page.evaluate(() => {
+            const sg = [...window.app!.rootGraph.subgraphs.values()][0]
+            return sg.nodes.map((n) => ({
+              id: n.id,
+              x: n.pos[0],
+              y: n.pos[1]
+            }))
+          })
+          return positions.length
+        })
+        .toBeGreaterThan(0)
+
+      // Wait for the debounced draft persistence to flush to localStorage
+      await comfyPage.workflow.waitForDraftPersisted()
+
+      // Reload the page (draft auto-loads with hash preserved)
+      await comfyPage.page.reload({ waitUntil: 'domcontentloaded' })
+      await comfyPage.page.waitForFunction(
+        () => window.app && window.app.extensionManager
+      )
+      await comfyPage.page.locator('.p-blockui-mask').waitFor({
+        state: 'hidden'
+      })
+      await comfyPage.nextFrame()
+
+      // Wait for subgraph auto-entry via hash navigation
+      await expect
+        .poll(() => comfyPage.subgraph.isInSubgraph(), { timeout: 10000 })
+        .toBe(true)
+
+      // Verify all internal node positions are preserved
+      for (const before of positionsBefore) {
+        await expect
+          .poll(async () => {
+            const positionsNow = await comfyPage.page.evaluate(() => {
+              const sg = [...window.app!.rootGraph.subgraphs.values()][0]
+              return sg.nodes.map((n) => ({
+                id: n.id,
+                x: n.pos[0],
+                y: n.pos[1]
+              }))
+            })
+            const after = positionsNow.find((n) => n.id === before.id)
+            if (!after) return null
+            return { x: after.x, y: after.y }
+          })
+          .toMatchObject({
+            x: expect.closeTo(before.x, 0),
+            y: expect.closeTo(before.y, 0)
+          })
+      }
+    })
+  }
+)
diff --git a/browser_tests/tests/subgraph/subgraphDuplicateIndependentValues.spec.ts b/browser_tests/tests/subgraph/subgraphDuplicateIndependentValues.spec.ts
new file mode 100644
index 0000000000..9a156bdd9f
--- /dev/null
+++ b/browser_tests/tests/subgraph/subgraphDuplicateIndependentValues.spec.ts
@@ -0,0 +1,88 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+
+async function openVueNodeContextMenu(comfyPage: ComfyPage, nodeTitle: string) {
+  const fixture = await comfyPage.vueNodes.getFixtureByTitle(nodeTitle)
+  await comfyPage.contextMenu.openForVueNode(fixture.header)
+}
+
+test.describe(
+  'Subgraph Duplicate Independent Values',
+  { tag: ['@slow', '@subgraph', '@vue-nodes'] },
+  () => {
+    test('Duplicated subgraphs maintain independent widget values', async ({
+      comfyPage
+    }) => {
+      const clipNodeTitle = 'CLIP Text Encode (Prompt)'
+
+      // Convert first CLIP Text Encode node to subgraph
+      await openVueNodeContextMenu(comfyPage, clipNodeTitle)
+      await comfyPage.contextMenu.clickMenuItemExact('Convert to Subgraph')
+      await comfyPage.contextMenu.waitForHidden()
+      const subgraphNode = comfyPage.vueNodes.getNodeByTitle('New Subgraph')
+      await expect(subgraphNode).toBeVisible()
+
+      // Duplicate the subgraph
+      await openVueNodeContextMenu(comfyPage, 'New Subgraph')
+      await comfyPage.contextMenu.clickMenuItemExact('Duplicate')
+      await comfyPage.contextMenu.waitForHidden()
+
+      // Capture both subgraph node IDs
+      const subgraphNodes = comfyPage.vueNodes.getNodeByTitle('New Subgraph')
+      await expect(subgraphNodes).toHaveCount(2)
+      const nodeIds = await subgraphNodes.evaluateAll((nodes) =>
+        nodes
+          .map((n) => n.getAttribute('data-node-id'))
+          .filter((id): id is string => id !== null)
+      )
+      const [nodeId1, nodeId2] = nodeIds
+
+      // Enter first subgraph, set text widget value
+      await comfyPage.vueNodes.enterSubgraph(nodeId1)
+      await comfyPage.vueNodes.waitForNodes()
+      const textarea1 = comfyPage.vueNodes
+        .getNodeByTitle(clipNodeTitle)
+        .first()
+        .getByRole('textbox', { name: 'text' })
+      await textarea1.fill('subgraph1_value')
+      await expect(textarea1).toHaveValue('subgraph1_value')
+      await comfyPage.subgraph.exitViaBreadcrumb()
+
+      // Enter second subgraph, set text widget value
+      await comfyPage.vueNodes.waitForNodes()
+      await comfyPage.vueNodes.enterSubgraph(nodeId2)
+      await comfyPage.vueNodes.waitForNodes()
+      const textarea2 = comfyPage.vueNodes
+        .getNodeByTitle(clipNodeTitle)
+        .first()
+        .getByRole('textbox', { name: 'text' })
+      await textarea2.fill('subgraph2_value')
+      await expect(textarea2).toHaveValue('subgraph2_value')
+      await comfyPage.subgraph.exitViaBreadcrumb()
+
+      // Re-enter first subgraph, assert value preserved
+      await comfyPage.vueNodes.waitForNodes()
+      await comfyPage.vueNodes.enterSubgraph(nodeId1)
+      await comfyPage.vueNodes.waitForNodes()
+      const textarea1Again = comfyPage.vueNodes
+        .getNodeByTitle(clipNodeTitle)
+        .first()
+        .getByRole('textbox', { name: 'text' })
+      await expect(textarea1Again).toHaveValue('subgraph1_value')
+      await comfyPage.subgraph.exitViaBreadcrumb()
+
+      // Re-enter second subgraph, assert value preserved
+      await comfyPage.vueNodes.waitForNodes()
+      await comfyPage.vueNodes.enterSubgraph(nodeId2)
+      await comfyPage.vueNodes.waitForNodes()
+      const textarea2Again = comfyPage.vueNodes
+        .getNodeByTitle(clipNodeTitle)
+        .first()
+        .getByRole('textbox', { name: 'text' })
+      await expect(textarea2Again).toHaveValue('subgraph2_value')
+    })
+  }
+)
diff --git a/browser_tests/tests/subgraph/subgraphLifecycle.spec.ts b/browser_tests/tests/subgraph/subgraphLifecycle.spec.ts
new file mode 100644
index 0000000000..fb2596abd6
--- /dev/null
+++ b/browser_tests/tests/subgraph/subgraphLifecycle.spec.ts
@@ -0,0 +1,93 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+import { getPseudoPreviewWidgets } from '@e2e/helpers/promotedWidgets'
+
+const domPreviewSelector = '.image-preview'
+
+test.describe('Subgraph Lifecycle', { tag: ['@subgraph'] }, () => {
+  test.describe('Cleanup Behavior After Promoted Source Removal', () => {
+    test('Deleting the promoted source removes the exterior DOM widget', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-with-promoted-text-widget'
+      )
+
+      const textarea = comfyPage.page.getByTestId(
+        TestIds.widgets.domWidgetTextarea
+      )
+      await expect(textarea).toBeVisible()
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
+      await subgraphNode.navigateIntoSubgraph()
+
+      const clipNode = await comfyPage.nodeOps.getNodeRefById('10')
+      await clipNode.delete()
+
+      await comfyPage.subgraph.exitViaBreadcrumb()
+
+      await expect(
+        comfyPage.page.getByTestId(TestIds.widgets.domWidgetTextarea)
+      ).toHaveCount(0)
+    })
+  })
+
+  test.describe('Unpack/Remove Cleanup for Pseudo-Preview Targets', () => {
+    test('Unpacking the preview subgraph clears promoted preview state and DOM', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-with-preview-node'
+      )
+
+      await expect
+        .poll(async () => {
+          const widgets = await getPseudoPreviewWidgets(comfyPage, '5')
+          return widgets.length
+        })
+        .toBeGreaterThan(0)
+
+      await comfyPage.page.evaluate(() => {
+        const graph = window.app!.graph!
+        const subgraphNode = graph.getNodeById('5')
+        if (!subgraphNode || !subgraphNode.isSubgraphNode()) return
+        graph.unpackSubgraph(subgraphNode)
+      })
+      await comfyPage.nextFrame()
+
+      await expect
+        .poll(async () => comfyPage.subgraph.countGraphPseudoPreviewEntries())
+        .toBe(0)
+      await expect(comfyPage.page.locator(domPreviewSelector)).toHaveCount(0)
+    })
+
+    test('Removing the preview subgraph clears promoted preview state and DOM', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-with-preview-node'
+      )
+
+      await expect
+        .poll(async () => {
+          const widgets = await getPseudoPreviewWidgets(comfyPage, '5')
+          return widgets.length
+        })
+        .toBeGreaterThan(0)
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('5')
+      await expect.poll(() => subgraphNode.exists()).toBe(true)
+
+      await subgraphNode.delete()
+
+      await expect.poll(() => subgraphNode.exists()).toBe(false)
+
+      await expect
+        .poll(async () => comfyPage.subgraph.countGraphPseudoPreviewEntries())
+        .toBe(0)
+      await expect(comfyPage.page.locator(domPreviewSelector)).toHaveCount(0)
+    })
+  })
+})
diff --git a/browser_tests/tests/subgraph/subgraphNavigation.spec.ts b/browser_tests/tests/subgraph/subgraphNavigation.spec.ts
new file mode 100644
index 0000000000..2b869d529b
--- /dev/null
+++ b/browser_tests/tests/subgraph/subgraphNavigation.spec.ts
@@ -0,0 +1,334 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+
+const UPDATED_SUBGRAPH_TITLE = 'Updated Subgraph Title'
+
+function hasVisibleNodeInViewport() {
+  const canvas = window.app!.canvas
+  if (!canvas?.graph?._nodes?.length) return false
+
+  const ds = canvas.ds
+  const cw = canvas.canvas.width / window.devicePixelRatio
+  const ch = canvas.canvas.height / window.devicePixelRatio
+  const visLeft = -ds.offset[0]
+  const visTop = -ds.offset[1]
+  const visRight = visLeft + cw / ds.scale
+  const visBottom = visTop + ch / ds.scale
+
+  for (const node of canvas.graph._nodes) {
+    const [nx, ny] = node.pos
+    const [nw, nh] = node.size
+    if (
+      nx + nw > visLeft &&
+      nx < visRight &&
+      ny + nh > visTop &&
+      ny < visBottom
+    )
+      return true
+  }
+  return false
+}
+
+test.describe('Subgraph Navigation', { tag: ['@slow', '@subgraph'] }, () => {
+  test.describe('Subgraph Navigation and UI', () => {
+    test('Breadcrumb updates when subgraph node title is changed', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/nested-subgraph')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('10')
+      const nodePos = await subgraphNode.getPosition()
+      const nodeSize = await subgraphNode.getSize()
+
+      await subgraphNode.navigateIntoSubgraph()
+
+      const breadcrumb = comfyPage.page.getByTestId(TestIds.breadcrumb.subgraph)
+      await expect(breadcrumb).toBeVisible({ timeout: 20_000 })
+      const initialBreadcrumbText = (await breadcrumb.textContent()) ?? ''
+
+      await comfyPage.keyboard.press('Escape')
+
+      await comfyPage.canvas.dblclick({
+        position: {
+          x: nodePos.x + nodeSize.width / 2,
+          y: nodePos.y - 10
+        },
+        delay: 5
+      })
+
+      await expect(comfyPage.page.locator('.node-title-editor')).toBeVisible()
+
+      await comfyPage.page.keyboard.press('Control+a')
+      await comfyPage.page.keyboard.type(UPDATED_SUBGRAPH_TITLE)
+      await comfyPage.keyboard.press('Enter')
+
+      await subgraphNode.navigateIntoSubgraph()
+      await expect(breadcrumb).toBeVisible()
+
+      await expect(breadcrumb).toContainText(UPDATED_SUBGRAPH_TITLE)
+      await expect(breadcrumb).not.toHaveText(initialBreadcrumbText)
+    })
+
+    test('Switching workflows while inside subgraph returns to root graph context and hides the breadcrumb', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const breadcrumb = comfyPage.page.getByTestId(TestIds.breadcrumb.subgraph)
+      const backButton = breadcrumb.locator('.back-button')
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+      await comfyPage.nextFrame()
+
+      await expect.poll(() => comfyPage.subgraph.isInSubgraph()).toBe(true)
+      await expect(backButton).toBeVisible()
+
+      await comfyPage.workflow.loadWorkflow('default')
+
+      await expect.poll(() => comfyPage.subgraph.isInSubgraph()).toBe(false)
+      await expect(backButton).toHaveCount(0)
+
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      await expect.poll(() => comfyPage.subgraph.isInSubgraph()).toBe(false)
+      await expect(backButton).toHaveCount(0)
+    })
+  })
+
+  test.describe('Navigation Hotkeys', () => {
+    test('Navigation hotkey can be customized', async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      await comfyPage.settings.setSetting('Comfy.Keybinding.NewBindings', [
+        {
+          commandId: 'Comfy.Graph.ExitSubgraph',
+          combo: {
+            key: 'q',
+            ctrl: false,
+            alt: true,
+            shift: false
+          }
+        }
+      ])
+
+      await comfyPage.settings.setSetting('Comfy.Keybinding.UnsetBindings', [
+        {
+          commandId: 'Comfy.Graph.ExitSubgraph',
+          combo: {
+            key: 'Escape',
+            ctrl: false,
+            alt: false,
+            shift: false
+          }
+        }
+      ])
+
+      await comfyPage.page.reload()
+      await comfyPage.setup()
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+      await expect(
+        comfyPage.page.getByTestId(TestIds.breadcrumb.subgraph)
+      ).toBeVisible()
+
+      await expect.poll(() => comfyPage.subgraph.isInSubgraph()).toBe(true)
+
+      await comfyPage.keyboard.press('Escape')
+      await expect
+        .poll(() => comfyPage.subgraph.isInSubgraph(), {
+          message:
+            'Escape should stay inside the subgraph after the default binding is unset'
+        })
+        .toBe(true)
+
+      await comfyPage.keyboard.press('Alt+q')
+      await expect.poll(() => comfyPage.subgraph.isInSubgraph()).toBe(false)
+    })
+
+    test('Escape prioritizes closing dialogs over exiting subgraph', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+      await expect(
+        comfyPage.page.getByTestId(TestIds.breadcrumb.subgraph)
+      ).toBeVisible()
+
+      await expect
+        .poll(() => comfyPage.subgraph.isInSubgraph(), {
+          message:
+            'Precondition failed: expected to be inside the subgraph before opening settings'
+        })
+        .toBe(true)
+
+      await comfyPage.page.keyboard.press('Control+,')
+      await expect(
+        comfyPage.page.getByTestId(TestIds.dialogs.settings)
+      ).toBeVisible()
+
+      await comfyPage.keyboard.press('Escape')
+
+      await expect(
+        comfyPage.page.getByTestId(TestIds.dialogs.settings)
+      ).toBeHidden()
+
+      await expect.poll(() => comfyPage.subgraph.isInSubgraph()).toBe(true)
+
+      await comfyPage.keyboard.press('Escape')
+      await expect.poll(() => comfyPage.subgraph.isInSubgraph()).toBe(false)
+    })
+  })
+
+  test.describe('Subgraph viewport restoration', () => {
+    test('first visit fits viewport to subgraph nodes (LG)', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-with-promoted-text-widget'
+      )
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
+      await subgraphNode.navigateIntoSubgraph()
+
+      await expect
+        .poll(() => comfyPage.page.evaluate(hasVisibleNodeInViewport))
+        .toBe(true)
+    })
+
+    test('first visit fits viewport to subgraph nodes (Vue)', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-with-promoted-text-widget'
+      )
+      await comfyPage.vueNodes.waitForNodes()
+
+      await comfyPage.vueNodes.enterSubgraph('11')
+
+      await expect
+        .poll(() => comfyPage.page.evaluate(hasVisibleNodeInViewport))
+        .toBe(true)
+    })
+
+    test('viewport is restored when returning to root (Vue)', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-with-promoted-text-widget'
+      )
+      await comfyPage.vueNodes.waitForNodes()
+
+      const rootViewport = await comfyPage.page.evaluate(() => {
+        const ds = window.app!.canvas.ds
+        return { scale: ds.scale, offset: [...ds.offset] }
+      })
+
+      await comfyPage.vueNodes.enterSubgraph('11')
+      await comfyPage.nextFrame()
+
+      await comfyPage.subgraph.exitViaBreadcrumb()
+
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(() => {
+            const ds = window.app!.canvas.ds
+            return { scale: ds.scale, offset: [...ds.offset] }
+          })
+        )
+        .toEqual({
+          scale: expect.closeTo(rootViewport.scale, 2),
+          offset: [
+            expect.closeTo(rootViewport.offset[0], 0),
+            expect.closeTo(rootViewport.offset[1], 0)
+          ]
+        })
+    })
+  })
+
+  test.describe('Subgraph progress clear on navigation', () => {
+    test('Stale progress is cleared on subgraph node after navigating back', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNodeId = await comfyPage.subgraph.findSubgraphNodeId()
+
+      await comfyPage.page.evaluate((nodeId) => {
+        const node = window.app!.canvas.graph!.getNodeById(nodeId)!
+        node.progress = 0.5
+      }, subgraphNodeId)
+
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(
+            (nodeId) => window.app!.canvas.graph!.getNodeById(nodeId)!.progress,
+            subgraphNodeId
+          )
+        )
+        .toBe(0.5)
+
+      const subgraphNode =
+        await comfyPage.nodeOps.getNodeRefById(subgraphNodeId)
+      await subgraphNode.navigateIntoSubgraph()
+
+      await expect.poll(() => comfyPage.subgraph.isInSubgraph()).toBe(true)
+
+      await comfyPage.keyboard.press('Escape')
+
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate((nodeId) => {
+            return window.app!.canvas.graph!.getNodeById(nodeId)!.progress
+          }, subgraphNodeId)
+        )
+        .toBeUndefined()
+    })
+
+    test('Stale progress is cleared when switching workflows while inside subgraph', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNodeId = await comfyPage.subgraph.findSubgraphNodeId()
+
+      await comfyPage.page.evaluate((nodeId) => {
+        const node = window.app!.canvas.graph!.getNodeById(nodeId)!
+        node.progress = 0.7
+      }, subgraphNodeId)
+
+      const subgraphNode =
+        await comfyPage.nodeOps.getNodeRefById(subgraphNodeId)
+      await subgraphNode.navigateIntoSubgraph()
+
+      await expect.poll(() => comfyPage.subgraph.isInSubgraph()).toBe(true)
+
+      await comfyPage.workflow.loadWorkflow('default')
+
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(() => {
+            const graph = window.app!.canvas.graph!
+            const subgraphNode = graph.nodes.find(
+              (node) =>
+                typeof node.isSubgraphNode === 'function' &&
+                node.isSubgraphNode()
+            )
+            if (!subgraphNode) return { exists: false, progress: null }
+
+            return { exists: true, progress: subgraphNode.progress }
+          })
+        )
+        .toEqual({ exists: true, progress: undefined })
+    })
+  })
+})
diff --git a/browser_tests/tests/subgraph/subgraphNested.spec.ts b/browser_tests/tests/subgraph/subgraphNested.spec.ts
new file mode 100644
index 0000000000..41323f3577
--- /dev/null
+++ b/browser_tests/tests/subgraph/subgraphNested.spec.ts
@@ -0,0 +1,193 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test, comfyExpect } from '@e2e/fixtures/ComfyPage'
+import { SubgraphHelper } from '@e2e/fixtures/helpers/SubgraphHelper'
+import { TestIds } from '@e2e/fixtures/selectors'
+
+test.describe('Nested Subgraphs', { tag: ['@subgraph'] }, () => {
+  test.describe('Nested subgraph configure order', () => {
+    const WORKFLOW = 'subgraphs/subgraph-nested-duplicate-ids'
+
+    test('Loads and queues without nested promotion resolution failures', async ({
+      comfyPage
+    }) => {
+      const { warnings, dispose } = SubgraphHelper.collectConsoleWarnings(
+        comfyPage.page,
+        ['No link found', 'Failed to resolve legacy -1']
+      )
+
+      try {
+        await comfyPage.workflow.loadWorkflow(WORKFLOW)
+
+        const responsePromise = comfyPage.page.waitForResponse('**/api/prompt')
+        await comfyPage.command.executeCommand('Comfy.QueuePrompt')
+
+        const response = await responsePromise
+        expect(warnings).toEqual([])
+        expect(response.ok()).toBe(true)
+      } finally {
+        dispose()
+      }
+    })
+  })
+
+  test.describe(
+    'Nested subgraph duplicate widget names',
+    { tag: ['@widget'] },
+    () => {
+      const WORKFLOW = 'subgraphs/nested-duplicate-widget-names'
+
+      test.beforeEach(async ({ comfyPage }) => {
+        await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+      })
+
+      test('Promoted widget values from both inner CLIPTextEncode nodes are distinguishable', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(WORKFLOW)
+
+        await comfyExpect(async () => {
+          const widgetValues = await comfyPage.page.evaluate(() => {
+            const graph = window.app!.canvas.graph!
+            const outerNode = graph.getNodeById('4')
+            if (
+              !outerNode ||
+              typeof outerNode.isSubgraphNode !== 'function' ||
+              !outerNode.isSubgraphNode()
+            ) {
+              return []
+            }
+
+            const innerSubgraphNode = outerNode.subgraph.getNodeById(3)
+            if (!innerSubgraphNode) return []
+
+            return (innerSubgraphNode.widgets ?? []).map((w) => ({
+              name: w.name,
+              value: w.value
+            }))
+          })
+
+          const textWidgets = widgetValues.filter((w) =>
+            w.name.startsWith('text')
+          )
+          comfyExpect(textWidgets).toHaveLength(2)
+
+          const values = textWidgets.map((w) => w.value)
+          comfyExpect(values).toContain('11111111111')
+          comfyExpect(values).toContain('22222222222')
+        }).toPass({ timeout: 5_000 })
+      })
+    }
+  )
+
+  test.describe(
+    'Nested subgraph pack preserves promoted widget values',
+    { tag: ['@widget'] },
+    () => {
+      const WORKFLOW = 'subgraphs/nested-pack-promoted-values'
+      const HOST_NODE_ID = '57'
+
+      test.beforeEach(async ({ comfyPage }) => {
+        await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+      })
+
+      test('Promoted widget values persist after packing interior nodes into nested subgraph', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(WORKFLOW)
+        await comfyPage.vueNodes.waitForNodes()
+
+        const nodeLocator = comfyPage.vueNodes.getNodeLocator(HOST_NODE_ID)
+        await comfyExpect(nodeLocator).toBeVisible()
+
+        const widthWidget = nodeLocator
+          .getByLabel('width', { exact: true })
+          .first()
+        const heightWidget = nodeLocator
+          .getByLabel('height', { exact: true })
+          .first()
+        const stepsWidget = nodeLocator
+          .getByLabel('steps', { exact: true })
+          .first()
+        const textWidget = nodeLocator.getByRole('textbox', { name: 'prompt' })
+
+        const widthControls =
+          comfyPage.vueNodes.getInputNumberControls(widthWidget)
+        const heightControls =
+          comfyPage.vueNodes.getInputNumberControls(heightWidget)
+        const stepsControls =
+          comfyPage.vueNodes.getInputNumberControls(stepsWidget)
+
+        await comfyExpect(async () => {
+          await comfyExpect(widthControls.input).toHaveValue('1024')
+          await comfyExpect(heightControls.input).toHaveValue('1024')
+          await comfyExpect(stepsControls.input).toHaveValue('8')
+          await comfyExpect(textWidget).toHaveValue(/Latina female/)
+        }).toPass({ timeout: 5000 })
+
+        await comfyPage.subgraph.packAllInteriorNodes(HOST_NODE_ID)
+
+        await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+        await comfyPage.vueNodes.waitForNodes()
+
+        const nodeAfter = comfyPage.vueNodes.getNodeLocator(HOST_NODE_ID)
+        await comfyExpect(nodeAfter).toBeVisible()
+
+        const widthAfter = nodeAfter
+          .getByLabel('width', { exact: true })
+          .first()
+        const heightAfter = nodeAfter
+          .getByLabel('height', { exact: true })
+          .first()
+        const stepsAfter = nodeAfter
+          .getByLabel('steps', { exact: true })
+          .first()
+        const textAfter = nodeAfter.getByRole('textbox', { name: 'prompt' })
+
+        const widthControlsAfter =
+          comfyPage.vueNodes.getInputNumberControls(widthAfter)
+        const heightControlsAfter =
+          comfyPage.vueNodes.getInputNumberControls(heightAfter)
+        const stepsControlsAfter =
+          comfyPage.vueNodes.getInputNumberControls(stepsAfter)
+
+        await comfyExpect(async () => {
+          await comfyExpect(widthControlsAfter.input).toHaveValue('1024')
+          await comfyExpect(heightControlsAfter.input).toHaveValue('1024')
+          await comfyExpect(stepsControlsAfter.input).toHaveValue('8')
+          await comfyExpect(textAfter).toHaveValue(/Latina female/)
+        }).toPass({ timeout: 5000 })
+      })
+    }
+  )
+
+  test.describe(
+    'Nested subgraph stale proxyWidgets',
+    { tag: ['@widget'] },
+    () => {
+      const WORKFLOW = 'subgraphs/nested-subgraph-stale-proxy-widgets'
+
+      test.beforeEach(async ({ comfyPage }) => {
+        await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+      })
+
+      test('Outer subgraph node has no stale proxyWidgets after nested packing', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(WORKFLOW)
+        await comfyPage.vueNodes.waitForNodes()
+
+        const outerNode = comfyPage.vueNodes.getNodeLocator('10')
+        await comfyExpect(outerNode).toBeVisible()
+
+        const widgets = outerNode.getByTestId(TestIds.widgets.widget)
+
+        await comfyExpect(widgets).toHaveCount(1)
+        await comfyExpect(widgets.first()).toBeVisible()
+
+        const seedWidget = outerNode.getByLabel('seed', { exact: true })
+        await comfyExpect(seedWidget).toBeVisible()
+      })
+    }
+  )
+})
diff --git a/browser_tests/tests/subgraph/subgraphOperations.spec.ts b/browser_tests/tests/subgraph/subgraphOperations.spec.ts
new file mode 100644
index 0000000000..8042180470
--- /dev/null
+++ b/browser_tests/tests/subgraph/subgraphOperations.spec.ts
@@ -0,0 +1,82 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+
+test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+    await comfyPage.settings.setSetting(
+      'Comfy.NodeSearchBoxImpl',
+      'v1 (legacy)'
+    )
+  })
+
+  test.describe('Subgraph Clipboard Operations', () => {
+    test('Can copy and paste nodes inside a subgraph', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      const initialNodeCount = await comfyPage.subgraph.getNodeCount()
+
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(() => {
+            const nodes = window.app!.canvas.graph!.nodes
+            return nodes?.[0]?.id ?? null
+          })
+        )
+        .not.toBeNull()
+
+      const nodeId = await comfyPage.page.evaluate(() => {
+        const nodes = window.app!.canvas.graph!.nodes
+        return nodes?.[0]?.id ?? null
+      })
+
+      const nodeToClone = await comfyPage.nodeOps.getNodeRefById(String(nodeId))
+      await nodeToClone.click('title')
+
+      await comfyPage.keyboard.press('ControlOrMeta+c')
+
+      await comfyPage.keyboard.press('ControlOrMeta+v')
+
+      await expect
+        .poll(() => comfyPage.subgraph.getNodeCount())
+        .toBe(initialNodeCount + 1)
+    })
+  })
+
+  test.describe('Subgraph History Operations', () => {
+    test('Can undo and redo operations inside a subgraph', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      await comfyPage.canvasOps.doubleClick()
+      await comfyPage.searchBox.fillAndSelectFirstNode('Note')
+      await comfyPage.nextFrame()
+
+      const initialCount = await comfyPage.subgraph.getNodeCount()
+
+      await comfyPage.keyboard.undo()
+      await comfyPage.nextFrame()
+
+      await expect
+        .poll(() => comfyPage.subgraph.getNodeCount())
+        .toBe(initialCount - 1)
+
+      await comfyPage.keyboard.redo()
+      await comfyPage.nextFrame()
+
+      await expect
+        .poll(() => comfyPage.subgraph.getNodeCount())
+        .toBe(initialCount)
+    })
+  })
+})
diff --git a/browser_tests/tests/subgraph/subgraphPromotion.spec.ts b/browser_tests/tests/subgraph/subgraphPromotion.spec.ts
new file mode 100644
index 0000000000..a00a674007
--- /dev/null
+++ b/browser_tests/tests/subgraph/subgraphPromotion.spec.ts
@@ -0,0 +1,540 @@
+import { expect } from '@playwright/test'
+
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+import { fitToViewInstant } from '@e2e/helpers/fitToView'
+import {
+  getPromotedWidgetNames,
+  getPromotedWidgetCount
+} from '@e2e/helpers/promotedWidgets'
+
+async function expectPromotedWidgetNamesToContain(
+  comfyPage: ComfyPage,
+  nodeId: string,
+  widgetName: string
+) {
+  await expect
+    .poll(() => getPromotedWidgetNames(comfyPage, nodeId))
+    .toContain(widgetName)
+}
+
+async function expectPromotedWidgetCountToBeGreaterThan(
+  comfyPage: ComfyPage,
+  nodeId: string,
+  count: number
+) {
+  await expect
+    .poll(() => getPromotedWidgetCount(comfyPage, nodeId))
+    .toBeGreaterThan(count)
+}
+
+test.describe(
+  'Subgraph Widget Promotion',
+  { tag: ['@subgraph', '@widget'] },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+    })
+
+    test.describe('Auto-promotion on Convert to Subgraph', () => {
+      test('Recommended widgets are auto-promoted when creating a subgraph', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow('default')
+
+        const ksampler = await comfyPage.nodeOps.getNodeRefById('3')
+        await ksampler.click('title')
+        const subgraphNode = await ksampler.convertToSubgraph()
+        await comfyPage.nextFrame()
+
+        await expect.poll(() => subgraphNode.exists()).toBe(true)
+
+        const nodeId = String(subgraphNode.id)
+        await expectPromotedWidgetNamesToContain(comfyPage, nodeId, 'seed')
+
+        await expectPromotedWidgetCountToBeGreaterThan(comfyPage, nodeId, 0)
+      })
+
+      test('Preview-capable nodes keep regular and pseudo-widget promotions when converted', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow('default')
+
+        // Select the positive CLIPTextEncode node (id 6)
+        const clipNode = await comfyPage.nodeOps.getNodeRefById('6')
+        await clipNode.click('title')
+        const subgraphNode = await clipNode.convertToSubgraph()
+        await comfyPage.nextFrame()
+
+        const nodeId = String(subgraphNode.id)
+        // CLIPTextEncode is in the recommendedNodes list, so its text widget
+        // should be promoted
+        await expectPromotedWidgetNamesToContain(comfyPage, nodeId, 'text')
+      })
+
+      test('SaveImage/PreviewImage nodes get pseudo-widget promoted', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow('default')
+
+        // Pan to SaveImage node (rightmost, may be off-screen in CI)
+        const saveNode = await comfyPage.nodeOps.getNodeRefById('9')
+        await saveNode.centerOnNode()
+
+        await saveNode.click('title')
+        const subgraphNode = await saveNode.convertToSubgraph()
+        await comfyPage.nextFrame()
+
+        // SaveImage is in the recommendedNodes list, so filename_prefix is promoted
+        await expectPromotedWidgetNamesToContain(
+          comfyPage,
+          String(subgraphNode.id),
+          'filename_prefix'
+        )
+      })
+    })
+
+    test.describe('Promoted Widget Visibility in LiteGraph Mode', () => {
+      test('Promoted text widget is visible on SubgraphNode', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-promoted-text-widget'
+        )
+
+        const textarea = comfyPage.page.getByTestId(
+          TestIds.widgets.domWidgetTextarea
+        )
+        await expect(textarea).toBeVisible()
+        await expect(textarea).toHaveCount(1)
+      })
+    })
+
+    test.describe('Promoted Widget Visibility in Vue Mode', () => {
+      test.beforeEach(async ({ comfyPage }) => {
+        await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+      })
+
+      test('Promoted text widget renders and enters the subgraph in Vue mode', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-promoted-text-widget'
+        )
+        await comfyPage.vueNodes.waitForNodes()
+
+        const subgraphVueNode = comfyPage.vueNodes.getNodeLocator('11')
+        await expect(subgraphVueNode).toBeVisible()
+
+        const enterButton = subgraphVueNode.getByTestId('subgraph-enter-button')
+        await expect(enterButton).toBeVisible()
+
+        const nodeBody = subgraphVueNode.getByTestId('node-body-11')
+        await expect(nodeBody).toBeVisible()
+
+        const widgets = nodeBody.locator('.lg-node-widgets > div')
+        await expect(widgets.first()).toBeVisible()
+        await comfyPage.vueNodes.enterSubgraph('11')
+        await comfyPage.nextFrame()
+
+        await expect.poll(() => comfyPage.subgraph.isInSubgraph()).toBe(true)
+      })
+    })
+
+    test.describe('Promoted Widget Reactivity', () => {
+      test('Promoted and interior widgets stay in sync across navigation', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-promoted-text-widget'
+        )
+
+        const testContent = 'promoted-value-sync-test'
+
+        const textarea = comfyPage.page.getByTestId(
+          TestIds.widgets.domWidgetTextarea
+        )
+        await textarea.fill(testContent)
+        await comfyPage.nextFrame()
+
+        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
+        await subgraphNode.navigateIntoSubgraph()
+
+        const interiorTextarea = comfyPage.page.getByTestId(
+          TestIds.widgets.domWidgetTextarea
+        )
+        await expect(interiorTextarea).toHaveValue(testContent)
+
+        const updatedInteriorContent = 'interior-value-sync-test'
+        await interiorTextarea.fill(updatedInteriorContent)
+        await comfyPage.nextFrame()
+
+        await comfyPage.subgraph.exitViaBreadcrumb()
+
+        const promotedTextarea = comfyPage.page.getByTestId(
+          TestIds.widgets.domWidgetTextarea
+        )
+        await expect(promotedTextarea).toHaveValue(updatedInteriorContent)
+      })
+    })
+
+    test.describe('Manual Promote/Demote via Context Menu', () => {
+      test('Can promote and un-promote a widget from inside a subgraph', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+        await subgraphNode.navigateIntoSubgraph()
+
+        const ksampler = await comfyPage.nodeOps.getNodeRefById('1')
+        await ksampler.click('title')
+
+        const stepsWidget = await ksampler.getWidget(2)
+        const widgetPos = await stepsWidget.getPosition()
+        await comfyPage.canvasOps.mouseClickAt(widgetPos, { button: 'right' })
+
+        // Look for the Promote Widget menu entry
+        const promoteEntry = comfyPage.page
+          .locator('.litemenu-entry')
+          .filter({ hasText: /Promote Widget/ })
+
+        await expect(promoteEntry).toBeVisible()
+        await promoteEntry.click()
+        await expect(promoteEntry).toBeHidden()
+
+        // Navigate back to parent
+        await comfyPage.subgraph.exitViaBreadcrumb()
+
+        // SubgraphNode should now have the promoted widget
+        await expectPromotedWidgetCountToBeGreaterThan(comfyPage, '2', 0)
+      })
+
+      test('Can un-promote a widget from inside a subgraph', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+        // First promote a canvas-rendered widget (KSampler "steps")
+        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+        await subgraphNode.navigateIntoSubgraph()
+
+        const ksampler = await comfyPage.nodeOps.getNodeRefById('1')
+        const stepsWidget = await ksampler.getWidget(2)
+        const widgetPos = await stepsWidget.getPosition()
+
+        await comfyPage.canvasOps.mouseClickAt(widgetPos, { button: 'right' })
+
+        const promoteEntry = comfyPage.page
+          .locator('.litemenu-entry')
+          .filter({ hasText: /Promote Widget/ })
+
+        await expect(promoteEntry).toBeVisible()
+        await promoteEntry.click()
+        // Wait for the context menu to close, confirming the action completed.
+        await expect(promoteEntry).toBeHidden()
+
+        await comfyPage.subgraph.exitViaBreadcrumb()
+
+        await fitToViewInstant(comfyPage)
+        await comfyPage.nextFrame()
+
+        await expectPromotedWidgetCountToBeGreaterThan(comfyPage, '2', 0)
+        const initialWidgetCount = await getPromotedWidgetCount(comfyPage, '2')
+
+        const subgraphNode2 = await comfyPage.nodeOps.getNodeRefById('2')
+        await subgraphNode2.navigateIntoSubgraph()
+        const ksampler2 = await comfyPage.nodeOps.getNodeRefById('1')
+        await ksampler2.click('title')
+        const stepsWidget2 = await ksampler2.getWidget(2)
+        const widgetPos2 = await stepsWidget2.getPosition()
+
+        await comfyPage.canvasOps.mouseClickAt(widgetPos2, { button: 'right' })
+
+        const unpromoteEntry = comfyPage.page
+          .locator('.litemenu-entry')
+          .filter({ hasText: /Un-Promote Widget/ })
+
+        await expect(unpromoteEntry).toBeVisible()
+        await unpromoteEntry.click()
+        await expect(unpromoteEntry).toBeHidden()
+
+        await comfyPage.subgraph.exitViaBreadcrumb()
+
+        await expect
+          .poll(() => getPromotedWidgetCount(comfyPage, '2'))
+          .toBeLessThan(initialWidgetCount)
+      })
+    })
+
+    test.describe('Textarea Widget Context Menu in Subgraph (Vue Mode)', () => {
+      test.beforeEach(async ({ comfyPage }) => {
+        await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+        await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+      })
+
+      test('Right-click on textarea widget inside subgraph shows Promote Widget option', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-text-widget'
+        )
+        await comfyPage.vueNodes.waitForNodes()
+
+        await comfyPage.vueNodes.enterSubgraph('11')
+        await comfyPage.nextFrame()
+        await comfyPage.vueNodes.waitForNodes()
+
+        const clipNode = comfyPage.vueNodes.getNodeLocator('10')
+        await expect(clipNode).toBeVisible()
+
+        await comfyPage.vueNodes.selectNode('10')
+        await comfyPage.nextFrame()
+
+        const textarea = clipNode.locator('textarea')
+        await expect(textarea).toBeVisible()
+        await textarea.dispatchEvent('contextmenu', {
+          bubbles: true,
+          cancelable: true,
+          button: 2
+        })
+        await comfyPage.nextFrame()
+
+        const promoteEntry = comfyPage.page
+          .locator('.p-contextmenu')
+          .locator('text=Promote Widget')
+
+        await expect(promoteEntry.first()).toBeVisible()
+      })
+    })
+
+    test.describe('Pseudo-Widget Promotion', () => {
+      test('Promoted preview nodes render custom content in Vue mode', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-preview-node'
+        )
+
+        // The SaveImage node is in the recommendedNodes list, so its
+        // filename_prefix widget should be auto-promoted
+        await expectPromotedWidgetNamesToContain(
+          comfyPage,
+          '5',
+          'filename_prefix'
+        )
+      })
+
+      test('Converting SaveImage to subgraph promotes its widgets', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow('default')
+
+        // Pan to SaveImage node (rightmost, may be off-screen in CI)
+        const saveNode = await comfyPage.nodeOps.getNodeRefById('9')
+        await saveNode.centerOnNode()
+
+        await saveNode.click('title')
+        const subgraphNode = await saveNode.convertToSubgraph()
+        await comfyPage.nextFrame()
+
+        // SaveImage is a recommended node, so filename_prefix should be promoted
+        const nodeId = String(subgraphNode.id)
+        await expectPromotedWidgetNamesToContain(
+          comfyPage,
+          nodeId,
+          'filename_prefix'
+        )
+        await expectPromotedWidgetCountToBeGreaterThan(comfyPage, nodeId, 0)
+      })
+    })
+
+    test.describe('Vue Mode - Promoted Preview Content', () => {
+      test.beforeEach(async ({ comfyPage }) => {
+        await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-preview-node'
+        )
+        await comfyPage.vueNodes.waitForNodes()
+
+        const subgraphVueNode = comfyPage.vueNodes.getNodeLocator('5')
+        await expect(subgraphVueNode).toBeVisible()
+
+        await expect
+          .poll(() => getPromotedWidgetNames(comfyPage, '5'))
+          .toEqual(
+            expect.arrayContaining([
+              'filename_prefix',
+              expect.stringMatching(/^\$\$/)
+            ])
+          )
+
+        const loadImageNode = await comfyPage.nodeOps.getNodeRefById('11')
+        const loadImagePosition = await loadImageNode.getPosition()
+        await comfyPage.dragDrop.dragAndDropFile('image64x64.webp', {
+          dropPosition: loadImagePosition
+        })
+
+        await comfyPage.command.executeCommand('Comfy.QueuePrompt')
+
+        const nodeBody = subgraphVueNode.getByTestId('node-body-5')
+        await expect(nodeBody).toBeVisible()
+        await expect(
+          nodeBody.locator('.lg-node-widgets > div').first()
+        ).toBeVisible()
+
+        await expect(nodeBody.locator('.image-preview img')).toHaveCount(1, {
+          timeout: 30_000
+        })
+        await expect(nodeBody.locator('.lg-node-widgets')).not.toContainText(
+          '$$canvas-image-preview'
+        )
+      })
+    })
+
+    test.describe('Nested Promoted Widget Disabled State', () => {
+      test('Externally linked promotions stay disabled while unlinked textareas remain editable', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-nested-promotion'
+        )
+
+        await expect
+          .poll(() => getPromotedWidgetNames(comfyPage, '5'))
+          .toEqual(expect.arrayContaining(['string_a', 'value']))
+
+        await expect
+          .poll(async () => {
+            const disabledState = await comfyPage.page.evaluate(() => {
+              const node = window.app!.canvas.graph!.getNodeById('5')
+              return (node?.widgets ?? []).map((w) => ({
+                name: w.name,
+                disabled: !!w.computedDisabled
+              }))
+            })
+            return disabledState.find((w) => w.name === 'string_a')?.disabled
+          })
+          .toBe(true)
+
+        const textareas = comfyPage.page.getByTestId(
+          TestIds.widgets.domWidgetTextarea
+        )
+        await expect(textareas.first()).toBeVisible()
+
+        let editedTextarea = false
+        const count = await textareas.count()
+        for (let i = 0; i < count; i++) {
+          const textarea = textareas.nth(i)
+          const wrapper = textarea.locator('..')
+          const opacity = await wrapper.evaluate(
+            (el) => getComputedStyle(el).opacity
+          )
+
+          if (opacity === '1' && (await textarea.isEditable())) {
+            const testContent = `nested-promotion-edit-${i}`
+            await textarea.fill(testContent)
+            await expect(textarea).toHaveValue(testContent)
+            editedTextarea = true
+            break
+          }
+        }
+        expect(editedTextarea).toBe(true)
+      })
+    })
+
+    test.describe('Promotion Cleanup', () => {
+      test('Removing subgraph node clears promotion store entries', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-promoted-text-widget'
+        )
+
+        // Verify promotions exist
+        await expect
+          .poll(() => getPromotedWidgetNames(comfyPage, '11'))
+          .toEqual(expect.arrayContaining([expect.anything()]))
+
+        // Delete the subgraph node
+        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
+        await subgraphNode.delete()
+
+        // Node no longer exists, so promoted widgets should be gone
+        await expect.poll(() => subgraphNode.exists()).toBe(false)
+      })
+
+      test('Nested promoted widget entries reflect interior changes after slot removal', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-nested-promotion'
+        )
+
+        await expectPromotedWidgetCountToBeGreaterThan(comfyPage, '5', 0)
+        const initialNames = await getPromotedWidgetNames(comfyPage, '5')
+
+        const outerSubgraph = await comfyPage.nodeOps.getNodeRefById('5')
+        await outerSubgraph.navigateIntoSubgraph()
+
+        await expect
+          .poll(async () => {
+            return await comfyPage.page.evaluate(() => {
+              const graph = window.app!.canvas.graph
+              if (!graph || !('inputNode' in graph)) return null
+              return graph.inputs?.[0]?.name ?? null
+            })
+          })
+          .not.toBeNull()
+        const removedSlotName = await comfyPage.page.evaluate(() => {
+          const graph = window.app!.canvas.graph
+          if (!graph || !('inputNode' in graph)) return null
+          return graph.inputs?.[0]?.name ?? null
+        })
+
+        await comfyPage.subgraph.removeSlot('input')
+
+        await comfyPage.subgraph.exitViaBreadcrumb()
+
+        const expectedNames = [...initialNames]
+        const removedIndex = expectedNames.indexOf(removedSlotName!)
+        expect(removedIndex).toBeGreaterThanOrEqual(0)
+        expectedNames.splice(removedIndex, 1)
+
+        await expect
+          .poll(() => getPromotedWidgetNames(comfyPage, '5'))
+          .toEqual(expectedNames)
+      })
+
+      test('Removing I/O slot removes associated promoted widget', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-promoted-text-widget'
+        )
+
+        let initialWidgetCount = 0
+        await expect
+          .poll(() => getPromotedWidgetCount(comfyPage, '11'))
+          .toBeGreaterThan(0)
+        initialWidgetCount = await getPromotedWidgetCount(comfyPage, '11')
+
+        // Navigate into subgraph
+        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
+        await subgraphNode.navigateIntoSubgraph()
+
+        // Remove the text input slot
+        await comfyPage.subgraph.removeSlot('input', 'text')
+
+        // Navigate back via breadcrumb
+        await comfyPage.subgraph.exitViaBreadcrumb()
+
+        // Widget count should be reduced
+        await expect
+          .poll(() => getPromotedWidgetCount(comfyPage, '11'))
+          .toBeLessThan(initialWidgetCount)
+      })
+    })
+  }
+)
diff --git a/browser_tests/tests/subgraph/subgraphPromotionDom.spec.ts b/browser_tests/tests/subgraph/subgraphPromotionDom.spec.ts
new file mode 100644
index 0000000000..4ace589ffc
--- /dev/null
+++ b/browser_tests/tests/subgraph/subgraphPromotionDom.spec.ts
@@ -0,0 +1,163 @@
+import { expect } from '@playwright/test'
+
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { SubgraphHelper } from '@e2e/fixtures/helpers/SubgraphHelper'
+import { getPromotedWidgetNames } from '@e2e/helpers/promotedWidgets'
+
+const DOM_WIDGET_SELECTOR = '.comfy-multiline-input'
+const VISIBLE_DOM_WIDGET_SELECTOR = `${DOM_WIDGET_SELECTOR}:visible`
+const TEST_WIDGET_CONTENT = 'Test content that should persist'
+
+async function openSubgraphById(comfyPage: ComfyPage, nodeId: string) {
+  await comfyPage.page.evaluate((targetNodeId) => {
+    const node = window.app!.rootGraph.nodes.find(
+      (candidate) => String(candidate.id) === targetNodeId
+    )
+    if (!node || !('subgraph' in node) || !node.subgraph) {
+      throw new Error(`Subgraph node ${targetNodeId} not found`)
+    }
+
+    window.app!.canvas.openSubgraph(node.subgraph, node)
+  }, nodeId)
+
+  await expect
+    .poll(() =>
+      comfyPage.page.evaluate(() => {
+        const graph = window.app!.canvas.graph
+        return !!graph && 'inputNode' in graph
+      })
+    )
+    .toBe(true)
+}
+
+test.describe('Subgraph Promotion DOM', { tag: ['@subgraph'] }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
+  })
+
+  test('Promoted seed widget renders in node body, not header', async ({
+    comfyPage
+  }) => {
+    const subgraphNode =
+      await comfyPage.subgraph.convertDefaultKSamplerToSubgraph()
+
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+
+    const subgraphNodeId = String(subgraphNode.id)
+    await expect
+      .poll(() => getPromotedWidgetNames(comfyPage, subgraphNodeId))
+      .toContain('seed')
+
+    await comfyPage.vueNodes.waitForNodes()
+
+    const nodeLocator = comfyPage.vueNodes.getNodeLocator(subgraphNodeId)
+    await expect(nodeLocator).toBeVisible()
+
+    const seedWidget = nodeLocator.getByLabel('seed', { exact: true }).first()
+    await expect(seedWidget).toBeVisible()
+
+    await SubgraphHelper.expectWidgetBelowHeader(nodeLocator, seedWidget)
+  })
+
+  test.describe('DOM Widget Promotion', () => {
+    test('DOM widget stays visible and preserves content through subgraph navigation', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-with-promoted-text-widget'
+      )
+
+      const parentTextarea = comfyPage.page.locator(DOM_WIDGET_SELECTOR)
+      await expect(parentTextarea).toBeVisible()
+      await expect(parentTextarea).toHaveCount(1)
+      await parentTextarea.fill(TEST_WIDGET_CONTENT)
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
+      await expect
+        .poll(() => subgraphNode.exists(), 'Subgraph node 11 should exist')
+        .toBe(true)
+
+      await openSubgraphById(comfyPage, '11')
+
+      const subgraphTextarea = comfyPage.page.locator(DOM_WIDGET_SELECTOR)
+      await expect(subgraphTextarea).toBeVisible()
+      await expect(subgraphTextarea).toHaveCount(1)
+
+      await expect(subgraphTextarea).toHaveValue(TEST_WIDGET_CONTENT)
+
+      await comfyPage.keyboard.press('Escape')
+
+      const backToParentTextarea = comfyPage.page.locator(DOM_WIDGET_SELECTOR)
+      await expect(backToParentTextarea).toBeVisible()
+      await expect(backToParentTextarea).toHaveCount(1)
+      await expect(backToParentTextarea).toHaveValue(TEST_WIDGET_CONTENT)
+    })
+
+    test('DOM elements are cleaned up when subgraph node is removed', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-with-promoted-text-widget'
+      )
+
+      await expect(comfyPage.page.locator(DOM_WIDGET_SELECTOR)).toHaveCount(1)
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
+      await subgraphNode.delete()
+
+      await expect(comfyPage.page.locator(DOM_WIDGET_SELECTOR)).toHaveCount(0)
+    })
+
+    test('DOM elements are cleaned up when widget is disconnected from I/O', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-with-promoted-text-widget'
+      )
+
+      await expect(comfyPage.page.locator(DOM_WIDGET_SELECTOR)).toHaveCount(1)
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
+      await expect
+        .poll(() => subgraphNode.exists(), 'Subgraph node 11 should exist')
+        .toBe(true)
+
+      await openSubgraphById(comfyPage, '11')
+
+      await comfyPage.subgraph.removeSlot('input', 'text')
+
+      await comfyPage.subgraph.exitViaBreadcrumb()
+
+      await expect(
+        comfyPage.page.locator(VISIBLE_DOM_WIDGET_SELECTOR)
+      ).toHaveCount(0)
+    })
+
+    test('Multiple promoted widgets are handled correctly', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-with-multiple-promoted-widgets'
+      )
+
+      const visibleWidgets = comfyPage.page.locator(VISIBLE_DOM_WIDGET_SELECTOR)
+      await expect(visibleWidgets).toHaveCount(2)
+      const parentCount = await visibleWidgets.count()
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
+      await expect
+        .poll(() => subgraphNode.exists(), 'Subgraph node 11 should exist')
+        .toBe(true)
+
+      await openSubgraphById(comfyPage, '11')
+
+      await expect(visibleWidgets).toHaveCount(parentCount)
+
+      await comfyPage.subgraph.exitViaBreadcrumb()
+
+      await expect(visibleWidgets).toHaveCount(parentCount)
+    })
+  })
+})
diff --git a/browser_tests/tests/subgraphSearchAliases.spec.ts b/browser_tests/tests/subgraph/subgraphSearch.spec.ts
similarity index 52%
rename from browser_tests/tests/subgraphSearchAliases.spec.ts
rename to browser_tests/tests/subgraph/subgraphSearch.spec.ts
index ee1bbbb488..7b584cd4e5 100644
--- a/browser_tests/tests/subgraphSearchAliases.spec.ts
+++ b/browser_tests/tests/subgraph/subgraphSearch.spec.ts
@@ -1,22 +1,11 @@
 import { expect } from '@playwright/test'
 
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 async function createSubgraphAndNavigateInto(comfyPage: ComfyPage) {
-  await comfyPage.workflow.loadWorkflow('default')
-  await comfyPage.nextFrame()
-
-  const ksampler = await comfyPage.nodeOps.getNodeRefById('3')
-  await ksampler.click('title')
-  await ksampler.convertToSubgraph()
-  await comfyPage.nextFrame()
-
-  const subgraphNodes =
-    await comfyPage.nodeOps.getNodeRefsByTitle('New Subgraph')
-  expect(subgraphNodes.length).toBe(1)
-  const subgraphNode = subgraphNodes[0]
-
+  const subgraphNode =
+    await comfyPage.subgraph.convertDefaultKSamplerToSubgraph()
   await subgraphNode.navigateIntoSubgraph()
   return subgraphNode
 }
@@ -26,15 +15,14 @@ async function exitSubgraphAndPublish(
   subgraphNode: Awaited<ReturnType<typeof createSubgraphAndNavigateInto>>,
   blueprintName: string
 ) {
-  await comfyPage.page.keyboard.press('Escape')
-  await comfyPage.nextFrame()
+  await comfyPage.keyboard.press('Escape')
 
   await subgraphNode.click('title')
   await comfyPage.command.executeCommand('Comfy.PublishSubgraph', {
     name: blueprintName
   })
 
-  await expect(comfyPage.visibleToasts).toHaveCount(1, { timeout: 5000 })
+  await expect(comfyPage.visibleToasts).toHaveCount(1)
   await comfyPage.toast.closeToasts(1)
 }
 
@@ -47,48 +35,36 @@ async function searchAndExpectResult(
   await expect(comfyPage.searchBox.input).toHaveCount(1)
   await comfyPage.searchBox.input.fill(searchTerm)
   await expect(comfyPage.searchBox.findResult(expectedResult)).toBeVisible({
-    timeout: 10000
+    timeout: 10_000
   })
 }
 
 test.describe('Subgraph Search Aliases', { tag: ['@subgraph'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting(
       'Comfy.NodeSearchBoxImpl',
       'v1 (legacy)'
     )
   })
 
-  test('Can set search aliases on subgraph and find via search', async ({
-    comfyPage
-  }) => {
-    const subgraphNode = await createSubgraphAndNavigateInto(comfyPage)
-
-    await comfyPage.command.executeCommand('Comfy.Subgraph.SetSearchAliases', {
-      aliases: 'qwerty,unicorn'
-    })
-
-    const blueprintName = `test-aliases-${Date.now()}`
-    await exitSubgraphAndPublish(comfyPage, subgraphNode, blueprintName)
-    await searchAndExpectResult(comfyPage, 'unicorn', blueprintName)
-  })
-
   test('Can set description on subgraph', async ({ comfyPage }) => {
     await createSubgraphAndNavigateInto(comfyPage)
 
     await comfyPage.command.executeCommand('Comfy.Subgraph.SetDescription', {
       description: 'This is a test description'
     })
-    // Verify the description was set on the subgraph's extra
-    const description = await comfyPage.page.evaluate(() => {
-      const subgraph = window['app']!.canvas.subgraph
-      return (subgraph?.extra as Record<string, unknown>)?.BlueprintDescription
-    })
-    expect(description).toBe('This is a test description')
+    await expect
+      .poll(() =>
+        comfyPage.page.evaluate(() => {
+          const subgraph = window.app!.canvas.subgraph
+          return (subgraph?.extra as Record<string, unknown>)
+            ?.BlueprintDescription
+        })
+      )
+      .toBe('This is a test description')
   })
 
-  test('Search aliases persist after publish and reload', async ({
+  test('Published search aliases remain searchable after reload', async ({
     comfyPage
   }) => {
     const subgraphNode = await createSubgraphAndNavigateInto(comfyPage)
@@ -100,10 +76,9 @@ test.describe('Subgraph Search Aliases', { tag: ['@subgraph'] }, () => {
     const blueprintName = `test-persist-${Date.now()}`
     await exitSubgraphAndPublish(comfyPage, subgraphNode, blueprintName)
 
-    // Reload the page to ensure aliases are persisted
     await comfyPage.page.reload()
     await comfyPage.page.waitForFunction(
-      () => window['app'] && window['app'].extensionManager
+      () => window.app && window.app.extensionManager
     )
     await comfyPage.nextFrame()
 
diff --git a/browser_tests/tests/subgraph/subgraphSerialization.spec.ts b/browser_tests/tests/subgraph/subgraphSerialization.spec.ts
new file mode 100644
index 0000000000..52def911a6
--- /dev/null
+++ b/browser_tests/tests/subgraph/subgraphSerialization.spec.ts
@@ -0,0 +1,139 @@
+import { expect } from '@playwright/test'
+
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { getPromotedWidgets } from '@e2e/helpers/promotedWidgets'
+
+const DUPLICATE_IDS_WORKFLOW = 'subgraphs/subgraph-nested-duplicate-ids'
+const LEGACY_PREFIXED_WORKFLOW =
+  'subgraphs/nested-subgraph-legacy-prefixed-proxy-widgets'
+
+test.describe('Subgraph Serialization', { tag: ['@subgraph'] }, () => {
+  const getPromotedHostWidgetValues = async (
+    comfyPage: ComfyPage,
+    nodeIds: string[]
+  ) => {
+    return comfyPage.page.evaluate((ids) => {
+      const graph = window.app!.canvas.graph!
+
+      return ids.map((id) => {
+        const node = graph.getNodeById(id)
+        if (
+          !node ||
+          typeof node.isSubgraphNode !== 'function' ||
+          !node.isSubgraphNode()
+        ) {
+          return { id, values: [] as unknown[] }
+        }
+
+        return {
+          id,
+          values: (node.widgets ?? []).map((widget) => widget.value)
+        }
+      })
+    }, nodeIds)
+  }
+
+  test('Promoted widget remains usable after serialize and reload', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow(
+      'subgraphs/subgraph-with-promoted-text-widget'
+    )
+
+    const beforeReload = comfyPage.page.locator('.comfy-multiline-input')
+    await expect(beforeReload).toHaveCount(1)
+    await expect(beforeReload).toBeVisible()
+
+    await comfyPage.subgraph.serializeAndReload()
+
+    const afterReload = comfyPage.page.locator('.comfy-multiline-input')
+    await expect(afterReload).toHaveCount(1)
+    await expect(afterReload).toBeVisible()
+  })
+
+  test('Compressed target_slot workflow boots into a usable promoted widget state', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow(
+      'subgraphs/subgraph-compressed-target-slot'
+    )
+
+    await expect
+      .poll(async () => {
+        const widgets = await getPromotedWidgets(comfyPage, '2')
+        return widgets.some(([, widgetName]) => widgetName === 'batch_size')
+      })
+      .toBe(true)
+  })
+
+  test('Duplicate ID remap workflow remains navigable after a full reload boot path', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow(DUPLICATE_IDS_WORKFLOW)
+
+    await comfyPage.page.reload()
+    await comfyPage.page.waitForFunction(() => !!window.app)
+    await comfyPage.workflow.loadWorkflow(DUPLICATE_IDS_WORKFLOW)
+
+    const subgraphNode = await comfyPage.nodeOps.getNodeRefById('5')
+    await subgraphNode.navigateIntoSubgraph()
+
+    await expect.poll(() => comfyPage.subgraph.isInSubgraph()).toBe(true)
+
+    await comfyPage.keyboard.press('Escape')
+
+    await expect.poll(() => comfyPage.subgraph.isInSubgraph()).toBe(false)
+  })
+
+  test.describe('Legacy prefixed proxyWidget normalization', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    })
+
+    test('Legacy-prefixed promoted widget renders with the normalized label after load', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(LEGACY_PREFIXED_WORKFLOW)
+      await comfyPage.vueNodes.waitForNodes()
+
+      const outerNode = comfyPage.vueNodes.getNodeLocator('5')
+      await expect(outerNode).toBeVisible()
+
+      const textarea = outerNode
+        .getByRole('textbox', { name: 'string_a' })
+        .first()
+      await expect(textarea).toBeVisible()
+      await expect(textarea).toBeDisabled()
+    })
+
+    test('Multiple instances of the same subgraph keep distinct promoted widget values after load and reload', async ({
+      comfyPage
+    }) => {
+      const workflowName =
+        'subgraphs/subgraph-multi-instance-promoted-text-values'
+      const hostNodeIds = ['11', '12', '13']
+      const expectedValues = ['Alpha\n', 'Beta\n', 'Gamma\n']
+
+      await comfyPage.workflow.loadWorkflow(workflowName)
+
+      const initialValues = await getPromotedHostWidgetValues(
+        comfyPage,
+        hostNodeIds
+      )
+      expect(initialValues.map(({ values }) => values[0])).toEqual(
+        expectedValues
+      )
+
+      await comfyPage.subgraph.serializeAndReload()
+
+      const reloadedValues = await getPromotedHostWidgetValues(
+        comfyPage,
+        hostNodeIds
+      )
+      expect(reloadedValues.map(({ values }) => values[0])).toEqual(
+        expectedValues
+      )
+    })
+  })
+})
diff --git a/browser_tests/tests/subgraph/subgraphSlots.spec.ts b/browser_tests/tests/subgraph/subgraphSlots.spec.ts
new file mode 100644
index 0000000000..c6ac6f119e
--- /dev/null
+++ b/browser_tests/tests/subgraph/subgraphSlots.spec.ts
@@ -0,0 +1,634 @@
+import { readFileSync } from 'fs'
+import { resolve } from 'path'
+
+import { expect } from '@playwright/test'
+
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { SubgraphHelper } from '@e2e/fixtures/helpers/SubgraphHelper'
+import {
+  expectSlotsWithinBounds,
+  measureNodeSlotOffsets
+} from '@e2e/fixtures/utils/slotBoundsUtil'
+
+const RENAMED_INPUT_NAME = 'renamed_input'
+const RENAMED_SLOT_NAME = 'renamed_slot_name'
+const SECOND_RENAMED_NAME = 'second_renamed_name'
+const RENAMED_LABEL = 'my_seed'
+
+const SELECTORS = {
+  promptDialog: '.graphdialog input'
+} as const
+
+test.describe('Subgraph Slots', { tag: ['@slow', '@subgraph'] }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+    await comfyPage.settings.setSetting(
+      'Comfy.NodeSearchBoxImpl',
+      'v1 (legacy)'
+    )
+  })
+
+  test.describe('I/O Slot Management', () => {
+    test('Can add input slots to subgraph', async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      const initialCount = await comfyPage.subgraph.getSlotCount('input')
+      const vaeEncodeNodes = await comfyPage.nodeOps.getNodeRefsByType(
+        'VAEEncode',
+        true
+      )
+      expect(
+        vaeEncodeNodes.length,
+        'Expected at least one VAEEncode node'
+      ).toBeGreaterThan(0)
+      const [vaeEncodeNode] = vaeEncodeNodes
+
+      await comfyPage.subgraph.connectFromInput(vaeEncodeNode, 0)
+      await comfyPage.nextFrame()
+
+      await expect
+        .poll(() => comfyPage.subgraph.getSlotCount('input'))
+        .toBe(initialCount + 1)
+    })
+
+    test('Can add output slots to subgraph', async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      const initialCount = await comfyPage.subgraph.getSlotCount('output')
+      const vaeEncodeNodes = await comfyPage.nodeOps.getNodeRefsByType(
+        'VAEEncode',
+        true
+      )
+      expect(
+        vaeEncodeNodes.length,
+        'Expected at least one VAEEncode node'
+      ).toBeGreaterThan(0)
+      const [vaeEncodeNode] = vaeEncodeNodes
+
+      await comfyPage.subgraph.connectToOutput(vaeEncodeNode, 0)
+      await comfyPage.nextFrame()
+
+      await expect
+        .poll(() => comfyPage.subgraph.getSlotCount('output'))
+        .toBe(initialCount + 1)
+    })
+
+    test('Can remove input slots from subgraph', async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      const initialCount = await comfyPage.subgraph.getSlotCount('input')
+      expect(initialCount).toBeGreaterThan(0)
+
+      await comfyPage.subgraph.removeSlot('input')
+      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
+      await comfyPage.nextFrame()
+
+      await expect
+        .poll(() => comfyPage.subgraph.getSlotCount('input'))
+        .toBe(initialCount - 1)
+    })
+
+    test('Can remove output slots from subgraph', async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      const initialCount = await comfyPage.subgraph.getSlotCount('output')
+      expect(initialCount).toBeGreaterThan(0)
+
+      await comfyPage.subgraph.removeSlot('output')
+      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
+      await comfyPage.nextFrame()
+
+      await expect
+        .poll(() => comfyPage.subgraph.getSlotCount('output'))
+        .toBe(initialCount - 1)
+    })
+
+    test('Can rename an input slot from the context menu', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      const initialInputLabel = await comfyPage.subgraph.getSlotLabel('input')
+
+      await comfyPage.subgraph.rightClickInputSlot(initialInputLabel!)
+      await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
+      await comfyPage.nextFrame()
+
+      await expect(comfyPage.page.locator(SELECTORS.promptDialog)).toBeVisible()
+      await comfyPage.page
+        .locator(SELECTORS.promptDialog)
+        .fill(RENAMED_INPUT_NAME)
+      await comfyPage.page.keyboard.press('Enter')
+
+      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
+      await comfyPage.nextFrame()
+
+      await expect
+        .poll(() => comfyPage.subgraph.getSlotLabel('input'))
+        .toBe(RENAMED_INPUT_NAME)
+    })
+
+    test('Can rename input slots via double-click', async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      const initialInputLabel = await comfyPage.subgraph.getSlotLabel('input')
+
+      await comfyPage.subgraph.doubleClickInputSlot(initialInputLabel!)
+
+      await comfyPage.page.locator(SELECTORS.promptDialog).waitFor({
+        state: 'visible'
+      })
+      await comfyPage.page
+        .locator(SELECTORS.promptDialog)
+        .fill(RENAMED_INPUT_NAME)
+      await comfyPage.page.keyboard.press('Enter')
+
+      // Force re-render
+      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
+      await comfyPage.nextFrame()
+
+      await expect
+        .poll(() => comfyPage.subgraph.getSlotLabel('input'))
+        .toBe(RENAMED_INPUT_NAME)
+    })
+
+    test('Can rename output slots via double-click', async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      const initialOutputLabel = await comfyPage.subgraph.getSlotLabel('output')
+
+      await comfyPage.subgraph.doubleClickOutputSlot(initialOutputLabel!)
+
+      await comfyPage.page.locator(SELECTORS.promptDialog).waitFor({
+        state: 'visible'
+      })
+      const renamedOutputName = 'renamed_output'
+      await comfyPage.page
+        .locator(SELECTORS.promptDialog)
+        .fill(renamedOutputName)
+      await comfyPage.page.keyboard.press('Enter')
+
+      // Force re-render
+      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
+      await comfyPage.nextFrame()
+
+      await expect
+        .poll(() => comfyPage.subgraph.getSlotLabel('output'))
+        .toBe(renamedOutputName)
+    })
+
+    test('Right-click context menu still works alongside double-click', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      const initialInputLabel = await comfyPage.subgraph.getSlotLabel('input')
+
+      // Test that right-click still works for renaming
+      await comfyPage.subgraph.rightClickInputSlot(initialInputLabel!)
+      await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
+      await comfyPage.nextFrame()
+
+      await comfyPage.page.locator(SELECTORS.promptDialog).waitFor({
+        state: 'visible'
+      })
+      const rightClickRenamedName = 'right_click_renamed'
+      await comfyPage.page
+        .locator(SELECTORS.promptDialog)
+        .fill(rightClickRenamedName)
+      await comfyPage.page.keyboard.press('Enter')
+
+      // Force re-render
+      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
+      await comfyPage.nextFrame()
+
+      await expect
+        .poll(() => comfyPage.subgraph.getSlotLabel('input'))
+        .toBe(rightClickRenamedName)
+    })
+
+    test('Can double-click on slot label text to rename', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      // Use direct pointer event approach to double-click on label
+      await comfyPage.page.evaluate(() => {
+        const app = window.app!
+        const graph = app.canvas.graph
+        if (!graph || !('inputNode' in graph))
+          throw new Error('Expected to be in subgraph')
+
+        const input = graph.inputs?.[0]
+        if (!input?.labelPos)
+          throw new Error('Could not get label position for testing')
+
+        const leftClickEvent = {
+          canvasX: input.labelPos[0],
+          canvasY: input.labelPos[1],
+          button: 0,
+          preventDefault: () => {},
+          stopPropagation: () => {}
+        } as Parameters<typeof graph.inputNode.onPointerDown>[0]
+
+        const inputNode = graph.inputNode
+        if (inputNode?.onPointerDown) {
+          inputNode.onPointerDown(
+            leftClickEvent,
+            app.canvas.pointer,
+            app.canvas.linkConnector
+          )
+
+          if (app.canvas.pointer.onDoubleClick) {
+            app.canvas.pointer.onDoubleClick(leftClickEvent)
+          }
+        }
+      })
+
+      await comfyPage.nextFrame()
+
+      await expect(comfyPage.page.locator(SELECTORS.promptDialog)).toBeVisible()
+      const labelClickRenamedName = 'label_click_renamed'
+      await comfyPage.page
+        .locator(SELECTORS.promptDialog)
+        .fill(labelClickRenamedName)
+      await comfyPage.page.keyboard.press('Enter')
+
+      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
+      await comfyPage.nextFrame()
+
+      await expect
+        .poll(() => comfyPage.subgraph.getSlotLabel('input'))
+        .toBe(labelClickRenamedName)
+    })
+  })
+
+  test.describe('Subgraph Slot Rename Dialog', () => {
+    test('Shows current slot label (not stale) in rename dialog', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      const initialInputLabel = await comfyPage.subgraph.getSlotLabel('input')
+      if (initialInputLabel === null) {
+        throw new Error(
+          'Expected subgraph to have an input slot label for rightClickInputSlot'
+        )
+      }
+
+      await comfyPage.subgraph.rightClickInputSlot(initialInputLabel)
+      await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
+      await comfyPage.nextFrame()
+
+      await expect(comfyPage.page.locator(SELECTORS.promptDialog)).toBeVisible()
+      await comfyPage.page.locator(SELECTORS.promptDialog).fill('')
+      await comfyPage.page
+        .locator(SELECTORS.promptDialog)
+        .fill(RENAMED_SLOT_NAME)
+      await comfyPage.page.keyboard.press('Enter')
+
+      await expect(comfyPage.page.locator(SELECTORS.promptDialog)).toBeHidden()
+
+      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
+      await comfyPage.nextFrame()
+
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(() => {
+            const graph = window.app!.canvas.graph
+            if (!graph || !('inputNode' in graph)) return null
+            return graph.inputs?.[0]?.label || null
+          })
+        )
+        .toBe(RENAMED_SLOT_NAME)
+
+      await comfyPage.subgraph.rightClickInputSlot()
+      await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
+      await comfyPage.nextFrame()
+
+      await expect(comfyPage.page.locator(SELECTORS.promptDialog)).toBeVisible()
+
+      await expect(comfyPage.page.locator(SELECTORS.promptDialog)).toHaveValue(
+        RENAMED_SLOT_NAME
+      )
+
+      await comfyPage.page.locator(SELECTORS.promptDialog).fill('')
+      await comfyPage.page
+        .locator(SELECTORS.promptDialog)
+        .fill(SECOND_RENAMED_NAME)
+      await comfyPage.page.keyboard.press('Enter')
+
+      await expect(comfyPage.page.locator(SELECTORS.promptDialog)).toBeHidden()
+
+      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
+      await comfyPage.nextFrame()
+
+      await expect
+        .poll(() => comfyPage.subgraph.getSlotLabel('input'))
+        .toBe(SECOND_RENAMED_NAME)
+    })
+
+    test('Shows current output slot label in rename dialog', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      const initialOutputLabel = await comfyPage.subgraph.getSlotLabel('output')
+      if (initialOutputLabel === null) {
+        throw new Error(
+          'Expected subgraph to have an output slot label for rightClickOutputSlot'
+        )
+      }
+
+      await comfyPage.subgraph.rightClickOutputSlot(initialOutputLabel)
+      await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
+      await comfyPage.nextFrame()
+
+      await expect(comfyPage.page.locator(SELECTORS.promptDialog)).toBeVisible()
+      await comfyPage.page.locator(SELECTORS.promptDialog).fill('')
+      await comfyPage.page
+        .locator(SELECTORS.promptDialog)
+        .fill(RENAMED_SLOT_NAME)
+      await comfyPage.page.keyboard.press('Enter')
+
+      await expect(comfyPage.page.locator(SELECTORS.promptDialog)).toBeHidden()
+
+      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
+      await comfyPage.nextFrame()
+
+      await comfyPage.subgraph.rightClickOutputSlot()
+      await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
+      await comfyPage.nextFrame()
+
+      await expect(comfyPage.page.locator(SELECTORS.promptDialog)).toBeVisible()
+
+      await expect(comfyPage.page.locator(SELECTORS.promptDialog)).toHaveValue(
+        RENAMED_SLOT_NAME
+      )
+    })
+  })
+
+  test.describe('Subgraph input slot rename propagation', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    })
+
+    test('Renaming a subgraph input slot updates the widget label on the parent node', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/test-values-input-subgraph'
+      )
+      await comfyPage.vueNodes.waitForNodes()
+
+      const subgraphNode = comfyPage.vueNodes.getNodeLocator('19')
+      await expect(subgraphNode).toBeVisible()
+
+      const seedWidget = subgraphNode.getByLabel('seed', { exact: true })
+      await expect(seedWidget).toBeVisible()
+      await SubgraphHelper.expectWidgetBelowHeader(subgraphNode, seedWidget)
+
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
+
+      const subgraphNodeRef = await comfyPage.nodeOps.getNodeRefById('19')
+      await subgraphNodeRef.navigateIntoSubgraph()
+
+      let seedSlotName: string | null = null
+      await expect
+        .poll(async () => {
+          seedSlotName = await comfyPage.page.evaluate(() => {
+            const graph = window.app!.canvas.graph
+            if (!graph) return null
+            const inputs = (graph as { inputs?: Array<{ name: string }> })
+              .inputs
+            return (
+              inputs?.find((input) => input.name.includes('seed'))?.name ?? null
+            )
+          })
+          return seedSlotName
+        })
+        .not.toBeNull()
+
+      await comfyPage.subgraph.rightClickInputSlot(seedSlotName!)
+      await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
+      await comfyPage.nextFrame()
+
+      await expect(comfyPage.page.locator(SELECTORS.promptDialog)).toBeVisible()
+      await comfyPage.page.locator(SELECTORS.promptDialog).fill('')
+      await comfyPage.page.locator(SELECTORS.promptDialog).fill(RENAMED_LABEL)
+      await comfyPage.page.keyboard.press('Enter')
+      await expect(comfyPage.page.locator(SELECTORS.promptDialog)).toBeHidden()
+
+      await comfyPage.subgraph.exitViaBreadcrumb()
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+      await comfyPage.vueNodes.waitForNodes()
+
+      const subgraphNodeAfter = comfyPage.vueNodes.getNodeLocator('19')
+      await expect(subgraphNodeAfter).toBeVisible()
+
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(() => {
+            const node = window.app!.canvas.graph!.getNodeById('19')
+            if (!node) return null
+            const widget = node.widgets?.find((entry: { name: string }) =>
+              entry.name.includes('seed')
+            )
+            return widget?.label || widget?.name || null
+          })
+        )
+        .toBe(RENAMED_LABEL)
+
+      const seedWidgetAfter = subgraphNodeAfter.getByLabel('seed', {
+        exact: true
+      })
+      await expect(seedWidgetAfter).toBeVisible()
+      await expect(
+        subgraphNodeAfter.getByText(RENAMED_LABEL, { exact: true })
+      ).toBeVisible()
+      await SubgraphHelper.expectWidgetBelowHeader(
+        subgraphNodeAfter,
+        seedWidgetAfter
+      )
+    })
+  })
+
+  test.describe('Subgraph promoted widget-input slot position', () => {
+    test('Promoted text widget slot is positioned at widget row, not header', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-with-promoted-text-widget'
+      )
+
+      await expect
+        .poll(async () => {
+          const result = await SubgraphHelper.getTextSlotPosition(
+            comfyPage.page,
+            '11'
+          )
+          return result?.hasPos && result.posY! > result.titleHeight
+        })
+        .toBe(true)
+    })
+
+    test('Slot position remains correct after renaming subgraph input label', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-with-promoted-text-widget'
+      )
+
+      await expect
+        .poll(async () => {
+          const result = await SubgraphHelper.getTextSlotPosition(
+            comfyPage.page,
+            '11'
+          )
+          return result?.hasPos && result.posY! > result.titleHeight
+        })
+        .toBe(true)
+
+      const before = await SubgraphHelper.getTextSlotPosition(
+        comfyPage.page,
+        '11'
+      )
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
+      await subgraphNode.navigateIntoSubgraph()
+
+      const initialLabel = await comfyPage.page.evaluate(() => {
+        const graph = window.app!.canvas.graph
+        if (!graph || !('inputNode' in graph)) return null
+        const textInput = graph.inputs?.find(
+          (input: { type: string }) => input.type === 'STRING'
+        )
+        return textInput?.label || textInput?.name || null
+      })
+      if (!initialLabel)
+        throw new Error('Could not find STRING input in subgraph')
+
+      await comfyPage.subgraph.rightClickInputSlot(initialLabel)
+      await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
+      await comfyPage.nextFrame()
+
+      await expect(comfyPage.page.locator(SELECTORS.promptDialog)).toBeVisible()
+      await comfyPage.page.locator(SELECTORS.promptDialog).fill('')
+      await comfyPage.page
+        .locator(SELECTORS.promptDialog)
+        .fill('my_custom_prompt')
+      await comfyPage.page.keyboard.press('Enter')
+      await expect(comfyPage.page.locator(SELECTORS.promptDialog)).toBeHidden()
+
+      await comfyPage.subgraph.exitViaBreadcrumb()
+
+      await expect
+        .poll(async () => {
+          const result = await SubgraphHelper.getTextSlotPosition(
+            comfyPage.page,
+            '11'
+          )
+          return (
+            result?.hasPos &&
+            result.posY! > result.titleHeight &&
+            result.widgetName === before!.widgetName
+          )
+        })
+        .toBe(true)
+    })
+  })
+
+  test.describe('Subgraph slot alignment after LG layout scale', () => {
+    test('slot positions stay within node bounds after loading LG workflow', async ({
+      comfyPage
+    }) => {
+      const SLOT_BOUNDS_MARGIN = 20
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+
+      const workflowPath = resolve(
+        import.meta.dirname,
+        '../../assets/subgraphs/basic-subgraph.json'
+      )
+      const workflow = JSON.parse(
+        readFileSync(workflowPath, 'utf-8')
+      ) as ComfyWorkflowJSON
+      workflow.extra = {
+        ...workflow.extra,
+        workflowRendererVersion: 'LG'
+      }
+
+      await comfyPage.page.evaluate(
+        (wf) =>
+          window.app!.loadGraphData(wf as ComfyWorkflowJSON, true, true, null, {
+            openSource: 'template'
+          }),
+        workflow
+      )
+      await comfyPage.nextFrame()
+
+      await comfyPage.page.locator('[data-slot-key]').first().waitFor()
+
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(
+            () =>
+              window.app!.graph._nodes.filter((n) => !!n.isSubgraphNode?.())
+                .length
+          )
+        )
+        .toBeGreaterThan(0)
+
+      const nodeIds = await comfyPage.page.evaluate(() =>
+        window
+          .app!.graph._nodes.filter((n) => !!n.isSubgraphNode?.())
+          .map((n) => String(n.id))
+      )
+
+      for (const nodeId of nodeIds) {
+        let data: Awaited<ReturnType<typeof measureNodeSlotOffsets>> = null
+        await expect
+          .poll(async () => {
+            data = await measureNodeSlotOffsets(comfyPage.page, nodeId)
+            return data
+          })
+          .not.toBeNull()
+        expectSlotsWithinBounds(data!, SLOT_BOUNDS_MARGIN, `Node ${nodeId}`)
+      }
+    })
+  })
+})
diff --git a/browser_tests/tests/subgraph/subgraphZeroUuid.spec.ts b/browser_tests/tests/subgraph/subgraphZeroUuid.spec.ts
new file mode 100644
index 0000000000..3d0a0348f7
--- /dev/null
+++ b/browser_tests/tests/subgraph/subgraphZeroUuid.spec.ts
@@ -0,0 +1,42 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+
+test.describe(
+  'Zero UUID workflow: subgraph undo rendering',
+  { tag: ['@workflow', '@subgraph', '@vue-nodes'] },
+  () => {
+    test('Undo after subgraph enter/exit renders all nodes when workflow starts with zero UUID', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/basic-subgraph-zero-uuid'
+      )
+      await comfyPage.vueNodes.waitForNodes()
+
+      const assertInSubgraph = async (inSubgraph: boolean) => {
+        await expect
+          .poll(() => comfyPage.subgraph.isInSubgraph())
+          .toBe(inSubgraph)
+      }
+
+      // Root graph has 1 subgraph node, rendered in the DOM
+      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(1)
+      await expect.poll(() => comfyPage.vueNodes.getNodeCount()).toBe(1)
+
+      await comfyPage.vueNodes.enterSubgraph()
+      await assertInSubgraph(true)
+
+      await comfyPage.subgraph.exitViaBreadcrumb()
+      await assertInSubgraph(false)
+
+      await comfyPage.canvas.focus()
+      await comfyPage.keyboard.undo()
+      await comfyPage.nextFrame()
+
+      // After undo, the subgraph node is still visible and rendered
+      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(1)
+      await expect.poll(() => comfyPage.vueNodes.getNodeCount()).toBe(1)
+    })
+  }
+)
diff --git a/browser_tests/tests/subgraphInputSlotRename.spec.ts b/browser_tests/tests/subgraphInputSlotRename.spec.ts
deleted file mode 100644
index b3df05a471..0000000000
--- a/browser_tests/tests/subgraphInputSlotRename.spec.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-
-const WORKFLOW = 'subgraphs/test-values-input-subgraph'
-const RENAMED_LABEL = 'my_seed'
-
-/**
- * Regression test for subgraph input slot rename propagation.
- *
- * Renaming a SubgraphInput slot (e.g. "seed") inside the subgraph must
- * update the promoted widget label shown on the parent SubgraphNode and
- * keep the widget positioned in the node body (not the header).
- *
- * See: https://github.com/Comfy-Org/ComfyUI_frontend/pull/10195
- */
-test.describe(
-  'Subgraph input slot rename propagation',
-  { tag: ['@subgraph', '@widget'] },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    })
-
-    test('Renaming a subgraph input slot updates the widget label on the parent node', async ({
-      comfyPage
-    }) => {
-      const { page } = comfyPage
-
-      // 1. Load workflow with subgraph containing a promoted seed widget input
-      await comfyPage.workflow.loadWorkflow(WORKFLOW)
-      await comfyPage.vueNodes.waitForNodes()
-
-      const sgNode = comfyPage.vueNodes.getNodeLocator('19')
-      await expect(sgNode).toBeVisible()
-
-      // 2. Verify the seed widget is visible on the parent node
-      const seedWidget = sgNode.getByLabel('seed', { exact: true })
-      await expect(seedWidget).toBeVisible()
-
-      // Verify widget is in the node body, not the header
-      const headerBox = await sgNode
-        .locator('[data-testid^="node-header-"]')
-        .boundingBox()
-      const widgetBox = await seedWidget.boundingBox()
-      expect(headerBox).not.toBeNull()
-      expect(widgetBox).not.toBeNull()
-      expect(widgetBox!.y).toBeGreaterThan(headerBox!.y + headerBox!.height)
-
-      // 3. Enter the subgraph and rename the seed slot.
-      //    The subgraph IO rename uses canvas.prompt() which requires the
-      //    litegraph context menu, so temporarily disable Vue nodes.
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
-      await comfyPage.nextFrame()
-
-      const sgNodeRef = await comfyPage.nodeOps.getNodeRefById('19')
-      await sgNodeRef.navigateIntoSubgraph()
-
-      // Find the seed SubgraphInput slot
-      const seedSlotName = await page.evaluate(() => {
-        const graph = window.app!.canvas.graph
-        if (!graph) return null
-        const inputs = (
-          graph as { inputs?: Array<{ name: string; type: string }> }
-        ).inputs
-        return inputs?.find((i) => i.name.includes('seed'))?.name ?? null
-      })
-      expect(seedSlotName).not.toBeNull()
-
-      // 4. Right-click the seed input slot and rename it
-      await comfyPage.subgraph.rightClickInputSlot(seedSlotName!)
-      await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
-      await comfyPage.nextFrame()
-
-      const dialog = '.graphdialog input'
-      await page.waitForSelector(dialog, { state: 'visible' })
-      await page.fill(dialog, '')
-      await page.fill(dialog, RENAMED_LABEL)
-      await page.keyboard.press('Enter')
-      await page.waitForSelector(dialog, { state: 'hidden' })
-
-      // 5. Navigate back to parent graph and re-enable Vue nodes
-      await comfyPage.subgraph.exitViaBreadcrumb()
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-      await comfyPage.vueNodes.waitForNodes()
-
-      // 6. Verify the widget label updated to the renamed value
-      const sgNodeAfter = comfyPage.vueNodes.getNodeLocator('19')
-      await expect(sgNodeAfter).toBeVisible()
-
-      const updatedLabel = await page.evaluate(() => {
-        const node = window.app!.canvas.graph!.getNodeById('19')
-        if (!node) return null
-        const w = node.widgets?.find((w: { name: string }) =>
-          w.name.includes('seed')
-        )
-        return w?.label || w?.name || null
-      })
-      expect(updatedLabel).toBe(RENAMED_LABEL)
-
-      // 7. Verify the widget is still in the body, not the header
-      const seedWidgetAfter = sgNodeAfter.getByLabel('seed', { exact: true })
-      await expect(seedWidgetAfter).toBeVisible()
-
-      const headerAfter = await sgNodeAfter
-        .locator('[data-testid^="node-header-"]')
-        .boundingBox()
-      const widgetAfter = await seedWidgetAfter.boundingBox()
-      expect(headerAfter).not.toBeNull()
-      expect(widgetAfter).not.toBeNull()
-      expect(widgetAfter!.y).toBeGreaterThan(
-        headerAfter!.y + headerAfter!.height
-      )
-    })
-  }
-)
diff --git a/browser_tests/tests/subgraphLegacyPrefixedProxyWidgets.spec.ts b/browser_tests/tests/subgraphLegacyPrefixedProxyWidgets.spec.ts
deleted file mode 100644
index 1f6598c457..0000000000
--- a/browser_tests/tests/subgraphLegacyPrefixedProxyWidgets.spec.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
-
-/**
- * Regression test for legacy-prefixed proxyWidget normalization.
- *
- * Older serialized workflows stored proxyWidget entries with prefixed widget
- * names like "6: 3: string_a" instead of plain "string_a". This caused
- * resolution failures during configure, resulting in missing promoted widgets.
- *
- * The fixture contains an outer SubgraphNode (id 5) whose proxyWidgets array
- * has a legacy-prefixed entry: ["6", "6: 3: string_a"]. After normalization
- * the promoted widget should render with the clean name "string_a".
- *
- * See: https://github.com/Comfy-Org/ComfyUI_frontend/pull/10573
- */
-test.describe(
-  'Legacy prefixed proxyWidget normalization',
-  { tag: ['@subgraph', '@widget'] },
-  () => {
-    const WORKFLOW = 'subgraphs/nested-subgraph-legacy-prefixed-proxy-widgets'
-
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    })
-
-    test('Loads without console warnings about failed widget resolution', async ({
-      comfyPage
-    }) => {
-      const warnings: string[] = []
-      comfyPage.page.on('console', (msg) => {
-        const text = msg.text()
-        if (
-          text.includes('Failed to resolve legacy -1') ||
-          text.includes('No link found') ||
-          text.includes('No inner link found')
-        ) {
-          warnings.push(text)
-        }
-      })
-
-      await comfyPage.workflow.loadWorkflow(WORKFLOW)
-
-      expect(warnings).toEqual([])
-    })
-
-    test('Promoted widget renders with normalized name, not legacy prefix', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(WORKFLOW)
-      await comfyPage.vueNodes.waitForNodes()
-
-      const outerNode = comfyPage.vueNodes.getNodeLocator('5')
-      await expect(outerNode).toBeVisible()
-
-      // The promoted widget should render with the clean name "string_a",
-      // not the legacy-prefixed "6: 3: string_a".
-      const promotedWidget = outerNode
-        .getByLabel('string_a', { exact: true })
-        .first()
-      await expect(promotedWidget).toBeVisible()
-    })
-
-    test('No legacy-prefixed or disconnected widgets remain on the node', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(WORKFLOW)
-      await comfyPage.vueNodes.waitForNodes()
-
-      const outerNode = comfyPage.vueNodes.getNodeLocator('5')
-      await expect(outerNode).toBeVisible()
-
-      // Both widget rows should be valid "string_a" widgets — no stale
-      // "Disconnected" placeholders from unresolved legacy entries.
-      const widgetRows = outerNode.getByTestId(TestIds.widgets.widget)
-      await expect(widgetRows).toHaveCount(2)
-
-      for (const row of await widgetRows.all()) {
-        await expect(row.getByLabel('string_a', { exact: true })).toBeVisible()
-      }
-    })
-
-    test('Promoted widget value is editable as a text input', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(WORKFLOW)
-      await comfyPage.vueNodes.waitForNodes()
-
-      const outerNode = comfyPage.vueNodes.getNodeLocator('5')
-      const textarea = outerNode
-        .getByRole('textbox', { name: 'string_a' })
-        .first()
-      await expect(textarea).toBeVisible()
-    })
-  }
-)
diff --git a/browser_tests/tests/subgraphLifecycle.spec.ts b/browser_tests/tests/subgraphLifecycle.spec.ts
deleted file mode 100644
index 50aa7f4a79..0000000000
--- a/browser_tests/tests/subgraphLifecycle.spec.ts
+++ /dev/null
@@ -1,347 +0,0 @@
-import { expect } from '@playwright/test'
-
-import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import type { PromotedWidgetEntry } from '../helpers/promotedWidgets'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
-import {
-  getPromotedWidgets,
-  getPseudoPreviewWidgets,
-  getNonPreviewPromotedWidgets
-} from '../helpers/promotedWidgets'
-
-const domPreviewSelector = '.image-preview'
-
-const expectPromotedWidgetsToResolveToInteriorNodes = async (
-  comfyPage: ComfyPage,
-  hostSubgraphNodeId: string,
-  widgets: PromotedWidgetEntry[]
-) => {
-  const interiorNodeIds = widgets.map(([id]) => id)
-  const results = await comfyPage.page.evaluate(
-    ([hostId, ids]) => {
-      const graph = window.app!.graph!
-      const hostNode = graph.getNodeById(Number(hostId))
-      if (!hostNode?.isSubgraphNode()) return ids.map(() => false)
-
-      return ids.map((id) => {
-        const interiorNode = hostNode.subgraph.getNodeById(Number(id))
-        return interiorNode !== null && interiorNode !== undefined
-      })
-    },
-    [hostSubgraphNodeId, interiorNodeIds] as const
-  )
-
-  for (const exists of results) {
-    expect(exists).toBe(true)
-  }
-}
-
-test.describe(
-  'Subgraph Lifecycle Edge Behaviors',
-  { tag: ['@subgraph'] },
-  () => {
-    test.describe('Deterministic Hydrate from Serialized proxyWidgets', () => {
-      test('proxyWidgets entries map to real interior node IDs after load', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-promoted-text-widget'
-        )
-        await comfyPage.nextFrame()
-
-        const widgets = await getPromotedWidgets(comfyPage, '11')
-        expect(widgets.length).toBeGreaterThan(0)
-
-        for (const [interiorNodeId] of widgets) {
-          expect(Number(interiorNodeId)).toBeGreaterThan(0)
-        }
-
-        await expectPromotedWidgetsToResolveToInteriorNodes(
-          comfyPage,
-          '11',
-          widgets
-        )
-      })
-
-      test('proxyWidgets entries survive double round-trip without drift', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-multiple-promoted-widgets'
-        )
-        await comfyPage.nextFrame()
-
-        const initialWidgets = await getPromotedWidgets(comfyPage, '11')
-        expect(initialWidgets.length).toBeGreaterThan(0)
-        await expectPromotedWidgetsToResolveToInteriorNodes(
-          comfyPage,
-          '11',
-          initialWidgets
-        )
-
-        const serialized1 = await comfyPage.page.evaluate(() =>
-          window.app!.graph!.serialize()
-        )
-        await comfyPage.page.evaluate(
-          (workflow: ComfyWorkflowJSON) => window.app!.loadGraphData(workflow),
-          serialized1 as ComfyWorkflowJSON
-        )
-        await comfyPage.nextFrame()
-
-        const afterFirst = await getPromotedWidgets(comfyPage, '11')
-        await expectPromotedWidgetsToResolveToInteriorNodes(
-          comfyPage,
-          '11',
-          afterFirst
-        )
-
-        const serialized2 = await comfyPage.page.evaluate(() =>
-          window.app!.graph!.serialize()
-        )
-        await comfyPage.page.evaluate(
-          (workflow: ComfyWorkflowJSON) => window.app!.loadGraphData(workflow),
-          serialized2 as ComfyWorkflowJSON
-        )
-        await comfyPage.nextFrame()
-
-        const afterSecond = await getPromotedWidgets(comfyPage, '11')
-        await expectPromotedWidgetsToResolveToInteriorNodes(
-          comfyPage,
-          '11',
-          afterSecond
-        )
-
-        expect(afterFirst).toEqual(initialWidgets)
-        expect(afterSecond).toEqual(initialWidgets)
-      })
-
-      test('Compressed target_slot (-1) entries are hydrated to real IDs', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-compressed-target-slot'
-        )
-        await comfyPage.nextFrame()
-
-        const widgets = await getPromotedWidgets(comfyPage, '2')
-        expect(widgets.length).toBeGreaterThan(0)
-
-        for (const [interiorNodeId] of widgets) {
-          expect(interiorNodeId).not.toBe('-1')
-          expect(Number(interiorNodeId)).toBeGreaterThan(0)
-        }
-
-        await expectPromotedWidgetsToResolveToInteriorNodes(
-          comfyPage,
-          '2',
-          widgets
-        )
-      })
-    })
-
-    test.describe('Cleanup Behavior After Promoted Source Removal', () => {
-      test.beforeEach(async ({ comfyPage }) => {
-        await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-      })
-
-      test('Removing promoted source node inside subgraph cleans up exterior proxyWidgets', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-promoted-text-widget'
-        )
-        await comfyPage.nextFrame()
-
-        const initialWidgets = await getPromotedWidgets(comfyPage, '11')
-        expect(initialWidgets.length).toBeGreaterThan(0)
-
-        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
-        await subgraphNode.navigateIntoSubgraph()
-
-        const clipNode = await comfyPage.nodeOps.getNodeRefById('10')
-        await clipNode.click('title')
-        await comfyPage.page.keyboard.press('Delete')
-        await comfyPage.nextFrame()
-
-        await comfyPage.subgraph.exitViaBreadcrumb()
-
-        await expect
-          .poll(async () => {
-            return await comfyPage.page.evaluate(() => {
-              const hostNode = window.app!.canvas.graph!.getNodeById('11')
-              const proxyWidgets = hostNode?.properties?.proxyWidgets
-              return {
-                proxyWidgetCount: Array.isArray(proxyWidgets)
-                  ? proxyWidgets.length
-                  : 0,
-                firstWidgetType: hostNode?.widgets?.[0]?.type
-              }
-            })
-          })
-          .toEqual({
-            proxyWidgetCount: 0,
-            firstWidgetType: undefined
-          })
-      })
-
-      test('Promoted widget disappears from DOM after interior node deletion', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-promoted-text-widget'
-        )
-        await comfyPage.nextFrame()
-
-        const textarea = comfyPage.page.getByTestId(
-          TestIds.widgets.domWidgetTextarea
-        )
-        await expect(textarea).toBeVisible()
-
-        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
-        await subgraphNode.navigateIntoSubgraph()
-
-        const clipNode = await comfyPage.nodeOps.getNodeRefById('10')
-        await clipNode.click('title')
-        await comfyPage.page.keyboard.press('Delete')
-        await comfyPage.nextFrame()
-
-        await comfyPage.subgraph.exitViaBreadcrumb()
-
-        await expect(
-          comfyPage.page.getByTestId(TestIds.widgets.domWidgetTextarea)
-        ).toHaveCount(0)
-      })
-    })
-
-    test.describe('Unpack/Remove Cleanup for Pseudo-Preview Targets', () => {
-      test('Pseudo-preview entries exist in proxyWidgets for preview subgraph', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-preview-node'
-        )
-        await comfyPage.nextFrame()
-
-        const pseudoWidgets = await getPseudoPreviewWidgets(comfyPage, '5')
-        expect(pseudoWidgets.length).toBeGreaterThan(0)
-        expect(
-          pseudoWidgets.some(([, name]) => name === '$$canvas-image-preview')
-        ).toBe(true)
-      })
-
-      test('Non-preview widgets coexist with pseudo-preview entries', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-preview-node'
-        )
-        await comfyPage.nextFrame()
-
-        const pseudoWidgets = await getPseudoPreviewWidgets(comfyPage, '5')
-        const nonPreviewWidgets = await getNonPreviewPromotedWidgets(
-          comfyPage,
-          '5'
-        )
-
-        expect(pseudoWidgets.length).toBeGreaterThan(0)
-        expect(nonPreviewWidgets.length).toBeGreaterThan(0)
-        expect(
-          nonPreviewWidgets.some(([, name]) => name === 'filename_prefix')
-        ).toBe(true)
-      })
-
-      test('Unpacking subgraph clears pseudo-preview entries from graph', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-preview-node'
-        )
-        await comfyPage.nextFrame()
-
-        const beforePseudo = await getPseudoPreviewWidgets(comfyPage, '5')
-        expect(beforePseudo.length).toBeGreaterThan(0)
-
-        await comfyPage.page.evaluate(() => {
-          const graph = window.app!.graph!
-          const subgraphNode = graph.nodes.find((n) => n.isSubgraphNode())
-          if (!subgraphNode || !subgraphNode.isSubgraphNode()) return
-          graph.unpackSubgraph(subgraphNode)
-        })
-        await comfyPage.nextFrame()
-
-        const subgraphNodeCount = await comfyPage.page.evaluate(() => {
-          const graph = window.app!.graph!
-          return graph.nodes.filter((n) => n.isSubgraphNode()).length
-        })
-        expect(subgraphNodeCount).toBe(0)
-
-        await expect
-          .poll(async () => comfyPage.subgraph.countGraphPseudoPreviewEntries())
-          .toBe(0)
-      })
-
-      test('Removing subgraph node clears pseudo-preview DOM elements', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-preview-node'
-        )
-        await comfyPage.nextFrame()
-
-        const beforePseudo = await getPseudoPreviewWidgets(comfyPage, '5')
-        expect(beforePseudo.length).toBeGreaterThan(0)
-
-        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('5')
-        expect(await subgraphNode.exists()).toBe(true)
-
-        await subgraphNode.click('title')
-        await comfyPage.page.keyboard.press('Delete')
-        await comfyPage.nextFrame()
-
-        const nodeExists = await comfyPage.page.evaluate(() => {
-          return !!window.app!.canvas.graph!.getNodeById('5')
-        })
-        expect(nodeExists).toBe(false)
-
-        await expect
-          .poll(async () => comfyPage.subgraph.countGraphPseudoPreviewEntries())
-          .toBe(0)
-        await expect(comfyPage.page.locator(domPreviewSelector)).toHaveCount(0)
-      })
-
-      test('Unpacking one subgraph does not clear sibling pseudo-preview entries', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-multiple-promoted-previews'
-        )
-        await comfyPage.nextFrame()
-
-        const firstNodeBefore = await getPseudoPreviewWidgets(comfyPage, '7')
-        const secondNodeBefore = await getPseudoPreviewWidgets(comfyPage, '8')
-
-        expect(firstNodeBefore.length).toBeGreaterThan(0)
-        expect(secondNodeBefore.length).toBeGreaterThan(0)
-
-        await comfyPage.page.evaluate(() => {
-          const graph = window.app!.graph!
-          const subgraphNode = graph.getNodeById('7')
-          if (!subgraphNode || !subgraphNode.isSubgraphNode()) return
-          graph.unpackSubgraph(subgraphNode)
-        })
-        await comfyPage.nextFrame()
-
-        const firstNodeExists = await comfyPage.page.evaluate(() => {
-          return !!window.app!.graph!.getNodeById('7')
-        })
-        expect(firstNodeExists).toBe(false)
-
-        const secondNodeAfter = await getPseudoPreviewWidgets(comfyPage, '8')
-        expect(secondNodeAfter).toEqual(secondNodeBefore)
-      })
-    })
-  }
-)
diff --git a/browser_tests/tests/subgraphNestedConfigureOrder.spec.ts b/browser_tests/tests/subgraphNestedConfigureOrder.spec.ts
deleted file mode 100644
index 90be76eb64..0000000000
--- a/browser_tests/tests/subgraphNestedConfigureOrder.spec.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-test.describe('Nested subgraph configure order', { tag: ['@subgraph'] }, () => {
-  const WORKFLOW = 'subgraphs/subgraph-nested-duplicate-ids'
-
-  test('Loads without "No link found" or "Failed to resolve legacy -1" console warnings', async ({
-    comfyPage
-  }) => {
-    const warnings: string[] = []
-    comfyPage.page.on('console', (msg) => {
-      const text = msg.text()
-      if (
-        text.includes('No link found') ||
-        text.includes('Failed to resolve legacy -1') ||
-        text.includes('No inner link found')
-      ) {
-        warnings.push(text)
-      }
-    })
-
-    await comfyPage.workflow.loadWorkflow(WORKFLOW)
-
-    expect(warnings).toEqual([])
-  })
-
-  test('All three subgraph levels resolve promoted widgets', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow(WORKFLOW)
-    await comfyPage.nextFrame()
-
-    const results = await comfyPage.page.evaluate(() => {
-      const graph = window.app!.canvas.graph!
-      const allGraphs = [graph, ...graph.subgraphs.values()]
-
-      return allGraphs.flatMap((g) =>
-        g._nodes
-          .filter(
-            (n) => typeof n.isSubgraphNode === 'function' && n.isSubgraphNode()
-          )
-          .map((hostNode) => {
-            const proxyWidgets = Array.isArray(
-              hostNode.properties?.proxyWidgets
-            )
-              ? hostNode.properties.proxyWidgets
-              : []
-
-            const widgetEntries = proxyWidgets
-              .filter(
-                (e: unknown): e is [string, string] =>
-                  Array.isArray(e) &&
-                  e.length >= 2 &&
-                  typeof e[0] === 'string' &&
-                  typeof e[1] === 'string'
-              )
-              .map(([interiorNodeId, widgetName]: [string, string]) => {
-                const sg = hostNode.isSubgraphNode() ? hostNode.subgraph : null
-                const interiorNode = sg?.getNodeById(Number(interiorNodeId))
-                return {
-                  interiorNodeId,
-                  widgetName,
-                  resolved: interiorNode !== null && interiorNode !== undefined
-                }
-              })
-
-            return {
-              hostNodeId: String(hostNode.id),
-              widgetEntries
-            }
-          })
-      )
-    })
-
-    expect(
-      results.length,
-      'Should have subgraph host nodes at multiple nesting levels'
-    ).toBeGreaterThanOrEqual(2)
-
-    for (const { hostNodeId, widgetEntries } of results) {
-      expect(
-        widgetEntries.length,
-        `Host node ${hostNodeId} should have promoted widgets`
-      ).toBeGreaterThan(0)
-
-      for (const { interiorNodeId, widgetName, resolved } of widgetEntries) {
-        expect(interiorNodeId).not.toBe('-1')
-        expect(Number(interiorNodeId)).toBeGreaterThan(0)
-        expect(widgetName).toBeTruthy()
-        expect(
-          resolved,
-          `Widget "${widgetName}" (interior node ${interiorNodeId}) on host ${hostNodeId} should resolve`
-        ).toBe(true)
-      }
-    }
-  })
-
-  test('Prompt execution succeeds without 400 error', async ({ comfyPage }) => {
-    await comfyPage.workflow.loadWorkflow(WORKFLOW)
-    await comfyPage.nextFrame()
-
-    const responsePromise = comfyPage.page.waitForResponse('**/api/prompt')
-
-    await comfyPage.command.executeCommand('Comfy.QueuePrompt')
-
-    const response = await responsePromise
-    expect(response.status()).not.toBe(400)
-  })
-})
diff --git a/browser_tests/tests/subgraphNestedDuplicateWidgetNames.spec.ts b/browser_tests/tests/subgraphNestedDuplicateWidgetNames.spec.ts
deleted file mode 100644
index 7c39782041..0000000000
--- a/browser_tests/tests/subgraphNestedDuplicateWidgetNames.spec.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-const WORKFLOW = 'subgraphs/nested-duplicate-widget-names'
-const PROMOTED_BORDER_CLASS = 'ring-component-node-widget-promoted'
-
-/**
- * Regression tests for nested subgraph promotion where multiple interior
- * nodes share the same widget name (e.g. two CLIPTextEncode nodes both
- * with a "text" widget).
- *
- * The inner subgraph (node 3) promotes both ["1","text"] and ["2","text"].
- * The outer subgraph (node 4) promotes through node 3 using identity
- * disambiguation (optional sourceNodeId in the promotion entry).
- *
- * See: https://github.com/Comfy-Org/ComfyUI_frontend/pull/10123#discussion_r2956230977
- */
-test.describe(
-  'Nested subgraph duplicate widget names',
-  { tag: ['@subgraph', '@widget'] },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
-    })
-
-    test('Inner subgraph node has both text widgets promoted', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(WORKFLOW)
-      await comfyPage.nextFrame()
-
-      const nonPreview = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.canvas.graph!
-        const outerNode = graph.getNodeById('4')
-        if (
-          !outerNode ||
-          typeof outerNode.isSubgraphNode !== 'function' ||
-          !outerNode.isSubgraphNode()
-        ) {
-          return []
-        }
-
-        const innerSubgraphNode = outerNode.subgraph.getNodeById(3)
-        if (!innerSubgraphNode) return []
-
-        return ((innerSubgraphNode.properties?.proxyWidgets ?? []) as unknown[])
-          .filter(
-            (entry): entry is [string, string] =>
-              Array.isArray(entry) &&
-              entry.length >= 2 &&
-              typeof entry[0] === 'string' &&
-              typeof entry[1] === 'string' &&
-              !entry[1].startsWith('$$')
-          )
-          .map(
-            ([nodeId, widgetName]) => [nodeId, widgetName] as [string, string]
-          )
-      })
-
-      expect(nonPreview).toEqual([
-        ['1', 'text'],
-        ['2', 'text']
-      ])
-    })
-
-    test('Promoted widget values from both inner CLIPTextEncode nodes are distinguishable', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(WORKFLOW)
-      await comfyPage.nextFrame()
-
-      const widgetValues = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.canvas.graph!
-        const outerNode = graph.getNodeById('4')
-        if (
-          !outerNode ||
-          typeof outerNode.isSubgraphNode !== 'function' ||
-          !outerNode.isSubgraphNode()
-        ) {
-          return []
-        }
-
-        const innerSubgraphNode = outerNode.subgraph.getNodeById(3)
-        if (!innerSubgraphNode) return []
-
-        return (innerSubgraphNode.widgets ?? []).map((w) => ({
-          name: w.name,
-          value: w.value
-        }))
-      })
-
-      const textWidgets = widgetValues.filter((w) => w.name.startsWith('text'))
-      expect(textWidgets).toHaveLength(2)
-
-      const values = textWidgets.map((w) => w.value)
-      expect(values).toContain('11111111111')
-      expect(values).toContain('22222222222')
-    })
-
-    test.describe('Promoted border styling in Vue mode', () => {
-      test.beforeEach(async ({ comfyPage }) => {
-        await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-      })
-
-      test('Intermediate subgraph widgets get promoted border, outermost does not', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(WORKFLOW)
-        await comfyPage.vueNodes.waitForNodes()
-
-        // Node 4 is the outer SubgraphNode at root level.
-        // Its widgets are not promoted further (no parent subgraph),
-        // so none of its widget wrappers should carry the promoted ring.
-        const outerNode = comfyPage.vueNodes.getNodeLocator('4')
-        await expect(outerNode).toBeVisible()
-
-        const outerPromotedRings = outerNode.locator(
-          `.${PROMOTED_BORDER_CLASS}`
-        )
-        await expect(outerPromotedRings).toHaveCount(0)
-
-        // Navigate into the outer subgraph (node 4) to reach node 3
-        await comfyPage.vueNodes.enterSubgraph('4')
-        await comfyPage.nextFrame()
-        await comfyPage.vueNodes.waitForNodes()
-
-        // Node 3 is the intermediate SubgraphNode whose "text" widgets
-        // are promoted up to the outer subgraph (node 4).
-        // Its widget wrappers should carry the promoted border ring.
-        const intermediateNode = comfyPage.vueNodes.getNodeLocator('3')
-        await expect(intermediateNode).toBeVisible()
-
-        const intermediatePromotedRings = intermediateNode.locator(
-          `.${PROMOTED_BORDER_CLASS}`
-        )
-        await expect(intermediatePromotedRings).toHaveCount(1)
-      })
-    })
-  }
-)
diff --git a/browser_tests/tests/subgraphNestedPackValues.spec.ts b/browser_tests/tests/subgraphNestedPackValues.spec.ts
deleted file mode 100644
index 114b8d47d1..0000000000
--- a/browser_tests/tests/subgraphNestedPackValues.spec.ts
+++ /dev/null
@@ -1,195 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-
-/**
- * Regression test for PR #10532:
- * Packing all nodes inside a subgraph into a nested subgraph was causing
- * the parent subgraph node's promoted widget values to go blank.
- *
- * Root cause: SubgraphNode had two sets of PromotedWidgetView references —
- * node.widgets (rebuilt from the promotion store) vs input._widget (cached
- * at promotion time). After repointing, input._widget still pointed to
- * removed node IDs, causing missing-node failures and blank values on the
- * next checkState cycle.
- */
-test.describe(
-  'Nested subgraph pack preserves promoted widget values',
-  { tag: ['@subgraph', '@widget'] },
-  () => {
-    const WORKFLOW = 'subgraphs/nested-pack-promoted-values'
-    const HOST_NODE_ID = '57'
-
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    })
-
-    test('Promoted widget values persist after packing interior nodes into nested subgraph', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(WORKFLOW)
-      await comfyPage.vueNodes.waitForNodes()
-
-      const nodeLocator = comfyPage.vueNodes.getNodeLocator(HOST_NODE_ID)
-      await expect(nodeLocator).toBeVisible()
-
-      // 1. Verify initial promoted widget values via Vue node DOM
-      const widthWidget = nodeLocator
-        .getByLabel('width', { exact: true })
-        .first()
-      const heightWidget = nodeLocator
-        .getByLabel('height', { exact: true })
-        .first()
-      const stepsWidget = nodeLocator
-        .getByLabel('steps', { exact: true })
-        .first()
-      const textWidget = nodeLocator.getByRole('textbox', { name: 'prompt' })
-
-      const widthControls =
-        comfyPage.vueNodes.getInputNumberControls(widthWidget)
-      const heightControls =
-        comfyPage.vueNodes.getInputNumberControls(heightWidget)
-      const stepsControls =
-        comfyPage.vueNodes.getInputNumberControls(stepsWidget)
-
-      await expect(async () => {
-        await expect(widthControls.input).toHaveValue('1024')
-        await expect(heightControls.input).toHaveValue('1024')
-        await expect(stepsControls.input).toHaveValue('8')
-        await expect(textWidget).toHaveValue(/Latina female/)
-      }).toPass({ timeout: 5000 })
-
-      // 2. Enter the subgraph via Vue node button
-      await comfyPage.vueNodes.enterSubgraph(HOST_NODE_ID)
-      expect(await comfyPage.subgraph.isInSubgraph()).toBe(true)
-
-      // 3. Disable Vue nodes for canvas operations (select all + convert)
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
-      await comfyPage.nextFrame()
-
-      // 4. Select all interior nodes and convert to nested subgraph
-      await comfyPage.canvas.click()
-      await comfyPage.canvas.press('Control+a')
-      await comfyPage.nextFrame()
-
-      await comfyPage.page.evaluate(() => {
-        const canvas = window.app!.canvas
-        canvas.graph!.convertToSubgraph(canvas.selectedItems)
-      })
-      await comfyPage.nextFrame()
-
-      // 5. Navigate back to root graph and trigger a checkState cycle
-      await comfyPage.subgraph.exitViaBreadcrumb()
-      await comfyPage.canvas.click()
-      await comfyPage.nextFrame()
-
-      // 6. Re-enable Vue nodes and verify values are preserved
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-      await comfyPage.vueNodes.waitForNodes()
-
-      const nodeAfter = comfyPage.vueNodes.getNodeLocator(HOST_NODE_ID)
-      await expect(nodeAfter).toBeVisible()
-
-      const widthAfter = nodeAfter.getByLabel('width', { exact: true }).first()
-      const heightAfter = nodeAfter
-        .getByLabel('height', { exact: true })
-        .first()
-      const stepsAfter = nodeAfter.getByLabel('steps', { exact: true }).first()
-      const textAfter = nodeAfter.getByRole('textbox', { name: 'prompt' })
-
-      const widthControlsAfter =
-        comfyPage.vueNodes.getInputNumberControls(widthAfter)
-      const heightControlsAfter =
-        comfyPage.vueNodes.getInputNumberControls(heightAfter)
-      const stepsControlsAfter =
-        comfyPage.vueNodes.getInputNumberControls(stepsAfter)
-
-      await expect(async () => {
-        await expect(widthControlsAfter.input).toHaveValue('1024')
-        await expect(heightControlsAfter.input).toHaveValue('1024')
-        await expect(stepsControlsAfter.input).toHaveValue('8')
-        await expect(textAfter).toHaveValue(/Latina female/)
-      }).toPass({ timeout: 5000 })
-    })
-
-    test('proxyWidgets entries resolve to valid interior nodes after packing', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(WORKFLOW)
-      await comfyPage.vueNodes.waitForNodes()
-
-      // Verify the host node is visible
-      const nodeLocator = comfyPage.vueNodes.getNodeLocator(HOST_NODE_ID)
-      await expect(nodeLocator).toBeVisible()
-
-      // Enter the subgraph via Vue node button, then disable for canvas ops
-      await comfyPage.vueNodes.enterSubgraph(HOST_NODE_ID)
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
-      await comfyPage.nextFrame()
-
-      await comfyPage.canvas.click()
-      await comfyPage.canvas.press('Control+a')
-      await comfyPage.nextFrame()
-
-      await comfyPage.page.evaluate(() => {
-        const canvas = window.app!.canvas
-        canvas.graph!.convertToSubgraph(canvas.selectedItems)
-      })
-      await comfyPage.nextFrame()
-
-      await comfyPage.subgraph.exitViaBreadcrumb()
-      await comfyPage.canvas.click()
-      await comfyPage.nextFrame()
-
-      // Verify all proxyWidgets entries resolve
-      await expect(async () => {
-        const result = await comfyPage.page.evaluate((hostId) => {
-          const graph = window.app!.graph!
-          const hostNode = graph.getNodeById(hostId)
-          if (
-            !hostNode ||
-            typeof hostNode.isSubgraphNode !== 'function' ||
-            !hostNode.isSubgraphNode()
-          ) {
-            return { error: 'Host node not found or not a subgraph node' }
-          }
-
-          const proxyWidgets = hostNode.properties?.proxyWidgets ?? []
-          const entries = (proxyWidgets as unknown[])
-            .filter(
-              (e): e is [string, string] =>
-                Array.isArray(e) &&
-                e.length >= 2 &&
-                typeof e[0] === 'string' &&
-                typeof e[1] === 'string' &&
-                !e[1].startsWith('$$')
-            )
-            .map(([nodeId, widgetName]) => {
-              const interiorNode = hostNode.subgraph.getNodeById(Number(nodeId))
-              return {
-                nodeId,
-                widgetName,
-                resolved: interiorNode !== null && interiorNode !== undefined
-              }
-            })
-
-          return { entries, count: entries.length }
-        }, HOST_NODE_ID)
-
-        expect(result).not.toHaveProperty('error')
-        const { entries, count } = result as {
-          entries: { nodeId: string; widgetName: string; resolved: boolean }[]
-          count: number
-        }
-        expect(count).toBeGreaterThan(0)
-        for (const entry of entries) {
-          expect(
-            entry.resolved,
-            `Widget "${entry.widgetName}" (node ${entry.nodeId}) should resolve`
-          ).toBe(true)
-        }
-      }).toPass({ timeout: 5000 })
-    })
-  }
-)
diff --git a/browser_tests/tests/subgraphNestedStaleProxyWidgets.spec.ts b/browser_tests/tests/subgraphNestedStaleProxyWidgets.spec.ts
deleted file mode 100644
index 8f1164e0a2..0000000000
--- a/browser_tests/tests/subgraphNestedStaleProxyWidgets.spec.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
-
-const WORKFLOW = 'subgraphs/nested-subgraph-stale-proxy-widgets'
-
-/**
- * Regression test for nested subgraph packing leaving stale proxyWidgets
- * on the outer SubgraphNode.
- *
- * When two CLIPTextEncode nodes (ids 6, 7) inside the outer subgraph are
- * packed into a nested subgraph (node 11), the outer SubgraphNode (id 10)
- * must drop the now-stale ["7","text"] and ["6","text"] proxy entries.
- * Only ["3","seed"] (KSampler) should remain.
- *
- * Stale entries render as "Disconnected" placeholder widgets (type "button").
- *
- * See: https://github.com/Comfy-Org/ComfyUI_frontend/pull/10390
- */
-test.describe(
-  'Nested subgraph stale proxyWidgets',
-  { tag: ['@subgraph', '@widget'] },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    })
-
-    test('Outer subgraph node has no stale proxyWidgets after nested packing', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(WORKFLOW)
-      await comfyPage.vueNodes.waitForNodes()
-
-      const outerNode = comfyPage.vueNodes.getNodeLocator('10')
-      await expect(outerNode).toBeVisible()
-
-      const widgets = outerNode.getByTestId(TestIds.widgets.widget)
-
-      // Only the KSampler seed widget should be present — no stale
-      // "Disconnected" placeholders from the packed CLIPTextEncode nodes.
-      await expect(widgets).toHaveCount(1)
-      await expect(widgets.first()).toBeVisible()
-
-      // Verify the seed widget is present via its label
-      const seedWidget = outerNode.getByLabel('seed', { exact: true })
-      await expect(seedWidget).toBeVisible()
-    })
-  }
-)
diff --git a/browser_tests/tests/subgraphProgressClear.spec.ts b/browser_tests/tests/subgraphProgressClear.spec.ts
deleted file mode 100644
index b0227b2009..0000000000
--- a/browser_tests/tests/subgraphProgressClear.spec.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-test.describe(
-  'Subgraph progress clear on navigation',
-  { tag: ['@subgraph'] },
-  () => {
-    test('Stale progress is cleared on subgraph node after navigating back', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-      await comfyPage.nextFrame()
-
-      // Find the subgraph node
-      const subgraphNodeId = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.canvas.graph!
-        const subgraphNode = graph.nodes.find(
-          (n) => typeof n.isSubgraphNode === 'function' && n.isSubgraphNode()
-        )
-        return subgraphNode ? String(subgraphNode.id) : null
-      })
-      expect(subgraphNodeId).not.toBeNull()
-
-      // Simulate a stale progress value on the subgraph node.
-      // This happens when:
-      //   1. User views root graph during execution
-      //   2. Progress watcher sets node.progress = 0.5
-      //   3. User enters subgraph
-      //   4. Execution completes (nodeProgressStates becomes {})
-      //   5. Watcher fires, clears subgraph-internal nodes, but root-level
-      //      SubgraphNode isn't visible so it keeps stale progress
-      //   6. User navigates back — watcher should fire and clear it
-      await comfyPage.page.evaluate((nodeId) => {
-        const node = window.app!.canvas.graph!.getNodeById(nodeId)!
-        node.progress = 0.5
-      }, subgraphNodeId!)
-
-      // Verify progress is set
-      const progressBefore = await comfyPage.page.evaluate((nodeId) => {
-        return window.app!.canvas.graph!.getNodeById(nodeId)!.progress
-      }, subgraphNodeId!)
-      expect(progressBefore).toBe(0.5)
-
-      // Navigate into the subgraph
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById(
-        subgraphNodeId!
-      )
-      await subgraphNode.navigateIntoSubgraph()
-
-      // Verify we're inside the subgraph
-      const inSubgraph = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.canvas.graph
-        return !!graph && 'inputNode' in graph
-      })
-      expect(inSubgraph).toBe(true)
-
-      // Navigate back to the root graph
-      await comfyPage.page.keyboard.press('Escape')
-      await comfyPage.nextFrame()
-
-      // The progress watcher should fire when graph changes (because
-      // nodeLocationProgressStates is empty {} and the watcher should
-      // iterate canvas.graph.nodes to clear stale node.progress values).
-      //
-      // BUG: Without watching canvasStore.currentGraph, the watcher doesn't
-      // fire on subgraph->root navigation when progress is already empty,
-      // leaving stale node.progress = 0.5 on the SubgraphNode.
-      await expect(async () => {
-        const progressAfter = await comfyPage.page.evaluate((nodeId) => {
-          return window.app!.canvas.graph!.getNodeById(nodeId)!.progress
-        }, subgraphNodeId!)
-        expect(progressAfter).toBeUndefined()
-      }).toPass({ timeout: 2_000 })
-    })
-
-    test('Stale progress is cleared when switching workflows while inside subgraph', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-      await comfyPage.nextFrame()
-
-      const subgraphNodeId = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.canvas.graph!
-        const subgraphNode = graph.nodes.find(
-          (n) => typeof n.isSubgraphNode === 'function' && n.isSubgraphNode()
-        )
-        return subgraphNode ? String(subgraphNode.id) : null
-      })
-      expect(subgraphNodeId).not.toBeNull()
-
-      await comfyPage.page.evaluate((nodeId) => {
-        const node = window.app!.canvas.graph!.getNodeById(nodeId)!
-        node.progress = 0.7
-      }, subgraphNodeId!)
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById(
-        subgraphNodeId!
-      )
-      await subgraphNode.navigateIntoSubgraph()
-
-      const inSubgraph = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.canvas.graph
-        return !!graph && 'inputNode' in graph
-      })
-      expect(inSubgraph).toBe(true)
-
-      await comfyPage.workflow.loadWorkflow('default')
-      await comfyPage.nextFrame()
-
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-      await comfyPage.nextFrame()
-
-      await expect(async () => {
-        const subgraphProgressState = await comfyPage.page.evaluate(() => {
-          const graph = window.app!.canvas.graph!
-          const subgraphNode = graph.nodes.find(
-            (n) => typeof n.isSubgraphNode === 'function' && n.isSubgraphNode()
-          )
-          if (!subgraphNode) {
-            return { exists: false, progress: null }
-          }
-
-          return { exists: true, progress: subgraphNode.progress }
-        })
-        expect(subgraphProgressState.exists).toBe(true)
-        expect(subgraphProgressState.progress).toBeUndefined()
-      }).toPass({ timeout: 5_000 })
-    })
-  }
-)
diff --git a/browser_tests/tests/subgraphPromotedWidgetPanel.spec.ts b/browser_tests/tests/subgraphPromotedWidgetPanel.spec.ts
new file mode 100644
index 0000000000..a9bccefe4f
--- /dev/null
+++ b/browser_tests/tests/subgraphPromotedWidgetPanel.spec.ts
@@ -0,0 +1,147 @@
+import type { Locator } from '@playwright/test'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+
+async function ensurePropertiesPanel(comfyPage: ComfyPage) {
+  const panel = comfyPage.menu.propertiesPanel.root
+  if (!(await panel.isVisible())) {
+    await comfyPage.actionbar.propertiesButton.click()
+  }
+  await expect(panel).toBeVisible()
+  return panel
+}
+
+async function selectSubgraphAndOpenEditor(
+  comfyPage: ComfyPage,
+  nodeTitle: string
+) {
+  const subgraphNodes = await comfyPage.nodeOps.getNodeRefsByTitle(nodeTitle)
+  expect(subgraphNodes.length).toBeGreaterThan(0)
+  await subgraphNodes[0].click('title')
+
+  await ensurePropertiesPanel(comfyPage)
+
+  const editorToggle = comfyPage.page.getByTestId(TestIds.subgraphEditor.toggle)
+  await expect(editorToggle).toBeVisible()
+  await editorToggle.click()
+
+  const shownSection = comfyPage.page.getByTestId(
+    TestIds.subgraphEditor.shownSection
+  )
+  await expect(shownSection).toBeVisible()
+  return shownSection
+}
+
+async function collectWidgetLabels(shownSection: Locator) {
+  const labels = shownSection.getByTestId(TestIds.subgraphEditor.widgetLabel)
+  const texts = await labels.allTextContents()
+  return texts.map((t) => t.trim())
+}
+
+test.describe(
+  'Subgraph promoted widget panel',
+  { tag: ['@node', '@widget'] },
+  () => {
+    test.describe('SubgraphEditor (Settings panel)', () => {
+      test('linked promoted widgets have hide toggle disabled', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-nested-promotion'
+        )
+        const shownSection = await selectSubgraphAndOpenEditor(
+          comfyPage,
+          'Sub 0'
+        )
+
+        const toggleButtons = shownSection.getByTestId(
+          TestIds.subgraphEditor.widgetToggle
+        )
+        await expect(toggleButtons.first()).toBeVisible()
+
+        const count = await toggleButtons.count()
+        for (let i = 0; i < count; i++) {
+          await expect(toggleButtons.nth(i)).toBeDisabled()
+        }
+      })
+
+      test('linked promoted widgets show link icon instead of eye icon', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-nested-promotion'
+        )
+        const shownSection = await selectSubgraphAndOpenEditor(
+          comfyPage,
+          'Sub 0'
+        )
+
+        const linkIcons = shownSection.getByTestId(
+          TestIds.subgraphEditor.iconLink
+        )
+        await expect(linkIcons.first()).toBeVisible()
+
+        const eyeIcons = shownSection.getByTestId(
+          TestIds.subgraphEditor.iconEye
+        )
+        await expect(eyeIcons).toHaveCount(0)
+      })
+
+      test('widget labels display renamed values instead of raw names', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/test-values-input-subgraph'
+        )
+        const shownSection = await selectSubgraphAndOpenEditor(
+          comfyPage,
+          'Input Test Subgraph'
+        )
+
+        await expect
+          .poll(() => collectWidgetLabels(shownSection))
+          .toEqual(
+            expect.arrayContaining([
+              expect.anything(),
+              'renamed_from_sidepanel'
+            ])
+          )
+        await expect
+          .poll(() => collectWidgetLabels(shownSection))
+          .not.toContain('text')
+      })
+    })
+
+    test.describe('Parameters tab (WidgetActions menu)', () => {
+      test('linked promoted widget menu should not show Hide/Show input', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-nested-promotion'
+        )
+        const subgraphNodes =
+          await comfyPage.nodeOps.getNodeRefsByTitle('Sub 0')
+        expect(subgraphNodes.length).toBeGreaterThan(0)
+        await subgraphNodes[0].click('title')
+
+        const panel = await ensurePropertiesPanel(comfyPage)
+
+        const moreButtons = panel.getByTestId(
+          TestIds.subgraphEditor.widgetActionsMenuButton
+        )
+        await expect(moreButtons.first()).toBeVisible()
+        await moreButtons.first().click()
+
+        const menu = comfyPage.page.getByTestId(TestIds.menu.moreMenuContent)
+        await expect(menu).toBeVisible()
+        await expect(menu.getByText('Hide input')).toHaveCount(0)
+        await expect(menu.getByText('Show input')).toHaveCount(0)
+        await expect(menu.getByText('Rename')).toBeVisible()
+      })
+    })
+  }
+)
diff --git a/browser_tests/tests/subgraphPromotion.spec.ts b/browser_tests/tests/subgraphPromotion.spec.ts
deleted file mode 100644
index af7d50383c..0000000000
--- a/browser_tests/tests/subgraphPromotion.spec.ts
+++ /dev/null
@@ -1,796 +0,0 @@
-import { expect } from '@playwright/test'
-
-import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
-import { fitToViewInstant } from '../helpers/fitToView'
-import {
-  getPromotedWidgetNames,
-  getPromotedWidgetCount,
-  getPromotedWidgets
-} from '../helpers/promotedWidgets'
-
-test.describe(
-  'Subgraph Widget Promotion',
-  { tag: ['@subgraph', '@widget'] },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
-    })
-
-    test.describe('Auto-promotion on Convert to Subgraph', () => {
-      test('Recommended widgets are auto-promoted when creating a subgraph', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow('default')
-
-        // Select just the KSampler node (id 3) which has a "seed" widget
-        const ksampler = await comfyPage.nodeOps.getNodeRefById('3')
-        await ksampler.click('title')
-        const subgraphNode = await ksampler.convertToSubgraph()
-        await comfyPage.nextFrame()
-
-        // SubgraphNode should exist
-        expect(await subgraphNode.exists()).toBe(true)
-
-        // The KSampler has a "seed" widget which is in the recommended list.
-        // The promotion store should have at least the seed widget promoted.
-        const nodeId = String(subgraphNode.id)
-        const promotedNames = await getPromotedWidgetNames(comfyPage, nodeId)
-        expect(promotedNames).toContain('seed')
-
-        // SubgraphNode should have widgets (promoted views)
-        const widgetCount = await getPromotedWidgetCount(comfyPage, nodeId)
-        expect(widgetCount).toBeGreaterThan(0)
-      })
-
-      test('CLIPTextEncode text widget is auto-promoted', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow('default')
-
-        // Select the positive CLIPTextEncode node (id 6)
-        const clipNode = await comfyPage.nodeOps.getNodeRefById('6')
-        await clipNode.click('title')
-        const subgraphNode = await clipNode.convertToSubgraph()
-        await comfyPage.nextFrame()
-
-        const nodeId = String(subgraphNode.id)
-        const promotedNames = await getPromotedWidgetNames(comfyPage, nodeId)
-        expect(promotedNames.length).toBeGreaterThan(0)
-
-        // CLIPTextEncode is in the recommendedNodes list, so its text widget
-        // should be promoted
-        expect(promotedNames).toContain('text')
-      })
-
-      test('SaveImage/PreviewImage nodes get pseudo-widget promoted', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow('default')
-
-        // Pan to SaveImage node (rightmost, may be off-screen in CI)
-        const saveNode = await comfyPage.nodeOps.getNodeRefById('9')
-        const savePos = await saveNode.getPosition()
-        await comfyPage.page.evaluate((pos) => {
-          const canvas = window.app!.canvas
-          canvas.ds.offset[0] = -pos.x + canvas.canvas.width / 2
-          canvas.ds.offset[1] = -pos.y + canvas.canvas.height / 2
-          canvas.setDirty(true, true)
-        }, savePos)
-        await comfyPage.nextFrame()
-
-        await saveNode.click('title')
-        const subgraphNode = await saveNode.convertToSubgraph()
-        await comfyPage.nextFrame()
-
-        const promotedNames = await getPromotedWidgetNames(
-          comfyPage,
-          String(subgraphNode.id)
-        )
-
-        // SaveImage is in the recommendedNodes list, so filename_prefix is promoted
-        expect(promotedNames).toContain('filename_prefix')
-      })
-    })
-
-    test.describe('Promoted Widget Visibility in LiteGraph Mode', () => {
-      test('Promoted text widget is visible on SubgraphNode', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-promoted-text-widget'
-        )
-        await comfyPage.nextFrame()
-
-        // The subgraph node (id 11) should have a text widget promoted
-        const textarea = comfyPage.page.getByTestId(
-          TestIds.widgets.domWidgetTextarea
-        )
-        await expect(textarea).toBeVisible()
-        await expect(textarea).toHaveCount(1)
-      })
-
-      test('Multiple promoted widgets all render on SubgraphNode', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-multiple-promoted-widgets'
-        )
-        await comfyPage.nextFrame()
-
-        const textareas = comfyPage.page.getByTestId(
-          TestIds.widgets.domWidgetTextarea
-        )
-        await expect(textareas.first()).toBeVisible()
-        const count = await textareas.count()
-        expect(count).toBeGreaterThan(1)
-      })
-    })
-
-    test.describe('Promoted Widget Visibility in Vue Mode', () => {
-      test.beforeEach(async ({ comfyPage }) => {
-        await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-      })
-
-      test('Promoted text widget renders on SubgraphNode in Vue mode', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-promoted-text-widget'
-        )
-        await comfyPage.vueNodes.waitForNodes()
-
-        // SubgraphNode (id 11) should render with its body
-        const subgraphVueNode = comfyPage.vueNodes.getNodeLocator('11')
-        await expect(subgraphVueNode).toBeVisible()
-
-        // It should have the Enter Subgraph button
-        const enterButton = subgraphVueNode.getByTestId('subgraph-enter-button')
-        await expect(enterButton).toBeVisible()
-
-        // The promoted text widget should render inside the node
-        const nodeBody = subgraphVueNode.locator('[data-testid="node-body-11"]')
-        await expect(nodeBody).toBeVisible()
-
-        // Widgets section should exist and have at least one widget
-        const widgets = nodeBody.locator('.lg-node-widgets > div')
-        await expect(widgets.first()).toBeVisible()
-      })
-
-      test('Enter Subgraph button navigates into subgraph in Vue mode', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-promoted-text-widget'
-        )
-        await comfyPage.vueNodes.waitForNodes()
-
-        await comfyPage.vueNodes.enterSubgraph('11')
-        await comfyPage.nextFrame()
-
-        expect(await comfyPage.subgraph.isInSubgraph()).toBe(true)
-      })
-
-      test('Multiple promoted widgets render on SubgraphNode in Vue mode', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-multiple-promoted-widgets'
-        )
-        await comfyPage.vueNodes.waitForNodes()
-
-        const subgraphVueNode = comfyPage.vueNodes.getNodeLocator('11')
-        await expect(subgraphVueNode).toBeVisible()
-
-        const nodeBody = subgraphVueNode.locator('[data-testid="node-body-11"]')
-        const widgets = nodeBody.locator('.lg-node-widgets > div')
-        const count = await widgets.count()
-        expect(count).toBeGreaterThan(1)
-      })
-    })
-
-    test.describe('Promoted Widget Reactivity', () => {
-      test('Value changes on promoted widget sync to interior widget', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-promoted-text-widget'
-        )
-        await comfyPage.nextFrame()
-
-        const testContent = 'promoted-value-sync-test'
-
-        // Type into the promoted textarea on the SubgraphNode
-        const textarea = comfyPage.page.getByTestId(
-          TestIds.widgets.domWidgetTextarea
-        )
-        await textarea.fill(testContent)
-        await comfyPage.nextFrame()
-
-        // Navigate into subgraph
-        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
-        await subgraphNode.navigateIntoSubgraph()
-
-        // Interior CLIPTextEncode textarea should have the same value
-        const interiorTextarea = comfyPage.page.getByTestId(
-          TestIds.widgets.domWidgetTextarea
-        )
-        await expect(interiorTextarea).toHaveValue(testContent)
-      })
-
-      test('Value changes on interior widget sync to promoted widget', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-promoted-text-widget'
-        )
-        await comfyPage.nextFrame()
-
-        const testContent = 'interior-value-sync-test'
-
-        // Navigate into subgraph
-        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
-        await subgraphNode.navigateIntoSubgraph()
-
-        // Type into the interior CLIPTextEncode textarea
-        const interiorTextarea = comfyPage.page.getByTestId(
-          TestIds.widgets.domWidgetTextarea
-        )
-        await interiorTextarea.fill(testContent)
-        await comfyPage.nextFrame()
-
-        // Navigate back to parent graph
-        await comfyPage.subgraph.exitViaBreadcrumb()
-
-        // Promoted textarea on SubgraphNode should have the same value
-        const promotedTextarea = comfyPage.page.getByTestId(
-          TestIds.widgets.domWidgetTextarea
-        )
-        await expect(promotedTextarea).toHaveValue(testContent)
-      })
-
-      test('Value persists through repeated navigation', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-promoted-text-widget'
-        )
-        await comfyPage.nextFrame()
-
-        const testContent = 'persistence-through-navigation'
-
-        // Set value on promoted widget
-        const textarea = comfyPage.page.getByTestId(
-          TestIds.widgets.domWidgetTextarea
-        )
-        await textarea.fill(testContent)
-
-        // Navigate in and out multiple times
-        for (let i = 0; i < 3; i++) {
-          const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
-          await subgraphNode.navigateIntoSubgraph()
-          const interiorTextarea = comfyPage.page.getByTestId(
-            TestIds.widgets.domWidgetTextarea
-          )
-          await expect(interiorTextarea).toHaveValue(testContent)
-
-          await comfyPage.subgraph.exitViaBreadcrumb()
-
-          const promotedTextarea = comfyPage.page.getByTestId(
-            TestIds.widgets.domWidgetTextarea
-          )
-          await expect(promotedTextarea).toHaveValue(testContent)
-        }
-      })
-    })
-
-    test.describe('Manual Promote/Demote via Context Menu', () => {
-      test.beforeEach(async ({ comfyPage }) => {
-        await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-      })
-
-      test('Can promote a widget from inside a subgraph', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-        await subgraphNode.navigateIntoSubgraph()
-
-        // Get the KSampler node (id 1) inside the subgraph
-        const ksampler = await comfyPage.nodeOps.getNodeRefById('1')
-
-        // Right-click on the KSampler's "steps" widget (index 2) to promote it
-        const stepsWidget = await ksampler.getWidget(2)
-        const widgetPos = await stepsWidget.getPosition()
-        await comfyPage.canvas.click({
-          position: widgetPos,
-          button: 'right',
-          force: true
-        })
-        await comfyPage.nextFrame()
-
-        // Look for the Promote Widget menu entry
-        const promoteEntry = comfyPage.page
-          .locator('.litemenu-entry')
-          .filter({ hasText: /Promote Widget/ })
-
-        await expect(promoteEntry).toBeVisible()
-        await promoteEntry.click()
-        await comfyPage.nextFrame()
-
-        // Navigate back to parent
-        await comfyPage.subgraph.exitViaBreadcrumb()
-
-        // SubgraphNode should now have the promoted widget
-        const widgetCount = await getPromotedWidgetCount(comfyPage, '2')
-        expect(widgetCount).toBeGreaterThan(0)
-      })
-
-      test('Can un-promote a widget from inside a subgraph', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-        // First promote a canvas-rendered widget (KSampler "steps")
-        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-        await subgraphNode.navigateIntoSubgraph()
-
-        const ksampler = await comfyPage.nodeOps.getNodeRefById('1')
-        const stepsWidget = await ksampler.getWidget(2)
-        const widgetPos = await stepsWidget.getPosition()
-
-        await comfyPage.canvas.click({
-          position: widgetPos,
-          button: 'right',
-          force: true
-        })
-        await comfyPage.nextFrame()
-
-        const promoteEntry = comfyPage.page
-          .locator('.litemenu-entry')
-          .filter({ hasText: /Promote Widget/ })
-        await expect(promoteEntry).toBeVisible()
-        await promoteEntry.click()
-        await comfyPage.nextFrame()
-
-        // Navigate back and verify promotion took effect
-        await comfyPage.subgraph.exitViaBreadcrumb()
-        await fitToViewInstant(comfyPage)
-        await comfyPage.nextFrame()
-
-        const initialWidgetCount = await getPromotedWidgetCount(comfyPage, '2')
-        expect(initialWidgetCount).toBeGreaterThan(0)
-
-        // Navigate back in and un-promote
-        const subgraphNode2 = await comfyPage.nodeOps.getNodeRefById('2')
-        await subgraphNode2.navigateIntoSubgraph()
-        const stepsWidget2 = await (
-          await comfyPage.nodeOps.getNodeRefById('1')
-        ).getWidget(2)
-        const widgetPos2 = await stepsWidget2.getPosition()
-
-        await comfyPage.canvas.click({
-          position: widgetPos2,
-          button: 'right',
-          force: true
-        })
-        await comfyPage.nextFrame()
-
-        const unpromoteEntry = comfyPage.page
-          .locator('.litemenu-entry')
-          .filter({ hasText: /Un-Promote Widget/ })
-
-        await expect(unpromoteEntry).toBeVisible()
-        await unpromoteEntry.click()
-        await comfyPage.nextFrame()
-
-        // Navigate back to parent
-        await comfyPage.subgraph.exitViaBreadcrumb()
-
-        // SubgraphNode should have fewer widgets
-        const finalWidgetCount = await getPromotedWidgetCount(comfyPage, '2')
-        expect(finalWidgetCount).toBeLessThan(initialWidgetCount)
-      })
-    })
-
-    test.describe('Textarea Widget Context Menu in Subgraph (Vue Mode)', () => {
-      test.beforeEach(async ({ comfyPage }) => {
-        await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-        await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-      })
-
-      test('Right-click on textarea widget inside subgraph shows Promote Widget option', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-text-widget'
-        )
-        await comfyPage.vueNodes.waitForNodes()
-
-        // Navigate into the subgraph (node id 11)
-        await comfyPage.vueNodes.enterSubgraph('11')
-        await comfyPage.nextFrame()
-        await comfyPage.vueNodes.waitForNodes()
-
-        // The interior CLIPTextEncode node (id 10) should render a textarea
-        // widget in Vue mode. Right-click it to verify the contextmenu
-        // event propagates correctly (fix from PR #9840) and shows the
-        // ComfyUI context menu with "Promote Widget".
-        const clipNode = comfyPage.vueNodes.getNodeLocator('10')
-        await expect(clipNode).toBeVisible()
-
-        // Select the node first so the context menu builds correctly
-        await comfyPage.vueNodes.selectNode('10')
-        await comfyPage.nextFrame()
-
-        // Dispatch a contextmenu event directly on the textarea. A normal
-        // right-click is intercepted by the z-999 canvas overlay, but the
-        // Vue WidgetTextarea.vue handler listens on @contextmenu.capture,
-        // so dispatching the event directly tests the fix from PR #9840.
-        const textarea = clipNode.locator('textarea')
-        await expect(textarea).toBeVisible()
-        await textarea.dispatchEvent('contextmenu', {
-          bubbles: true,
-          cancelable: true,
-          button: 2
-        })
-        await comfyPage.nextFrame()
-
-        // The PrimeVue context menu should show "Promote Widget" since
-        // the node is inside a subgraph (not the root graph).
-        const promoteEntry = comfyPage.page
-          .locator('.p-contextmenu')
-          .locator('text=Promote Widget')
-
-        await expect(promoteEntry.first()).toBeVisible({ timeout: 5000 })
-      })
-    })
-
-    test.describe('Pseudo-Widget Promotion', () => {
-      test('Promotion store tracks pseudo-widget entries for subgraph with preview node', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-preview-node'
-        )
-        await comfyPage.nextFrame()
-
-        // The SaveImage node is in the recommendedNodes list, so its
-        // filename_prefix widget should be auto-promoted
-        const promotedNames = await getPromotedWidgetNames(comfyPage, '5')
-        expect(promotedNames.length).toBeGreaterThan(0)
-        expect(promotedNames).toContain('filename_prefix')
-      })
-
-      test('Converting SaveImage to subgraph promotes its widgets', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow('default')
-
-        // Pan to SaveImage node (rightmost, may be off-screen in CI)
-        const saveNode = await comfyPage.nodeOps.getNodeRefById('9')
-        const savePos = await saveNode.getPosition()
-        await comfyPage.page.evaluate((pos) => {
-          const canvas = window.app!.canvas
-          canvas.ds.offset[0] = -pos.x + canvas.canvas.width / 2
-          canvas.ds.offset[1] = -pos.y + canvas.canvas.height / 2
-          canvas.setDirty(true, true)
-        }, savePos)
-        await comfyPage.nextFrame()
-
-        await saveNode.click('title')
-        const subgraphNode = await saveNode.convertToSubgraph()
-        await comfyPage.nextFrame()
-
-        // SaveImage is a recommended node, so filename_prefix should be promoted
-        const nodeId = String(subgraphNode.id)
-        const promotedNames = await getPromotedWidgetNames(comfyPage, nodeId)
-        expect(promotedNames.length).toBeGreaterThan(0)
-
-        const widgetCount = await getPromotedWidgetCount(comfyPage, nodeId)
-        expect(widgetCount).toBeGreaterThan(0)
-      })
-    })
-
-    test.describe('Legacy And Round-Trip Coverage', () => {
-      test('Legacy -1 proxyWidgets entries are hydrated to concrete interior node IDs', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-compressed-target-slot'
-        )
-        await comfyPage.nextFrame()
-
-        const promotedWidgets = await getPromotedWidgets(comfyPage, '2')
-        expect(promotedWidgets.length).toBeGreaterThan(0)
-        expect(
-          promotedWidgets.some(([interiorNodeId]) => interiorNodeId === '-1')
-        ).toBe(false)
-        expect(
-          promotedWidgets.some(
-            ([interiorNodeId, widgetName]) =>
-              interiorNodeId !== '-1' && widgetName === 'batch_size'
-          )
-        ).toBe(true)
-      })
-
-      test('Promoted widgets survive serialize -> loadGraphData round-trip', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-promoted-text-widget'
-        )
-        await comfyPage.nextFrame()
-
-        const beforePromoted = await getPromotedWidgetNames(comfyPage, '11')
-        expect(beforePromoted).toContain('text')
-
-        const serialized = await comfyPage.page.evaluate(() => {
-          return window.app!.graph!.serialize()
-        })
-
-        await comfyPage.page.evaluate((workflow: ComfyWorkflowJSON) => {
-          return window.app!.loadGraphData(workflow)
-        }, serialized as ComfyWorkflowJSON)
-        await comfyPage.nextFrame()
-
-        const afterPromoted = await getPromotedWidgetNames(comfyPage, '11')
-        expect(afterPromoted).toContain('text')
-
-        const widgetCount = await getPromotedWidgetCount(comfyPage, '11')
-        expect(widgetCount).toBeGreaterThan(0)
-      })
-
-      test('Multi-link input representative stays stable through save/reload', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-multiple-promoted-widgets'
-        )
-        await comfyPage.nextFrame()
-
-        const beforeSnapshot = await getPromotedWidgets(comfyPage, '11')
-        expect(beforeSnapshot.length).toBeGreaterThan(0)
-
-        const serialized = await comfyPage.page.evaluate(() => {
-          return window.app!.graph!.serialize()
-        })
-
-        await comfyPage.page.evaluate((workflow: ComfyWorkflowJSON) => {
-          return window.app!.loadGraphData(workflow)
-        }, serialized as ComfyWorkflowJSON)
-        await comfyPage.nextFrame()
-
-        const afterSnapshot = await getPromotedWidgets(comfyPage, '11')
-        expect(afterSnapshot).toEqual(beforeSnapshot)
-      })
-
-      test('Cloning a subgraph node keeps promoted widget entries on original and clone', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-promoted-text-widget'
-        )
-        await comfyPage.nextFrame()
-
-        const originalNode = await comfyPage.nodeOps.getNodeRefById('11')
-        const originalPos = await originalNode.getPosition()
-
-        await comfyPage.page.mouse.move(originalPos.x + 16, originalPos.y + 16)
-        await comfyPage.page.keyboard.down('Alt')
-        await comfyPage.page.mouse.down()
-        await comfyPage.nextFrame()
-        await comfyPage.page.mouse.move(originalPos.x + 72, originalPos.y + 72)
-        await comfyPage.page.mouse.up()
-        await comfyPage.page.keyboard.up('Alt')
-        await comfyPage.nextFrame()
-
-        const subgraphNodeIds = await comfyPage.page.evaluate(() => {
-          const graph = window.app!.canvas.graph!
-          return graph.nodes
-            .filter(
-              (n) =>
-                typeof n.isSubgraphNode === 'function' && n.isSubgraphNode()
-            )
-            .map((n) => String(n.id))
-        })
-
-        expect(subgraphNodeIds.length).toBeGreaterThan(1)
-        for (const nodeId of subgraphNodeIds) {
-          const promotedWidgets = await getPromotedWidgets(comfyPage, nodeId)
-          expect(promotedWidgets.length).toBeGreaterThan(0)
-          expect(
-            promotedWidgets.some(([, widgetName]) => widgetName === 'text')
-          ).toBe(true)
-        }
-      })
-    })
-
-    test.describe('Vue Mode - Promoted Preview Content', () => {
-      test.beforeEach(async ({ comfyPage }) => {
-        await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-      })
-
-      test('SubgraphNode with preview node shows hasCustomContent area in Vue mode', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-preview-node'
-        )
-        await comfyPage.vueNodes.waitForNodes()
-
-        const subgraphVueNode = comfyPage.vueNodes.getNodeLocator('5')
-        await expect(subgraphVueNode).toBeVisible()
-
-        // The node body should exist
-        const nodeBody = subgraphVueNode.locator('[data-testid="node-body-5"]')
-        await expect(nodeBody).toBeVisible()
-      })
-    })
-
-    test.describe('Nested Promoted Widget Disabled State', () => {
-      test('Externally linked promoted widget is disabled, unlinked ones are not', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-nested-promotion'
-        )
-        await comfyPage.nextFrame()
-
-        // Node 5 (Sub 0) has 4 promoted widgets. The first (string_a) has its
-        // slot connected externally from the Outer node, so it should be
-        // disabled. The remaining promoted textarea widgets (value, value_1)
-        // are unlinked and should be enabled.
-        const promotedNames = await getPromotedWidgetNames(comfyPage, '5')
-        expect(promotedNames).toContain('string_a')
-        expect(promotedNames).toContain('value')
-
-        const disabledState = await comfyPage.page.evaluate(() => {
-          const node = window.app!.canvas.graph!.getNodeById('5')
-          return (node?.widgets ?? []).map((w) => ({
-            name: w.name,
-            disabled: !!w.computedDisabled
-          }))
-        })
-
-        const linkedWidget = disabledState.find((w) => w.name === 'string_a')
-        expect(linkedWidget?.disabled).toBe(true)
-
-        const unlinkedWidgets = disabledState.filter(
-          (w) => w.name !== 'string_a'
-        )
-        for (const w of unlinkedWidgets) {
-          expect(w.disabled).toBe(false)
-        }
-      })
-
-      test('Unlinked promoted textarea widgets are editable on the subgraph exterior', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-nested-promotion'
-        )
-        await comfyPage.nextFrame()
-
-        // The promoted textareas that are NOT externally linked should be
-        // fully opaque and interactive.
-        const textareas = comfyPage.page.getByTestId(
-          TestIds.widgets.domWidgetTextarea
-        )
-        await expect(textareas.first()).toBeVisible()
-
-        const count = await textareas.count()
-        for (let i = 0; i < count; i++) {
-          const textarea = textareas.nth(i)
-          const wrapper = textarea.locator('..')
-          const opacity = await wrapper.evaluate(
-            (el) => getComputedStyle(el).opacity
-          )
-
-          if (opacity === '1' && (await textarea.isEditable())) {
-            const testContent = `nested-promotion-edit-${i}`
-            await textarea.fill(testContent)
-            await expect(textarea).toHaveValue(testContent)
-          }
-        }
-      })
-    })
-
-    test.describe('Promotion Cleanup', () => {
-      test('Removing subgraph node clears promotion store entries', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-promoted-text-widget'
-        )
-        await comfyPage.nextFrame()
-
-        // Verify promotions exist
-        const namesBefore = await getPromotedWidgetNames(comfyPage, '11')
-        expect(namesBefore.length).toBeGreaterThan(0)
-
-        // Delete the subgraph node
-        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
-        await subgraphNode.click('title')
-        await comfyPage.page.keyboard.press('Delete')
-        await comfyPage.nextFrame()
-
-        // Node no longer exists, so promoted widgets should be gone
-        const nodeExists = await comfyPage.page.evaluate(() => {
-          return !!window.app!.canvas.graph!.getNodeById('11')
-        })
-        expect(nodeExists).toBe(false)
-      })
-
-      test('Nested promoted widget entries reflect interior changes after slot removal', async ({
-        comfyPage
-      }) => {
-        await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-nested-promotion'
-        )
-        await comfyPage.nextFrame()
-
-        const initialNames = await getPromotedWidgetNames(comfyPage, '5')
-        expect(initialNames.length).toBeGreaterThan(0)
-
-        const outerSubgraph = await comfyPage.nodeOps.getNodeRefById('5')
-        await outerSubgraph.navigateIntoSubgraph()
-
-        const removedSlotName = await comfyPage.page.evaluate(() => {
-          const graph = window.app!.canvas.graph
-          if (!graph || !('inputNode' in graph)) return null
-          return graph.inputs?.[0]?.name ?? null
-        })
-        expect(removedSlotName).not.toBeNull()
-
-        await comfyPage.subgraph.rightClickInputSlot()
-        await comfyPage.contextMenu.clickLitegraphMenuItem('Remove Slot')
-        await comfyPage.nextFrame()
-
-        await comfyPage.subgraph.exitViaBreadcrumb()
-
-        const finalNames = await getPromotedWidgetNames(comfyPage, '5')
-        const expectedNames = [...initialNames]
-        const removedIndex = expectedNames.indexOf(removedSlotName!)
-        expect(removedIndex).toBeGreaterThanOrEqual(0)
-        expectedNames.splice(removedIndex, 1)
-
-        expect(finalNames).toEqual(expectedNames)
-      })
-
-      test('Removing I/O slot removes associated promoted widget', async ({
-        comfyPage
-      }) => {
-        await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-promoted-text-widget'
-        )
-
-        const initialWidgetCount = await getPromotedWidgetCount(comfyPage, '11')
-        expect(initialWidgetCount).toBeGreaterThan(0)
-
-        // Navigate into subgraph
-        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
-        await subgraphNode.navigateIntoSubgraph()
-
-        // Remove the text input slot
-        await comfyPage.subgraph.rightClickInputSlot('text')
-        await comfyPage.contextMenu.clickLitegraphMenuItem('Remove Slot')
-        await comfyPage.nextFrame()
-
-        // Navigate back via breadcrumb
-        await comfyPage.subgraph.exitViaBreadcrumb()
-
-        // Widget count should be reduced
-        const finalWidgetCount = await getPromotedWidgetCount(comfyPage, '11')
-        expect(finalWidgetCount).toBeLessThan(initialWidgetCount)
-      })
-    })
-  }
-)
diff --git a/browser_tests/tests/subgraphSlotAlignment.spec.ts b/browser_tests/tests/subgraphSlotAlignment.spec.ts
deleted file mode 100644
index 19c0fd4767..0000000000
--- a/browser_tests/tests/subgraphSlotAlignment.spec.ts
+++ /dev/null
@@ -1,132 +0,0 @@
-import { readFileSync } from 'fs'
-import { resolve } from 'path'
-
-import { expect } from '@playwright/test'
-
-import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-interface SlotMeasurement {
-  key: string
-  offsetX: number
-  offsetY: number
-}
-
-interface NodeSlotData {
-  nodeId: string
-  isSubgraph: boolean
-  nodeW: number
-  nodeH: number
-  slots: SlotMeasurement[]
-}
-
-/**
- * Regression test for link misalignment on SubgraphNodes when loading
- * workflows with workflowRendererVersion: "LG".
- *
- * Root cause: ensureCorrectLayoutScale scales nodes by 1.2x for LG workflows,
- * and fitView() updates lgCanvas.ds immediately. The Vue TransformPane's CSS
- * transform lags by a frame, causing clientPosToCanvasPos to produce wrong
- * slot offsets. The fix uses DOM-relative measurement instead.
- */
-test.describe(
-  'Subgraph slot alignment after LG layout scale',
-  { tag: ['@subgraph', '@canvas'] },
-  () => {
-    test('slot positions stay within node bounds after loading LG workflow', async ({
-      comfyPage
-    }) => {
-      const SLOT_BOUNDS_MARGIN = 20
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-
-      const workflowPath = resolve(
-        import.meta.dirname,
-        '../assets/subgraphs/basic-subgraph.json'
-      )
-      const workflow = JSON.parse(
-        readFileSync(workflowPath, 'utf-8')
-      ) as ComfyWorkflowJSON
-      workflow.extra = {
-        ...workflow.extra,
-        workflowRendererVersion: 'LG'
-      }
-
-      await comfyPage.page.evaluate(
-        (wf) =>
-          window.app!.loadGraphData(wf as ComfyWorkflowJSON, true, true, null, {
-            openSource: 'template'
-          }),
-        workflow
-      )
-      await comfyPage.nextFrame()
-
-      // Wait for slot elements to appear in DOM
-      await comfyPage.page.locator('[data-slot-key]').first().waitFor()
-
-      const result: NodeSlotData[] = await comfyPage.page.evaluate(() => {
-        const nodes = window.app!.graph._nodes
-        const slotData: NodeSlotData[] = []
-
-        for (const node of nodes) {
-          const nodeId = String(node.id)
-          const nodeEl = document.querySelector(
-            `[data-node-id="${nodeId}"]`
-          ) as HTMLElement | null
-          if (!nodeEl) continue
-
-          const slotEls = nodeEl.querySelectorAll('[data-slot-key]')
-          if (slotEls.length === 0) continue
-
-          const slots: SlotMeasurement[] = []
-
-          const nodeRect = nodeEl.getBoundingClientRect()
-          for (const slotEl of slotEls) {
-            const slotRect = slotEl.getBoundingClientRect()
-            const slotKey = (slotEl as HTMLElement).dataset.slotKey ?? 'unknown'
-            slots.push({
-              key: slotKey,
-              offsetX: slotRect.left + slotRect.width / 2 - nodeRect.left,
-              offsetY: slotRect.top + slotRect.height / 2 - nodeRect.top
-            })
-          }
-
-          slotData.push({
-            nodeId,
-            isSubgraph: !!node.isSubgraphNode?.(),
-            nodeW: nodeRect.width,
-            nodeH: nodeRect.height,
-            slots
-          })
-        }
-
-        return slotData
-      })
-
-      const subgraphNodes = result.filter((n) => n.isSubgraph)
-      expect(subgraphNodes.length).toBeGreaterThan(0)
-
-      for (const node of subgraphNodes) {
-        for (const slot of node.slots) {
-          expect(
-            slot.offsetX,
-            `Slot ${slot.key} on node ${node.nodeId}: X offset ${slot.offsetX} outside node width ${node.nodeW}`
-          ).toBeGreaterThanOrEqual(-SLOT_BOUNDS_MARGIN)
-          expect(
-            slot.offsetX,
-            `Slot ${slot.key} on node ${node.nodeId}: X offset ${slot.offsetX} outside node width ${node.nodeW}`
-          ).toBeLessThanOrEqual(node.nodeW + SLOT_BOUNDS_MARGIN)
-
-          expect(
-            slot.offsetY,
-            `Slot ${slot.key} on node ${node.nodeId}: Y offset ${slot.offsetY} outside node height ${node.nodeH}`
-          ).toBeGreaterThanOrEqual(-SLOT_BOUNDS_MARGIN)
-          expect(
-            slot.offsetY,
-            `Slot ${slot.key} on node ${node.nodeId}: Y offset ${slot.offsetY} outside node height ${node.nodeH}`
-          ).toBeLessThanOrEqual(node.nodeH + SLOT_BOUNDS_MARGIN)
-        }
-      }
-    })
-  }
-)
diff --git a/browser_tests/tests/subgraphViewport.spec.ts b/browser_tests/tests/subgraphViewport.spec.ts
deleted file mode 100644
index 9056d2c54f..0000000000
--- a/browser_tests/tests/subgraphViewport.spec.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-function hasVisibleNodeInViewport() {
-  const canvas = window.app!.canvas
-  if (!canvas?.graph?._nodes?.length) return false
-
-  const ds = canvas.ds
-  const cw = canvas.canvas.width / window.devicePixelRatio
-  const ch = canvas.canvas.height / window.devicePixelRatio
-  const visLeft = -ds.offset[0]
-  const visTop = -ds.offset[1]
-  const visRight = visLeft + cw / ds.scale
-  const visBottom = visTop + ch / ds.scale
-
-  for (const node of canvas.graph._nodes) {
-    const [nx, ny] = node.pos
-    const [nw, nh] = node.size
-    if (
-      nx + nw > visLeft &&
-      nx < visRight &&
-      ny + nh > visTop &&
-      ny < visBottom
-    )
-      return true
-  }
-  return false
-}
-
-test.describe('Subgraph viewport restoration', { tag: '@subgraph' }, () => {
-  test('first visit fits viewport to subgraph nodes (LG)', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow(
-      'subgraphs/subgraph-with-promoted-text-widget'
-    )
-    await comfyPage.nextFrame()
-
-    await comfyPage.page.evaluate(() => {
-      const canvas = window.app!.canvas
-      const graph = canvas.graph!
-      const sgNode = graph._nodes.find((n) =>
-        'isSubgraphNode' in n
-          ? (n as unknown as { isSubgraphNode: () => boolean }).isSubgraphNode()
-          : false
-      ) as unknown as { subgraph?: typeof graph } | undefined
-      if (!sgNode?.subgraph) throw new Error('No subgraph node')
-
-      canvas.setGraph(sgNode.subgraph)
-    })
-
-    await expect
-      .poll(() => comfyPage.page.evaluate(hasVisibleNodeInViewport), {
-        timeout: 2000
-      })
-      .toBe(true)
-  })
-
-  test('first visit fits viewport to subgraph nodes (Vue)', async ({
-    comfyPage
-  }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.workflow.loadWorkflow(
-      'subgraphs/subgraph-with-promoted-text-widget'
-    )
-    await comfyPage.vueNodes.waitForNodes()
-
-    await comfyPage.vueNodes.enterSubgraph('11')
-
-    await expect
-      .poll(() => comfyPage.page.evaluate(hasVisibleNodeInViewport), {
-        timeout: 2000
-      })
-      .toBe(true)
-  })
-
-  test('viewport is restored when returning to root (Vue)', async ({
-    comfyPage
-  }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.workflow.loadWorkflow(
-      'subgraphs/subgraph-with-promoted-text-widget'
-    )
-    await comfyPage.vueNodes.waitForNodes()
-
-    const rootViewport = await comfyPage.page.evaluate(() => {
-      const ds = window.app!.canvas.ds
-      return { scale: ds.scale, offset: [...ds.offset] }
-    })
-
-    await comfyPage.vueNodes.enterSubgraph('11')
-    await comfyPage.nextFrame()
-
-    await comfyPage.subgraph.exitViaBreadcrumb()
-
-    await expect
-      .poll(
-        () =>
-          comfyPage.page.evaluate(() => {
-            const ds = window.app!.canvas.ds
-            return { scale: ds.scale, offset: [...ds.offset] }
-          }),
-        { timeout: 2000 }
-      )
-      .toEqual({
-        scale: expect.closeTo(rootViewport.scale, 2),
-        offset: [
-          expect.closeTo(rootViewport.offset[0], 0),
-          expect.closeTo(rootViewport.offset[1], 0)
-        ]
-      })
-  })
-})
diff --git a/browser_tests/tests/templateFitView.spec.ts b/browser_tests/tests/templateFitView.spec.ts
index 933c032285..1f069786fe 100644
--- a/browser_tests/tests/templateFitView.spec.ts
+++ b/browser_tests/tests/templateFitView.spec.ts
@@ -2,7 +2,7 @@ import { expect } from '@playwright/test'
 
 import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 /**
  * Tests that templates are automatically fitted to view when loaded.
diff --git a/browser_tests/tests/templates.spec.ts b/browser_tests/tests/templates.spec.ts
index 516f368a5f..ce43d51c53 100644
--- a/browser_tests/tests/templates.spec.ts
+++ b/browser_tests/tests/templates.spec.ts
@@ -1,7 +1,9 @@
 import type { Page } from '@playwright/test'
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import type { WorkflowTemplates } from '@/platform/workflow/templates/types/template'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
 
 async function checkTemplateFileExists(
   page: Page,
@@ -14,10 +16,6 @@ async function checkTemplateFileExists(
 }
 
 test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-  })
-
   test('should have a JSON workflow file for each template', async ({
     comfyPage
   }) => {
@@ -32,8 +30,13 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
     }
   })
 
-  // TODO: Re-enable this test once issue resolved
+  // Flaky: /templates is proxied to an external server, so thumbnail
+  // availability varies across CI runs.
+  // FIX: Make hermetic — fixture index.json and thumbnail responses via
+  // page.route(), and change checkTemplateFileExists to use browser-context
+  // fetch (page.request.head bypasses Playwright routing).
   // https://github.com/Comfy-Org/ComfyUI_frontend/issues/3992
+  // oxlint-disable-next-line playwright/no-skipped-test -- https://github.com/Comfy-Org/ComfyUI_frontend/issues/3992
   test.skip('should have all required thumbnail media for each template', async ({
     comfyPage
   }) => {
@@ -72,9 +75,7 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
     // Clear the workflow
     await comfyPage.menu.workflowsTab.open()
     await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
-    await expect(async () => {
-      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
-    }).toPass({ timeout: 250 })
+    await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
 
     // Load a template
     await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
@@ -87,9 +88,9 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
     await expect(comfyPage.templates.content).toBeHidden()
 
     // Ensure we now have some nodes
-    await expect(async () => {
-      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBeGreaterThan(0)
-    }).toPass({ timeout: 250 })
+    await expect
+      .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+      .toBeGreaterThan(0)
   })
 
   test('dialog should be automatically shown to first-time users', async ({
@@ -102,7 +103,7 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
     await comfyPage.setup({ clearStorage: true })
 
     // Expect the templates dialog to be shown
-    expect(await comfyPage.templates.content.isVisible()).toBe(true)
+    await expect(comfyPage.templates.content).toBeVisible()
   })
 
   test('Uses proper locale files for templates', async ({ comfyPage }) => {
@@ -110,9 +111,7 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
 
     await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
 
-    const dialog = comfyPage.page.getByRole('dialog').filter({
-      has: comfyPage.page.getByRole('heading', { name: 'Modèles', exact: true })
-    })
+    const dialog = comfyPage.templatesDialog.filterByHeading('Modèles')
     await expect(dialog).toBeVisible()
 
     // Validate that French-localized strings from the templates index are rendered
@@ -183,8 +182,8 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
     await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
     await comfyPage.templates.content.waitFor({ state: 'visible' })
 
-    const templateGrid = comfyPage.page.locator(
-      '[data-testid="template-workflows-content"]'
+    const templateGrid = comfyPage.page.getByTestId(
+      'template-workflows-content'
     )
     const nav = comfyPage.page.locator('header', { hasText: 'Templates' })
 
@@ -214,8 +213,7 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
       await expect(comfyPage.templates.content).toBeVisible()
 
       // Wait for filter bar select components to render
-      const dialog = comfyPage.page.getByRole('dialog')
-      const sortBySelect = dialog.getByRole('combobox', { name: /Sort/ })
+      const sortBySelect = comfyPage.templatesDialog.getCombobox(/Sort/)
       await expect(sortBySelect).toBeVisible()
 
       // Screenshot the filter bar containing MultiSelect and SingleSelect
@@ -239,7 +237,7 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
       await comfyPage.page.route(
         '**/templates/index.json',
         async (route, _) => {
-          const response = [
+          const response: WorkflowTemplates[] = [
             {
               moduleName: 'default',
               title: 'Test Templates',
@@ -301,20 +299,18 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
 
       // Wait for cards to load
       await expect(
-        comfyPage.page.locator(
-          '[data-testid="template-workflow-short-description"]'
-        )
-      ).toBeVisible({ timeout: 5000 })
+        comfyPage.page.getByTestId('template-workflow-short-description')
+      ).toBeVisible()
 
       // Verify all three cards with different descriptions are visible
-      const shortDescCard = comfyPage.page.locator(
-        '[data-testid="template-workflow-short-description"]'
+      const shortDescCard = comfyPage.page.getByTestId(
+        'template-workflow-short-description'
       )
-      const mediumDescCard = comfyPage.page.locator(
-        '[data-testid="template-workflow-medium-description"]'
+      const mediumDescCard = comfyPage.page.getByTestId(
+        'template-workflow-medium-description'
       )
-      const longDescCard = comfyPage.page.locator(
-        '[data-testid="template-workflow-long-description"]'
+      const longDescCard = comfyPage.page.getByTestId(
+        'template-workflow-long-description'
       )
 
       await expect(shortDescCard).toBeVisible()
@@ -332,8 +328,8 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
       await expect(longDesc).toContainText('much longer description')
 
       // Verify grid layout maintains consistency
-      const templateGrid = comfyPage.page.locator(
-        '[data-testid="template-workflows-content"]'
+      const templateGrid = comfyPage.page.getByTestId(
+        'template-workflows-content'
       )
       await expect(templateGrid).toBeVisible()
       await expect(templateGrid).toHaveScreenshot(
@@ -341,4 +337,71 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
       )
     }
   )
+
+  test(
+    'template cards display overlay tags correctly',
+    { tag: '@screenshot' },
+    async ({ comfyPage }) => {
+      await comfyPage.page.route('**/templates/index.json', async (route) => {
+        const response = [
+          {
+            moduleName: 'default',
+            title: 'Test Templates',
+            type: 'image',
+            templates: [
+              {
+                name: 'tagged-template',
+                title: 'Tagged Template',
+                mediaType: 'image',
+                mediaSubtype: 'webp',
+                description: 'A template with tags.',
+                tags: ['Relight', 'Image Edit']
+              },
+              {
+                name: 'no-tags',
+                title: 'No Tags',
+                mediaType: 'image',
+                mediaSubtype: 'webp',
+                description: 'A template without tags.'
+              }
+            ]
+          }
+        ]
+        await route.fulfill({
+          status: 200,
+          body: JSON.stringify(response),
+          headers: {
+            'Content-Type': 'application/json',
+            'Cache-Control': 'no-store'
+          }
+        })
+      })
+
+      await comfyPage.page.route('**/templates/**.webp', async (route) => {
+        await route.fulfill({
+          status: 200,
+          path: 'browser_tests/assets/example.webp',
+          headers: {
+            'Content-Type': 'image/webp',
+            'Cache-Control': 'no-store'
+          }
+        })
+      })
+
+      await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
+      await expect(comfyPage.templates.content).toBeVisible()
+
+      const taggedCard = comfyPage.page.getByTestId(
+        TestIds.templates.workflowCard('tagged-template')
+      )
+      await expect(taggedCard).toBeVisible()
+      await expect(taggedCard.getByText('Relight')).toBeVisible()
+      await expect(taggedCard.getByText('Image Edit')).toBeVisible()
+
+      const templateGrid = comfyPage.page.getByTestId(TestIds.templates.content)
+      await expect(templateGrid).toHaveScreenshot(
+        'template-cards-with-overlay-tags.png'
+      )
+    }
+  )
 })
diff --git a/browser_tests/tests/templates.spec.ts-snapshots/template-cards-with-overlay-tags-chromium-linux.png b/browser_tests/tests/templates.spec.ts-snapshots/template-cards-with-overlay-tags-chromium-linux.png
new file mode 100644
index 0000000000..77f8dcfac1
Binary files /dev/null and b/browser_tests/tests/templates.spec.ts-snapshots/template-cards-with-overlay-tags-chromium-linux.png differ
diff --git a/browser_tests/tests/toastNotifications.spec.ts b/browser_tests/tests/toastNotifications.spec.ts
index 9561ce6ae8..c60a97d440 100644
--- a/browser_tests/tests/toastNotifications.spec.ts
+++ b/browser_tests/tests/toastNotifications.spec.ts
@@ -1,14 +1,9 @@
 import {
   comfyPageFixture as test,
   comfyExpect as expect
-} from '../fixtures/ComfyPage'
+} from '@e2e/fixtures/ComfyPage'
 
 test.describe('Toast Notifications', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.setup()
-  })
-
   async function triggerErrorToast(comfyPage: {
     page: { evaluate: (fn: () => void) => Promise<void> }
     nextFrame: () => Promise<void>
@@ -57,7 +52,7 @@ test.describe('Toast Notifications', { tag: '@ui' }, () => {
 
     await comfyPage.toast.closeToasts()
 
-    expect(await comfyPage.toast.getVisibleToastCount()).toBe(0)
+    await expect(comfyPage.toast.visibleToasts).toHaveCount(0)
   })
 
   test('Toast error count is accurate', async ({ comfyPage }) => {
@@ -67,7 +62,6 @@ test.describe('Toast Notifications', { tag: '@ui' }, () => {
       comfyPage.page.locator('.p-toast-message.p-toast-message-error').first()
     ).toBeVisible()
 
-    const errorCount = await comfyPage.toast.getToastErrorCount()
-    expect(errorCount).toBeGreaterThanOrEqual(1)
+    await expect(comfyPage.toast.toastErrors).not.toHaveCount(0)
   })
 })
diff --git a/browser_tests/tests/topbar/workflowTabs.spec.ts b/browser_tests/tests/topbar/workflowTabs.spec.ts
new file mode 100644
index 0000000000..264a94dad3
--- /dev/null
+++ b/browser_tests/tests/topbar/workflowTabs.spec.ts
@@ -0,0 +1,149 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+
+test.describe('Workflow tabs', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting(
+      'Comfy.Workflow.WorkflowTabsPosition',
+      'Topbar'
+    )
+    await comfyPage.setup()
+  })
+
+  test('Default workflow tab is visible on load', async ({ comfyPage }) => {
+    await expect
+      .poll(() => comfyPage.menu.topbar.getTabNames())
+      .toEqual([expect.stringContaining('Unsaved Workflow')])
+  })
+
+  test('Creating a new workflow adds a tab', async ({ comfyPage }) => {
+    const topbar = comfyPage.menu.topbar
+
+    await expect.poll(() => topbar.getTabNames()).toHaveLength(1)
+
+    await topbar.newWorkflowButton.click()
+    await expect
+      .poll(() => topbar.getTabNames())
+      .toEqual(
+        expect.arrayContaining([
+          expect.stringContaining('Unsaved Workflow (2)')
+        ])
+      )
+  })
+
+  test('Switching tabs changes active workflow', async ({ comfyPage }) => {
+    const topbar = comfyPage.menu.topbar
+
+    await topbar.newWorkflowButton.click()
+    await expect.poll(() => topbar.getTabNames()).toHaveLength(2)
+
+    await expect(topbar.getActiveTab()).toContainText('Unsaved Workflow (2)')
+
+    await topbar.getTab(0).click()
+    await expect(topbar.getActiveTab()).toContainText('Unsaved Workflow')
+    await expect(topbar.getActiveTab()).not.toContainText('(2)')
+  })
+
+  test('Closing a tab removes it', async ({ comfyPage }) => {
+    const topbar = comfyPage.menu.topbar
+
+    await topbar.newWorkflowButton.click()
+    await expect.poll(() => topbar.getTabNames()).toHaveLength(2)
+
+    await topbar.closeWorkflowTab('Unsaved Workflow (2)')
+    await expect
+      .poll(() => topbar.getTabNames())
+      .toEqual([expect.stringContaining('Unsaved Workflow')])
+  })
+
+  test('Right-clicking a tab shows context menu', async ({ comfyPage }) => {
+    const topbar = comfyPage.menu.topbar
+
+    await topbar.getTab(0).click({ button: 'right' })
+
+    // Reka UI ContextMenuContent gets data-state="open" when active
+    const contextMenu = comfyPage.page
+      .getByRole('menu')
+      .and(comfyPage.page.locator('[data-state="open"]'))
+    await expect(contextMenu).toBeVisible()
+
+    await expect(
+      contextMenu.getByRole('menuitem', { name: /Close Tab/i }).first()
+    ).toBeVisible()
+    await expect(
+      contextMenu.getByRole('menuitem', { name: /Save/i }).first()
+    ).toBeVisible()
+  })
+
+  test('Context menu Close Tab action removes the tab', async ({
+    comfyPage
+  }) => {
+    const topbar = comfyPage.menu.topbar
+
+    await topbar.newWorkflowButton.click()
+    await expect.poll(() => topbar.getTabNames()).toHaveLength(2)
+
+    await topbar.getTab(1).click({ button: 'right' })
+    const contextMenu = comfyPage.page
+      .getByRole('menu')
+      .and(comfyPage.page.locator('[data-state="open"]'))
+    await expect(contextMenu).toBeVisible()
+
+    await contextMenu
+      .getByRole('menuitem', { name: /Close Tab/i })
+      .first()
+      .click()
+    await expect.poll(() => topbar.getTabNames()).toHaveLength(1)
+  })
+
+  test('Closing the last tab creates a new default workflow', async ({
+    comfyPage
+  }) => {
+    const topbar = comfyPage.menu.topbar
+
+    await expect.poll(() => topbar.getTabNames()).toHaveLength(1)
+
+    await topbar.closeWorkflowTab('Unsaved Workflow')
+    await expect
+      .poll(() => topbar.getTabNames())
+      .toEqual([expect.stringContaining('Unsaved Workflow')])
+  })
+
+  test('Modified workflow shows unsaved indicator', async ({ comfyPage }) => {
+    const topbar = comfyPage.menu.topbar
+
+    // Modify the graph via litegraph API to trigger unsaved state
+    await comfyPage.page.evaluate(() => {
+      const graph = window.app?.graph
+      const node = window.LiteGraph?.createNode('Note')
+      if (graph && node) graph.add(node)
+    })
+
+    // WorkflowTab renders "•" when the workflow has unsaved changes
+    const activeTab = topbar.getActiveTab()
+    await expect(activeTab.locator('text=•')).toBeVisible()
+  })
+
+  test('Multiple tabs can be created, switched, and closed', async ({
+    comfyPage
+  }) => {
+    const topbar = comfyPage.menu.topbar
+
+    // Create 2 additional tabs (3 total)
+    await topbar.newWorkflowButton.click()
+    await expect.poll(() => topbar.getTabNames()).toHaveLength(2)
+    await topbar.newWorkflowButton.click()
+    await expect.poll(() => topbar.getTabNames()).toHaveLength(3)
+
+    // Switch to first tab
+    await topbar.getTab(0).click()
+    await expect
+      .poll(() => topbar.getActiveTabName())
+      .toContain('Unsaved Workflow')
+
+    // Close the middle tab
+    await topbar.closeWorkflowTab('Unsaved Workflow (2)')
+    await expect.poll(() => topbar.getTabNames()).toHaveLength(2)
+  })
+})
diff --git a/browser_tests/tests/useSettingSearch.spec.ts b/browser_tests/tests/useSettingSearch.spec.ts
index d71807025f..b9f150294e 100644
--- a/browser_tests/tests/useSettingSearch.spec.ts
+++ b/browser_tests/tests/useSettingSearch.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test'
 
-import type { Settings } from '../../src/schemas/apiSchema'
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import type { Settings } from '@/schemas/apiSchema'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 /**
  * Type helper for test settings with arbitrary IDs.
@@ -81,7 +81,7 @@ test.describe('Settings Search functionality', { tag: '@settings' }, () => {
     const dialog = comfyPage.settingDialog
     await dialog.open()
 
-    expect(await dialog.categories.count()).toBeGreaterThan(0)
+    await expect.poll(() => dialog.categories.count()).toBeGreaterThan(0)
   })
 
   test('can select different categories in sidebar', async ({ comfyPage }) => {
@@ -112,7 +112,7 @@ test.describe('Settings Search functionality', { tag: '@settings' }, () => {
     await dialog.open()
 
     await comfyPage.page.keyboard.press('Escape')
-    await expect(dialog.root).not.toBeVisible()
+    await expect(dialog.root).toBeHidden()
   })
 
   test('search box has proper debouncing behavior', async ({ comfyPage }) => {
diff --git a/browser_tests/tests/userSelectView.spec.ts b/browser_tests/tests/userSelectView.spec.ts
index 45eccb0c19..e72d42a90b 100644
--- a/browser_tests/tests/userSelectView.spec.ts
+++ b/browser_tests/tests/userSelectView.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test'
 
-import { userSelectPageFixture as test } from '../fixtures/UserSelectPage'
+import { userSelectPageFixture as test } from '@e2e/fixtures/UserSelectPage'
 
 /**
  * Expects ComfyUI backend to be launched with `--multi-user` flag.
diff --git a/browser_tests/tests/versionMismatchWarnings.spec.ts b/browser_tests/tests/versionMismatchWarnings.spec.ts
index 6c0a89034a..b24f798c86 100644
--- a/browser_tests/tests/versionMismatchWarnings.spec.ts
+++ b/browser_tests/tests/versionMismatchWarnings.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test'
 
-import type { SystemStats } from '../../src/schemas/apiSchema'
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import type { SystemStats } from '@/schemas/apiSchema'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.describe('Version Mismatch Warnings', { tag: '@slow' }, () => {
   const ALWAYS_AHEAD_OF_INSTALLED_VERSION = '100.100.100'
@@ -37,7 +37,6 @@ test.describe('Version Mismatch Warnings', { tag: '@slow' }, () => {
   }
 
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting(
       'Comfy.VersionCompatibility.DisableWarnings',
       false
@@ -83,7 +82,7 @@ test.describe('Version Mismatch Warnings', { tag: '@slow' }, () => {
     // Expect no warning toast to be shown
     await expect(
       comfyPage.page.getByText('Version Compatibility Warning')
-    ).not.toBeVisible()
+    ).toBeHidden()
   })
 
   test('should persist dismissed state across sessions', async ({
@@ -121,6 +120,6 @@ test.describe('Version Mismatch Warnings', { tag: '@slow' }, () => {
     // The same warning from same versions should not be shown to the user again
     await expect(
       comfyPage.page.getByText('Version Compatibility Warning')
-    ).not.toBeVisible()
+    ).toBeHidden()
   })
 })
diff --git a/browser_tests/tests/viewport.spec.ts b/browser_tests/tests/viewport.spec.ts
index b7320ee0ec..f800047f4b 100644
--- a/browser_tests/tests/viewport.spec.ts
+++ b/browser_tests/tests/viewport.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.describe('Viewport', { tag: ['@screenshot', '@smoke', '@canvas'] }, () => {
   test('Fits view to nodes when saved viewport position is offscreen', async ({
@@ -10,12 +10,32 @@ test.describe('Viewport', { tag: ['@screenshot', '@smoke', '@canvas'] }, () => {
       'viewport/default-viewport-saved-offscreen'
     )
 
-    // Wait a few frames for rendering to stabilize
-    for (let i = 0; i < 5; i++) {
-      await comfyPage.nextFrame()
-    }
-
-    await expect(comfyPage.canvas).toHaveScreenshot(
+    // Wait until all nodes are within the visible canvas area
+    await expect
+      .poll(
+        () =>
+          comfyPage.page.evaluate(() => {
+            const app = window.app!
+            const canvas = app.canvas
+            canvas.ds.computeVisibleArea(canvas.viewport)
+            const [vx, vy, vw, vh] = canvas.ds.visible_area
+            const nodes = app.graph.nodes
+            return (
+              nodes.length > 0 &&
+              nodes.every(
+                (n: { pos: number[]; size: number[] }) =>
+                  n.pos[0] + n.size[0] > vx &&
+                  n.pos[0] < vx + vw &&
+                  n.pos[1] + n.size[1] > vy &&
+                  n.pos[1] < vy + vh
+              )
+            )
+          }),
+        { message: 'All nodes should be within the visible viewport' }
+      )
+      .toBe(true)
+    await comfyPage.expectScreenshot(
+      comfyPage.canvas,
       'viewport-fits-when-saved-offscreen.png'
     )
   })
diff --git a/browser_tests/tests/vueNodes/groups/groups.spec.ts b/browser_tests/tests/vueNodes/groups/groups.spec.ts
index 5b02969e8d..5d55b0b79d 100644
--- a/browser_tests/tests/vueNodes/groups/groups.spec.ts
+++ b/browser_tests/tests/vueNodes/groups/groups.spec.ts
@@ -1,8 +1,8 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../../../fixtures/ComfyPage'
-import type { ComfyPage } from '../../../fixtures/ComfyPage'
+} from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 
 const CREATE_GROUP_HOTKEY = 'Control+g'
 
@@ -112,29 +112,25 @@ async function getNodeGroupCenteringErrors(
   })
 }
 
-test.describe('Vue Node Groups', { tag: '@screenshot' }, () => {
+test.describe('Vue Node Groups', { tag: ['@screenshot', '@vue-nodes'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
     await comfyPage.settings.setSetting('Comfy.Minimap.ShowGroups', true)
-    await comfyPage.vueNodes.waitForNodes()
   })
 
   test('should allow creating groups with hotkey', async ({ comfyPage }) => {
     await comfyPage.page.getByText('Load Checkpoint').click()
     await comfyPage.page.getByText('KSampler').click({ modifiers: ['Control'] })
     await comfyPage.page.keyboard.press(CREATE_GROUP_HOTKEY)
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot(
+    await comfyPage.expectScreenshot(
+      comfyPage.canvas,
       'vue-groups-create-group.png'
     )
   })
 
   test('should allow fitting group to contents', async ({ comfyPage }) => {
-    await comfyPage.setup()
     await comfyPage.workflow.loadWorkflow('groups/oversized_group')
     await comfyPage.keyboard.selectAll()
     await comfyPage.command.executeCommand('Comfy.Graph.FitGroupToContents')
-    await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot(
       'vue-groups-fit-to-contents.png'
     )
@@ -188,14 +184,16 @@ test.describe('Vue Node Groups', { tag: '@screenshot' }, () => {
     await comfyPage.workflow.loadWorkflow('groups/nested-groups-1-inner-node')
     await comfyPage.vueNodes.waitForNodes(1)
 
-    const workflowRendererVersion = await comfyPage.page.evaluate(() => {
-      const extra = window.app!.graph.extra as
-        | { workflowRendererVersion?: string }
-        | undefined
-      return extra?.workflowRendererVersion
-    })
-
-    expect(workflowRendererVersion).toMatch(/^Vue/)
+    await expect
+      .poll(() =>
+        comfyPage.page.evaluate(() => {
+          const extra = window.app!.graph.extra as
+            | { workflowRendererVersion?: string }
+            | undefined
+          return extra?.workflowRendererVersion
+        })
+      )
+      .toMatch(/^Vue/)
 
     await expect(async () => {
       const centeringErrors = await getNodeGroupCenteringErrors(comfyPage)
diff --git a/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts b/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts
index c7f5ce92c0..1d82d36703 100644
--- a/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts
@@ -1,14 +1,9 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../../../../fixtures/ComfyPage'
-
-test.describe('Vue Nodes Canvas Pan', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.vueNodes.waitForNodes()
-  })
+} from '@e2e/fixtures/ComfyPage'
 
+test.describe('Vue Nodes Canvas Pan', { tag: '@vue-nodes' }, () => {
   test(
     '@mobile Can pan with touch',
     { tag: '@screenshot' },
diff --git a/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts b/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts
index e391c289d4..880e460f14 100644
--- a/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts
@@ -1,13 +1,11 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../../../../fixtures/ComfyPage'
+} from '@e2e/fixtures/ComfyPage'
 
-test.describe('Vue Nodes Zoom', () => {
+test.describe('Vue Nodes Zoom', { tag: '@vue-nodes' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
     await comfyPage.settings.setSetting('LiteGraph.Canvas.MinFontSizeForLOD', 8)
-    await comfyPage.vueNodes.waitForNodes()
   })
 
   test(
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
index 1819edde34..535a8d270a 100644
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
@@ -1,13 +1,13 @@
 import type { Locator, Page } from '@playwright/test'
 
-import type { NodeId } from '../../../../../src/platform/workflow/validation/schemas/workflowSchema'
-import { getSlotKey } from '../../../../../src/renderer/core/layout/slots/slotIdentifier'
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
+import { getSlotKey } from '@/renderer/core/layout/slots/slotIdentifier'
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../../../../fixtures/ComfyPage'
-import { getMiddlePoint } from '../../../../fixtures/utils/litegraphUtils'
-import { fitToViewInstant } from '../../../../helpers/fitToView'
+} from '@e2e/fixtures/ComfyPage'
+import { getMiddlePoint } from '@e2e/fixtures/utils/litegraphUtils'
+import { fitToViewInstant } from '@e2e/helpers/fitToView'
 
 async function getCenter(locator: Locator): Promise<{ x: number; y: number }> {
   const box = await locator.boundingBox()
@@ -94,1017 +94,1042 @@ async function connectSlots(
   const fromLoc = slotLocator(page, from.nodeId, from.index, false)
   const toLoc = slotLocator(page, to.nodeId, to.index, true)
   await expectVisibleAll(fromLoc, toLoc)
+  // oxlint-disable-next-line playwright/no-force-option -- Slot dot's parent wrapper div intercepts actionability check on inner dot
   await fromLoc.dragTo(toLoc, { force: true })
   await nextFrame()
 }
 
-test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
-    // await comfyPage.setup()
-    await comfyPage.workflow.loadWorkflow('vueNodes/simple-triple')
-    await comfyPage.vueNodes.waitForNodes()
-    await fitToViewInstant(comfyPage)
-  })
-
-  test('should show a link dragging out from a slot when dragging on a slot', async ({
-    comfyPage,
-    comfyMouse
-  }) => {
-    const samplerNode = (
-      await comfyPage.nodeOps.getNodeRefsByType('KSampler')
-    )[0]
-    expect(samplerNode).toBeTruthy()
-
-    const slot = slotLocator(comfyPage.page, samplerNode.id, 0, false)
-    await expect(slot).toBeVisible()
-
-    const start = await getCenter(slot)
-
-    // Arbitrary value
-    const dragTarget = {
-      x: start.x + 180,
-      y: start.y - 140
-    }
-
-    await comfyMouse.move(start)
-    await comfyMouse.drag(dragTarget)
-    await comfyPage.nextFrame()
-
-    try {
-      await expect(comfyPage.canvas).toHaveScreenshot(
-        'vue-node-dragging-link.png'
-      )
-    } finally {
-      await comfyMouse.drop()
-    }
-  })
-
-  test('should create a link when dropping on a compatible slot', async ({
-    comfyPage
-  }) => {
-    const samplerNode = (
-      await comfyPage.nodeOps.getNodeRefsByType('KSampler')
-    )[0]
-    const vaeNode = (await comfyPage.nodeOps.getNodeRefsByType('VAEDecode'))[0]
-    expect(samplerNode && vaeNode).toBeTruthy()
-
-    const samplerOutput = await samplerNode.getOutput(0)
-    const vaeInput = await vaeNode.getInput(0)
-
-    await connectSlots(
-      comfyPage.page,
-      { nodeId: samplerNode.id, index: 0 },
-      { nodeId: vaeNode.id, index: 0 },
-      () => comfyPage.nextFrame()
-    )
-
-    expect(await samplerOutput.getLinkCount()).toBe(1)
-    expect(await vaeInput.getLinkCount()).toBe(1)
-
-    const linkDetails = await getInputLinkDetails(comfyPage.page, vaeNode.id, 0)
-    expect(linkDetails).not.toBeNull()
-    expect(linkDetails).toMatchObject({
-      originId: samplerNode.id,
-      originSlot: 0,
-      targetId: vaeNode.id,
-      targetSlot: 0
+test.describe(
+  'Vue Node Link Interaction',
+  { tag: ['@screenshot', '@vue-nodes'] },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+      await comfyPage.workflow.loadWorkflow('vueNodes/simple-triple')
+      await fitToViewInstant(comfyPage)
     })
-  })
 
-  test('should not create a link when slot types are incompatible', async ({
-    comfyPage
-  }) => {
-    const samplerNode = (
-      await comfyPage.nodeOps.getNodeRefsByType('KSampler')
-    )[0]
-    const clipNode = (
-      await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
-    )[0]
-    expect(samplerNode && clipNode).toBeTruthy()
+    test('should show a link dragging out from a slot when dragging on a slot', async ({
+      comfyPage,
+      comfyMouse
+    }) => {
+      const samplerNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+      )[0]
+      expect(samplerNode).toBeTruthy()
 
-    const samplerOutput = await samplerNode.getOutput(0)
-    const clipInput = await clipNode.getInput(0)
+      const slot = slotLocator(comfyPage.page, samplerNode.id, 0, false)
+      await expect(slot).toBeVisible()
 
-    const outputSlot = slotLocator(comfyPage.page, samplerNode.id, 0, false)
-    const inputSlot = slotLocator(comfyPage.page, clipNode.id, 0, true)
-    await expectVisibleAll(outputSlot, inputSlot)
+      const start = await getCenter(slot)
 
-    await outputSlot.dragTo(inputSlot, { force: true })
-    await comfyPage.nextFrame()
+      // Arbitrary value
+      const dragTarget = {
+        x: start.x + 180,
+        y: start.y - 140
+      }
 
-    expect(await samplerOutput.getLinkCount()).toBe(0)
-    expect(await clipInput.getLinkCount()).toBe(0)
-
-    const graphLinkDetails = await getInputLinkDetails(
-      comfyPage.page,
-      clipNode.id,
-      0
-    )
-    expect(graphLinkDetails).toBeNull()
-  })
-
-  test('should not create a link when dropping onto a slot on the same node', async ({
-    comfyPage
-  }) => {
-    const samplerNode = (
-      await comfyPage.nodeOps.getNodeRefsByType('KSampler')
-    )[0]
-    expect(samplerNode).toBeTruthy()
-
-    const samplerOutput = await samplerNode.getOutput(0)
-    const samplerInput = await samplerNode.getInput(3)
-
-    const outputSlot = slotLocator(comfyPage.page, samplerNode.id, 0, false)
-    const inputSlot = slotLocator(comfyPage.page, samplerNode.id, 3, true)
-    await expectVisibleAll(outputSlot, inputSlot)
-
-    await outputSlot.dragTo(inputSlot, { force: true })
-    await comfyPage.nextFrame()
-
-    expect(await samplerOutput.getLinkCount()).toBe(0)
-    expect(await samplerInput.getLinkCount()).toBe(0)
-  })
-
-  test('should reuse the existing origin when dragging an input link', async ({
-    comfyPage,
-    comfyMouse
-  }) => {
-    const samplerNode = (
-      await comfyPage.nodeOps.getNodeRefsByType('KSampler')
-    )[0]
-    const vaeNode = (await comfyPage.nodeOps.getNodeRefsByType('VAEDecode'))[0]
-    expect(samplerNode && vaeNode).toBeTruthy()
-    const samplerOutputCenter = await getSlotCenter(
-      comfyPage.page,
-      samplerNode.id,
-      0,
-      false
-    )
-    const vaeInputCenter = await getSlotCenter(
-      comfyPage.page,
-      vaeNode.id,
-      0,
-      true
-    )
-
-    await comfyMouse.move(samplerOutputCenter)
-    await comfyMouse.drag(vaeInputCenter)
-    await comfyMouse.drop()
-
-    const dragTarget = {
-      x: vaeInputCenter.x + 160,
-      y: vaeInputCenter.y - 100
-    }
-
-    await comfyMouse.move(vaeInputCenter)
-    await comfyMouse.drag(dragTarget)
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'vue-node-input-drag-reuses-origin.png'
-    )
-    await comfyMouse.drop()
-  })
-
-  test('ctrl+alt drag from an input starts a fresh link', async ({
-    comfyPage,
-    comfyMouse
-  }) => {
-    const samplerNode = (
-      await comfyPage.nodeOps.getNodeRefsByType('KSampler')
-    )[0]
-    const vaeNode = (await comfyPage.nodeOps.getNodeRefsByType('VAEDecode'))[0]
-    expect(samplerNode && vaeNode).toBeTruthy()
-
-    const samplerOutput = await samplerNode.getOutput(0)
-    const vaeInput = await vaeNode.getInput(0)
-
-    const samplerOutputCenter = await getSlotCenter(
-      comfyPage.page,
-      samplerNode.id,
-      0,
-      false
-    )
-    const vaeInputCenter = await getSlotCenter(
-      comfyPage.page,
-      vaeNode.id,
-      0,
-      true
-    )
-
-    await comfyMouse.move(samplerOutputCenter)
-    await comfyMouse.drag(vaeInputCenter)
-    await comfyMouse.drop()
-
-    await comfyPage.nextFrame()
-
-    const dragTarget = {
-      x: vaeInputCenter.x + 140,
-      y: vaeInputCenter.y - 110
-    }
-
-    await comfyMouse.move(vaeInputCenter)
-    await comfyPage.page.keyboard.down('Control')
-    await comfyPage.page.keyboard.down('Alt')
-
-    try {
+      await comfyMouse.move(start)
       await comfyMouse.drag(dragTarget)
-      await expect(comfyPage.canvas).toHaveScreenshot(
-        'vue-node-input-drag-ctrl-alt.png'
+      await comfyPage.nextFrame()
+
+      try {
+        await expect(comfyPage.canvas).toHaveScreenshot(
+          'vue-node-dragging-link.png'
+        )
+      } finally {
+        await comfyMouse.drop()
+      }
+    })
+
+    test('should create a link when dropping on a compatible slot', async ({
+      comfyPage
+    }) => {
+      const samplerNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+      )[0]
+      const vaeNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('VAEDecode')
+      )[0]
+      expect(samplerNode && vaeNode).toBeTruthy()
+
+      const samplerOutput = await samplerNode.getOutput(0)
+      const vaeInput = await vaeNode.getInput(0)
+
+      await connectSlots(
+        comfyPage.page,
+        { nodeId: samplerNode.id, index: 0 },
+        { nodeId: vaeNode.id, index: 0 },
+        () => comfyPage.nextFrame()
       )
-    } finally {
-      await comfyMouse.drop().catch(() => {})
-      await comfyPage.page.keyboard.up('Alt').catch(() => {})
-      await comfyPage.page.keyboard.up('Control').catch(() => {})
-    }
 
-    await comfyPage.nextFrame()
+      await expect.poll(() => samplerOutput.getLinkCount()).toBe(1)
+      await expect.poll(() => vaeInput.getLinkCount()).toBe(1)
 
-    // Tcehnically intended to disconnect existing as well
-    expect(await vaeInput.getLinkCount()).toBe(0)
-    expect(await samplerOutput.getLinkCount()).toBe(0)
-  })
+      await expect
+        .poll(() => getInputLinkDetails(comfyPage.page, vaeNode.id, 0))
+        .toMatchObject({
+          originId: samplerNode.id,
+          originSlot: 0,
+          targetId: vaeNode.id,
+          targetSlot: 0
+        })
+    })
 
-  test('dropping an input link back on its slot restores the original connection', async ({
-    comfyPage,
-    comfyMouse
-  }) => {
-    const samplerNode = (
-      await comfyPage.nodeOps.getNodeRefsByType('KSampler')
-    )[0]
-    const vaeNode = (await comfyPage.nodeOps.getNodeRefsByType('VAEDecode'))[0]
-    expect(samplerNode && vaeNode).toBeTruthy()
+    test('should not create a link when slot types are incompatible', async ({
+      comfyPage
+    }) => {
+      const samplerNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+      )[0]
+      const clipNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
+      )[0]
+      expect(samplerNode && clipNode).toBeTruthy()
 
-    const samplerOutput = await samplerNode.getOutput(0)
-    const vaeInput = await vaeNode.getInput(0)
+      const samplerOutput = await samplerNode.getOutput(0)
+      const clipInput = await clipNode.getInput(0)
 
-    const samplerOutputCenter = await getSlotCenter(
-      comfyPage.page,
-      samplerNode.id,
-      0,
-      false
-    )
-    const vaeInputCenter = await getSlotCenter(
-      comfyPage.page,
-      vaeNode.id,
-      0,
-      true
-    )
+      const outputSlot = slotLocator(comfyPage.page, samplerNode.id, 0, false)
+      const inputSlot = slotLocator(comfyPage.page, clipNode.id, 0, true)
+      await expectVisibleAll(outputSlot, inputSlot)
 
-    await comfyMouse.move(samplerOutputCenter)
-    try {
+      // oxlint-disable-next-line playwright/no-force-option -- Slot dot's parent wrapper div intercepts actionability check on inner dot
+      await outputSlot.dragTo(inputSlot, { force: true })
+      await comfyPage.nextFrame()
+
+      await expect.poll(() => samplerOutput.getLinkCount()).toBe(0)
+      await expect.poll(() => clipInput.getLinkCount()).toBe(0)
+
+      await expect
+        .poll(() => getInputLinkDetails(comfyPage.page, clipNode.id, 0))
+        .toBeNull()
+    })
+
+    test('should not create a link when dropping onto a slot on the same node', async ({
+      comfyPage
+    }) => {
+      const samplerNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+      )[0]
+      expect(samplerNode).toBeTruthy()
+
+      const samplerOutput = await samplerNode.getOutput(0)
+      const samplerInput = await samplerNode.getInput(3)
+
+      const outputSlot = slotLocator(comfyPage.page, samplerNode.id, 0, false)
+      const inputSlot = slotLocator(comfyPage.page, samplerNode.id, 3, true)
+      await expectVisibleAll(outputSlot, inputSlot)
+
+      // oxlint-disable-next-line playwright/no-force-option -- Slot dot's parent wrapper div intercepts actionability check on inner dot
+      await outputSlot.dragTo(inputSlot, { force: true })
+      await comfyPage.nextFrame()
+
+      await expect.poll(() => samplerOutput.getLinkCount()).toBe(0)
+      await expect.poll(() => samplerInput.getLinkCount()).toBe(0)
+    })
+
+    test('should reuse the existing origin when dragging an input link', async ({
+      comfyPage,
+      comfyMouse
+    }) => {
+      const samplerNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+      )[0]
+      const vaeNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('VAEDecode')
+      )[0]
+      expect(samplerNode && vaeNode).toBeTruthy()
+      const samplerOutputCenter = await getSlotCenter(
+        comfyPage.page,
+        samplerNode.id,
+        0,
+        false
+      )
+      const vaeInputCenter = await getSlotCenter(
+        comfyPage.page,
+        vaeNode.id,
+        0,
+        true
+      )
+
+      await comfyMouse.move(samplerOutputCenter)
       await comfyMouse.drag(vaeInputCenter)
-    } finally {
       await comfyMouse.drop()
-    }
 
-    await comfyPage.nextFrame()
+      const dragTarget = {
+        x: vaeInputCenter.x + 160,
+        y: vaeInputCenter.y - 100
+      }
 
-    const originalLink = await getInputLinkDetails(
-      comfyPage.page,
-      vaeNode.id,
-      0
-    )
-    expect(originalLink).not.toBeNull()
-
-    const dragTarget = {
-      x: vaeInputCenter.x + 150,
-      y: vaeInputCenter.y - 100
-    }
-
-    // To prevent needing a screenshot expectation for whether the link's off
-    const vaeInputLocator = slotLocator(comfyPage.page, vaeNode.id, 0, true)
-    const inputBox = await vaeInputLocator.boundingBox()
-    if (!inputBox) throw new Error('Input slot bounding box not available')
-    const isOutsideX =
-      dragTarget.x < inputBox.x || dragTarget.x > inputBox.x + inputBox.width
-    const isOutsideY =
-      dragTarget.y < inputBox.y || dragTarget.y > inputBox.y + inputBox.height
-    expect(isOutsideX || isOutsideY).toBe(true)
-
-    await comfyMouse.move(vaeInputCenter)
-    await comfyMouse.drag(dragTarget)
-    await comfyMouse.move(vaeInputCenter)
-    await comfyMouse.drop()
-
-    await comfyPage.nextFrame()
-
-    const restoredLink = await getInputLinkDetails(
-      comfyPage.page,
-      vaeNode.id,
-      0
-    )
-
-    expect(restoredLink).not.toBeNull()
-    if (!restoredLink || !originalLink) {
-      throw new Error('Expected both original and restored links to exist')
-    }
-    expect(restoredLink).toMatchObject({
-      originId: originalLink.originId,
-      originSlot: originalLink.originSlot,
-      targetId: originalLink.targetId,
-      targetSlot: originalLink.targetSlot,
-      parentId: originalLink.parentId
-    })
-    expect(await samplerOutput.getLinkCount()).toBe(1)
-    expect(await vaeInput.getLinkCount()).toBe(1)
-  })
-
-  test('rerouted input drag preview remains anchored to reroute', async ({
-    comfyPage,
-    comfyMouse
-  }) => {
-    const samplerNode = (
-      await comfyPage.nodeOps.getNodeRefsByType('KSampler')
-    )[0]
-    const vaeNode = (await comfyPage.nodeOps.getNodeRefsByType('VAEDecode'))[0]
-
-    const samplerOutput = await samplerNode.getOutput(0)
-    const vaeInput = await vaeNode.getInput(0)
-
-    await connectSlots(
-      comfyPage.page,
-      { nodeId: samplerNode.id, index: 0 },
-      { nodeId: vaeNode.id, index: 0 },
-      () => comfyPage.nextFrame()
-    )
-
-    const outputPosition = await samplerOutput.getPosition()
-    const inputPosition = await vaeInput.getPosition()
-    const reroutePoint = getMiddlePoint(outputPosition, inputPosition)
-
-    // Insert a reroute programmatically on the existing link between sampler output[0] and VAE input[0].
-    // This avoids relying on an exact path hit-test position.
-    await comfyPage.page.evaluate(
-      ([targetNodeId, targetSlot, clientPoint]) => {
-        const app = window.app
-        const graph = app?.canvas?.graph ?? app?.graph
-        if (!graph) throw new Error('Graph not available')
-        const node = graph.getNodeById(targetNodeId)
-        if (!node) throw new Error('Target node not found')
-        const input = node.inputs?.[targetSlot]
-        if (!input) throw new Error('Target input slot not found')
-
-        const linkId = input.link
-        if (linkId == null) throw new Error('Expected existing link on input')
-        const link = graph.getLink(linkId)
-        if (!link) throw new Error('Link not found')
-
-        // Convert the client/canvas pixel coordinates to graph space
-        const pos = app!.canvas.ds.convertCanvasToOffset([
-          clientPoint.x,
-          clientPoint.y
-        ])
-        graph.createReroute(pos, link)
-      },
-      [vaeNode.id, 0, reroutePoint] as const
-    )
-
-    await comfyPage.nextFrame()
-
-    const vaeInputCenter = await getSlotCenter(
-      comfyPage.page,
-      vaeNode.id,
-      0,
-      true
-    )
-    const dragTarget = {
-      x: vaeInputCenter.x + 160,
-      y: vaeInputCenter.y - 120
-    }
-
-    let dropped = false
-    try {
       await comfyMouse.move(vaeInputCenter)
       await comfyMouse.drag(dragTarget)
       await expect(comfyPage.canvas).toHaveScreenshot(
-        'vue-node-reroute-input-drag.png'
+        'vue-node-input-drag-reuses-origin.png'
       )
-      await comfyMouse.move(vaeInputCenter)
       await comfyMouse.drop()
-      dropped = true
-    } finally {
-      if (!dropped) {
+    })
+
+    test('ctrl+alt drag from an input starts a fresh link', async ({
+      comfyPage,
+      comfyMouse
+    }) => {
+      const samplerNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+      )[0]
+      const vaeNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('VAEDecode')
+      )[0]
+      expect(samplerNode && vaeNode).toBeTruthy()
+
+      const samplerOutput = await samplerNode.getOutput(0)
+      const vaeInput = await vaeNode.getInput(0)
+
+      const samplerOutputCenter = await getSlotCenter(
+        comfyPage.page,
+        samplerNode.id,
+        0,
+        false
+      )
+      const vaeInputCenter = await getSlotCenter(
+        comfyPage.page,
+        vaeNode.id,
+        0,
+        true
+      )
+
+      await comfyMouse.move(samplerOutputCenter)
+      await comfyMouse.drag(vaeInputCenter)
+      await comfyMouse.drop()
+
+      await comfyPage.nextFrame()
+
+      const dragTarget = {
+        x: vaeInputCenter.x + 140,
+        y: vaeInputCenter.y - 110
+      }
+
+      await comfyMouse.move(vaeInputCenter)
+      await comfyPage.page.keyboard.down('Control')
+      await comfyPage.page.keyboard.down('Alt')
+
+      try {
+        await comfyMouse.drag(dragTarget)
+        await expect(comfyPage.canvas).toHaveScreenshot(
+          'vue-node-input-drag-ctrl-alt.png'
+        )
+      } finally {
         await comfyMouse.drop().catch(() => {})
+        await comfyPage.page.keyboard.up('Alt').catch(() => {})
+        await comfyPage.page.keyboard.up('Control').catch(() => {})
       }
-    }
 
-    await comfyPage.nextFrame()
+      await comfyPage.nextFrame()
 
-    const linkDetails = await getInputLinkDetails(comfyPage.page, vaeNode.id, 0)
-    expect(linkDetails).not.toBeNull()
-    expect(linkDetails?.originId).toBe(samplerNode.id)
-    expect(linkDetails?.parentId).not.toBeNull()
-  })
+      // Technically intended to disconnect existing as well
+      await expect.poll(() => vaeInput.getLinkCount()).toBe(0)
+      await expect.poll(() => samplerOutput.getLinkCount()).toBe(0)
+    })
 
-  test('rerouted output shift-drag preview remains anchored to reroute', async ({
-    comfyPage,
-    comfyMouse
-  }) => {
-    const samplerNode = (
-      await comfyPage.nodeOps.getNodeRefsByType('KSampler')
-    )[0]
-    const vaeNode = (await comfyPage.nodeOps.getNodeRefsByType('VAEDecode'))[0]
-    expect(samplerNode && vaeNode).toBeTruthy()
+    test('dropping an input link back on its slot restores the original connection', async ({
+      comfyPage,
+      comfyMouse
+    }) => {
+      const samplerNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+      )[0]
+      const vaeNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('VAEDecode')
+      )[0]
+      expect(samplerNode && vaeNode).toBeTruthy()
 
-    const samplerOutput = await samplerNode.getOutput(0)
-    const vaeInput = await vaeNode.getInput(0)
+      const samplerOutput = await samplerNode.getOutput(0)
+      const vaeInput = await vaeNode.getInput(0)
 
-    await connectSlots(
-      comfyPage.page,
-      { nodeId: samplerNode.id, index: 0 },
-      { nodeId: vaeNode.id, index: 0 },
-      () => comfyPage.nextFrame()
-    )
-
-    const outputPosition = await samplerOutput.getPosition()
-    const inputPosition = await vaeInput.getPosition()
-    const reroutePoint = getMiddlePoint(outputPosition, inputPosition)
-
-    // Insert a reroute programmatically on the existing link between sampler output[0] and VAE input[0].
-    // This avoids relying on an exact path hit-test position.
-    await comfyPage.page.evaluate(
-      ([targetNodeId, targetSlot, clientPoint]) => {
-        const app = window.app
-        const graph = app?.canvas?.graph ?? app?.graph
-        if (!graph) throw new Error('Graph not available')
-        const node = graph.getNodeById(targetNodeId)
-        if (!node) throw new Error('Target node not found')
-        const input = node.inputs?.[targetSlot]
-        if (!input) throw new Error('Target input slot not found')
-
-        const linkId = input.link
-        if (linkId == null) throw new Error('Expected existing link on input')
-        const link = graph.getLink(linkId)
-        if (!link) throw new Error('Link not found')
-
-        // Convert the client/canvas pixel coordinates to graph space
-        const pos = app!.canvas.ds.convertCanvasToOffset([
-          clientPoint.x,
-          clientPoint.y
-        ])
-        graph.createReroute(pos, link)
-      },
-      [vaeNode.id, 0, reroutePoint] as const
-    )
-
-    await comfyPage.nextFrame()
-
-    const outputCenter = await getSlotCenter(
-      comfyPage.page,
-      samplerNode.id,
-      0,
-      false
-    )
-    const dragTarget = {
-      x: outputCenter.x + 150,
-      y: outputCenter.y - 140
-    }
-
-    let dropPending = false
-    let shiftHeld = false
-    try {
-      await comfyMouse.move(outputCenter)
-      await comfyPage.page.keyboard.down('Shift')
-      shiftHeld = true
-      dropPending = true
-      await comfyMouse.drag(dragTarget)
-      await expect(comfyPage.canvas).toHaveScreenshot(
-        'vue-node-reroute-output-shift-drag.png'
+      const samplerOutputCenter = await getSlotCenter(
+        comfyPage.page,
+        samplerNode.id,
+        0,
+        false
       )
-      await comfyMouse.move(outputCenter)
+      const vaeInputCenter = await getSlotCenter(
+        comfyPage.page,
+        vaeNode.id,
+        0,
+        true
+      )
+
+      await comfyMouse.move(samplerOutputCenter)
+      try {
+        await comfyMouse.drag(vaeInputCenter)
+      } finally {
+        await comfyMouse.drop()
+      }
+
+      await expect
+        .poll(() => getInputLinkDetails(comfyPage.page, vaeNode.id, 0))
+        .not.toBeNull()
+
+      const originalLink = await getInputLinkDetails(
+        comfyPage.page,
+        vaeNode.id,
+        0
+      )
+
+      const dragTarget = {
+        x: vaeInputCenter.x + 150,
+        y: vaeInputCenter.y - 100
+      }
+
+      // To prevent needing a screenshot expectation for whether the link's off
+      const vaeInputLocator = slotLocator(comfyPage.page, vaeNode.id, 0, true)
+      await expect
+        .poll(async () => {
+          const inputBox = await vaeInputLocator.boundingBox()
+          if (!inputBox) return false
+          const isOutsideX =
+            dragTarget.x < inputBox.x ||
+            dragTarget.x > inputBox.x + inputBox.width
+          const isOutsideY =
+            dragTarget.y < inputBox.y ||
+            dragTarget.y > inputBox.y + inputBox.height
+          return isOutsideX || isOutsideY
+        })
+        .toBe(true)
+
+      await comfyMouse.move(vaeInputCenter)
+      await comfyMouse.drag(dragTarget)
+      await comfyMouse.move(vaeInputCenter)
       await comfyMouse.drop()
-      dropPending = false
-    } finally {
-      if (dropPending) await comfyMouse.drop().catch(() => {})
-      if (shiftHeld) await comfyPage.page.keyboard.up('Shift').catch(() => {})
-    }
 
-    await comfyPage.nextFrame()
-
-    const linkDetails = await getInputLinkDetails(comfyPage.page, vaeNode.id, 0)
-    expect(linkDetails).not.toBeNull()
-    expect(linkDetails?.originId).toBe(samplerNode.id)
-    expect(linkDetails?.parentId).not.toBeNull()
-  })
-
-  test('dragging input to input drags existing link', async ({
-    comfyPage,
-    comfyMouse
-  }) => {
-    const clipNode = (
-      await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
-    )[0]
-    const samplerNode = (
-      await comfyPage.nodeOps.getNodeRefsByType('KSampler')
-    )[0]
-    expect(clipNode && samplerNode).toBeTruthy()
-
-    // Step 1: Connect CLIP's only output (index 0) to KSampler's second input (index 1)
-    await connectSlots(
-      comfyPage.page,
-      { nodeId: clipNode.id, index: 0 },
-      { nodeId: samplerNode.id, index: 1 },
-      () => comfyPage.nextFrame()
-    )
-
-    // Verify initial link exists between CLIP -> KSampler input[1]
-    const initialLink = await getInputLinkDetails(
-      comfyPage.page,
-      samplerNode.id,
-      1
-    )
-    expect(initialLink).not.toBeNull()
-    expect(initialLink).toMatchObject({
-      originId: clipNode.id,
-      targetId: samplerNode.id,
-      targetSlot: 1
+      await expect
+        .poll(() => getInputLinkDetails(comfyPage.page, vaeNode.id, 0))
+        .toMatchObject({
+          originId: originalLink!.originId,
+          originSlot: originalLink!.originSlot,
+          targetId: originalLink!.targetId,
+          targetSlot: originalLink!.targetSlot,
+          parentId: originalLink!.parentId
+        })
+      await expect.poll(() => samplerOutput.getLinkCount()).toBe(1)
+      await expect.poll(() => vaeInput.getLinkCount()).toBe(1)
     })
 
-    // Step 2: Drag from KSampler's second input to its third input (index 2)
-    const input2Center = await getSlotCenter(
-      comfyPage.page,
-      samplerNode.id,
-      1,
-      true
-    )
-    const input3Center = await getSlotCenter(
-      comfyPage.page,
-      samplerNode.id,
-      2,
-      true
-    )
+    test('rerouted input drag preview remains anchored to reroute', async ({
+      comfyPage,
+      comfyMouse
+    }) => {
+      const samplerNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+      )[0]
+      const vaeNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('VAEDecode')
+      )[0]
 
-    await comfyMouse.move(input2Center)
-    await comfyMouse.drag(input3Center)
-    await comfyMouse.drop()
-    await comfyPage.nextFrame()
+      const samplerOutput = await samplerNode.getOutput(0)
+      const vaeInput = await vaeNode.getInput(0)
 
-    // Expect old link removed from input[1]
-    const afterSecondInput = await getInputLinkDetails(
-      comfyPage.page,
-      samplerNode.id,
-      1
-    )
-    expect(afterSecondInput).toBeNull()
+      await connectSlots(
+        comfyPage.page,
+        { nodeId: samplerNode.id, index: 0 },
+        { nodeId: vaeNode.id, index: 0 },
+        () => comfyPage.nextFrame()
+      )
 
-    // Expect new link exists at input[2] from CLIP
-    const afterThirdInput = await getInputLinkDetails(
-      comfyPage.page,
-      samplerNode.id,
-      2
-    )
-    expect(afterThirdInput).not.toBeNull()
-    expect(afterThirdInput).toMatchObject({
-      originId: clipNode.id,
-      targetId: samplerNode.id,
-      targetSlot: 2
+      const outputPosition = await samplerOutput.getPosition()
+      const inputPosition = await vaeInput.getPosition()
+      const reroutePoint = getMiddlePoint(outputPosition, inputPosition)
+
+      // Insert a reroute programmatically on the existing link between sampler output[0] and VAE input[0].
+      // This avoids relying on an exact path hit-test position.
+      await comfyPage.page.evaluate(
+        ([targetNodeId, targetSlot, clientPoint]) => {
+          const app = window.app
+          const graph = app?.canvas?.graph ?? app?.graph
+          if (!graph) throw new Error('Graph not available')
+          const node = graph.getNodeById(targetNodeId)
+          if (!node) throw new Error('Target node not found')
+          const input = node.inputs?.[targetSlot]
+          if (!input) throw new Error('Target input slot not found')
+
+          const linkId = input.link
+          if (linkId == null) throw new Error('Expected existing link on input')
+          const link = graph.getLink(linkId)
+          if (!link) throw new Error('Link not found')
+
+          // Convert the client/canvas pixel coordinates to graph space
+          const pos = app!.canvas.ds.convertCanvasToOffset([
+            clientPoint.x,
+            clientPoint.y
+          ])
+          graph.createReroute(pos, link)
+        },
+        [vaeNode.id, 0, reroutePoint] as const
+      )
+
+      await comfyPage.nextFrame()
+
+      const vaeInputCenter = await getSlotCenter(
+        comfyPage.page,
+        vaeNode.id,
+        0,
+        true
+      )
+      const dragTarget = {
+        x: vaeInputCenter.x + 160,
+        y: vaeInputCenter.y - 120
+      }
+
+      let dropped = false
+      try {
+        await comfyMouse.move(vaeInputCenter)
+        await comfyMouse.drag(dragTarget)
+        await expect(comfyPage.canvas).toHaveScreenshot(
+          'vue-node-reroute-input-drag.png'
+        )
+        await comfyMouse.move(vaeInputCenter)
+        await comfyMouse.drop()
+        dropped = true
+      } finally {
+        if (!dropped) {
+          await comfyMouse.drop().catch(() => {})
+        }
+      }
+
+      await expect
+        .poll(() => getInputLinkDetails(comfyPage.page, vaeNode.id, 0))
+        .toMatchObject({
+          originId: samplerNode.id
+        })
+      await expect
+        .poll(async () => {
+          const link = await getInputLinkDetails(comfyPage.page, vaeNode.id, 0)
+          return link?.parentId
+        })
+        .not.toBeNull()
     })
-  })
 
-  test('shift-dragging an output with multiple links should drag all links', async ({
-    comfyPage,
-    comfyMouse
-  }) => {
-    const clipNode = (
-      await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
-    )[0]
-    const samplerNode = (
-      await comfyPage.nodeOps.getNodeRefsByType('KSampler')
-    )[0]
-    expect(clipNode && samplerNode).toBeTruthy()
+    test('rerouted output shift-drag preview remains anchored to reroute', async ({
+      comfyPage,
+      comfyMouse
+    }) => {
+      const samplerNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+      )[0]
+      const vaeNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('VAEDecode')
+      )[0]
+      expect(samplerNode && vaeNode).toBeTruthy()
 
-    const clipOutput = await clipNode.getOutput(0)
+      const samplerOutput = await samplerNode.getOutput(0)
+      const vaeInput = await vaeNode.getInput(0)
 
-    // Connect output[0] -> inputs[1] and [2]
-    await connectSlots(
-      comfyPage.page,
-      { nodeId: clipNode.id, index: 0 },
-      { nodeId: samplerNode.id, index: 1 },
-      () => comfyPage.nextFrame()
-    )
-    await connectSlots(
-      comfyPage.page,
-      { nodeId: clipNode.id, index: 0 },
-      { nodeId: samplerNode.id, index: 2 },
-      () => comfyPage.nextFrame()
-    )
+      await connectSlots(
+        comfyPage.page,
+        { nodeId: samplerNode.id, index: 0 },
+        { nodeId: vaeNode.id, index: 0 },
+        () => comfyPage.nextFrame()
+      )
 
-    expect(await clipOutput.getLinkCount()).toBe(2)
+      const outputPosition = await samplerOutput.getPosition()
+      const inputPosition = await vaeInput.getPosition()
+      const reroutePoint = getMiddlePoint(outputPosition, inputPosition)
 
-    const outputCenter = await getSlotCenter(
-      comfyPage.page,
-      clipNode.id,
-      0,
-      false
-    )
-    const dragTarget = {
-      x: outputCenter.x + 40,
-      y: outputCenter.y - 140
-    }
+      // Insert a reroute programmatically on the existing link between sampler output[0] and VAE input[0].
+      // This avoids relying on an exact path hit-test position.
+      await comfyPage.page.evaluate(
+        ([targetNodeId, targetSlot, clientPoint]) => {
+          const app = window.app
+          const graph = app?.canvas?.graph ?? app?.graph
+          if (!graph) throw new Error('Graph not available')
+          const node = graph.getNodeById(targetNodeId)
+          if (!node) throw new Error('Target node not found')
+          const input = node.inputs?.[targetSlot]
+          if (!input) throw new Error('Target input slot not found')
 
-    let dropPending = false
-    let shiftHeld = false
-    try {
-      await comfyMouse.move(outputCenter)
-      await comfyPage.page.keyboard.down('Shift')
-      shiftHeld = true
-      await comfyMouse.drag(dragTarget)
-      dropPending = true
+          const linkId = input.link
+          if (linkId == null) throw new Error('Expected existing link on input')
+          const link = graph.getLink(linkId)
+          if (!link) throw new Error('Link not found')
 
+          // Convert the client/canvas pixel coordinates to graph space
+          const pos = app!.canvas.ds.convertCanvasToOffset([
+            clientPoint.x,
+            clientPoint.y
+          ])
+          graph.createReroute(pos, link)
+        },
+        [vaeNode.id, 0, reroutePoint] as const
+      )
+
+      await comfyPage.nextFrame()
+
+      const outputCenter = await getSlotCenter(
+        comfyPage.page,
+        samplerNode.id,
+        0,
+        false
+      )
+      const dragTarget = {
+        x: outputCenter.x + 150,
+        y: outputCenter.y - 140
+      }
+
+      let dropPending = false
+      let shiftHeld = false
+      try {
+        await comfyMouse.move(outputCenter)
+        await comfyPage.page.keyboard.down('Shift')
+        shiftHeld = true
+        dropPending = true
+        await comfyMouse.drag(dragTarget)
+        await expect(comfyPage.canvas).toHaveScreenshot(
+          'vue-node-reroute-output-shift-drag.png'
+        )
+        await comfyMouse.move(outputCenter)
+        await comfyMouse.drop()
+        dropPending = false
+      } finally {
+        if (dropPending) await comfyMouse.drop().catch(() => {})
+        if (shiftHeld) await comfyPage.page.keyboard.up('Shift').catch(() => {})
+      }
+
+      await expect
+        .poll(() => getInputLinkDetails(comfyPage.page, vaeNode.id, 0))
+        .toMatchObject({
+          originId: samplerNode.id
+        })
+      await expect
+        .poll(async () => {
+          const link = await getInputLinkDetails(comfyPage.page, vaeNode.id, 0)
+          return link?.parentId
+        })
+        .not.toBeNull()
+    })
+
+    test('dragging input to input drags existing link', async ({
+      comfyPage,
+      comfyMouse
+    }) => {
+      const clipNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
+      )[0]
+      const samplerNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+      )[0]
+      expect(clipNode && samplerNode).toBeTruthy()
+
+      // Step 1: Connect CLIP's only output (index 0) to KSampler's second input (index 1)
+      await connectSlots(
+        comfyPage.page,
+        { nodeId: clipNode.id, index: 0 },
+        { nodeId: samplerNode.id, index: 1 },
+        () => comfyPage.nextFrame()
+      )
+
+      // Verify initial link exists between CLIP -> KSampler input[1]
+      await expect
+        .poll(() => getInputLinkDetails(comfyPage.page, samplerNode.id, 1))
+        .toMatchObject({
+          originId: clipNode.id,
+          targetId: samplerNode.id,
+          targetSlot: 1
+        })
+
+      // Step 2: Drag from KSampler's second input to its third input (index 2)
+      const input2Center = await getSlotCenter(
+        comfyPage.page,
+        samplerNode.id,
+        1,
+        true
+      )
+      const input3Center = await getSlotCenter(
+        comfyPage.page,
+        samplerNode.id,
+        2,
+        true
+      )
+
+      await comfyMouse.move(input2Center)
+      await comfyMouse.drag(input3Center)
+      await comfyMouse.drop()
+
+      // Expect old link removed from input[1]
+      await expect
+        .poll(() => getInputLinkDetails(comfyPage.page, samplerNode.id, 1))
+        .toBeNull()
+
+      // Expect new link exists at input[2] from CLIP
+      await expect
+        .poll(() => getInputLinkDetails(comfyPage.page, samplerNode.id, 2))
+        .toMatchObject({
+          originId: clipNode.id,
+          targetId: samplerNode.id,
+          targetSlot: 2
+        })
+    })
+
+    test('shift-dragging an output with multiple links should drag all links', async ({
+      comfyPage,
+      comfyMouse
+    }) => {
+      const clipNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
+      )[0]
+      const samplerNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+      )[0]
+      expect(clipNode && samplerNode).toBeTruthy()
+
+      const clipOutput = await clipNode.getOutput(0)
+
+      // Connect output[0] -> inputs[1] and [2]
+      await connectSlots(
+        comfyPage.page,
+        { nodeId: clipNode.id, index: 0 },
+        { nodeId: samplerNode.id, index: 1 },
+        () => comfyPage.nextFrame()
+      )
+      await connectSlots(
+        comfyPage.page,
+        { nodeId: clipNode.id, index: 0 },
+        { nodeId: samplerNode.id, index: 2 },
+        () => comfyPage.nextFrame()
+      )
+
+      await expect.poll(() => clipOutput.getLinkCount()).toBe(2)
+
+      const outputCenter = await getSlotCenter(
+        comfyPage.page,
+        clipNode.id,
+        0,
+        false
+      )
+      const dragTarget = {
+        x: outputCenter.x + 40,
+        y: outputCenter.y - 140
+      }
+
+      let dropPending = false
+      let shiftHeld = false
+      try {
+        await comfyMouse.move(outputCenter)
+        await comfyPage.page.keyboard.down('Shift')
+        shiftHeld = true
+        await comfyMouse.drag(dragTarget)
+        dropPending = true
+
+        await expect(comfyPage.canvas).toHaveScreenshot(
+          'vue-node-shift-output-multi-link.png'
+        )
+      } finally {
+        if (dropPending) await comfyMouse.drop().catch(() => {})
+        if (shiftHeld) await comfyPage.page.keyboard.up('Shift').catch(() => {})
+      }
+    })
+
+    test('should snap to node center while dragging and link on drop', async ({
+      comfyPage,
+      comfyMouse
+    }) => {
+      const clipNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
+      )[0]
+      const samplerNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+      )[0]
+      expect(clipNode && samplerNode).toBeTruthy()
+
+      // Start drag from CLIP output[0]
+      const clipOutputCenter = await getSlotCenter(
+        comfyPage.page,
+        clipNode.id,
+        0,
+        false
+      )
+
+      // Drag to the visual center of the KSampler Vue node (not a slot)
+      const samplerVue = comfyPage.vueNodes.getNodeLocator(
+        String(samplerNode.id)
+      )
+      await expect(samplerVue).toBeVisible()
+      const samplerCenter = await getCenter(samplerVue)
+
+      await comfyMouse.move(clipOutputCenter)
+      await comfyMouse.drag(samplerCenter)
+
+      // During drag, the preview should snap/highlight a compatible input on KSampler
       await expect(comfyPage.canvas).toHaveScreenshot(
-        'vue-node-shift-output-multi-link.png'
+        'vue-node-snap-to-node.png'
       )
-    } finally {
-      if (dropPending) await comfyMouse.drop().catch(() => {})
-      if (shiftHeld) await comfyPage.page.keyboard.up('Shift').catch(() => {})
-    }
-  })
 
-  test('should snap to node center while dragging and link on drop', async ({
-    comfyPage,
-    comfyMouse
-  }) => {
-    const clipNode = (
-      await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
-    )[0]
-    const samplerNode = (
-      await comfyPage.nodeOps.getNodeRefsByType('KSampler')
-    )[0]
-    expect(clipNode && samplerNode).toBeTruthy()
+      // Drop to create the link
+      await comfyMouse.drop()
 
-    // Start drag from CLIP output[0]
-    const clipOutputCenter = await getSlotCenter(
-      comfyPage.page,
-      clipNode.id,
-      0,
-      false
-    )
-
-    // Drag to the visual center of the KSampler Vue node (not a slot)
-    const samplerVue = comfyPage.vueNodes.getNodeLocator(String(samplerNode.id))
-    await expect(samplerVue).toBeVisible()
-    const samplerCenter = await getCenter(samplerVue)
-
-    await comfyMouse.move(clipOutputCenter)
-    await comfyMouse.drag(samplerCenter)
-
-    // During drag, the preview should snap/highlight a compatible input on KSampler
-    await expect(comfyPage.canvas).toHaveScreenshot('vue-node-snap-to-node.png')
-
-    // Drop to create the link
-    await comfyMouse.drop()
-    await comfyPage.nextFrame()
-
-    // Validate a link was created to one of KSampler's compatible inputs (1 or 2)
-    const linkOnInput1 = await getInputLinkDetails(
-      comfyPage.page,
-      samplerNode.id,
-      1
-    )
-    const linkOnInput2 = await getInputLinkDetails(
-      comfyPage.page,
-      samplerNode.id,
-      2
-    )
-
-    const linked = linkOnInput1 ?? linkOnInput2
-    expect(linked).not.toBeNull()
-    expect(linked?.originId).toBe(clipNode.id)
-    expect(linked?.targetId).toBe(samplerNode.id)
-  })
-
-  test('should snap to a specific compatible slot when targeting it', async ({
-    comfyPage,
-    comfyMouse
-  }) => {
-    const clipNode = (
-      await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
-    )[0]
-    const samplerNode = (
-      await comfyPage.nodeOps.getNodeRefsByType('KSampler')
-    )[0]
-    expect(clipNode && samplerNode).toBeTruthy()
-
-    // Drag from CLIP output[0] to KSampler input[2] (third slot) which is the
-    // second compatible input for CLIP
-    const clipOutputCenter = await getSlotCenter(
-      comfyPage.page,
-      clipNode.id,
-      0,
-      false
-    )
-    const samplerInput3Center = await getSlotCenter(
-      comfyPage.page,
-      samplerNode.id,
-      2,
-      true
-    )
-
-    await comfyMouse.move(clipOutputCenter)
-    await comfyMouse.drag(samplerInput3Center)
-
-    // Expect the preview to show snapping to the targeted slot
-    await expect(comfyPage.canvas).toHaveScreenshot('vue-node-snap-to-slot.png')
-
-    // Finish the connection
-    await comfyMouse.drop()
-    await comfyPage.nextFrame()
-
-    const linkDetails = await getInputLinkDetails(
-      comfyPage.page,
-      samplerNode.id,
-      2
-    )
-    expect(linkDetails).not.toBeNull()
-    expect(linkDetails).toMatchObject({
-      originId: clipNode.id,
-      targetId: samplerNode.id,
-      targetSlot: 2
+      // Validate a link was created to one of KSampler's compatible inputs (1 or 2)
+      await expect
+        .poll(async () => {
+          const link1 = await getInputLinkDetails(
+            comfyPage.page,
+            samplerNode.id,
+            1
+          )
+          const link2 = await getInputLinkDetails(
+            comfyPage.page,
+            samplerNode.id,
+            2
+          )
+          return link1 ?? link2
+        })
+        .toMatchObject({
+          originId: clipNode.id,
+          targetId: samplerNode.id
+        })
     })
-  })
 
-  test('should batch disconnect all links with ctrl+alt+click on slot', async ({
-    comfyPage
-  }) => {
-    const clipNode = (
-      await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
-    )[0]
-    const samplerNode = (
-      await comfyPage.nodeOps.getNodeRefsByType('KSampler')
-    )[0]
-    expect(clipNode && samplerNode).toBeTruthy()
-
-    await connectSlots(
-      comfyPage.page,
-      { nodeId: clipNode.id, index: 0 },
-      { nodeId: samplerNode.id, index: 1 },
-      () => comfyPage.nextFrame()
-    )
-    await connectSlots(
-      comfyPage.page,
-      { nodeId: clipNode.id, index: 0 },
-      { nodeId: samplerNode.id, index: 2 },
-      () => comfyPage.nextFrame()
-    )
-
-    const clipOutput = await clipNode.getOutput(0)
-    expect(await clipOutput.getLinkCount()).toBe(2)
-
-    const clipOutputSlot = slotLocator(comfyPage.page, clipNode.id, 0, false)
-
-    await clipOutputSlot.dispatchEvent('pointerdown', {
-      button: 0,
-      buttons: 1,
-      ctrlKey: true,
-      altKey: true,
-      shiftKey: false,
-      bubbles: true,
-      cancelable: true
-    })
-    await comfyPage.nextFrame()
-
-    expect(await clipOutput.getLinkCount()).toBe(0)
-  })
-
-  test.describe('Release actions (Shift-drop)', () => {
-    test('Context menu opens and endpoint is pinned on Shift-drop', async ({
+    test('should snap to a specific compatible slot when targeting it', async ({
       comfyPage,
       comfyMouse
     }) => {
-      await comfyPage.settings.setSetting(
-        'Comfy.LinkRelease.ActionShift',
-        'context menu'
-      )
-
+      const clipNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
+      )[0]
       const samplerNode = (
         await comfyPage.nodeOps.getNodeRefsByType('KSampler')
       )[0]
-      expect(samplerNode).toBeTruthy()
+      expect(clipNode && samplerNode).toBeTruthy()
 
-      const outputCenter = await getSlotCenter(
+      // Drag from CLIP output[0] to KSampler input[2] (third slot) which is the
+      // second compatible input for CLIP
+      const clipOutputCenter = await getSlotCenter(
         comfyPage.page,
-        samplerNode.id,
+        clipNode.id,
         0,
         false
       )
+      const samplerInput3Center = await getSlotCenter(
+        comfyPage.page,
+        samplerNode.id,
+        2,
+        true
+      )
 
-      const dropPos = { x: outputCenter.x + 90, y: outputCenter.y - 70 }
+      await comfyMouse.move(clipOutputCenter)
+      await comfyMouse.drag(samplerInput3Center)
 
-      await comfyMouse.move(outputCenter)
-      await comfyPage.page.keyboard.down('Shift')
-      try {
-        await comfyMouse.drag(dropPos)
-        await comfyMouse.drop()
-      } finally {
-        await comfyPage.page.keyboard.up('Shift').catch(() => {})
-      }
+      // Expect the preview to show snapping to the targeted slot
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'vue-node-snap-to-slot.png'
+      )
 
-      // Context menu should be visible
-      const contextMenu = comfyPage.page.locator('.litecontextmenu')
-      await expect(contextMenu).toBeVisible()
+      // Finish the connection
+      await comfyMouse.drop()
 
-      // Pinned endpoint should not change with mouse movement while menu is open
-      const before = await comfyPage.page.evaluate(() => {
-        const snap = window.app?.canvas?.linkConnector?.state?.snapLinksPos
-        return Array.isArray(snap) ? [snap[0], snap[1]] : null
-      })
-      expect(before).not.toBeNull()
-
-      // Move mouse elsewhere and verify snap position is unchanged
-      await comfyMouse.move({ x: dropPos.x + 160, y: dropPos.y + 100 })
-      const after = await comfyPage.page.evaluate(() => {
-        const snap = window.app?.canvas?.linkConnector?.state?.snapLinksPos
-        return Array.isArray(snap) ? [snap[0], snap[1]] : null
-      })
-      expect(after).toEqual(before)
+      await expect
+        .poll(() => getInputLinkDetails(comfyPage.page, samplerNode.id, 2))
+        .toMatchObject({
+          originId: clipNode.id,
+          targetId: samplerNode.id,
+          targetSlot: 2
+        })
     })
 
-    test('Context menu -> Search pre-filters by link type and connects after selection', async ({
+    test('should batch disconnect all links with ctrl+alt+click on slot', async ({
+      comfyPage
+    }) => {
+      const clipNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
+      )[0]
+      const samplerNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+      )[0]
+      expect(clipNode && samplerNode).toBeTruthy()
+
+      await connectSlots(
+        comfyPage.page,
+        { nodeId: clipNode.id, index: 0 },
+        { nodeId: samplerNode.id, index: 1 },
+        () => comfyPage.nextFrame()
+      )
+      await connectSlots(
+        comfyPage.page,
+        { nodeId: clipNode.id, index: 0 },
+        { nodeId: samplerNode.id, index: 2 },
+        () => comfyPage.nextFrame()
+      )
+
+      const clipOutput = await clipNode.getOutput(0)
+      await expect.poll(() => clipOutput.getLinkCount()).toBe(2)
+
+      const clipOutputSlot = slotLocator(comfyPage.page, clipNode.id, 0, false)
+
+      await clipOutputSlot.dispatchEvent('pointerdown', {
+        button: 0,
+        buttons: 1,
+        ctrlKey: true,
+        altKey: true,
+        shiftKey: false,
+        bubbles: true,
+        cancelable: true
+      })
+
+      await expect.poll(() => clipOutput.getLinkCount()).toBe(0)
+    })
+
+    test.describe('Release actions (Shift-drop)', () => {
+      test('Context menu opens and endpoint is pinned on Shift-drop', async ({
+        comfyPage,
+        comfyMouse
+      }) => {
+        await comfyPage.settings.setSetting(
+          'Comfy.LinkRelease.ActionShift',
+          'context menu'
+        )
+
+        const samplerNode = (
+          await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+        )[0]
+        expect(samplerNode).toBeTruthy()
+
+        const outputCenter = await getSlotCenter(
+          comfyPage.page,
+          samplerNode.id,
+          0,
+          false
+        )
+
+        const dropPos = { x: outputCenter.x + 90, y: outputCenter.y - 70 }
+
+        await comfyMouse.move(outputCenter)
+        await comfyPage.page.keyboard.down('Shift')
+        try {
+          await comfyMouse.drag(dropPos)
+          await comfyMouse.drop()
+        } finally {
+          await comfyPage.page.keyboard.up('Shift').catch(() => {})
+        }
+
+        // Context menu should be visible
+        const contextMenu = comfyPage.page.locator('.litecontextmenu')
+        await expect(contextMenu).toBeVisible()
+
+        // Pinned endpoint should not change with mouse movement while menu is open
+        await expect
+          .poll(() =>
+            comfyPage.page.evaluate(() => {
+              const snap =
+                window.app?.canvas?.linkConnector?.state?.snapLinksPos
+              return Array.isArray(snap) ? [snap[0], snap[1]] : null
+            })
+          )
+          .not.toBeNull()
+
+        const before = await comfyPage.page.evaluate(() => {
+          const snap = window.app?.canvas?.linkConnector?.state?.snapLinksPos
+          return Array.isArray(snap) ? [snap[0], snap[1]] : null
+        })
+
+        // Move mouse elsewhere and verify snap position is unchanged
+        await comfyMouse.move({ x: dropPos.x + 160, y: dropPos.y + 100 })
+        await expect
+          .poll(() =>
+            comfyPage.page.evaluate(() => {
+              const snap =
+                window.app?.canvas?.linkConnector?.state?.snapLinksPos
+              return Array.isArray(snap) ? [snap[0], snap[1]] : null
+            })
+          )
+          .toEqual(before)
+      })
+
+      test('Context menu -> Search pre-filters by link type and connects after selection', async ({
+        comfyPage,
+        comfyMouse
+      }) => {
+        await comfyPage.settings.setSetting(
+          'Comfy.LinkRelease.ActionShift',
+          'context menu'
+        )
+        await comfyPage.settings.setSetting(
+          'Comfy.NodeSearchBoxImpl',
+          'v1 (legacy)'
+        )
+
+        const samplerNode = (
+          await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+        )[0]
+        expect(samplerNode).toBeTruthy()
+
+        const outputCenter = await getSlotCenter(
+          comfyPage.page,
+          samplerNode.id,
+          0,
+          false
+        )
+        const dropPos = { x: outputCenter.x + 200, y: outputCenter.y - 100 }
+
+        await comfyMouse.move(outputCenter)
+        await comfyPage.page.keyboard.down('Shift')
+        try {
+          await comfyMouse.drag(dropPos)
+          await comfyMouse.drop()
+        } finally {
+          await comfyPage.page.keyboard.up('Shift').catch(() => {})
+        }
+
+        // Open Search from the context menu
+        await comfyPage.contextMenu.clickMenuItem('Search')
+        await comfyPage.nextFrame()
+
+        // Search box opens with prefilled type filter based on link type (LATENT)
+        await expect(comfyPage.searchBox.input).toBeVisible()
+        const chips = comfyPage.searchBox.filterChips
+        // Ensure at least one filter chip exists and it matches the link type
+        await expect(chips.first()).toBeVisible()
+        await expect(chips.first()).toContainText('LATENT')
+
+        // Choose a compatible node and verify it auto-connects
+        await comfyPage.searchBox.fillAndSelectFirstNode('VAEDecode')
+
+        // KSampler output should now have an outgoing link
+        const samplerOutput = await samplerNode.getOutput(0)
+        await expect.poll(() => samplerOutput.getLinkCount()).toBe(1)
+
+        // One of the VAEDecode nodes should have an incoming link on input[0]
+        await expect
+          .poll(async () => {
+            const vaeNodes =
+              await comfyPage.nodeOps.getNodeRefsByType('VAEDecode')
+            for (const vae of vaeNodes) {
+              const details = await getInputLinkDetails(
+                comfyPage.page,
+                vae.id,
+                0
+              )
+              if (details) return details.originId
+            }
+            return null
+          })
+          .toBe(samplerNode.id)
+      })
+
+      test('Search box opens on Shift-drop and connects after selection', async ({
+        comfyPage,
+        comfyMouse
+      }) => {
+        await comfyPage.settings.setSetting(
+          'Comfy.LinkRelease.ActionShift',
+          'search box'
+        )
+        await comfyPage.settings.setSetting(
+          'Comfy.NodeSearchBoxImpl',
+          'v1 (legacy)'
+        )
+
+        const samplerNode = (
+          await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+        )[0]
+        expect(samplerNode).toBeTruthy()
+
+        const outputCenter = await getSlotCenter(
+          comfyPage.page,
+          samplerNode.id,
+          0,
+          false
+        )
+        const dropPos = { x: outputCenter.x + 140, y: outputCenter.y - 100 }
+
+        await comfyMouse.move(outputCenter)
+        await comfyPage.page.keyboard.down('Shift')
+        try {
+          await comfyMouse.drag(dropPos)
+          await comfyMouse.drop()
+        } finally {
+          await comfyPage.page.keyboard.up('Shift').catch(() => {})
+        }
+
+        // Search box should open directly
+        await expect(comfyPage.searchBox.input).toBeVisible()
+        await expect(comfyPage.searchBox.filterChips.first()).toContainText(
+          'LATENT'
+        )
+
+        // Select a compatible node and verify connection
+        await comfyPage.searchBox.fillAndSelectFirstNode('VAEDecode')
+
+        const samplerOutput = await samplerNode.getOutput(0)
+        await expect.poll(() => samplerOutput.getLinkCount()).toBe(1)
+
+        await expect
+          .poll(async () => {
+            const vaeNodes =
+              await comfyPage.nodeOps.getNodeRefsByType('VAEDecode')
+            for (const vae of vaeNodes) {
+              const details = await getInputLinkDetails(
+                comfyPage.page,
+                vae.id,
+                0
+              )
+              if (details) return details.originId
+            }
+            return null
+          })
+          .toBe(samplerNode.id)
+      })
+    })
+
+    test('Dragging from subgraph input connects to correct slot', async ({
       comfyPage,
       comfyMouse
     }) => {
-      await comfyPage.settings.setSetting(
-        'Comfy.LinkRelease.ActionShift',
-        'context menu'
-      )
       await comfyPage.settings.setSetting(
         'Comfy.NodeSearchBoxImpl',
         'v1 (legacy)'
       )
 
-      const samplerNode = (
+      // Setup workflow with a KSampler node
+      await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
+      await comfyPage.nodeOps.waitForGraphNodes(0)
+      await comfyPage.command.executeCommand('Workspace.SearchBox.Toggle')
+      await comfyPage.nextFrame()
+      await comfyPage.searchBox.fillAndSelectFirstNode('KSampler')
+      await comfyPage.nodeOps.waitForGraphNodes(1)
+
+      // Convert the KSampler node to a subgraph
+      let ksamplerNode = (
         await comfyPage.nodeOps.getNodeRefsByType('KSampler')
-      )[0]
-      expect(samplerNode).toBeTruthy()
+      )?.[0]
+      await comfyPage.vueNodes.selectNode(String(ksamplerNode.id))
+      await comfyPage.command.executeCommand('Comfy.Graph.ConvertToSubgraph')
 
-      const outputCenter = await getSlotCenter(
+      // Enter the subgraph
+      await comfyPage.vueNodes.enterSubgraph()
+      await fitToViewInstant(comfyPage)
+
+      // Get the KSampler node inside the subgraph
+      ksamplerNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('KSampler', true)
+      )?.[0]
+      const positiveInput = await ksamplerNode.getInput(1)
+      const negativeInput = await ksamplerNode.getInput(2)
+
+      const positiveInputPos = await getSlotCenter(
         comfyPage.page,
-        samplerNode.id,
-        0,
-        false
+        ksamplerNode.id,
+        1,
+        true
       )
-      const dropPos = { x: outputCenter.x + 200, y: outputCenter.y - 100 }
 
-      await comfyMouse.move(outputCenter)
-      await comfyPage.page.keyboard.down('Shift')
-      try {
-        await comfyMouse.drag(dropPos)
-        await comfyMouse.drop()
-      } finally {
-        await comfyPage.page.keyboard.up('Shift').catch(() => {})
-      }
+      const sourceSlot = await comfyPage.subgraph.getInputSlot()
+      const calculatedSourcePos = await sourceSlot.getOpenSlotPosition()
 
-      // Open Search from the context menu
-      await comfyPage.contextMenu.clickMenuItem('Search')
-      await comfyPage.nextFrame()
+      await comfyMouse.move(calculatedSourcePos)
+      await comfyMouse.drag(positiveInputPos)
+      await comfyMouse.drop()
 
-      // Search box opens with prefilled type filter based on link type (LATENT)
-      await expect(comfyPage.searchBox.input).toBeVisible()
-      const chips = comfyPage.searchBox.filterChips
-      // Ensure at least one filter chip exists and it matches the link type
-      const chipCount = await chips.count()
-      expect(chipCount).toBeGreaterThan(0)
-      await expect(chips.first()).toContainText('LATENT')
-
-      // Choose a compatible node and verify it auto-connects
-      await comfyPage.searchBox.fillAndSelectFirstNode('VAEDecode')
-      await comfyPage.nextFrame()
-
-      // KSampler output should now have an outgoing link
-      const samplerOutput = await samplerNode.getOutput(0)
-      expect(await samplerOutput.getLinkCount()).toBe(1)
-
-      // One of the VAEDecode nodes should have an incoming link on input[0]
-      const vaeNodes = await comfyPage.nodeOps.getNodeRefsByType('VAEDecode')
-      let linked = false
-      for (const vae of vaeNodes) {
-        const details = await getInputLinkDetails(comfyPage.page, vae.id, 0)
-        if (details) {
-          expect(details.originId).toBe(samplerNode.id)
-          linked = true
-          break
-        }
-      }
-      expect(linked).toBe(true)
+      // Verify connection went to the correct slot
+      await expect.poll(() => positiveInput.getLinkCount()).toBe(1)
+      await expect.poll(() => negativeInput.getLinkCount()).toBe(0)
     })
-
-    test('Search box opens on Shift-drop and connects after selection', async ({
-      comfyPage,
-      comfyMouse
-    }) => {
-      await comfyPage.settings.setSetting(
-        'Comfy.LinkRelease.ActionShift',
-        'search box'
-      )
-      await comfyPage.settings.setSetting(
-        'Comfy.NodeSearchBoxImpl',
-        'v1 (legacy)'
-      )
-
-      const samplerNode = (
-        await comfyPage.nodeOps.getNodeRefsByType('KSampler')
-      )[0]
-      expect(samplerNode).toBeTruthy()
-
-      const outputCenter = await getSlotCenter(
-        comfyPage.page,
-        samplerNode.id,
-        0,
-        false
-      )
-      const dropPos = { x: outputCenter.x + 140, y: outputCenter.y - 100 }
-
-      await comfyMouse.move(outputCenter)
-      await comfyPage.page.keyboard.down('Shift')
-      try {
-        await comfyMouse.drag(dropPos)
-        await comfyMouse.drop()
-      } finally {
-        await comfyPage.page.keyboard.up('Shift').catch(() => {})
-      }
-
-      // Search box should open directly
-      await expect(comfyPage.searchBox.input).toBeVisible()
-      await expect(comfyPage.searchBox.filterChips.first()).toContainText(
-        'LATENT'
-      )
-
-      // Select a compatible node and verify connection
-      await comfyPage.searchBox.fillAndSelectFirstNode('VAEDecode')
-      await comfyPage.nextFrame()
-
-      const samplerOutput = await samplerNode.getOutput(0)
-      expect(await samplerOutput.getLinkCount()).toBe(1)
-
-      const vaeNodes = await comfyPage.nodeOps.getNodeRefsByType('VAEDecode')
-      let linked = false
-      for (const vae of vaeNodes) {
-        const details = await getInputLinkDetails(comfyPage.page, vae.id, 0)
-        if (details) {
-          expect(details.originId).toBe(samplerNode.id)
-          linked = true
-          break
-        }
-      }
-      expect(linked).toBe(true)
-    })
-  })
-
-  test('Dragging from subgraph input connects to correct slot', async ({
-    comfyPage,
-    comfyMouse
-  }) => {
-    await comfyPage.settings.setSetting(
-      'Comfy.NodeSearchBoxImpl',
-      'v1 (legacy)'
-    )
-
-    // Setup workflow with a KSampler node
-    await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
-    await comfyPage.nodeOps.waitForGraphNodes(0)
-    await comfyPage.command.executeCommand('Workspace.SearchBox.Toggle')
-    await comfyPage.nextFrame()
-    await comfyPage.searchBox.fillAndSelectFirstNode('KSampler')
-    await comfyPage.nodeOps.waitForGraphNodes(1)
-
-    // Convert the KSampler node to a subgraph
-    let ksamplerNode = (
-      await comfyPage.nodeOps.getNodeRefsByType('KSampler')
-    )?.[0]
-    await comfyPage.vueNodes.selectNode(String(ksamplerNode.id))
-    await comfyPage.command.executeCommand('Comfy.Graph.ConvertToSubgraph')
-
-    // Enter the subgraph
-    await comfyPage.vueNodes.enterSubgraph()
-    await fitToViewInstant(comfyPage)
-
-    // Get the KSampler node inside the subgraph
-    ksamplerNode = (
-      await comfyPage.nodeOps.getNodeRefsByType('KSampler', true)
-    )?.[0]
-    const positiveInput = await ksamplerNode.getInput(1)
-    const negativeInput = await ksamplerNode.getInput(2)
-
-    const positiveInputPos = await getSlotCenter(
-      comfyPage.page,
-      ksamplerNode.id,
-      1,
-      true
-    )
-
-    const sourceSlot = await comfyPage.subgraph.getInputSlot()
-    const calculatedSourcePos = await sourceSlot.getOpenSlotPosition()
-
-    await comfyMouse.move(calculatedSourcePos)
-    await comfyMouse.drag(positiveInputPos)
-    await comfyMouse.drop()
-
-    // Verify connection went to the correct slot
-    const positiveLinks = await positiveInput.getLinkCount()
-    const negativeLinks = await negativeInput.getLinkCount()
-    expect(positiveLinks).toBe(1)
-    expect(negativeLinks).toBe(0)
-  })
-})
+  }
+)
diff --git a/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts b/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts
index 402b314662..7437a15a0b 100644
--- a/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts
@@ -1,144 +1,154 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../../../../fixtures/ComfyPage'
-import type { ComfyPage } from '../../../../fixtures/ComfyPage'
-import { fitToViewInstant } from '../../../../helpers/fitToView'
+} from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { fitToViewInstant } from '@e2e/helpers/fitToView'
 
-test.describe('Vue Node Bring to Front', { tag: '@screenshot' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.workflow.loadWorkflow('vueNodes/simple-triple')
-    await comfyPage.vueNodes.waitForNodes()
-    await fitToViewInstant(comfyPage)
-  })
+test.describe(
+  'Vue Node Bring to Front',
+  { tag: ['@screenshot', '@vue-nodes'] },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+      await comfyPage.workflow.loadWorkflow('vueNodes/simple-triple')
+      await fitToViewInstant(comfyPage)
+    })
 
-  /**
-   * Helper to get the z-index of a node by its title
-   */
-  async function getNodeZIndex(
-    comfyPage: ComfyPage,
-    title: string
-  ): Promise<number> {
-    const node = comfyPage.vueNodes.getNodeByTitle(title)
-    const style = await node.getAttribute('style')
-    if (!style) {
-      throw new Error(
-        `Node "${title}" has no style attribute (observed: ${style})`
-      )
+    /**
+     * Helper to get the z-index of a node by its title
+     */
+    async function getNodeZIndex(
+      comfyPage: ComfyPage,
+      title: string
+    ): Promise<number> {
+      const node = comfyPage.vueNodes.getNodeByTitle(title)
+      const style = await node.getAttribute('style')
+      const match = style?.match(/z-index:\s*(\d+)/)
+      return match ? parseInt(match[1], 10) : Number.NaN
     }
-    const match = style.match(/z-index:\s*(\d+)/)
-    if (!match) {
-      throw new Error(
-        `Node "${title}" has no z-index in style (observed: "${style}")`
-      )
+
+    /**
+     * Helper to get the bounding box center of a node
+     */
+    async function getNodeCenter(
+      comfyPage: ComfyPage,
+      title: string
+    ): Promise<{ x: number; y: number }> {
+      const node = comfyPage.vueNodes.getNodeByTitle(title)
+      const box = await node.boundingBox()
+      if (!box) throw new Error(`Node "${title}" not found`)
+      return { x: box.x + box.width / 2, y: box.y + box.height / 2 }
     }
-    return parseInt(match[1], 10)
+
+    test('should bring overlapped node to front when clicking on it', async ({
+      comfyPage
+    }) => {
+      // Get initial positions
+      const clipCenter = await getNodeCenter(comfyPage, 'CLIP Text Encode')
+      const ksamplerHeader = await comfyPage.page
+        .getByText('KSampler')
+        .boundingBox()
+      if (!ksamplerHeader) throw new Error('KSampler header not found')
+
+      // Drag KSampler on top of CLIP Text Encode
+      await comfyPage.canvasOps.dragAndDrop(
+        { x: ksamplerHeader.x + 50, y: ksamplerHeader.y + 10 },
+        clipCenter
+      )
+      await comfyPage.nextFrame()
+
+      // Screenshot showing KSampler on top of CLIP
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'bring-to-front-overlapped-before.png'
+      )
+
+      // KSampler should be on top (higher z-index) after being dragged
+      await expect
+        .poll(async () => {
+          const ksamplerZ = await getNodeZIndex(comfyPage, 'KSampler')
+          const clipZ = await getNodeZIndex(comfyPage, 'CLIP Text Encode')
+          return ksamplerZ - clipZ
+        })
+        .toBeGreaterThan(0)
+
+      // Click on CLIP Text Encode (underneath) - need to click on a visible part
+      // Since KSampler is on top, we click on the edge of CLIP that should still be visible
+      const clipNode = comfyPage.vueNodes.getNodeByTitle('CLIP Text Encode')
+      const clipBox = await clipNode.boundingBox()
+      if (!clipBox) throw new Error('CLIP node not found')
+
+      // Click on a visible edge of CLIP
+      await comfyPage.page.mouse.click(clipBox.x + 30, clipBox.y + 10)
+      await comfyPage.nextFrame()
+
+      // CLIP should now be on top - compare post-action z-indices
+      await expect
+        .poll(async () => {
+          const clipZ = await getNodeZIndex(comfyPage, 'CLIP Text Encode')
+          const ksamplerZ = await getNodeZIndex(comfyPage, 'KSampler')
+          return clipZ - ksamplerZ
+        })
+        .toBeGreaterThan(0)
+
+      // Screenshot showing CLIP now on top
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'bring-to-front-overlapped-after.png'
+      )
+    })
+
+    test('should bring overlapped node to front when clicking on its widget', async ({
+      comfyPage
+    }) => {
+      // Get CLIP Text Encode position (it has a text widget)
+      const clipCenter = await getNodeCenter(comfyPage, 'CLIP Text Encode')
+
+      // Get VAE Decode position and drag it on top of CLIP
+      const vaeHeader = await comfyPage.page
+        .getByText('VAE Decode')
+        .boundingBox()
+      if (!vaeHeader) throw new Error('VAE Decode header not found')
+
+      await comfyPage.canvasOps.dragAndDrop(
+        { x: vaeHeader.x + 50, y: vaeHeader.y + 10 },
+        { x: clipCenter.x - 50, y: clipCenter.y }
+      )
+      await comfyPage.nextFrame()
+
+      // VAE should be on top after drag
+      await expect
+        .poll(async () => {
+          const vaeZ = await getNodeZIndex(comfyPage, 'VAE Decode')
+          const clipZ = await getNodeZIndex(comfyPage, 'CLIP Text Encode')
+          return vaeZ - clipZ
+        })
+        .toBeGreaterThan(0)
+
+      // Screenshot showing VAE on top
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'bring-to-front-widget-overlapped-before.png'
+      )
+
+      // Click on the text widget of CLIP Text Encode
+      const clipNode = comfyPage.vueNodes.getNodeByTitle('CLIP Text Encode')
+      const clipBox = await clipNode.boundingBox()
+      if (!clipBox) throw new Error('CLIP node not found')
+      await comfyPage.page.mouse.click(clipBox.x + 170, clipBox.y + 80)
+      await comfyPage.nextFrame()
+
+      // CLIP should now be on top - compare post-action z-indices
+      await expect
+        .poll(async () => {
+          const clipZ = await getNodeZIndex(comfyPage, 'CLIP Text Encode')
+          const vaeZ = await getNodeZIndex(comfyPage, 'VAE Decode')
+          return clipZ - vaeZ
+        })
+        .toBeGreaterThan(0)
+
+      // Screenshot showing CLIP now on top after widget click
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'bring-to-front-widget-overlapped-after.png'
+      )
+    })
   }
-
-  /**
-   * Helper to get the bounding box center of a node
-   */
-  async function getNodeCenter(
-    comfyPage: ComfyPage,
-    title: string
-  ): Promise<{ x: number; y: number }> {
-    const node = comfyPage.vueNodes.getNodeByTitle(title)
-    const box = await node.boundingBox()
-    if (!box) throw new Error(`Node "${title}" not found`)
-    return { x: box.x + box.width / 2, y: box.y + box.height / 2 }
-  }
-
-  test('should bring overlapped node to front when clicking on it', async ({
-    comfyPage
-  }) => {
-    // Get initial positions
-    const clipCenter = await getNodeCenter(comfyPage, 'CLIP Text Encode')
-    const ksamplerHeader = await comfyPage.page
-      .getByText('KSampler')
-      .boundingBox()
-    if (!ksamplerHeader) throw new Error('KSampler header not found')
-
-    // Drag KSampler on top of CLIP Text Encode
-    await comfyPage.canvasOps.dragAndDrop(
-      { x: ksamplerHeader.x + 50, y: ksamplerHeader.y + 10 },
-      clipCenter
-    )
-    await comfyPage.nextFrame()
-
-    // Screenshot showing KSampler on top of CLIP
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'bring-to-front-overlapped-before.png'
-    )
-
-    // KSampler should be on top (higher z-index) after being dragged
-    const ksamplerZIndexBefore = await getNodeZIndex(comfyPage, 'KSampler')
-    const clipZIndexBefore = await getNodeZIndex(comfyPage, 'CLIP Text Encode')
-    expect(ksamplerZIndexBefore).toBeGreaterThan(clipZIndexBefore)
-
-    // Click on CLIP Text Encode (underneath) - need to click on a visible part
-    // Since KSampler is on top, we click on the edge of CLIP that should still be visible
-    const clipNode = comfyPage.vueNodes.getNodeByTitle('CLIP Text Encode')
-    const clipBox = await clipNode.boundingBox()
-    if (!clipBox) throw new Error('CLIP node not found')
-
-    // Click on a visible edge of CLIP
-    await comfyPage.page.mouse.click(clipBox.x + 30, clipBox.y + 10)
-    await comfyPage.nextFrame()
-
-    // CLIP should now be on top - compare post-action z-indices
-    const clipZIndexAfter = await getNodeZIndex(comfyPage, 'CLIP Text Encode')
-    const ksamplerZIndexAfter = await getNodeZIndex(comfyPage, 'KSampler')
-    expect(clipZIndexAfter).toBeGreaterThan(ksamplerZIndexAfter)
-
-    // Screenshot showing CLIP now on top
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'bring-to-front-overlapped-after.png'
-    )
-  })
-
-  test('should bring overlapped node to front when clicking on its widget', async ({
-    comfyPage
-  }) => {
-    // Get CLIP Text Encode position (it has a text widget)
-    const clipCenter = await getNodeCenter(comfyPage, 'CLIP Text Encode')
-
-    // Get VAE Decode position and drag it on top of CLIP
-    const vaeHeader = await comfyPage.page.getByText('VAE Decode').boundingBox()
-    if (!vaeHeader) throw new Error('VAE Decode header not found')
-
-    await comfyPage.canvasOps.dragAndDrop(
-      { x: vaeHeader.x + 50, y: vaeHeader.y + 10 },
-      { x: clipCenter.x - 50, y: clipCenter.y }
-    )
-    await comfyPage.nextFrame()
-
-    // VAE should be on top after drag
-    const vaeZIndexBefore = await getNodeZIndex(comfyPage, 'VAE Decode')
-    const clipZIndexBefore = await getNodeZIndex(comfyPage, 'CLIP Text Encode')
-    expect(vaeZIndexBefore).toBeGreaterThan(clipZIndexBefore)
-
-    // Screenshot showing VAE on top
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'bring-to-front-widget-overlapped-before.png'
-    )
-
-    // Click on the text widget of CLIP Text Encode
-    const clipNode = comfyPage.vueNodes.getNodeByTitle('CLIP Text Encode')
-    const clipBox = await clipNode.boundingBox()
-    if (!clipBox) throw new Error('CLIP node not found')
-    await comfyPage.page.mouse.click(clipBox.x + 170, clipBox.y + 80)
-    await comfyPage.nextFrame()
-
-    // CLIP should now be on top - compare post-action z-indices
-    const clipZIndexAfter = await getNodeZIndex(comfyPage, 'CLIP Text Encode')
-    const vaeZIndexAfter = await getNodeZIndex(comfyPage, 'VAE Decode')
-    expect(clipZIndexAfter).toBeGreaterThan(vaeZIndexAfter)
-
-    // Screenshot showing CLIP now on top after widget click
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'bring-to-front-widget-overlapped-after.png'
-    )
-  })
-})
+)
diff --git a/browser_tests/tests/vueNodes/interactions/node/contextMenu.spec.ts b/browser_tests/tests/vueNodes/interactions/node/contextMenu.spec.ts
new file mode 100644
index 0000000000..26c52d8554
--- /dev/null
+++ b/browser_tests/tests/vueNodes/interactions/node/contextMenu.spec.ts
@@ -0,0 +1,529 @@
+import type { Locator } from '@playwright/test'
+
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+
+const BYPASS_CLASS = /before:bg-bypass\/60/
+
+async function clickExactMenuItem(comfyPage: ComfyPage, name: string) {
+  await comfyPage.contextMenu.clickMenuItemExact(name)
+  await expect(comfyPage.contextMenu.primeVueMenu).toBeHidden()
+}
+
+async function openContextMenu(comfyPage: ComfyPage, nodeTitle: string) {
+  const fixture = await comfyPage.vueNodes.getFixtureByTitle(nodeTitle)
+  await comfyPage.contextMenu.openForVueNode(fixture.header)
+  return comfyPage.contextMenu.primeVueMenu
+}
+
+async function openMultiNodeContextMenu(
+  comfyPage: ComfyPage,
+  titles: string[]
+) {
+  // deselectAll via evaluate — clearSelection() clicks at a fixed position
+  // which can hit nodes or the toolbar overlay
+  await comfyPage.page.evaluate(() => window.app!.canvas.deselectAll())
+  await comfyPage.nextFrame()
+
+  for (const title of titles) {
+    const fixture = await comfyPage.vueNodes.getFixtureByTitle(title)
+    await fixture.header.click({ modifiers: ['ControlOrMeta'] })
+  }
+  await comfyPage.nextFrame()
+
+  const firstFixture = await comfyPage.vueNodes.getFixtureByTitle(titles[0])
+  const box = await firstFixture.header.boundingBox()
+  if (!box) throw new Error(`Header for "${titles[0]}" not found`)
+  await comfyPage.page.mouse.click(
+    box.x + box.width / 2,
+    box.y + box.height / 2,
+    { button: 'right' }
+  )
+
+  const menu = comfyPage.contextMenu.primeVueMenu
+  await menu.waitFor({ state: 'visible' })
+  return menu
+}
+
+function getNodeWrapper(comfyPage: ComfyPage, nodeTitle: string): Locator {
+  return comfyPage.vueNodes
+    .getNodeByTitle(nodeTitle)
+    .getByTestId(TestIds.node.innerWrapper)
+}
+
+async function getNodeRef(comfyPage: ComfyPage, nodeTitle: string) {
+  const refs = await comfyPage.nodeOps.getNodeRefsByTitle(nodeTitle)
+  return refs[0]
+}
+
+test.describe('Vue Node Context Menu', { tag: '@vue-nodes' }, () => {
+  test.describe('Single Node Actions', () => {
+    test('should rename node via context menu', async ({ comfyPage }) => {
+      await openContextMenu(comfyPage, 'KSampler')
+      await clickExactMenuItem(comfyPage, 'Rename')
+
+      const titleInput = comfyPage.page.getByTestId(TestIds.node.titleInput)
+      await titleInput.waitFor({ state: 'visible' })
+      await titleInput.fill('My Renamed Sampler')
+      await titleInput.press('Enter')
+      await comfyPage.nextFrame()
+
+      const renamedNode =
+        comfyPage.vueNodes.getNodeByTitle('My Renamed Sampler')
+      await expect(renamedNode).toBeVisible()
+    })
+
+    test('should copy and paste node via context menu', async ({
+      comfyPage
+    }) => {
+      const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
+
+      await openContextMenu(comfyPage, 'Load Checkpoint')
+      await clickExactMenuItem(comfyPage, 'Copy')
+
+      // Internal clipboard paste (menu Copy uses canvas clipboard, not OS)
+      await comfyPage.page.evaluate(() => {
+        window.app!.canvas.pasteFromClipboard({ connectInputs: false })
+      })
+      await comfyPage.nextFrame()
+
+      await expect
+        .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+        .toBe(initialCount + 1)
+    })
+
+    test('should duplicate node via context menu', async ({ comfyPage }) => {
+      const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
+
+      await openContextMenu(comfyPage, 'Load Checkpoint')
+      await clickExactMenuItem(comfyPage, 'Duplicate')
+
+      await expect
+        .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+        .toBe(initialCount + 1)
+    })
+
+    test('should pin and unpin node via context menu', async ({
+      comfyPage
+    }) => {
+      const nodeTitle = 'Load Checkpoint'
+      const nodeRef = await getNodeRef(comfyPage, nodeTitle)
+
+      // Pin via context menu
+      await openContextMenu(comfyPage, nodeTitle)
+      await clickExactMenuItem(comfyPage, 'Pin')
+
+      const fixture = await comfyPage.vueNodes.getFixtureByTitle(nodeTitle)
+      await expect(fixture.pinIndicator).toBeVisible()
+      await expect.poll(() => nodeRef.isPinned()).toBe(true)
+
+      // Verify drag blocked
+      const header = fixture.header
+      const posBeforeDrag = await header.boundingBox()
+      if (!posBeforeDrag) throw new Error('Header not found')
+      await comfyPage.canvasOps.dragAndDrop(
+        { x: posBeforeDrag.x + 10, y: posBeforeDrag.y + 10 },
+        { x: posBeforeDrag.x + 256, y: posBeforeDrag.y + 256 }
+      )
+      await expect
+        .poll(async () => await header.boundingBox())
+        .toEqual(posBeforeDrag)
+
+      // Unpin via context menu
+      await openContextMenu(comfyPage, nodeTitle)
+      await clickExactMenuItem(comfyPage, 'Unpin')
+
+      await expect(fixture.pinIndicator).toBeHidden()
+      await expect.poll(() => nodeRef.isPinned()).toBe(false)
+    })
+
+    test('should bypass node and remove bypass via context menu', async ({
+      comfyPage
+    }) => {
+      const nodeTitle = 'Load Checkpoint'
+      const nodeRef = await getNodeRef(comfyPage, nodeTitle)
+
+      await openContextMenu(comfyPage, nodeTitle)
+      await clickExactMenuItem(comfyPage, 'Bypass')
+
+      await expect.poll(() => nodeRef.isBypassed()).toBe(true)
+      await expect(getNodeWrapper(comfyPage, nodeTitle)).toHaveClass(
+        BYPASS_CLASS
+      )
+
+      await openContextMenu(comfyPage, nodeTitle)
+      await clickExactMenuItem(comfyPage, 'Remove Bypass')
+
+      await expect.poll(() => nodeRef.isBypassed()).toBe(false)
+      await expect(getNodeWrapper(comfyPage, nodeTitle)).not.toHaveClass(
+        BYPASS_CLASS
+      )
+    })
+
+    test('should minimize and expand node via context menu', async ({
+      comfyPage
+    }) => {
+      const fixture = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+      await expect(fixture.body).toBeVisible()
+
+      await openContextMenu(comfyPage, 'KSampler')
+      await clickExactMenuItem(comfyPage, 'Minimize Node')
+      await expect(fixture.body).toBeHidden()
+
+      await openContextMenu(comfyPage, 'KSampler')
+      await clickExactMenuItem(comfyPage, 'Expand Node')
+      await expect(fixture.body).toBeVisible()
+    })
+
+    test('should convert node to subgraph via context menu', async ({
+      comfyPage
+    }) => {
+      await openContextMenu(comfyPage, 'KSampler')
+      await clickExactMenuItem(comfyPage, 'Convert to Subgraph')
+
+      const subgraphNode = comfyPage.vueNodes.getNodeByTitle('New Subgraph')
+      await expect(subgraphNode).toBeVisible()
+
+      await expect(comfyPage.vueNodes.getNodeByTitle('KSampler')).toBeHidden()
+    })
+  })
+
+  test.describe('Image Node Actions', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.page
+        .context()
+        .grantPermissions(['clipboard-read', 'clipboard-write'])
+      await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
+      await comfyPage.vueNodes.waitForNodes(1)
+      await comfyPage.page
+        .locator('[data-node-id] img')
+        .first()
+        .waitFor({ state: 'visible' })
+
+      const [loadImageNode] =
+        await comfyPage.nodeOps.getNodeRefsByTitle('Load Image')
+      if (!loadImageNode) throw new Error('Load Image node not found')
+
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(
+            (nodeId) =>
+              window.app!.graph.getNodeById(nodeId)?.imgs?.length ?? 0,
+            loadImageNode.id
+          )
+        )
+        .toBeGreaterThan(0)
+    })
+
+    test('should copy image to clipboard via context menu', async ({
+      comfyPage
+    }) => {
+      await openContextMenu(comfyPage, 'Load Image')
+      await clickExactMenuItem(comfyPage, 'Copy Image')
+
+      // Verify the clipboard contains an image
+      await expect
+        .poll(async () => {
+          return comfyPage.page.evaluate(async () => {
+            const items = await navigator.clipboard.read()
+            return items.some((item) =>
+              item.types.some((t) => t.startsWith('image/'))
+            )
+          })
+        })
+        .toBe(true)
+    })
+
+    test('should paste image to LoadImage node via context menu', async ({
+      comfyPage
+    }) => {
+      // Capture the original image src from the node's preview
+      const imagePreview = comfyPage.vueNodes
+        .getNodeByTitle('Load Image')
+        .getByTestId(TestIds.node.mainImage)
+      const originalSrc = await imagePreview.getAttribute('src')
+
+      // Write a test image into the browser clipboard
+      await comfyPage.page.evaluate(async () => {
+        const resp = await fetch('/api/view?filename=example.png&type=input')
+        const blob = await resp.blob()
+        await navigator.clipboard.write([
+          new ClipboardItem({ [blob.type]: blob })
+        ])
+      })
+
+      // Right-click and select Paste Image
+      await openContextMenu(comfyPage, 'Load Image')
+      await clickExactMenuItem(comfyPage, 'Paste Image')
+
+      // Verify the image preview src changed
+      await expect(imagePreview).not.toHaveAttribute('src', originalSrc!)
+    })
+
+    test('should open image in new tab via context menu', async ({
+      comfyPage
+    }) => {
+      await openContextMenu(comfyPage, 'Load Image')
+
+      const popupPromise = comfyPage.page.waitForEvent('popup')
+      await clickExactMenuItem(comfyPage, 'Open Image')
+      const popup = await popupPromise
+
+      expect(popup.url()).toContain('/api/view')
+      expect(popup.url()).toContain('filename=')
+      await popup.close()
+    })
+
+    test('should download image via Save Image context menu', async ({
+      comfyPage
+    }) => {
+      await openContextMenu(comfyPage, 'Load Image')
+
+      const downloadPromise = comfyPage.page.waitForEvent('download')
+      await clickExactMenuItem(comfyPage, 'Save Image')
+      const download = await downloadPromise
+
+      expect(download.suggestedFilename()).toBeTruthy()
+    })
+  })
+
+  test.describe('Subgraph Actions', () => {
+    test('should convert to subgraph and unpack back', async ({
+      comfyPage
+    }) => {
+      // Convert KSampler to subgraph
+      await openContextMenu(comfyPage, 'KSampler')
+      await clickExactMenuItem(comfyPage, 'Convert to Subgraph')
+
+      const subgraphNode = comfyPage.vueNodes.getNodeByTitle('New Subgraph')
+      await expect(subgraphNode).toBeVisible()
+      await expect(comfyPage.vueNodes.getNodeByTitle('KSampler')).toBeHidden()
+
+      // Unpack the subgraph
+      await openContextMenu(comfyPage, 'New Subgraph')
+      await clickExactMenuItem(comfyPage, 'Unpack Subgraph')
+
+      await expect(comfyPage.vueNodes.getNodeByTitle('KSampler')).toBeVisible()
+      await expect(
+        comfyPage.vueNodes.getNodeByTitle('New Subgraph')
+      ).toBeHidden()
+    })
+
+    test('should open properties panel via Edit Subgraph Widgets', async ({
+      comfyPage
+    }) => {
+      // Convert to subgraph first
+      await openContextMenu(comfyPage, 'Empty Latent Image')
+      await clickExactMenuItem(comfyPage, 'Convert to Subgraph')
+      await expect(
+        comfyPage.vueNodes.getNodeByTitle('New Subgraph')
+      ).toBeVisible()
+
+      // Right-click subgraph and edit widgets
+      await openContextMenu(comfyPage, 'New Subgraph')
+      await clickExactMenuItem(comfyPage, 'Edit Subgraph Widgets')
+
+      await expect(comfyPage.page.getByTestId('properties-panel')).toBeVisible()
+    })
+
+    test('should add subgraph to library and find in node library', async ({
+      comfyPage
+    }) => {
+      // Convert to subgraph first
+      await openContextMenu(comfyPage, 'KSampler')
+      await clickExactMenuItem(comfyPage, 'Convert to Subgraph')
+      await expect(
+        comfyPage.vueNodes.getNodeByTitle('New Subgraph')
+      ).toBeVisible()
+
+      // Add to library
+      await openContextMenu(comfyPage, 'New Subgraph')
+      await clickExactMenuItem(comfyPage, 'Add Subgraph to Library')
+
+      // Fill the blueprint name
+      await comfyPage.nodeOps.promptDialogInput.waitFor({ state: 'visible' })
+      await comfyPage.nodeOps.fillPromptDialog('TestBlueprint')
+
+      // Open node library sidebar and search for the blueprint
+      await comfyPage.menu.nodeLibraryTab.tabButton.click()
+      const searchBox = comfyPage.page.getByRole('combobox', {
+        name: 'Search'
+      })
+      await searchBox.waitFor({ state: 'visible' })
+      await searchBox.fill('TestBlueprint')
+
+      await expect(comfyPage.page.getByText('TestBlueprint')).toBeVisible()
+    })
+  })
+
+  test.describe('Multi-Node Actions', () => {
+    const nodeTitles = ['Load Checkpoint', 'KSampler']
+
+    test('should batch rename selected nodes via context menu', async ({
+      comfyPage
+    }) => {
+      await openMultiNodeContextMenu(comfyPage, nodeTitles)
+      await clickExactMenuItem(comfyPage, 'Rename')
+
+      await comfyPage.nodeOps.promptDialogInput.waitFor({ state: 'visible' })
+      await comfyPage.nodeOps.fillPromptDialog('MyNode')
+
+      await expect(comfyPage.vueNodes.getNodeByTitle('MyNode 1')).toBeVisible()
+      await expect(comfyPage.vueNodes.getNodeByTitle('MyNode 2')).toBeVisible()
+    })
+
+    test('should copy and paste selected nodes via context menu', async ({
+      comfyPage
+    }) => {
+      const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
+
+      await openMultiNodeContextMenu(comfyPage, nodeTitles)
+      await clickExactMenuItem(comfyPage, 'Copy')
+
+      await comfyPage.page.evaluate(() => {
+        window.app!.canvas.pasteFromClipboard({ connectInputs: false })
+      })
+      await comfyPage.nextFrame()
+
+      await expect
+        .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+        .toBe(initialCount + nodeTitles.length)
+    })
+
+    test('should duplicate selected nodes via context menu', async ({
+      comfyPage
+    }) => {
+      const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
+
+      await openMultiNodeContextMenu(comfyPage, nodeTitles)
+      await clickExactMenuItem(comfyPage, 'Duplicate')
+
+      await expect
+        .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+        .toBe(initialCount + nodeTitles.length)
+    })
+
+    test('should pin and unpin selected nodes via context menu', async ({
+      comfyPage
+    }) => {
+      await openMultiNodeContextMenu(comfyPage, nodeTitles)
+      await clickExactMenuItem(comfyPage, 'Pin')
+
+      for (const title of nodeTitles) {
+        const fixture = await comfyPage.vueNodes.getFixtureByTitle(title)
+        await expect(fixture.pinIndicator).toBeVisible()
+      }
+
+      await openMultiNodeContextMenu(comfyPage, nodeTitles)
+      await clickExactMenuItem(comfyPage, 'Unpin')
+
+      for (const title of nodeTitles) {
+        const fixture = await comfyPage.vueNodes.getFixtureByTitle(title)
+        await expect(fixture.pinIndicator).toBeHidden()
+      }
+    })
+
+    test('should bypass and remove bypass on selected nodes via context menu', async ({
+      comfyPage
+    }) => {
+      await openMultiNodeContextMenu(comfyPage, nodeTitles)
+      await clickExactMenuItem(comfyPage, 'Bypass')
+
+      for (const title of nodeTitles) {
+        const nodeRef = await getNodeRef(comfyPage, title)
+        await expect.poll(() => nodeRef.isBypassed()).toBe(true)
+        await expect(getNodeWrapper(comfyPage, title)).toHaveClass(BYPASS_CLASS)
+      }
+
+      await openMultiNodeContextMenu(comfyPage, nodeTitles)
+      await clickExactMenuItem(comfyPage, 'Remove Bypass')
+
+      for (const title of nodeTitles) {
+        const nodeRef = await getNodeRef(comfyPage, title)
+        await expect.poll(() => nodeRef.isBypassed()).toBe(false)
+        await expect(getNodeWrapper(comfyPage, title)).not.toHaveClass(
+          BYPASS_CLASS
+        )
+      }
+    })
+
+    test('should minimize and expand selected nodes via context menu', async ({
+      comfyPage
+    }) => {
+      const fixture1 =
+        await comfyPage.vueNodes.getFixtureByTitle('Load Checkpoint')
+      const fixture2 = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+
+      await expect(fixture1.body).toBeVisible()
+      await expect(fixture2.body).toBeVisible()
+
+      await openMultiNodeContextMenu(comfyPage, nodeTitles)
+      await clickExactMenuItem(comfyPage, 'Minimize Node')
+
+      await expect(fixture1.body).toBeHidden()
+      await expect(fixture2.body).toBeHidden()
+
+      await openMultiNodeContextMenu(comfyPage, nodeTitles)
+      await clickExactMenuItem(comfyPage, 'Expand Node')
+
+      await expect(fixture1.body).toBeVisible()
+      await expect(fixture2.body).toBeVisible()
+    })
+
+    test('should frame selected nodes via context menu', async ({
+      comfyPage
+    }) => {
+      const initialGroupCount = await comfyPage.page.evaluate(
+        () => window.app!.graph.groups.length
+      )
+
+      await openMultiNodeContextMenu(comfyPage, nodeTitles)
+      await clickExactMenuItem(comfyPage, 'Frame Nodes')
+
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(() => window.app!.graph.groups.length)
+        )
+        .toBe(initialGroupCount + 1)
+    })
+
+    test('should convert to group node via context menu', async ({
+      comfyPage
+    }) => {
+      await openMultiNodeContextMenu(comfyPage, nodeTitles)
+      await clickExactMenuItem(comfyPage, 'Convert to Group Node')
+
+      await comfyPage.nodeOps.promptDialogInput.waitFor({ state: 'visible' })
+      await comfyPage.nodeOps.fillPromptDialog('TestGroupNode')
+
+      await expect
+        .poll(async () => {
+          const groupNodes = await comfyPage.nodeOps.getNodeRefsByType(
+            'workflow>TestGroupNode'
+          )
+          return groupNodes.length
+        })
+        .toBe(1)
+    })
+
+    test('should convert selected nodes to subgraph via context menu', async ({
+      comfyPage
+    }) => {
+      const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
+
+      await openMultiNodeContextMenu(comfyPage, nodeTitles)
+      await clickExactMenuItem(comfyPage, 'Convert to Subgraph')
+
+      const subgraphNode = comfyPage.vueNodes.getNodeByTitle('New Subgraph')
+      await expect(subgraphNode).toBeVisible()
+
+      await expect
+        .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+        .toBe(initialCount - nodeTitles.length + 1)
+    })
+  })
+})
diff --git a/browser_tests/tests/vueNodes/interactions/node/imagePreview.spec.ts b/browser_tests/tests/vueNodes/interactions/node/imagePreview.spec.ts
index 4eeee0e7c2..1a47881014 100644
--- a/browser_tests/tests/vueNodes/interactions/node/imagePreview.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/node/imagePreview.spec.ts
@@ -1,20 +1,15 @@
 import { expect } from '@playwright/test'
 
-import type { ComfyPage } from '../../../../fixtures/ComfyPage'
-import { comfyPageFixture as test } from '../../../../fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 import {
   getPromotedWidgetNames,
   getPromotedWidgetCountByName
-} from '../../../../helpers/promotedWidgets'
-
-test.describe('Vue Nodes Image Preview', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-  })
+} from '@e2e/helpers/promotedWidgets'
 
+test.describe('Vue Nodes Image Preview', { tag: '@vue-nodes' }, () => {
   async function loadImageOnNode(comfyPage: ComfyPage) {
     await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
-    await comfyPage.vueNodes.waitForNodes()
 
     const loadImageNode = (
       await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
@@ -25,37 +20,37 @@ test.describe('Vue Nodes Image Preview', () => {
       dropPosition: { x, y }
     })
 
-    const imagePreview = comfyPage.page.locator('.image-preview')
+    const nodeId = String(loadImageNode.id)
+    const imagePreview = comfyPage.vueNodes
+      .getNodeLocator(nodeId)
+      .locator('.image-preview')
+
     await expect(imagePreview).toBeVisible()
-    await expect(imagePreview.locator('img')).toBeVisible()
+    await expect(imagePreview.locator('img')).toBeVisible({ timeout: 30_000 })
     await expect(imagePreview).toContainText('x')
 
     return {
       imagePreview,
-      nodeId: String(loadImageNode.id)
+      nodeId
     }
   }
 
-  // TODO(#8143): Re-enable after image preview sync is working in CI
-  test.fixme('opens mask editor from image preview button', async ({
-    comfyPage
-  }) => {
+  test('opens mask editor from image preview button', async ({ comfyPage }) => {
     const { imagePreview } = await loadImageOnNode(comfyPage)
 
-    await imagePreview.locator('[role="img"]').focus()
+    await imagePreview.getByRole('region').hover()
     await comfyPage.page.getByLabel('Edit or mask image').click()
 
     await expect(comfyPage.page.locator('.mask-editor-dialog')).toBeVisible()
   })
 
-  // TODO(#8143): Re-enable after image preview sync is working in CI
-  test.fixme('shows image context menu options', async ({ comfyPage }) => {
+  test('shows image context menu options', async ({ comfyPage }) => {
     const { nodeId } = await loadImageOnNode(comfyPage)
 
+    await comfyPage.vueNodes.selectNode(nodeId)
     const nodeHeader = comfyPage.vueNodes
       .getNodeLocator(nodeId)
       .locator('.lg-node-header')
-    await nodeHeader.click()
     await nodeHeader.click({ button: 'right' })
 
     const contextMenu = comfyPage.page.locator('.p-contextmenu')
@@ -73,7 +68,6 @@ test.describe('Vue Nodes Image Preview', () => {
       await comfyPage.workflow.loadWorkflow(
         'subgraphs/subgraph-with-multiple-promoted-previews'
       )
-      await comfyPage.vueNodes.waitForNodes()
 
       const firstSubgraphNode = comfyPage.vueNodes.getNodeLocator('7')
       const secondSubgraphNode = comfyPage.vueNodes.getNodeLocator('8')
@@ -81,28 +75,23 @@ test.describe('Vue Nodes Image Preview', () => {
       await expect(firstSubgraphNode).toBeVisible()
       await expect(secondSubgraphNode).toBeVisible()
 
-      const firstPromotedWidgets = await getPromotedWidgetNames(comfyPage, '7')
-      const secondPromotedWidgets = await getPromotedWidgetNames(comfyPage, '8')
-      expect(firstPromotedWidgets).toEqual([
-        '$$canvas-image-preview',
-        '$$canvas-image-preview'
-      ])
-      expect(secondPromotedWidgets).toEqual(['$$canvas-image-preview'])
+      await expect
+        .poll(() => getPromotedWidgetNames(comfyPage, '7'))
+        .toEqual(['$$canvas-image-preview', '$$canvas-image-preview'])
+      await expect
+        .poll(() => getPromotedWidgetNames(comfyPage, '8'))
+        .toEqual(['$$canvas-image-preview'])
 
-      expect(
-        await getPromotedWidgetCountByName(
-          comfyPage,
-          '7',
-          '$$canvas-image-preview'
+      await expect
+        .poll(() =>
+          getPromotedWidgetCountByName(comfyPage, '7', '$$canvas-image-preview')
         )
-      ).toBe(2)
-      expect(
-        await getPromotedWidgetCountByName(
-          comfyPage,
-          '8',
-          '$$canvas-image-preview'
+        .toBe(2)
+      await expect
+        .poll(() =>
+          getPromotedWidgetCountByName(comfyPage, '8', '$$canvas-image-preview')
         )
-      ).toBe(1)
+        .toBe(1)
 
       await expect(
         firstSubgraphNode.locator('.lg-node-widgets')
diff --git a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts
index dc2521c9af..53642662f5 100644
--- a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts
@@ -1,27 +1,27 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../../../../fixtures/ComfyPage'
-import type { ComfyPage } from '../../../../fixtures/ComfyPage'
-import type { Position } from '../../../../fixtures/types'
+} from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import type { Position } from '@e2e/fixtures/types'
 
-test.describe('Vue Node Moving', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
-  const getLoadCheckpointHeaderPos = async (comfyPage: ComfyPage) => {
-    const loadCheckpointHeaderPos = await comfyPage.page
-      .getByText('Load Checkpoint')
+test.describe('Vue Node Moving', { tag: '@vue-nodes' }, () => {
+  const getHeaderPos = async (
+    comfyPage: ComfyPage,
+    title: string
+  ): Promise<{ x: number; y: number; width: number; height: number }> => {
+    const box = await comfyPage.vueNodes
+      .getNodeByTitle(title)
+      .getByTestId('node-title')
+      .first()
       .boundingBox()
-
-    if (!loadCheckpointHeaderPos)
-      throw new Error('Load Checkpoint header not found')
-
-    return loadCheckpointHeaderPos
+    if (!box) throw new Error(`${title} header not found`)
+    return box
   }
 
+  const getLoadCheckpointHeaderPos = async (comfyPage: ComfyPage) =>
+    getHeaderPos(comfyPage, 'Load Checkpoint')
+
   const expectPosChanged = async (pos1: Position, pos2: Position) => {
     const diffX = Math.abs(pos2.x - pos1.x)
     const diffY = Math.abs(pos2.y - pos1.y)
@@ -29,23 +29,26 @@ test.describe('Vue Node Moving', () => {
     expect(diffY).toBeGreaterThan(0)
   }
 
-  test(
-    'should allow moving nodes by dragging',
-    { tag: '@screenshot' },
-    async ({ comfyPage }) => {
-      const loadCheckpointHeaderPos =
-        await getLoadCheckpointHeaderPos(comfyPage)
-      await comfyPage.canvasOps.dragAndDrop(loadCheckpointHeaderPos, {
-        x: 256,
-        y: 256
-      })
+  const deltaBetween = (before: Position, after: Position) => ({
+    x: after.x - before.x,
+    y: after.y - before.y
+  })
 
-      const newHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
-      await expectPosChanged(loadCheckpointHeaderPos, newHeaderPos)
+  const expectSameDelta = (a: Position, b: Position, tol = 2) => {
+    expect(Math.abs(a.x - b.x)).toBeLessThanOrEqual(tol)
+    expect(Math.abs(a.y - b.y)).toBeLessThanOrEqual(tol)
+  }
 
-      await expect(comfyPage.canvas).toHaveScreenshot('vue-node-moved-node.png')
-    }
-  )
+  test('should allow moving nodes by dragging', async ({ comfyPage }) => {
+    const loadCheckpointHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
+    await comfyPage.canvasOps.dragAndDrop(loadCheckpointHeaderPos, {
+      x: 256,
+      y: 256
+    })
+
+    const newHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
+    await expectPosChanged(loadCheckpointHeaderPos, newHeaderPos)
+  })
 
   test('should not move node when pointer moves less than drag threshold', async ({
     comfyPage
@@ -66,7 +69,7 @@ test.describe('Vue Node Moving', () => {
     expect(afterPos.y).toBeCloseTo(headerPos.y, 0)
 
     // The small movement should have selected the node, not dragged it
-    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(1)
+    await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(1)
   })
 
   test('should move node when pointer moves beyond drag threshold', async ({
@@ -87,6 +90,73 @@ test.describe('Vue Node Moving', () => {
     await expectPosChanged(headerPos, afterPos)
   })
 
+  test('should move all selected nodes together when dragging one with Meta held', async ({
+    comfyPage
+  }) => {
+    const checkpointBefore = await getHeaderPos(comfyPage, 'Load Checkpoint')
+    const ksamplerBefore = await getHeaderPos(comfyPage, 'KSampler')
+    const latentBefore = await getHeaderPos(comfyPage, 'Empty Latent Image')
+
+    const dx = 120
+    const dy = 80
+
+    const clickNodeTitleWithMeta = async (title: string) => {
+      await comfyPage.vueNodes
+        .getNodeByTitle(title)
+        .getByTestId('node-title')
+        .first()
+        .click({ modifiers: ['Meta'] })
+    }
+
+    await comfyPage.page.keyboard.down('Meta')
+    try {
+      await clickNodeTitleWithMeta('Load Checkpoint')
+      await clickNodeTitleWithMeta('KSampler')
+      await clickNodeTitleWithMeta('Empty Latent Image')
+      await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(3)
+
+      // Re-fetch drag source after clicks in case the header reflowed.
+      const dragSrc = await getHeaderPos(comfyPage, 'Load Checkpoint')
+      const centerX = dragSrc.x + dragSrc.width / 2
+      const centerY = dragSrc.y + dragSrc.height / 2
+
+      await comfyPage.page.mouse.move(centerX, centerY)
+      await comfyPage.page.mouse.down()
+      await comfyPage.nextFrame()
+      await comfyPage.page.mouse.move(centerX + dx, centerY + dy, {
+        steps: 20
+      })
+      await comfyPage.page.mouse.up()
+      await comfyPage.nextFrame()
+    } finally {
+      await comfyPage.page.keyboard.up('Meta')
+      await comfyPage.nextFrame()
+    }
+
+    await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(3)
+
+    const checkpointAfter = await getHeaderPos(comfyPage, 'Load Checkpoint')
+    const ksamplerAfter = await getHeaderPos(comfyPage, 'KSampler')
+    const latentAfter = await getHeaderPos(comfyPage, 'Empty Latent Image')
+
+    // All three nodes should have moved together by the same delta.
+    // We don't assert the exact screen delta equals the dragged pixel delta,
+    // because canvas scaling and snap-to-grid can introduce offsets.
+    const checkpointDelta = deltaBetween(checkpointBefore, checkpointAfter)
+    const ksamplerDelta = deltaBetween(ksamplerBefore, ksamplerAfter)
+    const latentDelta = deltaBetween(latentBefore, latentAfter)
+
+    // Confirm an actual drag happened (not zero movement).
+    expect(Math.abs(checkpointDelta.x)).toBeGreaterThan(10)
+    expect(Math.abs(checkpointDelta.y)).toBeGreaterThan(10)
+
+    // Confirm all selected nodes moved by the same delta.
+    expectSameDelta(checkpointDelta, ksamplerDelta)
+    expectSameDelta(checkpointDelta, latentDelta)
+
+    await comfyPage.canvasOps.moveMouseToEmptyArea()
+  })
+
   test(
     '@mobile should allow moving nodes by dragging on touch devices',
     { tag: '@screenshot' },
diff --git a/browser_tests/tests/vueNodes/interactions/node/remove.spec.ts b/browser_tests/tests/vueNodes/interactions/node/remove.spec.ts
index 342b3fb2d6..486317ced6 100644
--- a/browser_tests/tests/vueNodes/interactions/node/remove.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/node/remove.spec.ts
@@ -1,145 +1,139 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../../../../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
-test.beforeEach(async ({ comfyPage }) => {
-  await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
-})
+test.describe(
+  'Vue Nodes - Delete Key Interaction',
+  { tag: '@vue-nodes' },
+  () => {
+    test('Can select all and delete Vue nodes with Delete key', async ({
+      comfyPage
+    }) => {
+      // Get initial Vue node count
+      await expect
+        .poll(() => comfyPage.vueNodes.getNodeCount())
+        .toBeGreaterThan(0)
+      const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
 
-test.describe('Vue Nodes - Delete Key Interaction', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    // Enable Vue nodes rendering
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', false)
-    await comfyPage.setup()
-  })
+      // Select all Vue nodes
+      await comfyPage.keyboard.selectAll()
 
-  test('Can select all and delete Vue nodes with Delete key', async ({
-    comfyPage
-  }) => {
-    await comfyPage.vueNodes.waitForNodes()
+      // Verify all Vue nodes are selected
+      await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(
+        initialNodeCount
+      )
 
-    // Get initial Vue node count
-    const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
-    expect(initialNodeCount).toBeGreaterThan(0)
+      // Delete with Delete key
+      await comfyPage.vueNodes.deleteSelected()
 
-    // Select all Vue nodes
-    await comfyPage.keyboard.selectAll()
+      // Verify all Vue nodes were deleted
+      await expect.poll(() => comfyPage.vueNodes.getNodeCount()).toBe(0)
+    })
 
-    // Verify all Vue nodes are selected
-    const selectedCount = await comfyPage.vueNodes.getSelectedNodeCount()
-    expect(selectedCount).toBe(initialNodeCount)
+    test('Can select specific Vue node and delete it', async ({
+      comfyPage
+    }) => {
+      // Get initial Vue node count
+      await expect
+        .poll(() => comfyPage.vueNodes.getNodeCount())
+        .toBeGreaterThan(0)
+      const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
 
-    // Delete with Delete key
-    await comfyPage.vueNodes.deleteSelected()
+      // Get first Vue node ID and select it
+      const nodeIds = await comfyPage.vueNodes.getNodeIds()
+      await comfyPage.vueNodes.selectNode(nodeIds[0])
 
-    // Verify all Vue nodes were deleted
-    const finalNodeCount = await comfyPage.vueNodes.getNodeCount()
-    expect(finalNodeCount).toBe(0)
-  })
+      // Verify selection
+      await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(1)
 
-  test('Can select specific Vue node and delete it', async ({ comfyPage }) => {
-    await comfyPage.vueNodes.waitForNodes()
+      // Delete with Delete key
+      await comfyPage.vueNodes.deleteSelected()
 
-    // Get initial Vue node count
-    const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
-    expect(initialNodeCount).toBeGreaterThan(0)
+      // Verify one Vue node was deleted
+      await expect
+        .poll(() => comfyPage.vueNodes.getNodeCount())
+        .toBe(initialNodeCount - 1)
+    })
 
-    // Get first Vue node ID and select it
-    const nodeIds = await comfyPage.vueNodes.getNodeIds()
-    await comfyPage.vueNodes.selectNode(nodeIds[0])
+    test('Can select and delete Vue node with Backspace key', async ({
+      comfyPage
+    }) => {
+      const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
 
-    // Verify selection
-    const selectedCount = await comfyPage.vueNodes.getSelectedNodeCount()
-    expect(selectedCount).toBe(1)
+      // Select first Vue node
+      const nodeIds = await comfyPage.vueNodes.getNodeIds()
+      await comfyPage.vueNodes.selectNode(nodeIds[0])
 
-    // Delete with Delete key
-    await comfyPage.vueNodes.deleteSelected()
+      // Delete with Backspace key instead of Delete
+      await comfyPage.vueNodes.deleteSelectedWithBackspace()
 
-    // Verify one Vue node was deleted
-    const finalNodeCount = await comfyPage.vueNodes.getNodeCount()
-    expect(finalNodeCount).toBe(initialNodeCount - 1)
-  })
+      // Verify Vue node was deleted
+      await expect
+        .poll(() => comfyPage.vueNodes.getNodeCount())
+        .toBe(initialNodeCount - 1)
+    })
 
-  test('Can select and delete Vue node with Backspace key', async ({
-    comfyPage
-  }) => {
-    await comfyPage.vueNodes.waitForNodes()
+    test('Delete key does not delete node when typing in Vue node widgets', async ({
+      comfyPage
+    }) => {
+      const initialNodeCount = await comfyPage.nodeOps.getGraphNodesCount()
 
-    const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
+      // Find a text input widget in a Vue node
+      const textWidget = comfyPage.page
+        .locator('input[type="text"], textarea')
+        .first()
 
-    // Select first Vue node
-    const nodeIds = await comfyPage.vueNodes.getNodeIds()
-    await comfyPage.vueNodes.selectNode(nodeIds[0])
+      // Click on text widget to focus it
+      await textWidget.click()
+      await textWidget.fill('test text')
 
-    // Delete with Backspace key instead of Delete
-    await comfyPage.vueNodes.deleteSelectedWithBackspace()
+      // Press Delete while focused on widget - should delete text, not node
+      await textWidget.press('Delete')
 
-    // Verify Vue node was deleted
-    const finalNodeCount = await comfyPage.vueNodes.getNodeCount()
-    expect(finalNodeCount).toBe(initialNodeCount - 1)
-  })
+      // Node count should remain the same
+      await expect
+        .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+        .toBe(initialNodeCount)
+    })
 
-  test('Delete key does not delete node when typing in Vue node widgets', async ({
-    comfyPage
-  }) => {
-    const initialNodeCount = await comfyPage.nodeOps.getGraphNodesCount()
+    test('Delete key does not delete node when nothing is selected', async ({
+      comfyPage
+    }) => {
+      // Ensure no Vue nodes are selected
+      await comfyPage.vueNodes.clearSelection()
+      await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(0)
 
-    // Find a text input widget in a Vue node
-    const textWidget = comfyPage.page
-      .locator('input[type="text"], textarea')
-      .first()
+      // Press Delete key - should not crash and should handle gracefully
+      await comfyPage.page.keyboard.press('Delete')
 
-    // Click on text widget to focus it
-    await textWidget.click()
-    await textWidget.fill('test text')
+      // Vue node count should remain the same
+      await expect
+        .poll(() => comfyPage.vueNodes.getNodeCount())
+        .toBeGreaterThan(0)
+    })
 
-    // Press Delete while focused on widget - should delete text, not node
-    await textWidget.press('Delete')
+    test('Can multi-select with Ctrl+click and delete multiple Vue nodes', async ({
+      comfyPage
+    }) => {
+      const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
 
-    // Node count should remain the same
-    const finalNodeCount = await comfyPage.nodeOps.getGraphNodesCount()
-    expect(finalNodeCount).toBe(initialNodeCount)
-  })
+      // Multi-select first two Vue nodes using Ctrl+click
+      const nodeIds = await comfyPage.vueNodes.getNodeIds()
+      const nodesToSelect = nodeIds.slice(0, 2)
+      await comfyPage.vueNodes.selectNodes(nodesToSelect)
 
-  test('Delete key does not delete node when nothing is selected', async ({
-    comfyPage
-  }) => {
-    await comfyPage.vueNodes.waitForNodes()
+      // Verify expected nodes are selected
+      await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(
+        nodesToSelect.length
+      )
 
-    // Ensure no Vue nodes are selected
-    await comfyPage.vueNodes.clearSelection()
-    const selectedCount = await comfyPage.vueNodes.getSelectedNodeCount()
-    expect(selectedCount).toBe(0)
+      // Delete selected Vue nodes
+      await comfyPage.vueNodes.deleteSelected()
 
-    // Press Delete key - should not crash and should handle gracefully
-    await comfyPage.page.keyboard.press('Delete')
-
-    // Vue node count should remain the same
-    const nodeCount = await comfyPage.vueNodes.getNodeCount()
-    expect(nodeCount).toBeGreaterThan(0)
-  })
-
-  test('Can multi-select with Ctrl+click and delete multiple Vue nodes', async ({
-    comfyPage
-  }) => {
-    await comfyPage.vueNodes.waitForNodes()
-    const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
-
-    // Multi-select first two Vue nodes using Ctrl+click
-    const nodeIds = await comfyPage.vueNodes.getNodeIds()
-    const nodesToSelect = nodeIds.slice(0, 2)
-    await comfyPage.vueNodes.selectNodes(nodesToSelect)
-
-    // Verify expected nodes are selected
-    const selectedCount = await comfyPage.vueNodes.getSelectedNodeCount()
-    expect(selectedCount).toBe(nodesToSelect.length)
-
-    // Delete selected Vue nodes
-    await comfyPage.vueNodes.deleteSelected()
-
-    // Verify expected nodes were deleted
-    const finalNodeCount = await comfyPage.vueNodes.getNodeCount()
-    expect(finalNodeCount).toBe(initialNodeCount - nodesToSelect.length)
-  })
-})
+      // Verify expected nodes were deleted
+      await expect
+        .poll(() => comfyPage.vueNodes.getNodeCount())
+        .toBe(initialNodeCount - nodesToSelect.length)
+    })
+  }
+)
diff --git a/browser_tests/tests/vueNodes/interactions/node/rename.spec.ts b/browser_tests/tests/vueNodes/interactions/node/rename.spec.ts
index 942b642b2d..4e1b39e5c7 100644
--- a/browser_tests/tests/vueNodes/interactions/node/rename.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/node/rename.spec.ts
@@ -1,17 +1,10 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../../../../fixtures/ComfyPage'
-import { TestIds } from '../../../../fixtures/selectors'
-
-test.describe('Vue Nodes Renaming', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', false)
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.setup()
-    await comfyPage.vueNodes.waitForNodes()
-  })
+} from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
 
+test.describe('Vue Nodes Renaming', { tag: '@vue-nodes' }, () => {
   test('should display node title', async ({ comfyPage }) => {
     const vueNode = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
     await expect(vueNode.header).toContainText('KSampler')
@@ -23,7 +16,7 @@ test.describe('Vue Nodes Renaming', () => {
     const vueNode = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
     // Test renaming with Enter
     await vueNode.setTitle('My Custom Sampler')
-    await expect(await vueNode.getTitle()).toBe('My Custom Sampler')
+    await expect(vueNode.title).toHaveText('My Custom Sampler')
     await expect(vueNode.header).toContainText('My Custom Sampler')
 
     // Test cancel with Escape
@@ -34,7 +27,7 @@ test.describe('Vue Nodes Renaming', () => {
     await comfyPage.nextFrame()
 
     // Title should remain as the previously saved value
-    await expect(await vueNode.getTitle()).toBe('My Custom Sampler')
+    await expect(vueNode.title).toHaveText('My Custom Sampler')
   })
 
   test('Double click node body does not trigger edit', async ({
@@ -50,6 +43,6 @@ test.describe('Vue Nodes Renaming', () => {
     const editingTitleInput = comfyPage.page.getByTestId(
       TestIds.node.titleInput
     )
-    await expect(editingTitleInput).not.toBeVisible()
+    await expect(editingTitleInput).toBeHidden()
   })
 })
diff --git a/browser_tests/tests/vueNodes/interactions/node/resize.spec.ts b/browser_tests/tests/vueNodes/interactions/node/resize.spec.ts
index fc61081955..8be03761ba 100644
--- a/browser_tests/tests/vueNodes/interactions/node/resize.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/node/resize.spec.ts
@@ -1,14 +1,9 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../../../../fixtures/ComfyPage'
-
-test.describe('Vue Node Resizing', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.vueNodes.waitForNodes()
-  })
+} from '@e2e/fixtures/ComfyPage'
 
+test.describe('Vue Node Resizing', { tag: '@vue-nodes' }, () => {
   test('should resize node without position drift after selecting', async ({
     comfyPage
   }) => {
@@ -26,8 +21,12 @@ test.describe('Vue Node Resizing', () => {
       throw new Error('Node bounding box not found after select')
 
     // Verify position unchanged after selection
-    expect(selectedBox.x).toBeCloseTo(initialBox.x, 1)
-    expect(selectedBox.y).toBeCloseTo(initialBox.y, 1)
+    await expect
+      .poll(async () => (await node.boundingBox())?.x)
+      .toBeCloseTo(initialBox.x, 1)
+    await expect
+      .poll(async () => (await node.boundingBox())?.y)
+      .toBeCloseTo(initialBox.y, 1)
 
     // Now resize from bottom-right corner
     const resizeStartX = selectedBox.x + selectedBox.width - 5
@@ -38,16 +37,20 @@ test.describe('Vue Node Resizing', () => {
     await comfyPage.page.mouse.move(resizeStartX + 50, resizeStartY + 30)
     await comfyPage.page.mouse.up()
 
-    // Get final position and size
-    const finalBox = await node.boundingBox()
-    if (!finalBox) throw new Error('Node bounding box not found after resize')
-
     // Position should NOT have changed (the bug was position drift)
-    expect(finalBox.x).toBeCloseTo(initialBox.x, 1)
-    expect(finalBox.y).toBeCloseTo(initialBox.y, 1)
+    await expect
+      .poll(async () => (await node.boundingBox())?.x)
+      .toBeCloseTo(initialBox.x, 1)
+    await expect
+      .poll(async () => (await node.boundingBox())?.y)
+      .toBeCloseTo(initialBox.y, 1)
 
     // Size should have increased
-    expect(finalBox.width).toBeGreaterThan(initialBox.width)
-    expect(finalBox.height).toBeGreaterThan(initialBox.height)
+    await expect
+      .poll(async () => (await node.boundingBox())?.width)
+      .toBeGreaterThan(initialBox.width)
+    await expect
+      .poll(async () => (await node.boundingBox())?.height)
+      .toBeGreaterThan(initialBox.height)
   })
 })
diff --git a/browser_tests/tests/vueNodes/interactions/node/select.spec.ts b/browser_tests/tests/vueNodes/interactions/node/select.spec.ts
index 4541072e14..3917aee535 100644
--- a/browser_tests/tests/vueNodes/interactions/node/select.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/node/select.spec.ts
@@ -1,18 +1,13 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../../../../fixtures/ComfyPage'
+} from '@e2e/fixtures/ComfyPage'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
 })
 
-test.describe('Vue Node Selection', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
+test.describe('Vue Node Selection', { tag: '@vue-nodes' }, () => {
   const modifiers = [
     { key: 'Control', name: 'ctrl' },
     { key: 'Shift', name: 'shift' },
@@ -24,40 +19,41 @@ test.describe('Vue Node Selection', () => {
       comfyPage
     }) => {
       await comfyPage.page.getByText('Load Checkpoint').click()
-      expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(1)
+      await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(1)
 
       await comfyPage.page.getByText('Empty Latent Image').click({
         modifiers: [modifier]
       })
-      expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(2)
+      await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(2)
 
       await comfyPage.page.getByText('KSampler').click({
         modifiers: [modifier]
       })
-      expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(3)
+      await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(3)
     })
 
     test(`should allow de-selecting nodes with ${name}+click`, async ({
       comfyPage
     }) => {
       await comfyPage.page.getByText('Load Checkpoint').click()
-      expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(1)
+      await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(1)
 
       await comfyPage.page.getByText('Load Checkpoint').click({
         modifiers: [modifier]
       })
-      expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(0)
+      await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(0)
     })
   }
 
   test('should select all nodes with ctrl+a', async ({ comfyPage }) => {
+    await expect
+      .poll(() => comfyPage.vueNodes.getNodeCount())
+      .toBeGreaterThan(0)
     const initialCount = await comfyPage.vueNodes.getNodeCount()
-    expect(initialCount).toBeGreaterThan(0)
 
     await comfyPage.canvas.press('Control+a')
 
-    const selectedCount = await comfyPage.vueNodes.getSelectedNodeCount()
-    expect(selectedCount).toBe(initialCount)
+    await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(initialCount)
   })
 
   test('should select pinned node without dragging', async ({ comfyPage }) => {
@@ -73,7 +69,7 @@ test.describe('Vue Node Selection', () => {
     const pinIndicator = checkpointNode.locator(PIN_INDICATOR)
     await expect(pinIndicator).toBeVisible()
 
-    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(1)
+    await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(1)
 
     const initialPos = await checkpointNodeHeader.boundingBox()
     if (!initialPos) throw new Error('Failed to get header position')
@@ -83,10 +79,10 @@ test.describe('Vue Node Selection', () => {
       { x: initialPos.x + 100, y: initialPos.y + 100 }
     )
 
-    const finalPos = await checkpointNodeHeader.boundingBox()
-    if (!finalPos) throw new Error('Failed to get header position after drag')
-    expect(finalPos).toEqual(initialPos)
+    await expect
+      .poll(async () => await checkpointNodeHeader.boundingBox())
+      .toEqual(initialPos)
 
-    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(1)
+    await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(1)
   })
 })
diff --git a/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts b/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts
index c92d297a17..ddf4459794 100644
--- a/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts
+++ b/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts
@@ -1,18 +1,15 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../../../fixtures/ComfyPage'
+} from '@e2e/fixtures/ComfyPage'
 
 const BYPASS_HOTKEY = 'Control+b'
 const BYPASS_CLASS = /before:bg-bypass\/60/
 
-test.describe('Vue Node Bypass', () => {
+test.describe('Vue Node Bypass', { tag: '@vue-nodes' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting('Comfy.Minimap.Visible', false)
     await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', true)
-    await comfyPage.vueNodes.waitForNodes()
   })
 
   test(
@@ -27,8 +24,8 @@ test.describe('Vue Node Bypass', () => {
         .filter({ hasText: 'Load Checkpoint' })
         .getByTestId('node-inner-wrapper')
       await expect(checkpointNode).toHaveClass(BYPASS_CLASS)
-      await comfyPage.nextFrame()
-      await expect(comfyPage.canvas).toHaveScreenshot(
+      await comfyPage.expectScreenshot(
+        comfyPage.canvas,
         'vue-node-bypassed-state.png'
       )
 
diff --git a/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png
index 3873f31172..6a5eaccd0c 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeStates/collapse.spec.ts b/browser_tests/tests/vueNodes/nodeStates/collapse.spec.ts
index bb3b722d6e..0e8f00f966 100644
--- a/browser_tests/tests/vueNodes/nodeStates/collapse.spec.ts
+++ b/browser_tests/tests/vueNodes/nodeStates/collapse.spec.ts
@@ -1,15 +1,11 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../../../fixtures/ComfyPage'
+} from '@e2e/fixtures/ComfyPage'
 
-test.describe('Vue Node Collapse', () => {
+test.describe('Vue Node Collapse', { tag: '@vue-nodes' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', false)
     await comfyPage.settings.setSetting('Comfy.EnableTooltips', true)
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.setup()
-    await comfyPage.vueNodes.waitForNodes()
   })
 
   test('should allow collapsing node with collapse icon', async ({
@@ -30,11 +26,10 @@ test.describe('Vue Node Collapse', () => {
     await comfyPage.nextFrame()
 
     // Verify node content is hidden
-    await expect(body).not.toBeVisible()
-    const collapsedBoundingBox = await vueNode.boundingBox()
-    if (!collapsedBoundingBox)
-      throw new Error('Failed to get node bounding box after collapse')
-    expect(collapsedBoundingBox.height).toBeLessThan(expandedBoundingBox.height)
+    await expect(body).toBeHidden()
+    await expect
+      .poll(async () => (await vueNode.boundingBox())?.height)
+      .toBeLessThan(expandedBoundingBox.height)
 
     // Expand again
     await vueNode.toggleCollapse()
@@ -42,12 +37,9 @@ test.describe('Vue Node Collapse', () => {
     await expect(body).toBeVisible()
 
     // Size should be restored
-    const expandedBoundingBoxAfter = await vueNode.boundingBox()
-    if (!expandedBoundingBoxAfter)
-      throw new Error('Failed to get node bounding box after expand')
-    expect(expandedBoundingBoxAfter.height).toBeGreaterThanOrEqual(
-      collapsedBoundingBox.height
-    )
+    await expect
+      .poll(async () => (await vueNode.boundingBox())?.height)
+      .toBeGreaterThanOrEqual(expandedBoundingBox.height)
   })
 
   test('should show collapse/expand icon state', async ({ comfyPage }) => {
@@ -55,18 +47,15 @@ test.describe('Vue Node Collapse', () => {
     await expect(vueNode.root).toBeVisible()
 
     // Check initial expanded state icon
-    let iconClass = await vueNode.getCollapseIconClass()
-    expect(iconClass).not.toContain('-rotate-90')
+    await expect(vueNode.collapseIcon).not.toHaveClass(/-rotate-90/)
 
     // Collapse and check icon
     await vueNode.toggleCollapse()
-    iconClass = await vueNode.getCollapseIconClass()
-    expect(iconClass).toContain('-rotate-90')
+    await expect(vueNode.collapseIcon).toHaveClass(/-rotate-90/)
 
     // Expand and check icon
     await vueNode.toggleCollapse()
-    iconClass = await vueNode.getCollapseIconClass()
-    expect(iconClass).not.toContain('-rotate-90')
+    await expect(vueNode.collapseIcon).not.toHaveClass(/-rotate-90/)
   })
 
   test('should preserve title when collapsing/expanding', async ({
@@ -77,15 +66,15 @@ test.describe('Vue Node Collapse', () => {
 
     // Set custom title
     await vueNode.setTitle('Test Sampler')
-    expect(await vueNode.getTitle()).toBe('Test Sampler')
+    await expect(vueNode.title).toHaveText('Test Sampler')
 
     // Collapse
     await vueNode.toggleCollapse()
-    expect(await vueNode.getTitle()).toBe('Test Sampler')
+    await expect(vueNode.title).toHaveText('Test Sampler')
 
     // Expand
     await vueNode.toggleCollapse()
-    expect(await vueNode.getTitle()).toBe('Test Sampler')
+    await expect(vueNode.title).toHaveText('Test Sampler')
 
     // Verify title is still displayed
     await expect(vueNode.header).toContainText('Test Sampler')
diff --git a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts
index 4cedceef52..2805af45a6 100644
--- a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts
+++ b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts
@@ -1,56 +1,59 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../../../fixtures/ComfyPage'
-import { TestIds } from '../../../fixtures/selectors'
+} from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
 
-test.describe('Vue Node Custom Colors', { tag: '@screenshot' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting('Comfy.Canvas.SelectionToolbox', true)
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
-  test('displays color picker button and allows color selection', async ({
-    comfyPage
-  }) => {
-    const loadCheckpointNode = comfyPage.page.locator('[data-node-id]').filter({
-      hasText: 'Load Checkpoint'
+test.describe(
+  'Vue Node Custom Colors',
+  { tag: ['@screenshot', '@vue-nodes'] },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.Canvas.SelectionToolbox', true)
     })
-    await loadCheckpointNode.getByText('Load Checkpoint').click()
 
-    const colorPickerButton = comfyPage.page.getByTestId(
-      TestIds.selectionToolbox.colorPickerButton
-    )
-    await colorPickerButton.click()
+    test('displays color picker button and allows color selection', async ({
+      comfyPage
+    }) => {
+      const loadCheckpointNode = comfyPage.page
+        .locator('[data-node-id]')
+        .filter({
+          hasText: 'Load Checkpoint'
+        })
+      await loadCheckpointNode.getByText('Load Checkpoint').click()
 
-    const colorPickerGroup = comfyPage.page.getByRole('group').filter({
-      has: comfyPage.page.getByTestId(TestIds.selectionToolbox.colorBlue)
+      const colorPickerButton = comfyPage.page.getByTestId(
+        TestIds.selectionToolbox.colorPickerButton
+      )
+      await colorPickerButton.click()
+
+      const colorPickerGroup = comfyPage.page.getByRole('group').filter({
+        has: comfyPage.page.getByTestId(TestIds.selectionToolbox.colorBlue)
+      })
+      await colorPickerGroup
+        .getByTestId(TestIds.selectionToolbox.colorBlue)
+        .click()
+
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'vue-node-custom-color-blue.png'
+      )
     })
-    await colorPickerGroup
-      .getByTestId(TestIds.selectionToolbox.colorBlue)
-      .click()
 
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'vue-node-custom-color-blue.png'
-    )
-  })
+    test('should load node colors from workflow', async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('nodes/every_node_color')
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'vue-node-custom-colors-dark-all-colors.png'
+      )
+    })
 
-  test('should load node colors from workflow', async ({ comfyPage }) => {
-    await comfyPage.workflow.loadWorkflow('nodes/every_node_color')
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'vue-node-custom-colors-dark-all-colors.png'
-    )
-  })
-
-  test('should show brightened node colors on light theme', async ({
-    comfyPage
-  }) => {
-    await comfyPage.settings.setSetting('Comfy.ColorPalette', 'light')
-    await comfyPage.workflow.loadWorkflow('nodes/every_node_color')
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'vue-node-custom-colors-light-all-colors.png'
-    )
-  })
-})
+    test('should show brightened node colors on light theme', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting('Comfy.ColorPalette', 'light')
+      await comfyPage.workflow.loadWorkflow('nodes/every_node_color')
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'vue-node-custom-colors-light-all-colors.png'
+      )
+    })
+  }
+)
diff --git a/browser_tests/tests/vueNodes/nodeStates/error.spec.ts b/browser_tests/tests/vueNodes/nodeStates/error.spec.ts
index 4e8b623ced..f012532963 100644
--- a/browser_tests/tests/vueNodes/nodeStates/error.spec.ts
+++ b/browser_tests/tests/vueNodes/nodeStates/error.spec.ts
@@ -1,20 +1,14 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../../../fixtures/ComfyPage'
+} from '@e2e/fixtures/ComfyPage'
 
 const ERROR_CLASS = /ring-destructive-background/
 
-test.describe('Vue Node Error', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
+test.describe('Vue Node Error', { tag: '@vue-nodes' }, () => {
   test('should display error state when node is missing (node from workflow is not installed)', async ({
     comfyPage
   }) => {
-    await comfyPage.setup()
     await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
 
     // Expect error state on missing unknown node
@@ -28,7 +22,6 @@ test.describe('Vue Node Error', () => {
   test('should display error state when node causes execution error', async ({
     comfyPage
   }) => {
-    await comfyPage.setup()
     await comfyPage.workflow.loadWorkflow('nodes/execution_error')
     await comfyPage.runButton.click()
 
diff --git a/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts b/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts
index b4b4fd8c45..df0169329c 100644
--- a/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts
+++ b/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts
@@ -1,26 +1,23 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../../../fixtures/ComfyPage'
+} from '@e2e/fixtures/ComfyPage'
 
 const MUTE_HOTKEY = 'Control+m'
 const MUTE_OPACITY = '0.5'
+const SELECTED_CLASS = /outline-node-component-outline/
 
-test.describe('Vue Node Mute', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
+test.describe('Vue Node Mute', { tag: '@vue-nodes' }, () => {
   test(
     'should allow toggling mute on a selected node with hotkey',
     { tag: '@screenshot' },
     async ({ comfyPage }) => {
-      await comfyPage.page.getByText('Load Checkpoint').click()
-      await comfyPage.page.keyboard.press(MUTE_HOTKEY)
-
       const checkpointNode =
         comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+      await comfyPage.page.getByText('Load Checkpoint').click()
+      await expect(checkpointNode).toHaveClass(SELECTED_CLASS)
+
+      await comfyPage.page.keyboard.press(MUTE_HOTKEY)
       await expect(checkpointNode).toHaveCSS('opacity', MUTE_OPACITY)
       await expect(comfyPage.canvas).toHaveScreenshot(
         'vue-node-muted-state.png'
@@ -34,12 +31,14 @@ test.describe('Vue Node Mute', () => {
   test('should allow toggling mute on multiple selected nodes with hotkey', async ({
     comfyPage
   }) => {
-    await comfyPage.page.getByText('Load Checkpoint').click()
-    await comfyPage.page.getByText('KSampler').click({ modifiers: ['Control'] })
-
     const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
     const ksamplerNode = comfyPage.vueNodes.getNodeByTitle('KSampler')
 
+    await comfyPage.page.getByText('Load Checkpoint').click()
+    await expect(checkpointNode).toHaveClass(SELECTED_CLASS)
+    await comfyPage.page.getByText('KSampler').click({ modifiers: ['Control'] })
+    await expect(ksamplerNode).toHaveClass(SELECTED_CLASS)
+
     await comfyPage.page.keyboard.press(MUTE_HOTKEY)
     await expect(checkpointNode).toHaveCSS('opacity', MUTE_OPACITY)
     await expect(ksamplerNode).toHaveCSS('opacity', MUTE_OPACITY)
diff --git a/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png
index 73d4ec760a..45f8d4c46b 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeStates/pin.spec.ts b/browser_tests/tests/vueNodes/nodeStates/pin.spec.ts
index f8f174fae4..eca37f2467 100644
--- a/browser_tests/tests/vueNodes/nodeStates/pin.spec.ts
+++ b/browser_tests/tests/vueNodes/nodeStates/pin.spec.ts
@@ -1,17 +1,12 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../../../fixtures/ComfyPage'
+} from '@e2e/fixtures/ComfyPage'
 
 const PIN_HOTKEY = 'p'
 const PIN_INDICATOR = '[data-testid="node-pin-indicator"]'
 
-test.describe('Vue Node Pin', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
+test.describe('Vue Node Pin', { tag: '@vue-nodes' }, () => {
   test('should allow toggling pin on a selected node with hotkey', async ({
     comfyPage
   }) => {
@@ -24,7 +19,7 @@ test.describe('Vue Node Pin', () => {
     await expect(pinIndicator).toBeVisible()
 
     await comfyPage.page.keyboard.press(PIN_HOTKEY)
-    await expect(pinIndicator).not.toBeVisible()
+    await expect(pinIndicator).toBeHidden()
   })
 
   test('should allow toggling pin on multiple selected nodes with hotkey', async ({
@@ -43,8 +38,8 @@ test.describe('Vue Node Pin', () => {
     await expect(pinIndicator2).toBeVisible()
 
     await comfyPage.page.keyboard.press(PIN_HOTKEY)
-    await expect(pinIndicator1).not.toBeVisible()
-    await expect(pinIndicator2).not.toBeVisible()
+    await expect(pinIndicator1).toBeHidden()
+    await expect(pinIndicator2).toBeHidden()
   })
 
   test('should not allow dragging pinned nodes', async ({ comfyPage }) => {
@@ -61,10 +56,9 @@ test.describe('Vue Node Pin', () => {
     )
 
     // Verify the node is not dragged (same position before and after click-and-drag)
-    const headerPosAfterDrag = await checkpointNodeHeader.boundingBox()
-    if (!headerPosAfterDrag)
-      throw new Error('Failed to get header position after drag')
-    expect(headerPosAfterDrag).toEqual(headerPos)
+    await expect
+      .poll(async () => await checkpointNodeHeader.boundingBox())
+      .toEqual(headerPos)
 
     // Unpin the node with the hotkey
     await checkpointNodeHeader.click()
@@ -77,9 +71,8 @@ test.describe('Vue Node Pin', () => {
     )
 
     // Verify the node is dragged
-    const headerPosAfterDrag2 = await checkpointNodeHeader.boundingBox()
-    if (!headerPosAfterDrag2)
-      throw new Error('Failed to get header position after drag')
-    expect(headerPosAfterDrag2).not.toEqual(headerPos)
+    await expect
+      .poll(async () => await checkpointNodeHeader.boundingBox())
+      .not.toEqual(headerPos)
   })
 })
diff --git a/browser_tests/tests/vueNodes/rerouteNodeSize.spec.ts b/browser_tests/tests/vueNodes/rerouteNodeSize.spec.ts
index b9e8726600..3800c62894 100644
--- a/browser_tests/tests/vueNodes/rerouteNodeSize.spec.ts
+++ b/browser_tests/tests/vueNodes/rerouteNodeSize.spec.ts
@@ -1,22 +1,17 @@
-import {
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from '../../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
-test.describe('Vue Reroute Node Size', () => {
+test.describe('Vue Reroute Node Size', { tag: '@vue-nodes' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
     await comfyPage.settings.setSetting('Comfy.Minimap.Visible', false)
     await comfyPage.workflow.loadWorkflow('links/single_connected_reroute_node')
-    await comfyPage.vueNodes.waitForNodes()
   })
 
   test(
     'reroute node visual appearance',
     { tag: '@screenshot' },
     async ({ comfyPage }) => {
-      await comfyPage.nextFrame()
-      await expect(comfyPage.canvas).toHaveScreenshot(
+      await comfyPage.expectScreenshot(
+        comfyPage.canvas,
         'vue-reroute-node-compact.png'
       )
     }
diff --git a/browser_tests/tests/vueNodes/widgets/advancedWidgets.spec.ts b/browser_tests/tests/vueNodes/widgets/advancedWidgets.spec.ts
index 51f95a92ad..b77b2a9beb 100644
--- a/browser_tests/tests/vueNodes/widgets/advancedWidgets.spec.ts
+++ b/browser_tests/tests/vueNodes/widgets/advancedWidgets.spec.ts
@@ -1,11 +1,10 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../../../fixtures/ComfyPage'
+} from '@e2e/fixtures/ComfyPage'
 
-test.describe('Advanced Widget Visibility', () => {
+test.describe('Advanced Widget Visibility', { tag: '@vue-nodes' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
     await comfyPage.settings.setSetting(
       'Comfy.Node.AlwaysShowAdvancedWidgets',
       false
@@ -43,12 +42,8 @@ test.describe('Advanced Widget Visibility', () => {
     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()
+    await expect(node.getByLabel('max_shift', { exact: true })).toBeHidden()
+    await expect(node.getByLabel('base_shift', { exact: true })).toBeHidden()
 
     // "Show advanced inputs" button should be present
     await expect(node.getByText('Show advanced inputs')).toBeVisible()
@@ -97,6 +92,6 @@ test.describe('Advanced Widget Visibility', () => {
     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()
+    await expect(node.getByText('Show advanced inputs')).toBeHidden()
   })
 })
diff --git a/browser_tests/tests/vueNodes/widgets/imageCrop.spec.ts b/browser_tests/tests/vueNodes/widgets/imageCrop.spec.ts
new file mode 100644
index 0000000000..ce4800463c
--- /dev/null
+++ b/browser_tests/tests/vueNodes/widgets/imageCrop.spec.ts
@@ -0,0 +1,156 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+
+type CropValue = { x: number; y: number; width: number; height: number } | null
+
+test.describe('Image Crop', { tag: ['@widget', '@vue-nodes'] }, () => {
+  test.describe('without source image', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('widgets/image_crop_widget')
+    })
+
+    test(
+      'Shows empty state when no input image is connected',
+      { tag: '@smoke' },
+      async ({ comfyPage }) => {
+        const node = comfyPage.vueNodes.getNodeLocator('1')
+        await expect(node).toBeVisible()
+
+        await expect.soft(node.getByTestId('crop-empty-icon')).toBeVisible()
+        await expect.soft(node).toContainText('No input image connected')
+        await expect.soft(node.getByTestId('crop-overlay')).toHaveCount(0)
+        await expect.soft(node.locator('img')).toHaveCount(0)
+      }
+    )
+
+    test(
+      'Renders controls in default state',
+      { tag: '@smoke' },
+      async ({ comfyPage }) => {
+        const node = comfyPage.vueNodes.getNodeLocator('1')
+        await expect(node).toBeVisible()
+
+        await expect(node.getByText('Ratio')).toBeVisible()
+        await expect(
+          node.locator('button:has(.icon-\\[lucide--lock-open\\])')
+        ).toBeVisible()
+        await expect(node.locator('input')).toHaveCount(4)
+      }
+    )
+  })
+
+  test.describe(
+    'with source image after execution',
+    { tag: ['@widget', '@slow'] },
+    () => {
+      async function getCropValue(comfyPage: ComfyPage): Promise<CropValue> {
+        return comfyPage.page.evaluate(() => {
+          const n = window.app!.graph.getNodeById(2)
+          const w = n?.widgets?.find((w) => w.type === 'imagecrop')
+          const v = w?.value
+          if (v && typeof v === 'object' && 'x' in v) {
+            const crop = v as {
+              x: number
+              y: number
+              width: number
+              height: number
+            }
+            return {
+              x: crop.x,
+              y: crop.y,
+              width: crop.width,
+              height: crop.height
+            }
+          }
+          return null
+        })
+      }
+
+      test.beforeEach(async ({ comfyPage }) => {
+        await comfyPage.workflow.loadWorkflow('widgets/image_crop_with_source')
+        await comfyPage.runButton.click()
+        await expect(
+          comfyPage.vueNodes.getNodeLocator('2').locator('img')
+        ).toBeVisible({ timeout: 30_000 })
+      })
+
+      test(
+        'Displays source image with crop overlay after execution',
+        { tag: ['@smoke', '@screenshot'] },
+        async ({ comfyPage }) => {
+          const node = comfyPage.vueNodes.getNodeLocator('2')
+          const img = node.locator('img')
+
+          await expect
+            .poll(() => img.evaluate((el: HTMLImageElement) => el.naturalWidth))
+            .toBeGreaterThan(0)
+
+          await expect(node.getByTestId('crop-overlay')).toBeVisible()
+          await comfyPage.nextFrame()
+          await comfyPage.nextFrame()
+          await expect(node).toHaveScreenshot('image-crop-with-source.png', {
+            maxDiffPixelRatio: 0.05
+          })
+        }
+      )
+
+      test(
+        'Drag crop box updates crop position',
+        { tag: ['@smoke', '@screenshot'] },
+        async ({ comfyPage }) => {
+          const node = comfyPage.vueNodes.getNodeLocator('2')
+          const cropBox = node.getByTestId('crop-overlay')
+          const box = await cropBox.boundingBox()
+          if (!box) throw new Error('Crop box not found')
+
+          const valueBefore = await getCropValue(comfyPage)
+          if (!valueBefore)
+            throw new Error('Widget value missing — check fixture setup')
+
+          const startX = box.x + box.width / 2
+          const startY = box.y + box.height / 2
+
+          const pointerOpts = { bubbles: true, cancelable: true, pointerId: 1 }
+          await cropBox.dispatchEvent('pointerdown', {
+            ...pointerOpts,
+            clientX: startX,
+            clientY: startY
+          })
+          await comfyPage.nextFrame()
+          await cropBox.dispatchEvent('pointermove', {
+            ...pointerOpts,
+            clientX: startX + 15,
+            clientY: startY + 10
+          })
+          await comfyPage.nextFrame()
+          await cropBox.dispatchEvent('pointermove', {
+            ...pointerOpts,
+            clientX: startX + 30,
+            clientY: startY + 20
+          })
+          await cropBox.dispatchEvent('pointerup', {
+            ...pointerOpts,
+            clientX: startX + 30,
+            clientY: startY + 20
+          })
+          await comfyPage.nextFrame()
+
+          await expect(async () => {
+            const valueAfter = await getCropValue(comfyPage)
+            expect(valueAfter?.x).toBeGreaterThan(valueBefore.x)
+            expect(valueAfter?.y).toBeGreaterThan(valueBefore.y)
+            expect(valueAfter?.width).toBe(valueBefore.width)
+            expect(valueAfter?.height).toBe(valueBefore.height)
+          }).toPass({ timeout: 5000 })
+
+          await expect(node).toHaveScreenshot('image-crop-after-drag.png', {
+            maxDiffPixelRatio: 0.05
+          })
+        }
+      )
+    }
+  )
+})
diff --git a/browser_tests/tests/vueNodes/widgets/imageCrop.spec.ts-snapshots/image-crop-after-drag-chromium-linux.png b/browser_tests/tests/vueNodes/widgets/imageCrop.spec.ts-snapshots/image-crop-after-drag-chromium-linux.png
new file mode 100644
index 0000000000..870926a0eb
Binary files /dev/null and b/browser_tests/tests/vueNodes/widgets/imageCrop.spec.ts-snapshots/image-crop-after-drag-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/widgets/imageCrop.spec.ts-snapshots/image-crop-with-source-chromium-linux.png b/browser_tests/tests/vueNodes/widgets/imageCrop.spec.ts-snapshots/image-crop-with-source-chromium-linux.png
new file mode 100644
index 0000000000..35939b06f4
Binary files /dev/null and b/browser_tests/tests/vueNodes/widgets/imageCrop.spec.ts-snapshots/image-crop-with-source-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/widgets/int/integerWidget.spec.ts b/browser_tests/tests/vueNodes/widgets/int/integerWidget.spec.ts
index a7a8a4b480..0515a42194 100644
--- a/browser_tests/tests/vueNodes/widgets/int/integerWidget.spec.ts
+++ b/browser_tests/tests/vueNodes/widgets/int/integerWidget.spec.ts
@@ -1,19 +1,13 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../../../../fixtures/ComfyPage'
-
-test.describe('Vue Integer Widget', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.setup()
-  })
+} from '@e2e/fixtures/ComfyPage'
 
+test.describe('Vue Integer Widget', { tag: '@vue-nodes' }, () => {
   test('should be disabled and not allow changing value when link connected to slot', async ({
     comfyPage
   }) => {
     await comfyPage.workflow.loadWorkflow('vueNodes/linked-int-widget')
-    await comfyPage.vueNodes.waitForNodes()
 
     const seedWidget = comfyPage.vueNodes
       .getWidgetByName('KSampler', 'seed')
@@ -22,10 +16,8 @@ test.describe('Vue Integer Widget', () => {
     const initialValue = Number(await controls.input.inputValue())
 
     // Verify widget is disabled when linked
-    await controls.incrementButton.click({ force: true })
-    await expect(controls.input).toHaveValue(initialValue.toString())
-
-    await controls.decrementButton.click({ force: true })
+    await expect(controls.incrementButton).toBeDisabled()
+    await expect(controls.decrementButton).toBeDisabled()
     await expect(controls.input).toHaveValue(initialValue.toString())
 
     await expect(seedWidget).toBeVisible()
diff --git a/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts b/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts
index 0998c3eacb..643e8847ed 100644
--- a/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts
+++ b/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts
@@ -1,23 +1,16 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../../../../fixtures/ComfyPage'
-import { TestIds } from '../../../../fixtures/selectors'
-
-test.describe('Vue Upload Widgets', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.vueNodes.waitForNodes()
-  })
+} from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
 
+test.describe('Vue Upload Widgets', { tag: '@vue-nodes' }, () => {
   test('should hide canvas-only upload buttons', async ({ comfyPage }) => {
-    await comfyPage.setup()
     await comfyPage.workflow.loadWorkflow('widgets/all_load_widgets')
-    await comfyPage.vueNodes.waitForNodes()
 
     await expect(
       comfyPage.page.getByText('choose file to upload', { exact: true })
-    ).not.toBeVisible()
+    ).toBeHidden()
 
     await expect
       .poll(() =>
diff --git a/browser_tests/tests/vueNodes/widgets/text/multilineStringWidget.spec.ts b/browser_tests/tests/vueNodes/widgets/text/multilineStringWidget.spec.ts
index c984171e18..f44de55aaa 100644
--- a/browser_tests/tests/vueNodes/widgets/text/multilineStringWidget.spec.ts
+++ b/browser_tests/tests/vueNodes/widgets/text/multilineStringWidget.spec.ts
@@ -1,15 +1,10 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../../../../fixtures/ComfyPage'
-import type { ComfyPage } from '../../../../fixtures/ComfyPage'
-
-test.describe('Vue Multiline String Widget', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.vueNodes.waitForNodes()
-  })
+} from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 
+test.describe('Vue Multiline String Widget', { tag: '@vue-nodes' }, () => {
   const getFirstClipNode = (comfyPage: ComfyPage) =>
     comfyPage.vueNodes.getNodeByTitle('CLIP Text Encode (Prompt)').first()
 
@@ -46,13 +41,14 @@ test.describe('Vue Multiline String Widget', () => {
 
     await expect(textarea).toHaveValue('Keep me around')
   })
+
   test('should use native context menu when focused', async ({ comfyPage }) => {
     const textarea = getFirstMultilineStringWidget(comfyPage)
     const vueContextMenu = comfyPage.page.locator('.p-contextmenu')
 
     await textarea.focus()
     await textarea.click({ button: 'right' })
-    await expect(vueContextMenu).not.toBeVisible()
+    await expect(vueContextMenu).toBeHidden()
     await textarea.blur()
 
     await textarea.click({ button: 'right' })
diff --git a/browser_tests/tests/vueNodes/widgets/widgetReactivity.spec.ts b/browser_tests/tests/vueNodes/widgets/widgetReactivity.spec.ts
index 8a3548614a..0f35bfb6e1 100644
--- a/browser_tests/tests/vueNodes/widgets/widgetReactivity.spec.ts
+++ b/browser_tests/tests/vueNodes/widgets/widgetReactivity.spec.ts
@@ -1,14 +1,10 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../../../fixtures/ComfyPage'
-import type { TestGraphAccess } from '../../../types/globals'
+} from '@e2e/fixtures/ComfyPage'
+import type { TestGraphAccess } from '@e2e/types/globals'
 
-test.describe('Vue Widget Reactivity', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.vueNodes.waitForNodes()
-  })
+test.describe('Vue Widget Reactivity', { tag: '@vue-nodes' }, () => {
   test('Should display added widgets', async ({ comfyPage }) => {
     const loadCheckpointNode = comfyPage.page.locator(
       'css=[data-testid="node-body-4"] > .lg-node-widgets > div'
@@ -32,6 +28,7 @@ test.describe('Vue Widget Reactivity', () => {
     })
     await expect(loadCheckpointNode).toHaveCount(4)
   })
+
   test('Should hide removed widgets', async ({ comfyPage }) => {
     const loadCheckpointNode = comfyPage.page.locator(
       'css=[data-testid="node-body-3"] > .lg-node-widgets > div'
diff --git a/browser_tests/tests/widget.spec.ts b/browser_tests/tests/widget.spec.ts
index fd8afb06ac..ed70f5b4f8 100644
--- a/browser_tests/tests/widget.spec.ts
+++ b/browser_tests/tests/widget.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { DefaultGraphPositions } from '../fixtures/constants/defaultGraphPositions'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { DefaultGraphPositions } from '@e2e/fixtures/constants/defaultGraphPositions'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -76,33 +76,29 @@ test.describe('Combo text widget', { tag: ['@screenshot', '@widget'] }, () => {
     await comfyPage.page.keyboard.press('r')
 
     // Wait for nodes' widgets to be updated
-    await expect(async () => {
-      const refreshedComboValues = await getComboValues()
-      expect(refreshedComboValues).not.toEqual(initialComboValues)
-    }).toPass({ timeout: 5000 })
+    await expect.poll(() => getComboValues()).not.toEqual(initialComboValues)
   })
 
   test('Should refresh combo values of nodes with v2 combo input spec', async ({
     comfyPage
   }) => {
+    const getComboValues = async () =>
+      comfyPage.page.evaluate(() => {
+        return window
+          .app!.graph!.nodes.find(
+            (node) => node.title === 'Node With V2 Combo Input'
+          )!
+          .widgets!.find((widget) => widget.name === 'combo_input')!.options
+          .values
+      })
+
     await comfyPage.workflow.loadWorkflow('inputs/node_with_v2_combo_input')
     // click canvas to focus
     await comfyPage.page.mouse.click(400, 300)
     // press R to trigger refresh
     await comfyPage.page.keyboard.press('r')
-    // wait for nodes' widgets to be updated
-    await comfyPage.page.mouse.click(400, 300)
-    await comfyPage.nextFrame()
-    // get the combo widget's values
-    const comboValues = await comfyPage.page.evaluate(() => {
-      return window
-        .app!.graph!.nodes.find(
-          (node) => node.title === 'Node With V2 Combo Input'
-        )!
-        .widgets!.find((widget) => widget.name === 'combo_input')!.options
-        .values
-    })
-    expect(comboValues).toEqual(['A', 'B'])
+
+    await expect.poll(() => getComboValues()).toEqual(['A', 'B'])
   })
 })
 
@@ -126,6 +122,7 @@ test.describe('Slider widget', { tag: ['@screenshot', '@widget'] }, () => {
     const widget = await node.getWidget(0)
 
     await comfyPage.page.evaluate(() => {
+      window.widgetValue = undefined
       const widget = window.app!.graph!.nodes[0].widgets![0]
       widget.callback = (value: number) => {
         window.widgetValue = value
@@ -134,9 +131,9 @@ test.describe('Slider widget', { tag: ['@screenshot', '@widget'] }, () => {
     await widget.dragHorizontal(50)
     await expect(comfyPage.canvas).toHaveScreenshot('slider_widget_dragged.png')
 
-    expect(
-      await comfyPage.page.evaluate(() => window.widgetValue)
-    ).toBeDefined()
+    await expect
+      .poll(() => comfyPage.page.evaluate(() => window.widgetValue))
+      .toBeDefined()
   })
 })
 
@@ -147,6 +144,7 @@ test.describe('Number widget', { tag: ['@screenshot', '@widget'] }, () => {
     const node = (await comfyPage.nodeOps.getFirstNodeRef())!
     const widget = await node.getWidget(0)
     await comfyPage.page.evaluate(() => {
+      window.widgetValue = undefined
       const widget = window.app!.graph!.nodes[0].widgets![0]
       widget.callback = (value: number) => {
         window.widgetValue = value
@@ -155,9 +153,9 @@ test.describe('Number widget', { tag: ['@screenshot', '@widget'] }, () => {
     await widget.dragHorizontal(50)
     await expect(comfyPage.canvas).toHaveScreenshot('seed_widget_dragged.png')
 
-    expect(
-      await comfyPage.page.evaluate(() => window.widgetValue)
-    ).toBeDefined()
+    await expect
+      .poll(() => comfyPage.page.evaluate(() => window.widgetValue))
+      .toBeDefined()
   })
 })
 
@@ -169,12 +167,18 @@ test.describe(
       comfyPage
     }) => {
       await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')
+      const node = (await comfyPage.nodeOps.getFirstNodeRef())!
+      const initialSize = await node.getSize()
 
       await comfyPage.page.evaluate(() => {
         window.app!.graph!.nodes[0].addWidget('number', 'new_widget', 10, null)
         window.app!.graph!.setDirtyCanvas(true, true)
       })
 
+      await expect
+        .poll(async () => (await node.getSize()).height)
+        .toBeGreaterThan(initialSize.height)
+
       await expect(comfyPage.canvas).toHaveScreenshot(
         'ksampler_widget_added.png'
       )
@@ -185,7 +189,9 @@ test.describe(
 test.describe('Image widget', { tag: ['@screenshot', '@widget'] }, () => {
   test('Can load image', async ({ comfyPage }) => {
     await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
-    await expect(comfyPage.canvas).toHaveScreenshot('load_image_widget.png')
+    await expect(comfyPage.canvas).toHaveScreenshot('load_image_widget.png', {
+      maxDiffPixels: 50
+    })
   })
 
   test('Can drag and drop image', async ({ comfyPage }) => {
@@ -208,8 +214,7 @@ test.describe('Image widget', { tag: ['@screenshot', '@widget'] }, () => {
 
     // Expect the filename combo value to be updated
     const fileComboWidget = await loadImageNode.getWidget(0)
-    const filename = await fileComboWidget.getValue()
-    expect(filename).toBe('image32x32.webp')
+    await expect.poll(() => fileComboWidget.getValue()).toBe('image32x32.webp')
   })
 
   test('Can change image by changing the filename combo value', async ({
@@ -227,20 +232,47 @@ test.describe('Image widget', { tag: ['@screenshot', '@widget'] }, () => {
     const comboEntry = comfyPage.page.getByRole('menuitem', {
       name: 'image32x32.webp'
     })
+    const imageLoaded = comfyPage.page.waitForResponse(
+      (resp) =>
+        resp.url().includes('/view') &&
+        resp.url().includes('image32x32.webp') &&
+        resp.request().method() === 'GET' &&
+        resp.status() === 200
+    )
     await comboEntry.click()
 
-    // Stabilization for the image swap
+    // Wait for the image to load from the server
+    await imageLoaded
+
+    // Wait for the image to decode and appear on the node
+    await expect
+      .poll(
+        () =>
+          comfyPage.page.evaluate((nodeId) => {
+            const node = window.app!.graph!.getNodeById(nodeId)
+            const img = node?.imgs?.[0]
+            return (
+              !!img &&
+              img.complete &&
+              img.naturalWidth > 0 &&
+              img.src.includes('image32x32.webp')
+            )
+          }, loadImageNode.id),
+        { timeout: 10_000 }
+      )
+      .toBe(true)
     await comfyPage.nextFrame()
 
     // Expect the image preview to change automatically
     await expect(comfyPage.canvas).toHaveScreenshot(
-      'image_preview_changed_by_combo_value.png'
+      'image_preview_changed_by_combo_value.png',
+      { maxDiffPixels: 50 }
     )
 
     // Expect the filename combo value to be updated
-    const filename = await fileComboWidget.getValue()
-    expect(filename).toBe('image32x32.webp')
+    await expect.poll(() => fileComboWidget.getValue()).toBe('image32x32.webp')
   })
+
   test('Displays buttons when viewing single image of batch', async ({
     comfyPage
   }) => {
@@ -273,38 +305,6 @@ test.describe(
   'Animated image widget',
   { tag: ['@screenshot', '@widget'] },
   () => {
-    // https://github.com/Comfy-Org/ComfyUI_frontend/issues/3718
-    test.skip('Shows preview of uploaded animated image', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('widgets/load_animated_webp')
-
-      // Get position of the load animated webp node
-      const nodes = await comfyPage.nodeOps.getNodeRefsByType(
-        'DevToolsLoadAnimatedImageTest'
-      )
-      const loadAnimatedWebpNode = nodes[0]
-      const { x, y } = await loadAnimatedWebpNode.getPosition()
-
-      // Drag and drop image file onto the load animated webp node
-      await comfyPage.dragDrop.dragAndDropFile('animated_webp.webp', {
-        dropPosition: { x, y }
-      })
-
-      // Expect the image preview to change automatically
-      await expect(comfyPage.canvas).toHaveScreenshot(
-        'animated_image_preview_drag_and_dropped.png'
-      )
-
-      // Move mouse and click on canvas to trigger render
-      await comfyPage.page.mouse.click(64, 64)
-
-      // Expect the image preview to change to the next frame of the animation
-      await expect(comfyPage.canvas).toHaveScreenshot(
-        'animated_image_preview_drag_and_dropped_next_frame.png'
-      )
-    })
-
     test('Can drag-and-drop animated webp image', async ({ comfyPage }) => {
       await comfyPage.workflow.loadWorkflow('widgets/load_animated_webp')
 
@@ -323,8 +323,9 @@ test.describe(
 
       // Expect the filename combo value to be updated
       const fileComboWidget = await loadAnimatedWebpNode.getWidget(0)
-      const filename = await fileComboWidget.getValue()
-      expect(filename).toContain('animated_webp.webp')
+      await expect
+        .poll(() => fileComboWidget.getValue())
+        .toContain('animated_webp.webp')
     })
 
     test('Can preview saved animated webp image', async ({ comfyPage }) => {
@@ -339,9 +340,20 @@ test.describe(
 
       // Drag and drop image file onto the load animated webp node
       await comfyPage.dragDrop.dragAndDropFile('animated_webp.webp', {
-        dropPosition: { x, y }
+        dropPosition: { x, y },
+        waitForUpload: true
       })
-      await comfyPage.nextFrame()
+
+      await expect
+        .poll(
+          () =>
+            comfyPage.page.evaluate(
+              (loadId) => window.app!.nodeOutputs[loadId]?.images?.length ?? 0,
+              loadAnimatedWebpNode.id
+            ),
+          { timeout: 10_000 }
+        )
+        .toBeGreaterThan(0)
 
       // Get the SaveAnimatedWEBP node
       const saveNodes =
@@ -359,9 +371,30 @@ test.describe(
         },
         [loadAnimatedWebpNode.id, saveAnimatedWebpNode.id]
       )
-      await expect(
-        comfyPage.page.locator('.dom-widget').locator('img')
-      ).toHaveCount(2)
+
+      await expect
+        .poll(
+          () =>
+            comfyPage.page.evaluate(
+              ([loadId, saveId]) => {
+                const graph = window.app!.graph
+
+                // Re-dirty the canvas so onDrawBackground fires again on the
+                // next frame. Without this, the single setDirty(true) above
+                // only triggers one paint; if the async image load inside
+                // showPreview() hasn't completed by then, node.imgs stays
+                // empty and no further paints re-check it.
+                window.app!.canvas.setDirty(true, true)
+
+                return [loadId, saveId].map(
+                  (nodeId) => (graph.getNodeById(nodeId)?.imgs?.length ?? 0) > 0
+                )
+              },
+              [loadAnimatedWebpNode.id, saveAnimatedWebpNode.id]
+            ),
+          { timeout: 10_000 }
+        )
+        .toEqual([true, true])
     })
   }
 )
@@ -369,9 +402,7 @@ test.describe(
 test.describe('Load audio widget', { tag: ['@screenshot', '@widget'] }, () => {
   test('Can load audio', async ({ comfyPage }) => {
     await comfyPage.workflow.loadWorkflow('widgets/load_audio_widget')
-    // Wait for the audio widget to be rendered in the DOM
-    await comfyPage.page.waitForSelector('.comfy-audio', { state: 'attached' })
-    await comfyPage.nextFrame()
+    await expect(comfyPage.page.locator('.comfy-audio')).toBeVisible()
     await expect(comfyPage.canvas).toHaveScreenshot('load_audio_widget.png')
   })
 })
@@ -388,6 +419,8 @@ test.describe('Unserialized widgets', { tag: '@widget' }, () => {
     await comfyPage.page.mouse.click(10, 10)
 
     // Expect the graph to not be modified
-    expect(await comfyPage.workflow.isCurrentWorkflowModified()).toBe(false)
+    await expect
+      .poll(() => comfyPage.workflow.isCurrentWorkflowModified())
+      .toBe(false)
   })
 })
diff --git a/browser_tests/tests/widgetCopyButton.spec.ts b/browser_tests/tests/widgetCopyButton.spec.ts
index cc033d8e78..9515ebb4a9 100644
--- a/browser_tests/tests/widgetCopyButton.spec.ts
+++ b/browser_tests/tests/widgetCopyButton.spec.ts
@@ -1,14 +1,10 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../fixtures/ComfyPage'
+} from '@e2e/fixtures/ComfyPage'
 
-test.describe('Widget copy button', { tag: '@ui' }, () => {
+test.describe('Widget copy button', { tag: ['@ui', '@vue-nodes'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.setup()
-
     // Add a PreviewAny node which has a read-only textarea with a copy button
     await comfyPage.page.evaluate(() => {
       const node = window.LiteGraph!.createNode('PreviewAny')
diff --git a/browser_tests/tests/workflowPersistence.spec.ts b/browser_tests/tests/workflowPersistence.spec.ts
new file mode 100644
index 0000000000..614796119d
--- /dev/null
+++ b/browser_tests/tests/workflowPersistence.spec.ts
@@ -0,0 +1,590 @@
+import { readFileSync } from 'fs'
+
+import { expect } from '@playwright/test'
+
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+
+async function getNodeOutputImageCount(
+  comfyPage: ComfyPage,
+  nodeId: string
+): Promise<number> {
+  return await comfyPage.page.evaluate(
+    (id) => window.app!.nodeOutputs?.[id]?.images?.length ?? 0,
+    nodeId
+  )
+}
+
+async function getWidgetValueSnapshot(
+  comfyPage: ComfyPage
+): Promise<Record<string, Array<{ name: string; value: unknown }>>> {
+  return await comfyPage.page.evaluate(() => {
+    const nodes = window.app!.graph.nodes
+    const results: Record<string, Array<{ name: string; value: unknown }>> = {}
+    for (const node of nodes) {
+      if (node.widgets && node.widgets.length > 0) {
+        results[node.id] = node.widgets.map((w) => ({
+          name: w.name,
+          value: w.value
+        }))
+      }
+    }
+    return results
+  })
+}
+
+async function getLinkCount(comfyPage: ComfyPage): Promise<number> {
+  return await comfyPage.page.evaluate(() => {
+    return window.app!.graph.links
+      ? Object.keys(window.app!.graph.links).length
+      : 0
+  })
+}
+
+test.describe('Workflow Persistence', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting(
+      'Comfy.Workflow.WorkflowTabsPosition',
+      'Sidebar'
+    )
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.workflow.setupWorkflowsDirectory({})
+  })
+
+  test('Rapid tab switching does not desync workflow and graph state', async ({
+    comfyPage
+  }) => {
+    test.info().annotations.push({
+      type: 'regression',
+      description: 'PR #9533 — desynced workflow/graph state during loading'
+    })
+
+    const tab = comfyPage.menu.workflowsTab
+    await tab.open()
+
+    await comfyPage.menu.topbar.saveWorkflow('rapid-A')
+    const nodeCountA = await comfyPage.nodeOps.getNodeCount()
+
+    await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')
+    await comfyPage.menu.topbar.saveWorkflow('rapid-B')
+    await expect
+      .poll(() => comfyPage.nodeOps.getNodeCount())
+      .not.toBe(nodeCountA)
+    const nodeCountB = await comfyPage.nodeOps.getNodeCount()
+
+    for (let i = 0; i < 3; i++) {
+      await tab.switchToWorkflow('rapid-A')
+      await tab.switchToWorkflow('rapid-B')
+    }
+
+    await comfyPage.workflow.waitForWorkflowIdle()
+    await comfyPage.nextFrame()
+
+    await expect.poll(() => comfyPage.nodeOps.getNodeCount()).toBe(nodeCountB)
+
+    await tab.switchToWorkflow('rapid-A')
+    await comfyPage.workflow.waitForWorkflowIdle()
+    await expect.poll(() => comfyPage.nodeOps.getNodeCount()).toBe(nodeCountA)
+  })
+
+  test('Node outputs are preserved when switching workflow tabs', async ({
+    comfyPage
+  }) => {
+    test.info().annotations.push({
+      type: 'regression',
+      description:
+        'PR #9380 — ChangeTracker.store() did not save nodeOutputs, losing preview images on tab switch'
+    })
+
+    const tab = comfyPage.menu.workflowsTab
+    await tab.open()
+
+    await comfyPage.menu.topbar.saveWorkflow('outputs-test')
+
+    const firstNode = await comfyPage.nodeOps.getFirstNodeRef()
+    expect(firstNode).toBeTruthy()
+    const nodeId = String(firstNode!.id)
+
+    // Simulate node outputs as if execution completed
+    await comfyPage.page.evaluate((id) => {
+      const outputStore = window.app!.nodeOutputs
+      if (outputStore) {
+        outputStore[id] = {
+          images: [{ filename: 'test.png', subfolder: '', type: 'output' }]
+        }
+      }
+    }, String(nodeId))
+
+    // Trigger changeTracker to capture current state including outputs
+    await comfyPage.page.evaluate(() => {
+      const em = window.app!.extensionManager as unknown as Record<
+        string,
+        { activeWorkflow?: { changeTracker?: { captureCanvasState(): void } } }
+      >
+      em.workflow?.activeWorkflow?.changeTracker?.captureCanvasState()
+    })
+
+    await expect.poll(() => getNodeOutputImageCount(comfyPage, nodeId)).toBe(1)
+
+    await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
+    await comfyPage.workflow.waitForWorkflowIdle()
+
+    await tab.switchToWorkflow('outputs-test')
+    await comfyPage.workflow.waitForWorkflowIdle()
+
+    await expect.poll(() => getNodeOutputImageCount(comfyPage, nodeId)).toBe(1)
+  })
+
+  test('Loading a new workflow cleanly replaces the previous graph', async ({
+    comfyPage
+  }) => {
+    test.info().annotations.push({
+      type: 'regression',
+      description:
+        'Commit 44bb6f13 — canvas graph not reset before workflow load'
+    })
+
+    await expect.poll(() => comfyPage.nodeOps.getNodeCount()).toBeGreaterThan(1)
+
+    await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')
+
+    await expect.poll(() => comfyPage.nodeOps.getNodeCount()).toBe(1)
+
+    await expect
+      .poll(async () => {
+        const nodes = await comfyPage.nodeOps.getNodes()
+        return nodes[0]?.type
+      })
+      .toBe('KSampler')
+  })
+
+  test('Widget values on nodes are preserved across workflow tab switches', async ({
+    comfyPage
+  }) => {
+    test.info().annotations.push({
+      type: 'regression',
+      description: 'PR #7648 — component widget state lost on graph change'
+    })
+
+    const tab = comfyPage.menu.workflowsTab
+    await tab.open()
+
+    await comfyPage.menu.topbar.saveWorkflow('widget-state-test')
+
+    // Read widget values via page.evaluate — these are internal LiteGraph
+    // state not exposed through DOM
+    const widgetValuesBefore = await getWidgetValueSnapshot(comfyPage)
+
+    expect(Object.keys(widgetValuesBefore).length).toBeGreaterThan(0)
+
+    await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
+    await comfyPage.workflow.waitForWorkflowIdle()
+
+    await tab.switchToWorkflow('widget-state-test')
+    await comfyPage.workflow.waitForWorkflowIdle()
+
+    await expect
+      .poll(() => getWidgetValueSnapshot(comfyPage))
+      .toEqual(widgetValuesBefore)
+  })
+
+  test('API format workflow with missing node types partially loads', async ({
+    comfyPage
+  }) => {
+    test.info().annotations.push({
+      type: 'regression',
+      description: 'PR #9694 — loadApiJson early-returned on missing node types'
+    })
+
+    const fixturePath = comfyPage.assetPath(
+      'nodes/api_workflow_with_missing_nodes.json'
+    )
+    const apiWorkflow = JSON.parse(readFileSync(fixturePath, 'utf-8'))
+
+    await comfyPage.page.evaluate(async (workflow) => {
+      await window.app!.loadApiJson(workflow, 'test-api-workflow.json')
+    }, apiWorkflow)
+    await comfyPage.nextFrame()
+
+    // Known nodes (KSampler, EmptyLatentImage) should load; unknown node skipped
+    await expect
+      .poll(() => comfyPage.nodeOps.getNodeCount())
+      .toBeGreaterThanOrEqual(2)
+
+    const getNodeTypes = () =>
+      comfyPage.page.evaluate(() =>
+        window.app!.graph.nodes.map((n: { type: string }) => n.type)
+      )
+    await expect.poll(getNodeTypes).toContain('KSampler')
+    await expect.poll(getNodeTypes).toContain('EmptyLatentImage')
+    await expect
+      .poll(getNodeTypes)
+      .not.toContain('NonExistentCustomNode_XYZ_12345')
+  })
+
+  test('Canvas has auxclick handler to prevent middle-click paste', async ({
+    comfyPage
+  }) => {
+    test.info().annotations.push({
+      type: 'regression',
+      description:
+        'PR #8259 — middle-click paste duplicates entire workflow on Linux'
+    })
+
+    const initialNodeCount = await comfyPage.nodeOps.getNodeCount()
+
+    await comfyPage.canvas.click({
+      button: 'middle',
+      position: { x: 100, y: 100 }
+    })
+
+    await expect
+      .poll(() => comfyPage.nodeOps.getNodeCount())
+      .toBe(initialNodeCount)
+  })
+
+  test('Exported workflow does not contain transient blob: URLs', async ({
+    comfyPage
+  }) => {
+    test.info().annotations.push({
+      type: 'regression',
+      description:
+        'PR #8715 — transient image URLs leaked into workflow serialization'
+    })
+
+    await expect
+      .poll(async () => {
+        const exportedWorkflow = await comfyPage.workflow.getExportedWorkflow()
+        for (const node of exportedWorkflow.nodes) {
+          if (node.widgets_values && Array.isArray(node.widgets_values)) {
+            for (const value of node.widgets_values) {
+              if (typeof value === 'string') {
+                if (value.startsWith('blob:')) return `blob URL found: ${value}`
+                if (value.includes('/api/view'))
+                  return `api/view URL found: ${value}`
+              }
+            }
+          }
+        }
+        return 'ok'
+      })
+      .toBe('ok')
+  })
+
+  test('Changing locale does not break workflow operations', async ({
+    comfyPage
+  }) => {
+    test.info().annotations.push({
+      type: 'regression',
+      description: 'PR #8963 — template workflows not reloaded on locale change'
+    })
+
+    const tab = comfyPage.menu.workflowsTab
+    await tab.open()
+    await comfyPage.menu.topbar.saveWorkflow('locale-test')
+
+    const initialNodeCount = await comfyPage.nodeOps.getNodeCount()
+
+    await comfyPage.settings.setSetting('Comfy.Locale', 'zh')
+
+    await comfyPage.settings.setSetting('Comfy.Locale', 'en')
+
+    await expect
+      .poll(() => comfyPage.nodeOps.getNodeCount())
+      .toBe(initialNodeCount)
+
+    await expect.poll(() => tab.getActiveWorkflowName()).toBe('locale-test')
+  })
+
+  test('Node links survive save/load/switch cycles', async ({ comfyPage }) => {
+    test.info().annotations.push({
+      type: 'regression',
+      description: 'PR #9533 — node links must survive serialization roundtrips'
+    })
+
+    const tab = comfyPage.menu.workflowsTab
+    await tab.open()
+
+    // Link count requires internal graph state — not exposed via DOM
+    const linkCountBefore = await getLinkCount(comfyPage)
+    expect(linkCountBefore).toBeGreaterThan(0)
+
+    await comfyPage.menu.topbar.saveWorkflow('links-test')
+
+    await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
+    await comfyPage.workflow.waitForWorkflowIdle()
+
+    await tab.switchToWorkflow('links-test')
+    await comfyPage.workflow.waitForWorkflowIdle()
+
+    await expect.poll(() => getLinkCount(comfyPage)).toBe(linkCountBefore)
+  })
+
+  test('Closing an unmodified inactive tab preserves both workflows', async ({
+    comfyPage
+  }) => {
+    test.info().annotations.push({
+      type: 'regression',
+      description:
+        'PR #10745 — closing inactive tab could corrupt the persisted file'
+    })
+
+    await comfyPage.settings.setSetting(
+      'Comfy.Workflow.WorkflowTabsPosition',
+      'Topbar'
+    )
+
+    const suffix = Date.now().toString(36)
+    const nameA = `test-A-${suffix}`
+    const nameB = `test-B-${suffix}`
+
+    // Save the default workflow as A
+    await comfyPage.menu.topbar.saveWorkflow(nameA)
+    const nodeCountA = await comfyPage.nodeOps.getNodeCount()
+
+    // Create B: duplicate, add a node, then save (unmodified after save)
+    await comfyPage.command.executeCommand('Comfy.DuplicateWorkflow')
+
+    await comfyPage.page.evaluate(() => {
+      window.app!.graph.add(window.LiteGraph!.createNode('Note', undefined, {}))
+    })
+    await comfyPage.nextFrame()
+    await comfyPage.menu.topbar.saveWorkflow(nameB)
+
+    await expect
+      .poll(() => comfyPage.nodeOps.getNodeCount())
+      .toBe(nodeCountA + 1)
+    const nodeCountB = await comfyPage.nodeOps.getNodeCount()
+
+    // Switch to A (making B inactive and unmodified)
+    await comfyPage.menu.topbar.getWorkflowTab(nameA).click()
+    await comfyPage.workflow.waitForWorkflowIdle()
+    await expect.poll(() => comfyPage.nodeOps.getNodeCount()).toBe(nodeCountA)
+
+    // Close inactive B via middle-click — no save dialog expected
+    await comfyPage.menu.topbar.getWorkflowTab(nameB).click({
+      button: 'middle'
+    })
+    await comfyPage.nextFrame()
+
+    // A should still have its own content
+    await expect.poll(() => comfyPage.nodeOps.getNodeCount()).toBe(nodeCountA)
+
+    // Reopen B from saved list
+    const workflowsTab = comfyPage.menu.workflowsTab
+    await workflowsTab.open()
+    await workflowsTab.getPersistedItem(nameB).dblclick()
+    await comfyPage.workflow.waitForWorkflowIdle()
+
+    // B should have its original content, not A's
+    await expect.poll(() => comfyPage.nodeOps.getNodeCount()).toBe(nodeCountB)
+  })
+
+  test('Closing an inactive tab with save preserves its own content', async ({
+    comfyPage
+  }) => {
+    test.info().annotations.push({
+      type: 'regression',
+      description:
+        'PR #10745 — saveWorkflow called captureCanvasState on inactive tab, serializing the active graph instead'
+    })
+
+    await comfyPage.settings.setSetting(
+      'Comfy.Workflow.WorkflowTabsPosition',
+      'Topbar'
+    )
+
+    const suffix = Date.now().toString(36)
+    const nameA = `test-A-${suffix}`
+    const nameB = `test-B-${suffix}`
+
+    // Save the default workflow as A
+    await comfyPage.menu.topbar.saveWorkflow(nameA)
+    const nodeCountA = await comfyPage.nodeOps.getNodeCount()
+
+    // Create B: duplicate and save
+    await comfyPage.command.executeCommand('Comfy.DuplicateWorkflow')
+    await comfyPage.menu.topbar.saveWorkflow(nameB)
+
+    // Add a Note node in B to mark it as modified
+    await comfyPage.page.evaluate(() => {
+      window.app!.graph.add(window.LiteGraph!.createNode('Note', undefined, {}))
+    })
+    await comfyPage.nextFrame()
+
+    await expect
+      .poll(() => comfyPage.nodeOps.getNodeCount())
+      .toBe(nodeCountA + 1)
+    const nodeCountB = await comfyPage.nodeOps.getNodeCount()
+
+    // Trigger captureCanvasState so isModified is set
+    await comfyPage.page.evaluate(() => {
+      const em = window.app!.extensionManager as unknown as Record<
+        string,
+        { activeWorkflow?: { changeTracker?: { captureCanvasState(): void } } }
+      >
+      em.workflow?.activeWorkflow?.changeTracker?.captureCanvasState()
+    })
+
+    // Switch to A via topbar tab (making B inactive)
+    await comfyPage.menu.topbar.getWorkflowTab(nameA).click()
+    await comfyPage.workflow.waitForWorkflowIdle()
+    await expect.poll(() => comfyPage.nodeOps.getNodeCount()).toBe(nodeCountA)
+
+    // Close inactive B tab via middle-click — triggers "Save before closing?"
+    await comfyPage.menu.topbar.getWorkflowTab(nameB).click({
+      button: 'middle'
+    })
+
+    // Click "Save" in the dirty close dialog
+    const saveButton = comfyPage.page.getByRole('button', { name: 'Save' })
+    await saveButton.waitFor({ state: 'visible' })
+    await saveButton.click()
+    await comfyPage.workflow.waitForWorkflowIdle()
+    await comfyPage.nextFrame()
+
+    // Verify we're still on A with A's content
+    await expect.poll(() => comfyPage.nodeOps.getNodeCount()).toBe(nodeCountA)
+
+    // Re-open B from sidebar saved list
+    const workflowsTab = comfyPage.menu.workflowsTab
+    await workflowsTab.open()
+    await workflowsTab.getPersistedItem(nameB).dblclick()
+    await comfyPage.workflow.waitForWorkflowIdle()
+
+    // B should have the extra Note node we added, not A's node count
+    await expect.poll(() => comfyPage.nodeOps.getNodeCount()).toBe(nodeCountB)
+  })
+
+  test('Closing an inactive unsaved tab with save preserves its own content', async ({
+    comfyPage
+  }) => {
+    test.info().annotations.push({
+      type: 'regression',
+      description:
+        'PR #10745 — saveWorkflowAs called captureCanvasState on inactive temp tab, serializing the active graph'
+    })
+
+    await comfyPage.settings.setSetting(
+      'Comfy.Workflow.WorkflowTabsPosition',
+      'Topbar'
+    )
+
+    const suffix = Date.now().toString(36)
+    const nameA = `test-A-${suffix}`
+    const nameB = `test-B-${suffix}`
+
+    // Save the default workflow as A
+    await comfyPage.menu.topbar.saveWorkflow(nameA)
+    const nodeCountA = await comfyPage.nodeOps.getNodeCount()
+
+    // Create B as an unsaved workflow with a Note node
+    await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
+
+    await comfyPage.page.evaluate(() => {
+      window.app!.graph.add(window.LiteGraph!.createNode('Note', undefined, {}))
+    })
+    await comfyPage.nextFrame()
+
+    // Trigger captureCanvasState so isModified is set
+    await comfyPage.page.evaluate(() => {
+      const em = window.app!.extensionManager as unknown as Record<
+        string,
+        { activeWorkflow?: { changeTracker?: { captureCanvasState(): void } } }
+      >
+      em.workflow?.activeWorkflow?.changeTracker?.captureCanvasState()
+    })
+
+    await expect.poll(() => comfyPage.nodeOps.getNodeCount()).toBe(1)
+
+    // Switch to A via topbar tab (making unsaved B inactive)
+    await comfyPage.menu.topbar.getWorkflowTab(nameA).click()
+    await comfyPage.workflow.waitForWorkflowIdle()
+    await expect.poll(() => comfyPage.nodeOps.getNodeCount()).toBe(nodeCountA)
+
+    // Close inactive unsaved B tab — triggers "Save before closing?"
+    await comfyPage.menu.topbar
+      .getWorkflowTab('Unsaved Workflow')
+      .click({ button: 'middle' })
+
+    // Click "Save" in the dirty close dialog
+    await comfyPage.confirmDialog.click('save')
+
+    // Fill in the filename dialog
+    const saveDialog = comfyPage.menu.topbar.getSaveDialog()
+    await saveDialog.waitFor({ state: 'visible' })
+    await saveDialog.fill(nameB)
+    await comfyPage.page.keyboard.press('Enter')
+    await comfyPage.workflow.waitForWorkflowIdle()
+    await comfyPage.nextFrame()
+
+    // Verify we're still on A with A's content
+    await expect.poll(() => comfyPage.nodeOps.getNodeCount()).toBe(nodeCountA)
+
+    // Re-open B from sidebar saved list
+    const workflowsTab = comfyPage.menu.workflowsTab
+    await workflowsTab.open()
+    await workflowsTab.getPersistedItem(nameB).dblclick()
+    await comfyPage.workflow.waitForWorkflowIdle()
+
+    // B should have 1 node (the Note), not A's node count
+    await expect.poll(() => comfyPage.nodeOps.getNodeCount()).toBe(1)
+  })
+
+  test('Splitter panel sizes persist correctly in localStorage', async ({
+    comfyPage
+  }) => {
+    test.info().annotations.push({
+      type: 'regression',
+      description:
+        'Commits 91f197d9d + a1b7e57bc — splitter panel size drift on reload'
+    })
+
+    await comfyPage.page.evaluate(() => {
+      localStorage.setItem(
+        'Comfy.Splitter.MainSplitter',
+        JSON.stringify([30, 70])
+      )
+    })
+
+    await comfyPage.setup({ clearStorage: false })
+    await comfyPage.nextFrame()
+
+    const getSplitterSizes = () =>
+      comfyPage.page.evaluate(() => {
+        const raw = localStorage.getItem('Comfy.Splitter.MainSplitter')
+        return raw ? (JSON.parse(raw) as number[]) : null
+      })
+
+    await expect
+      .poll(async () => {
+        const sizes = await getSplitterSizes()
+        if (!Array.isArray(sizes)) return 'not an array'
+        for (const size of sizes) {
+          if (typeof size !== 'number') return `non-number entry: ${size}`
+          if (size < 0) return `negative size: ${size}`
+          if (Number.isNaN(size)) return `NaN entry`
+        }
+        return 'ok'
+      })
+      .toBe('ok')
+
+    await expect
+      .poll(async () => {
+        const sizes = await getSplitterSizes()
+        if (!sizes) return 0
+        return sizes.reduce((a, b) => a + b, 0)
+      })
+      .toBeGreaterThan(90)
+
+    await expect
+      .poll(async () => {
+        const sizes = await getSplitterSizes()
+        if (!sizes) return Infinity
+        return sizes.reduce((a, b) => a + b, 0)
+      })
+      .toBeLessThanOrEqual(101)
+  })
+})
diff --git a/browser_tests/tests/workflowTabThumbnail.spec.ts b/browser_tests/tests/workflowTabThumbnail.spec.ts
index bd8a5efe1d..d7aebbd557 100644
--- a/browser_tests/tests/workflowTabThumbnail.spec.ts
+++ b/browser_tests/tests/workflowTabThumbnail.spec.ts
@@ -1,11 +1,10 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import type { ComfyPage } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 
 test.describe('Workflow Tab Thumbnails', { tag: '@workflow' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting(
       'Comfy.Workflow.WorkflowTabsPosition',
       'Topbar'
@@ -30,7 +29,7 @@ test.describe('Workflow Tab Thumbnails', { tag: '@workflow' }, () => {
 
     const popover = comfyPage.page.locator('.workflow-popover-fade')
     await expect(popover).toHaveCount(1)
-    await expect(popover).toBeVisible({ timeout: 500 })
+    await expect(popover).toBeVisible()
     if (name) {
       await expect(popover).toContainText(name)
     }
@@ -83,17 +82,19 @@ test.describe('Workflow Tab Thumbnails', { tag: '@workflow' }, () => {
       1,
       'Unsaved Workflow (2)'
     )
-    await expect(thumbnailImg).not.toBeVisible()
+    await expect(thumbnailImg).toBeHidden()
   })
 
   async function addNode(comfyPage: ComfyPage, category: string, node: string) {
     const canvasArea = await comfyPage.canvas.boundingBox()
 
     await comfyPage.page.mouse.move(
-      canvasArea!.x + canvasArea!.width - 100,
-      100
+      canvasArea!.x + canvasArea!.width / 2,
+      canvasArea!.y + canvasArea!.height / 2
+    )
+    await expect(comfyPage.page.locator('.workflow-popover-fade')).toHaveCount(
+      0
     )
-    await expect(comfyPage.page.locator('.workflow-popover-fade')).toBeHidden()
 
     await comfyPage.canvasOps.rightClick(200, 200)
     await comfyPage.page.getByText('Add Node').click()
diff --git a/browser_tests/tests/zoomControls.spec.ts b/browser_tests/tests/zoomControls.spec.ts
index 21c9077663..1d9dd9a615 100644
--- a/browser_tests/tests/zoomControls.spec.ts
+++ b/browser_tests/tests/zoomControls.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
 
 test.describe('Zoom Controls', { tag: '@canvas' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -11,19 +11,27 @@ test.describe('Zoom Controls', { tag: '@canvas' }, () => {
   })
 
   test('Default zoom is 100% and node has a size', async ({ comfyPage }) => {
-    const nodeSize = await comfyPage.page.evaluate(
-      () => window.app!.graph.nodes[0].size
-    )
-    expect(nodeSize[0]).toBeGreaterThan(0)
-    expect(nodeSize[1]).toBeGreaterThan(0)
+    await expect
+      .poll(() =>
+        comfyPage.page.evaluate(
+          () => window.app!.graph.nodes[0]?.size?.[0] ?? 0
+        )
+      )
+      .toBeGreaterThan(0)
+    await expect
+      .poll(() =>
+        comfyPage.page.evaluate(
+          () => window.app!.graph.nodes[0]?.size?.[1] ?? 0
+        )
+      )
+      .toBeGreaterThan(0)
 
     const zoomButton = comfyPage.page.getByTestId(
       TestIds.canvas.zoomControlsButton
     )
     await expect(zoomButton).toContainText('100%')
 
-    const scale = await comfyPage.canvasOps.getScale()
-    expect(scale).toBeCloseTo(1.0, 1)
+    await expect.poll(() => comfyPage.canvasOps.getScale()).toBeCloseTo(1.0, 1)
   })
 
   test('Zoom to fit reduces percentage', async ({ comfyPage }) => {
@@ -37,9 +45,7 @@ test.describe('Zoom Controls', { tag: '@canvas' }, () => {
     await expect(zoomToFit).toBeVisible()
     await zoomToFit.click()
 
-    await expect
-      .poll(() => comfyPage.canvasOps.getScale(), { timeout: 2000 })
-      .toBeLessThan(1.0)
+    await expect.poll(() => comfyPage.canvasOps.getScale()).toBeLessThan(1.0)
 
     await expect(zoomButton).not.toContainText('100%')
   })
@@ -57,8 +63,9 @@ test.describe('Zoom Controls', { tag: '@canvas' }, () => {
     await zoomOut.click()
     await comfyPage.nextFrame()
 
-    const newScale = await comfyPage.canvasOps.getScale()
-    expect(newScale).toBeLessThan(initialScale)
+    await expect
+      .poll(() => comfyPage.canvasOps.getScale())
+      .toBeLessThan(initialScale)
   })
 
   test('Zoom out clamps at 10% minimum', async ({ comfyPage }) => {
@@ -74,9 +81,7 @@ test.describe('Zoom Controls', { tag: '@canvas' }, () => {
     }
     await comfyPage.nextFrame()
 
-    await expect
-      .poll(() => comfyPage.canvasOps.getScale(), { timeout: 2000 })
-      .toBeCloseTo(0.1, 1)
+    await expect.poll(() => comfyPage.canvasOps.getScale()).toBeCloseTo(0.1, 1)
 
     await expect(zoomButton).toContainText('10%')
   })
@@ -93,29 +98,26 @@ test.describe('Zoom Controls', { tag: '@canvas' }, () => {
     const input = comfyPage.page
       .getByTestId(TestIds.canvas.zoomPercentageInput)
       .locator('input')
-    await input.focus()
-    await comfyPage.page.keyboard.press('Control+a')
-    await input.pressSequentially('100')
+    await input.fill('100')
     await input.press('Enter')
     await comfyPage.nextFrame()
 
-    await expect
-      .poll(() => comfyPage.canvasOps.getScale(), { timeout: 2000 })
-      .toBeCloseTo(1.0, 1)
+    await expect.poll(() => comfyPage.canvasOps.getScale()).toBeCloseTo(1.0, 1)
 
     const zoomIn = comfyPage.page.getByTestId(TestIds.canvas.zoomInAction)
     await zoomIn.click()
     await comfyPage.nextFrame()
 
+    await expect.poll(() => comfyPage.canvasOps.getScale()).toBeGreaterThan(1.0)
     const scaleAfterZoomIn = await comfyPage.canvasOps.getScale()
-    expect(scaleAfterZoomIn).toBeGreaterThan(1.0)
 
     const zoomOut = comfyPage.page.getByTestId(TestIds.canvas.zoomOutAction)
     await zoomOut.click()
     await comfyPage.nextFrame()
 
-    const scaleAfterZoomOut = await comfyPage.canvasOps.getScale()
-    expect(scaleAfterZoomOut).toBeLessThan(scaleAfterZoomIn)
+    await expect
+      .poll(() => comfyPage.canvasOps.getScale())
+      .toBeLessThan(scaleAfterZoomIn)
   })
 
   test('Clicking zoom button toggles zoom controls visibility', async ({
@@ -133,6 +135,6 @@ test.describe('Zoom Controls', { tag: '@canvas' }, () => {
     await zoomButton.click()
     await comfyPage.nextFrame()
 
-    await expect(zoomToFit).not.toBeVisible()
+    await expect(zoomToFit).toBeHidden()
   })
 })
diff --git a/codecov.yml b/codecov.yml
new file mode 100644
index 0000000000..b36eb056a9
--- /dev/null
+++ b/codecov.yml
@@ -0,0 +1,6 @@
+comment:
+  layout: 'header, diff, flags, files'
+  behavior: default
+  require_changes: false
+  require_base: false
+  require_head: true
diff --git a/docs/FEATURE_FLAGS.md b/docs/FEATURE_FLAGS.md
index 957f2ea447..d5934c455c 100644
--- a/docs/FEATURE_FLAGS.md
+++ b/docs/FEATURE_FLAGS.md
@@ -363,7 +363,7 @@ Test your feature flags with different combinations:
 ### Example Test
 
 ```typescript
-// In tests-ui/tests/api.featureFlags.test.ts
+// Example from a colocated unit test
 it('should handle preview metadata based on feature flag', () => {
   // Mock server supports feature
   api.serverFeatureFlags = { supports_preview_metadata: true }
diff --git a/docs/architecture/change-tracker.md b/docs/architecture/change-tracker.md
index 21527b521c..50ff336844 100644
--- a/docs/architecture/change-tracker.md
+++ b/docs/architecture/change-tracker.md
@@ -5,14 +5,18 @@ history by comparing serialized graph snapshots.
 
 ## How It Works
 
-`checkState()` is the core method. It:
+`captureCanvasState()` 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.
+links, etc.) are only captured when `captureCanvasState()` is explicitly triggered.
+
+**INVARIANT:** `captureCanvasState()` asserts that it is called on the active
+workflow's tracker. Calling it on an inactive tracker logs a warning and
+returns early, preventing cross-workflow data corruption.
 
 ## Automatic Triggers
 
@@ -31,7 +35,7 @@ These are set up once in `ChangeTracker.init()`:
 | 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
+## When You Must Call `captureCanvasState()` Manually
 
 The automatic triggers above are designed around LiteGraph's native DOM
 rendering. They **do not cover**:
@@ -50,24 +54,42 @@ rendering. They **do not cover**:
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 
 // After mutating the graph:
-useWorkflowStore().activeWorkflow?.changeTracker?.checkState()
+useWorkflowStore().activeWorkflow?.changeTracker?.captureCanvasState()
 ```
 
 ### Existing Manual Call Sites
 
-These locations already call `checkState()` explicitly:
+These locations call `captureCanvasState()` directly:
 
 - `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
+- `builderViewOptions.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
+- `appModeStore.ts` — After app mode transitions
+
+`workflowService.ts` calls `captureCanvasState()` indirectly via
+`deactivate()` and `prepareForSave()` (see Lifecycle Methods below).
+
+> **Deprecated:** `checkState()` is an alias for `captureCanvasState()` kept
+> for extension compatibility. Extension authors should migrate to
+> `captureCanvasState()`. See the `@deprecated` JSDoc on the method.
+
+## Lifecycle Methods
+
+| Method                 | Caller                          | Purpose                                                                                                                                          |
+| ---------------------- | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `captureCanvasState()` | Event handlers, UI interactions | Snapshots canvas into activeState, pushes undo. Asserts active tracker.                                                                          |
+| `deactivate()`         | `beforeLoadNewGraph` only       | `captureCanvasState()` (skipped during undo/redo) + `store()`. Freezes state for tab switch. Must be called while this workflow is still active. |
+| `prepareForSave()`     | Save paths only                 | Active: calls `captureCanvasState()`. Inactive: no-op (state was frozen by `deactivate()`).                                                      |
+| `store()`              | Internal to `deactivate()`      | Saves viewport scale/offset, node outputs, subgraph navigation.                                                                                  |
+| `restore()`            | `afterLoadNewGraph`             | Restores viewport, outputs, subgraph navigation.                                                                                                 |
+| `reset()`              | `afterLoadNewGraph`, save       | Resets initial state (marks workflow as "clean").                                                                                                |
 
 ## Transaction Guards
 
@@ -76,7 +98,7 @@ 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
+changeTracker.afterChange() // calls captureCanvasState() when nesting count hits 0
 ```
 
 The `litegraph:canvas` custom event also supports this with `before-change` /
@@ -84,8 +106,12 @@ The `litegraph:canvas` custom event also supports this with `before-change` /
 
 ## Key Invariants
 
-- `checkState()` is a no-op during `loadGraphData` (guarded by
+- `captureCanvasState()` asserts it is called on the active workflow's tracker;
+  inactive trackers get an early return (and a warning log)
+- `captureCanvasState()` 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)
+- `captureCanvasState()` is a no-op during undo/redo (guarded by
+  `_restoringState`) to prevent undo history corruption
+- `captureCanvasState()` 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
diff --git a/docs/guidance/design-standards.md b/docs/guidance/design-standards.md
new file mode 100644
index 0000000000..faa7d13c96
--- /dev/null
+++ b/docs/guidance/design-standards.md
@@ -0,0 +1,66 @@
+---
+globs:
+  - 'src/components/**/*.vue'
+  - 'src/views/**/*.vue'
+---
+
+# Comfy Design Standards
+
+Applies when implementing or modifying user-facing components and views.
+
+## Before Implementing UI Changes
+
+Consult the **Comfy Design Standards** Figma file to ensure your changes follow the agreed-upon design principles. Use the Figma MCP tool to fetch the current standards:
+
+```javascript
+get_figma_data({ fileKey: 'QreIv5htUaSICNuO2VBHw0', nodeId: '0:1' })
+```
+
+The Figma file is the single source of truth. Always fetch it live — do not rely on cached assumptions.
+
+> **Note:** The Figma MCP is read-only. It cannot detect changes or diffs between versions. Always fetch the latest state before implementing.
+
+### Key Sections
+
+| Section              | Node ID   | When to consult                                                               |
+| -------------------- | --------- | ----------------------------------------------------------------------------- |
+| Hover States         | `1:2`     | Adding/modifying interactive elements (buttons, inputs, links, nav items)     |
+| Click Targets        | `4:243`   | Adding clickable elements, especially small ones (icons, handles, connectors) |
+| Affordances          | `15:2202` | Any interactive element — ensuring visual feedback on interaction             |
+| Feedback             | `15:2334` | User actions that need confirmation, success/error states                     |
+| Slips and How to Fix | `15:2337` | Error prevention, undo patterns, destructive actions                          |
+| Design Pillars       | `15:2340` | New features, architectural UI decisions                                      |
+| The User             | `16:2348` | User flows, onboarding, accessibility                                         |
+
+Fetch the specific section relevant to your task:
+
+```javascript
+get_figma_data({ fileKey: 'QreIv5htUaSICNuO2VBHw0', nodeId: '<node-id>' })
+```
+
+## Figma Component Reference
+
+The Figma file contains component specifications. When implementing these components, fetch details to match the design:
+
+| Component         | Component Set ID |
+| ----------------- | ---------------- |
+| Button/Default    | `4:314`          |
+| Search            | `4:2366`         |
+| Base Node Example | `4:4739`         |
+
+## Figma Token Translation Rules
+
+When translating Figma design tokens into code:
+
+- **Skip `-hover` and `-selected` suffixed tokens.** These states exist in Figma only for prototype demonstrations. On the frontend, hover and selected states must be derived programmatically (e.g., via `color-mix()` or Tailwind modifier classes like `hover:`).
+- **Color tier system:** Figma uses a tiered color hierarchy:
+  - **Base** — default surface/background colors
+  - **Secondary** — elevated surfaces (e.g., sidebars, cards)
+  - **Tertiary** — elements on modal panels (one shade lighter than base)
+- Map Figma token names directly to Tailwind 4 semantic tokens — never hardcode hex values.
+
+## Integration with Codebase
+
+- Map Figma color values to Tailwind 4 semantic tokens — never hardcode hex values
+- Use `cn()` from `@/utils/tailwindUtil` for conditional class merging
+- Use the `dark:` avoidance rule from AGENTS.md — semantic tokens handle both themes
diff --git a/docs/guidance/playwright.md b/docs/guidance/playwright.md
index 9e30a1e3a5..dd23a44220 100644
--- a/docs/guidance/playwright.md
+++ b/docs/guidance/playwright.md
@@ -10,82 +10,241 @@ See `docs/testing/*.md` for detailed patterns.
 ## Best Practices
 
 - Follow [Playwright Best Practices](https://playwright.dev/docs/best-practices)
-- Do NOT use `waitForTimeout` - use Locator actions and retrying assertions
+- Do NOT use `waitForTimeout` — use Locator actions and retrying assertions
 - Prefer specific selectors (role, label, test-id)
 - Test across viewports
 
 ## Window Globals
 
 Browser tests access `window.app`, `window.graph`, and `window.LiteGraph` which are
-optional in the main app types. In E2E tests, use non-null assertions (`!`):
+optional in the main app types. Use non-null assertions (`!`) in E2E tests only:
 
 ```typescript
 window.app!.graph!.nodes
 window.LiteGraph!.registered_node_types
 ```
 
-This is the **only context** where non-null assertions are acceptable.
+TODO: Consolidate into a central utility (e.g., `getApp()`) with runtime type checking.
 
-**TODO:** Consolidate these references into a central utility (e.g., `getApp()`) that
-performs proper runtime type checking, removing the need for scattered `!` assertions.
+## Type Assertions
 
-## Type Assertions in E2E Tests
+Use specific type assertions when needed, never `as any`.
 
-E2E tests may use **specific** type assertions when needed, but **never** `as any`.
-
-### Acceptable Patterns
+Acceptable:
 
 ```typescript
-// ✅ Non-null assertions for window globals
 window.app!.extensionManager
-
-// ✅ Specific type assertions with documentation
-// Extensions can register arbitrary setting IDs
 id: 'TestSetting' as TestSettingId
-
-// ✅ Test-local type helpers
 type TestSettingId = keyof Settings
 ```
 
-### Forbidden Patterns
+Forbidden:
 
 ```typescript
-// ❌ Never use `as any`
 settings: testData as any
-
-// ❌ Never modify production types to satisfy test errors
-// Don't add test settings to src/schemas/apiSchema.ts
-
-// ❌ Don't chain through unknown to bypass types
-data as unknown as SomeType // Avoid; prefer `as Partial<SomeType> as SomeType` or explicit typings
+data as unknown as SomeType
 ```
 
-### Accessing Internal State
+Access internal state via `page.evaluate` and stores directly — don't change public API types to expose internals.
 
-When tests need internal store properties (e.g., `.workflow`, `.focusMode`):
+## Assertion Best Practices
+
+Assert preconditions explicitly with a custom message so failures point to the broken assumption:
 
 ```typescript
-// ✅ Access stores directly in page.evaluate
-await page.evaluate(() => {
-  const store = useWorkflowStore()
-  return store.activeWorkflow
-})
+expect(node.widgets, 'Widget count changed — update test fixture').toHaveLength(
+  4
+)
+await node.move(100, 200)
 
-// ❌ Don't change public API types to expose internals
-// Keep app.extensionManager typed as ExtensionManager, not WorkspaceStore
+expect.soft(menuItem1).toBeVisible()
+expect.soft(menuItem2).toBeVisible()
+
+// Bad — bare expect on a precondition gives no context when it fails
+expect(node.widgets).toHaveLength(4)
+```
+
+- `expect(x, 'reason')` for precondition checks unrelated to the test's purpose
+- `expect.soft()` to verify multiple invariants without aborting on the first failure
+
+## Test Structure: Arrange/Act/Assert
+
+1. All mock setup, state resets, and fixture arrangement belongs in `test.beforeEach()` or Playwright fixtures
+2. Inside `test()`, only act (user actions) and assert
+3. Never call `clearAllMocks` or reset mock state mid-test
+
+```typescript
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.workflow.loadWorkflow('test.json')
+})
+test('should do something', async ({ comfyPage }) => {
+  await comfyPage.menu.topbar.click()
+  await expect(comfyPage.menu.nodeLibraryTab.root).toBeVisible()
+})
+```
+
+## Creating New Test Helpers
+
+New domain-specific test helpers (e.g., `AssetHelper`, `JobHelper`) should be
+registered as Playwright fixtures via `base.extend()` rather than attached as
+properties on `ComfyPage`. This enables automatic setup/teardown.
+
+### Extend `base` from Playwright
+
+Keep each fixture self-contained by extending `@playwright/test` directly.
+Compose fixtures together with `mergeTests` when a test needs multiple helpers.
+
+```typescript
+// browser_tests/fixtures/assetFixture.ts
+import { test as base } from '@playwright/test'
+
+export const test = base.extend<{
+  assetHelper: AssetHelper
+}>({
+  assetHelper: async ({ page }, use) => {
+    const helper = new AssetHelper(page)
+    await helper.setup()
+    await use(helper)
+    await helper.cleanup() // automatic teardown
+  }
+})
+```
+
+### Rules
+
+- **Do NOT** add new helpers as properties on `ComfyPage`
+- Each fixture gets automatic cleanup via the callback after `use()`
+- Keep fixtures modular — extend `@playwright/test` base, not
+  `comfyPageFixture`, so they can be composed via `mergeTests`
+
+## Custom Assertions
+
+Add assertion methods directly on the page object or helper class instead of extending `comfyExpect`. Page object methods are discoverable via IntelliSense without special imports.
+
+```typescript
+// ✅ Page object assertions
+await node.expectPinned()
+await node.expectBypassed()
+
+// ❌ Do not add custom matchers to comfyExpect
 ```
 
 ## Test Tags
 
-Tags are respected by config:
-
-- `@mobile` - Mobile viewport tests
-- `@2x` - High DPI tests
+- `@mobile` — Mobile viewport tests
+- `@2x` — High DPI tests
 
 ## Test Data
 
-- Check `browser_tests/assets/` for test data and fixtures
-- Use realistic ComfyUI workflows for E2E tests
+- Check `browser_tests/assets/` for fixtures
+- Use realistic ComfyUI workflows
+- When multiple nodes share the same title, use `vueNodes.getNodeByTitle(name).nth(n)` — Playwright strict mode will fail on ambiguous locators
+
+## Fixture Data & Schemas
+
+When creating test fixture data, import or reference existing Zod schemas and TypeScript
+types from `src/` instead of inventing ad-hoc shapes. This keeps test data in sync with
+production types.
+
+Key schema locations:
+
+- `src/schemas/apiSchema.ts` — API response types (`PromptResponse`, `SystemStats`, `User`, `UserDataFullInfo`, WebSocket messages)
+- `src/schemas/nodeDefSchema.ts` — Node definition schema (`ComfyNodeDef`, `InputSpec`, `ComboInputSpec`)
+- `src/schemas/nodeDef/nodeDefSchemaV2.ts` — V2 node definition schema
+- `src/platform/remote/comfyui/jobs/jobTypes.ts` — Jobs API Zod schemas (`zJobDetail`, `zJobsListResponse`, `zRawJobListItem`)
+- `src/platform/workflow/validation/schemas/workflowSchema.ts` — Workflow validation (`ComfyWorkflowJSON`, `ComfyApiWorkflow`)
+- `src/types/metadataTypes.ts` — Asset metadata types
+
+## Typed API Mocks
+
+When mocking API responses with `route.fulfill()`, **always** type the response body
+using existing schemas or generated types — never use untyped inline JSON objects.
+This catches shape mismatches at compile time instead of through flaky runtime failures.
+
+All three generated-type packages (`ingest-types`, `registry-types`, `generatedManagerTypes`)
+are auto-generated from their respective OpenAPI specs. Prefer these as the single
+source of truth for any mock that targets their endpoints.
+
+### Sources of truth
+
+| Endpoint category                                   | Type source                                                                                         |
+| --------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
+| Cloud-only (hub, billing, workflows)                | `@comfyorg/ingest-types` (`packages/ingest-types`, auto-generated from OpenAPI)                     |
+| Registry (releases, nodes, publishers)              | `@comfyorg/registry-types` (`packages/registry-types`, auto-generated from OpenAPI)                 |
+| Manager (queue tasks, packages)                     | `generatedManagerTypes.ts` (`src/workbench/extensions/manager/types/`, auto-generated from OpenAPI) |
+| Python backend (queue, history, settings, features) | Manual Zod schemas in `src/schemas/apiSchema.ts`                                                    |
+| Node definitions                                    | `src/schemas/nodeDefSchema.ts`                                                                      |
+| Templates                                           | `src/platform/workflow/templates/types/template.ts`                                                 |
+
+### Patterns
+
+```typescript
+// ✅ Import the type and annotate mock data
+import type { ReleaseNote } from '@/platform/updates/common/releaseService'
+
+const mockRelease: ReleaseNote = {
+  id: 1,
+  project: 'comfyui',
+  version: 'v0.3.44',
+  attention: 'medium',
+  content: '## New Features',
+  published_at: new Date().toISOString()
+}
+body: JSON.stringify([mockRelease])
+
+// ❌ Untyped inline JSON — schema drift goes unnoticed
+body: JSON.stringify([{ id: 1, project: 'comfyui', version: 'v0.3.44', ... }])
+```
+
+## When to Use `page.evaluate`
+
+### Acceptable (use sparingly)
+
+Reading internal state that has no UI representation (prefer locator
+assertions whenever possible):
+
+```typescript
+// Reading graph/store values
+const nodeCount = await page.evaluate(() => window.app!.graph!.nodes.length)
+const linkSlot = await page.evaluate(() => window.app!.graph!.links.get(1)?.target_slot)
+
+// Reading computed properties or store state
+await page.evaluate(() => useWorkflowStore().activeWorkflow)
+
+// Setting up test fixtures (registering extensions, mock error handlers)
+await page.evaluate(() => {
+  window.app!.registerExtension({ name: 'TestExt', settings: [...] })
+})
+```
+
+### Avoid
+
+Performing actions that have a UI equivalent — use Playwright locators and user
+interactions instead:
+
+```typescript
+// Bad: setting a widget value programmatically
+await page.evaluate(() => { node.widgets![0].value = 512 })
+// Good: click the widget and type the value
+await widgetLocator.click()
+await widgetLocator.fill('512')
+
+// Bad: dispatching synthetic DOM events
+await page.evaluate(() => { btn.dispatchEvent(new MouseEvent('click', ...)) })
+// Good: use Playwright's click
+await page.getByTestId('more-options-button').click()
+
+// Bad: calling store actions that correspond to user interactions
+await page.evaluate(() => { app.queuePrompt(0) })
+// Good: click the Queue button
+await page.getByRole('button', { name: 'Queue' }).click()
+```
+
+### Preferred
+
+Use helper methods from `browser_tests/fixtures/helpers/` that wrap real user
+interactions (e.g., `comfyPage.settings.setSetting`, `comfyPage.nodeOps`,
+`comfyPage.workflow.loadWorkflow`).
 
 ## Running Tests
 
diff --git a/docs/guidance/vitest.md b/docs/guidance/vitest.md
index 90fe19673b..94ac5b4b10 100644
--- a/docs/guidance/vitest.md
+++ b/docs/guidance/vitest.md
@@ -23,7 +23,7 @@ See `docs/testing/*.md` for detailed patterns.
 
 ## Component Testing
 
-- Use Vue Test Utils for component tests
+- Use `@testing-library/vue` with `@testing-library/user-event` for component tests (an ESLint rule bans `@vue/test-utils` in new tests)
 - Follow advice about making components easy to test
 - Wait for reactivity with `await nextTick()` after state changes
 
diff --git a/docs/testing/README.md b/docs/testing/README.md
index 82aca22960..5859d4a90d 100644
--- a/docs/testing/README.md
+++ b/docs/testing/README.md
@@ -31,7 +31,7 @@ Our tests use the following frameworks and libraries:
 - [Vitest](https://vitest.dev/) - Test runner and assertion library
 - [@testing-library/vue](https://testing-library.com/docs/vue-testing-library/intro/) - Preferred for user-centric component testing
 - [@testing-library/user-event](https://testing-library.com/docs/user-event/intro/) - Realistic user interaction simulation
-- [@vue/test-utils](https://test-utils.vuejs.org/) - Vue component testing utilities (also accepted)
+- [@vue/test-utils](https://test-utils.vuejs.org/) - Vue component testing utilities (legacy; new tests must use @testing-library/vue)
 - [Pinia](https://pinia.vuejs.org/cookbook/testing.html) - For store testing
 
 ## Getting Started
diff --git a/docs/testing/component-testing.md b/docs/testing/component-testing.md
index 2caa15a770..c6f425f931 100644
--- a/docs/testing/component-testing.md
+++ b/docs/testing/component-testing.md
@@ -1,5 +1,7 @@
 # Component Testing Guide
 
+> **Note**: New component tests must use `@testing-library/vue` with `@testing-library/user-event`. The examples below that use `@vue/test-utils` (`mount`, `wrapper`) are from legacy tests. An ESLint rule enforces this — importing from `@vue/test-utils` in `*.test.ts` files produces a lint error.
+
 This guide covers patterns and examples for testing Vue components in the ComfyUI Frontend codebase.
 
 ## Table of Contents
diff --git a/docs/testing/store-testing.md b/docs/testing/store-testing.md
index 9b736fa36d..889052f561 100644
--- a/docs/testing/store-testing.md
+++ b/docs/testing/store-testing.md
@@ -17,7 +17,7 @@ This guide covers patterns and examples for testing Pinia stores in the ComfyUI
 Basic setup for testing Pinia stores:
 
 ```typescript
-// Example from: tests-ui/tests/store/workflowStore.test.ts
+// Example from a colocated store unit test
 import { createTestingPinia } from '@pinia/testing'
 import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -51,7 +51,7 @@ describe('useWorkflowStore', () => {
 Testing store state changes:
 
 ```typescript
-// Example from: tests-ui/tests/store/workflowStore.test.ts
+// Example from a colocated store unit test
 it('should create a temporary workflow with a unique path', () => {
   const workflow = store.createTemporary()
   expect(workflow.path).toBe('workflows/Unsaved Workflow.json')
@@ -72,7 +72,7 @@ it('should create a temporary workflow not clashing with persisted workflows', a
 Testing store actions:
 
 ```typescript
-// Example from: tests-ui/tests/store/workflowStore.test.ts
+// Example from a colocated store unit test
 describe('openWorkflow', () => {
   it('should load and open a temporary workflow', async () => {
     // Create a test workflow
@@ -115,7 +115,7 @@ describe('openWorkflow', () => {
 Testing store getters:
 
 ```typescript
-// Example from: tests-ui/tests/store/modelStore.test.ts
+// Example from a colocated store unit test
 describe('getters', () => {
   beforeEach(() => {
     setActivePinia(createPinia())
@@ -162,7 +162,7 @@ describe('getters', () => {
 Mocking API and other dependencies:
 
 ```typescript
-// Example from: tests-ui/tests/store/workflowStore.test.ts
+// Example from a colocated store unit test
 // Add mock for api at the top of the file
 vi.mock('@/scripts/api', () => ({
   api: {
@@ -205,7 +205,7 @@ describe('syncWorkflows', () => {
 Testing store watchers and reactive behavior:
 
 ```typescript
-// Example from: tests-ui/tests/store/workflowStore.test.ts
+// Example from a colocated store unit test
 import { nextTick } from 'vue'
 
 describe('Subgraphs', () => {
@@ -253,7 +253,7 @@ describe('Subgraphs', () => {
 Testing store integration with other parts of the application:
 
 ```typescript
-// Example from: tests-ui/tests/store/workflowStore.test.ts
+// Example from a colocated store unit test
 describe('renameWorkflow', () => {
   it('should rename workflow and update bookmarks', async () => {
     const workflow = store.createTemporary('dir/test.json')
diff --git a/docs/testing/unit-testing.md b/docs/testing/unit-testing.md
index aa042ca089..e2da21875b 100644
--- a/docs/testing/unit-testing.md
+++ b/docs/testing/unit-testing.md
@@ -18,7 +18,7 @@ This guide covers patterns and examples for unit testing utilities, composables,
 Testing Vue composables requires handling reactivity correctly:
 
 ```typescript
-// Example from: tests-ui/tests/composables/useServerLogs.test.ts
+// Example from a colocated composable unit test
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { useServerLogs } from '@/composables/useServerLogs'
@@ -59,7 +59,7 @@ describe('useServerLogs', () => {
 Testing LiteGraph-related functionality:
 
 ```typescript
-// Example from: tests-ui/tests/litegraph.test.ts
+// Example from a colocated LiteGraph unit test
 import { LGraph, LGraphNode, LiteGraph } from '@/lib/litegraph'
 import { describe, expect, it } from 'vitest'
 
@@ -93,7 +93,7 @@ describe('LGraph', () => {
 Testing with ComfyUI workflow files:
 
 ```typescript
-// Example from: tests-ui/tests/comfyWorkflow.test.ts
+// Example from a colocated workflow unit test
 import { describe, expect, it } from 'vitest'
 import { validateComfyWorkflow } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { defaultGraph } from '@/scripts/defaultGraph'
@@ -125,7 +125,7 @@ describe('workflow validation', () => {
 Mocking the ComfyUI API object:
 
 ```typescript
-// Example from: tests-ui/tests/composables/useServerLogs.test.ts
+// Example from a colocated composable unit test
 import { describe, expect, it, vi } from 'vitest'
 import { api } from '@/scripts/api'
 
@@ -183,7 +183,7 @@ describe('Function using debounce', () => {
 When you need to test real debounce/throttle behavior:
 
 ```typescript
-// Example from: tests-ui/tests/composables/useWorkflowAutoSave.test.ts
+// Example from a colocated composable unit test
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 describe('debounced function', () => {
@@ -223,7 +223,7 @@ describe('debounced function', () => {
 Creating mock node definitions for testing:
 
 ```typescript
-// Example from: tests-ui/tests/apiTypes.test.ts
+// Example from a colocated schema unit test
 import { describe, expect, it } from 'vitest'
 import {
   type ComfyNodeDef,
diff --git a/eslint.config.ts b/eslint.config.ts
index e6e147a389..e627c2f80f 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -64,6 +64,13 @@ const commonParserOptions = {
   extraFileExtensions
 } as const
 
+const useVirtualListRestriction = {
+  name: '@vueuse/core',
+  importNames: ['useVirtualList'],
+  message:
+    'useVirtualList requires uniform item heights. Use TanStack Virtual (via Reka UI virtualizer or @tanstack/vue-virtual) instead.'
+} as const
+
 export default defineConfig([
   {
     ignores: [
@@ -223,24 +230,32 @@ export default defineConfig([
       ]
     }
   },
-  {
-    files: ['tests-ui/**/*'],
-    rules: {
-      '@typescript-eslint/consistent-type-imports': [
-        'error',
-        { disallowTypeAnnotations: false }
-      ]
-    }
-  },
   {
     files: ['**/*.spec.ts'],
-    ignores: ['browser_tests/tests/**/*.spec.ts'],
+    ignores: ['browser_tests/tests/**/*.spec.ts', 'apps/*/e2e/**/*.spec.ts'],
     rules: {
       'no-restricted-syntax': [
         'error',
         {
           selector: 'Program',
-          message: '.spec.ts files are only allowed under browser_tests/tests/'
+          message:
+            '.spec.ts files are only allowed under browser_tests/tests/ or apps/*/e2e/'
+        }
+      ]
+    }
+  },
+  // fixtures/data/ must contain only static data — no executable code or
+  // Playwright imports. This enforces the architectural separation documented
+  // in browser_tests/AGENTS.md.
+  {
+    files: ['browser_tests/fixtures/data/**/*.ts'],
+    rules: {
+      'no-restricted-syntax': [
+        'error',
+        {
+          selector: 'ImportDeclaration[source.value=/^@playwright/]',
+          message:
+            'fixtures/data/ must contain only static data. No Playwright imports allowed.'
         }
       ]
     }
@@ -356,6 +371,14 @@ export default defineConfig([
     }
   },
 
+  // The website app is a marketing site with no vue-i18n setup
+  {
+    files: ['apps/website/**/*.vue'],
+    rules: {
+      '@intlify/vue-i18n/no-raw-text': 'off'
+    }
+  },
+
   // i18n import enforcement
   // Vue components must use the useI18n() composable, not the global t/d/st/te
   {
@@ -370,7 +393,8 @@ export default defineConfig([
               importNames: ['t', 'd', 'te'],
               message:
                 "In Vue components, use `const { t } = useI18n()` instead of importing from '@/i18n'."
-            }
+            },
+            useVirtualListRestriction
           ]
         }
       ]
@@ -390,6 +414,79 @@ export default defineConfig([
               importNames: ['useI18n'],
               message:
                 "useI18n() requires Vue setup context. Use `import { t } from '@/i18n'` instead."
+            },
+            useVirtualListRestriction
+          ]
+        }
+      ]
+    }
+  },
+  // Preserve the useVirtualList ban for files excluded from the useI18n rule.
+  {
+    files: ['**/use[A-Z]*.ts', '**/*.test.ts', 'src/i18n.ts'],
+    rules: {
+      'no-restricted-imports': [
+        'error',
+        {
+          paths: [useVirtualListRestriction]
+        }
+      ]
+    }
+  },
+  {
+    files: ['**/*.test.ts'],
+    rules: {
+      'no-restricted-imports': [
+        'error',
+        {
+          paths: [
+            {
+              name: '@vue/test-utils',
+              message:
+                'Use @testing-library/vue with @testing-library/user-event instead.'
+            }
+          ]
+        }
+      ]
+    }
+  },
+  // Browser tests must use comfyPageFixture, not raw @playwright/test test
+  {
+    files: ['browser_tests/tests/**/*.spec.ts'],
+    rules: {
+      'no-restricted-imports': [
+        'error',
+        {
+          paths: [
+            {
+              name: '@playwright/test',
+              importNames: ['test'],
+              message:
+                "Use `comfyPageFixture as test` from the ComfyPage fixture module instead of raw `test` from '@playwright/test'."
+            }
+          ],
+          patterns: [
+            {
+              group: ['./**', '../**'],
+              message: 'Use the @e2e/ path alias instead of relative imports.'
+            }
+          ]
+        }
+      ]
+    }
+  },
+  // Enforce @e2e/ alias — no relative imports in browser_tests (non-spec files)
+  {
+    files: ['browser_tests/**/*.ts'],
+    ignores: ['browser_tests/tests/**/*.spec.ts'],
+    rules: {
+      'no-restricted-imports': [
+        'error',
+        {
+          patterns: [
+            {
+              group: ['./**', '../**'],
+              message: 'Use the @e2e/ path alias instead of relative imports.'
             }
           ]
         }
diff --git a/knip.config.ts b/knip.config.ts
index 4d4857c47c..3ff8b597f9 100644
--- a/knip.config.ts
+++ b/knip.config.ts
@@ -1,6 +1,7 @@
 import type { KnipConfig } from 'knip'
 
 const config: KnipConfig = {
+  treatConfigHintsAsErrors: true,
   workspaces: {
     '.': {
       entry: [
@@ -29,15 +30,7 @@ const config: KnipConfig = {
       project: ['src/**/*.{js,ts}']
     },
     'apps/website': {
-      entry: [
-        'src/pages/**/*.astro',
-        'src/layouts/**/*.astro',
-        'src/components/**/*.vue',
-        'src/styles/global.css',
-        'astro.config.ts'
-      ],
-      project: ['src/**/*.{astro,vue,ts}', '*.{js,ts,mjs}'],
-      ignoreDependencies: ['@comfyorg/design-system', '@vercel/analytics']
+      entry: ['src/scripts/**/*.ts']
     }
   },
   ignoreBinaries: ['python3'],
@@ -54,8 +47,6 @@ const config: KnipConfig = {
     // Auto generated API types
     'src/workbench/extensions/manager/types/generatedManagerTypes.ts',
     'packages/ingest-types/src/zod.gen.ts',
-    // Used by stacked PR (feat/glsl-live-preview)
-    'src/renderer/glsl/useGLSLRenderer.ts',
     // Workflow files contain license names that knip misinterprets as binaries
     '.github/workflows/ci-oss-assets-validation.yaml',
     // Pending integration in stacked PR
diff --git a/lint-staged.config.ts b/lint-staged.config.ts
index 0f436504d9..97a95ddd2f 100644
--- a/lint-staged.config.ts
+++ b/lint-staged.config.ts
@@ -14,14 +14,18 @@ export default {
   './**/*.{ts,tsx,vue,mts,json,yaml,md}': (stagedFiles: string[]) => {
     const commands = [...formatAndEslint(stagedFiles), 'pnpm typecheck']
 
-    const hasBrowserTestsChanges = stagedFiles
-      .map((f) => path.relative(process.cwd(), f).replace(/\\/g, '/'))
-      .some((f) => f.startsWith('browser_tests/'))
+    const relativePaths = stagedFiles.map((f) =>
+      path.relative(process.cwd(), f).replace(/\\/g, '/')
+    )
 
-    if (hasBrowserTestsChanges) {
+    if (relativePaths.some((f) => f.startsWith('browser_tests/'))) {
       commands.push('pnpm typecheck:browser')
     }
 
+    if (relativePaths.some((f) => f.startsWith('apps/website/'))) {
+      commands.push('pnpm typecheck:website')
+    }
+
     return commands
   }
 }
diff --git a/package.json b/package.json
index d4f4bd3bd0..7a2683a444 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.43.8",
+  "version": "1.44.4",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -8,6 +8,7 @@
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "type": "module",
   "scripts": {
+    "build:cloud": "cross-env DISTRIBUTION=cloud NODE_OPTIONS='--max-old-space-size=8192' nx build",
     "build:desktop": "nx build @comfyorg/desktop-ui",
     "build-storybook": "storybook build",
     "build:types": "nx build --config vite.types.config.mts && node scripts/prepare-types.js",
@@ -27,16 +28,15 @@
     "json-schema": "tsx scripts/generate-json-schema.ts",
     "knip:no-cache": "knip",
     "knip": "knip --cache",
-    "lint:fix:no-cache": "oxlint src --type-aware --fix && eslint src --fix",
-    "lint:fix": "oxlint src --type-aware --fix && eslint src --cache --fix",
-    "lint:no-cache": "pnpm exec stylelint '{apps,packages,src}/**/*.{css,vue}' && oxlint src --type-aware && eslint src",
+    "lint:fix:no-cache": "oxlint src browser_tests --type-aware --fix && eslint src --fix",
+    "lint:fix": "oxlint src browser_tests --type-aware --fix && eslint src --cache --fix",
+    "lint:no-cache": "pnpm exec stylelint '{apps,packages,src}/**/*.{css,vue}' && oxlint src browser_tests --type-aware && eslint src",
     "lint:unstaged:fix": "git diff --name-only HEAD | grep -E '\\.(js|ts|vue|mts)$' | xargs -r eslint --cache --fix",
     "lint:unstaged": "git diff --name-only HEAD | grep -E '\\.(js|ts|vue|mts)$' | xargs -r eslint --cache",
-    "lint": "pnpm stylelint && oxlint src --type-aware && eslint src --cache",
+    "lint": "pnpm stylelint && oxlint src browser_tests --type-aware && eslint src --cache",
     "lint:desktop": "nx run @comfyorg/desktop-ui:lint",
     "locale": "lobe-i18n locale",
-    "oxlint": "oxlint src --type-aware",
-    "preinstall": "pnpm dlx only-allow pnpm",
+    "oxlint": "oxlint src browser_tests --type-aware",
     "prepare": "husky || true && git config blame.ignoreRevsFile .git-blame-ignore-revs || true",
     "preview": "nx preview",
     "storybook": "nx storybook",
@@ -44,11 +44,14 @@
     "stylelint:fix": "stylelint --cache --fix '{apps,packages,src}/**/*.{css,vue}'",
     "stylelint": "stylelint --cache '{apps,packages,src}/**/*.{css,vue}'",
     "test:browser": "pnpm exec nx e2e",
+    "test:browser:coverage": "cross-env COLLECT_COVERAGE=true pnpm test:browser",
     "test:browser:local": "cross-env PLAYWRIGHT_LOCAL=1 PLAYWRIGHT_TEST_URL=http://localhost:5173 pnpm test:browser",
+    "test:coverage": "vitest run --coverage",
     "test:unit": "nx run test",
     "typecheck": "vue-tsc --noEmit",
     "typecheck:browser": "vue-tsc --project browser_tests/tsconfig.json",
     "typecheck:desktop": "nx run @comfyorg/desktop-ui:typecheck",
+    "typecheck:website": "nx run @comfyorg/website:typecheck",
     "zipdist": "node scripts/zipdist.js",
     "clean": "nx reset"
   },
@@ -71,6 +74,7 @@
     "@primevue/themes": "catalog:",
     "@sentry/vue": "catalog:",
     "@sparkjsdev/spark": "catalog:",
+    "@tanstack/vue-virtual": "catalog:",
     "@tiptap/core": "catalog:",
     "@tiptap/extension-link": "catalog:",
     "@tiptap/extension-table": "catalog:",
@@ -120,6 +124,7 @@
     "zod-validation-error": "catalog:"
   },
   "devDependencies": {
+    "@comfyorg/ingest-types": "workspace:*",
     "@eslint/js": "catalog:",
     "@intlify/eslint-plugin-vue-i18n": "catalog:",
     "@lobehub/i18n-cli": "catalog:",
@@ -138,6 +143,7 @@
     "@testing-library/jest-dom": "catalog:",
     "@testing-library/user-event": "catalog:",
     "@testing-library/vue": "catalog:",
+    "@total-typescript/shoehorn": "catalog:",
     "@types/fs-extra": "catalog:",
     "@types/jsdom": "catalog:",
     "@types/node": "catalog:",
@@ -146,7 +152,6 @@
     "@vitejs/plugin-vue": "catalog:",
     "@vitest/coverage-v8": "catalog:",
     "@vitest/ui": "catalog:",
-    "@vue/test-utils": "catalog:",
     "@webgpu/types": "catalog:",
     "cross-env": "catalog:",
     "eslint": "catalog:",
@@ -155,6 +160,7 @@
     "eslint-plugin-better-tailwindcss": "catalog:",
     "eslint-plugin-import-x": "catalog:",
     "eslint-plugin-oxlint": "catalog:",
+    "eslint-plugin-playwright": "catalog:",
     "eslint-plugin-storybook": "catalog:",
     "eslint-plugin-testing-library": "catalog:",
     "eslint-plugin-unused-imports": "catalog:",
@@ -170,6 +176,7 @@
     "lint-staged": "catalog:",
     "markdown-table": "catalog:",
     "mixpanel-browser": "catalog:",
+    "monocart-coverage-reports": "catalog:",
     "nx": "catalog:",
     "oxfmt": "catalog:",
     "oxlint": "catalog:",
@@ -200,11 +207,21 @@
     "zod-to-json-schema": "catalog:"
   },
   "engines": {
-    "node": "24.x"
+    "node": "24.x",
+    "pnpm": ">=10"
   },
+  "packageManager": "pnpm@10.33.0",
   "pnpm": {
     "overrides": {
       "vite": "catalog:"
-    }
+    },
+    "ignoredBuiltDependencies": [
+      "@firebase/util",
+      "core-js",
+      "protobufjs",
+      "sharp",
+      "unrs-resolver",
+      "vue-demi"
+    ]
   }
 }
diff --git a/packages/design-system/src/css/_palette.css b/packages/design-system/src/css/_palette.css
new file mode 100644
index 0000000000..9a2356aa39
--- /dev/null
+++ b/packages/design-system/src/css/_palette.css
@@ -0,0 +1,38 @@
+@theme {
+  /* Font Families */
+  --font-inter: 'Inter', sans-serif;
+
+  /* Palette Colors */
+  --color-charcoal-100: #55565e;
+  --color-charcoal-200: #494a50;
+  --color-charcoal-300: #3c3d42;
+  --color-charcoal-400: #313235;
+  --color-charcoal-500: #2d2e32;
+  --color-charcoal-600: #262729;
+  --color-charcoal-700: #202121;
+  --color-charcoal-800: #171718;
+
+  --color-neutral-550: #636363;
+
+  --color-ash-300: #bbbbbb;
+  --color-ash-500: #828282;
+  --color-ash-800: #444444;
+
+  --color-smoke-100: #f3f3f3;
+  --color-smoke-200: #e9e9e9;
+  --color-smoke-300: #e1e1e1;
+  --color-smoke-400: #d9d9d9;
+  --color-smoke-500: #c5c5c5;
+  --color-smoke-600: #b4b4b4;
+  --color-smoke-700: #a0a0a0;
+  --color-smoke-800: #8a8a8a;
+
+  --color-white: #ffffff;
+  --color-black: #000000;
+
+  /* Brand Colors */
+  --color-electric-400: #f0ff41;
+  --color-sapphire-700: #172dd7;
+  --color-brand-yellow: var(--color-electric-400);
+  --color-brand-blue: var(--color-sapphire-700);
+}
diff --git a/packages/design-system/src/css/base.css b/packages/design-system/src/css/base.css
index c33844801f..04548f2b3c 100644
--- a/packages/design-system/src/css/base.css
+++ b/packages/design-system/src/css/base.css
@@ -5,42 +5,4 @@
  */
 
 @import './fonts.css';
-
-@theme {
-  /* Font Families */
-  --font-inter: 'Inter', sans-serif;
-
-  /* Palette Colors */
-  --color-charcoal-100: #55565e;
-  --color-charcoal-200: #494a50;
-  --color-charcoal-300: #3c3d42;
-  --color-charcoal-400: #313235;
-  --color-charcoal-500: #2d2e32;
-  --color-charcoal-600: #262729;
-  --color-charcoal-700: #202121;
-  --color-charcoal-800: #171718;
-
-  --color-neutral-550: #636363;
-
-  --color-ash-300: #bbbbbb;
-  --color-ash-500: #828282;
-  --color-ash-800: #444444;
-
-  --color-smoke-100: #f3f3f3;
-  --color-smoke-200: #e9e9e9;
-  --color-smoke-300: #e1e1e1;
-  --color-smoke-400: #d9d9d9;
-  --color-smoke-500: #c5c5c5;
-  --color-smoke-600: #b4b4b4;
-  --color-smoke-700: #a0a0a0;
-  --color-smoke-800: #8a8a8a;
-
-  --color-white: #ffffff;
-  --color-black: #000000;
-
-  /* Brand Colors */
-  --color-electric-400: #f0ff41;
-  --color-sapphire-700: #172dd7;
-  --color-brand-yellow: var(--color-electric-400);
-  --color-brand-blue: var(--color-sapphire-700);
-}
+@import './_palette.css';
diff --git a/packages/design-system/src/css/style.css b/packages/design-system/src/css/style.css
index 362eb48bf6..27179eda12 100644
--- a/packages/design-system/src/css/style.css
+++ b/packages/design-system/src/css/style.css
@@ -1,6 +1,7 @@
 @layer theme, base, primevue, components, utilities;
 
 @import './fonts.css';
+@import './_palette.css';
 @import 'tailwindcss/theme' layer(theme);
 @import 'tailwindcss/utilities' layer(utilities);
 @import 'tw-animate-css';
@@ -15,7 +16,7 @@
 @plugin "./lucideStrokePlugin.js";
 
 /* Safelist dynamic comfy icons for node library folders */
-@source inline("icon-[comfy--{ai-model,bfl,bria,bytedance,credits,elevenlabs,extensions-blocks,file-output,gemini,grok,hitpaw,ideogram,image-ai-edit,kling,ltxv,luma,magnific,mask,meshy,minimax,moonvalley-marey,node,openai,pin,pixverse,play,recraft,reve,rodin,runway,sora,stability-ai,template,tencent,topaz,tripo,veo,vidu,wan,wavespeed,workflow,quiver-ai}]");
+@source inline("icon-[comfy--{ai-model,bfl,bria,bytedance,credits,elevenlabs,extensions-blocks,file-output,gemini,grok,hitpaw,ideogram,image-ai-edit,kling,ltxv,luma,magnific,mask,meshy,minimax,moonvalley-marey,node,openai,pin,pixverse,play,recraft,reve,rodin,runway,sora,stability-ai,template,tencent,topaz,tripo,veo,vidu,wan,wavespeed,workflow,quiver}]");
 
 /* Safelist dynamic comfy icons for essential nodes (kebab-case of node names) */
 @source inline("icon-[comfy--{save-image,load-video,save-video,load-3-d,save-glb,image-batch,batch-images-node,image-crop,image-scale,image-rotate,image-blur,image-invert,canny,recraft-remove-background-node,kling-lip-sync-audio-to-video-node,load-audio,save-audio,stability-text-to-audio,lora-loader,lora-loader-model-only,primitive-string-multiline,get-video-components,video-slice,tencent-text-to-model-node,tencent-image-to-model-node,open-ai-chat-node,preview-image,image-and-mask-preview,layer-mask-mask-preview,mask-preview,image-preview-from-latent,i-tools-preview-image,i-tools-compare-image,canny-to-image,image-edit,text-to-image,pose-to-image,depth-to-video,image-to-image,canny-to-video,depth-to-image,image-to-video,pose-to-video,text-to-video,image-inpainting,image-outpainting}]");
@@ -31,38 +32,10 @@
   --text-3xs: 0.5625rem;
   --text-3xs--line-height: calc(1 / 0.5625);
 
-  /* Font Families */
-  --font-inter: 'Inter', sans-serif;
-
-  /* Palette Colors */
-  --color-charcoal-100: #55565e;
-  --color-charcoal-200: #494a50;
-  --color-charcoal-300: #3c3d42;
-  --color-charcoal-400: #313235;
-  --color-charcoal-500: #2d2e32;
-  --color-charcoal-600: #262729;
-  --color-charcoal-700: #202121;
-  --color-charcoal-800: #171718;
-
-  --color-neutral-550: #636363;
-
-  --color-ash-300: #bbbbbb;
-  --color-ash-500: #828282;
-  --color-ash-800: #444444;
-
   --color-ivory-100: #fdfbfa;
   --color-ivory-200: #faf9f5;
   --color-ivory-300: #f0eee6;
 
-  --color-smoke-100: #f3f3f3;
-  --color-smoke-200: #e9e9e9;
-  --color-smoke-300: #e1e1e1;
-  --color-smoke-400: #d9d9d9;
-  --color-smoke-500: #c5c5c5;
-  --color-smoke-600: #b4b4b4;
-  --color-smoke-700: #a0a0a0;
-  --color-smoke-800: #8a8a8a;
-
   --color-sand-100: #e1ded5;
   --color-sand-200: #fff7d5;
   --color-sand-300: #888682;
@@ -72,14 +45,6 @@
   --color-slate-200: #9fa2bd;
   --color-slate-300: #5b5e7d;
 
-  --color-white: #ffffff;
-  --color-black: #000000;
-
-  --color-electric-400: #f0ff41;
-  --color-sapphire-700: #172dd7;
-  --color-brand-yellow: var(--color-electric-400);
-  --color-brand-blue: var(--color-sapphire-700);
-
   --color-azure-300: #78bae9;
   --color-azure-400: #31b9f4;
   --color-azure-600: #0b8ce9;
diff --git a/packages/design-system/src/icons/elevenlabs.svg b/packages/design-system/src/icons/elevenlabs.svg
index 3c2128bfb4..de438ed510 100644
--- a/packages/design-system/src/icons/elevenlabs.svg
+++ b/packages/design-system/src/icons/elevenlabs.svg
@@ -1 +1 @@
-<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>ElevenLabs</title><path d="M5 0h5v24H5V0zM14 0h5v24h-5V0z"></path></svg>
\ No newline at end of file
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>ElevenLabs</title><path d="M5 0h5v24H5V0zM14 0h5v24h-5V0z"></path></svg>
\ No newline at end of file
diff --git a/packages/design-system/src/icons/quiver-ai.svg b/packages/design-system/src/icons/quiver.svg
similarity index 100%
rename from packages/design-system/src/icons/quiver-ai.svg
rename to packages/design-system/src/icons/quiver.svg
diff --git a/packages/ingest-types/openapi-ts.config.ts b/packages/ingest-types/openapi-ts.config.ts
index 3256f1e76d..0403ac810f 100644
--- a/packages/ingest-types/openapi-ts.config.ts
+++ b/packages/ingest-types/openapi-ts.config.ts
@@ -9,27 +9,7 @@ export default defineConfig({
   parser: {
     filters: {
       operations: {
-        // Exclude endpoints that overlap with ComfyUI Python backend.
-        // These are shared between local and cloud, with separate Zod
-        // schemas already maintained in src/schemas/apiSchema.ts.
         exclude: [
-          '/^GET \\/api\\/prompt$/',
-          '/^POST \\/api\\/prompt$/',
-          '/^GET \\/api\\/queue$/',
-          '/^POST \\/api\\/queue$/',
-          '/^GET \\/api\\/history$/',
-          '/^POST \\/api\\/history$/',
-          '/^GET \\/api\\/history_v2/',
-          '/^GET \\/api\\/object_info$/',
-          '/^GET \\/api\\/features$/',
-          '/^GET \\/api\\/settings$/',
-          '/^POST \\/api\\/settings$/',
-          '/^GET \\/api\\/system_stats$/',
-          '/^(GET|POST) \\/api\\/interrupt$/',
-          '/^POST \\/api\\/upload\\//',
-          '/^GET \\/api\\/view$/',
-          '/^GET \\/api\\/jobs/',
-          '/\\/api\\/userdata/',
           // Webhooks are server-to-server, not called by frontend
           '/\\/api\\/webhooks\\//',
           // Internal analytics endpoint
diff --git a/packages/ingest-types/src/index.ts b/packages/ingest-types/src/index.ts
index fb24ccd37e..d46d879be9 100644
--- a/packages/ingest-types/src/index.ts
+++ b/packages/ingest-types/src/index.ts
@@ -134,6 +134,9 @@ export type {
   DeleteHubWorkflowErrors,
   DeleteHubWorkflowResponse,
   DeleteHubWorkflowResponses,
+  DeleteMonitoringTasksSubpathData,
+  DeleteMonitoringTasksSubpathErrors,
+  DeleteMonitoringTasksSubpathResponses,
   DeleteSecretData,
   DeleteSecretError,
   DeleteSecretErrors,
@@ -145,6 +148,11 @@ export type {
   DeleteSessionResponse,
   DeleteSessionResponse2,
   DeleteSessionResponses,
+  DeleteUserdataFileData,
+  DeleteUserdataFileError,
+  DeleteUserdataFileErrors,
+  DeleteUserdataFileResponse,
+  DeleteUserdataFileResponses,
   DeleteWorkflowData,
   DeleteWorkflowError,
   DeleteWorkflowErrors,
@@ -170,6 +178,12 @@ export type {
   ExchangeTokenResponse,
   ExchangeTokenResponse2,
   ExchangeTokenResponses,
+  ExecutePromptData,
+  ExecutePromptError,
+  ExecutePromptErrors,
+  ExecutePromptResponse,
+  ExecutePromptResponses,
+  ExecutionError,
   ExportDownloadUrlResponse,
   FeedbackRequest,
   FeedbackResponse,
@@ -180,6 +194,14 @@ export type {
   ForkWorkflowRequest,
   ForkWorkflowResponse,
   ForkWorkflowResponses,
+  GetAllSettingsData,
+  GetAllSettingsError,
+  GetAllSettingsErrors,
+  GetAllSettingsResponse,
+  GetAllSettingsResponses,
+  GetApiViewVideoAliasData,
+  GetApiViewVideoAliasErrors,
+  GetApiViewVideoAliasResponses,
   GetAssetByIdData,
   GetAssetByIdError,
   GetAssetByIdErrors,
@@ -220,6 +242,11 @@ export type {
   GetDeletionRequestErrors,
   GetDeletionRequestResponse,
   GetDeletionRequestResponses,
+  GetExtensionsData,
+  GetExtensionsResponses,
+  GetFeaturesData,
+  GetFeaturesResponse,
+  GetFeaturesResponses,
   GetFilesData,
   GetFilesError,
   GetFilesErrors,
@@ -235,6 +262,19 @@ export type {
   GetGlobalSubgraphsErrors,
   GetGlobalSubgraphsResponse,
   GetGlobalSubgraphsResponses,
+  GetHealthData,
+  GetHealthErrors,
+  GetHealthResponses,
+  GetHistoryData,
+  GetHistoryError,
+  GetHistoryErrors,
+  GetHistoryForPromptData,
+  GetHistoryForPromptError,
+  GetHistoryForPromptErrors,
+  GetHistoryForPromptResponse,
+  GetHistoryForPromptResponses,
+  GetHistoryResponse,
+  GetHistoryResponses,
   GetHubProfileByUsernameData,
   GetHubProfileByUsernameError,
   GetHubProfileByUsernameErrors,
@@ -250,6 +290,11 @@ export type {
   GetInviteCodeStatusErrors,
   GetInviteCodeStatusResponse,
   GetInviteCodeStatusResponses,
+  GetJobDetailData,
+  GetJobDetailError,
+  GetJobDetailErrors,
+  GetJobDetailResponse,
+  GetJobDetailResponses,
   GetJobStatusData,
   GetJobStatusError,
   GetJobStatusErrors,
@@ -283,26 +328,48 @@ export type {
   GetModelsInFolderErrors,
   GetModelsInFolderResponse,
   GetModelsInFolderResponses,
+  GetMonitoringTasksData,
+  GetMonitoringTasksErrors,
+  GetMonitoringTasksResponses,
+  GetMonitoringTasksSubpathData,
+  GetMonitoringTasksSubpathErrors,
+  GetMonitoringTasksSubpathResponses,
   GetMyHubProfileData,
   GetMyHubProfileError,
   GetMyHubProfileErrors,
   GetMyHubProfileResponse,
   GetMyHubProfileResponses,
+  GetNodeInfoData,
+  GetNodeInfoResponse,
+  GetNodeInfoResponses,
+  GetOpenapiSpecData,
+  GetOpenapiSpecResponses,
   GetPaymentPortalData,
   GetPaymentPortalError,
   GetPaymentPortalErrors,
   GetPaymentPortalResponse,
   GetPaymentPortalResponses,
+  GetPprofData,
+  GetPprofProfileData,
+  GetPprofProfileResponses,
+  GetPprofResponses,
+  GetPprofTraceData,
+  GetPprofTraceResponses,
+  GetPromptInfoData,
+  GetPromptInfoError,
+  GetPromptInfoErrors,
+  GetPromptInfoResponse,
+  GetPromptInfoResponses,
   GetPublishedWorkflowData,
   GetPublishedWorkflowError,
   GetPublishedWorkflowErrors,
   GetPublishedWorkflowResponse,
   GetPublishedWorkflowResponses,
-  GetRawLogsData,
-  GetRawLogsError,
-  GetRawLogsErrors,
-  GetRawLogsResponse,
-  GetRawLogsResponses,
+  GetQueueInfoData,
+  GetQueueInfoError,
+  GetQueueInfoErrors,
+  GetQueueInfoResponse,
+  GetQueueInfoResponses,
   GetRemoteAssetMetadataData,
   GetRemoteAssetMetadataError,
   GetRemoteAssetMetadataErrors,
@@ -318,16 +385,60 @@ export type {
   GetSettingByKeyErrors,
   GetSettingByKeyResponse,
   GetSettingByKeyResponses,
+  GetStaticExtensionsData,
+  GetStaticExtensionsErrors,
+  GetStaticExtensionsResponses,
+  GetSystemStatsData,
+  GetSystemStatsError,
+  GetSystemStatsErrors,
+  GetSystemStatsResponse,
+  GetSystemStatsResponses,
   GetTaskData,
   GetTaskError,
   GetTaskErrors,
   GetTaskResponse,
   GetTaskResponses,
+  GetTemplateProxyData,
+  GetTemplateProxyErrors,
   GetUserData,
+  GetUserdataData,
+  GetUserdataError,
+  GetUserdataErrors,
+  GetUserdataFileData,
+  GetUserdataFileError,
+  GetUserdataFileErrors,
+  GetUserdataFilePublishData,
+  GetUserdataFilePublishError,
+  GetUserdataFilePublishErrors,
+  GetUserdataFilePublishResponse,
+  GetUserdataFilePublishResponses,
+  GetUserdataFileResponse,
+  GetUserdataFileResponses,
+  GetUserdataResponse,
+  GetUserDataResponseFull,
+  GetUserDataResponseFullFile,
+  GetUserdataResponses,
   GetUserError,
   GetUserErrors,
   GetUserResponse,
   GetUserResponses,
+  GetUsersRawData,
+  GetUsersRawErrors,
+  GetUsersRawResponses,
+  GetVhsQueryVideoData,
+  GetVhsQueryVideoErrors,
+  GetVhsQueryVideoResponses,
+  GetVhsViewAudioData,
+  GetVhsViewAudioErrors,
+  GetVhsViewAudioResponses,
+  GetVhsViewVideoData,
+  GetVhsViewVideoErrors,
+  GetVhsViewVideoResponses,
+  GetViewCompatAliasData,
+  GetViewCompatAliasErrors,
+  GetViewCompatAliasResponses,
+  GetWebsocketData,
+  GetWebsocketErrors,
   GetWorkflowContentData,
   GetWorkflowContentError,
   GetWorkflowContentErrors,
@@ -348,6 +459,11 @@ export type {
   GetWorkspaceResponses,
   GlobalSubgraphData,
   GlobalSubgraphInfo,
+  HistoryDetailEntry,
+  HistoryDetailResponse,
+  HistoryEntry,
+  HistoryManageRequest,
+  HistoryResponse,
   HubAssetUploadUrlRequest,
   HubAssetUploadUrlResponse,
   HubLabelInfo,
@@ -357,6 +473,7 @@ export type {
   HubUsernameCheckResponse,
   HubWorkflowDetail,
   HubWorkflowListResponse,
+  HubWorkflowStatus,
   HubWorkflowSummary,
   HubWorkflowTemplateEntry,
   ImportPublishedAssetsData,
@@ -366,8 +483,15 @@ export type {
   ImportPublishedAssetsResponse,
   ImportPublishedAssetsResponse2,
   ImportPublishedAssetsResponses,
+  InterruptJobData,
+  InterruptJobError,
+  InterruptJobErrors,
+  InterruptJobResponses,
   InviteCodeClaimResponse,
   InviteCodeStatusResponse,
+  JobDetailResponse,
+  JobEntry,
+  JobsListResponse,
   JobStatusResponse,
   JwkKey,
   JwksResponse,
@@ -400,6 +524,11 @@ export type {
   ListHubWorkflowsResponse,
   ListHubWorkflowsResponses,
   ListInvitesResponse,
+  ListJobsData,
+  ListJobsError,
+  ListJobsErrors,
+  ListJobsResponse,
+  ListJobsResponses,
   ListMembersResponse,
   ListSecretsData,
   ListSecretsError,
@@ -439,10 +568,24 @@ export type {
   ListWorkspacesResponse2,
   ListWorkspacesResponses,
   LogsResponse,
-  LogsSubscribeRequest,
+  ManageHistoryData,
+  ManageHistoryError,
+  ManageHistoryErrors,
+  ManageHistoryResponses,
+  ManageQueueData,
+  ManageQueueError,
+  ManageQueueErrors,
+  ManageQueueResponse,
+  ManageQueueResponses,
   Member,
   ModelFile,
   ModelFolder,
+  MoveUserdataFileData,
+  MoveUserdataFileError,
+  MoveUserdataFileErrors,
+  MoveUserdataFileResponse,
+  MoveUserdataFileResponses,
+  NodeInfo,
   PaginationInfo,
   PartnerUsageRequest,
   PartnerUsageResponse,
@@ -458,6 +601,21 @@ export type {
   PostAssetsFromWorkflowErrors,
   PostAssetsFromWorkflowResponse,
   PostAssetsFromWorkflowResponses,
+  PostMonitoringTasksSubpathData,
+  PostMonitoringTasksSubpathErrors,
+  PostMonitoringTasksSubpathResponses,
+  PostPprofSymbolData,
+  PostPprofSymbolResponses,
+  PostUserdataFileData,
+  PostUserdataFileError,
+  PostUserdataFileErrors,
+  PostUserdataFilePublishData,
+  PostUserdataFilePublishError,
+  PostUserdataFilePublishErrors,
+  PostUserdataFilePublishResponse,
+  PostUserdataFilePublishResponses,
+  PostUserdataFileResponse,
+  PostUserdataFileResponses,
   PreviewPlanInfo,
   PreviewSubscribeData,
   PreviewSubscribeError,
@@ -466,6 +624,10 @@ export type {
   PreviewSubscribeResponse,
   PreviewSubscribeResponse2,
   PreviewSubscribeResponses,
+  PromptErrorResponse,
+  PromptInfo,
+  PromptRequest,
+  PromptResponse,
   PublishedWorkflowDetail,
   PublishHubWorkflowData,
   PublishHubWorkflowError,
@@ -473,7 +635,10 @@ export type {
   PublishHubWorkflowRequest,
   PublishHubWorkflowResponse,
   PublishHubWorkflowResponses,
-  RawLogsResponse,
+  PublishWorkflowAssetsRequest,
+  QueueInfo,
+  QueueManageRequest,
+  QueueManageResponse,
   RemoveAssetTagsData,
   RemoveAssetTagsError,
   RemoveAssetTagsErrors,
@@ -510,6 +675,13 @@ export type {
   SendUserInviteEmailResponse,
   SendUserInviteEmailResponse2,
   SendUserInviteEmailResponses,
+  SetReviewStatusData,
+  SetReviewStatusError,
+  SetReviewStatusErrors,
+  SetReviewStatusRequest,
+  SetReviewStatusResponse,
+  SetReviewStatusResponse2,
+  SetReviewStatusResponses,
   SubmitFeedbackData,
   SubmitFeedbackError,
   SubmitFeedbackErrors,
@@ -522,13 +694,9 @@ export type {
   SubscribeResponse,
   SubscribeResponse2,
   SubscribeResponses,
-  SubscribeToLogsData,
-  SubscribeToLogsError,
-  SubscribeToLogsErrors,
-  SubscribeToLogsResponse,
-  SubscribeToLogsResponses,
   SubscriptionDuration,
   SubscriptionTier,
+  SystemStatsResponse,
   TagInfo,
   TagsModificationResponse,
   TaskEntry,
@@ -550,6 +718,11 @@ export type {
   UpdateHubProfileRequest,
   UpdateHubProfileResponse,
   UpdateHubProfileResponses,
+  UpdateMultipleSettingsData,
+  UpdateMultipleSettingsError,
+  UpdateMultipleSettingsErrors,
+  UpdateMultipleSettingsResponse,
+  UpdateMultipleSettingsResponses,
   UpdateSecretData,
   UpdateSecretError,
   UpdateSecretErrors,
@@ -578,13 +751,30 @@ export type {
   UploadAssetErrors,
   UploadAssetResponse,
   UploadAssetResponses,
+  UploadImageData,
+  UploadImageError,
+  UploadImageErrors,
+  UploadImageResponse,
+  UploadImageResponses,
+  UploadMaskData,
+  UploadMaskError,
+  UploadMaskErrors,
+  UploadMaskResponse,
+  UploadMaskResponses,
+  UserDataResponseFull,
   UserResponse,
   ValidationError,
   ValidationResult,
+  ViewFileData,
+  ViewFileError,
+  ViewFileErrors,
+  ViewFileResponse,
+  ViewFileResponses,
   WorkflowApiAssetsRequest,
   WorkflowApiAssetsResponse,
   WorkflowForkedFrom,
   WorkflowListResponse,
+  WorkflowPublishInfo,
   WorkflowResponse,
   WorkflowVersionContentResponse,
   WorkflowVersionResponse,
diff --git a/packages/ingest-types/src/types.gen.ts b/packages/ingest-types/src/types.gen.ts
index b1df1e2b80..ea6a24a294 100644
--- a/packages/ingest-types/src/types.gen.ts
+++ b/packages/ingest-types/src/types.gen.ts
@@ -151,6 +151,7 @@ export type HubWorkflowDetail = {
   share_id: string
   workflow_id: string
   name: string
+  status: HubWorkflowStatus
   description?: string
   tags?: Array<LabelRef>
   thumbnail_type?: 'image' | 'video' | 'image_comparison'
@@ -194,9 +195,19 @@ export type LabelRef = {
   display_name: string
 }
 
+/**
+ * Public workflow status. NULL in the database is represented as pending in API responses.
+ */
+export type HubWorkflowStatus =
+  | 'pending'
+  | 'approved'
+  | 'rejected'
+  | 'deprecated'
+
 export type HubWorkflowSummary = {
   share_id: string
   name: string
+  status: HubWorkflowStatus
   description?: string
   tags?: Array<LabelRef>
   models?: Array<LabelRef>
@@ -245,6 +256,7 @@ export type HubWorkflowTemplateEntry = {
    */
   name: string
   title: string
+  status: HubWorkflowStatus
   description?: string
   tags?: Array<string>
   models?: Array<string>
@@ -406,6 +418,24 @@ export type WorkflowApiAssetsRequest = {
   }
 }
 
+export type PublishWorkflowAssetsRequest = {
+  /**
+   * IDs of assets (inputs and models) to snapshot.
+   */
+  asset_ids: Array<string>
+}
+
+export type WorkflowPublishInfo = {
+  workflow_id: string
+  share_id: string
+  publish_time?: string | null
+  listed: boolean
+  /**
+   * Published assets (inputs and models).
+   */
+  assets: Array<AssetInfo>
+}
+
 export type ForkWorkflowRequest = {
   /**
    * Version number to fork from
@@ -1348,6 +1378,154 @@ export type DeletionStatus = {
   status_details: string
 }
 
+/**
+ * Detailed execution error information from ComfyUI
+ */
+export type ExecutionError = {
+  /**
+   * ID of the node that failed
+   */
+  node_id: string
+  /**
+   * Type name of the node (e.g., "KSampler")
+   */
+  node_type: string
+  /**
+   * Human-readable error message
+   */
+  exception_message: string
+  /**
+   * Python exception type (e.g., "RuntimeError")
+   */
+  exception_type: string
+  /**
+   * Array of traceback lines (empty array if not available)
+   */
+  traceback: Array<string>
+  /**
+   * Input values at time of failure (empty object if not available)
+   */
+  current_inputs: {
+    [key: string]: unknown
+  }
+  /**
+   * Output values at time of failure (empty object if not available)
+   */
+  current_outputs: {
+    [key: string]: unknown
+  }
+}
+
+/**
+ * Full job details including workflow and outputs
+ */
+export type JobDetailResponse = {
+  /**
+   * Unique job identifier
+   */
+  id: string
+  /**
+   * User-friendly job status
+   */
+  status: 'pending' | 'in_progress' | 'completed' | 'failed' | 'cancelled'
+  /**
+   * Full ComfyUI workflow (10-100KB, omitted if not available)
+   */
+  workflow?: {
+    [key: string]: unknown
+  }
+  execution_error?: ExecutionError
+  /**
+   * Job creation timestamp (Unix timestamp in milliseconds)
+   */
+  create_time: number
+  /**
+   * Last update timestamp (Unix timestamp in milliseconds)
+   */
+  update_time: number
+  /**
+   * Full outputs object from ComfyUI (only for terminal states)
+   */
+  outputs?: {
+    [key: string]: unknown
+  }
+  /**
+   * Primary preview output (only for terminal states)
+   */
+  preview_output?: {
+    [key: string]: unknown
+  }
+  /**
+   * Total number of output files (omitted for non-terminal states)
+   */
+  outputs_count?: number
+  /**
+   * UUID identifying the workflow graph definition
+   */
+  workflow_id?: string
+  /**
+   * ComfyUI execution status and timeline (only for terminal states)
+   */
+  execution_status?: {
+    [key: string]: unknown
+  }
+  /**
+   * Node-level execution metadata (only for terminal states)
+   */
+  execution_meta?: {
+    [key: string]: unknown
+  }
+}
+
+/**
+ * Lightweight job data for list views (workflow and full outputs excluded)
+ */
+export type JobEntry = {
+  /**
+   * Unique job identifier
+   */
+  id: string
+  /**
+   * User-friendly job status
+   */
+  status: 'pending' | 'in_progress' | 'completed' | 'failed' | 'cancelled'
+  execution_error?: ExecutionError
+  /**
+   * Job creation timestamp (Unix timestamp in milliseconds)
+   */
+  create_time: number
+  /**
+   * Primary preview output (only present for terminal states)
+   */
+  preview_output?: {
+    [key: string]: unknown
+  }
+  /**
+   * Total number of output files (omitted for non-terminal states)
+   */
+  outputs_count?: number
+  /**
+   * UUID identifying the workflow graph definition
+   */
+  workflow_id?: string
+  /**
+   * Workflow execution start timestamp (Unix milliseconds, only present for terminal states)
+   */
+  execution_start_time?: number
+  /**
+   * Workflow execution completion timestamp (Unix milliseconds, only present for terminal states)
+   */
+  execution_end_time?: number
+}
+
+export type JobsListResponse = {
+  /**
+   * Array of jobs ordered by specified sort field
+   */
+  jobs: Array<JobEntry>
+  pagination: PaginationInfo
+}
+
 export type TagsModificationResponse = {
   /**
    * Tags that were successfully added (for add operation)
@@ -1629,6 +1807,28 @@ export type SendUserInviteEmailRequest = {
   force?: boolean
 }
 
+export type SetReviewStatusResponse = {
+  /**
+   * The share IDs that were submitted for review
+   */
+  share_ids: Array<string>
+  /**
+   * The applied review status
+   */
+  status: 'approved' | 'rejected'
+}
+
+export type SetReviewStatusRequest = {
+  /**
+   * The share IDs of the hub workflows to review
+   */
+  share_ids: Array<string>
+  /**
+   * The review decision for the workflows
+   */
+  status: 'approved' | 'rejected'
+}
+
 /**
  * Response after successfully claiming an invite code
  */
@@ -1691,33 +1891,74 @@ export type UserResponse = {
   status: string
 }
 
-export type LogsSubscribeRequest = {
-  /**
-   * Whether to enable or disable log subscription
-   */
-  enabled: boolean
-}
-
 /**
- * Raw logs response with entries and size
+ * System statistics response
  */
-export type RawLogsResponse = {
-  entries?: Array<{
+export type SystemStatsResponse = {
+  system: {
     /**
-     * Log message
+     * Operating system
      */
-    m?: string
-  }>
-  size?: {
+    os: string
     /**
-     * Terminal column size
+     * Python version
      */
-    cols?: number
+    python_version: string
     /**
-     * Terminal row size
+     * Whether using embedded Python
      */
-    rows?: number
+    embedded_python: boolean
+    /**
+     * ComfyUI version
+     */
+    comfyui_version: string
+    /**
+     * ComfyUI frontend version (commit hash or tag)
+     */
+    comfyui_frontend_version?: string
+    /**
+     * Workflow templates version
+     */
+    workflow_templates_version?: string
+    /**
+     * Cloud ingest service version (commit hash)
+     */
+    cloud_version?: string
+    /**
+     * PyTorch version
+     */
+    pytorch_version: string
+    /**
+     * Command line arguments
+     */
+    argv: Array<string>
+    /**
+     * Total RAM in bytes
+     */
+    ram_total: number
+    /**
+     * Free RAM in bytes
+     */
+    ram_free: number
   }
+  devices: Array<{
+    /**
+     * Device name
+     */
+    name: string
+    /**
+     * Device type
+     */
+    type: string
+    /**
+     * Total VRAM in bytes
+     */
+    vram_total?: number
+    /**
+     * Free VRAM in bytes
+     */
+    vram_free?: number
+  }>
 }
 
 /**
@@ -1807,6 +2048,53 @@ export type ModelFolder = {
   folders: Array<string>
 }
 
+/**
+ * Error response for ComfyUI prompt execution.
+ */
+export type PromptErrorResponse = {
+  [key: string]: unknown
+}
+
+export type GetUserDataResponseFullFile = {
+  /**
+   * File name or path relative to the user directory.
+   */
+  path?: string
+  /**
+   * File size in bytes.
+   */
+  size?: number
+  /**
+   * UNIX timestamp of the last modification in milliseconds.
+   */
+  modified?: number
+}
+
+export type GetUserDataResponseFull = Array<GetUserDataResponseFullFile>
+
+export type UserDataResponseFull = {
+  path?: string
+  size?: number
+  /**
+   * UNIX timestamp of the last modification in milliseconds.
+   */
+  modified?: number
+}
+
+/**
+ * Request to manage history operations
+ */
+export type HistoryManageRequest = {
+  /**
+   * Array of job IDs to delete from history
+   */
+  delete?: Array<string>
+  /**
+   * If true, clear all history for the authenticated user
+   */
+  clear?: boolean
+}
+
 /**
  * Job status information
  */
@@ -1847,6 +2135,175 @@ export type JobStatusResponse = {
   error_message?: string | null
 }
 
+export type QueueManageResponse = {
+  /**
+   * Array of job IDs that were successfully cancelled
+   */
+  deleted?: Array<string>
+  /**
+   * Whether the queue was cleared
+   */
+  cleared?: boolean
+}
+
+/**
+ * Request to manage queue operations
+ */
+export type QueueManageRequest = {
+  /**
+   * Array of PENDING job IDs to cancel
+   */
+  delete?: Array<string>
+  /**
+   * If true, clear all pending jobs from the queue
+   */
+  clear?: boolean
+}
+
+/**
+ * Queue information with pending and running jobs
+ */
+export type QueueInfo = {
+  /**
+   * Array of currently running job items
+   */
+  queue_running?: Array<Array<unknown>>
+  /**
+   * Array of pending job items (ordered by creation time, oldest first)
+   */
+  queue_pending?: Array<Array<unknown>>
+}
+
+/**
+ * Detailed execution history response for a specific prompt.
+ * Returns a dictionary with prompt_id as key and full history data as value.
+ *
+ */
+export type HistoryDetailResponse = {
+  [key: string]: HistoryDetailEntry
+}
+
+/**
+ * History entry with full prompt data
+ */
+export type HistoryDetailEntry = {
+  /**
+   * Full prompt execution data
+   */
+  prompt?: {
+    /**
+     * Execution priority
+     */
+    priority?: number
+    /**
+     * The prompt ID
+     */
+    prompt_id?: string
+    /**
+     * The workflow nodes
+     */
+    prompt?: {
+      [key: string]: unknown
+    }
+    /**
+     * Additional execution data
+     */
+    extra_data?: {
+      [key: string]: unknown
+    }
+    /**
+     * Output nodes to execute
+     */
+    outputs_to_execute?: Array<string>
+  }
+  /**
+   * Output data from execution (generated images, files, etc.)
+   */
+  outputs?: {
+    [key: string]: unknown
+  }
+  /**
+   * Execution status and timeline information
+   */
+  status?: {
+    [key: string]: unknown
+  }
+  /**
+   * Metadata about the execution and nodes
+   */
+  meta?: {
+    [key: string]: unknown
+  }
+}
+
+/**
+ * History entry with prompt_id and execution data
+ */
+export type HistoryEntry = {
+  /**
+   * Unique identifier for this prompt execution
+   */
+  prompt_id: string
+  /**
+   * Job creation timestamp (Unix timestamp in milliseconds)
+   */
+  create_time?: number
+  /**
+   * UUID identifying the workflow graph definition
+   */
+  workflow_id?: string
+  /**
+   * Filtered prompt execution data (lightweight format)
+   */
+  prompt?: {
+    /**
+     * Execution priority
+     */
+    priority?: number
+    /**
+     * The prompt ID
+     */
+    prompt_id?: string
+    /**
+     * Additional execution data (workflow removed from extra_pnginfo)
+     */
+    extra_data?: {
+      [key: string]: unknown
+    }
+  }
+  /**
+   * Output data from execution (generated images, files, etc.)
+   */
+  outputs?: {
+    [key: string]: unknown
+  }
+  /**
+   * Execution status and timeline information
+   */
+  status?: {
+    [key: string]: unknown
+  }
+  /**
+   * Metadata about the execution and nodes
+   */
+  meta?: {
+    [key: string]: unknown
+  }
+}
+
+/**
+ * Execution history response with history array.
+ * Returns an object with a "history" key containing an array of history entries.
+ * Each entry includes prompt_id as a property along with execution data.
+ *
+ */
+export type HistoryResponse = {
+  /**
+   * Array of history entries ordered by creation time (newest first)
+   */
+  history: Array<HistoryEntry>
+}
+
 /**
  * Full data for a global subgraph blueprint
  */
@@ -1901,6 +2358,82 @@ export type GlobalSubgraphInfo = {
   data?: string
 }
 
+export type NodeInfo = {
+  /**
+   * Input specifications for the node
+   */
+  input?: {
+    [key: string]: unknown
+  }
+  /**
+   * Order of inputs for display
+   */
+  input_order?: {
+    [key: string]: Array<string>
+  }
+  /**
+   * Output types of the node
+   */
+  output?: Array<string>
+  /**
+   * Whether each output is a list
+   */
+  output_is_list?: Array<boolean>
+  /**
+   * Names of the outputs
+   */
+  output_name?: Array<string>
+  /**
+   * Internal name of the node
+   */
+  name?: string
+  /**
+   * Display name of the node
+   */
+  display_name?: string
+  /**
+   * Description of the node
+   */
+  description?: string
+  /**
+   * Python module implementing the node
+   */
+  python_module?: string
+  /**
+   * Category of the node
+   */
+  category?: string
+  /**
+   * Whether this is an output node
+   */
+  output_node?: boolean
+  /**
+   * Tooltips for outputs
+   */
+  output_tooltips?: Array<string>
+  /**
+   * Whether the node is deprecated
+   */
+  deprecated?: boolean
+  /**
+   * Whether the node is experimental
+   */
+  experimental?: boolean
+  /**
+   * Whether this is an API node
+   */
+  api_node?: boolean
+}
+
+export type PromptInfo = {
+  exec_info?: {
+    /**
+     * Number of items remaining in the queue
+     */
+    queue_remaining?: number
+  }
+}
+
 export type ExportDownloadUrlResponse = {
   /**
    * Signed URL for downloading the export ZIP file
@@ -1917,6 +2450,58 @@ export type ErrorResponse = {
   message: string
 }
 
+export type PromptResponse = {
+  /**
+   * Unique identifier for the prompt execution
+   */
+  prompt_id?: string
+  /**
+   * Priority number in the queue
+   */
+  number?: number
+  /**
+   * Any errors in the nodes of the prompt
+   */
+  node_errors?: {
+    [key: string]: unknown
+  }
+}
+
+export type PromptRequest = {
+  /**
+   * The workflow graph to execute
+   */
+  prompt: {
+    [key: string]: unknown
+  }
+  /**
+   * Priority number for the queue (lower numbers have higher priority)
+   */
+  number?: number
+  /**
+   * If true, adds the prompt to the front of the queue
+   */
+  front?: boolean
+  /**
+   * Extra data to be associated with the prompt
+   */
+  extra_data?: {
+    [key: string]: unknown
+  }
+  /**
+   * List of node names to execute
+   */
+  partial_execution_targets?: Array<string>
+  /**
+   * UUID identifying the cloud workflow entity to associate with this job
+   */
+  workflow_id?: string
+  /**
+   * UUID identifying the workflow version to associate with this job
+   */
+  workflow_version_id?: string
+}
+
 export type ListAssetsResponseWritable = {
   /**
    * List of assets matching the query
@@ -2007,6 +2592,124 @@ export type FeedbackResponseWritable = {
   [key: string]: unknown
 }
 
+export type GetPromptInfoData = {
+  body?: never
+  path?: never
+  query?: never
+  url: '/api/prompt'
+}
+
+export type GetPromptInfoErrors = {
+  /**
+   * Unauthorized
+   */
+  401: ErrorResponse
+  /**
+   * Internal server error
+   */
+  500: ErrorResponse
+}
+
+export type GetPromptInfoError = GetPromptInfoErrors[keyof GetPromptInfoErrors]
+
+export type GetPromptInfoResponses = {
+  /**
+   * Success
+   */
+  200: PromptInfo
+}
+
+export type GetPromptInfoResponse =
+  GetPromptInfoResponses[keyof GetPromptInfoResponses]
+
+export type ExecutePromptData = {
+  body: PromptRequest
+  path?: never
+  query?: never
+  url: '/api/prompt'
+}
+
+export type ExecutePromptErrors = {
+  /**
+   * Invalid prompt
+   */
+  400: PromptErrorResponse
+  /**
+   * Payment required - Insufficient credits
+   */
+  402: PromptErrorResponse
+  /**
+   * Payment required - User has not paid
+   */
+  429: PromptErrorResponse
+  /**
+   * Internal server error
+   */
+  500: PromptErrorResponse
+  /**
+   * Service unavailable
+   */
+  503: PromptErrorResponse
+}
+
+export type ExecutePromptError = ExecutePromptErrors[keyof ExecutePromptErrors]
+
+export type ExecutePromptResponses = {
+  /**
+   * Success - Prompt accepted
+   */
+  200: PromptResponse
+}
+
+export type ExecutePromptResponse =
+  ExecutePromptResponses[keyof ExecutePromptResponses]
+
+export type GetNodeInfoData = {
+  body?: never
+  path?: never
+  query?: never
+  url: '/api/object_info'
+}
+
+export type GetNodeInfoResponses = {
+  /**
+   * Success
+   */
+  200: {
+    [key: string]: NodeInfo
+  }
+}
+
+export type GetNodeInfoResponse =
+  GetNodeInfoResponses[keyof GetNodeInfoResponses]
+
+export type GetFeaturesData = {
+  body?: never
+  path?: never
+  query?: never
+  url: '/api/features'
+}
+
+export type GetFeaturesResponses = {
+  /**
+   * Success
+   */
+  200: {
+    /**
+     * Whether the server supports preview metadata
+     */
+    supports_preview_metadata?: boolean
+    /**
+     * Maximum upload size in bytes
+     */
+    max_upload_size?: number
+    [key: string]: unknown | boolean | number | undefined
+  }
+}
+
+export type GetFeaturesResponse =
+  GetFeaturesResponses[keyof GetFeaturesResponses]
+
 export type GetWorkflowTemplatesData = {
   body?: never
   path?: never
@@ -2198,6 +2901,297 @@ export type GetModelPreviewResponses = {
 export type GetModelPreviewResponse =
   GetModelPreviewResponses[keyof GetModelPreviewResponses]
 
+export type ManageHistoryData = {
+  body: HistoryManageRequest
+  path?: never
+  query?: never
+  url: '/api/history'
+}
+
+export type ManageHistoryErrors = {
+  /**
+   * Invalid request parameters
+   */
+  400: ErrorResponse
+  /**
+   * Unauthorized - Authentication required
+   */
+  401: ErrorResponse
+  /**
+   * Internal server error
+   */
+  500: ErrorResponse
+}
+
+export type ManageHistoryError = ManageHistoryErrors[keyof ManageHistoryErrors]
+
+export type ManageHistoryResponses = {
+  /**
+   * Success - History management operation completed
+   */
+  200: unknown
+}
+
+export type GetHistoryData = {
+  body?: never
+  path?: never
+  query?: {
+    /**
+     * Maximum number of items to return
+     */
+    max_items?: number
+    /**
+     * Starting position (default 0)
+     */
+    offset?: number
+  }
+  url: '/api/history_v2'
+}
+
+export type GetHistoryErrors = {
+  /**
+   * Unauthorized - Authentication required
+   */
+  401: ErrorResponse
+  /**
+   * Internal server error
+   */
+  500: ErrorResponse
+}
+
+export type GetHistoryError = GetHistoryErrors[keyof GetHistoryErrors]
+
+export type GetHistoryResponses = {
+  /**
+   * Success - Execution history retrieved
+   */
+  200: HistoryResponse
+}
+
+export type GetHistoryResponse = GetHistoryResponses[keyof GetHistoryResponses]
+
+export type GetHistoryForPromptData = {
+  body?: never
+  path: {
+    /**
+     * The prompt ID to retrieve history for
+     */
+    prompt_id: string
+  }
+  query?: never
+  url: '/api/history_v2/{prompt_id}'
+}
+
+export type GetHistoryForPromptErrors = {
+  /**
+   * Unauthorized - Authentication required
+   */
+  401: ErrorResponse
+  /**
+   * Prompt not found
+   */
+  404: ErrorResponse
+  /**
+   * Internal server error
+   */
+  500: ErrorResponse
+}
+
+export type GetHistoryForPromptError =
+  GetHistoryForPromptErrors[keyof GetHistoryForPromptErrors]
+
+export type GetHistoryForPromptResponses = {
+  /**
+   * Success - History for prompt retrieved
+   */
+  200: HistoryDetailResponse
+}
+
+export type GetHistoryForPromptResponse =
+  GetHistoryForPromptResponses[keyof GetHistoryForPromptResponses]
+
+export type ListJobsData = {
+  body?: never
+  path?: never
+  query?: {
+    /**
+     * Filter by one or more statuses (comma-separated). If not provided, returns all jobs.
+     */
+    status?: string
+    /**
+     * Filter by workflow ID (exact match)
+     */
+    workflow_id?: string
+    /**
+     * Filter by output media type (only applies to completed jobs with outputs)
+     */
+    output_type?: 'image' | 'video' | 'audio' | '3d'
+    /**
+     * Field to sort by (create_time = when job was submitted, execution_time = how long workflow took to run)
+     */
+    sort_by?: 'create_time' | 'execution_time'
+    /**
+     * Sort direction (asc = ascending, desc = descending)
+     */
+    sort_order?: 'asc' | 'desc'
+    /**
+     * Pagination offset (0-based)
+     */
+    offset?: number
+    /**
+     * Maximum items per page (1-1000)
+     */
+    limit?: number
+  }
+  url: '/api/jobs'
+}
+
+export type ListJobsErrors = {
+  /**
+   * Unauthorized - Authentication required
+   */
+  401: ErrorResponse
+  /**
+   * Internal server error
+   */
+  500: ErrorResponse
+}
+
+export type ListJobsError = ListJobsErrors[keyof ListJobsErrors]
+
+export type ListJobsResponses = {
+  /**
+   * Success - Jobs retrieved
+   */
+  200: JobsListResponse
+}
+
+export type ListJobsResponse = ListJobsResponses[keyof ListJobsResponses]
+
+export type GetJobDetailData = {
+  body?: never
+  path: {
+    /**
+     * Job identifier (UUID)
+     */
+    job_id: string
+  }
+  query?: never
+  url: '/api/jobs/{job_id}'
+}
+
+export type GetJobDetailErrors = {
+  /**
+   * Unauthorized - Authentication required
+   */
+  401: ErrorResponse
+  /**
+   * Forbidden - Job does not belong to user
+   */
+  403: ErrorResponse
+  /**
+   * Job not found
+   */
+  404: ErrorResponse
+  /**
+   * Internal server error
+   */
+  500: ErrorResponse
+}
+
+export type GetJobDetailError = GetJobDetailErrors[keyof GetJobDetailErrors]
+
+export type GetJobDetailResponses = {
+  /**
+   * Success - Job details retrieved
+   */
+  200: JobDetailResponse
+}
+
+export type GetJobDetailResponse =
+  GetJobDetailResponses[keyof GetJobDetailResponses]
+
+export type ViewFileData = {
+  body?: never
+  path?: never
+  query: {
+    /**
+     * Name of the file to view
+     */
+    filename: string
+    /**
+     * Subfolder path where the file is located
+     */
+    subfolder?: string
+    /**
+     * Type of file (e.g., output, input, temp)
+     */
+    type?: string
+    /**
+     * Full path to the file (used for temp files)
+     */
+    fullpath?: string
+    /**
+     * Format of the file
+     */
+    format?: string
+    /**
+     * Frame rate for video files
+     */
+    frame_rate?: number
+    /**
+     * Workflow identifier
+     */
+    workflow?: string
+    /**
+     * Timestamp parameter
+     */
+    timestamp?: number
+    /**
+     * Image channel to extract from PNG images.
+     * - 'rgb': Return only RGB channels (alpha set to fully opaque)
+     * - 'a' or 'alpha': Return alpha channel as grayscale image
+     * - If not specified, return original image unchanged via redirect
+     *
+     */
+    channel?: string
+    /**
+     * Maximum dimension (width or height) to resize the image to, preserving aspect ratio.
+     * The image is fit within a res x res box. Returns a JPEG thumbnail.
+     * Only applies to raster image files (PNG, JPEG, WebP, GIF).
+     *
+     */
+    res?: number
+  }
+  url: '/api/view'
+}
+
+export type ViewFileErrors = {
+  /**
+   * Invalid request parameters
+   */
+  400: ErrorResponse
+  /**
+   * File not found or unauthorized
+   */
+  404: ErrorResponse
+  /**
+   * Internal server error
+   */
+  500: ErrorResponse
+}
+
+export type ViewFileError = ViewFileErrors[keyof ViewFileErrors]
+
+export type ViewFileResponses = {
+  /**
+   * Success - File content returned (used when channel or res parameter is present)
+   */
+  200: Blob | File
+}
+
+export type ViewFileResponse = ViewFileResponses[keyof ViewFileResponses]
+
 export type GetMaskLayersData = {
   body?: never
   path?: never
@@ -3259,6 +4253,97 @@ export type ImportPublishedAssetsResponses = {
 export type ImportPublishedAssetsResponse2 =
   ImportPublishedAssetsResponses[keyof ImportPublishedAssetsResponses]
 
+export type GetQueueInfoData = {
+  body?: never
+  path?: never
+  query?: never
+  url: '/api/queue'
+}
+
+export type GetQueueInfoErrors = {
+  /**
+   * Invalid request parameters
+   */
+  400: ErrorResponse
+  /**
+   * Invalid request parameters
+   */
+  500: ErrorResponse
+}
+
+export type GetQueueInfoError = GetQueueInfoErrors[keyof GetQueueInfoErrors]
+
+export type GetQueueInfoResponses = {
+  /**
+   * Success
+   */
+  200: QueueInfo
+}
+
+export type GetQueueInfoResponse =
+  GetQueueInfoResponses[keyof GetQueueInfoResponses]
+
+export type ManageQueueData = {
+  body: QueueManageRequest
+  path?: never
+  query?: never
+  url: '/api/queue'
+}
+
+export type ManageQueueErrors = {
+  /**
+   * Invalid request parameters
+   */
+  400: ErrorResponse
+  /**
+   * Unauthorized
+   */
+  401: ErrorResponse
+  /**
+   * Internal server error
+   */
+  500: ErrorResponse
+}
+
+export type ManageQueueError = ManageQueueErrors[keyof ManageQueueErrors]
+
+export type ManageQueueResponses = {
+  /**
+   * Success
+   */
+  200: QueueManageResponse
+}
+
+export type ManageQueueResponse =
+  ManageQueueResponses[keyof ManageQueueResponses]
+
+export type InterruptJobData = {
+  body?: never
+  path?: never
+  query?: never
+  url: '/api/interrupt'
+}
+
+export type InterruptJobErrors = {
+  /**
+   * Unauthorized - Authentication required
+   */
+  401: ErrorResponse
+  /**
+   * Internal server error
+   */
+  500: ErrorResponse
+}
+
+export type InterruptJobError = InterruptJobErrors[keyof InterruptJobErrors]
+
+export type InterruptJobResponses = {
+  /**
+   * Success - Job interrupted or no running job found
+   */
+  200: unknown
+}
+
 export type ListSecretsData = {
   body?: never
   path?: never
@@ -3487,6 +4572,73 @@ export type UpdateSecretResponses = {
 export type UpdateSecretResponse =
   UpdateSecretResponses[keyof UpdateSecretResponses]
 
+export type GetAllSettingsData = {
+  body?: never
+  path?: never
+  query?: never
+  url: '/api/settings'
+}
+
+export type GetAllSettingsErrors = {
+  /**
+   * Unauthorized
+   */
+  401: ErrorResponse
+}
+
+export type GetAllSettingsError =
+  GetAllSettingsErrors[keyof GetAllSettingsErrors]
+
+export type GetAllSettingsResponses = {
+  /**
+   * User settings as key-value pairs
+   */
+  200: {
+    [key: string]: unknown
+  }
+}
+
+export type GetAllSettingsResponse =
+  GetAllSettingsResponses[keyof GetAllSettingsResponses]
+
+export type UpdateMultipleSettingsData = {
+  /**
+   * Settings to update as key-value pairs
+   */
+  body: {
+    [key: string]: unknown
+  }
+  path?: never
+  query?: never
+  url: '/api/settings'
+}
+
+export type UpdateMultipleSettingsErrors = {
+  /**
+   * Invalid request
+   */
+  400: ErrorResponse
+  /**
+   * Unauthorized
+   */
+  401: ErrorResponse
+}
+
+export type UpdateMultipleSettingsError =
+  UpdateMultipleSettingsErrors[keyof UpdateMultipleSettingsErrors]
+
+export type UpdateMultipleSettingsResponses = {
+  /**
+   * Updated user settings
+   */
+  200: {
+    [key: string]: unknown
+  }
+}
+
+export type UpdateMultipleSettingsResponse =
+  UpdateMultipleSettingsResponses[keyof UpdateMultipleSettingsResponses]
+
 export type GetSettingByKeyData = {
   body?: never
   path: {
@@ -3607,11 +4759,495 @@ export type SubmitFeedbackResponses = {
 export type SubmitFeedbackResponse =
   SubmitFeedbackResponses[keyof SubmitFeedbackResponses]
 
+export type GetUserdataData = {
+  body?: never
+  path?: never
+  query?: {
+    /**
+     * The directory to list files from.
+     */
+    dir?: string
+    /**
+     * Whether to list files recursively.
+     */
+    recurse?: boolean
+    /**
+     * Whether to split file information by type.
+     */
+    split?: boolean
+    /**
+     * Whether to return full file metadata.
+     */
+    full_info?: boolean
+  }
+  url: '/api/userdata'
+}
+
+export type GetUserdataErrors = {
+  /**
+   * Bad request (e.g., invalid filename).
+   */
+  400: string
+  /**
+   * Unauthorized.
+   */
+  401: string
+  /**
+   * File not found or invalid path.
+   */
+  404: string
+  /**
+   * General error
+   */
+  500: string
+}
+
+export type GetUserdataError = GetUserdataErrors[keyof GetUserdataErrors]
+
+export type GetUserdataResponses = {
+  /**
+   * A list of user data files.
+   */
+  200: GetUserDataResponseFull
+}
+
+export type GetUserdataResponse =
+  GetUserdataResponses[keyof GetUserdataResponses]
+
+export type GetUserdataFilePublishData = {
+  body?: never
+  path: {
+    file: string
+  }
+  query?: never
+  url: '/api/userdata/{file}/publish'
+}
+
+export type GetUserdataFilePublishErrors = {
+  /**
+   * Unauthorized
+   */
+  401: ErrorResponse
+  /**
+   * Workflow not found
+   */
+  404: ErrorResponse
+  /**
+   * Internal server error
+   */
+  500: ErrorResponse
+}
+
+export type GetUserdataFilePublishError =
+  GetUserdataFilePublishErrors[keyof GetUserdataFilePublishErrors]
+
+export type GetUserdataFilePublishResponses = {
+  /**
+   * Publish info (publish_time is null if never published)
+   */
+  200: WorkflowPublishInfo
+}
+
+export type GetUserdataFilePublishResponse =
+  GetUserdataFilePublishResponses[keyof GetUserdataFilePublishResponses]
+
+export type PostUserdataFilePublishData = {
+  body: PublishWorkflowAssetsRequest
+  path: {
+    file: string
+  }
+  query?: never
+  url: '/api/userdata/{file}/publish'
+}
+
+export type PostUserdataFilePublishErrors = {
+  /**
+   * Bad request
+   */
+  400: ErrorResponse
+  /**
+   * Unauthorized
+   */
+  401: ErrorResponse
+  /**
+   * Workflow not found
+   */
+  404: ErrorResponse
+  /**
+   * Internal server error
+   */
+  500: ErrorResponse
+}
+
+export type PostUserdataFilePublishError =
+  PostUserdataFilePublishErrors[keyof PostUserdataFilePublishErrors]
+
+export type PostUserdataFilePublishResponses = {
+  /**
+   * Workflow published
+   */
+  200: WorkflowPublishInfo
+}
+
+export type PostUserdataFilePublishResponse =
+  PostUserdataFilePublishResponses[keyof PostUserdataFilePublishResponses]
+
+export type DeleteUserdataFileData = {
+  body?: never
+  path: {
+    /**
+     * The file path to delete (URL encoded if necessary).
+     */
+    file: string
+  }
+  query?: never
+  url: '/api/userdata/{file}'
+}
+
+export type DeleteUserdataFileErrors = {
+  /**
+   * Unauthorized.
+   */
+  401: string
+  /**
+   * File not found.
+   */
+  404: string
+  /**
+   * Internal server error.
+   */
+  500: string
+}
+
+export type DeleteUserdataFileError =
+  DeleteUserdataFileErrors[keyof DeleteUserdataFileErrors]
+
+export type DeleteUserdataFileResponses = {
+  /**
+   * File deleted successfully (No Content).
+   */
+  204: void
+}
+
+export type DeleteUserdataFileResponse =
+  DeleteUserdataFileResponses[keyof DeleteUserdataFileResponses]
+
+export type GetUserdataFileData = {
+  body?: never
+  path: {
+    /**
+     * The filename of the user data to retrieve.
+     */
+    file: string
+  }
+  query?: never
+  url: '/api/userdata/{file}'
+}
+
+export type GetUserdataFileErrors = {
+  /**
+   * Bad request (e.g., invalid filename).
+   */
+  400: string
+  /**
+   * Unauthorized.
+   */
+  401: string
+  /**
+   * File not found or invalid path.
+   */
+  404: string
+  /**
+   * General error
+   */
+  500: string
+}
+
+export type GetUserdataFileError =
+  GetUserdataFileErrors[keyof GetUserdataFileErrors]
+
+export type GetUserdataFileResponses = {
+  /**
+   * Successfully retrieved the file.
+   */
+  200: Blob | File
+}
+
+export type GetUserdataFileResponse =
+  GetUserdataFileResponses[keyof GetUserdataFileResponses]
+
+export type PostUserdataFileData = {
+  body: Blob | File
+  path: {
+    /**
+     * The target file path (URL encoded if necessary).
+     */
+    file: string
+  }
+  query?: {
+    /**
+     * If "false", prevents overwriting existing files. Defaults to "true".
+     */
+    overwrite?: 'true' | 'false'
+    /**
+     * If "true", returns detailed file info; if "false", returns only the relative path.
+     */
+    full_info?: 'true' | 'false'
+  }
+  url: '/api/userdata/{file}'
+}
+
+export type PostUserdataFileErrors = {
+  /**
+   * Missing or invalid 'file' parameter.
+   */
+  400: string
+  /**
+   * Unauthorized.
+   */
+  401: string
+  /**
+   * The requested path is not allowed.
+   */
+  403: string
+  /**
+   * File already exists and overwrite is set to false.
+   */
+  409: string
+  /**
+   * General error
+   */
+  500: string
+}
+
+export type PostUserdataFileError =
+  PostUserdataFileErrors[keyof PostUserdataFileErrors]
+
+export type PostUserdataFileResponses = {
+  /**
+   * File uploaded successfully.
+   */
+  200: UserDataResponseFull
+}
+
+export type PostUserdataFileResponse =
+  PostUserdataFileResponses[keyof PostUserdataFileResponses]
+
+export type MoveUserdataFileData = {
+  body?: never
+  path: {
+    /**
+     * The source file path (URL encoded if necessary).
+     */
+    file: string
+    /**
+     * The destination file path (URL encoded if necessary).
+     */
+    dest: string
+  }
+  query?: {
+    /**
+     * If "false", prevents overwriting existing files. Defaults to "true".
+     */
+    overwrite?: 'true' | 'false'
+  }
+  url: '/api/userdata/{file}/move/{dest}'
+}
+
+export type MoveUserdataFileErrors = {
+  /**
+   * Missing or invalid parameters.
+   */
+  400: string
+  /**
+   * Unauthorized.
+   */
+  401: string
+  /**
+   * Source file not found.
+   */
+  404: string
+  /**
+   * Destination file already exists and overwrite is set to false.
+   */
+  409: string
+  /**
+   * General error
+   */
+  500: string
+}
+
+export type MoveUserdataFileError =
+  MoveUserdataFileErrors[keyof MoveUserdataFileErrors]
+
+export type MoveUserdataFileResponses = {
+  /**
+   * File moved successfully.
+   */
+  200: UserDataResponseFull
+}
+
+export type MoveUserdataFileResponse =
+  MoveUserdataFileResponses[keyof MoveUserdataFileResponses]
+
+export type UploadImageData = {
+  body: {
+    /**
+     * The image file to upload
+     */
+    image: Blob | File
+    /**
+     * Whether to overwrite existing file (true/false)
+     */
+    overwrite?: string
+    /**
+     * Optional subfolder path
+     */
+    subfolder?: string
+    /**
+     * Upload type (defaults to "output")
+     */
+    type?: string
+  }
+  path?: never
+  query?: never
+  url: '/api/upload/image'
+}
+
+export type UploadImageErrors = {
+  /**
+   * Bad request
+   */
+  400: ErrorResponse
+  /**
+   * Unauthorized
+   */
+  401: ErrorResponse
+  /**
+   * Internal server error
+   */
+  500: ErrorResponse
+}
+
+export type UploadImageError = UploadImageErrors[keyof UploadImageErrors]
+
+export type UploadImageResponses = {
+  /**
+   * Image uploaded successfully
+   */
+  200: {
+    /**
+     * Filename of the uploaded image
+     */
+    name?: string
+    /**
+     * Subfolder path where image was saved
+     */
+    subfolder?: string
+    /**
+     * Type of upload (e.g., "output")
+     */
+    type?: string
+  }
+}
+
+export type UploadImageResponse =
+  UploadImageResponses[keyof UploadImageResponses]
+
+export type UploadMaskData = {
+  body: {
+    /**
+     * The mask image file to upload
+     */
+    image: Blob | File
+    /**
+     * JSON string containing reference to the original image
+     */
+    original_ref: string
+  }
+  path?: never
+  query?: never
+  url: '/api/upload/mask'
+}
+
+export type UploadMaskErrors = {
+  /**
+   * Bad request
+   */
+  400: ErrorResponse
+  /**
+   * Unauthorized
+   */
+  401: ErrorResponse
+  /**
+   * Internal server error
+   */
+  500: ErrorResponse
+}
+
+export type UploadMaskError = UploadMaskErrors[keyof UploadMaskErrors]
+
+export type UploadMaskResponses = {
+  /**
+   * Mask uploaded successfully
+   */
+  200: {
+    /**
+     * Filename of the uploaded mask
+     */
+    name?: string
+    /**
+     * Subfolder path where mask was saved
+     */
+    subfolder?: string
+    /**
+     * Type of upload (e.g., "output")
+     */
+    type?: string
+    /**
+     * Additional metadata for mask detection and re-editing
+     */
+    metadata?: {
+      /**
+       * Whether this file is a mask
+       */
+      is_mask?: boolean
+      /**
+       * Hash of the original unmasked image
+       */
+      original_hash?: string
+      /**
+       * Type of mask (e.g., "painted_masked")
+       */
+      mask_type?: string
+      /**
+       * Related mask layer files (if available)
+       */
+      related_files?: {
+        /**
+         * Hash of the mask layer
+         */
+        mask?: string
+        /**
+         * Hash of the paint layer
+         */
+        paint?: string
+        /**
+         * Hash of the painted image
+         */
+        painted?: string
+      }
+    }
+  }
+}
+
+export type UploadMaskResponse = UploadMaskResponses[keyof UploadMaskResponses]
+
 export type GetLogsData = {
   body?: never
   path?: never
   query?: never
-  url: '/internal/logs'
+  url: '/api/logs'
 }
 
 export type GetLogsErrors = {
@@ -3632,66 +5268,32 @@ export type GetLogsResponses = {
 
 export type GetLogsResponse = GetLogsResponses[keyof GetLogsResponses]
 
-export type GetRawLogsData = {
+export type GetSystemStatsData = {
   body?: never
   path?: never
   query?: never
-  url: '/internal/logs/raw'
+  url: '/api/system_stats'
 }
 
-export type GetRawLogsErrors = {
+export type GetSystemStatsErrors = {
   /**
    * Unauthorized
    */
   401: ErrorResponse
 }
 
-export type GetRawLogsError = GetRawLogsErrors[keyof GetRawLogsErrors]
+export type GetSystemStatsError =
+  GetSystemStatsErrors[keyof GetSystemStatsErrors]
 
-export type GetRawLogsResponses = {
+export type GetSystemStatsResponses = {
   /**
    * Success
    */
-  200: RawLogsResponse
+  200: SystemStatsResponse
 }
 
-export type GetRawLogsResponse = GetRawLogsResponses[keyof GetRawLogsResponses]
-
-export type SubscribeToLogsData = {
-  body: LogsSubscribeRequest
-  path?: never
-  query?: never
-  url: '/internal/logs/subscribe'
-}
-
-export type SubscribeToLogsErrors = {
-  /**
-   * Bad request
-   */
-  400: ErrorResponse
-  /**
-   * Unauthorized
-   */
-  401: ErrorResponse
-}
-
-export type SubscribeToLogsError =
-  SubscribeToLogsErrors[keyof SubscribeToLogsErrors]
-
-export type SubscribeToLogsResponses = {
-  /**
-   * Success
-   */
-  200: {
-    /**
-     * Whether logs subscription is enabled
-     */
-    enabled?: boolean
-  }
-}
-
-export type SubscribeToLogsResponse =
-  SubscribeToLogsResponses[keyof SubscribeToLogsResponses]
+export type GetSystemStatsResponse =
+  GetSystemStatsResponses[keyof GetSystemStatsResponses]
 
 export type DeleteSessionData = {
   body?: never
@@ -4457,6 +6059,45 @@ export type SendUserInviteEmailResponses = {
 export type SendUserInviteEmailResponse2 =
   SendUserInviteEmailResponses[keyof SendUserInviteEmailResponses]
 
+export type SetReviewStatusData = {
+  body: SetReviewStatusRequest
+  path?: never
+  query?: never
+  url: '/admin/api/hub/workflows/status'
+}
+
+export type SetReviewStatusErrors = {
+  /**
+   * Bad request - invalid status value or empty share_ids
+   */
+  400: ErrorResponse
+  /**
+   * Unauthorized - authentication required
+   */
+  401: ErrorResponse
+  /**
+   * Forbidden - insufficient permissions
+   */
+  403: ErrorResponse
+  /**
+   * Internal server error
+   */
+  500: ErrorResponse
+}
+
+export type SetReviewStatusError =
+  SetReviewStatusErrors[keyof SetReviewStatusErrors]
+
+export type SetReviewStatusResponses = {
+  /**
+   * Status updated successfully
+   */
+  200: SetReviewStatusResponse
+}
+
+export type SetReviewStatusResponse2 =
+  SetReviewStatusResponses[keyof SetReviewStatusResponses]
+
 export type GetDeletionRequestData = {
   body?: never
   path?: never
@@ -5740,6 +7381,10 @@ export type ListHubWorkflowsData = {
      * When true, returns full HubWorkflowDetail objects in the workflows array instead of summaries. Requires limit <= 20.
      */
     detail?: boolean
+    /**
+     * Filter by status (e.g. ?status=pending,approved). Defaults to approved if omitted.
+     */
+    status?: Array<HubWorkflowStatus>
   }
   url: '/api/hub/workflows'
 }
@@ -5814,7 +7459,12 @@ export type PublishHubWorkflowResponse =
 export type ListHubWorkflowIndexData = {
   body?: never
   path?: never
-  query?: never
+  query?: {
+    /**
+     * Filter by status (e.g. ?status=pending,approved). Defaults to approved if omitted.
+     */
+    status?: Array<HubWorkflowStatus>
+  }
   url: '/api/hub/workflows/index'
 }
 
@@ -5952,3 +7602,444 @@ export type GetPublishedWorkflowResponses = {
 
 export type GetPublishedWorkflowResponse =
   GetPublishedWorkflowResponses[keyof GetPublishedWorkflowResponses]
+
+export type GetExtensionsData = {
+  body?: never
+  path?: never
+  query?: never
+  url: '/api/extensions'
+}
+
+export type GetExtensionsResponses = {
+  /**
+   * JSON array of extension file paths
+   */
+  200: unknown
+}
+
+export type GetVhsViewVideoData = {
+  body?: never
+  path?: never
+  query: {
+    /**
+     * Name of the video file to view
+     */
+    filename: string
+    /**
+     * Type of file (e.g., output, input, temp)
+     */
+    type?: string
+    /**
+     * Subfolder path where the file is located
+     */
+    subfolder?: string
+  }
+  url: '/api/vhs/viewvideo'
+}
+
+export type GetVhsViewVideoErrors = {
+  /**
+   * Unauthorized
+   */
+  401: unknown
+}
+
+export type GetVhsViewVideoResponses = {
+  /**
+   * Video stream
+   */
+  200: unknown
+}
+
+export type GetVhsViewAudioData = {
+  body?: never
+  path?: never
+  query: {
+    /**
+     * Name of the audio file to view
+     */
+    filename: string
+    /**
+     * Type of file (e.g., output, input, temp)
+     */
+    type?: string
+    /**
+     * Subfolder path where the file is located
+     */
+    subfolder?: string
+  }
+  url: '/api/vhs/viewaudio'
+}
+
+export type GetVhsViewAudioErrors = {
+  /**
+   * Unauthorized
+   */
+  401: unknown
+}
+
+export type GetVhsViewAudioResponses = {
+  /**
+   * Audio stream
+   */
+  200: unknown
+}
+
+export type GetVhsQueryVideoData = {
+  body?: never
+  path?: never
+  query: {
+    /**
+     * Name of the video file to query
+     */
+    filename: string
+  }
+  url: '/api/vhs/queryvideo'
+}
+
+export type GetVhsQueryVideoErrors = {
+  /**
+   * Unauthorized
+   */
+  401: unknown
+}
+
+export type GetVhsQueryVideoResponses = {
+  /**
+   * Video metadata
+   */
+  200: unknown
+}
+
+export type GetUsersRawData = {
+  body?: never
+  path?: never
+  query?: never
+  url: '/api/users'
+}
+
+export type GetUsersRawErrors = {
+  /**
+   * Unauthorized
+   */
+  401: unknown
+}
+
+export type GetUsersRawResponses = {
+  /**
+   * User list
+   */
+  200: unknown
+}
+
+export type GetApiViewVideoAliasData = {
+  body?: never
+  path?: never
+  query: {
+    /**
+     * Name of the file to view (see `/api/view` for the full handler contract)
+     */
+    filename: string
+  }
+  url: '/api/viewvideo'
+}
+
+export type GetApiViewVideoAliasErrors = {
+  /**
+   * Unauthorized
+   */
+  401: unknown
+}
+
+export type GetApiViewVideoAliasResponses = {
+  /**
+   * File stream
+   */
+  200: unknown
+}
+
+export type GetViewCompatAliasData = {
+  body?: never
+  path?: never
+  query: {
+    /**
+     * Name of the file to view (see `/api/view` for the full handler contract)
+     */
+    filename: string
+  }
+  url: '/view'
+}
+
+export type GetViewCompatAliasErrors = {
+  /**
+   * Unauthorized
+   */
+  401: unknown
+}
+
+export type GetViewCompatAliasResponses = {
+  /**
+   * File stream
+   */
+  200: unknown
+}
+
+export type GetWebsocketData = {
+  body?: never
+  path?: never
+  query?: {
+    /**
+     * Stable client identifier used to associate the WebSocket
+     * connection with the frontend session. If omitted, the server
+     * generates one.
+     *
+     */
+    clientId?: string
+  }
+  url: '/ws'
+}
+
+export type GetWebsocketErrors = {
+  /**
+   * Unauthorized
+   */
+  401: unknown
+}
+
+export type GetTemplateProxyData = {
+  body?: never
+  path: {
+    path: string
+  }
+  query?: never
+  url: '/templates/{path}'
+}
+
+export type GetTemplateProxyErrors = {
+  /**
+   * Template not found
+   */
+  404: unknown
+}
+
+export type GetHealthData = {
+  body?: never
+  path?: never
+  query?: never
+  url: '/health'
+}
+
+export type GetHealthErrors = {
+  /**
+   * Service is unhealthy
+   */
+  503: unknown
+}
+
+export type GetHealthResponses = {
+  /**
+   * Service is healthy
+   */
+  200: unknown
+}
+
+export type GetOpenapiSpecData = {
+  body?: never
+  path?: never
+  query?: never
+  url: '/openapi'
+}
+
+export type GetOpenapiSpecResponses = {
+  /**
+   * OpenAPI specification document
+   */
+  200: unknown
+}
+
+export type GetMonitoringTasksData = {
+  body?: never
+  path?: never
+  query?: never
+  url: '/monitoring/tasks'
+}
+
+export type GetMonitoringTasksErrors = {
+  /**
+   * Unauthorized
+   */
+  401: unknown
+  /**
+   * Forbidden
+   */
+  403: unknown
+}
+
+export type GetMonitoringTasksResponses = {
+  /**
+   * HTML dashboard
+   */
+  200: unknown
+}
+
+export type DeleteMonitoringTasksSubpathData = {
+  body?: never
+  path: {
+    path: string
+  }
+  query?: never
+  url: '/monitoring/tasks/{path}'
+}
+
+export type DeleteMonitoringTasksSubpathErrors = {
+  /**
+   * Unauthorized
+   */
+  401: unknown
+  /**
+   * Forbidden
+   */
+  403: unknown
+}
+
+export type DeleteMonitoringTasksSubpathResponses = {
+  /**
+   * Deletion result
+   */
+  200: unknown
+}
+
+export type GetMonitoringTasksSubpathData = {
+  body?: never
+  path: {
+    path: string
+  }
+  query?: never
+  url: '/monitoring/tasks/{path}'
+}
+
+export type GetMonitoringTasksSubpathErrors = {
+  /**
+   * Unauthorized
+   */
+  401: unknown
+  /**
+   * Forbidden
+   */
+  403: unknown
+}
+
+export type GetMonitoringTasksSubpathResponses = {
+  /**
+   * Subpath response (asynqmon-determined content type)
+   */
+  200: unknown
+}
+
+export type PostMonitoringTasksSubpathData = {
+  body?: never
+  path: {
+    path: string
+  }
+  query?: never
+  url: '/monitoring/tasks/{path}'
+}
+
+export type PostMonitoringTasksSubpathErrors = {
+  /**
+   * Unauthorized
+   */
+  401: unknown
+  /**
+   * Forbidden
+   */
+  403: unknown
+}
+
+export type PostMonitoringTasksSubpathResponses = {
+  /**
+   * Action result
+   */
+  200: unknown
+}
+
+export type GetPprofData = {
+  body?: never
+  path: {
+    path: string
+  }
+  query?: never
+  url: '/debug/pprof/{path}'
+}
+
+export type GetPprofResponses = {
+  /**
+   * Profile data
+   */
+  200: unknown
+}
+
+export type GetPprofProfileData = {
+  body?: never
+  path?: never
+  query?: never
+  url: '/debug/pprof/profile'
+}
+
+export type GetPprofProfileResponses = {
+  /**
+   * CPU profile data
+   */
+  200: unknown
+}
+
+export type GetPprofTraceData = {
+  body?: never
+  path?: never
+  query?: never
+  url: '/debug/pprof/trace'
+}
+
+export type GetPprofTraceResponses = {
+  /**
+   * Execution trace data
+   */
+  200: unknown
+}
+
+export type PostPprofSymbolData = {
+  body?: never
+  path?: never
+  query?: never
+  url: '/debug/pprof/symbol'
+}
+
+export type PostPprofSymbolResponses = {
+  /**
+   * Resolved symbols
+   */
+  200: unknown
+}
+
+export type GetStaticExtensionsData = {
+  body?: never
+  path: {
+    path: string
+  }
+  query?: never
+  url: '/extensions/{path}'
+}
+
+export type GetStaticExtensionsErrors = {
+  /**
+   * File not found
+   */
+  404: unknown
+}
+
+export type GetStaticExtensionsResponses = {
+  /**
+   * Static file
+   */
+  200: unknown
+}
diff --git a/packages/ingest-types/src/zod.gen.ts b/packages/ingest-types/src/zod.gen.ts
index 858689ae93..f6f4ecc16b 100644
--- a/packages/ingest-types/src/zod.gen.ts
+++ b/packages/ingest-types/src/zod.gen.ts
@@ -58,10 +58,21 @@ export const zLabelRef = z.object({
   display_name: z.string()
 })
 
+/**
+ * Public workflow status. NULL in the database is represented as pending in API responses.
+ */
+export const zHubWorkflowStatus = z.enum([
+  'pending',
+  'approved',
+  'rejected',
+  'deprecated'
+])
+
 export const zHubWorkflowDetail = z.object({
   share_id: z.string(),
   workflow_id: z.string(),
   name: z.string(),
+  status: zHubWorkflowStatus,
   description: z.string().optional(),
   tags: z.array(zLabelRef).optional(),
   thumbnail_type: z.enum(['image', 'video', 'image_comparison']).optional(),
@@ -81,6 +92,7 @@ export const zHubWorkflowDetail = z.object({
 export const zHubWorkflowSummary = z.object({
   share_id: z.string(),
   name: z.string(),
+  status: zHubWorkflowStatus,
   description: z.string().optional(),
   tags: z.array(zLabelRef).optional(),
   models: z.array(zLabelRef).optional(),
@@ -114,6 +126,7 @@ export const zHubLabelListResponse = z.object({
 export const zHubWorkflowTemplateEntry = z.object({
   name: z.string(),
   title: z.string(),
+  status: zHubWorkflowStatus,
   description: z.string().optional(),
   tags: z.array(z.string()).optional(),
   models: z.array(z.string()).optional(),
@@ -203,6 +216,18 @@ export const zWorkflowApiAssetsRequest = z.object({
   workflow_api_json: z.record(z.unknown())
 })
 
+export const zPublishWorkflowAssetsRequest = z.object({
+  asset_ids: z.array(z.string())
+})
+
+export const zWorkflowPublishInfo = z.object({
+  workflow_id: z.string(),
+  share_id: z.string(),
+  publish_time: z.string().datetime().nullish(),
+  listed: z.boolean(),
+  assets: z.array(zAssetInfo)
+})
+
 export const zForkWorkflowRequest = z.object({
   source_version: z.number().int(),
   name: z.string().optional()
@@ -743,6 +768,106 @@ export const zDeletionRequest = z.object({
   deletion_status: z.array(zDeletionStatus)
 })
 
+/**
+ * Detailed execution error information from ComfyUI
+ */
+export const zExecutionError = z.object({
+  node_id: z.string(),
+  node_type: z.string(),
+  exception_message: z.string(),
+  exception_type: z.string(),
+  traceback: z.array(z.string()),
+  current_inputs: z.record(z.unknown()),
+  current_outputs: z.record(z.unknown())
+})
+
+/**
+ * Full job details including workflow and outputs
+ */
+export const zJobDetailResponse = z.object({
+  id: z.string().uuid(),
+  status: z.enum([
+    'pending',
+    'in_progress',
+    'completed',
+    'failed',
+    'cancelled'
+  ]),
+  workflow: z.record(z.unknown()).optional(),
+  execution_error: zExecutionError.optional(),
+  create_time: z.coerce
+    .bigint()
+    .min(BigInt('-9223372036854775808'), {
+      message: 'Invalid value: Expected int64 to be >= -9223372036854775808'
+    })
+    .max(BigInt('9223372036854775807'), {
+      message: 'Invalid value: Expected int64 to be <= 9223372036854775807'
+    }),
+  update_time: z.coerce
+    .bigint()
+    .min(BigInt('-9223372036854775808'), {
+      message: 'Invalid value: Expected int64 to be >= -9223372036854775808'
+    })
+    .max(BigInt('9223372036854775807'), {
+      message: 'Invalid value: Expected int64 to be <= 9223372036854775807'
+    }),
+  outputs: z.record(z.unknown()).optional(),
+  preview_output: z.record(z.unknown()).optional(),
+  outputs_count: z.number().int().optional(),
+  workflow_id: z.string().optional(),
+  execution_status: z.record(z.unknown()).optional(),
+  execution_meta: z.record(z.unknown()).optional()
+})
+
+/**
+ * Lightweight job data for list views (workflow and full outputs excluded)
+ */
+export const zJobEntry = z.object({
+  id: z.string().uuid(),
+  status: z.enum([
+    'pending',
+    'in_progress',
+    'completed',
+    'failed',
+    'cancelled'
+  ]),
+  execution_error: zExecutionError.optional(),
+  create_time: z.coerce
+    .bigint()
+    .min(BigInt('-9223372036854775808'), {
+      message: 'Invalid value: Expected int64 to be >= -9223372036854775808'
+    })
+    .max(BigInt('9223372036854775807'), {
+      message: 'Invalid value: Expected int64 to be <= 9223372036854775807'
+    }),
+  preview_output: z.record(z.unknown()).optional(),
+  outputs_count: z.number().int().optional(),
+  workflow_id: z.string().optional(),
+  execution_start_time: z.coerce
+    .bigint()
+    .min(BigInt('-9223372036854775808'), {
+      message: 'Invalid value: Expected int64 to be >= -9223372036854775808'
+    })
+    .max(BigInt('9223372036854775807'), {
+      message: 'Invalid value: Expected int64 to be <= 9223372036854775807'
+    })
+    .optional(),
+  execution_end_time: z.coerce
+    .bigint()
+    .min(BigInt('-9223372036854775808'), {
+      message: 'Invalid value: Expected int64 to be >= -9223372036854775808'
+    })
+    .max(BigInt('9223372036854775807'), {
+      message: 'Invalid value: Expected int64 to be <= 9223372036854775807'
+    })
+    .optional()
+})
+
+export const zJobsListResponse = z.object({
+  jobs: z.array(zJobEntry),
+  pagination: zPaginationInfo
+})
+
 export const zTagsModificationResponse = z.object({
   added: z.array(z.string()).optional(),
   removed: z.array(z.string()).optional(),
@@ -870,6 +995,16 @@ export const zSendUserInviteEmailRequest = z.object({
   force: z.boolean().optional().default(false)
 })
 
+export const zSetReviewStatusResponse = z.object({
+  share_ids: z.array(z.string()),
+  status: z.enum(['approved', 'rejected'])
+})
+
+export const zSetReviewStatusRequest = z.object({
+  share_ids: z.array(z.string()).min(1),
+  status: z.enum(['approved', 'rejected'])
+})
+
 /**
  * Response after successfully claiming an invite code
  */
@@ -908,27 +1043,31 @@ export const zUserResponse = z.object({
   status: z.string()
 })
 
-export const zLogsSubscribeRequest = z.object({
-  enabled: z.boolean()
-})
-
 /**
- * Raw logs response with entries and size
+ * System statistics response
  */
-export const zRawLogsResponse = z.object({
-  entries: z
-    .array(
-      z.object({
-        m: z.string().optional()
-      })
-    )
-    .optional(),
-  size: z
-    .object({
-      cols: z.number().int().optional(),
-      rows: z.number().int().optional()
+export const zSystemStatsResponse = z.object({
+  system: z.object({
+    os: z.string(),
+    python_version: z.string(),
+    embedded_python: z.boolean(),
+    comfyui_version: z.string(),
+    comfyui_frontend_version: z.string().optional(),
+    workflow_templates_version: z.string().optional(),
+    cloud_version: z.string().optional(),
+    pytorch_version: z.string(),
+    argv: z.array(z.string()),
+    ram_total: z.number(),
+    ram_free: z.number()
+  }),
+  devices: z.array(
+    z.object({
+      name: z.string(),
+      type: z.string(),
+      vram_total: z.number().optional(),
+      vram_free: z.number().optional()
     })
-    .optional()
+  )
 })
 
 /**
@@ -975,6 +1114,49 @@ export const zModelFolder = z.object({
   folders: z.array(z.string())
 })
 
+/**
+ * Error response for ComfyUI prompt execution.
+ */
+export const zPromptErrorResponse = z.record(z.unknown())
+
+export const zGetUserDataResponseFullFile = z.object({
+  path: z.string().optional(),
+  size: z.number().int().optional(),
+  modified: z.coerce
+    .bigint()
+    .min(BigInt('-9223372036854775808'), {
+      message: 'Invalid value: Expected int64 to be >= -9223372036854775808'
+    })
+    .max(BigInt('9223372036854775807'), {
+      message: 'Invalid value: Expected int64 to be <= 9223372036854775807'
+    })
+    .optional()
+})
+
+export const zGetUserDataResponseFull = z.array(zGetUserDataResponseFullFile)
+
+export const zUserDataResponseFull = z.object({
+  path: z.string().optional(),
+  size: z.number().int().optional(),
+  modified: z.coerce
+    .bigint()
+    .min(BigInt('-9223372036854775808'), {
+      message: 'Invalid value: Expected int64 to be >= -9223372036854775808'
+    })
+    .max(BigInt('9223372036854775807'), {
+      message: 'Invalid value: Expected int64 to be <= 9223372036854775807'
+    })
+    .optional()
+})
+
+/**
+ * Request to manage history operations
+ */
+export const zHistoryManageRequest = z.object({
+  delete: z.array(z.string()).optional(),
+  clear: z.boolean().optional()
+})
+
 /**
  * Job status information
  */
@@ -995,6 +1177,89 @@ export const zJobStatusResponse = z.object({
   error_message: z.string().nullish()
 })
 
+export const zQueueManageResponse = z.object({
+  deleted: z.array(z.string()).optional(),
+  cleared: z.boolean().optional()
+})
+
+/**
+ * Request to manage queue operations
+ */
+export const zQueueManageRequest = z.object({
+  delete: z.array(z.string()).optional(),
+  clear: z.boolean().optional()
+})
+
+/**
+ * Queue information with pending and running jobs
+ */
+export const zQueueInfo = z.object({
+  queue_running: z.array(z.array(z.unknown())).optional(),
+  queue_pending: z.array(z.array(z.unknown())).optional()
+})
+
+/**
+ * History entry with full prompt data
+ */
+export const zHistoryDetailEntry = z.object({
+  prompt: z
+    .object({
+      priority: z.number().optional(),
+      prompt_id: z.string().optional(),
+      prompt: z.record(z.unknown()).optional(),
+      extra_data: z.record(z.unknown()).optional(),
+      outputs_to_execute: z.array(z.string()).optional()
+    })
+    .optional(),
+  outputs: z.record(z.unknown()).optional(),
+  status: z.record(z.unknown()).optional(),
+  meta: z.record(z.unknown()).optional()
+})
+
+/**
+ * Detailed execution history response for a specific prompt.
+ * Returns a dictionary with prompt_id as key and full history data as value.
+ *
+ */
+export const zHistoryDetailResponse = z.record(zHistoryDetailEntry)
+
+/**
+ * History entry with prompt_id and execution data
+ */
+export const zHistoryEntry = z.object({
+  prompt_id: z.string(),
+  create_time: z.coerce
+    .bigint()
+    .min(BigInt('-9223372036854775808'), {
+      message: 'Invalid value: Expected int64 to be >= -9223372036854775808'
+    })
+    .max(BigInt('9223372036854775807'), {
+      message: 'Invalid value: Expected int64 to be <= 9223372036854775807'
+    })
+    .optional(),
+  workflow_id: z.string().optional(),
+  prompt: z
+    .object({
+      priority: z.number().optional(),
+      prompt_id: z.string().optional(),
+      extra_data: z.record(z.unknown()).optional()
+    })
+    .optional(),
+  outputs: z.record(z.unknown()).optional(),
+  status: z.record(z.unknown()).optional(),
+  meta: z.record(z.unknown()).optional()
+})
+
+/**
+ * Execution history response with history array.
+ * Returns an object with a "history" key containing an array of history entries.
+ * Each entry includes prompt_id as a property along with execution data.
+ *
+ */
+export const zHistoryResponse = z.object({
+  history: z.array(zHistoryEntry)
+})
+
 /**
  * Full data for a global subgraph blueprint
  */
@@ -1019,6 +1284,32 @@ export const zGlobalSubgraphInfo = z.object({
   data: z.string().optional()
 })
 
+export const zNodeInfo = z.object({
+  input: z.record(z.unknown()).optional(),
+  input_order: z.record(z.array(z.string())).optional(),
+  output: z.array(z.string()).optional(),
+  output_is_list: z.array(z.boolean()).optional(),
+  output_name: z.array(z.string()).optional(),
+  name: z.string().optional(),
+  display_name: z.string().optional(),
+  description: z.string().optional(),
+  python_module: z.string().optional(),
+  category: z.string().optional(),
+  output_node: z.boolean().optional(),
+  output_tooltips: z.array(z.string()).optional(),
+  deprecated: z.boolean().optional(),
+  experimental: z.boolean().optional(),
+  api_node: z.boolean().optional()
+})
+
+export const zPromptInfo = z.object({
+  exec_info: z
+    .object({
+      queue_remaining: z.number().int().optional()
+    })
+    .optional()
+})
+
 export const zExportDownloadUrlResponse = z.object({
   url: z.string(),
   expires_at: z.string().datetime().optional()
@@ -1029,6 +1320,22 @@ export const zErrorResponse = z.object({
   message: z.string()
 })
 
+export const zPromptResponse = z.object({
+  prompt_id: z.string().uuid().optional(),
+  number: z.number().optional(),
+  node_errors: z.record(z.unknown()).optional()
+})
+
+export const zPromptRequest = z.object({
+  prompt: z.record(z.unknown()),
+  number: z.number().optional(),
+  front: z.boolean().optional(),
+  extra_data: z.record(z.unknown()).optional(),
+  partial_execution_targets: z.array(z.string()).optional(),
+  workflow_id: z.string().optional(),
+  workflow_version_id: z.string().optional()
+})
+
 export const zAssetWritable = z.object({
   id: z.string().uuid(),
   name: z.string(),
@@ -1073,6 +1380,53 @@ export const zAssetCreatedWritable = zAssetWritable.and(
  */
 export const zFeedbackResponseWritable = z.record(z.unknown())
 
+export const zGetPromptInfoData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * Success
+ */
+export const zGetPromptInfoResponse = zPromptInfo
+
+export const zExecutePromptData = z.object({
+  body: zPromptRequest,
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * Success - Prompt accepted
+ */
+export const zExecutePromptResponse = zPromptResponse
+
+export const zGetNodeInfoData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * Success
+ */
+export const zGetNodeInfoResponse = z.record(zNodeInfo)
+
+export const zGetFeaturesData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * Success
+ */
+export const zGetFeaturesResponse = z.object({
+  supports_preview_metadata: z.boolean().optional(),
+  max_upload_size: z.number().int().optional()
+})
+
 export const zGetWorkflowTemplatesData = z.object({
   body: z.never().optional(),
   path: z.never().optional(),
@@ -1147,6 +1501,97 @@ export const zGetModelPreviewData = z.object({
  */
 export const zGetModelPreviewResponse = z.string()
 
+export const zManageHistoryData = z.object({
+  body: zHistoryManageRequest,
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+export const zGetHistoryData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z
+    .object({
+      max_items: z.number().int().optional(),
+      offset: z.number().int().optional().default(0)
+    })
+    .optional()
+})
+
+/**
+ * Success - Execution history retrieved
+ */
+export const zGetHistoryResponse = zHistoryResponse
+
+export const zGetHistoryForPromptData = z.object({
+  body: z.never().optional(),
+  path: z.object({
+    prompt_id: z.string()
+  }),
+  query: z.never().optional()
+})
+
+/**
+ * Success - History for prompt retrieved
+ */
+export const zGetHistoryForPromptResponse = zHistoryDetailResponse
+
+export const zListJobsData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z
+    .object({
+      status: z.string().optional(),
+      workflow_id: z.string().optional(),
+      output_type: z.enum(['image', 'video', 'audio', '3d']).optional(),
+      sort_by: z.enum(['create_time', 'execution_time']).optional(),
+      sort_order: z.enum(['asc', 'desc']).optional(),
+      offset: z.number().int().gte(0).optional().default(0),
+      limit: z.number().int().gte(1).lte(1000).optional().default(100)
+    })
+    .optional()
+})
+
+/**
+ * Success - Jobs retrieved
+ */
+export const zListJobsResponse = zJobsListResponse
+
+export const zGetJobDetailData = z.object({
+  body: z.never().optional(),
+  path: z.object({
+    job_id: z.string().uuid()
+  }),
+  query: z.never().optional()
+})
+
+/**
+ * Success - Job details retrieved
+ */
+export const zGetJobDetailResponse = zJobDetailResponse
+
+export const zViewFileData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.object({
+    filename: z.string(),
+    subfolder: z.string().optional(),
+    type: z.string().optional(),
+    fullpath: z.string().optional(),
+    format: z.string().optional(),
+    frame_rate: z.number().int().optional(),
+    workflow: z.string().optional(),
+    timestamp: z.number().int().optional(),
+    channel: z.string().optional(),
+    res: z.number().int().gte(64).lte(1024).optional()
+  })
+})
+
+/**
+ * Success - File content returned (used when channel or res parameter is present)
+ */
+export const zViewFileResponse = z.string()
+
 export const zGetMaskLayersData = z.object({
   body: z.never().optional(),
   path: z.never().optional(),
@@ -1459,6 +1904,34 @@ export const zImportPublishedAssetsData = z.object({
  */
 export const zImportPublishedAssetsResponse2 = zImportPublishedAssetsResponse
 
+export const zGetQueueInfoData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * Success
+ */
+export const zGetQueueInfoResponse = zQueueInfo
+
+export const zManageQueueData = z.object({
+  body: zQueueManageRequest,
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * Success
+ */
+export const zManageQueueResponse = zQueueManageResponse
+
+export const zInterruptJobData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
 export const zListSecretsData = z.object({
   body: z.never().optional(),
   path: z.never().optional(),
@@ -1520,6 +1993,28 @@ export const zUpdateSecretData = z.object({
  */
 export const zUpdateSecretResponse = zSecretResponse
 
+export const zGetAllSettingsData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * User settings as key-value pairs
+ */
+export const zGetAllSettingsResponse = z.record(z.unknown())
+
+export const zUpdateMultipleSettingsData = z.object({
+  body: z.record(z.unknown()),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * Updated user settings
+ */
+export const zUpdateMultipleSettingsResponse = z.record(z.unknown())
+
 export const zGetSettingByKeyData = z.object({
   body: z.never().optional(),
   path: z.object({
@@ -1561,6 +2056,164 @@ export const zSubmitFeedbackData = z.object({
  */
 export const zSubmitFeedbackResponse = zFeedbackResponse
 
+export const zGetUserdataData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z
+    .object({
+      dir: z.string().optional(),
+      recurse: z.boolean().optional().default(false),
+      split: z.boolean().optional().default(false),
+      full_info: z.boolean().optional().default(false)
+    })
+    .optional()
+})
+
+/**
+ * A list of user data files.
+ */
+export const zGetUserdataResponse = zGetUserDataResponseFull
+
+export const zGetUserdataFilePublishData = z.object({
+  body: z.never().optional(),
+  path: z.object({
+    file: z.string()
+  }),
+  query: z.never().optional()
+})
+
+/**
+ * Publish info (publish_time is null if never published)
+ */
+export const zGetUserdataFilePublishResponse = zWorkflowPublishInfo
+
+export const zPostUserdataFilePublishData = z.object({
+  body: zPublishWorkflowAssetsRequest,
+  path: z.object({
+    file: z.string()
+  }),
+  query: z.never().optional()
+})
+
+/**
+ * Workflow published
+ */
+export const zPostUserdataFilePublishResponse = zWorkflowPublishInfo
+
+export const zDeleteUserdataFileData = z.object({
+  body: z.never().optional(),
+  path: z.object({
+    file: z.string()
+  }),
+  query: z.never().optional()
+})
+
+/**
+ * File deleted successfully (No Content).
+ */
+export const zDeleteUserdataFileResponse = z.void()
+
+export const zGetUserdataFileData = z.object({
+  body: z.never().optional(),
+  path: z.object({
+    file: z.string()
+  }),
+  query: z.never().optional()
+})
+
+/**
+ * Successfully retrieved the file.
+ */
+export const zGetUserdataFileResponse = z.string()
+
+export const zPostUserdataFileData = z.object({
+  body: z.string(),
+  path: z.object({
+    file: z.string()
+  }),
+  query: z
+    .object({
+      overwrite: z.enum(['true', 'false']).optional(),
+      full_info: z.enum(['true', 'false']).optional()
+    })
+    .optional()
+})
+
+/**
+ * File uploaded successfully.
+ */
+export const zPostUserdataFileResponse = zUserDataResponseFull
+
+export const zMoveUserdataFileData = z.object({
+  body: z.never().optional(),
+  path: z.object({
+    file: z.string(),
+    dest: z.string()
+  }),
+  query: z
+    .object({
+      overwrite: z.enum(['true', 'false']).optional()
+    })
+    .optional()
+})
+
+/**
+ * File moved successfully.
+ */
+export const zMoveUserdataFileResponse = zUserDataResponseFull
+
+export const zUploadImageData = z.object({
+  body: z.object({
+    image: z.string(),
+    overwrite: z.string().optional(),
+    subfolder: z.string().optional(),
+    type: z.string().optional()
+  }),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * Image uploaded successfully
+ */
+export const zUploadImageResponse = z.object({
+  name: z.string().optional(),
+  subfolder: z.string().optional(),
+  type: z.string().optional()
+})
+
+export const zUploadMaskData = z.object({
+  body: z.object({
+    image: z.string(),
+    original_ref: z.string()
+  }),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * Mask uploaded successfully
+ */
+export const zUploadMaskResponse = z.object({
+  name: z.string().optional(),
+  subfolder: z.string().optional(),
+  type: z.string().optional(),
+  metadata: z
+    .object({
+      is_mask: z.boolean().optional(),
+      original_hash: z.string().optional(),
+      mask_type: z.string().optional(),
+      related_files: z
+        .object({
+          mask: z.string().optional(),
+          paint: z.string().optional(),
+          painted: z.string().optional()
+        })
+        .optional()
+    })
+    .optional()
+})
+
 export const zGetLogsData = z.object({
   body: z.never().optional(),
   path: z.never().optional(),
@@ -1572,7 +2225,7 @@ export const zGetLogsData = z.object({
  */
 export const zGetLogsResponse = zLogsResponse
 
-export const zGetRawLogsData = z.object({
+export const zGetSystemStatsData = z.object({
   body: z.never().optional(),
   path: z.never().optional(),
   query: z.never().optional()
@@ -1581,20 +2234,7 @@ export const zGetRawLogsData = z.object({
 /**
  * Success
  */
-export const zGetRawLogsResponse = zRawLogsResponse
-
-export const zSubscribeToLogsData = z.object({
-  body: zLogsSubscribeRequest,
-  path: z.never().optional(),
-  query: z.never().optional()
-})
-
-/**
- * Success
- */
-export const zSubscribeToLogsResponse = z.object({
-  enabled: z.boolean().optional()
-})
+export const zGetSystemStatsResponse = zSystemStatsResponse
 
 export const zDeleteSessionData = z.object({
   body: z.never().optional(),
@@ -1837,6 +2477,17 @@ export const zSendUserInviteEmailData = z.object({
  */
 export const zSendUserInviteEmailResponse2 = zSendUserInviteEmailResponse
 
+export const zSetReviewStatusData = z.object({
+  body: zSetReviewStatusRequest,
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * Status updated successfully
+ */
+export const zSetReviewStatusResponse2 = zSetReviewStatusResponse
+
 export const zGetDeletionRequestData = z.object({
   body: z.never().optional(),
   path: z.never().optional(),
@@ -2258,7 +2909,8 @@ export const zListHubWorkflowsData = z.object({
       search: z.string().optional(),
       tag: z.string().optional(),
       username: z.string().optional(),
-      detail: z.boolean().optional().default(false)
+      detail: z.boolean().optional().default(false),
+      status: z.array(zHubWorkflowStatus).optional()
     })
     .optional()
 })
@@ -2282,7 +2934,11 @@ export const zPublishHubWorkflowResponse = zHubWorkflowDetail
 export const zListHubWorkflowIndexData = z.object({
   body: z.never().optional(),
   path: z.never().optional(),
-  query: z.never().optional()
+  query: z
+    .object({
+      status: z.array(zHubWorkflowStatus).optional()
+    })
+    .optional()
 })
 
 /**
@@ -2328,3 +2984,153 @@ export const zGetPublishedWorkflowData = z.object({
  * Published workflow details with asset statuses
  */
 export const zGetPublishedWorkflowResponse = zPublishedWorkflowDetail
+
+export const zGetExtensionsData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+export const zGetVhsViewVideoData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.object({
+    filename: z.string(),
+    type: z.string().optional(),
+    subfolder: z.string().optional()
+  })
+})
+
+export const zGetVhsViewAudioData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.object({
+    filename: z.string(),
+    type: z.string().optional(),
+    subfolder: z.string().optional()
+  })
+})
+
+export const zGetVhsQueryVideoData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.object({
+    filename: z.string()
+  })
+})
+
+export const zGetUsersRawData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+export const zGetApiViewVideoAliasData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.object({
+    filename: z.string()
+  })
+})
+
+export const zGetViewCompatAliasData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.object({
+    filename: z.string()
+  })
+})
+
+export const zGetWebsocketData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z
+    .object({
+      clientId: z.string().optional()
+    })
+    .optional()
+})
+
+export const zGetTemplateProxyData = z.object({
+  body: z.never().optional(),
+  path: z.object({
+    path: z.string()
+  }),
+  query: z.never().optional()
+})
+
+export const zGetHealthData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+export const zGetOpenapiSpecData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+export const zGetMonitoringTasksData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+export const zDeleteMonitoringTasksSubpathData = z.object({
+  body: z.never().optional(),
+  path: z.object({
+    path: z.string()
+  }),
+  query: z.never().optional()
+})
+
+export const zGetMonitoringTasksSubpathData = z.object({
+  body: z.never().optional(),
+  path: z.object({
+    path: z.string()
+  }),
+  query: z.never().optional()
+})
+
+export const zPostMonitoringTasksSubpathData = z.object({
+  body: z.never().optional(),
+  path: z.object({
+    path: z.string()
+  }),
+  query: z.never().optional()
+})
+
+export const zGetPprofData = z.object({
+  body: z.never().optional(),
+  path: z.object({
+    path: z.string()
+  }),
+  query: z.never().optional()
+})
+
+export const zGetPprofProfileData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+export const zGetPprofTraceData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+export const zPostPprofSymbolData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+export const zGetStaticExtensionsData = z.object({
+  body: z.never().optional(),
+  path: z.object({
+    path: z.string()
+  }),
+  query: z.never().optional()
+})
diff --git a/packages/registry-types/src/comfyRegistryTypes.ts b/packages/registry-types/src/comfyRegistryTypes.ts
index 452f91816f..de1808deca 100644
--- a/packages/registry-types/src/comfyRegistryTypes.ts
+++ b/packages/registry-types/src/comfyRegistryTypes.ts
@@ -239,6 +239,28 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/admin/generate-token": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Generate a short-lived JWT admin token
+         * @description Generates a short-lived JWT admin token for browser-based admin operations.
+         *     The user must already be authenticated with Firebase and have admin privileges.
+         *     The generated token expires after 1 hour.
+         */
+        post: operations["GenerateAdminToken"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/admin/customers/{customer_id}/cloud-subscription-status": {
         parameters: {
             query?: never;
@@ -259,6 +281,66 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/admin/customers/{customer_id}/balance": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Admin get customer's remaining balance
+         * @description Returns the specified customer's current remaining balance in microamount and its currency.
+         */
+        get: operations["GetAdminCustomerBalance"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/admin/customers/{customer_id}/stripe-data": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post?: never;
+        /**
+         * Delete customer Stripe data
+         * @description Deletes the Stripe customer data associated with the given customer ID.
+         */
+        delete: operations["DeleteAdminCustomerStripeData"];
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/admin/customers/{customer_id}/archive-metronome-data": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Archive customer Metronome data
+         * @description Archives metronome data. See https://docs.metronome.com/api-reference/customers/archive-a-customer
+         */
+        post: operations["PostAdminArchiveMetronomeData"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/customers/usage": {
         parameters: {
             query?: never;
@@ -1294,6 +1376,26 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/admin/nodeversions": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Admin list all node versions with optional filters
+         * @description Admin-only endpoint to list all node versions with support for including deleted versions. Only admins can access this endpoint.
+         */
+        get: operations["adminListAllNodeVersions"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/customers/admin/coupons": {
         parameters: {
             query?: never;
@@ -1898,6 +2000,40 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/proxy/kling/v1/videos/motion-control": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** KlingAI Create Motion Control Task */
+        post: operations["klingCreateMotionControl"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/kling/v1/videos/motion-control/{id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** KlingAI Query Single Motion Control Task */
+        get: operations["klingMotionControlQuerySingleTask"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/proxy/kling/v1/videos/omni-video": {
         parameters: {
             query?: never;
@@ -1932,6 +2068,60 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/proxy/kling/v1/videos/avatar/image2video": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** KlingAI Create Avatar Video */
+        post: operations["klingCreateAvatarVideo"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/kling/v1/videos/avatar/image2video/{id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** KlingAI Query Avatar Task */
+        get: operations["klingAvatarQueryTask"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/kling/v1/general/advanced-presets-elements": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * KlingAI Query Presets Elements
+         * @description Retrieves a list of advanced preset elements from Kling AI.
+         */
+        get: operations["klingGetPresetsElements"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/proxy/kling/v1/images/generations": {
         parameters: {
             query?: never;
@@ -2611,6 +2801,26 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/proxy/recraft/styles": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Create Style
+         * @description Upload a set of images to create a style reference.
+         */
+        post: operations["RecraftCreateStyle"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/proxy/runway/image_to_video": {
         parameters: {
             query?: never;
@@ -3678,6 +3888,38 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/proxy/vidu/extend": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post: operations["ViduExtend"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/vidu/multiframe": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post: operations["ViduMultiframe"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/proxy/vidu/tasks/{id}/creations": {
         parameters: {
             query?: never;
@@ -3742,6 +3984,22 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/proxy/byteplus-seedance2/api/v3/contents/generations/tasks/{task_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["byteplusSeedance2VideoGenerationQuery"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/proxy/wan/api/v1/services/aigc/video-generation/video-synthesis": {
         parameters: {
             query?: never;
@@ -3924,6 +4182,1262 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/proxy/meshy/openapi/v2/text-to-3d": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Create a Text to 3D Preview Task
+         * @description Create a new Text to 3D Preview task. This task costs 20 credits for Meshy-6 models and 5 credits for other models.
+         */
+        post: operations["meshyTextTo3DCreate"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/meshy/openapi/v2/text-to-3d/{task_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Get Text to 3D Task Status
+         * @description Retrieve the status and result of a Text to 3D task.
+         */
+        get: operations["meshyTextTo3DGetTask"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/meshy/openapi/v1/image-to-3d": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Create an Image to 3D Task
+         * @description Create a new Image to 3D task. This task generates a 3D model from an image input.
+         */
+        post: operations["meshyImageTo3DCreate"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/meshy/openapi/v1/image-to-3d/{task_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Get Image to 3D Task Status
+         * @description Retrieve the status and result of an Image to 3D task.
+         */
+        get: operations["meshyImageTo3DGetTask"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/meshy/openapi/v1/multi-image-to-3d": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Create a Multi-Image to 3D Task
+         * @description Create a new Multi-Image to 3D task. This task generates a 3D model from 1 to 4 images of the same object from different angles.
+         *     Mesh generation uses Meshy-5 model, while texture generation supports Meshy-6-preview model.
+         */
+        post: operations["meshyMultiImageTo3DCreate"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/meshy/openapi/v1/multi-image-to-3d/{task_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Get Multi-Image to 3D Task Status
+         * @description Retrieve the status and result of a Multi-Image to 3D task.
+         */
+        get: operations["meshyMultiImageTo3DGetTask"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/meshy/openapi/v1/remesh": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Create a Remesh Task
+         * @description Create a new remesh task to remesh and export an existing 3D model into various formats.
+         */
+        post: operations["meshyRemeshCreate"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/meshy/openapi/v1/remesh/{task_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Get Remesh Task Status
+         * @description Retrieve the status and result of a Remesh task.
+         */
+        get: operations["meshyRemeshGetTask"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/meshy/openapi/v1/rigging": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Create a Rigging Task
+         * @description Create a new rigging task for a given 3D model. Upon successful completion, provides a rigged character in standard formats and optionally basic walking/running animations.
+         */
+        post: operations["meshyRiggingCreate"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/meshy/openapi/v1/rigging/{task_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Get Rigging Task Status
+         * @description Retrieve the status and result of a Rigging task.
+         */
+        get: operations["meshyRiggingGetTask"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/meshy/openapi/v1/retexture": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Create a Retexture Task
+         * @description Create a new Retexture task to generate 3D texture from text or image inputs.
+         */
+        post: operations["meshyRetextureCreate"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/meshy/openapi/v1/retexture/{task_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Get Retexture Task Status
+         * @description Retrieve the status and result of a Retexture task.
+         */
+        get: operations["meshyRetextureGetTask"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/meshy/openapi/v1/animations": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Create an Animation Task
+         * @description Create a new task to apply a specific animation action to a previously rigged character. Includes post-processing options.
+         */
+        post: operations["meshyAnimationCreate"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/meshy/openapi/v1/animations/{task_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Get Animation Task Status
+         * @description Retrieve the status and result of an Animation task.
+         */
+        get: operations["meshyAnimationGetTask"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/xai/v1/images/generations": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Generate images using xAI Grok Imagine
+         * @description Generate one or more images from a text prompt using the Grok Imagine API.
+         */
+        post: operations["xaiImageGenerate"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/xai/v1/images/edits": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Edit images using xAI Grok Imagine
+         * @description Modify an existing image based on a text prompt using the Grok Imagine API.
+         */
+        post: operations["xaiImageEdit"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/xai/v1/videos/generations": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Generate videos using xAI Grok Imagine
+         * @description Generate a video from a text prompt (text-to-video), from an image with optional text (image-to-video),
+         *     or from reference images with text (reference-to-video). The mode is determined by which optional fields
+         *     are provided. Video generation is asynchronous. Returns a request_id to poll for the completed video.
+         *
+         *     Conflict rules: image + reference_images, video + reference_images, and image + video cannot be combined.
+         */
+        post: operations["xaiVideoGenerate"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/xai/v1/videos/edits": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Edit videos using xAI Grok Imagine
+         * @description Edit an existing video based on a text prompt (video-to-video editing).
+         *     Video editing is asynchronous. Returns a request_id to poll for the completed video.
+         *     Input video limit is 8 seconds. Audio will not be modified.
+         */
+        post: operations["xaiVideoEdit"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/xai/v1/videos/extensions": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Extend videos using xAI Grok Imagine
+         * @description Generate a seamless continuation of an existing video. You provide a source video and a text prompt
+         *     describing what should happen next. The API produces a new video that extends naturally from the end
+         *     of the input video.
+         *     Video extension is asynchronous. Returns a request_id to poll for the completed video.
+         */
+        post: operations["xaiVideoExtension"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/xai/v1/videos/{request_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Get xAI video generation result
+         * @description Retrieve the result of a video generation or editing request.
+         *     Poll this endpoint until the response includes a video object with the completed video URL.
+         */
+        get: operations["xaiVideoGetResult"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/quiver/v1/svgs/generations": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Generate SVG from text using Quiver AI
+         * @description Generate one or more SVGs from a text prompt using the Quiver AI Arrow model.
+         */
+        post: operations["quiverTextToSVG"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/quiver/v1/svgs/vectorizations": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Convert image to SVG using Quiver AI
+         * @description Vectorize an image into one or more SVGs using the Quiver AI Arrow model.
+         */
+        post: operations["quiverImageToSVG"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/reve/v1/image/create": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Generate an image using Reve
+         * @description Forwards image creation requests to the Reve API and returns the generated image.
+         */
+        post: operations["reveImageCreate"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/reve/v1/image/edit": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Edit an image using Reve
+         * @description Forwards image editing requests to the Reve API with an edit instruction and reference image.
+         */
+        post: operations["reveImageEdit"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/reve/v1/image/remix": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Remix images using Reve
+         * @description Forwards image remix requests to the Reve API with reference images and a text prompt.
+         */
+        post: operations["reveImageRemix"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/bria/v2/image/edit": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Edit an image using Bria FIBO
+         * @description Edit an existing image using Bria's FIBO Edit API. You can provide:
+         *     1. A source image and a text-based instruction (prompt)
+         *     2. A source image and a structured_instruction
+         *     3. A source image, a mask, and a text-based instruction
+         *     4. A source image, a mask, and a structured_instruction
+         *
+         *     This endpoint always uses async mode (sync: false) and returns a status_url to poll for results.
+         */
+        post: operations["briaFiboEdit"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/bria/v2/structured_instruction/generate": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Generate a structured instruction from text
+         * @description Translates a user's text-based edit instruction and source image/mask into a detailed,
+         *     machine-readable structured edit instruction in JSON format.
+         *
+         *     This endpoint uses Gemini 2.5 Flash VLM to understand the edit context and returns only
+         *     the JSON string without generating an image.
+         *
+         *     The resulting structured_instruction can be used as input for the /proxy/bria/v2/image/edit endpoint.
+         *
+         *     This endpoint always uses async mode (sync: false) and returns a status_url to poll for results.
+         */
+        post: operations["briaStructuredInstructionGenerate"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/bria/v2/status/{request_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Get Bria request status
+         * @description Retrieves the current status of an asynchronous Bria request.
+         *
+         *     Poll this endpoint until the status is COMPLETED or ERROR.
+         *
+         *     Status values:
+         *     - `IN_PROGRESS` – Request is being processed. Continue polling.
+         *     - `COMPLETED` – Success. Response includes `result.image_url` for images, `result.video_url` for videos, or `result.structured_prompt` for structured prompt generation. Additional optional fields (seed, prompt, refined_prompt) may be included.
+         *     - `ERROR` – Processing failed. Check error object for details.
+         *     - `UNKNOWN` – Unexpected internal error.
+         */
+        get: operations["briaGetStatus"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/bria/v2/video/edit/remove_background": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Remove background from a video using Bria
+         * @description Initiates an asynchronous background removal job for a video using Bria's API.
+         *
+         *     Returns HTTP 202 with request_id and status_url. Poll the status endpoint for results.
+         *
+         *     Supported input containers: .mp4, .mov, .webm, .avi, .gif
+         *     Supported input codecs: H.264, H.265 (HEVC), VP9, AV1, PhotoJPEG
+         *     Max input duration: 60 seconds. Input resolution up to 16000x16000.
+         */
+        post: operations["briaVideoRemoveBackground"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/bria/v2/image/edit/remove_background": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Remove background from an image using Bria
+         * @description Remove the background of an image using Bria's RMBG 2.0 model.
+         *
+         *     Returns HTTP 202 with request_id and status_url when async (default).
+         *     Can return 200 with result directly when sync is true.
+         *
+         *     Accepted image formats: JPEG, JPG, PNG, WEBP.
+         */
+        post: operations["briaImageRemoveBackground"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/wavespeed/api/v3/wavespeed-ai/flashvsr": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Submit a FlashVSR video upscaling task
+         * @description Submit a video for upscaling using WavespeedAI's FlashVSR model.
+         *     FlashVSR is a fast, high-quality video upscaler that boosts resolution and restores clarity
+         *     for low-resolution or blurry footage.
+         *
+         *     Supported target resolutions: 720p, 1080p, 2k, 4k
+         *
+         *     Max clip length: up to 10 minutes
+         *     Processing speed: approximately 3-20 seconds of wall time to process 1 second of video
+         *
+         *     Returns a task ID that can be used to poll for the result.
+         */
+        post: operations["wavespeedFlashVSRSubmit"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/wavespeed/api/v3/predictions/{prediction_id}/result": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Get FlashVSR task result
+         * @description Retrieve the status and result of a FlashVSR video upscaling task.
+         *
+         *     Poll this endpoint until status is "completed" or "failed".
+         *
+         *     Status values:
+         *     - `created` - Task has been created
+         *     - `processing` - Task is being processed
+         *     - `completed` - Task completed successfully, outputs array contains result URLs
+         *     - `failed` - Task failed, check error field for details
+         */
+        get: operations["wavespeedFlashVSRGetResult"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/wavespeed/api/v3/wavespeed-ai/seedvr2/image": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Submit a SeedVR2 image upscaling task
+         * @description Upscale an image using WavespeedAI's SeedVR2 Image Upscaler.
+         *     SeedVR2 boosts image resolution and quality, upscaling photos to 2K, 4K, or 8K
+         *     for sharp, detailed results.
+         */
+        post: operations["wavespeedSeedVR2ImageSubmit"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/wavespeed/api/v3/wavespeed-ai/ultimate-image-upscaler": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Submit an Ultimate Image Upscaler task
+         * @description Upscale an image using WavespeedAI's Ultimate Image Upscaler.
+         *     The most advanced AI enhancer that reimagines fine detail while upscaling images to 2K, 4K, or 8K.
+         */
+        post: operations["wavespeedUltimateImageUpscalerSubmit"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/tencent/hunyuan/3d-pro": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Submit Tencent Hunyuan 3D Pro Generation Task
+         * @description Submit a task to generate 3D content using Tencent HunYuan Large Model.
+         *     Supports text-to-3D and image-to-3D generation.
+         *
+         *     This API provides 3 concurrent tasks by default. A new task can be processed
+         *     only after the previous one is completed.
+         *
+         *     The returned JobId can be used with the query endpoint to check task status.
+         */
+        post: operations["tencentHunyuan3DProSubmit"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/tencent/hunyuan/3d-pro/query": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Query Tencent Hunyuan 3D Pro Task Status
+         * @description Query the status and result of a previously submitted 3D generation task.
+         *
+         *     Poll this endpoint until the task status indicates completion.
+         */
+        post: operations["tencentHunyuan3DProQuery"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/tencent/hunyuan/3d-uv": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Submit Tencent Hunyuan 3D UV Unfolding Task
+         * @description Submit a UV unwrapping task for a 3D model using Tencent Hunyuan.
+         *     After inputting the model, UV unwrapping can be performed based on the
+         *     model texture to output the corresponding UV map.
+         *
+         *     The returned JobId can be used with the query endpoint to check task status.
+         */
+        post: operations["tencentHunyuan3DUVSubmit"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/tencent/hunyuan/3d-uv/query": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Query Tencent Hunyuan 3D UV Unfolding Task Status
+         * @description Query the status and result of a previously submitted UV unwrapping task.
+         *
+         *     Poll this endpoint until the task status indicates completion.
+         */
+        post: operations["tencentHunyuan3DUVQuery"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/tencent/hunyuan/3d-texture-edit": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Submit Tencent Hunyuan 3D Texture Edit Task
+         * @description Submit a 3D model texture redrawing task using Tencent Hunyuan.
+         *     After inputting the 3D model, perform 3D model texture redrawing based on semantics or images.
+         *     Supported format: FBX. 3D model limit: less than 100000 faces.
+         *     Either Image or Prompt is required; they cannot coexist. EnablePBR only supports enabling when using Prompt.
+         *
+         *     The returned JobId can be used with the query endpoint to check task status.
+         */
+        post: operations["tencentHunyuan3DTextureEditSubmit"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/tencent/hunyuan/3d-texture-edit/query": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Query Tencent Hunyuan 3D Texture Edit Task Status
+         * @description Query the status and result of a previously submitted 3D texture edit task.
+         *
+         *     Poll this endpoint until the task status indicates completion.
+         */
+        post: operations["tencentHunyuan3DTextureEditQuery"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/tencent/hunyuan/3d-part": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Submit Tencent Hunyuan 3D Part (Component Splitting) Task
+         * @description Submit a component identification and generation task using Tencent Hunyuan.
+         *     Automatically performs component splitting based on the model structure after inputting a 3D model file.
+         *     Recommends inputting 3D models generated by AIGC. File size not greater than 100MB, face count not greater than 30,000. FBX format only.
+         *
+         *     The returned JobId can be used with the query endpoint to check task status.
+         */
+        post: operations["tencentHunyuan3DPartSubmit"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/tencent/hunyuan/3d-part/query": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Query Tencent Hunyuan 3D Part Task Status
+         * @description Query the status and result of a previously submitted 3D part (component splitting) task.
+         *
+         *     Poll this endpoint until the task status indicates completion.
+         */
+        post: operations["tencentHunyuan3DPartQuery"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/tencent/hunyuan/3d-smart-topology": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Submit Tencent Hunyuan 3D Smart Topology Task
+         * @description Submit a 3D smart topology (retopology/polygon reduction) task using Tencent Hunyuan.
+         *     Takes an input 3D model and performs intelligent topology optimization.
+         *     Supported input formats: GLB, OBJ. File size max 200MB.
+         *
+         *     The returned JobId can be used with the query endpoint to check task status.
+         */
+        post: operations["tencentHunyuan3DSmartTopologySubmit"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/tencent/hunyuan/3d-smart-topology/query": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Query Tencent Hunyuan 3D Smart Topology Task Status
+         * @description Query the status and result of a previously submitted 3D smart topology task.
+         *
+         *     Poll this endpoint until the task status indicates completion.
+         */
+        post: operations["tencentHunyuan3DSmartTopologyQuery"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/hitpaw/api/photo-enhancer": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Submit HitPaw Photo Enhancement Task
+         * @description Submit an image processing task using HitPaw Photo Enhancement API.
+         *     Supports multiple enhancement models for image super-resolution processing.
+         *
+         *     The returned job_id can be used with the task-status endpoint to check processing results.
+         *
+         *     **Available Models:**
+         *     - Enhancement & Denoise Models (face_2x/4x, face_v2_2x/4x, general_2x/4x, high_fidelity_2x/4x, sharpen_denoise, detail_denoise):
+         *       - Max input: 67 MP, Max output: 600 MP
+         *       - Supported formats: bmp, jpeg, jpg, png, jfif, tga, tiff, webp, heif
+         *     - Generative Models (generative_portrait, generative):
+         *       - No input limit, Max output: 8K (33 MP)
+         *       - Supported formats: bmp, jpeg, jpg, png, jfif, tga, tiff, webp, heif
+         */
+        post: operations["hitpawPhotoEnhancer"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/hitpaw/api/task-status": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Query HitPaw Task Status
+         * @description Query the status and result of a previously submitted photo or video enhancement task.
+         *     Poll this endpoint until the task status indicates completion (COMPLETED).
+         *
+         *     **Status Codes:**
+         *     - CONVERTING: Job is currently being processed
+         *     - COMPLETED: Job has completed successfully, result is available
+         *     - ERROR: Job failed due to an error
+         */
+        post: operations["hitpawTaskStatus"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/hitpaw/api/video-enhancer": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Submit HitPaw Video Enhancement Task
+         * @description Submit a video processing task using HitPaw Video Enhancement API.
+         *     Uses AI technology to upscale low-resolution videos to high resolution,
+         *     eliminate artifacts and noise, and improve clarity and details.
+         *
+         *     The returned job_id can be used with the task-status endpoint to check processing results.
+         *
+         *     **Video Constraints:**
+         *     - Duration: 0.5 seconds to 1 hour
+         *     - Maximum output resolution: 36 MP (Total Pixels)
+         *     - Supported input formats: dv, mlv, m2ts, m2t, m2v, nut, ser, 3g2, 3gp, asf, divx, f4v, h261, h263, m4v, mkv, mov, mp4, mpeg, mpeg4, mpg, mxf, ogv, rm, rmvb, webm, wmv, dmsm, dvdmedia, dvr-ms, mts, trp, ts, vob, vro, gif, xvid
+         *     - Supported output formats: mp4, mov, mkv, m4v, avi, gif
+         */
+        post: operations["hitpawVideoEnhancer"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/elevenlabs/v1/text-to-speech/{voice_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * ElevenLabs Text to Speech
+         * @description Converts text into speech using a specified voice and returns audio.
+         *
+         *     The output format can be specified via the output_format query parameter.
+         *     Supported formats include MP3, PCM, μ-law, and Opus with various sample rates and bitrates.
+         */
+        post: operations["ElevenLabsTextToSpeech"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/elevenlabs/v1/speech-to-text": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Create transcript (Speech-to-Text)
+         * @description Transcribe an audio or video file. If webhook is set to true, the request will be processed
+         *     asynchronously and results sent to configured webhooks. When use_multi_channel is true and
+         *     the provided audio has multiple channels, a 'transcripts' object with separate transcripts
+         *     for each channel is returned. Otherwise, returns a single transcript. The optional
+         *     webhook_metadata parameter allows you to attach custom data that will be included in
+         *     webhook responses for request correlation and tracking.
+         */
+        post: operations["ElevenLabsSpeechToText"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/elevenlabs/v1/speech-to-speech/{voice_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Voice Changer (Speech-to-Speech)
+         * @description Transform audio from one voice to another. Maintain full control over emotion, timing and delivery.
+         */
+        post: operations["ElevenLabsSpeechToSpeech"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/elevenlabs/v1/audio-isolation": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Audio Isolation
+         * @description Removes background noise from audio. Isolates vocals/speech from background sounds.
+         */
+        post: operations["ElevenLabsAudioIsolation"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/elevenlabs/v1/voices/add": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Create Voice Clone
+         * @description Create an instant voice clone and add it to your Voices.
+         */
+        post: operations["ElevenLabsCreateVoice"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/elevenlabs/v1/shared-voices": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * List Shared Voices
+         * @description Retrieves a list of shared voices from the ElevenLabs voice library.
+         */
+        get: operations["ElevenLabsGetSharedVoices"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/elevenlabs/v2/voices": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * List Voices
+         * @description Proxies ElevenLabs `GET /v2/voices` (the paginated voice search endpoint)
+         *     with the `category` query parameter pinned to `premade`, so only premade
+         *     voices from the ElevenLabs voice library are ever returned.
+         */
+        get: operations["ElevenLabsGetVoices"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/elevenlabs/v1/sound-generation": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Create Sound Effect
+         * @description Turn text into sound effects for your videos, voice-overs or video games
+         *     using the most advanced sound effects models in the world.
+         */
+        post: operations["ElevenLabsSoundGeneration"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/elevenlabs/v1/text-to-dialogue": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Create dialogue (Multi-voice TTS)
+         * @description Converts a list of text and voice ID pairs into speech (dialogue) and returns audio.
+         *     Useful for generating conversations between multiple characters.
+         */
+        post: operations["ElevenLabsTextToDialogue"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/features": {
         parameters: {
             query?: never;
@@ -3944,10 +5458,646 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/proxy/freepik/v1/ai/image-upscaler": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Upscale an image with Magnific
+         * @description This asynchronous endpoint enables image upscaling using advanced AI algorithms.
+         *     Upon submission, it returns a unique task_id which can be used to track the progress.
+         *     For real-time production use, include the optional webhook_url parameter to receive
+         *     an automated notification once the task has been completed.
+         */
+        post: operations["freepikMagnificUpscalerCreative"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/freepik/v1/ai/image-upscaler/{task_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Get the status of the upscaling task
+         * @description Get the status of the upscaling task
+         */
+        get: operations["freepikMagnificUpscalerCreativeGetStatus"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/freepik/v1/ai/image-upscaler-precision-v2": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Upscale an image with Precision V2
+         * @description Upscales an image while adding new visual elements or details (V2).
+         *     This endpoint may modify the original image content based on the prompt and inferred context.
+         *     Upon submission, it returns a unique task_id which can be used to track the progress.
+         */
+        post: operations["freepikMagnificUpscalerPrecisionV2"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/freepik/v1/ai/image-upscaler-precision-v2/{task_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Get the status of the Precision V2 upscaling task
+         * @description Returns the current status and output URL of a specific precision upscaler V2 task.
+         */
+        get: operations["freepikMagnificUpscalerPrecisionV2GetStatus"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/freepik/v1/ai/image-relight": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Relight an image
+         * @description Relight an image using AI. This endpoint accepts a variety of parameters to customize the generated images.
+         */
+        post: operations["freepikMagnificRelight"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/freepik/v1/ai/image-relight/{task_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Get the status of the relight task
+         * @description Get the status of the relight task
+         */
+        get: operations["freepikMagnificRelightGetStatus"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/freepik/v1/ai/skin-enhancer/creative": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Skin enhancer using AI (Creative)
+         * @description Enhance skin in images using AI with the Creative mode. This mode provides more artistic and stylized enhancements.
+         */
+        post: operations["freepikSkinEnhancerCreative"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/freepik/v1/ai/skin-enhancer/flexible": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Skin enhancer using AI (Flexible)
+         * @description Enhance skin in images using AI with the Flexible mode. This mode allows you to choose the optimization target for the enhancement.
+         */
+        post: operations["freepikSkinEnhancerFlexible"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/freepik/v1/ai/skin-enhancer/faithful": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Skin enhancer using AI (Faithful)
+         * @description Enhance skin in images using AI with the Faithful mode. This mode preserves the original appearance while improving skin quality.
+         */
+        post: operations["freepikSkinEnhancerFaithful"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/freepik/v1/ai/skin-enhancer/{task_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Get the status of one skin enhancer task
+         * @description Get the status of a skin enhancer task (works for both Creative and Faithful modes)
+         */
+        get: operations["freepikSkinEnhancerGetStatus"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/freepik/v1/ai/image-style-transfer": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Style transfer an image
+         * @description Style transfer an image using AI.
+         */
+        post: operations["freepikMagnificStyleTransfer"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/freepik/v1/ai/image-style-transfer/{task_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Get the status of the style transfer task
+         * @description Get the status of the style transfer task
+         */
+        get: operations["freepikMagnificStyleTransferGetStatus"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/sonilo/v2m/generate": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Generate music from video
+         * @description Generate music from a video using Sonilo video-to-music AI.
+         *     Accepts either a video file upload or a video URL, with an optional prompt.
+         *     Returns a streaming NDJSON response with duration, titles, audio chunks, and completion events.
+         *     Max video duration: 6 minutes. Max upload size: 1024MB.
+         */
+        post: operations["soniloVideoToMusicGenerate"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/sonilo/t2m/generate": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Generate music from text prompt
+         * @description Generate music from a text prompt using Sonilo text-to-music AI.
+         *     Requires a prompt describing the desired music. Duration is optional and will be inferred if not provided.
+         *     Returns a streaming NDJSON response with duration, titles, audio chunks, and completion events.
+         */
+        post: operations["soniloTextToMusicGenerate"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
 }
 export type webhooks = Record<string, never>;
 export interface components {
     schemas: {
+        FreepikMagnificUpscalerCreativeRequest: {
+            /** @description Base64 image or URL to upscale. The resulted image can't exceed maximum allowed size of 25.3 million pixels. */
+            image: string;
+            /**
+             * Format: uri
+             * @description Optional callback URL that will receive asynchronous notifications whenever the task changes status.
+             * @example https://www.example.com/webhook
+             */
+            webhook_url?: string;
+            /**
+             * @description Configure scale factor of the image. For higher scales, the image will take longer to process.
+             * @default 2x
+             * @enum {string}
+             */
+            scale_factor: "2x" | "4x" | "8x" | "16x";
+            /**
+             * @description Styles to optimize the upscale process.
+             * @default standard
+             * @enum {string}
+             */
+            optimized_for: "standard" | "soft_portraits" | "hard_portraits" | "art_n_illustration" | "videogame_assets" | "nature_n_landscapes" | "films_n_photography" | "3d_renders" | "science_fiction_n_horror";
+            /** @description Prompt to guide the upscale process. Reusing the same prompt for AI-generated images will improve the results. */
+            prompt?: string;
+            /**
+             * @description Increase or decrease AI's creativity. Valid values range [-10, 10].
+             * @default 0
+             */
+            creativity: number;
+            /**
+             * @description Increase or decrease the level of definition and detail. Valid values range [-10, 10].
+             * @default 0
+             */
+            hdr: number;
+            /**
+             * @description Adjust the level of resemblance to the original image. Valid values range [-10, 10].
+             * @default 0
+             */
+            resemblance: number;
+            /**
+             * @description Control the strength of the prompt and intricacy per square pixel. Valid values range [-10, 10].
+             * @default 0
+             */
+            fractality: number;
+            /**
+             * @description Magnific model engines.
+             * @default automatic
+             * @enum {string}
+             */
+            engine: "automatic" | "magnific_illusio" | "magnific_sharpy" | "magnific_sparkle";
+        };
+        FreepikTaskResponse: {
+            data: components["schemas"]["FreepikTaskData"];
+        };
+        FreepikTaskData: {
+            /**
+             * Format: uuid
+             * @example 046b6c7f-0b8a-43b9-b35d-6489e6daee91
+             */
+            task_id?: string;
+            /** @enum {string} */
+            status?: "CREATED" | "IN_PROGRESS" | "COMPLETED" | "FAILED";
+            /** @description URLs to the generated images. */
+            generated?: string[];
+        };
+        FreepikErrorResponse: {
+            error?: string;
+            message?: string;
+        };
+        FreepikSkinEnhancerFlexibleRequest: {
+            /**
+             * @description Input image. Supports Base64 encoding or HTTPS URL (must be publicly accessible).
+             * @example https://example.com/portrait.jpg
+             */
+            image: string;
+            /**
+             * @description Sharpening intensity
+             * @default 0
+             */
+            sharpen: number;
+            /**
+             * @description Smart grain intensity
+             * @default 2
+             */
+            smart_grain: number;
+            /**
+             * @description Optimization target for flexible skin enhancer
+             * @default enhance_skin
+             * @enum {string}
+             */
+            optimized_for: "enhance_skin" | "improve_lighting" | "enhance_everything" | "transform_to_real" | "no_make_up";
+            /**
+             * Format: uri
+             * @description Optional callback URL for async notifications.
+             * @example https://www.example.com/webhook
+             */
+            webhook_url?: string;
+        };
+        FreepikSkinEnhancerFaithfulRequest: {
+            /**
+             * @description Input image. Supports Base64 encoding or HTTPS URL (must be publicly accessible).
+             * @example https://example.com/portrait.jpg
+             */
+            image: string;
+            /**
+             * @description Sharpening intensity
+             * @default 0
+             */
+            sharpen: number;
+            /**
+             * @description Smart grain intensity
+             * @default 2
+             */
+            smart_grain: number;
+            /**
+             * @description Skin detail enhancement level
+             * @default 80
+             */
+            skin_detail: number;
+            /**
+             * Format: uri
+             * @description Optional callback URL for async notifications.
+             * @example https://www.example.com/webhook
+             */
+            webhook_url?: string;
+        };
+        FreepikSkinEnhancerCreativeRequest: {
+            /**
+             * @description Input image. Supports Base64 encoding or HTTPS URL (must be publicly accessible).
+             * @example https://example.com/portrait.jpg
+             */
+            image: string;
+            /**
+             * @description Sharpening intensity
+             * @default 0
+             */
+            sharpen: number;
+            /**
+             * @description Smart grain intensity
+             * @default 2
+             */
+            smart_grain: number;
+            /**
+             * Format: uri
+             * @description Optional callback URL for async notifications.
+             * @example https://www.example.com/webhook
+             */
+            webhook_url?: string;
+        };
+        FreepikMagnificStyleTransferRequest: {
+            /** @description Base64 or URL of the image to do the style transfer */
+            image: string;
+            /** @description Base64 or URL of the reference image for style transfer */
+            reference_image: string;
+            /**
+             * Format: uri
+             * @description Optional callback URL for async notifications.
+             * @example https://www.example.com/webhook
+             */
+            webhook_url?: string;
+            /** @description Prompt for the AI model */
+            prompt?: string;
+            /**
+             * @description Percentage of style strength
+             * @default 100
+             */
+            style_strength: number;
+            /**
+             * @description Allows to maintain the structure of the original image
+             * @default 50
+             */
+            structure_strength: number;
+            /**
+             * @description Indicates whether the image should be processed as a portrait.
+             * @default false
+             */
+            is_portrait: boolean;
+            /**
+             * @description Visual style applied to portrait images. Only used if is_portrait is true.
+             * @default standard
+             * @enum {string}
+             */
+            portrait_style: "standard" | "pop" | "super_pop";
+            /**
+             * @description Facial beautification on portrait images. Only used if is_portrait is true.
+             * @enum {string}
+             */
+            portrait_beautifier?: "beautify_face" | "beautify_face_max";
+            /**
+             * @description Flavor of the transferring style
+             * @default faithful
+             * @enum {string}
+             */
+            flavor: "faithful" | "gen_z" | "psychedelia" | "detaily" | "clear" | "donotstyle" | "donotstyle_sharp";
+            /**
+             * @description Engine preset for style transfer
+             * @default balanced
+             * @enum {string}
+             */
+            engine: "balanced" | "definio" | "illusio" | "3d_cartoon" | "colorful_anime" | "caricature" | "real" | "super_real" | "softy";
+            /**
+             * @description When enabled, using the same settings will consistently produce the same image.
+             * @default false
+             */
+            fixed_generation: boolean;
+        };
+        FreepikMagnificRelightRequest: {
+            /** @description Base64 or URL of the image to do the relight */
+            image: string;
+            /**
+             * Format: uri
+             * @description Optional callback URL that will receive asynchronous notifications whenever the task changes status.
+             * @example https://www.example.com/webhook
+             */
+            webhook_url?: string;
+            /**
+             * @description You can guide the generation process and influence the light transfer with a descriptive prompt.
+             *     IMPORTANT: You can emphasize specific aspects of the light in your prompt by using a number in parentheses, ranging from 1 to 1.4, like "(dark scene:1.3)".
+             */
+            prompt?: string;
+            /** @description Base64 or URL of the reference image for light transfer. Incompatible with 'transfer_light_from_lightmap' */
+            transfer_light_from_reference_image?: string;
+            /** @description Base64 or URL of the lightmap for light transfer. Incompatible with 'transfer_light_from_reference_image' */
+            transfer_light_from_lightmap?: string;
+            /**
+             * @description Level of light transfer intensity. 0% keeps closest to original, 100% is maximum transfer.
+             * @default 100
+             */
+            light_transfer_strength: number;
+            /**
+             * @description When enabled, makes the final image interpolate from the original using the light transfer strength slider.
+             * @default false
+             */
+            interpolate_from_original: boolean;
+            /**
+             * @description When enabled, changes the background based on prompt and/or reference image. Useful for product placement and portraits.
+             * @default true
+             */
+            change_background: boolean;
+            /**
+             * @description Style preset for the relight operation.
+             * @default standard
+             * @enum {string}
+             */
+            style: "standard" | "darker_but_realistic" | "clean" | "smooth" | "brighter" | "contrasted_n_hdr" | "just_composition";
+            /**
+             * @description Maintains texture and small details of the original image. Good for product photography, texts, etc.
+             * @default true
+             */
+            preserve_details: boolean;
+            advanced_settings?: {
+                /**
+                 * @description Adjust the level of white color in the image.
+                 * @default 50
+                 */
+                whites: number;
+                /**
+                 * @description Adjust the level of black color in the image.
+                 * @default 50
+                 */
+                blacks: number;
+                /**
+                 * @description Adjust the level of brightness in the image.
+                 * @default 50
+                 */
+                brightness: number;
+                /**
+                 * @description Adjust the level of contrast in the image.
+                 * @default 50
+                 */
+                contrast: number;
+                /**
+                 * @description Adjust the level of saturation in the image.
+                 * @default 50
+                 */
+                saturation: number;
+                /**
+                 * @description Engine preset for relighting:
+                 *     - balanced: Well-rounded, general-purpose option
+                 *     - cool: Brighter with cooler tones
+                 *     - real: Aims to enhance photographic quality (Experimental)
+                 *     - illusio: Optimized for illustrations and drawings
+                 *     - fairy: Suited for fantasy-themed images
+                 *     - colorful_anime: Ideal for anime, cartoons, and vibrant colors
+                 *     - hard_transform: Significantly alters the original image
+                 *     - softy: Slightly softer effect, suitable for graphic designs
+                 * @default automatic
+                 * @enum {string}
+                 */
+                engine: "automatic" | "balanced" | "cool" | "real" | "illusio" | "fairy" | "colorful_anime" | "hard_transform" | "softy";
+                /**
+                 * @description Adjusts the intensity of light transfer.
+                 * @default automatic
+                 * @enum {string}
+                 */
+                transfer_light_a: "automatic" | "low" | "medium" | "normal" | "high" | "high_on_faces";
+                /**
+                 * @description Also modifies light transfer intensity. Can be combined with transfer_light_a for varied effects.
+                 * @default automatic
+                 * @enum {string}
+                 */
+                transfer_light_b: "automatic" | "composition" | "straight" | "smooth_in" | "smooth_out" | "smooth_both" | "reverse_both" | "soft_in" | "soft_out" | "soft_mid" | "strong_mid" | "style_shift" | "strong_shift";
+                /**
+                 * @description When enabled, using the same settings will consistently produce the same image.
+                 * @default false
+                 */
+                fixed_generation: boolean;
+            };
+        };
+        FreepikMagnificUpscalerPrecisionV2Request: {
+            /**
+             * @description Source image to upscale. Accepts either:
+             *     - A publicly accessible HTTPS URL pointing to the image
+             *     - A base64-encoded image string
+             */
+            image: string;
+            /**
+             * Format: uri
+             * @description Optional callback URL that will receive asynchronous notifications when the upscaling task completes.
+             */
+            webhook_url?: string;
+            /**
+             * @description Image sharpness intensity control. Higher values increase edge definition and clarity.
+             * @default 7
+             */
+            sharpen: number;
+            /**
+             * @description Intelligent grain/texture enhancement. Higher values add more fine-grained texture.
+             * @default 7
+             */
+            smart_grain: number;
+            /**
+             * @description Ultra detail enhancement level. Higher values create more intricate details.
+             * @default 30
+             */
+            ultra_detail: number;
+            /**
+             * @description Image processing flavor:
+             *     - sublime: Optimized for artistic and illustrated images
+             *     - photo: Optimized for photographic images
+             *     - photo_denoiser: Specialized for photos with noise reduction
+             * @enum {string}
+             */
+            flavor?: "sublime" | "photo" | "photo_denoiser";
+            /** @description Image scaling factor. Determines how much larger the output will be compared to input. */
+            scale_factor?: number;
+        };
         /**
          * @description The subscription tier level
          * @enum {string}
@@ -4535,6 +6685,8 @@ export interface components {
             metronome_id?: string;
             /** @description Whether the user has funds */
             has_fund?: boolean;
+            /** @description The cached subscription tier level */
+            subscription_tier?: components["schemas"]["SubscriptionTier"] | null;
         };
         CustomerAdmin: {
             /** @description The firebase UID of the user */
@@ -4575,6 +6727,8 @@ export interface components {
              * @description The date when the subscription is set to end (ISO 8601 format)
              */
             cloud_subscription_end_date?: string | null;
+            /** @description The subscription tier level (e.g. FREE, STANDARD, CREATOR, PRO) */
+            subscription_tier?: components["schemas"]["SubscriptionTier"] | null;
         };
         AuditLog: {
             /** @description the type of the event */
@@ -4804,13 +6958,13 @@ export interface components {
          * @default kling-v1
          * @enum {string}
          */
-        KlingTextToVideoModelName: "kling-v1" | "kling-v1-5" | "kling-v1-6" | "kling-v2-master" | "kling-v2-1-master" | "kling-v2-5-turbo" | "kling-v2-6";
+        KlingTextToVideoModelName: "kling-v1" | "kling-v1-5" | "kling-v1-6" | "kling-v2-master" | "kling-v2-1-master" | "kling-v2-5-turbo" | "kling-v2-6" | "kling-v3";
         /**
          * @description Model Name
          * @default kling-v2-master
          * @enum {string}
          */
-        KlingVideoGenModelName: "kling-v1" | "kling-v1-5" | "kling-v1-6" | "kling-v2-master" | "kling-v2-1" | "kling-v2-1-master" | "kling-v2-5-turbo" | "kling-v2-6";
+        KlingVideoGenModelName: "kling-v1" | "kling-v1-5" | "kling-v1-6" | "kling-v2-master" | "kling-v2-1" | "kling-v2-1-master" | "kling-v2-5-turbo" | "kling-v2-6" | "kling-v3";
         /**
          * @description Video generation mode. std: Standard Mode, which is cost-effective. pro: Professional Mode, generates videos with longer duration but higher quality output.
          * @default std
@@ -4828,7 +6982,7 @@ export interface components {
          * @default 5
          * @enum {string}
          */
-        KlingVideoGenDuration: "5" | "10";
+        KlingVideoGenDuration: "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15";
         /**
          * Format: float
          * @description Flexibility in video generation. The higher the value, the lower the model's degree of flexibility, and the stronger the relevance to the user's prompt.
@@ -4866,7 +7020,12 @@ export interface components {
              * @description URL for generated video
              */
             url?: string;
-            /** @description Total video duration */
+            /**
+             * Format: uri
+             * @description URL for generated video with watermark, hotlink protection format
+             */
+            watermark_url?: string;
+            /** @description Total video duration in seconds */
             duration?: string;
         };
         /**
@@ -4928,7 +7087,7 @@ export interface components {
          * @default kling-v1
          * @enum {string}
          */
-        KlingImageGenModelName: "kling-v1" | "kling-v1-5" | "kling-v2";
+        KlingImageGenModelName: "kling-v1" | "kling-v1-5" | "kling-v2" | "kling-v3";
         KlingImageResult: {
             /** @description Image Number (0-9) */
             index?: number;
@@ -4946,9 +7105,28 @@ export interface components {
         KlingVirtualTryOnModelName: "kolors-virtual-try-on-v1" | "kolors-virtual-try-on-v1-5";
         KlingText2VideoRequest: {
             model_name?: components["schemas"]["KlingTextToVideoModelName"];
-            /** @description Positive text prompt */
+            /**
+             * @description Whether to generate multi-shot video. When true, the prompt parameter is invalid. When false, the shot_type and multi_prompt parameters are invalid.
+             * @default false
+             */
+            multi_shot: boolean;
+            /**
+             * @description Storyboard method. Required when the multi_shot parameter is set to true.
+             * @enum {string}
+             */
+            shot_type?: "customize";
+            /** @description Positive text prompt. Use <<<voice_1>>> to specify a voice matching the voice_list parameter order. A task can reference up to 2 tones. When specifying a tone, the sound parameter value must be on. */
             prompt?: string;
-            /** @description Negative text prompt */
+            /** @description Information about each storyboard, such as prompts and duration. Supports up to 6 storyboards, with a minimum of 1. Required when multi_shot is true and shot_type is customize. */
+            multi_prompt?: {
+                /** @description Shot sequence number */
+                index?: number;
+                /** @description Prompt word for this storyboard. Maximum length 512 characters. */
+                prompt?: string;
+                /** @description Duration of this storyboard in seconds. Must not exceed total task duration and must not be less than 1. Sum of all storyboard durations equals total task duration. */
+                duration?: string;
+            }[];
+            /** @description Negative text prompt. It is recommended to supplement negative prompt information through negative sentences directly within positive prompts. */
             negative_prompt?: string;
             cfg_scale?: components["schemas"]["KlingVideoGenCfgScale"];
             mode?: components["schemas"]["KlingVideoGenMode"];
@@ -4961,6 +7139,11 @@ export interface components {
              * @enum {string}
              */
             sound: "on" | "off";
+            /** @description Whether to generate watermarked results simultaneously. Custom watermark is not supported at this time. */
+            watermark_info?: {
+                /** @description true means generate watermark, false means do not generate. */
+                enabled?: boolean;
+            };
             /**
              * Format: uri
              * @description The callback notification address
@@ -4980,12 +7163,19 @@ export interface components {
                 /** @description Task ID */
                 task_id?: string;
                 task_status?: components["schemas"]["KlingTaskStatus"];
+                /** @description Task status information, displaying the failure reason when the task fails */
+                task_status_msg?: string;
                 task_info?: {
                     external_task_id?: string;
                 };
-                /** @description Task creation time */
+                watermark_info?: {
+                    enabled?: boolean;
+                };
+                /** @description The deduction units of task */
+                final_unit_deduction?: string;
+                /** @description Task creation time, Unix timestamp in milliseconds */
                 created_at?: number;
-                /** @description Task update time */
+                /** @description Task update time, Unix timestamp in milliseconds */
                 updated_at?: number;
                 task_result?: {
                     videos?: components["schemas"]["KlingVideoResult"][];
@@ -4996,12 +7186,39 @@ export interface components {
             model_name?: components["schemas"]["KlingVideoGenModelName"];
             /** @description Reference Image - URL or Base64 encoded string, cannot exceed 10MB, resolution not less than 300*300px, aspect ratio between 1:2.5 ~ 2.5:1. Base64 should not include data:image prefix. */
             image?: string;
-            /** @description Reference Image - End frame control. URL or Base64 encoded string, cannot exceed 10MB, resolution not less than 300*300px. Base64 should not include data:image prefix. */
+            /** @description Reference Image - End frame control. URL or Base64 encoded string, cannot exceed 10MB, resolution not less than 300*300px. Base64 should not include data:image prefix. Cannot be used simultaneously with dynamic_masks/static_mask or camera_control. */
             image_tail?: string;
-            /** @description Positive text prompt */
+            /**
+             * @description Whether to generate multi-shot video. When true, the prompt parameter is invalid. When false, the shot_type and multi_prompt parameters are invalid.
+             * @default false
+             */
+            multi_shot: boolean;
+            /**
+             * @description Storyboard method. Required when the multi_shot parameter is set to true.
+             * @enum {string}
+             */
+            shot_type?: "customize";
+            /** @description Positive text prompt. Use <<<voice_1>>> to specify a voice matching the voice_list parameter order. A task can reference up to 2 tones. When specifying a tone, the sound parameter value must be on. */
             prompt?: string;
-            /** @description Negative text prompt */
+            /** @description Information about each storyboard, such as prompts and duration. Supports up to 6 storyboards, with a minimum of 1. Required when multi_shot is true and shot_type is customize. */
+            multi_prompt?: {
+                /** @description Shot sequence number */
+                index?: number;
+                /** @description Prompt word for this storyboard. Maximum length 512 characters. */
+                prompt?: string;
+                /** @description Duration of this storyboard in seconds. Must not exceed total task duration and must not be less than 1. Sum of all storyboard durations equals total task duration. */
+                duration?: string;
+            }[];
+            /** @description Negative text prompt. It is recommended to supplement negative prompt information through negative sentences directly within positive prompts. */
             negative_prompt?: string;
+            /** @description Reference Element List based on element ID configuration. Supports up to 3 reference elements. The element_list and voice_list parameters are mutually exclusive. */
+            element_list?: {
+                /**
+                 * Format: int64
+                 * @description Element ID
+                 */
+                element_id?: number;
+            }[];
             cfg_scale?: components["schemas"]["KlingVideoGenCfgScale"];
             mode?: components["schemas"]["KlingVideoGenMode"];
             /** @description Static Brush Application Area (Mask image created by users using the motion brush). The aspect ratio must match the input image. */
@@ -5029,6 +7246,11 @@ export interface components {
              * @enum {string}
              */
             sound: "on" | "off";
+            /** @description Whether to generate watermarked results simultaneously. Custom watermark is not supported at this time. */
+            watermark_info?: {
+                /** @description true means generate watermark, false means do not generate. */
+                enabled?: boolean;
+            };
             /**
              * Format: uri
              * @description The callback notification address. Server will notify when the task status changes.
@@ -5048,12 +7270,19 @@ export interface components {
                 /** @description Task ID */
                 task_id?: string;
                 task_status?: components["schemas"]["KlingTaskStatus"];
+                /** @description Task status information, displaying the failure reason when the task fails */
+                task_status_msg?: string;
                 task_info?: {
                     external_task_id?: string;
                 };
-                /** @description Task creation time */
+                watermark_info?: {
+                    enabled?: boolean;
+                };
+                /** @description The deduction units of task */
+                final_unit_deduction?: string;
+                /** @description Task creation time, Unix timestamp in milliseconds */
                 created_at?: number;
-                /** @description Task update time */
+                /** @description Task update time, Unix timestamp in milliseconds */
                 updated_at?: number;
                 task_result?: {
                     videos?: components["schemas"]["KlingVideoResult"][];
@@ -5103,9 +7332,28 @@ export interface components {
              * @default kling-video-o1
              * @enum {string}
              */
-            model_name: "kling-video-o1";
+            model_name: "kling-video-o1" | "kling-v3-omni";
+            /**
+             * @description Whether to generate multi-shot video. When true, the prompt parameter is invalid. When false, the shot_type and multi_prompt parameters are invalid.
+             * @default false
+             */
+            multi_shot: boolean;
+            /**
+             * @description Storyboard method. Required when the multi_shot parameter is set to true.
+             * @enum {string}
+             */
+            shot_type?: "customize";
             /** @description Text prompt words, which can include positive and negative descriptions. Must not exceed 2,500 characters. Can specify elements, images, or videos in the format <<<>>> such as <<element_1>>, <<<image_1>>>, <<<video_1>>>. */
-            prompt: string;
+            prompt?: string;
+            /** @description Information about each storyboard, such as prompts and duration. Supports up to 6 storyboards, with a minimum of 1. Required when multi_shot is true and shot_type is customize. */
+            multi_prompt?: {
+                /** @description Shot sequence number */
+                index?: number;
+                /** @description Prompt word for this storyboard. Maximum length 512 characters. */
+                prompt?: string;
+                /** @description Duration of this storyboard in seconds. Must not exceed total task duration and must not be less than 1. Sum of all storyboard durations equals total task duration. */
+                duration?: string;
+            }[];
             /** @description Reference Image List. Can include reference images of the element, scene, style, etc., or be used as the first or last frame to generate videos. */
             image_list?: {
                 /** @description Image Base64 encoding or image URL (ensure accessibility). Supported formats include .jpg/.jpeg/.png. File size cannot exceed 10MB. Width and height dimensions shall not be less than 300px, aspect ratio between 1:2.5 ~ 2.5:1. */
@@ -5140,22 +7388,33 @@ export interface components {
                 keep_original_sound?: "yes" | "no";
             }[];
             /**
-             * @description Video generation mode. pro - Professional Mode, generates videos use longer duration but higher quality video output.
-             * @default pro
+             * @description Whether sound is generated simultaneously when generating videos.
+             * @default off
              * @enum {string}
              */
-            mode: "pro";
+            sound: "on" | "off";
+            /**
+             * @description Video generation mode. std: Standard Mode, generating 720P videos, cost-effective. pro: Professional Mode, generating 1080P videos, higher quality video output.
+             * @default std
+             * @enum {string}
+             */
+            mode: "pro" | "std";
             /**
              * @description The aspect ratio of the generated video frame (width:height). Required when first-frame reference or video editing features are not used.
              * @enum {string}
              */
             aspect_ratio?: "16:9" | "9:16" | "1:1";
             /**
-             * @description Video Length in seconds. When using text generated videos, first frame image generated videos, and first and last frame generated videos, only 5 and 10 seconds are supported. When using video editing function, output duration is the same as input video.
+             * @description Video Length in seconds. When using video editing function (refer_type: base), output duration is the same as input video and this parameter is invalid.
              * @default 5
              * @enum {string}
              */
-            duration: "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10";
+            duration: "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15";
+            /** @description Whether to generate watermarked results simultaneously. Custom watermark is not supported at this time. */
+            watermark_info?: {
+                /** @description true means generate watermark, false means do not generate. */
+                enabled?: boolean;
+            };
             /**
              * Format: uri
              * @description The callback notification address for the result of this task. If configured, the server will actively notify when the task status changes.
@@ -5180,9 +7439,14 @@ export interface components {
                 task_info?: {
                     external_task_id?: string;
                 };
-                /** @description Task creation time */
+                watermark_info?: {
+                    enabled?: boolean;
+                };
+                /** @description The deduction units of task */
+                final_unit_deduction?: string;
+                /** @description Task creation time, Unix timestamp in milliseconds */
                 created_at?: number;
-                /** @description Task update time */
+                /** @description Task update time, Unix timestamp in milliseconds */
                 updated_at?: number;
                 task_result?: {
                     videos?: components["schemas"]["KlingVideoResult"][];
@@ -5195,25 +7459,44 @@ export interface components {
              * @default kling-image-o1
              * @enum {string}
              */
-            model_name: "kling-image-o1";
+            model_name: "kling-image-o1" | "kling-v3-omni";
             /** @description Text prompt words, which can include positive and negative descriptions. Must not exceed 2,500 characters. The Omni model can achieve various capabilities through Prompt with elements and images. Specify an image in the format of <<<>>>, such as <<<image_1>>>. */
             prompt: string;
-            /** @description Reference Image List. Supports inputting image Base64 encoding or image URL (ensure accessibility). Supported formats include .jpg/.jpeg/.png. File size cannot exceed 10MB. Width and height dimensions shall not be less than 300px, aspect ratio between 1:2.5 ~ 2.5:1. Maximum 10 images. */
+            /** @description Reference Image List. Supports inputting image Base64 encoding or image URL (ensure accessibility). Supported formats include .jpg/.jpeg/.png. File size cannot exceed 10MB. Width and height dimensions shall not be less than 300px, aspect ratio between 1:2.5 ~ 2.5:1. The sum of reference elements and reference images shall not exceed 10. */
             image_list?: {
                 /** @description Image Base64 encoding or image URL (ensure accessibility) */
                 image?: string;
             }[];
+            /** @description Reference Element List based on element ID configuration. The sum of reference elements and reference images shall not exceed 10. */
+            element_list?: {
+                /**
+                 * Format: int64
+                 * @description Element ID
+                 */
+                element_id?: number;
+            }[];
             /**
              * @description Image generation resolution. 1k is 1K standard, 2k is 2K high-res, 4k is 4K high-res.
              * @default 1k
              * @enum {string}
              */
             resolution: "1k" | "2k" | "4k";
+            /**
+             * @description Control whether to generate a single image or a series of images.
+             * @default single
+             * @enum {string}
+             */
+            result_type: "single" | "series";
             /**
              * @description Number of generated images. Value range [1,9].
              * @default 1
              */
             n: number;
+            /**
+             * @description Number of images in a series. Value range [2,9].
+             * @default 4
+             */
+            series_amount: number;
             /**
              * @description Aspect ratio of the generated images (width:height). auto is to intelligently generate images based on incoming content.
              * @default auto
@@ -5245,12 +7528,29 @@ export interface components {
                     /** @description Customer-defined task ID */
                     external_task_id?: string;
                 };
+                /** @description The deduction units of task */
+                final_unit_deduction?: string;
                 /** @description Task creation time, Unix timestamp in milliseconds */
                 created_at?: number;
                 /** @description Task update time, Unix timestamp in milliseconds */
                 updated_at?: number;
                 task_result?: {
+                    /**
+                     * @description Whether the result is a single image or a series of images
+                     * @enum {string}
+                     */
+                    result_type?: "single" | "series";
                     images?: components["schemas"]["KlingImageResult"][];
+                    /** @description Series images result list */
+                    series_images?: {
+                        /** @description Series-image sequence number */
+                        index?: number;
+                        /**
+                         * Format: uri
+                         * @description URL for generated image
+                         */
+                        url?: string;
+                    }[];
                 };
             };
         };
@@ -5307,6 +7607,64 @@ export interface components {
                 };
             };
         };
+        KlingAvatarRequest: {
+            /** @description Avatar Reference Image. Supports Base64 encoding or image URL. Supported formats: .jpg/.jpeg/.png. Max 10MB, min 300px width/height, aspect ratio between 1:2.5 and 2.5:1. */
+            image: string;
+            /** @description Audio ID Generated via TTS API. Only supports 2-300 second audio generated within the last 30 days. Either audio_id or sound_file must be provided (mutually exclusive). */
+            audio_id?: string;
+            /** @description Sound File. Supports Base64-encoded audio or accessible audio URL. Accepted formats: .mp3/.wav/.m4a/.aac (max 5MB), 2-300 seconds. Either audio_id or sound_file must be provided (mutually exclusive). */
+            sound_file?: string;
+            /** @description Positive text prompt. Can define avatar actions, emotions, and camera movements. */
+            prompt?: string;
+            mode?: components["schemas"]["KlingAvatarMode"];
+            watermark_info?: {
+                /** @description Whether to generate watermarked results simultaneously. */
+                enabled?: boolean;
+            };
+            /**
+             * Format: uri
+             * @description The callback notification address for the result of this task.
+             */
+            callback_url?: string;
+            /** @description Customized Task ID. Must be unique within a single user account. */
+            external_task_id?: string;
+        };
+        /**
+         * @description Video generation mode. std: Standard Mode (cost-effective), pro: Professional Mode (longer duration, higher quality).
+         * @default std
+         * @enum {string}
+         */
+        KlingAvatarMode: "std" | "pro";
+        KlingAvatarResponse: {
+            /** @description Error code */
+            code?: number;
+            /** @description Error message */
+            message?: string;
+            /** @description Request ID */
+            request_id?: string;
+            data?: {
+                /** @description Task ID */
+                task_id?: string;
+                task_status?: components["schemas"]["KlingTaskStatus"];
+                /** @description Task status information */
+                task_status_msg?: string;
+                task_info?: {
+                    external_task_id?: string;
+                };
+                watermark_info?: {
+                    enabled?: boolean;
+                };
+                /** @description The deduction units of task */
+                final_unit_deduction?: string;
+                /** @description Task creation time */
+                created_at?: number;
+                /** @description Task update time */
+                updated_at?: number;
+                task_result?: {
+                    videos?: components["schemas"]["KlingVideoResult"][];
+                };
+            };
+        };
         KlingVideoEffectsRequest: {
             effect_scene: components["schemas"]["KlingDualCharacterEffectsScene"] | components["schemas"]["KlingSingleImageEffectsScene"];
             input: components["schemas"]["KlingVideoEffectsInput"];
@@ -5354,13 +7712,104 @@ export interface components {
                 };
             };
         };
+        KlingMotionControlRequest: {
+            /**
+             * @description Model name for motion control. Enum values - kling-v2-6, kling-v3.
+             * @default kling-v2-6
+             * @enum {string}
+             */
+            model_name: "kling-v2-6" | "kling-v3";
+            /** @description Text prompt words, which can include positive and negative descriptions. Cannot exceed 2500 characters. */
+            prompt?: string;
+            /** @description Reference Image. The characters, backgrounds, and other elements in the generated video are based on the reference image. Supports inputting image Base64 encoding or image URL (ensure accessibility). Supported image formats include .jpg / .jpeg / .png. The image file size cannot exceed 10MB, and the width and height dimensions of the image range from 300px to 65536px, and the aspect ratio of the image should be between 1:2.5 ~ 2.5:1. */
+            image_url: string;
+            /** @description The URL of the reference video. The character actions in the generated video are consistent with the reference video. The video file supports .mp4/.mov, with a file size not exceeding 100MB, and only supports side lengths between 340px and 3850px. The lower limit of video duration should not be less than 3 seconds, and the upper limit depends on character_orientation. */
+            video_url: string;
+            /** @description Reference Element List based on element ID configuration. Currently only one element can be introduced. */
+            element_list?: {
+                /**
+                 * Format: int64
+                 * @description Element ID
+                 */
+                element_id?: number;
+            }[];
+            /**
+             * @description Whether to keep the original sound of the video. Enumeration values - yes (Keep the original sound), no (do not retain the original video sound).
+             * @default yes
+             * @enum {string}
+             */
+            keep_original_sound: "yes" | "no";
+            /**
+             * @description Generate the orientation of the characters in the video. image - same orientation as the person in the picture (reference video duration should not exceed 10 seconds). video - consistent with the orientation of the characters in the video (reference video duration should not exceed 30 seconds).
+             * @enum {string}
+             */
+            character_orientation: "image" | "video";
+            /**
+             * @description Video generation mode. std - Standard Mode (cost-effective). pro - Professional Mode (longer duration but higher quality video output).
+             * @enum {string}
+             */
+            mode: "std" | "pro";
+            /** @description Whether to generate watermarked results simultaneously. Custom watermark is not supported at this time. */
+            watermark_info?: {
+                /** @description true means generate watermark, false means do not generate. */
+                enabled?: boolean;
+            };
+            /**
+             * Format: uri
+             * @description The callback notification address for the result of this task. If configured, the server will actively notify when the task status changes.
+             */
+            callback_url?: string;
+            /** @description Customized Task ID. Users can provide a customized task ID, which will not overwrite the system-generated task ID but can be used for task queries. Must be unique within a single user account. */
+            external_task_id?: string;
+        };
+        KlingMotionControlResponse: {
+            /** @description Error code */
+            code?: number;
+            /** @description Error message */
+            message?: string;
+            /** @description Request ID */
+            request_id?: string;
+            data?: {
+                /** @description Task ID */
+                task_id?: string;
+                task_status?: components["schemas"]["KlingTaskStatus"];
+                /** @description Task status information, displaying the failure reason when the task fails */
+                task_status_msg?: string;
+                task_info?: {
+                    /** @description Customer-defined task ID */
+                    external_task_id?: string;
+                };
+                watermark_info?: {
+                    enabled?: boolean;
+                };
+                /** @description The deduction units of task */
+                final_unit_deduction?: string;
+                /** @description Task creation time, Unix timestamp, unit ms */
+                created_at?: number;
+                /** @description Task update time, Unix timestamp, unit ms */
+                updated_at?: number;
+                task_result?: {
+                    videos?: components["schemas"]["KlingMotionControlVideoResult"][];
+                };
+            };
+        };
+        KlingMotionControlVideoResult: {
+            /** @description Generated video ID; globally unique */
+            id?: string;
+            /** @description URL for generating videos */
+            url?: string;
+            /** @description URL for generating videos with watermark, hotlink protection format */
+            watermark_url?: string;
+            /** @description Total video duration, unit - s (seconds) */
+            duration?: string;
+        };
         KlingImageGenerationsRequest: {
             model_name?: components["schemas"]["KlingImageGenModelName"];
-            /** @description Positive text prompt */
+            /** @description Positive text prompt. Must not exceed 2,500 characters. */
             prompt: string;
-            /** @description Negative text prompt */
+            /** @description Negative text prompt. Cannot exceed 2500 characters. It is recommended to supplement negative prompt information through negative sentences directly within positive prompts. Not supported in Image-to-Image scenario (when image field is not empty). */
             negative_prompt?: string;
-            /** @description Reference Image - Base64 encoded string or image URL */
+            /** @description Reference Image - Base64 encoded string or image URL. Supported formats include .jpg/.jpeg/.png. File size cannot exceed 10MB. Width and height dimensions shall not be less than 300px, aspect ratio between 1:2.5 ~ 2.5:1. Required when image_reference is not empty. */
             image?: string;
             image_reference?: components["schemas"]["KlingImageGenImageReferenceType"];
             /**
@@ -5373,8 +7822,22 @@ export interface components {
              * @default 0.45
              */
             human_fidelity: number;
+            /** @description Reference Element List based on element ID configuration. The sum of reference elements and reference images shall not exceed 10. */
+            element_list?: {
+                /**
+                 * Format: int64
+                 * @description Element ID
+                 */
+                element_id?: number;
+            }[];
             /**
-             * @description Number of generated images
+             * @description Image generation resolution. 1k is 1K standard, 2k is 2K high-res.
+             * @default 1k
+             * @enum {string}
+             */
+            resolution: "1k" | "2k";
+            /**
+             * @description Number of generated images. Value range [1,9].
              * @default 1
              */
             n: number;
@@ -5384,6 +7847,8 @@ export interface components {
              * @description The callback notification address
              */
             callback_url?: string;
+            /** @description Customized Task ID. Must be unique within a single user account. */
+            external_task_id?: string;
         };
         KlingImageGenerationsResponse: {
             /** @description Error code */
@@ -5396,15 +7861,21 @@ export interface components {
                 /** @description Task ID */
                 task_id?: string;
                 task_status?: components["schemas"]["KlingTaskStatus"];
-                /** @description Task status information */
+                /** @description Task status information, displaying the failure reason when the task fails */
                 task_status_msg?: string;
-                /** @description Task creation time */
+                /** @description The deduction units of task */
+                final_unit_deduction?: string;
+                /** @description Task creation time, Unix timestamp in milliseconds */
                 created_at?: number;
-                /** @description Task update time */
+                /** @description Task update time, Unix timestamp in milliseconds */
                 updated_at?: number;
                 task_result?: {
                     images?: components["schemas"]["KlingImageResult"][];
                 };
+                task_info?: {
+                    /** @description Customer-defined task ID */
+                    external_task_id?: string;
+                };
             };
         };
         KlingVirtualTryOnRequest: {
@@ -6223,7 +8694,7 @@ export interface components {
         /** @enum {string} */
         RecraftImageSubStyle: "2d_art_poster" | "3d" | "80s" | "glow" | "grain" | "hand_drawn" | "infantile_sketch" | "kawaii" | "pixel_art" | "psychedelic" | "seamless" | "voxel" | "watercolor" | "broken_line" | "colored_outline" | "colored_shapes" | "colored_shapes_gradient" | "doodle_fill" | "doodle_offset_fill" | "offset_fill" | "outline" | "outline_gradient" | "uneven_fill" | "70s" | "cartoon" | "doodle_line_art" | "engraving" | "flat_2" | "kawaii" | "line_art" | "linocut" | "seamless" | "b_and_w" | "enterprise" | "hard_flash" | "hdr" | "motion_blur" | "natural_light" | "studio_portrait" | "line_circuit" | "2d_art_poster_2" | "engraving_color" | "flat_air_art" | "hand_drawn_outline" | "handmade_3d" | "stickers_drawings" | "plastic" | "pictogram";
         /** @enum {string} */
-        RecraftTransformModel: "refm1" | "recraft20b" | "recraftv2" | "recraftv3" | "flux1_1pro" | "flux1dev" | "imagen3" | "hidream_i1_dev";
+        RecraftTransformModel: "refm1" | "recraft20b" | "recraftv2" | "recraftv3" | "recraftv4" | "recraftv4_pro" | "flux1_1pro" | "flux1dev" | "imagen3" | "hidream_i1_dev";
         /** @enum {string} */
         RecraftImageFormat: "webp" | "png";
         /** @enum {string} */
@@ -6297,6 +8768,1142 @@ export interface components {
             substyle?: components["schemas"]["RecraftImageSubStyle"];
             text_layout?: components["schemas"]["RecraftTextLayout"];
         };
+        /** @description Request body for creating a Recraft style reference */
+        RecraftCreateStyleRequest: {
+            /**
+             * @description The base style of the generated images
+             * @enum {string}
+             */
+            style: "realistic_image" | "digital_illustration" | "vector_illustration" | "icon";
+            /**
+             * Format: binary
+             * @description First image file (PNG, JPG, or WEBP)
+             */
+            file1: string;
+            /**
+             * Format: binary
+             * @description Second image file (PNG, JPG, or WEBP)
+             */
+            file2?: string;
+            /**
+             * Format: binary
+             * @description Third image file (PNG, JPG, or WEBP)
+             */
+            file3?: string;
+            /**
+             * Format: binary
+             * @description Fourth image file (PNG, JPG, or WEBP)
+             */
+            file4?: string;
+            /**
+             * Format: binary
+             * @description Fifth image file (PNG, JPG, or WEBP)
+             */
+            file5?: string;
+        };
+        /** @description Response containing the created style ID */
+        RecraftCreateStyleResponse: {
+            /**
+             * Format: uuid
+             * @description The unique identifier of the created style
+             */
+            id: string;
+        };
+        /** @description Request body for Tencent Hunyuan 3D Pro generation */
+        TencentHunyuan3DProRequest: {
+            /**
+             * @description Tencent HY 3D Global model version.
+             *     Defaults to 3.0, with optional choices: 3.0, 3.1.
+             *     When selecting version 3.1, the LowPoly parameter is unavailable.
+             * @default 3.0
+             * @example 3.0
+             * @enum {string}
+             */
+            Model: "3.0" | "3.1";
+            /**
+             * @description Text description for 3D content generation.
+             *     Supports up to 1024 utf-8 characters.
+             *     Either Prompt or ImageBase64/ImageUrl is required, but not both.
+             * @example A cat
+             */
+            Prompt?: string;
+            /**
+             * @description Base64 encoded image for image-to-3D generation.
+             *     Resolution: min 128px, max 5000px per side.
+             *     Max size: 8MB (recommend 6MB before encoding).
+             *     Supported formats: jpg, png, jpeg, webp.
+             *     Either ImageBase64/ImageUrl or Prompt is required.
+             */
+            ImageBase64?: string;
+            /**
+             * Format: uri
+             * @description URL of input image for image-to-3D generation.
+             *     Resolution: min 128px, max 5000px per side.
+             *     Max size: 8MB.
+             *     Supported formats: jpg, png, jpeg, webp.
+             *     Either ImageBase64/ImageUrl or Prompt is required.
+             */
+            ImageUrl?: string;
+            /**
+             * @description Whether to enable PBR material generation.
+             * @default false
+             */
+            EnablePBR: boolean;
+            /**
+             * @description Face count for 3D model generation.
+             * @default 500000
+             */
+            FaceCount: number;
+            /**
+             * @description Generation task type:
+             *     - Normal: generates a geometric model with textures (default)
+             *     - LowPoly: model generated after intelligent polygon reduction
+             *     - Geometry: generate model without textures (white model)
+             *     - Sketch: generative model from sketch or line drawing
+             * @default Normal
+             * @enum {string}
+             */
+            GenerateType: "Normal" | "LowPoly" | "Geometry" | "Sketch";
+            /**
+             * @description Polygon type (only effective when GenerateType is LowPoly).
+             *     - triangle: triangular faces (default)
+             *     - quadrilateral: mix of quadrangle and triangle faces
+             * @default triangle
+             * @enum {string}
+             */
+            PolygonType: "triangle" | "quadrilateral";
+            /**
+             * @description Multi-perspective model images for 3D generation.
+             *     Each perspective is limited to one image.
+             *     Image size limit: max 8MB after encoding.
+             *     Image resolution: min 128px, max 5000px per side.
+             *     Supported formats: JPG, PNG.
+             */
+            MultiViewImages?: components["schemas"]["TencentViewImage"][];
+        };
+        /** @description A view image for multi-perspective 3D generation */
+        TencentViewImage: {
+            /**
+             * @description The viewing angle type for this image.
+             *     - left: Left view
+             *     - right: Right view
+             *     - back: Rear view
+             *     - top: Top view (only supported in Model 3.1)
+             *     - bottom: Bottom view (only supported in Model 3.1)
+             *     - left_front: Left front 45 degree view (only supported in Model 3.1)
+             *     - right_front: Right front 45 degree view (only supported in Model 3.1)
+             * @enum {string}
+             */
+            ViewType?: "left" | "right" | "back" | "top" | "bottom" | "left_front" | "right_front";
+            /**
+             * @description Base64 encoded image for this view.
+             *     Resolution: min 128px, max 5000px per side.
+             *     Max size: 8MB.
+             *     Supported formats: JPG, PNG.
+             */
+            ViewImageBase64?: string;
+            /**
+             * Format: uri
+             * @description URL of the image for this view.
+             *     Resolution: min 128px, max 5000px per side.
+             *     Max size: 8MB.
+             *     Supported formats: JPG, PNG.
+             */
+            ViewImageUrl?: string;
+        };
+        /** @description Response from Tencent Hunyuan 3D Pro submit endpoint */
+        TencentHunyuan3DProResponse: {
+            Response?: {
+                /**
+                 * @description Task ID (valid for 24 hours)
+                 * @example 1375367755519696896
+                 */
+                JobId?: string;
+                /**
+                 * @description Unique request ID for troubleshooting
+                 * @example 13f47dd0-1af9-4383-b401-dae18d6e99fc
+                 */
+                RequestId?: string;
+                /** @description Error object (present when request fails) */
+                Error?: {
+                    /** @description Error code */
+                    Code?: string;
+                    /** @description Error message */
+                    Message?: string;
+                };
+            };
+        };
+        TencentHunyuan3DQueryRequest: {
+            /**
+             * @description The JobId returned from the submit endpoint
+             * @example 1375367755519696896
+             */
+            JobId: string;
+        };
+        /** @description Response from Tencent Hunyuan 3D query endpoint */
+        TencentHunyuan3DQueryResponse: {
+            Response?: {
+                /**
+                 * @description Task status:
+                 *     - WAIT: waiting
+                 *     - RUN: running
+                 *     - FAIL: failed
+                 *     - DONE: successful
+                 * @enum {string}
+                 */
+                Status?: "WAIT" | "RUN" | "FAIL" | "DONE";
+                /** @description Error code (empty string if no error) */
+                ErrorCode?: string;
+                /** @description Error message if task failed (empty string if no error) */
+                ErrorMessage?: string;
+                /** @description Array of generated 3D files */
+                ResultFile3Ds?: components["schemas"]["TencentFile3D"][];
+                /** @description Unique request ID for troubleshooting */
+                RequestId?: string;
+            };
+        };
+        /** @description 3D file information */
+        TencentFile3D: {
+            /**
+             * @description 3D file format
+             * @enum {string}
+             */
+            Type?: "GLB" | "OBJ";
+            /**
+             * Format: uri
+             * @description File URL (valid for 24 hours)
+             */
+            Url?: string;
+            /**
+             * Format: uri
+             * @description Preview image URL
+             */
+            PreviewImageUrl?: string;
+        };
+        /** @description Error response from Tencent API */
+        TencentErrorResponse: {
+            Response?: {
+                Error?: {
+                    /** @description Error code */
+                    Code?: string;
+                    /** @description Error message */
+                    Message?: string;
+                };
+                /** @description Unique request ID for troubleshooting */
+                RequestId?: string;
+            };
+        };
+        /** @description Request body for Tencent Hunyuan 3D UV unfolding */
+        TencentHunyuan3DUVRequest: {
+            File?: components["schemas"]["TencentInputFile3D"];
+        };
+        /** @description 3D file input for UV unwrapping */
+        TencentInputFile3D: {
+            /**
+             * @description 3D file format type
+             * @example GLB
+             * @enum {string}
+             */
+            Type: "FBX" | "OBJ" | "GLB";
+            /**
+             * Format: uri
+             * @description URL of the 3D file that needs UV unwrapping
+             * @example https://example.com/model.glb
+             */
+            Url: string;
+        };
+        /** @description Response from Tencent Hunyuan 3D UV submit endpoint */
+        TencentHunyuan3DUVResponse: {
+            Response?: {
+                /**
+                 * @description Task ID for the UV unwrapping job
+                 * @example 1384898587778465792
+                 */
+                JobId?: string;
+                /**
+                 * @description Unique request ID for troubleshooting
+                 * @example 5265eb4a-0f4f-4cb1-9b3d-d9f1fb9347d2
+                 */
+                RequestId?: string;
+                /** @description Error object (present when request fails) */
+                Error?: {
+                    /** @description Error code */
+                    Code?: string;
+                    /** @description Error message */
+                    Message?: string;
+                };
+            };
+        };
+        /** @description Request body for Tencent Hunyuan 3D texture edit */
+        TencentHunyuan3DTextureEditRequest: {
+            /** @description File URL of the 3D model that requires texture edit. Supported format FBX, less than 100000 faces. */
+            File3D: components["schemas"]["TencentInputFile3D"];
+            /** @description Reference image for 3D model texture editing. Either Base64 or Url must be provided. If both provided, Url prevails. Incompatible with Prompt. */
+            Image?: components["schemas"]["TencentImageInfo"];
+            /**
+             * @description Describes texture editing. Either Image or Prompt is required; they cannot coexist.
+             * @example a kitten
+             */
+            Prompt?: string;
+            /**
+             * @description Whether to enable the PBR texture parameter; only supported when using Prompt.
+             * @example true
+             */
+            EnablePBR?: boolean;
+        };
+        /** @description Reference image - Base64 data or image URL */
+        TencentImageInfo: {
+            /** @description Base64 encoded image. Resolution 128-4096 per side, converted Base64 less than 10MB. Formats jpg, jpeg, png. */
+            ImageBase64?: string;
+            /**
+             * Format: uri
+             * @description Image URL. If both Base64 and Url provided, Url prevails.
+             */
+            ImageUrl?: string;
+        };
+        /** @description Request body for Tencent Hunyuan 3D Smart Topology (retopology/polygon reduction) */
+        TencentHunyuan3DSmartTopologyRequest: {
+            /** @description Source 3D file model link. Supported formats GLB, OBJ. File size max 200MB. */
+            File3D: components["schemas"]["TencentInputFile3D"];
+            /**
+             * @description Polygon type for the output mesh. Defaults to triangle.
+             * @example triangle
+             * @enum {string}
+             */
+            PolygonType?: "triangle" | "quadrilateral";
+            /**
+             * @description Polygon reduction level.
+             * @example medium
+             * @enum {string}
+             */
+            FaceLevel?: "high" | "medium" | "low";
+        };
+        /** @description Request body for HitPaw Photo Enhancement API */
+        HitPawPhotoEnhancerRequest: {
+            /**
+             * @description The model name to use for enhancement.
+             *
+             *     **Available Models:**
+             *     - face_2x, face_4x: Face Clear Model (2x/4x upscaling)
+             *     - face_v2_2x, face_v2_4x: Face Natural Model (2x/4x upscaling)
+             *     - general_2x, general_4x: General Enhance Model (2x/4x upscaling)
+             *     - high_fidelity_2x, high_fidelity_4x: High Fidelity Model (2x/4x upscaling)
+             *     - sharpen_denoise: Sharp Denoise Model
+             *     - detail_denoise: Detail Denoise Model
+             *     - generative_portrait: Generative Portrait Model
+             *     - generative: Generative Enhance Model
+             * @example generative_portrait
+             * @enum {string}
+             */
+            model_name: "face_2x" | "face_4x" | "face_v2_2x" | "face_v2_4x" | "general_2x" | "general_4x" | "high_fidelity_2x" | "high_fidelity_4x" | "sharpen_denoise" | "detail_denoise" | "generative_portrait" | "generative";
+            /**
+             * Format: uri
+             * @description URL of the image to be enhanced. Must be publicly accessible.
+             * @example https://example.com/image.jpg
+             */
+            img_url: string;
+            /**
+             * @description File extension of the image (e.g., ".jpg", ".png")
+             * @example .jpg
+             */
+            extension: string;
+            /**
+             * @description Whether to preserve EXIF data (default false)
+             * @example true
+             */
+            exif?: boolean;
+            /**
+             * Format: int64
+             * @description Target DPI for the output image
+             * @example 300
+             */
+            DPI?: number;
+        };
+        /** @description Response from HitPaw Enhancement APIs (photo and video) */
+        HitPawJobResponse: {
+            /**
+             * @description Status code, 200 indicates success
+             * @example 200
+             */
+            code?: number;
+            /**
+             * @description Response message
+             * @example OK
+             */
+            message?: string;
+            data?: {
+                /**
+                 * @description Unique identifier for the enhancement job
+                 * @example f5007c0b-e902-4070-8c75-f337d896168f
+                 */
+                job_id?: string;
+                /**
+                 * @description Number of coins consumed for this task
+                 * @example 75
+                 */
+                consume_coins?: number;
+            };
+        };
+        /** @description Request body for HitPaw Task Status Query API */
+        HitPawTaskStatusRequest: {
+            /**
+             * @description Task ID obtained from Enhancement API response
+             * @example xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
+             */
+            job_id: string;
+        };
+        /** @description Response from HitPaw Task Status Query API */
+        HitPawTaskStatusResponse: {
+            /**
+             * @description Status code, 200 indicates success
+             * @example 200
+             */
+            code?: number;
+            /**
+             * @description Response message
+             * @example OK
+             */
+            message?: string;
+            data?: {
+                /**
+                 * @description Task ID
+                 * @example xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
+                 */
+                job_id?: string;
+                /**
+                 * @description Task status:
+                 *     - WAITING: The job is queued and waiting to be processed
+                 *     - CONVERTING: Processing task in progress
+                 *     - COMPLETED: Task completed successfully
+                 *     - ERROR: Task failed
+                 * @enum {string}
+                 */
+                status?: "WAITING" | "CONVERTING" | "COMPLETED" | "ERROR";
+                /**
+                 * Format: uri
+                 * @description Result URL, only valid when status is COMPLETED
+                 * @example https://example.com/result.jpg
+                 */
+                res_url?: string;
+                /**
+                 * Format: uri
+                 * @description Original Image URL (photo enhancement only)
+                 * @example https://example.com/original.jpg
+                 */
+                original_url?: string;
+            };
+        };
+        /** @description Error response from HitPaw API */
+        HitPawErrorResponse: {
+            /** @description Error code */
+            error_code?: number;
+            /** @description Error message */
+            message?: string;
+        };
+        /** @description Request body for HitPaw Video Enhancement API */
+        HitPawVideoEnhancerRequest: {
+            /**
+             * Format: uri
+             * @description URL of the video to be enhanced
+             * @example https://example.com/video.mp4
+             */
+            video_url: string;
+            /**
+             * @description Model name to use for enhancement.
+             *
+             *     **Available Models:**
+             *     - face_soft: Face Soft Model
+             *     - portrait_restore_1x: Portrait Restore Model 1x
+             *     - portrait_restore_2x: Portrait Restore Model 2x
+             *     - general_restore_1x: General Restore Model 1x
+             *     - general_restore_2x: General Restore Model 2x
+             *     - general_restore_4x: General Restore Model 4x
+             *     - ultrahd_restore: Ultra HD Model
+             *     - generative: Generative Model (SD)
+             * @example general_restore_2x
+             * @enum {string}
+             */
+            model_name: "face_soft" | "portrait_restore_1x" | "portrait_restore_2x" | "general_restore_1x" | "general_restore_2x" | "general_restore_4x" | "ultrahd_restore" | "generative";
+            /**
+             * @description Target resolution [width, height]
+             * @example [
+             *       1920,
+             *       1080
+             *     ]
+             */
+            resolution: number[];
+            /**
+             * @description File extension for the output video (default ".mp4")
+             * @default .mp4
+             * @example .mp4
+             */
+            extension: string;
+            /**
+             * @description Original video resolution [width, height]
+             * @example [
+             *       1280,
+             *       720
+             *     ]
+             */
+            original_resolution?: number[];
+        };
+        /** @description Voice settings configuration */
+        ElevenLabsVoiceSettings: {
+            /**
+             * Format: double
+             * @description Stability of the voice. Lower values introduce broader emotional range.
+             * @default 0.5
+             */
+            stability: number | null;
+            /**
+             * Format: double
+             * @description How closely the AI adheres to the original voice when replicating it.
+             * @default 0.75
+             */
+            similarity_boost: number | null;
+            /**
+             * Format: double
+             * @description Style exaggeration. Amplifies the style of the original speaker.
+             * @default 0
+             */
+            style: number | null;
+            /**
+             * @description Boosts similarity to the original speaker. Requires higher computational load.
+             * @default true
+             */
+            use_speaker_boost: boolean | null;
+            /**
+             * Format: double
+             * @description Speed adjustment. 1.0 is default, values below slow down, values above speed up.
+             * @default 1
+             */
+            speed: number | null;
+        } | null;
+        /** @description Request body for ElevenLabs Text to Speech */
+        ElevenLabsTTSRequest: {
+            /** @description The text that will be converted into speech. */
+            text: string;
+            /**
+             * @description Identifier of the model to use. Query /v1/models to list available models.
+             * @default eleven_multilingual_v2
+             */
+            model_id: string;
+            /** @description Language code (ISO 639-1) to enforce for the model. If unsupported, an error is returned. */
+            language_code?: string | null;
+            voice_settings?: components["schemas"]["ElevenLabsVoiceSettings"];
+            /** @description List of pronunciation dictionary locators (id, version_id). Maximum 3 per request. */
+            pronunciation_dictionary_locators?: components["schemas"]["ElevenLabsPronunciationDictionaryLocator"][] | null;
+            /** @description Seed for deterministic generation. Must be between 0 and 4294967295. */
+            seed?: number | null;
+            /** @description Text that came before this request, used to improve speech continuity. */
+            previous_text?: string | null;
+            /** @description Text that comes after this request, used to improve speech continuity. */
+            next_text?: string | null;
+            /** @description Request IDs of previous generations for continuity. Maximum 3. */
+            previous_request_ids?: string[] | null;
+            /** @description Request IDs of next generations for continuity. Maximum 3. */
+            next_request_ids?: string[] | null;
+            /**
+             * @description Controls text normalization. 'auto' lets the system decide, 'on' always applies normalization,
+             *     'off' skips normalization.
+             * @default auto
+             * @enum {string}
+             */
+            apply_text_normalization: "auto" | "on" | "off";
+            /**
+             * @description Controls language-specific text normalization. Can heavily increase latency. Currently only supported for Japanese.
+             * @default false
+             */
+            apply_language_text_normalization: boolean;
+            /**
+             * @description Deprecated. If true, uses IVC version of voice instead of PVC.
+             * @default false
+             */
+            use_pvc_as_ivc: boolean;
+        };
+        /** @description Locator for a pronunciation dictionary */
+        ElevenLabsPronunciationDictionaryLocator: {
+            /** @description The ID of the pronunciation dictionary */
+            pronunciation_dictionary_id: string;
+            /** @description The version ID of the pronunciation dictionary */
+            version_id: string;
+        };
+        /** @description Validation error response from ElevenLabs */
+        ElevenLabsValidationError: {
+            /** @description Details about the validation error */
+            detail?: {
+                /** @description Error status */
+                status?: string;
+                /** @description Error message */
+                message?: string;
+            };
+        };
+        /** @description Request body for ElevenLabs Speech-to-Text */
+        ElevenLabsSTTRequest: {
+            /**
+             * @description The ID of the model to use for transcription.
+             * @enum {string}
+             */
+            model_id: "scribe_v1" | "scribe_v2";
+            /**
+             * Format: binary
+             * @description The file to transcribe. All major audio and video formats are supported.
+             *     Exactly one of file or cloud_storage_url parameters must be provided.
+             *     The file size must be less than 3.0GB.
+             */
+            file?: string;
+            /**
+             * @description An ISO-639-1 or ISO-639-3 language_code corresponding to the language of the audio file.
+             *     Can sometimes improve transcription performance if known beforehand.
+             *     Defaults to null, in this case the language is predicted automatically.
+             */
+            language_code?: string | null;
+            /**
+             * @description Whether to tag audio events like (laughter), (footsteps), etc. in the transcription.
+             * @default true
+             */
+            tag_audio_events: boolean;
+            /**
+             * @description The maximum amount of speakers talking in the uploaded file.
+             *     Can help with predicting who speaks when. The maximum amount of speakers that can be predicted is 32.
+             *     Defaults to null, in this case the amount of speakers is set to the maximum value the model supports.
+             */
+            num_speakers?: number | null;
+            /**
+             * @description The granularity of the timestamps in the transcription.
+             *     'word' provides word-level timestamps and 'character' provides character-level timestamps per word.
+             * @default word
+             * @enum {string}
+             */
+            timestamps_granularity: "none" | "word" | "character";
+            /**
+             * @description Whether to annotate which speaker is currently talking in the uploaded file.
+             * @default false
+             */
+            diarize: boolean;
+            /**
+             * Format: double
+             * @description Diarization threshold to apply during speaker diarization.
+             *     A higher value means there will be a lower chance of one speaker being diarized as two different speakers.
+             *     Can only be set when diarize=True and num_speakers=None. Defaults to None.
+             */
+            diarization_threshold?: number | null;
+            /** @description A list of additional formats to export the transcript to. */
+            additional_formats?: components["schemas"]["ElevenLabsSTTExportOptions"][] | null;
+            /**
+             * @description The format of input audio. Options are 'pcm_s16le_16' or 'other'.
+             *     For pcm_s16le_16, the input audio must be 16-bit PCM at a 16kHz sample rate, single channel (mono).
+             * @default other
+             * @enum {string}
+             */
+            file_format: "pcm_s16le_16" | "other";
+            /**
+             * @description The HTTPS URL of the file to transcribe. Exactly one of file or cloud_storage_url parameters must be provided.
+             *     The file must be accessible via HTTPS and the file size must be less than 2GB.
+             */
+            cloud_storage_url?: string | null;
+            /**
+             * @description Whether to send the transcription result to configured speech-to-text webhooks.
+             *     If set the request will return early without the transcription, which will be delivered later via webhook.
+             * @default false
+             */
+            webhook: boolean;
+            /**
+             * @description Optional specific webhook ID to send the transcription result to.
+             *     Only valid when webhook is set to true.
+             */
+            webhook_id?: string | null;
+            /**
+             * Format: double
+             * @description Controls the randomness of the transcription output. Accepts values between 0.0 and 2.0.
+             *     Higher values result in more diverse and less deterministic results.
+             */
+            temperature?: number | null;
+            /**
+             * @description If specified, our system will make a best effort to sample deterministically.
+             *     Must be an integer between 0 and 2147483647.
+             */
+            seed?: number | null;
+            /**
+             * @description Whether the audio file contains multiple channels where each channel contains a single speaker.
+             *     When enabled, each channel will be transcribed independently and the results will be combined.
+             *     A maximum of 5 channels is supported.
+             * @default false
+             */
+            use_multi_channel: boolean;
+            /**
+             * @description Optional metadata to be included in the webhook response.
+             *     This should be a JSON string representing an object with a maximum depth of 2 levels and maximum size of 16KB.
+             */
+            webhook_metadata?: string | null;
+            /**
+             * @description Detect entities in the transcript. Can be 'all' to detect all entities,
+             *     a single entity type or category string, or a list of entity types/categories.
+             *     Categories include 'pii', 'phi', 'pci', 'other', 'offensive_language'.
+             *     When enabled, detected entities will be returned in the 'entities' field
+             *     with their text, type, and character positions. Usage of this parameter will incur additional costs.
+             */
+            entity_detection?: (string | string[]) | null;
+            /**
+             * @description A list of keyterms to bias the transcription towards.
+             *     The number of keyterms cannot exceed 100 and each keyterm must be less than 50 characters.
+             */
+            keyterms?: string[] | null;
+        };
+        /** @description Export format options for speech-to-text transcripts */
+        ElevenLabsSTTExportOptions: {
+            /**
+             * @description The output format for the transcript export.
+             * @enum {string}
+             */
+            format: "segmented_json" | "docx" | "pdf" | "txt" | "html" | "srt";
+            /**
+             * @description Whether to include speaker labels in the export.
+             * @default true
+             */
+            include_speakers: boolean;
+            /**
+             * @description Whether to include timestamps in the export.
+             * @default true
+             */
+            include_timestamps: boolean;
+            /**
+             * Format: double
+             * @description Segment the transcript when silence is longer than this value in seconds.
+             */
+            segment_on_silence_longer_than_s?: number | null;
+            /**
+             * Format: double
+             * @description Maximum duration of each segment in seconds.
+             */
+            max_segment_duration_s?: number | null;
+            /** @description Maximum number of characters per segment. */
+            max_segment_chars?: number | null;
+            /** @description Maximum characters per line (for txt and srt formats). */
+            max_characters_per_line?: number | null;
+        };
+        /** @description Response from ElevenLabs Speech-to-Text */
+        ElevenLabsSTTResponse: {
+            /** @description The detected language code (e.g. 'eng' for English). */
+            language_code?: string;
+            /**
+             * Format: double
+             * @description The confidence score of the language detection (0 to 1).
+             */
+            language_probability?: number;
+            /** @description The raw text of the transcription. */
+            text?: string;
+            /** @description List of words with their timing information. */
+            words?: components["schemas"]["ElevenLabsSTTWord"][];
+            /** @description The channel index this transcript belongs to (for multichannel audio). */
+            channel_index?: number | null;
+            /** @description Requested additional formats of the transcript. */
+            additional_formats?: components["schemas"]["ElevenLabsSTTAdditionalFormat"][] | null;
+            /** @description The transcription ID of the response. */
+            transcription_id?: string | null;
+            /** @description List of detected entities with their text, type, and character positions. */
+            entities?: components["schemas"]["ElevenLabsSTTDetectedEntity"][] | null;
+            /** @description List of transcripts for multichannel audio (when use_multi_channel is true). */
+            transcripts?: components["schemas"]["ElevenLabsSTTTranscript"][] | null;
+            /** @description Message for webhook responses. */
+            message?: string | null;
+            /** @description Request ID for webhook responses. */
+            request_id?: string | null;
+        };
+        /** @description Word information from speech-to-text transcription */
+        ElevenLabsSTTWord: {
+            /** @description The word or sound that was transcribed. */
+            text: string;
+            /**
+             * Format: double
+             * @description The start time of the word or sound in seconds.
+             */
+            start?: number | null;
+            /**
+             * Format: double
+             * @description The end time of the word or sound in seconds.
+             */
+            end?: number | null;
+            /**
+             * @description The type of the word or sound.
+             *     'audio_event' is used for non-word sounds like laughter or footsteps.
+             * @enum {string}
+             */
+            type: "word" | "spacing" | "audio_event";
+            /** @description Unique identifier for the speaker of this word. */
+            speaker_id?: string | null;
+            /**
+             * Format: double
+             * @description The log of the probability with which this word was predicted.
+             *     Logprobs are in range [-infinity, 0], higher logprobs indicate higher confidence.
+             */
+            logprob: number;
+            /** @description The characters that make up the word and their timing information. */
+            characters?: components["schemas"]["ElevenLabsSTTCharacter"][] | null;
+        };
+        /** @description Character information with timing */
+        ElevenLabsSTTCharacter: {
+            /** @description The character that was transcribed. */
+            text: string;
+            /**
+             * Format: double
+             * @description The start time of the character in seconds.
+             */
+            start?: number | null;
+            /**
+             * Format: double
+             * @description The end time of the character in seconds.
+             */
+            end?: number | null;
+        };
+        /** @description Additional format response for transcript export */
+        ElevenLabsSTTAdditionalFormat: {
+            /** @description The requested format. */
+            requested_format: string;
+            /** @description The file extension of the additional format. */
+            file_extension: string;
+            /** @description The content type of the additional format. */
+            content_type: string;
+            /** @description Whether the content is base64 encoded. */
+            is_base64_encoded: boolean;
+            /** @description The content of the additional format. */
+            content: string;
+        };
+        /** @description Detected entity in transcript */
+        ElevenLabsSTTDetectedEntity: {
+            /** @description The text that was identified as an entity. */
+            text: string;
+            /** @description The type of entity detected (e.g., 'credit_card', 'email_address', 'person_name'). */
+            entity_type: string;
+            /** @description Start character position in the transcript text. */
+            start_char: number;
+            /** @description End character position in the transcript text. */
+            end_char: number;
+        };
+        /** @description Individual transcript for multichannel audio */
+        ElevenLabsSTTTranscript: {
+            /** @description The detected language code. */
+            language_code?: string;
+            /**
+             * Format: double
+             * @description The confidence score of the language detection.
+             */
+            language_probability?: number;
+            /** @description The raw text of the transcription. */
+            text?: string;
+            /** @description List of words with their timing information. */
+            words?: components["schemas"]["ElevenLabsSTTWord"][];
+            /** @description The channel index this transcript belongs to. */
+            channel_index?: number | null;
+            /** @description Requested additional formats. */
+            additional_formats?: components["schemas"]["ElevenLabsSTTAdditionalFormat"][] | null;
+            /** @description List of detected entities. */
+            entities?: components["schemas"]["ElevenLabsSTTDetectedEntity"][] | null;
+        };
+        /** @description Request body for ElevenLabs Speech-to-Speech (Voice Changer) */
+        ElevenLabsSpeechToSpeechRequest: {
+            /**
+             * Format: binary
+             * @description The audio file which holds the content and emotion that will control the generated speech.
+             */
+            audio: string;
+            /**
+             * @description Identifier of the model that will be used. Query GET /v1/models to list available models.
+             *     The model needs to have support for speech to speech (can_do_voice_conversion property).
+             * @default eleven_english_sts_v2
+             */
+            model_id: string;
+            /**
+             * @description Voice settings overriding stored settings for the given voice.
+             *     They are applied only on the given request. Needs to be sent as a JSON encoded string.
+             */
+            voice_settings?: string | null;
+            /**
+             * @description If specified, our system will make a best effort to sample deterministically.
+             *     Repeated requests with the same seed and parameters should return the same result.
+             *     Must be integer between 0 and 4294967295.
+             */
+            seed?: number | null;
+            /**
+             * @description If set, will remove the background noise from your audio input using our audio isolation model.
+             *     Only applies to Voice Changer.
+             * @default false
+             */
+            remove_background_noise: boolean;
+            /**
+             * @description The format of input audio. Options are 'pcm_s16le_16' or 'other'.
+             *     For pcm_s16le_16, the input audio must be 16-bit PCM at a 16kHz sample rate, single channel (mono).
+             * @default other
+             * @enum {string|null}
+             */
+            file_format: "pcm_s16le_16" | "other" | null;
+        };
+        /** @description Request body for ElevenLabs Text-to-Dialogue (multi-voice TTS) */
+        ElevenLabsTextToDialogueRequest: {
+            /**
+             * @description A list of dialogue inputs, each containing text and a voice ID which will be converted into speech.
+             *     The maximum number of unique voice IDs is 10.
+             */
+            inputs: components["schemas"]["ElevenLabsDialogueInput"][];
+            /**
+             * @description Identifier of the model that will be used. Query GET /v1/models to list available models.
+             *     The model needs to have support for text to speech (can_do_text_to_speech property).
+             * @default eleven_v3
+             */
+            model_id: string;
+            /**
+             * @description Language code (ISO 639-1) used to enforce a language for the model and text normalization.
+             *     If the model does not support provided language code, an error will be returned.
+             */
+            language_code?: string | null;
+            settings?: components["schemas"]["ElevenLabsDialogueSettings"];
+            /**
+             * @description A list of pronunciation dictionary locators (id, version_id) to be applied to the text.
+             *     They will be applied in order. You may have up to 3 locators per request.
+             */
+            pronunciation_dictionary_locators?: components["schemas"]["ElevenLabsPronunciationDictionaryLocator"][] | null;
+            /**
+             * @description If specified, our system will make a best effort to sample deterministically.
+             *     Repeated requests with the same seed and parameters should return the same result.
+             *     Must be integer between 0 and 4294967295.
+             */
+            seed?: number | null;
+            /**
+             * @description Controls text normalization with three modes:
+             *     'auto' - system automatically decides whether to apply text normalization
+             *     'on' - text normalization will always be applied
+             *     'off' - text normalization will be skipped
+             * @default auto
+             * @enum {string}
+             */
+            apply_text_normalization: "auto" | "on" | "off";
+        };
+        /** @description A single dialogue input containing text and voice ID */
+        ElevenLabsDialogueInput: {
+            /** @description The text to be converted into speech. */
+            text: string;
+            /** @description The ID of the voice to be used for the generation. */
+            voice_id: string;
+        };
+        /** @description Settings controlling the dialogue generation */
+        ElevenLabsDialogueSettings: {
+            /**
+             * Format: double
+             * @description Determines how stable the voice is and the randomness between each generation.
+             *     Lower values introduce broader emotional range for the voice.
+             *     Higher values can result in a monotonous voice with limited emotion.
+             * @default 0.5
+             */
+            stability: number | null;
+        } | null;
+        /** @description Request body for audio isolation (removing background noise) */
+        ElevenLabsAudioIsolationRequest: {
+            /**
+             * Format: binary
+             * @description The audio file from which vocals/speech will be isolated.
+             */
+            audio: string;
+            /**
+             * @description The format of input audio. Options are 'pcm_s16le_16' or 'other'.
+             *     For pcm_s16le_16, the input audio must be 16-bit PCM at a 16kHz sample rate, single channel (mono).
+             *     Latency will be lower than with passing an encoded waveform.
+             * @default other
+             * @enum {string|null}
+             */
+            file_format: "pcm_s16le_16" | "other" | null;
+            /** @description Optional preview image base64 for tracking this generation. */
+            preview_b64?: string | null;
+        };
+        /** @description Request body for creating an instant voice clone */
+        ElevenLabsCreateVoiceRequest: {
+            /** @description The name that identifies this voice. */
+            name: string;
+            /** @description Audio recordings for voice cloning. */
+            files: string[];
+            /**
+             * @description If set, removes background noise from voice samples using audio isolation.
+             * @default false
+             */
+            remove_background_noise: boolean;
+            /** @description A description of the voice. */
+            description?: string | null;
+            /** @description JSON string of labels for the voice (language, accent, gender, age). */
+            labels?: string | null;
+        };
+        /** @description Request body for generating sound effects from text */
+        ElevenLabsSoundGenerationRequest: {
+            /** @description The text that will get converted into a sound effect. */
+            text: string;
+            /**
+             * @description Whether to create a sound effect that loops smoothly.
+             *     Only available for the 'eleven_text_to_sound_v2' model.
+             * @default false
+             */
+            loop: boolean;
+            /**
+             * Format: double
+             * @description The duration of the sound which will be generated in seconds.
+             *     Must be at least 0.5 and at most 30. If set to null, the optimal
+             *     duration will be guessed using the prompt. Defaults to null.
+             */
+            duration_seconds?: number | null;
+            /**
+             * Format: double
+             * @description A higher prompt influence makes your generation follow the prompt
+             *     more closely while also making generations less variable.
+             *     Must be a value between 0 and 1. Defaults to 0.3.
+             */
+            prompt_influence?: number;
+            /**
+             * @description The model ID to use for the sound generation.
+             * @default eleven_text_to_sound_v2
+             */
+            model_id: string;
+        };
+        ElevenLabsSharedVoice: {
+            public_owner_id: string;
+            voice_id: string;
+            date_unix: number;
+            name: string;
+            accent: string;
+            gender: string;
+            age: string;
+            descriptive: string;
+            use_case: string;
+            /** @enum {string} */
+            category: "generated" | "cloned" | "premade" | "professional" | "famous" | "high_quality";
+            language?: string | null;
+            locale?: string | null;
+            description?: string | null;
+            preview_url?: string | null;
+            usage_character_count_1y: number;
+            usage_character_count_7d: number;
+            play_api_usage_character_count_1y: number;
+            cloned_by_count: number;
+            /** Format: double */
+            rate?: number | null;
+            /**
+             * Format: double
+             * @description The rate of the voice in USD per 1000 credits. null if default.
+             */
+            fiat_rate?: number | null;
+            free_users_allowed: boolean;
+            live_moderation_enabled: boolean;
+            featured: boolean;
+            /** @description The verified languages of the voice. */
+            verified_languages?: components["schemas"]["ElevenLabsVerifiedVoiceLanguage"][] | null;
+            notice_period?: number | null;
+            instagram_username?: string | null;
+            twitter_username?: string | null;
+            youtube_username?: string | null;
+            tiktok_username?: string | null;
+            image_url?: string | null;
+            is_added_by_user?: boolean | null;
+            is_bookmarked?: boolean | null;
+        };
+        ElevenLabsVerifiedVoiceLanguage: {
+            /** @description The language of the voice. */
+            language: string;
+            /** @description The voice's model ID. */
+            model_id: string;
+            /** @description The voice's accent, if applicable. */
+            accent?: string | null;
+            /** @description The voice's locale, if applicable. */
+            locale?: string | null;
+            /** @description The voice's preview URL, if applicable. */
+            preview_url?: string | null;
+        };
+        /**
+         * @description Paginated response shape returned by the shared-voices proxy to match the
+         *     frontend's `RichComboWidget` progressive-fetch contract.
+         */
+        ElevenLabsSharedVoicesPaginatedResponse: {
+            /** @description The list of shared voices on this page. */
+            items: components["schemas"]["ElevenLabsSharedVoice"][];
+            /** @description Whether there are more shared voices in subsequent pages. */
+            has_more: boolean;
+        };
+        /** @description A voice from the authenticated account's voice library (e.g. a premade voice). */
+        ElevenLabsVoice: {
+            voice_id: string;
+            name: string;
+            /** @description Voice category (e.g. "premade", "cloned", "generated", "professional"). */
+            category: string;
+            description?: string | null;
+            preview_url?: string | null;
+            /** @description Free-form string labels attached to the voice (e.g. accent, gender, age, use_case). */
+            labels?: {
+                [key: string]: string;
+            } | null;
+            /** @description The verified languages of the voice. */
+            verified_languages?: components["schemas"]["ElevenLabsVerifiedVoiceLanguage"][] | null;
+        };
+        /**
+         * @description Paginated response shape returned by the premade-voices proxy.
+         *     Mirrors ElevenLabs `/v2/voices`, renaming `voices` to `items` to
+         *     match the frontend's `RichComboWidget` progressive-fetch contract.
+         */
+        ElevenLabsVoicesPaginatedResponse: {
+            /** @description The list of premade voices on this page. */
+            items: components["schemas"]["ElevenLabsVoice"][];
+            /** @description Whether there are more voices in subsequent pages. */
+            has_more: boolean;
+            /** @description Cursor to pass to the next request to fetch the next page. */
+            next_page_token?: string | null;
+        };
+        KlingPresetsElementsResponse: {
+            code?: number;
+            message?: string;
+            request_id?: string;
+            data?: components["schemas"]["KlingPresetsElementTask"][];
+        };
+        KlingPresetsElementTask: {
+            task_id?: string;
+            /** @enum {string} */
+            task_status?: "submitted" | "processing" | "succeed" | "failed";
+            task_status_msg?: string;
+            task_info?: {
+                external_task_id?: string;
+            };
+            task_result?: {
+                elements?: components["schemas"]["KlingPresetsElement"][];
+            };
+            final_unit_deduction?: string;
+            /** @description Task creation time, Unix timestamp in ms */
+            created_at?: number;
+            /** @description Task update time, Unix timestamp in ms */
+            updated_at?: number;
+        };
+        KlingPresetsElement: {
+            /** Format: int64 */
+            element_id?: number;
+            element_name?: string;
+            element_description?: string;
+            reference_type?: string;
+            element_image_list?: {
+                frontal_image?: string;
+                refer_images?: {
+                    image_url?: string;
+                }[];
+            };
+            element_video_list?: {
+                refer_videos?: {
+                    video_url?: string;
+                }[];
+            };
+            element_voice_info?: {
+                voice_id?: string;
+                voice_name?: string;
+                trial_url?: string;
+                owned_by?: string;
+            };
+            tag_list?: {
+                id?: string;
+                name?: string;
+                description?: string;
+            }[];
+            owned_by?: string;
+        };
         KlingErrorResponse: {
             /**
              * @description - 1000: Authentication failed
@@ -8427,11 +12034,19 @@ export interface components {
             generationConfig?: components["schemas"]["GeminiGenerationConfig"];
             systemInstruction?: components["schemas"]["GeminiSystemInstructionContent"];
             videoMetadata?: components["schemas"]["GeminiVideoMetadata"];
+            /** @description If true, generated images will be uploaded to cloud storage and returned as signed URLs instead of inline base64 data. The URLs expire after 24 hours. */
+            uploadImagesToStorage?: boolean;
         };
         GeminiGenerateContentResponse: {
             candidates?: components["schemas"]["GeminiCandidate"][];
             promptFeedback?: components["schemas"]["GeminiPromptFeedback"];
             usageMetadata?: components["schemas"]["GeminiUsageMetadata"];
+            /** @description The model version used to generate the response. */
+            modelVersion?: string;
+            /** @description Timestamp when the response was created. */
+            createTime?: string;
+            /** @description Unique identifier for the response. */
+            responseId?: string;
         };
         GeminiUsageMetadata: {
             /** @description Number of tokens in the request. When cachedContent is set, this is still the total effective prompt size meaning this includes the number of tokens in the cached content. */
@@ -8448,6 +12063,10 @@ export interface components {
             promptTokensDetails?: components["schemas"]["ModalityTokenCount"][];
             /** @description Breakdown of candidate tokens by modality. */
             candidatesTokensDetails?: components["schemas"]["ModalityTokenCount"][];
+            /** @description Total number of tokens (prompt + candidates). */
+            totalTokenCount?: number;
+            /** @description Traffic type used for the request (e.g., PROVISIONED_THROUGHPUT). */
+            trafficType?: string;
         };
         ModalityTokenCount: {
             modality?: components["schemas"]["Modality"];
@@ -8527,11 +12146,30 @@ export interface components {
             responseModalities?: ("TEXT" | "IMAGE")[];
             /** @description Configuration for image generation */
             imageConfig?: {
+                /** @description Optional. The image output format for generated images. */
+                imageOutputOptions?: {
+                    /** @description Optional. The image format that the output should be saved as. */
+                    mimeType?: string;
+                    /** @description Optional. The compression quality of the output image. */
+                    compressionQuality?: number;
+                };
                 /** @description Aspect ratio for generated images */
                 aspectRatio?: string;
                 /** @description Optional. Specifies the size of generated images. Supported values are 1K, 2K, 4K. If not specified, the model will use default value 1K. */
                 imageSize?: string;
             };
+            /** @description Optional. Configuration for thinking features. Thinking is a process where the model breaks down a complex task into smaller steps to generate a higher-quality response. */
+            thinkingConfig?: {
+                /** @description Optional. If true, the model will include its thoughts in the response. */
+                includeThoughts?: boolean;
+                /** @description Optional. The token budget for the model's thinking process. The model will make a best effort to stay within this budget. */
+                thinkingBudget?: number;
+                /**
+                 * @description Optional. The thinking level for the model.
+                 * @enum {string}
+                 */
+                thinkingLevel?: "THINKING_LEVEL_UNSPECIFIED" | "LOW" | "MEDIUM" | "HIGH" | "MINIMAL";
+            };
         };
         /** @description For video input, the start and end offset of the video in Duration format. For example, to specify a 10 second clip starting at 1:00, set "startOffset": { "seconds": 60 } and "endOffset": { "seconds": 70 }. The metadata should only be specified while the video data is presented in inlineData or fileData. */
         GeminiVideoMetadata: {
@@ -8582,6 +12220,8 @@ export interface components {
             text?: string;
             inlineData?: components["schemas"]["GeminiInlineData"];
             fileData?: components["schemas"]["GeminiFileData"];
+            /** @description Indicates this part is a thinking/reasoning step from the model. */
+            thought?: boolean;
         };
         GeminiFunctionDeclaration: {
             name: string;
@@ -10206,60 +13846,191 @@ export interface components {
             resolution?: string;
             /** @enum {string} */
             movement_amplitude?: "auto" | "small" | "medium" | "large";
+            /** @description Whether background music was added */
+            bgm?: boolean;
+            /** @description Transparent transmission parameters */
+            payload?: string;
+            /** @description Off peak mode status */
+            off_peak?: boolean;
+            /** @description Whether watermark was added */
+            watermark?: boolean;
             /** Format: date-time */
             created_at?: string;
             /** Format: int32 */
             credits: number;
         };
         ViduTaskRequest: {
+            /** @description Model name: viduq3-pro, viduq2-pro-fast, viduq2-pro, viduq2-turbo, viduq1, viduq1-classic, vidu2.0 */
             model?: string;
             /** @enum {string} */
             style?: "general" | "anime";
+            /** @description Text prompt for video generation (max 2000 characters) */
             prompt?: string;
+            /** @description Images for img2video (accepts 1 image as start frame) */
             images?: string[];
-            /** Format: int32 */
+            /** @description Enable direct audio-video generation capability (default true for q3 model) */
+            audio?: boolean;
+            /**
+             * @description Audio type when audio is true: all (sound effects + vocals), speech_only, sound_effect_only. Ineffective for q3 model
+             * @enum {string}
+             */
+            audio_type?: "all" | "speech_only" | "sound_effect_only";
+            /** @description Voice ID for audio (ineffective for q3 model) */
+            voice_id?: string;
+            /** @description Use recommended prompt (consumes additional 10 credits) */
+            is_rec?: boolean;
+            /** @description Add background music to generated video (ineffective for q3 model) */
+            bgm?: boolean;
+            /**
+             * Format: int32
+             * @description Video duration in seconds. viduq3-pro: 1-16, viduq2-pro-fast: 1-10, viduq2-pro/turbo: 1-8
+             */
             duration?: number;
-            /** Format: int32 */
+            /**
+             * Format: int32
+             * @description Random seed (defaults to random if not specified)
+             */
             seed?: number;
             aspect_ratio?: string;
+            /** @description Resolution: 360p, 540p, 720p, 1080p, 2K (availability depends on model and duration) */
             resolution?: string;
-            /** @enum {string} */
+            /**
+             * @description Movement amplitude of objects in frame (ineffective for q2, q3 models)
+             * @enum {string}
+             */
             movement_amplitude?: "auto" | "small" | "medium" | "large";
+            /** @description Transparent transmission parameters (max 1048576 characters) */
+            payload?: string;
+            /** @description Off peak mode (lower cost, tasks generated within 48 hours) */
+            off_peak?: boolean;
+            /** @description Add watermark to video (default false) */
+            watermark?: boolean;
+            /**
+             * Format: int32
+             * @description Watermark position: 1 (top left), 2 (top right), 3 (bottom right, default), 4 (bottom left)
+             */
+            wm_position?: number;
+            /** @description Watermark image URL (uses default watermark if not provided) */
+            wm_url?: string;
+            /** @description Metadata identification, JSON format string for custom metadata */
+            meta_data?: string;
             enhance?: boolean;
+            /** @description Callback URL for task status updates */
             callback_url?: string;
             /** Format: int32 */
             priority?: number;
         };
+        ViduExtendRequest: {
+            /** @description Model name (viduq2-pro or viduq2-turbo) */
+            model: string;
+            /** @description Vidu video_creation_id, required with video_url */
+            video_creation_id?: string;
+            /** @description Any video URL, required with video_creation_id */
+            video_url?: string;
+            /** @description Extended reference image to the end frame (only accepts 1 image) */
+            images?: string[];
+            /** @description Text prompt for video generation (max 2000 characters) */
+            prompt?: string;
+            /**
+             * Format: int32
+             * @description Extended duration in seconds (1-7, default 5)
+             */
+            duration?: number;
+            /** @description Resolution (540p, 720p, 1080p) */
+            resolution?: string;
+            /** @description Transparent transmission parameters (max 1048576 characters) */
+            payload?: string;
+            /** @description Callback URL for task status updates */
+            callback_url?: string;
+        };
+        ViduExtendReply: {
+            task_id: string;
+            state: components["schemas"]["ViduState"];
+            model?: string;
+            video_creation_id?: string;
+            video_url?: string;
+            images?: string[];
+            prompt?: string;
+            /** Format: int32 */
+            duration?: number;
+            resolution?: string;
+            payload?: string;
+            /** Format: int32 */
+            credits: number;
+            /** Format: date-time */
+            created_at?: string;
+        };
+        ViduImageSetting: {
+            /** @description Prompt for extending the previous frame */
+            prompt?: string;
+            /** @description Reference image for each key frame */
+            key_image: string;
+            /**
+             * Format: int32
+             * @description Duration between key frames in seconds (2-7, default 5)
+             */
+            duration?: number;
+        };
+        ViduMultiframeRequest: {
+            /** @description Model name (viduq2-pro or viduq2-turbo) */
+            model: string;
+            /** @description The first frame image (Base64 or URL) */
+            start_image: string;
+            /** @description Configuration for intelligent multi-frame generation (2-9 frames) */
+            image_settings: components["schemas"]["ViduImageSetting"][];
+            /** @description Video resolution (540p, 720p, 1080p) */
+            resolution?: string;
+            /** @description Transparent transmission parameters (max 1048576 characters) */
+            payload?: string;
+            /** @description Callback URL for task status updates */
+            callback_url?: string;
+        };
+        ViduMultiframeReply: {
+            task_id: string;
+            state: components["schemas"]["ViduState"];
+            model?: string;
+            start_image?: string;
+            image_settings?: components["schemas"]["ViduImageSetting"][];
+            resolution?: string;
+            payload?: string;
+            /** Format: int32 */
+            credits: number;
+            /** Format: date-time */
+            created_at?: string;
+        };
         BytePlusImageGenerationRequest: {
             /** @enum {string} */
-            model: "seedream-3-0-t2i-250415" | "seededit-3-0-i2i-250628" | "seedream-4-0-250828" | "seedream-4-5-251128";
+            model: "seedream-3-0-t2i-250415" | "seededit-3-0-i2i-250628" | "seedream-4-0-250828" | "seedream-4-5-251128" | "seedream-5-0-260128";
             /** @description Text description for image generation or transformation */
             prompt: string;
             /**
-             * @description Only seedream-4.0 and seededit-3.0-i2i support this parameter.
+             * @description Seedream-5.0-lite, 4.5 and 4.0, and seededit-3.0-i2i support this parameter.
              *
-             *     Enter the Base64 encoding or an accessible URL of the image to edit. Among the models, bytedance-seedream-4.0 supports inputting a single image or multiple images (see the multi-image blending example), while bytedance-seededit-3.0-i2 only supports single-image input.
+             *     Enter the Base64 encoding or an accessible URL of the image to edit. Seedream-5.0-lite, 4.5 and 4.0 support inputting a single image or multiple images (see the multi-image blending example), while seededit-3.0-i2i only supports single-image input.
              *
              *     • Image URL: Make sure that the image URL is accessible.
              *     • Base64 encoding: The format must be data:image/<image format>;base64,<Base64 encoding>. Note: <image format> must be in lowercase, e.g., data:image/png;base64,<base64_image>.
              *
              *     An input image must meet the following requirements:
-             *     • Image format: jpeg, png
-             *     • Aspect ratio (width/height): In the range [1/3, 3]
+             *     • Image format: jpeg, png (seedream-5.0-lite, 4.5 and 4.0 also support webp, bmp, tiff and gif)
+             *     • Aspect ratio (width/height): In the range [1/16, 16] for seedream-5.0-lite, 4.5 and 4.0; [1/3, 3] for seededit-3.0-i2i
              *     • Width and height (px): > 14
              *     • Size: No more than 10 MB
+             *     • Maximum of 14 reference images
              */
             image?: string | string[];
             /**
              * @description "seedream-3-0-t2i-250415": Specifies the dimensions (width x height in pixels) of the generated image. Must be between [512x512, 2048x2048]
              *     "seededit-3-0-i2i-250628": The width and height pixels of the generated image. Currently only supports adaptive.
              *     "seedream-4-0-250828": Set the specification for the generated image. Two methods are available but cannot be used together.
-             *       Method 1 | Example: Specify the resolution of the generated image, and describe its aspect ratio, shape, or purpose in the prompt using natural language, let the model ultimately determine the final image width and height.
-             *         Optional values: 1K, 2K, 4K
-             *       Method 2 | Example: Specify the width and height of the generated image in pixels:
-             *         Default value: 2048x2048
-             *         The value range of total pixels: [1024x1024, 4096x4096]
-             *         The aspect ratio value range: [1/16, 16]
+             *       Method 1 | Specify the resolution. Optional values: 1K, 2K, 4K
+             *       Method 2 | Specify width and height in pixels. Default: 2048x2048, total pixels: [1024x1024, 4096x4096], aspect ratio: [1/16, 16]
+             *     "seedream-4-5-251128": Two methods available.
+             *       Method 1 | Specify the resolution. Optional values: 2K, 4K
+             *       Method 2 | Specify width and height in pixels. Default: 2048x2048, total pixels: [2560x1440, 4096x4096], aspect ratio: [1/16, 16]
+             *     "seedream-5-0-260128": Two methods available.
+             *       Method 1 | Specify the resolution. Optional values: 2K, 3K
+             *       Method 2 | Specify width and height in pixels. Default: 2048x2048, total pixels: [2560x1440, ~3072x3072], aspect ratio: [1/16, 16]
              */
             size?: string;
             /**
@@ -10274,13 +14045,13 @@ export interface components {
              */
             seed: number;
             /**
-             * @description Controls whether to disable the batch generation feature. This parameter is only supported on seedream-4.0. Valid values:
+             * @description Controls whether to disable the batch generation feature. This parameter is only supported on seedream-5.0-lite, 4.5 and 4.0. Valid values:
              *     auto: In automatic mode, the model automatically determines whether to return multiple images and how many images it will contain based on the user's prompt.
              *     disabled: Disables batch generation feature. The model will only generate one image.
              */
             sequential_image_generation?: string;
             /**
-             * @description Only seedream-4.0 supports this parameter.
+             * @description Only seedream-5.0-lite, 4.5 and 4.0 support this parameter.
              *     Configuration for the batch image generation feature. This parameter is only effective when sequential_image_generation is set to auto.
              */
             sequential_image_generation_options?: {
@@ -10292,7 +14063,7 @@ export interface components {
             };
             /**
              * Format: float
-             * @description Controls how closely the output image aligns with the input prompt. Range [1, 10]. Higher values result in stronger prompt adherence. Default 2.5 for seedream-3-0-t2i-250415 and 5.5 for seededit-3-0-i2i-250628
+             * @description Controls how closely the output image aligns with the input prompt. Range [1, 10]. Higher values result in stronger prompt adherence. Default 2.5 for seedream-3-0-t2i-250415 and 5.5 for seededit-3-0-i2i-250628. Not supported by seedream-5.0-lite, 4.5 and 4.0.
              */
             guidance_scale?: number;
             /**
@@ -10300,6 +14071,26 @@ export interface components {
              * @default true
              */
             watermark: boolean;
+            /**
+             * @description Specifies the format of the output image. Only seedream-5.0-lite supports this parameter.
+             * @default jpeg
+             * @enum {string}
+             */
+            output_format: "png" | "jpeg";
+            /**
+             * @description Whether to enable streaming output mode. Only seedream-5.0-lite, 4.5 and 4.0 support this parameter. false = All output images are returned at once. true = Each output image is returned immediately after generated.
+             * @default false
+             */
+            stream: boolean;
+            /** @description Configuration for prompt optimization feature. Only seedream-5.0-lite/4.5 (only supports standard mode) and seedream-4.0 support this parameter. */
+            optimize_prompt_options?: {
+                /**
+                 * @description Set the mode for the prompt optimization feature. standard = Higher quality, longer generation time. fast = Faster but at a more average quality.
+                 * @default standard
+                 * @enum {string}
+                 */
+                mode: "standard" | "fast";
+            };
         };
         BytePlusImageGenerationResponse: {
             /**
@@ -10318,6 +14109,8 @@ export interface components {
                 url?: string;
                 /** @description Base64-encoded image data (if response_format is "b64_json") */
                 b64_json?: string;
+                /** @description The width and height of the image in pixels, in the format <width>x<height>. Only seedream-5.0-lite, 4.5 and 4.0 support this parameter. */
+                size?: string;
             }[];
             usage?: {
                 /** @description Number of images generated by the model */
@@ -10337,10 +14130,10 @@ export interface components {
         };
         BytePlusVideoGenerationRequest: {
             /**
-             * @description The ID of the model to call. Available models include seedance-1-0-pro-250528, seedance-1-0-pro-fast-251015, seedance-1-0-lite-t2v-250428, seedance-1-0-lite-i2v-250428
+             * @description The ID of the model to call. Available models include seedance-1-5-pro-251215, seedance-1-0-pro-250528, seedance-1-0-pro-fast-251015, seedance-1-0-lite-t2v-250428, seedance-1-0-lite-i2v-250428
              * @enum {string}
              */
-            model: "seedance-1-0-pro-250528" | "seedance-1-0-lite-t2v-250428" | "seedance-1-0-lite-i2v-250428" | "seedance-1-0-pro-fast-251015";
+            model: "seedance-1-5-pro-251215" | "seedance-1-0-pro-250528" | "seedance-1-0-lite-t2v-250428" | "seedance-1-0-lite-i2v-250428" | "seedance-1-0-pro-fast-251015" | "dreamina-seedance-2-0-260128" | "dreamina-seedance-2-0-fast-260128";
             /** @description The input content for the model to generate a video */
             content: components["schemas"]["BytePlusVideoGenerationContent"][];
             /**
@@ -10348,13 +14141,54 @@ export interface components {
              * @description Callback notification address for the result of this generation task
              */
             callback_url?: string;
+            /**
+             * @description Whether to return the last frame image of the generated video.
+             *     true: Returns the last frame image of the generated video. After setting this parameter to true, you can obtain the last frame image by calling the Querying the information about a video generation task. The last frame image is in PNG format, with its pixel width and height consistent with those of the generated video, and it contains no watermarks. Using this parameter allows the generation of multiple consecutive videos: the last frame of the previously generated video is used as the first frame of the next video task, enabling quick generation of multiple consecutive videos.
+             *     false: Does not return the last frame image of the generated video.
+             * @default false
+             */
+            return_last_frame: boolean;
+            /**
+             * @description Supported by Seedance 2.0, 2.0 fast, and 1.5 pro. Whether the generated video includes audio synchronized with the visuals.
+             *     true: The model outputs a video with synchronized audio.
+             *     false: The model outputs a silent video.
+             * @default true
+             */
+            generate_audio: boolean;
+            /**
+             * @description Video resolution. Seedance 2.0 & 2.0 fast, 1.5 pro, 1.0 lite default: 720p. Seedance 1.0 pro & pro-fast default: 1080p.
+             *     Note: Seedance 2.0 & 2.0 fast do not support 1080p.
+             * @enum {string}
+             */
+            resolution?: "480p" | "720p" | "1080p";
+            /**
+             * @description Aspect ratio of the generated video. Seedance 2.0 & 2.0 fast, 1.5 pro default: adaptive.
+             * @enum {string}
+             */
+            ratio?: "16:9" | "4:3" | "1:1" | "3:4" | "9:16" | "21:9" | "adaptive";
+            /** @description Video duration in seconds. Seedance 2.0 & 2.0 fast: [4,15] or -1 (auto). Seedance 1.5 pro: [4,12] or -1. Seedance 1.0: [2,12]. */
+            duration?: number;
+            /** @description Seed integer for controlling randomness. Range: [-1, 2^32-1]. -1 uses a random seed. */
+            seed?: number;
+            /**
+             * @description Whether the generated video includes a watermark.
+             * @default false
+             */
+            watermark: boolean;
+            /**
+             * @description Service tier for processing. Seedance 2.0 & 2.0 fast do not support flex (offline inference).
+             * @enum {string}
+             */
+            service_tier?: "default" | "flex";
+            /** @description Task timeout threshold in seconds. Default 172800 (48h). Range: [3600, 259200]. */
+            execution_expires_after?: number;
         };
         BytePlusVideoGenerationContent: {
             /**
              * @description The type of the input content
              * @enum {string}
              */
-            type: "text" | "image_url";
+            type: "text" | "image_url" | "video_url" | "audio_url";
             /**
              * @description The input text information for the model. Includes text prompt and optional parameters.
              *
@@ -10374,12 +14208,40 @@ export interface components {
             text?: string;
             image_url?: {
                 /**
-                 * @description Image content for image-to-video generation (when type is "image")
+                 * @description Image content for image-to-video generation (when type is "image_url")
                  *     Image URL: Make sure that the image URL is accessible.
                  *     Base64-encoded content: Format must be data:image/<format>;base64,<content>
+                 *     Asset ID: Format asset://<ASSET_ID>
                  */
                 url?: string;
             };
+            /** @description Input video object. Only Seedance 2.0 & 2.0 fast support video input. */
+            video_url?: {
+                /**
+                 * @description Video URL or Asset ID.
+                 *     Video URL: Public URL of the video (mp4, mov).
+                 *     Asset ID: Format asset://<ASSET_ID>
+                 */
+                url?: string;
+            };
+            /** @description Input audio object. Only Seedance 2.0 & 2.0 fast support audio input. Cannot be used alone - must include at least 1 image or video. */
+            audio_url?: {
+                /**
+                 * @description Audio URL, Base64 encoding, or Asset ID.
+                 *     Audio URL: Public URL of the audio (wav, mp3).
+                 *     Base64: Format data:audio/<format>;base64,<content>
+                 *     Asset ID: Format asset://<ASSET_ID>
+                 */
+                url?: string;
+            };
+            /**
+             * @description The role/position of the content item.
+             *     For images: first_frame, last_frame, or reference_image.
+             *     For videos: reference_video (Seedance 2.0 & 2.0 fast only).
+             *     For audio: reference_audio (Seedance 2.0 & 2.0 fast only).
+             * @enum {string}
+             */
+            role?: "first_frame" | "last_frame" | "reference_image" | "reference_video" | "reference_audio";
         };
         BytePlusVideoGenerationResponse: {
             /** @description The ID of the video generation task */
@@ -10394,7 +14256,7 @@ export interface components {
              * @description The state of the task
              * @enum {string}
              */
-            status?: "queued" | "running" | "cancelled" | "succeeded" | "failed";
+            status?: "queued" | "running" | "cancelled" | "succeeded" | "failed" | "expired";
             /** @description The error information. If the task succeeds, null is returned. If the task fails, the error information is returned. */
             error?: {
                 /** @description The error code */
@@ -10424,7 +14286,7 @@ export interface components {
              * @description The ID of the model to call
              * @enum {string}
              */
-            model: "wan2.5-t2v-preview" | "wan2.5-i2v-preview" | "wan2.6-t2v" | "wan2.6-i2v";
+            model: "wan2.5-t2v-preview" | "wan2.5-i2v-preview" | "wan2.6-t2v" | "wan2.6-i2v" | "wan2.6-r2v" | "wan2.7-i2v" | "wan2.7-t2v" | "wan2.7-r2v" | "wan2.7-videoedit";
             /** @description Enter basic information, such as prompt words, etc. */
             input: {
                 /**
@@ -10432,7 +14294,7 @@ export interface components {
                  *     For wan2.6-r2v with multiple reference videos, use 'character1', 'character2', etc. to refer to subjects
                  *     in the order of reference videos. Example: "Character1 sings on the roadside, Character2 dances beside it"
                  */
-                prompt: string;
+                prompt?: string;
                 /** @description Reverse prompt words are used to describe content that you do not want to see in the video screen */
                 negative_prompt?: string;
                 /** @description Audio file download URL. Supported formats: mp3 and wav. Cannot be used with reference_video_urls. */
@@ -10453,6 +14315,23 @@ export interface components {
                  *     Billing: Based on actual reference duration used.
                  */
                 reference_video_urls?: string[];
+                /**
+                 * @description Media asset list for wan2.7 models. Specifies reference materials (image, audio, video)
+                 *     for video generation. Each element contains a type and url field.
+                 *     Supported type values vary by model:
+                 *     - wan2.7-i2v: first_frame, last_frame, driving_audio, first_clip
+                 *     - wan2.7-r2v: reference_image, reference_video
+                 *     - wan2.7-videoedit: video, reference_image
+                 */
+                media?: {
+                    /**
+                     * @description Media asset type
+                     * @enum {string}
+                     */
+                    type: "first_frame" | "last_frame" | "driving_audio" | "first_clip" | "reference_image" | "reference_video" | "video";
+                    /** @description URL of the media file (public HTTP/HTTPS URL or OSS temporary URL) */
+                    url: string;
+                }[];
             };
             /** @description Video processing parameters */
             parameters?: {
@@ -10465,9 +14344,10 @@ export interface components {
                  */
                 size?: string;
                 /**
-                 * @description Resolution level for I2V models. Supported values vary by model:
+                 * @description Resolution level. Supported values vary by model:
                  *     - wan2.5-i2v-preview: 480P, 720P, 1080P
                  *     - wan2.6-i2v: 720P, 1080P only (no 480P support)
+                 *     - wan2.7 models (i2v, t2v, r2v, videoedit): 720P, 1080P (default 1080P)
                  * @enum {string}
                  */
                 resolution?: "480P" | "720P" | "1080P";
@@ -10476,10 +14356,11 @@ export interface components {
                  *     - wan2.5 models: 5 or 10 seconds
                  *     - wan2.6-t2v, wan2.6-i2v: 5, 10, or 15 seconds
                  *     - wan2.6-r2v: 5 or 10 seconds only (no 15s support)
+                 *     - wan2.7-i2v, wan2.7-t2v: integer in [2, 15]
+                 *     - wan2.7-r2v, wan2.7-videoedit: integer in [2, 10]
                  * @default 5
-                 * @enum {integer}
                  */
-                duration?: 5 | 10 | 15;
+                duration?: number;
                 /**
                  * @description Is it enabled prompt intelligent rewriting. Default is true
                  * @default true
@@ -10487,13 +14368,27 @@ export interface components {
                 prompt_extend?: boolean;
                 /**
                  * @description Intelligent multi-lens control. Only active when prompt_extend is enabled.
-                 *     For wan2.6 models only.
-                 *     - multi: Intelligent disassembly into multiple lenses (default)
-                 *     - single: Single lens generation
-                 * @default multi
+                 *     For wan2.6 and wan2.7-r2v models.
+                 *     - single: Single-shot video (default)
+                 *     - multi: Multi-shot video
+                 * @default single
                  * @enum {string}
                  */
                 shot_type?: "multi" | "single";
+                /**
+                 * @description Aspect ratio of the generated video. For wan2.7 models only.
+                 *     If not provided, defaults based on the resolution tier.
+                 * @enum {string}
+                 */
+                ratio?: "16:9" | "9:16" | "1:1" | "4:3" | "3:4";
+                /**
+                 * @description Video audio setting for wan2.7-videoedit model.
+                 *     - auto (default): Model intelligently judges based on prompt content
+                 *     - origin: Forcefully preserve the original audio from the input video
+                 * @default auto
+                 * @enum {string}
+                 */
+                audio_setting?: "auto" | "origin";
                 /** @description Random number seed, used to control the randomness of the model generated content */
                 seed?: number;
                 /**
@@ -11421,6 +15316,1410 @@ export interface components {
             message?: string;
             download?: components["schemas"]["TopazVideoEnhancedDownload"];
         };
+        MeshyTextTo3DRequest: components["schemas"]["MeshyTextTo3DPreviewRequest"] | components["schemas"]["MeshyTextTo3DRefineRequest"];
+        MeshyTextTo3DPreviewRequest: {
+            /**
+             * @description This field should be set to "preview" when creating a preview task. (enum property replaced by openapi-typescript)
+             * @enum {string}
+             */
+            mode: "preview";
+            /** @description Describe what kind of object the 3D model is. Maximum 600 characters. */
+            prompt: string;
+            art_style?: components["schemas"]["MeshyArtStyle"];
+            ai_model?: components["schemas"]["MeshyAiModel"];
+            topology?: components["schemas"]["MeshyTopology"];
+            /**
+             * @description Specify the target number of polygons in the generated model. Valid range is 100 to 300,000.
+             * @default 30000
+             */
+            target_polycount: number;
+            /**
+             * @description Controls whether to enable the remesh phase. When false, returns highest-precision triangular mesh.
+             * @default true
+             */
+            should_remesh: boolean;
+            symmetry_mode?: components["schemas"]["MeshySymmetryMode"];
+            pose_mode?: components["schemas"]["MeshyPoseMode"];
+            /**
+             * @description Deprecated. Use pose_mode instead. Whether to generate the model in an A/T pose.
+             * @default false
+             */
+            is_a_t_pose: boolean;
+            /**
+             * @description When true, input content will be screened for potentially harmful content.
+             * @default false
+             */
+            moderation: boolean;
+        };
+        MeshyTextTo3DRefineRequest: {
+            /**
+             * @description This field should be set to "refine" when creating a refine task. (enum property replaced by openapi-typescript)
+             * @enum {string}
+             */
+            mode: "refine";
+            /** @description The corresponding preview task id. The status of the given preview task must be SUCCEEDED. */
+            preview_task_id: string;
+            /**
+             * @description Generate PBR Maps (metallic, roughness, normal) in addition to the base color. Note that enable_pbr should be set to false when using Sculpture style.
+             * @default false
+             */
+            enable_pbr: boolean;
+            /** @description Provide an additional text prompt to guide the texturing process. Maximum 600 characters. */
+            texture_prompt?: string;
+            /** @description Provide a 2d image to guide the texturing process. Supports .jpg, .jpeg, .png formats or base64-encoded data URI. */
+            texture_image_url?: string;
+            ai_model?: components["schemas"]["MeshyAiModel"];
+            /**
+             * @description When true, input content will be screened for potentially harmful content.
+             * @default false
+             */
+            moderation: boolean;
+        };
+        /**
+         * @description Describe your desired art style of the object.
+         * @default realistic
+         * @enum {string}
+         */
+        MeshyArtStyle: "realistic" | "sculpture";
+        /**
+         * @description ID of the model to use.
+         * @default latest
+         * @enum {string}
+         */
+        MeshyAiModel: "meshy-5" | "latest";
+        /**
+         * @description Specify the topology of the generated model.
+         * @default triangle
+         * @enum {string}
+         */
+        MeshyTopology: "quad" | "triangle";
+        /**
+         * @description Controls symmetry behavior during model generation.
+         * @default auto
+         * @enum {string}
+         */
+        MeshySymmetryMode: "off" | "auto" | "on";
+        /**
+         * @description Specify the pose mode for the generated model.
+         * @enum {string}
+         */
+        MeshyPoseMode: "a-pose" | "t-pose" | "";
+        MeshyTextTo3DCreateResponse: {
+            /** @description The task id of the newly created Text to 3D task. */
+            result: string;
+        };
+        MeshyTextTo3DTask: {
+            /** @description Unique identifier for the task. */
+            id: string;
+            /**
+             * @description Type of the Text to 3D task.
+             * @enum {string}
+             */
+            type?: "text-to-3d-preview" | "text-to-3d-refine";
+            model_urls?: components["schemas"]["MeshyModelUrls"];
+            /** @description The unmodified prompt that was used to create the task. */
+            prompt?: string;
+            /** @description Deprecated field maintained for backward compatibility. */
+            negative_prompt?: string;
+            /** @description The unmodified art_style that was used to create the preview task. */
+            art_style?: string;
+            /** @description Deprecated field maintained for backward compatibility. */
+            texture_richness?: string;
+            /** @description Additional text prompt provided to guide the texturing process during the refine stage. */
+            texture_prompt?: string;
+            /** @description Downloadable URL to the texture image that was used to guide the texturing process. */
+            texture_image_url?: string;
+            /** @description Downloadable URL to the thumbnail image of the model file. */
+            thumbnail_url?: string;
+            /** @description Deprecated field returning the downloadable URL to the preview video. */
+            video_url?: string;
+            /** @description Progress of the task. 0 if not started, 100 when succeeded. */
+            progress?: number;
+            /** @description Timestamp of when the task was started, in milliseconds. 0 if not started. */
+            started_at?: number;
+            /** @description Timestamp of when the task was created, in milliseconds. */
+            created_at?: number;
+            /** @description Timestamp of when the task was finished, in milliseconds. 0 if not finished. */
+            finished_at?: number;
+            status: components["schemas"]["MeshyTaskStatus"];
+            /** @description An array of texture URL objects that are generated from the task. */
+            texture_urls?: components["schemas"]["MeshyTextureUrls"][];
+            /** @description The count of preceding tasks. Only meaningful when status is PENDING. */
+            preceding_tasks?: number;
+            task_error?: components["schemas"]["MeshyTaskError"];
+        };
+        /** @description Downloadable URLs to the textured 3D model files generated by Meshy. */
+        MeshyModelUrls: {
+            /** @description Downloadable URL to the GLB file. */
+            glb?: string;
+            /** @description Downloadable URL to the FBX file. */
+            fbx?: string;
+            /** @description Downloadable URL to the USDZ file. */
+            usdz?: string;
+            /** @description Downloadable URL to the OBJ file. */
+            obj?: string;
+            /** @description Downloadable URL to the MTL file. */
+            mtl?: string;
+        };
+        /**
+         * @description Status of the task.
+         * @enum {string}
+         */
+        MeshyTaskStatus: "PENDING" | "IN_PROGRESS" | "SUCCEEDED" | "FAILED" | "CANCELED";
+        /** @description Texture URL object containing PBR maps. */
+        MeshyTextureUrls: {
+            /** @description Downloadable URL to the base color map image. */
+            base_color?: string;
+            /** @description Downloadable URL to the metallic map image. */
+            metallic?: string;
+            /** @description Downloadable URL to the normal map image. */
+            normal?: string;
+            /** @description Downloadable URL to the roughness map image. */
+            roughness?: string;
+        };
+        /** @description Error object that contains the error message if the task failed. */
+        MeshyTaskError: {
+            /** @description Detailed error message. */
+            message?: string;
+        };
+        MeshyImageTo3DRequest: {
+            /** @description Provide an image for Meshy to use in model creation. Supports .jpg, .jpeg, .png formats or base64-encoded data URI. */
+            image_url: string;
+            /**
+             * @description Specify the type of 3D mesh generation.
+             *     - standard: Regular high-detail 3D mesh generation.
+             *     - lowpoly: Generates low-poly mesh optimized for cleaner polygons.
+             *     When lowpoly is selected, ai_model, topology, target_polycount, should_remesh, save_pre_remeshed_model are ignored.
+             * @default standard
+             * @enum {string}
+             */
+            model_type: "standard" | "lowpoly";
+            ai_model?: components["schemas"]["MeshyAiModel"];
+            topology?: components["schemas"]["MeshyTopology"];
+            /**
+             * @description Specify the target number of polygons in the generated model. Valid range is 100 to 300,000.
+             * @default 30000
+             */
+            target_polycount: number;
+            symmetry_mode?: components["schemas"]["MeshySymmetryMode"];
+            /**
+             * @description Controls whether to enable the remesh phase. When false, returns highest-precision triangular mesh.
+             * @default true
+             */
+            should_remesh: boolean;
+            /**
+             * @description When true, stores an extra GLB file before the remesh phase completes. Only takes effect when should_remesh is true.
+             * @default false
+             */
+            save_pre_remeshed_model: boolean;
+            /**
+             * @description Determines if textures are generated. When false, provides a mesh without textures.
+             * @default true
+             */
+            should_texture: boolean;
+            /**
+             * @description Generate PBR Maps (metallic, roughness, normal) in addition to the base color.
+             * @default false
+             */
+            enable_pbr: boolean;
+            pose_mode?: components["schemas"]["MeshyPoseMode"];
+            /**
+             * @description Deprecated. Use pose_mode instead. Whether to generate the model in an A/T pose.
+             * @default false
+             */
+            is_a_t_pose: boolean;
+            /** @description Provide a text prompt to guide the texturing process. Maximum 600 characters. */
+            texture_prompt?: string;
+            /** @description Provide a 2d image to guide the texturing process. Supports .jpg, .jpeg, .png formats or base64-encoded data URI. */
+            texture_image_url?: string;
+            /**
+             * @description When true, input content will be screened for potentially harmful content.
+             * @default false
+             */
+            moderation: boolean;
+        };
+        MeshyImageTo3DCreateResponse: {
+            /** @description The task id of the newly created Image to 3D task. */
+            result: string;
+        };
+        MeshyImageTo3DTask: {
+            /** @description Unique identifier for the task. */
+            id: string;
+            /**
+             * @description Type of the Image to 3D task.
+             * @enum {string}
+             */
+            type?: "image-to-3d";
+            model_urls?: components["schemas"]["MeshyImageTo3DModelUrls"];
+            /** @description Downloadable URL to the thumbnail image of the model file. */
+            thumbnail_url?: string;
+            /** @description The text prompt that was used to guide the texturing process. */
+            texture_prompt?: string;
+            /** @description Downloadable URL to the texture image that was used to guide the texturing process. */
+            texture_image_url?: string;
+            /** @description Progress of the task. 0 if not started, 100 when succeeded. */
+            progress?: number;
+            /** @description Timestamp of when the task was started, in milliseconds. 0 if not started. */
+            started_at?: number;
+            /** @description Timestamp of when the task was created, in milliseconds. */
+            created_at?: number;
+            /** @description Timestamp of when the task result expires, in milliseconds. */
+            expires_at?: number;
+            /** @description Timestamp of when the task was finished, in milliseconds. 0 if not finished. */
+            finished_at?: number;
+            status: components["schemas"]["MeshyTaskStatus"];
+            /** @description An array of texture URL objects that are generated from the task. */
+            texture_urls?: components["schemas"]["MeshyTextureUrls"][];
+            /** @description The count of preceding tasks. Only meaningful when status is PENDING. */
+            preceding_tasks?: number;
+            task_error?: components["schemas"]["MeshyTaskError"];
+        };
+        /** @description Downloadable URLs to the 3D model files generated by Meshy. */
+        MeshyImageTo3DModelUrls: {
+            /** @description Downloadable URL to the GLB file. */
+            glb?: string;
+            /** @description Downloadable URL to the FBX file. */
+            fbx?: string;
+            /** @description Downloadable URL to the OBJ file. */
+            obj?: string;
+            /** @description Downloadable URL to the USDZ file. */
+            usdz?: string;
+            /** @description Downloadable URL to the MTL file. */
+            mtl?: string;
+            /** @description Downloadable URL to the original GLB output before remeshing. Available only when should_remesh and save_pre_remeshed_model are both true. */
+            pre_remeshed_glb?: string;
+        };
+        MeshyMultiImageTo3DRequest: {
+            /** @description Provide 1 to 4 images for Meshy to use in model creation. All images should depict the same object from different angles. */
+            image_urls: string[];
+            /**
+             * @description ID of the model to use.
+             * @default latest
+             * @enum {string}
+             */
+            ai_model: "meshy-5" | "latest";
+            topology?: components["schemas"]["MeshyTopology"];
+            /**
+             * @description Specify the target number of polygons in the generated model. Valid range is 100 to 300,000.
+             * @default 30000
+             */
+            target_polycount: number;
+            symmetry_mode?: components["schemas"]["MeshySymmetryMode"];
+            /**
+             * @description Controls whether to enable the remesh phase. When false, returns highest-precision triangular mesh.
+             * @default true
+             */
+            should_remesh: boolean;
+            /**
+             * @description When true, stores an extra GLB file before the remesh phase completes. Only takes effect when should_remesh is true.
+             * @default false
+             */
+            save_pre_remeshed_model: boolean;
+            /**
+             * @description Determines if textures are generated. When false, provides a mesh without textures for 5 credits.
+             * @default true
+             */
+            should_texture: boolean;
+            /**
+             * @description Generate PBR Maps (metallic, roughness, normal) in addition to the base color.
+             * @default false
+             */
+            enable_pbr: boolean;
+            pose_mode?: components["schemas"]["MeshyPoseMode"];
+            /**
+             * @description Deprecated. Use pose_mode instead. Whether to generate the model in an A/T pose.
+             * @default false
+             */
+            is_a_t_pose: boolean;
+            /** @description Provide a text prompt to guide the texturing process. Maximum 600 characters. */
+            texture_prompt?: string;
+            /** @description Provide a 2d image to guide the texturing process. Supports .jpg, .jpeg, .png formats or base64-encoded data URI. */
+            texture_image_url?: string;
+            /**
+             * @description When true, input content will be screened for potentially harmful content.
+             * @default false
+             */
+            moderation: boolean;
+        };
+        MeshyMultiImageTo3DCreateResponse: {
+            /** @description The task id of the newly created Multi-Image to 3D task. */
+            result: string;
+        };
+        MeshyMultiImageTo3DTask: {
+            /** @description Unique identifier for the task. */
+            id: string;
+            /**
+             * @description Type of the Multi-Image to 3D task.
+             * @enum {string}
+             */
+            type?: "multi-image-to-3d";
+            model_urls?: components["schemas"]["MeshyImageTo3DModelUrls"];
+            /** @description Downloadable URL to the thumbnail image of the model file. */
+            thumbnail_url?: string;
+            /** @description The text prompt that was used to guide the texturing process. */
+            texture_prompt?: string;
+            /** @description Progress of the task. 0 if not started, 100 when succeeded. */
+            progress?: number;
+            /** @description Timestamp of when the task was started, in milliseconds. 0 if not started. */
+            started_at?: number;
+            /** @description Timestamp of when the task was created, in milliseconds. */
+            created_at?: number;
+            /** @description Timestamp of when the task result expires, in milliseconds. */
+            expires_at?: number;
+            /** @description Timestamp of when the task was finished, in milliseconds. 0 if not finished. */
+            finished_at?: number;
+            status: components["schemas"]["MeshyTaskStatus"];
+            /** @description An array of texture URL objects that are generated from the task. */
+            texture_urls?: components["schemas"]["MeshyTextureUrls"][];
+            /** @description The count of preceding tasks. Only meaningful when status is PENDING. */
+            preceding_tasks?: number;
+            task_error?: components["schemas"]["MeshyTaskError"];
+        };
+        MeshyRemeshRequest: {
+            /** @description The ID of the completed Image to 3D or Text to 3D task you wish to remesh. Required if model_url is not provided. */
+            input_task_id?: string;
+            /** @description A publicly accessible URL or data URI to a 3D model. Supported formats glb, gltf, obj, fbx, stl. Required if input_task_id is not provided. */
+            model_url?: string;
+            /**
+             * @description A list of target formats for the remeshed model.
+             * @default [
+             *       "glb"
+             *     ]
+             */
+            target_formats: ("glb" | "fbx" | "obj" | "usdz" | "blend" | "stl")[];
+            topology?: components["schemas"]["MeshyTopology"];
+            /**
+             * @description Specify the target number of polygons in the generated model. Valid range is 100 to 300,000.
+             * @default 30000
+             */
+            target_polycount: number;
+            /**
+             * @description Resize the model to a certain height measured in meters. 0 means no resizing.
+             * @default 0
+             */
+            resize_height: number;
+            /**
+             * @description Position of the origin.
+             * @enum {string}
+             */
+            origin_at?: "bottom" | "center" | "";
+            /**
+             * @description If true, only changes the format of the input model file, ignoring other inputs like topology, resize_height, and target_polycount.
+             * @default false
+             */
+            convert_format_only: boolean;
+        };
+        MeshyRemeshCreateResponse: {
+            /** @description The id of the newly created remesh task. */
+            result: string;
+        };
+        MeshyRemeshTask: {
+            /** @description Unique identifier for the task. */
+            id: string;
+            /**
+             * @description Type of the Remesh task.
+             * @enum {string}
+             */
+            type?: "remesh";
+            model_urls?: components["schemas"]["MeshyRemeshModelUrls"];
+            /** @description Progress of the task. 0 if not started, 100 when succeeded. */
+            progress?: number;
+            status: components["schemas"]["MeshyRemeshTaskStatus"];
+            /** @description The count of preceding tasks. Only meaningful when status is PENDING. */
+            preceding_tasks?: number;
+            /** @description Timestamp of when the task was created, in milliseconds. */
+            created_at?: number;
+            /** @description Timestamp of when the task was started, in milliseconds. 0 if not started. */
+            started_at?: number;
+            /** @description Timestamp of when the task was finished, in milliseconds. 0 if not finished. */
+            finished_at?: number;
+            task_error?: components["schemas"]["MeshyTaskError"];
+        };
+        /** @description Downloadable URLs to the remeshed 3D model files. */
+        MeshyRemeshModelUrls: {
+            /** @description Downloadable URL to the GLB file. */
+            glb?: string;
+            /** @description Downloadable URL to the FBX file. */
+            fbx?: string;
+            /** @description Downloadable URL to the OBJ file. */
+            obj?: string;
+            /** @description Downloadable URL to the USDZ file. */
+            usdz?: string;
+            /** @description Downloadable URL to the Blender file. */
+            blend?: string;
+            /** @description Downloadable URL to the STL file. */
+            stl?: string;
+        };
+        /**
+         * @description Status of the remesh task.
+         * @enum {string}
+         */
+        MeshyRemeshTaskStatus: "PENDING" | "PROCESSING" | "SUCCEEDED" | "FAILED";
+        MeshyRiggingRequest: {
+            /** @description The input task that needs to be rigged. Required if model_url is not provided. */
+            input_task_id?: string;
+            /** @description A publicly accessible URL or Data URI to a textured humanoid GLB file. Required if input_task_id is not provided. */
+            model_url?: string;
+            /**
+             * @description The approximate height of the character model in meters. Must be a positive number.
+             * @default 1.7
+             */
+            height_meters: number;
+            /** @description The model's UV-unwrapped base color texture image. Publicly accessible URL or Data URI. Supports .png format. */
+            texture_image_url?: string;
+        };
+        MeshyRiggingCreateResponse: {
+            /** @description The task id of the newly created rigging task. */
+            result: string;
+        };
+        MeshyRiggingTask: {
+            /** @description Unique identifier for the task. */
+            id: string;
+            /**
+             * @description Type of the Rigging task.
+             * @enum {string}
+             */
+            type?: "rig";
+            status: components["schemas"]["MeshyTaskStatus"];
+            /** @description Progress of the task (0-100). 0 if not started, 100 if succeeded. */
+            progress?: number;
+            /** @description Timestamp of when the task was created, in milliseconds. */
+            created_at?: number;
+            /** @description Timestamp of when the task was started, in milliseconds. 0 if not started. */
+            started_at?: number;
+            /** @description Timestamp of when the task was finished, in milliseconds. 0 if not finished. */
+            finished_at?: number;
+            /** @description Timestamp of when the task result expires, in milliseconds. */
+            expires_at?: number;
+            task_error?: components["schemas"]["MeshyTaskError"];
+            result?: components["schemas"]["MeshyRiggingResult"];
+            /** @description The count of preceding tasks. Only meaningful when status is PENDING. */
+            preceding_tasks?: number;
+        };
+        /** @description Contains the output asset URLs if the task SUCCEEDED. */
+        MeshyRiggingResult: {
+            /** @description Downloadable URL for the rigged character in FBX format. */
+            rigged_character_fbx_url?: string;
+            /** @description Downloadable URL for the rigged character in GLB format. */
+            rigged_character_glb_url?: string;
+            basic_animations?: components["schemas"]["MeshyRiggingBasicAnimations"];
+        };
+        /** @description Contains URLs for default animations. */
+        MeshyRiggingBasicAnimations: {
+            /** @description Downloadable URL for walking animation in GLB format (with skin). */
+            walking_glb_url?: string;
+            /** @description Downloadable URL for walking animation in FBX format (with skin). */
+            walking_fbx_url?: string;
+            /** @description Downloadable URL for walking animation armature in GLB format. */
+            walking_armature_glb_url?: string;
+            /** @description Downloadable URL for running animation in GLB format (with skin). */
+            running_glb_url?: string;
+            /** @description Downloadable URL for running animation in FBX format (with skin). */
+            running_fbx_url?: string;
+            /** @description Downloadable URL for running animation armature in GLB format. */
+            running_armature_glb_url?: string;
+        };
+        MeshyRetextureRequest: {
+            /** @description The ID of the completed Image to 3D or Text to 3D task you wish to retexture. Required if model_url is not provided. */
+            input_task_id?: string;
+            /** @description A publicly accessible URL or Data URI to a 3D model. Supported formats glb, gltf, obj, fbx, stl. Required if input_task_id is not provided. */
+            model_url?: string;
+            /** @description Describe your desired texture style of the object using text. Maximum 600 characters. Required if image_style_url is not provided. */
+            text_style_prompt?: string;
+            /** @description A 2d image to guide the texturing process. Supports jpg, jpeg, png formats or base64-encoded data URI. Required if text_style_prompt is not provided. */
+            image_style_url?: string;
+            ai_model?: components["schemas"]["MeshyAiModel"];
+            /**
+             * @description Use the original UV of the model instead of generating new UVs.
+             * @default true
+             */
+            enable_original_uv: boolean;
+            /**
+             * @description Generate PBR Maps (metallic, roughness, normal) in addition to the base color.
+             * @default false
+             */
+            enable_pbr: boolean;
+        };
+        MeshyRetextureCreateResponse: {
+            /** @description The task id of the newly created Retexture task. */
+            result: string;
+        };
+        MeshyRetextureTask: {
+            /** @description Unique identifier for the task. */
+            id: string;
+            /**
+             * @description Type of the Retexture task.
+             * @enum {string}
+             */
+            type?: "retexture";
+            model_urls?: components["schemas"]["MeshyRetextureModelUrls"];
+            /** @description The text prompt that was used to create the texturing task. */
+            text_style_prompt?: string;
+            /** @description The image input that was used to create the texturing task. */
+            image_style_url?: string;
+            /** @description Downloadable URL to the thumbnail image of the model file. */
+            thumbnail_url?: string;
+            /** @description Progress of the task. 0 if not started, 100 when succeeded. */
+            progress?: number;
+            /** @description Timestamp of when the task was started, in milliseconds. 0 if not started. */
+            started_at?: number;
+            /** @description Timestamp of when the task was created, in milliseconds. */
+            created_at?: number;
+            /** @description Timestamp of when the task result expires, in milliseconds. */
+            expires_at?: number;
+            /** @description Timestamp of when the task was finished, in milliseconds. 0 if not finished. */
+            finished_at?: number;
+            status: components["schemas"]["MeshyTaskStatus"];
+            /** @description An array of texture URL objects that are generated from the task. */
+            texture_urls?: components["schemas"]["MeshyTextureUrls"][];
+            /** @description The count of preceding tasks. Only meaningful when status is PENDING. */
+            preceding_tasks?: number;
+            task_error?: components["schemas"]["MeshyTaskError"];
+        };
+        /** @description Downloadable URLs to the textured 3D model files. */
+        MeshyRetextureModelUrls: {
+            /** @description Downloadable URL to the GLB file. */
+            glb?: string;
+            /** @description Downloadable URL to the FBX file. */
+            fbx?: string;
+            /** @description Downloadable URL to the USDZ file. */
+            usdz?: string;
+        };
+        MeshyAnimationRequest: {
+            /** @description The id of a successfully completed rigging task (from POST /openapi/v1/rigging). The character from this task will be animated. */
+            rig_task_id: string;
+            /** @description The identifier of the animation action to apply. */
+            action_id: number;
+            post_process?: components["schemas"]["MeshyAnimationPostProcess"];
+        };
+        /** @description Parameters for post-processing animation files. */
+        MeshyAnimationPostProcess: {
+            /**
+             * @description The type of operation to perform.
+             * @enum {string}
+             */
+            operation_type: "change_fps" | "fbx2usdz" | "extract_armature";
+            /**
+             * @description The target frame rate. Default is 30. Applicable only when operation_type is change_fps.
+             * @default 30
+             * @enum {integer}
+             */
+            fps: 24 | 25 | 30 | 60;
+        };
+        MeshyAnimationCreateResponse: {
+            /** @description The task id of the newly created animation task. */
+            result: string;
+        };
+        MeshyAnimationTask: {
+            /** @description Unique identifier for the task. */
+            id: string;
+            /**
+             * @description Type of the Animation task.
+             * @enum {string}
+             */
+            type?: "animate";
+            status: components["schemas"]["MeshyTaskStatus"];
+            /** @description Progress of the task (0-100). */
+            progress?: number;
+            /** @description Timestamp of when the task was created, in milliseconds. */
+            created_at?: number;
+            /** @description Timestamp of when the task was started, in milliseconds. 0 if not started. */
+            started_at?: number;
+            /** @description Timestamp of when the task was finished, in milliseconds. 0 if not finished. */
+            finished_at?: number;
+            /** @description Timestamp of when the task result expires, in milliseconds. */
+            expires_at?: number;
+            task_error?: components["schemas"]["MeshyTaskError"];
+            result?: components["schemas"]["MeshyAnimationResult"];
+            /** @description The count of preceding tasks. Only meaningful when status is PENDING. */
+            preceding_tasks?: number;
+        };
+        /** @description Contains the output animation URLs if the task SUCCEEDED. */
+        MeshyAnimationResult: {
+            /** @description Downloadable URL for the animation in GLB format. */
+            animation_glb_url?: string;
+            /** @description Downloadable URL for the animation in FBX format. */
+            animation_fbx_url?: string;
+            /** @description Downloadable URL for the processed animation in USDZ format. */
+            processed_usdz_url?: string;
+            /** @description Downloadable URL for the processed armature in FBX format. */
+            processed_armature_fbx_url?: string;
+            /** @description Downloadable URL for the animation with changed FPS in FBX format. */
+            processed_animation_fps_fbx_url?: string;
+        };
+        /** @description Request body for Quiver AI text-to-SVG generation */
+        QuiverTextToSVGRequest: {
+            /**
+             * @description Model identifier for SVG generation
+             * @default arrow-preview
+             */
+            model: string;
+            /** @description Text description of the desired SVG output */
+            prompt: string;
+            /** @description Additional style or formatting guidance */
+            instructions?: string;
+            /** @description Up to 4 reference images (URL or base64) */
+            references?: components["schemas"]["QuiverImageObject"][];
+            /**
+             * @description Number of SVGs to generate
+             * @default 1
+             */
+            n: number;
+            /**
+             * @description Enable Server-Sent Events streaming
+             * @default false
+             */
+            stream: boolean;
+            /**
+             * @description Randomness control
+             * @default 1
+             */
+            temperature: number;
+            /**
+             * @description Nucleus sampling parameter
+             * @default 1
+             */
+            top_p: number;
+            /**
+             * @description Token presence penalty
+             * @default 0
+             */
+            presence_penalty: number;
+            /** @description Maximum number of output tokens */
+            max_output_tokens?: number;
+        };
+        /** @description Request body for Quiver AI image-to-SVG vectorization */
+        QuiverImageToSVGRequest: {
+            /**
+             * @description Model identifier for SVG vectorization
+             * @default arrow-preview
+             */
+            model: string;
+            image: components["schemas"]["QuiverImageObject"];
+            /**
+             * @description Automatically crop to dominant subject
+             * @default false
+             */
+            auto_crop: boolean;
+            /** @description Square resize target in pixels */
+            target_size?: number;
+            /**
+             * @description Number of SVGs to generate
+             * @default 1
+             */
+            n: number;
+            /**
+             * @description Enable Server-Sent Events streaming
+             * @default false
+             */
+            stream: boolean;
+            /**
+             * @description Randomness control
+             * @default 1
+             */
+            temperature: number;
+            /**
+             * @description Nucleus sampling parameter
+             * @default 1
+             */
+            top_p: number;
+            /**
+             * @description Token presence penalty
+             * @default 0
+             */
+            presence_penalty: number;
+            /** @description Maximum number of output tokens */
+            max_output_tokens?: number;
+        };
+        /** @description Image input for Quiver AI (URL or base64) */
+        QuiverImageObject: {
+            /**
+             * Format: uri
+             * @description Network image URL. Only http/https URLs allowed.
+             */
+            url?: string;
+            /** @description Base64-encoded image payload */
+            base64?: string;
+        };
+        /** @description Response from Quiver AI SVG generation/vectorization */
+        QuiverSVGResponse: {
+            /** @description Unique identifier for the generation */
+            id?: string;
+            /** @description Unix timestamp of creation */
+            created?: number;
+            data?: {
+                /** @description Generated SVG content */
+                svg?: string;
+                /**
+                 * @description MIME type of the output
+                 * @default image/svg+xml
+                 */
+                mime_type: string;
+            }[];
+            usage?: {
+                /** @description Total tokens used */
+                total_tokens?: number;
+                /** @description Input tokens used */
+                input_tokens?: number;
+                /** @description Output tokens used */
+                output_tokens?: number;
+            };
+        };
+        /** @description Request body for xAI Grok Imagine image generation */
+        XAIImageGenerationRequest: {
+            /**
+             * @description Model to be used
+             * @default grok-imagine-image
+             */
+            model: string;
+            /**
+             * @description Number of images to be generated
+             * @default 1
+             */
+            n: number;
+            /** @description Prompt for image generation */
+            prompt: string;
+            /**
+             * @description Response format to return the image in. Can be url or b64_json.
+             * @default url
+             * @enum {string}
+             */
+            response_format: "url" | "b64_json";
+            /**
+             * @description Aspect ratio of the generated image. Defaults to auto for automatically selecting the best ratio for the prompt.
+             * @default auto
+             * @enum {string}
+             */
+            aspect_ratio: "1:1" | "3:4" | "4:3" | "9:16" | "16:9" | "2:3" | "3:2" | "9:19.5" | "19.5:9" | "9:20" | "20:9" | "1:2" | "2:1" | "auto";
+            /**
+             * @description Resolution of the generated image. Defaults to 1k.
+             * @default 1k
+             * @enum {string}
+             */
+            resolution: "1k" | "2k";
+            /**
+             * @description Quality of the output image. Currently a no-op, reserved for future use.
+             * @enum {string}
+             */
+            quality?: "low" | "medium" | "high";
+            /** @description Size of the image (not supported) */
+            size?: string;
+            /** @description Style of the image (not supported) */
+            style?: string;
+            /** @description A unique identifier representing your end-user, which can help xAI to monitor and detect abuse */
+            user?: string;
+        };
+        /** @description Request body for xAI Grok Imagine image editing */
+        XAIImageEditRequest: {
+            /** @description Prompt for image editing */
+            prompt: string;
+            image?: components["schemas"]["XAIImageObject"];
+            /** @description List of input images for multi-reference editing. Mutually exclusive with image. When multiple images are provided, refer to them as <IMAGE_0>, <IMAGE_1>, etc. in the prompt. */
+            images?: components["schemas"]["XAIImageObject"][];
+            mask?: components["schemas"]["XAIImageObject"];
+            /**
+             * @description Model to be used
+             * @default grok-imagine-image
+             */
+            model: string;
+            /** @description Number of image edits to be generated */
+            n?: number;
+            /**
+             * @description Response format to return the image in. Can be url or b64_json.
+             * @default url
+             * @enum {string}
+             */
+            response_format: "url" | "b64_json";
+            /**
+             * @description Resolution of the generated image. Defaults to 1k.
+             * @default 1k
+             * @enum {string}
+             */
+            resolution: "1k" | "2k";
+            /**
+             * @description Aspect ratio of the output image for image editing with multiple images. For single image editing, do not set this.
+             * @enum {string}
+             */
+            aspect_ratio?: "1:1" | "3:4" | "4:3" | "9:16" | "16:9" | "2:3" | "3:2" | "9:19.5" | "19.5:9" | "9:20" | "20:9" | "1:2" | "2:1" | "auto";
+            /**
+             * @description Quality of the output image. Currently a no-op, reserved for future use.
+             * @enum {string}
+             */
+            quality?: "low" | "medium" | "high";
+            /** @description Size of the image (not supported) */
+            size?: string;
+            /** @description Style of the image (not supported) */
+            style?: string;
+            /** @description A unique identifier representing your end-user, which can help xAI to monitor and detect abuse */
+            user?: string;
+        };
+        /** @description Input image object for xAI endpoints */
+        XAIImageObject: {
+            /** @description URL of the input image (public URL or base64-encoded data URI) */
+            url: string;
+            /**
+             * @description Type of the image input
+             * @enum {string}
+             */
+            type?: "image_url";
+        };
+        /** @description Response from xAI image generation or editing */
+        XAIImageGenerationResponse: {
+            /** @description A list of generated image objects */
+            data?: components["schemas"]["XAIGeneratedImage"][];
+            /** @description If the request was blocked by input moderation, contains the block reason */
+            block_reason?: string;
+            usage?: components["schemas"]["XAIImageUsage"];
+        };
+        /** @description A generated image from xAI */
+        XAIGeneratedImage: {
+            /** @description A url to the generated image (if response_format is url) */
+            url?: string;
+            /** @description A base64-encoded string representation of the generated image in jpeg encoding (if response_format is b64_json) */
+            b64_json?: string;
+            /** @description The MIME type of the generated image (e.g. image/png, image/jpeg, image/webp). */
+            mime_type?: string;
+        };
+        /** @description Usage information for the image generation request */
+        XAIImageUsage: {
+            /** @description Accurate cost of this request in USD ticks (10,000,000,000 ticks = 1 USD) */
+            cost_in_usd_ticks?: number;
+        };
+        /** @description A reference image used to guide video generation in R2V mode */
+        XAIReferenceImageObject: {
+            /** @description URL of the reference image. Supports HTTPS URLs (public) or base64-encoded data URLs (e.g., data:image/jpeg;base64,...). */
+            url: string;
+        };
+        /**
+         * @description Request body for xAI Grok Imagine video generation.
+         *     Supports three modes: text-to-video (prompt only), image-to-video (prompt + image),
+         *     and reference-to-video (prompt + reference_images).
+         *     The fields image, reference_images, and video are mutually exclusive.
+         */
+        XAIVideoGenerationRequest: {
+            /** @description Prompt for video generation. Maximum 4,096 characters. */
+            prompt: string;
+            /** @description Model to be used */
+            model?: string;
+            image?: components["schemas"]["XAIImageObject"];
+            /** @description One or more reference images to guide the video generation (reference-to-video mode). Mutually exclusive with image and video. */
+            reference_images?: components["schemas"]["XAIReferenceImageObject"][];
+            /**
+             * @description Video duration in seconds. Range [1, 15]. Default 8.
+             * @default 8
+             */
+            duration: number | null;
+            /**
+             * @description Aspect ratio of the generated video
+             * @default 16:9
+             * @enum {string}
+             */
+            aspect_ratio: "1:1" | "16:9" | "9:16" | "4:3" | "3:4" | "3:2" | "2:3";
+            /** @description Resolution of the output video */
+            resolution?: string | null;
+            /** @description Size of the output video */
+            size?: string | null;
+            /** @description Optional output destination for generated video */
+            output?: Record<string, never> | null;
+            /** @description A unique identifier representing your end-user */
+            user?: string | null;
+        };
+        /** @description Input video object for xAI endpoints */
+        XAIVideoObject: {
+            /** @description URL of the video (public URL or base64-encoded data URL). The video must have the .mp4 file extension and be encoded with .mp4 supported codecs such as H.265, H.264, AV1, etc. */
+            url: string;
+        };
+        /** @description Request body for xAI Grok Imagine video editing */
+        XAIVideoEditRequest: {
+            /** @description Prompt for video editing */
+            prompt: string;
+            video: components["schemas"]["XAIVideoObject"];
+            /** @description Model to be used */
+            model?: string | null;
+            /** @description Optional output destination for generated video */
+            output?: Record<string, never> | null;
+            /** @description A unique identifier representing your end-user */
+            user?: string | null;
+        };
+        /** @description Request body for xAI Grok Imagine video extension */
+        XAIVideoExtensionRequest: {
+            /** @description Text description of what should happen next in the video */
+            prompt: string;
+            video: components["schemas"]["XAIVideoObject"];
+            /** @description Model to use */
+            model?: string | null;
+            /**
+             * @description Length of the extension in seconds. Range [2, 10]. Default 6.
+             * @default 6
+             */
+            duration: number | null;
+        };
+        /** @description Response from xAI video generation or editing (async operation) */
+        XAIVideoAsyncResponse: {
+            /** @description Unique identifier to poll for the completed video */
+            request_id?: string;
+        };
+        /** @description Response from getting video generation result */
+        XAIVideoResultResponse: {
+            /**
+             * @description Status of the deferred request: "pending" or "done"
+             * @enum {string}
+             */
+            status?: "pending" | "done";
+            /** @description If the request was blocked by input moderation, contains the block reason */
+            block_reason?: string | null;
+            /** @description The model used to generate the video */
+            model?: string;
+            usage?: components["schemas"]["XAIVideoUsage"];
+            video?: components["schemas"]["XAIGeneratedVideo"];
+        };
+        /** @description Usage information for the video generation request */
+        XAIVideoUsage: {
+            /** @description The cost of this request expressed in USD ticks. One USD cent equals 100,000,000 ticks, so one US dollar equals 10,000,000,000 ticks. */
+            cost_in_usd_ticks?: number;
+        };
+        /** @description A generated video from xAI */
+        XAIGeneratedVideo: {
+            /** @description Duration of the generated video in seconds */
+            duration?: number;
+            /** @description Whether the video generated by the model respects moderation rules */
+            respect_moderation?: boolean;
+            /** @description A url to the generated video */
+            url?: string | null;
+        };
+        /** @description A postprocessing operation to apply after image generation. */
+        RevePostprocessingOperation: {
+            /**
+             * @description The postprocessing operation: upscale, remove_background, fit_image, or effect.
+             * @enum {string}
+             */
+            process: "upscale" | "remove_background" | "fit_image" | "effect";
+            /** @description Upscale factor (2, 3, or 4). Only used when process is upscale. */
+            upscale_factor?: number;
+            /** @description Maximum dimension for fit_image. At least one of max_dim, max_width, or max_height must be set. */
+            max_dim?: number;
+            /** @description Maximum width for fit_image. */
+            max_width?: number;
+            /** @description Maximum height for fit_image. */
+            max_height?: number;
+            /** @description Name of the effect to apply. Only used when process is effect. */
+            effect_name?: string;
+            /** @description Optional parameters to override default effect settings. */
+            effect_parameters?: Record<string, never>;
+        };
+        /** @description Request body for Reve image creation. */
+        ReveImageCreateRequest: {
+            /** @description The text description of the desired image. Maximum length is 2560 characters. */
+            prompt: string;
+            /**
+             * @description The desired aspect ratio of the generated image.
+             * @default 3:2
+             * @enum {string}
+             */
+            aspect_ratio: "16:9" | "9:16" | "3:2" | "2:3" | "4:3" | "3:4" | "1:1";
+            /**
+             * @description Model version to use. Supported: latest, reve-create@20250915.
+             * @default latest
+             */
+            version: string;
+            /** @description Optional postprocessing operations to apply after generation. May add additional cost. */
+            postprocessing?: components["schemas"]["RevePostprocessingOperation"][];
+            /** @description If included, the model will spend more effort making better images. Values between 1 and 15 are accepted. Adds additional credits cost. */
+            test_time_scaling?: number;
+        };
+        /** @description Request body for Reve image editing. */
+        ReveImageEditRequest: {
+            /** @description The text description of how to edit the provided image. Maximum length is 2560 characters. */
+            edit_instruction: string;
+            /** @description A base64 encoded image to use as reference for the edit. */
+            reference_image: string;
+            /**
+             * @description The desired aspect ratio. Defaults to the aspect ratio of the reference image if not provided.
+             * @enum {string}
+             */
+            aspect_ratio?: "16:9" | "9:16" | "3:2" | "2:3" | "4:3" | "3:4" | "1:1";
+            /**
+             * @description Model version to use. Supported: latest-fast, latest, reve-edit-fast@20251030, reve-edit@20250915.
+             * @default latest
+             */
+            version: string;
+            /** @description Optional postprocessing operations to apply after generation. May add additional cost. */
+            postprocessing?: components["schemas"]["RevePostprocessingOperation"][];
+            /** @description If included, the model will spend more effort making better images. Values between 1 and 15 are accepted. Adds additional credits cost. */
+            test_time_scaling?: number;
+        };
+        /** @description Request body for Reve image remixing. */
+        ReveImageRemixRequest: {
+            /** @description The text description of the desired image. May include xml img tags to refer to specific reference images by index. Maximum length is 2560 characters. */
+            prompt: string;
+            /** @description A list of 1-6 base64 encoded reference images. Each must be less than 10 MB. Total pixel count must be no more than 32 million pixels. */
+            reference_images: string[];
+            /**
+             * @description The desired aspect ratio. If not provided, smartly chosen by the model.
+             * @enum {string}
+             */
+            aspect_ratio?: "16:9" | "9:16" | "3:2" | "2:3" | "4:3" | "3:4" | "1:1";
+            /**
+             * @description Model version to use. Supported: latest-fast, latest, reve-remix-fast@20251030, reve-remix@20250915.
+             * @default latest
+             */
+            version: string;
+            /** @description Optional postprocessing operations to apply after generation. May add additional cost. */
+            postprocessing?: components["schemas"]["RevePostprocessingOperation"][];
+            /** @description If included, the model will spend more effort making better images. Values between 1 and 15 are accepted. Adds additional credits cost. */
+            test_time_scaling?: number;
+        };
+        /** @description Response from the Reve image API. */
+        ReveImageResponse: {
+            /** @description The base64 encoded image data. Empty if the request was not successful. */
+            image?: string;
+            /** @description A unique id for the request. */
+            request_id?: string;
+            /** @description The number of credits used for this request. */
+            credits_used?: number;
+            /** @description The number of credits remaining in your budget. */
+            credits_remaining?: number;
+            /** @description The specific model version used in the generation process. */
+            version?: string;
+            /** @description Indicates whether the generated image violates the content policy. */
+            content_violation?: boolean;
+        };
+        /** @description Request body for Bria FIBO Edit API */
+        BriaFiboEditRequest: {
+            /** @description Text-based edit instruction (e.g., "make the sky blue", "add a cat"). Either instruction or structured_instruction must be provided. */
+            instruction?: string;
+            /** @description The source image to be edited. Publicly available URL or Base64-encoded. Accepted formats JPEG, JPG, PNG, WEBP. Must contain exactly one item. */
+            images: string[];
+            /** @description Optional mask image URL or Base64-encoded. Black areas will be preserved, white areas will be edited. */
+            mask?: string;
+            /** @description A string containing the structured edit instruction in JSON format. Use this instead of instruction for precise, programmatic control. */
+            structured_instruction?: string;
+            /** @description A text prompt specifying concepts, styles, or objects to exclude from the edited image. */
+            negative_prompt?: string;
+            /**
+             * Format: float
+             * @description Determines how closely the generated image should adhere to the instruction.
+             * @default 5
+             */
+            guidance_scale: number;
+            /**
+             * @description The version of the model to use.
+             * @default FIBO
+             * @enum {string}
+             */
+            model_version: "FIBO";
+            /**
+             * @description Number of diffusion steps.
+             * @default 50
+             */
+            steps_num: number;
+            /** @description Seed for deterministic generation. If omitted, a random seed is used. */
+            seed?: number;
+            /**
+             * @description If true, returns a warning for potential IP content in the instruction.
+             * @default false
+             */
+            ip_signal: boolean;
+            /**
+             * @description If true, returns 422 on instruction moderation failure.
+             * @default true
+             */
+            prompt_content_moderation: boolean;
+            /**
+             * @description If true, returns 422 on images or mask moderation failure.
+             * @default true
+             */
+            visual_input_content_moderation: boolean;
+            /**
+             * @description If true, returns 422 on visual output moderation failure.
+             * @default true
+             */
+            visual_output_content_moderation: boolean;
+        };
+        /** @description Request body for Bria Structured Instruction Generate API */
+        BriaStructuredInstructionRequest: {
+            /** @description Required. Text-based edit instruction (e.g., "make the sky blue", "add a cat"). */
+            instruction: string;
+            /** @description The source image to be edited. Publicly available URL or Base64-encoded. Must contain exactly one item. */
+            images: string[];
+            /** @description Optional mask image URL or Base64-encoded. Black areas will be preserved, white areas will be edited. */
+            mask?: string;
+            /** @description Seed for deterministic generation. If omitted, a random seed is used. */
+            seed?: number;
+            /**
+             * @description If true, returns a warning for potential IP content in the instruction.
+             * @default false
+             */
+            ip_signal: boolean;
+            /**
+             * @description If true, returns 422 on instruction moderation failure.
+             * @default true
+             */
+            prompt_content_moderation: boolean;
+            /**
+             * @description If true, returns 422 on images or mask moderation failure.
+             * @default true
+             */
+            visual_input_content_moderation: boolean;
+        };
+        /** @description Asynchronous response from Bria API (202 Accepted) */
+        BriaAsyncResponse: {
+            /** @description Unique identifier for the request. */
+            request_id?: string;
+            /** @description URL to poll for the result. */
+            status_url?: string;
+            /** @description Optional warning message. */
+            warning?: string;
+        };
+        /** @description Error response from Bria API */
+        BriaErrorResponse: {
+            error?: {
+                /** @description Error code. */
+                code?: number;
+                /** @description Error message. */
+                message?: string;
+                /** @description Additional error details. */
+                details?: string;
+            };
+            /** @description Unique identifier for the request. */
+            request_id?: string;
+        };
+        /** @description Status response from Bria API */
+        BriaStatusResponse: {
+            /**
+             * @description Current status of the request.
+             * @enum {string}
+             */
+            status?: "IN_PROGRESS" | "COMPLETED" | "ERROR" | "UNKNOWN";
+            /** @description Unique identifier for the request. */
+            request_id?: string;
+            /** @description Result object (only present when status is COMPLETED) */
+            result?: {
+                /** @description URL of the generated/edited image. */
+                image_url?: string;
+                /** @description URL of the generated video. */
+                video_url?: string;
+                /** @description Seed used for generation. */
+                seed?: number;
+                /** @description Original prompt. */
+                prompt?: string;
+                /** @description Refined version of the prompt. */
+                refined_prompt?: string;
+                /** @description The detailed JSON structured prompt. */
+                structured_prompt?: string;
+            };
+            /** @description Error object (only present when status is ERROR) */
+            error?: {
+                /** @description Error code. */
+                code?: number;
+                /** @description Error message. */
+                message?: string;
+                /** @description Additional error details. */
+                details?: string;
+            };
+        };
+        /** @description Request body for Bria Video Remove Background API */
+        BriaVideoRemoveBackgroundRequest: {
+            /** @description Publicly accessible URL of the input video. Input resolution supported up to 16000x16000 (16K). Max duration 60 seconds. */
+            video: string;
+            /**
+             * @description Background color for the output video. If Transparent, the output codec must support alpha.
+             * @enum {string}
+             */
+            background_color?: "Transparent" | "Black" | "White" | "Gray" | "Red" | "Green" | "Blue" | "Yellow" | "Cyan" | "Magenta" | "Orange";
+            /**
+             * @description Output container and codec preset.
+             * @enum {string}
+             */
+            output_container_and_codec?: "mp4_h264" | "mp4_h265" | "webm_vp9" | "mov_h265" | "mov_proresks" | "mkv_h264" | "mkv_h265" | "mkv_vp9" | "gif";
+            /** @description Whether to preserve audio from the input video. */
+            preserve_audio?: boolean;
+        };
+        /** @description Request body for Bria Image Remove Background API */
+        BriaImageRemoveBackgroundRequest: {
+            /** @description The image to remove background from. Supported input types are Base64-encoded string or URL pointing to a publicly accessible image file. Accepted formats JPEG, JPG, PNG, WEBP. */
+            image: string;
+            /** @description Controls whether partially transparent areas from the input image are retained in the output after background removal. */
+            preserve_alpha?: boolean;
+            /** @description When false (default), the request is processed asynchronously. When true, the API holds the connection open until complete. */
+            sync?: boolean;
+            /** @description When enabled, applies content moderation to input visual. Returns 422 if the image fails moderation. */
+            visual_input_content_moderation?: boolean;
+            /** @description When enabled, applies content moderation to result visual. Returns 422 if the output fails moderation. */
+            visual_output_content_moderation?: boolean;
+        };
+        /** @description Response when request_id is not found or expired */
+        BriaStatusNotFoundResponse: {
+            /** @enum {string} */
+            status: "NOT_FOUND";
+        };
+        /** @description Request body for WavespeedAI FlashVSR video upscaling */
+        WavespeedFlashVSRRequest: {
+            /** @description The video to upscale. Can be a URL to the video file or a base64-encoded video. */
+            video: string;
+            /**
+             * @description Target resolution to upscale to.
+             * @default 1080p
+             * @enum {string}
+             */
+            target_resolution: "720p" | "1080p" | "2k" | "4k";
+            /** @description Duration of the video in seconds */
+            duration: number;
+        };
+        /** @description Request body for WavespeedAI SeedVR2 image upscaling */
+        WavespeedSeedVR2ImageRequest: {
+            /** @description The URL of the image to upscale. */
+            image: string;
+            /**
+             * @description The target resolution of the output image.
+             * @default 4k
+             * @enum {string}
+             */
+            target_resolution: "2k" | "4k" | "8k";
+            /**
+             * @description The format of the output image.
+             * @default jpeg
+             * @enum {string}
+             */
+            output_format: "jpeg" | "png" | "webp";
+            /**
+             * @description If enabled, the output will be encoded into a BASE64 string instead of a URL.
+             * @default false
+             */
+            enable_base64_output: boolean;
+        };
+        /** @description Response from WavespeedAI task submission */
+        WavespeedTaskResponse: {
+            /** @description HTTP status code (e.g., 200 for success) */
+            code?: number;
+            /** @description Status message (e.g., "success") */
+            message?: string;
+            data?: {
+                /** @description Unique identifier for the prediction/task */
+                id?: string;
+                /** @description Model ID used for the prediction */
+                model?: string;
+                /** @description Array of URLs to the generated content (empty when status is not completed) */
+                outputs?: string[];
+                urls?: {
+                    /** @description URL to retrieve the prediction result */
+                    get?: string;
+                };
+                /** @description Array of boolean values indicating NSFW detection for each output */
+                has_nsfw_contents?: boolean[];
+                /**
+                 * @description Status of the task
+                 * @enum {string}
+                 */
+                status?: "created" | "processing" | "completed" | "failed";
+                /** @description ISO timestamp of when the request was created */
+                created_at?: string;
+                /** @description Error message (empty if no error occurred) */
+                error?: string;
+                timings?: {
+                    /** @description Inference time in milliseconds */
+                    inference?: number;
+                };
+            };
+        };
+        /** @description Response from WavespeedAI task result query */
+        WavespeedTaskResultResponse: {
+            /** @description HTTP status code (e.g., 200 for success) */
+            code?: number;
+            /** @description Status message (e.g., "success") */
+            message?: string;
+            data?: {
+                /** @description Unique identifier for the prediction/task */
+                id?: string;
+                /** @description Model ID used for the prediction */
+                model?: string;
+                /** @description Array of URLs to the generated content (empty when status is not completed) */
+                outputs?: string[];
+                urls?: {
+                    /** @description URL to retrieve the prediction result */
+                    get?: string;
+                };
+                /**
+                 * @description Status of the task
+                 * @enum {string}
+                 */
+                status?: "created" | "processing" | "completed" | "failed";
+                /** @description ISO timestamp of when the request was created */
+                created_at?: string;
+                /** @description Error message (empty if no error occurred) */
+                error?: string;
+                timings?: {
+                    /** @description Inference time in milliseconds */
+                    inference?: number;
+                };
+            };
+        };
+        SoniloVideoToMusicRequest: {
+            /**
+             * Format: binary
+             * @description Multipart file part; e.g. video/mp4.
+             */
+            video: string;
+            /** @description Optional text prompt to guide music generation. */
+            prompt?: string;
+        } | {
+            /**
+             * Format: uri
+             * @description Public http(s) URL of the video.
+             */
+            video_url: string;
+            /** @description Optional text prompt to guide music generation. */
+            prompt?: string;
+        };
+        SoniloTextToMusicRequest: {
+            /** @description Text prompt describing the desired music. */
+            prompt: string;
+            /** @description Target duration in seconds. Will be inferred if not provided. */
+            duration?: number;
+        };
+        /** @description A single NDJSON event from the Sonilo streaming response. */
+        SoniloStreamEvent: {
+            /** @enum {string} */
+            type: "title";
+            stream_index: number;
+            prompt_index: number;
+            copy_index: number;
+            title: string;
+            display_tags: string[];
+        } | {
+            /** @enum {string} */
+            type: "audio_chunk";
+            sample_rate: number;
+            channels: number;
+            stream_index: number;
+            num_streams: number;
+            /** @description Base64-encoded AAC in fMP4 fragments; concatenate per stream_index. */
+            data: string;
+        } | {
+            /** @enum {string} */
+            type: "generated_audio";
+            sample_rate: number;
+            channels: number;
+            duration_sec_by_stream: number[];
+            billing_rate_per_sec: number;
+            billing: number;
+        } | {
+            /** @enum {string} */
+            type: "complete";
+        } | {
+            /** @enum {string} */
+            type: "error";
+            code?: string;
+            message: string;
+        };
+        SoniloErrorResponse: {
+            detail?: {
+                /** @description Error code */
+                code?: string;
+                /** @description Human-readable error message */
+                message?: string;
+            };
+        };
     };
     responses: never;
     parameters: {
@@ -11910,7 +17209,10 @@ export interface operations {
                 "application/json": {
                     /** @description Optional URL to redirect the customer after they're done with the billing portal */
                     return_url?: string;
-                    /** @description Optional target subscription tier. When provided, creates a deep link directly to the subscription update confirmation screen with this tier pre-selected. */
+                    /**
+                     * @description Optional target subscription tier. When provided, creates a deep link directly to the subscription update confirmation screen with this tier pre-selected.
+                     * @enum {string}
+                     */
                     target_tier?: "standard" | "creator" | "pro" | "standard-yearly" | "creator-yearly" | "pro-yearly";
                 };
             };
@@ -11962,7 +17264,36 @@ export interface operations {
             path?: never;
             cookie?: never;
         };
-        requestBody?: never;
+        requestBody?: {
+            content: {
+                "application/json": {
+                    /** @description Google Analytics client ID from _ga cookie */
+                    ga_client_id?: string;
+                    /** @description Google Analytics session ID */
+                    ga_session_id?: string;
+                    /** @description Google Analytics session number */
+                    ga_session_number?: string;
+                    /** @description Google Ads click ID */
+                    gclid?: string;
+                    /** @description Google Ads iOS attribution parameter */
+                    gbraid?: string;
+                    /** @description Google Ads web-to-app attribution parameter */
+                    wbraid?: string;
+                    /** @description UTM source parameter */
+                    utm_source?: string;
+                    /** @description UTM medium parameter */
+                    utm_medium?: string;
+                    /** @description UTM campaign parameter */
+                    utm_campaign?: string;
+                    /** @description UTM term parameter */
+                    utm_term?: string;
+                    /** @description UTM content parameter */
+                    utm_content?: string;
+                    /** @description Impact.com click ID for affiliate conversion tracking */
+                    im_ref?: string;
+                };
+            };
+        };
         responses: {
             /** @description Subscription checkout session created successfully */
             201: {
@@ -12013,7 +17344,36 @@ export interface operations {
             };
             cookie?: never;
         };
-        requestBody?: never;
+        requestBody?: {
+            content: {
+                "application/json": {
+                    /** @description Google Analytics client ID from _ga cookie */
+                    ga_client_id?: string;
+                    /** @description Google Analytics session ID */
+                    ga_session_id?: string;
+                    /** @description Google Analytics session number */
+                    ga_session_number?: string;
+                    /** @description Google Ads click ID */
+                    gclid?: string;
+                    /** @description Google Ads iOS attribution parameter */
+                    gbraid?: string;
+                    /** @description Google Ads web-to-app attribution parameter */
+                    wbraid?: string;
+                    /** @description UTM source parameter */
+                    utm_source?: string;
+                    /** @description UTM medium parameter */
+                    utm_medium?: string;
+                    /** @description UTM campaign parameter */
+                    utm_campaign?: string;
+                    /** @description UTM term parameter */
+                    utm_term?: string;
+                    /** @description UTM content parameter */
+                    utm_content?: string;
+                    /** @description Impact.com click ID for affiliate conversion tracking */
+                    im_ref?: string;
+                };
+            };
+        };
         responses: {
             /** @description Subscription checkout session created successfully */
             201: {
@@ -12155,6 +17515,15 @@ export interface operations {
                 };
                 content?: never;
             };
+            /** @description API key auth not allowed for this account (e.g., free tier) */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
             /** @description API key not found or invalid */
             404: {
                 headers: {
@@ -12175,6 +17544,52 @@ export interface operations {
             };
         };
     };
+    GenerateAdminToken: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description JWT token generated successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        /** @description The JWT admin token */
+                        token: string;
+                        /**
+                         * Format: date-time
+                         * @description When the token expires
+                         */
+                        expires_at: string;
+                    };
+                };
+            };
+            /** @description Unauthorized or user is not an admin */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
     GetAdminCustomerCloudSubscriptionStatus: {
         parameters: {
             query?: never;
@@ -12243,6 +17658,191 @@ export interface operations {
             };
         };
     };
+    GetAdminCustomerBalance: {
+        parameters: {
+            query?: never;
+            header: {
+                "X-Comfy-Admin-Secret": string;
+            };
+            path: {
+                customer_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Customer balance retrieved successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        /** Format: double */
+                        amount_micros: number;
+                        /** Format: double */
+                        prepaid_balance_micros?: number;
+                        /** Format: double */
+                        cloud_credit_balance_micros?: number;
+                        /** Format: double */
+                        pending_charges_micros?: number;
+                        /** Format: double */
+                        effective_balance_micros?: number;
+                        currency: string;
+                    };
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Customer not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    DeleteAdminCustomerStripeData: {
+        parameters: {
+            query?: never;
+            header: {
+                /** @description Admin API secret used to authorize this request */
+                "X-Comfy-Admin-Secret": string;
+            };
+            path: {
+                /** @description The ID of the customer whose Stripe data to delete */
+                customer_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Stripe data deleted successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        /** @description Success message */
+                        message?: string;
+                    };
+                };
+            };
+            /** @description Bad request - missing required parameter */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized or missing admin API secret */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Customer not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    PostAdminArchiveMetronomeData: {
+        parameters: {
+            query?: never;
+            header: {
+                /** @description Admin API secret used to authorize this request */
+                "X-Comfy-Admin-Secret": string;
+            };
+            path: {
+                /** @description The ID of the customer whose Metronome data to archive */
+                customer_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Metronome data archived successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        /** @description Success message */
+                        message?: string;
+                    };
+                };
+            };
+            /** @description Bad request - missing required parameter */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized or missing admin API secret */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Customer not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
     GetCustomerUsage: {
         parameters: {
             query?: never;
@@ -12250,7 +17850,28 @@ export interface operations {
             path?: never;
             cookie?: never;
         };
-        requestBody?: never;
+        requestBody?: {
+            content: {
+                "application/json": {
+                    /**
+                     * @description The type of dashboard to retrieve
+                     * @default usage
+                     * @enum {string}
+                     */
+                    dashboard_type?: "invoices" | "usage" | "credits" | "commits_and_credits";
+                    /** @description Optional list of colors to override for branding */
+                    color_overrides?: {
+                        /**
+                         * @description The color property to override
+                         * @enum {string}
+                         */
+                        name: "Gray_dark" | "Gray_medium" | "Gray_light" | "Gray_extralight" | "White" | "Primary_medium" | "Primary_light" | "UsageLine_0" | "UsageLine_1" | "UsageLine_2" | "UsageLine_3" | "UsageLine_4" | "UsageLine_5" | "UsageLine_6" | "UsageLine_7" | "UsageLine_8" | "UsageLine_9" | "Primary_green" | "Primary_red" | "Progress_bar" | "Progress_bar_background";
+                        /** @description Hex color code (e.g., "#FF5733") */
+                        value: string;
+                    }[];
+                };
+            };
+        };
         responses: {
             /** @description Successful response */
             200: {
@@ -12594,6 +18215,10 @@ export interface operations {
                 limit?: number;
                 /** @description Event type to filter */
                 filter?: string;
+                /** @description Start date for filtering events (RFC3339 format, e.g., 2025-01-01T00:00:00Z) */
+                start_date?: string;
+                /** @description End date for filtering events (RFC3339 format, e.g., 2025-01-31T23:59:59Z) */
+                end_date?: string;
             };
             header?: never;
             path: {
@@ -12656,6 +18281,10 @@ export interface operations {
                 limit?: number;
                 /** @description Event type to filter */
                 filter?: string;
+                /** @description Start date for filtering events (RFC3339 format, e.g., 2025-01-01T00:00:00Z) */
+                start_date?: string;
+                /** @description End date for filtering events (RFC3339 format, e.g., 2025-01-31T23:59:59Z) */
+                end_date?: string;
             };
             header?: never;
             path?: never;
@@ -14858,6 +20487,82 @@ export interface operations {
             };
         };
     };
+    adminListAllNodeVersions: {
+        parameters: {
+            query?: {
+                nodeId?: string;
+                statuses?: components["schemas"]["NodeVersionStatus"][];
+                include_status_reason?: boolean;
+                /** @description The page number to retrieve. */
+                page?: number;
+                /** @description The number of items to include per page. */
+                pageSize?: number;
+                /** @description search for status_reason, case insensitive */
+                status_reason?: string;
+                /** @description Include soft-deleted node versions in the results */
+                include_deleted?: boolean;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description List of all node versions */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        /** @description Total number of node versions available */
+                        total?: number;
+                        versions?: components["schemas"]["NodeVersion"][];
+                        /** @description Current page number */
+                        page?: number;
+                        /** @description Maximum number of node versions per page. Maximum is 100. */
+                        pageSize?: number;
+                        /** @description Total number of pages available */
+                        totalPages?: number;
+                    };
+                };
+            };
+            /** @description Invalid input, object invalid */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Forbidden */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
     listCoupons: {
         parameters: {
             query?: {
@@ -18166,6 +23871,198 @@ export interface operations {
             };
         };
     };
+    klingCreateMotionControl: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** @description Create task for generating motion control video */
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["KlingMotionControlRequest"];
+            };
+        };
+        responses: {
+            /** @description Successful response (Request successful) */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingMotionControlResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+        };
+    };
+    klingMotionControlQuerySingleTask: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Task ID or external_task_id */
+                id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful response (Request successful) */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingMotionControlResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+        };
+    };
     klingCreateOmniVideo: {
         parameters: {
             query?: never;
@@ -18358,6 +24255,259 @@ export interface operations {
             };
         };
     };
+    klingCreateAvatarVideo: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** @description Create task for generating avatar video from image and audio */
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["KlingAvatarRequest"];
+            };
+        };
+        responses: {
+            /** @description Successful response (Request successful) */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingAvatarResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+        };
+    };
+    klingAvatarQueryTask: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Task ID or external_task_id */
+                id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful response (Request successful) */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingAvatarResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+        };
+    };
+    klingGetPresetsElements: {
+        parameters: {
+            query?: {
+                /** @description Page number. Value range: [1, 1000]. */
+                pageNum?: number;
+                /** @description Data volume per page. Value range: [1, 500]. */
+                pageSize?: number;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Presets elements retrieved successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingPresetsElementsResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+        };
+    };
     klingImageGenerationsQueryTaskList: {
         parameters: {
             query?: {
@@ -20699,6 +26849,30 @@ export interface operations {
             };
         };
     };
+    RecraftCreateStyle: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "multipart/form-data": components["schemas"]["RecraftCreateStyleRequest"];
+            };
+        };
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["RecraftCreateStyleResponse"];
+                };
+            };
+        };
+    };
     runwayImageToVideo: {
         parameters: {
             query?: never;
@@ -23794,6 +29968,90 @@ export interface operations {
             };
         };
     };
+    ViduExtend: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["ViduExtendRequest"];
+            };
+        };
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ViduExtendReply"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+        };
+    };
+    ViduMultiframe: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["ViduMultiframeRequest"];
+            };
+        };
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ViduMultiframeReply"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+        };
+    };
     ViduGetCreations: {
         parameters: {
             query?: never;
@@ -23932,6 +30190,38 @@ export interface operations {
             };
         };
     };
+    byteplusSeedance2VideoGenerationQuery: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description The ID of the Seedance 2.0 video generation task to query */
+                task_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Video generation task information retrieved successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BytePlusVideoGenerationQueryResponse"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
     wanVideoGeneration: {
         parameters: {
             query?: never;
@@ -24293,6 +30583,3095 @@ export interface operations {
             };
         };
     };
+    meshyTextTo3DCreate: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["MeshyTextTo3DRequest"];
+            };
+        };
+        responses: {
+            /** @description Task created successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["MeshyTextTo3DCreateResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+        };
+    };
+    meshyTextTo3DGetTask: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description The unique identifier of the task */
+                task_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Task retrieved successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["MeshyTextTo3DTask"];
+                };
+            };
+            /** @description Task not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+        };
+    };
+    meshyImageTo3DCreate: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["MeshyImageTo3DRequest"];
+            };
+        };
+        responses: {
+            /** @description Task created successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["MeshyImageTo3DCreateResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+        };
+    };
+    meshyImageTo3DGetTask: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description The unique identifier of the task */
+                task_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Task retrieved successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["MeshyImageTo3DTask"];
+                };
+            };
+            /** @description Task not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+        };
+    };
+    meshyMultiImageTo3DCreate: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["MeshyMultiImageTo3DRequest"];
+            };
+        };
+        responses: {
+            /** @description Task created successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["MeshyMultiImageTo3DCreateResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+        };
+    };
+    meshyMultiImageTo3DGetTask: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description The unique identifier of the task */
+                task_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Task retrieved successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["MeshyMultiImageTo3DTask"];
+                };
+            };
+            /** @description Task not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+        };
+    };
+    meshyRemeshCreate: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["MeshyRemeshRequest"];
+            };
+        };
+        responses: {
+            /** @description Task created successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["MeshyRemeshCreateResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+        };
+    };
+    meshyRemeshGetTask: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description The unique identifier of the task */
+                task_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Task retrieved successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["MeshyRemeshTask"];
+                };
+            };
+            /** @description Task not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+        };
+    };
+    meshyRiggingCreate: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["MeshyRiggingRequest"];
+            };
+        };
+        responses: {
+            /** @description Task created successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["MeshyRiggingCreateResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+        };
+    };
+    meshyRiggingGetTask: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description The unique identifier of the task */
+                task_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Task retrieved successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["MeshyRiggingTask"];
+                };
+            };
+            /** @description Task not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+        };
+    };
+    meshyRetextureCreate: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["MeshyRetextureRequest"];
+            };
+        };
+        responses: {
+            /** @description Task created successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["MeshyRetextureCreateResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+        };
+    };
+    meshyRetextureGetTask: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description The unique identifier of the task */
+                task_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Task retrieved successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["MeshyRetextureTask"];
+                };
+            };
+            /** @description Task not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+        };
+    };
+    meshyAnimationCreate: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["MeshyAnimationRequest"];
+            };
+        };
+        responses: {
+            /** @description Task created successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["MeshyAnimationCreateResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+        };
+    };
+    meshyAnimationGetTask: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description The unique identifier of the task */
+                task_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Task retrieved successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["MeshyAnimationTask"];
+                };
+            };
+            /** @description Task not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+        };
+    };
+    xaiImageGenerate: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["XAIImageGenerationRequest"];
+            };
+        };
+        responses: {
+            /** @description Images generated successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["XAIImageGenerationResponse"];
+                };
+            };
+            /** @description Bad request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    xaiImageEdit: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["XAIImageEditRequest"];
+            };
+        };
+        responses: {
+            /** @description Image edited successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["XAIImageGenerationResponse"];
+                };
+            };
+            /** @description Bad request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    xaiVideoGenerate: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["XAIVideoGenerationRequest"];
+            };
+        };
+        responses: {
+            /** @description Video generation job created successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["XAIVideoAsyncResponse"];
+                };
+            };
+            /** @description Bad request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    xaiVideoEdit: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["XAIVideoEditRequest"];
+            };
+        };
+        responses: {
+            /** @description Video editing job created successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["XAIVideoAsyncResponse"];
+                };
+            };
+            /** @description Bad request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    xaiVideoExtension: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["XAIVideoExtensionRequest"];
+            };
+        };
+        responses: {
+            /** @description Video extension job created successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["XAIVideoAsyncResponse"];
+                };
+            };
+            /** @description Bad request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    xaiVideoGetResult: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description The request ID returned by the video generation or editing endpoint */
+                request_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Video generation result */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["XAIVideoResultResponse"];
+                };
+            };
+            /** @description Video generation still pending */
+            202: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["XAIVideoResultResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Request ID not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    quiverTextToSVG: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["QuiverTextToSVGRequest"];
+            };
+        };
+        responses: {
+            /** @description SVG generated successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["QuiverSVGResponse"];
+                };
+            };
+            /** @description Bad request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required - Insufficient credits */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Too Many Requests - Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    quiverImageToSVG: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["QuiverImageToSVGRequest"];
+            };
+        };
+        responses: {
+            /** @description SVG vectorization completed successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["QuiverSVGResponse"];
+                };
+            };
+            /** @description Bad request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required - Insufficient credits */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Too Many Requests - Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    reveImageCreate: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["ReveImageCreateRequest"];
+            };
+        };
+        responses: {
+            /** @description Successful response from Reve proxy */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ReveImageResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    reveImageEdit: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["ReveImageEditRequest"];
+            };
+        };
+        responses: {
+            /** @description Successful response from Reve proxy */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ReveImageResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    reveImageRemix: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["ReveImageRemixRequest"];
+            };
+        };
+        responses: {
+            /** @description Successful response from Reve proxy */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ReveImageResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    briaFiboEdit: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["BriaFiboEditRequest"];
+            };
+        };
+        responses: {
+            /** @description Request accepted, processing asynchronously */
+            202: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BriaAsyncResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Content moderation failure */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BriaErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    briaStructuredInstructionGenerate: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["BriaStructuredInstructionRequest"];
+            };
+        };
+        responses: {
+            /** @description Request accepted, processing asynchronously */
+            202: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BriaAsyncResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Content moderation failure */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BriaErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    briaGetStatus: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Unique identifier of the request (returned from edit, generate, or remove_background endpoints) */
+                request_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Status retrieved successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BriaStatusResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Request ID not found or expired */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BriaStatusNotFoundResponse"];
+                };
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    briaVideoRemoveBackground: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["BriaVideoRemoveBackgroundRequest"];
+            };
+        };
+        responses: {
+            /** @description Request accepted, processing asynchronously */
+            202: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BriaAsyncResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BriaErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unprocessable Entity */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BriaErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    briaImageRemoveBackground: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["BriaImageRemoveBackgroundRequest"];
+            };
+        };
+        responses: {
+            /** @description Request accepted, processing asynchronously */
+            202: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BriaAsyncResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BriaErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Content moderation failure */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BriaErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    wavespeedFlashVSRSubmit: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["WavespeedFlashVSRRequest"];
+            };
+        };
+        responses: {
+            /** @description Task submitted successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["WavespeedTaskResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    wavespeedFlashVSRGetResult: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description The unique identifier of the prediction/task */
+                prediction_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Task result retrieved successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["WavespeedTaskResultResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Task not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    wavespeedSeedVR2ImageSubmit: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["WavespeedSeedVR2ImageRequest"];
+            };
+        };
+        responses: {
+            /** @description Task submitted successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["WavespeedTaskResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    wavespeedUltimateImageUpscalerSubmit: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["WavespeedSeedVR2ImageRequest"];
+            };
+        };
+        responses: {
+            /** @description Task submitted successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["WavespeedTaskResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    tencentHunyuan3DProSubmit: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["TencentHunyuan3DProRequest"];
+            };
+        };
+        responses: {
+            /** @description Task submitted successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TencentHunyuan3DProResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TencentErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TencentErrorResponse"];
+                };
+            };
+        };
+    };
+    tencentHunyuan3DProQuery: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["TencentHunyuan3DQueryRequest"];
+            };
+        };
+        responses: {
+            /** @description Task status retrieved successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TencentHunyuan3DQueryResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TencentErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TencentErrorResponse"];
+                };
+            };
+        };
+    };
+    tencentHunyuan3DUVSubmit: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["TencentHunyuan3DUVRequest"];
+            };
+        };
+        responses: {
+            /** @description Task submitted successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TencentHunyuan3DUVResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TencentErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TencentErrorResponse"];
+                };
+            };
+        };
+    };
+    tencentHunyuan3DUVQuery: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["TencentHunyuan3DQueryRequest"];
+            };
+        };
+        responses: {
+            /** @description Task status retrieved successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TencentHunyuan3DQueryResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TencentErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TencentErrorResponse"];
+                };
+            };
+        };
+    };
+    tencentHunyuan3DTextureEditSubmit: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["TencentHunyuan3DTextureEditRequest"];
+            };
+        };
+        responses: {
+            /** @description Task submitted successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TencentHunyuan3DUVResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TencentErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TencentErrorResponse"];
+                };
+            };
+        };
+    };
+    tencentHunyuan3DTextureEditQuery: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["TencentHunyuan3DQueryRequest"];
+            };
+        };
+        responses: {
+            /** @description Task status retrieved successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TencentHunyuan3DQueryResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TencentErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TencentErrorResponse"];
+                };
+            };
+        };
+    };
+    tencentHunyuan3DPartSubmit: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["TencentHunyuan3DUVRequest"];
+            };
+        };
+        responses: {
+            /** @description Task submitted successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TencentHunyuan3DUVResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TencentErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TencentErrorResponse"];
+                };
+            };
+        };
+    };
+    tencentHunyuan3DPartQuery: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["TencentHunyuan3DQueryRequest"];
+            };
+        };
+        responses: {
+            /** @description Task status retrieved successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TencentHunyuan3DQueryResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TencentErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TencentErrorResponse"];
+                };
+            };
+        };
+    };
+    tencentHunyuan3DSmartTopologySubmit: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["TencentHunyuan3DSmartTopologyRequest"];
+            };
+        };
+        responses: {
+            /** @description Task submitted successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TencentHunyuan3DUVResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TencentErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TencentErrorResponse"];
+                };
+            };
+        };
+    };
+    tencentHunyuan3DSmartTopologyQuery: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["TencentHunyuan3DQueryRequest"];
+            };
+        };
+        responses: {
+            /** @description Task status retrieved successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TencentHunyuan3DQueryResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TencentErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TencentErrorResponse"];
+                };
+            };
+        };
+    };
+    hitpawPhotoEnhancer: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["HitPawPhotoEnhancerRequest"];
+            };
+        };
+        responses: {
+            /** @description Task submitted successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["HitPawJobResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["HitPawErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["HitPawErrorResponse"];
+                };
+            };
+        };
+    };
+    hitpawTaskStatus: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["HitPawTaskStatusRequest"];
+            };
+        };
+        responses: {
+            /** @description Task status retrieved successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["HitPawTaskStatusResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["HitPawErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["HitPawErrorResponse"];
+                };
+            };
+        };
+    };
+    hitpawVideoEnhancer: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["HitPawVideoEnhancerRequest"];
+            };
+        };
+        responses: {
+            /** @description Task submitted successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["HitPawJobResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["HitPawErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required - Insufficient credits */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["HitPawErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["HitPawErrorResponse"];
+                };
+            };
+        };
+    };
+    ElevenLabsTextToSpeech: {
+        parameters: {
+            query?: {
+                /** @description When set to false, enables zero retention mode (enterprise only). History features will be unavailable. */
+                enable_logging?: boolean;
+                /**
+                 * @description Deprecated. Latency optimization levels (0-4):
+                 *     0 - default mode (no latency optimizations)
+                 *     1 - normal latency optimizations (~50% improvement)
+                 *     2 - strong latency optimizations (~75% improvement)
+                 *     3 - max latency optimizations
+                 *     4 - max latency with text normalizer off (best latency but may mispronounce)
+                 */
+                optimize_streaming_latency?: number;
+                /**
+                 * @description Output format of the generated audio. Formatted as codec_sample_rate_bitrate.
+                 *     Examples: mp3_22050_32, mp3_44100_128, pcm_16000, pcm_22050, ulaw_8000
+                 */
+                output_format?: "mp3_22050_32" | "mp3_44100_32" | "mp3_44100_64" | "mp3_44100_96" | "mp3_44100_128" | "mp3_44100_192" | "pcm_8000" | "pcm_16000" | "pcm_22050" | "pcm_24000" | "pcm_32000" | "pcm_44100" | "pcm_48000" | "ulaw_8000" | "alaw_8000" | "opus_48000_32" | "opus_48000_64" | "opus_48000_96" | "opus_48000_128" | "opus_48000_192" | "wav_8000" | "wav_16000" | "wav_22050" | "wav_24000" | "wav_32000" | "wav_44100" | "wav_48000";
+            };
+            header?: never;
+            path: {
+                /** @description ID of the voice to use. Use the Get voices endpoint to list all available voices. */
+                voice_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["ElevenLabsTTSRequest"];
+            };
+        };
+        responses: {
+            /** @description The generated audio file */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "audio/mpeg": string;
+                    "audio/wav": string;
+                    "audio/ogg": string;
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ElevenLabsValidationError"];
+                };
+            };
+        };
+    };
+    ElevenLabsSpeechToText: {
+        parameters: {
+            query?: {
+                /**
+                 * @description When enable_logging is set to false zero retention mode will be used for the request.
+                 *     This will mean log and transcript storage features are unavailable for this request.
+                 *     Zero retention mode may only be used by enterprise customers.
+                 */
+                enable_logging?: boolean;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "multipart/form-data": components["schemas"]["ElevenLabsSTTRequest"];
+            };
+        };
+        responses: {
+            /** @description Synchronous transcription result */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ElevenLabsSTTResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ElevenLabsValidationError"];
+                };
+            };
+        };
+    };
+    ElevenLabsSpeechToSpeech: {
+        parameters: {
+            query?: {
+                /**
+                 * @description When enable_logging is set to false zero retention mode will be used for the request.
+                 *     This will mean history features are unavailable for this request, including request stitching.
+                 *     Zero retention mode may only be used by enterprise customers.
+                 */
+                enable_logging?: boolean;
+                /**
+                 * @description Latency optimization levels (0-4):
+                 *     0 - default mode (no latency optimizations)
+                 *     1 - normal latency optimizations (~50% improvement)
+                 *     2 - strong latency optimizations (~75% improvement)
+                 *     3 - max latency optimizations
+                 *     4 - max latency with text normalizer off (best latency but may mispronounce)
+                 */
+                optimize_streaming_latency?: number | null;
+                /**
+                 * @description Output format of the generated audio. Formatted as codec_sample_rate_bitrate.
+                 *     Examples: mp3_22050_32, mp3_44100_128, pcm_16000, ulaw_8000
+                 */
+                output_format?: "mp3_22050_32" | "mp3_24000_48" | "mp3_44100_32" | "mp3_44100_64" | "mp3_44100_96" | "mp3_44100_128" | "mp3_44100_192" | "pcm_8000" | "pcm_16000" | "pcm_22050" | "pcm_24000" | "pcm_32000" | "pcm_44100" | "pcm_48000" | "ulaw_8000" | "alaw_8000" | "opus_48000_32" | "opus_48000_64" | "opus_48000_96" | "opus_48000_128" | "opus_48000_192";
+            };
+            header?: never;
+            path: {
+                /** @description ID of the voice to be used. Use the Get voices endpoint to list all available voices. */
+                voice_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "multipart/form-data": components["schemas"]["ElevenLabsSpeechToSpeechRequest"];
+            };
+        };
+        responses: {
+            /** @description The generated audio file */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "audio/mpeg": string;
+                    "audio/wav": string;
+                    "audio/ogg": string;
+                    "application/octet-stream": string;
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ElevenLabsValidationError"];
+                };
+            };
+        };
+    };
+    ElevenLabsAudioIsolation: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "multipart/form-data": components["schemas"]["ElevenLabsAudioIsolationRequest"];
+            };
+        };
+        responses: {
+            /** @description The isolated audio file */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "audio/mpeg": string;
+                    "application/octet-stream": string;
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ElevenLabsValidationError"];
+                };
+            };
+        };
+    };
+    ElevenLabsCreateVoice: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "multipart/form-data": components["schemas"]["ElevenLabsCreateVoiceRequest"];
+            };
+        };
+        responses: {
+            /** @description Voice created successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        voice_id?: string;
+                        requires_verification?: boolean;
+                    };
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ElevenLabsValidationError"];
+                };
+            };
+        };
+    };
+    ElevenLabsGetSharedVoices: {
+        parameters: {
+            query?: {
+                /** @description How many shared voices to return at maximum. Can not exceed 100, defaults to 30. */
+                page_size?: number;
+                /** @description Voice category used for filtering. One of: professional, famous, high_quality. */
+                category?: string;
+                /** @description Gender used for filtering */
+                gender?: string;
+                /** @description Age used for filtering */
+                age?: string;
+                /** @description Accent used for filtering */
+                accent?: string;
+                /** @description Language used for filtering */
+                language?: string;
+                /** @description Locale used for filtering */
+                locale?: string;
+                /** @description Search term used for filtering */
+                search?: string;
+                /** @description Use-case used for filtering */
+                use_cases?: string[];
+                /** @description Descriptives used for filtering */
+                descriptives?: string[];
+                /** @description Filter featured voices */
+                featured?: boolean;
+                /** @description Filter voices with a minimum notice period of the given number of days. */
+                min_notice_period_days?: number;
+                /** @description Include/exclude voices with custom rates */
+                include_custom_rates?: boolean;
+                /** @description Include/exclude voices that are live moderated */
+                include_live_moderated?: boolean;
+                /** @description Filter voices that are enabled for the reader app */
+                reader_app_enabled?: boolean;
+                /** @description Filter voices by public owner ID */
+                owner_id?: string;
+                /** @description Sort criteria */
+                sort?: string;
+                /** @description Page number */
+                page?: number;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Shared voices retrieved successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ElevenLabsSharedVoicesPaginatedResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ElevenLabsValidationError"];
+                };
+            };
+        };
+    };
+    ElevenLabsGetVoices: {
+        parameters: {
+            query?: {
+                /** @description Search term used to filter voices by name or description. */
+                search?: string;
+                /** @description How many voices to return per page. Max 100, defaults to 10. */
+                page_size?: number;
+                /** @description Pagination cursor returned by a previous call. */
+                next_page_token?: string;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Voices retrieved successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ElevenLabsVoicesPaginatedResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    ElevenLabsSoundGeneration: {
+        parameters: {
+            query?: {
+                /**
+                 * @description Output format of the generated audio. Formatted as codec_sample_rate_bitrate.
+                 *     Examples: mp3_22050_32, mp3_44100_128, pcm_16000, ulaw_8000
+                 */
+                output_format?: "mp3_22050_32" | "mp3_24000_48" | "mp3_44100_32" | "mp3_44100_64" | "mp3_44100_96" | "mp3_44100_128" | "mp3_44100_192" | "pcm_8000" | "pcm_16000" | "pcm_22050" | "pcm_24000" | "pcm_32000" | "pcm_44100" | "pcm_48000" | "ulaw_8000" | "alaw_8000" | "opus_48000_32" | "opus_48000_64" | "opus_48000_96" | "opus_48000_128" | "opus_48000_192";
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["ElevenLabsSoundGenerationRequest"];
+            };
+        };
+        responses: {
+            /** @description The generated sound effect audio file */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "audio/mpeg": string;
+                    "application/octet-stream": string;
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ElevenLabsValidationError"];
+                };
+            };
+        };
+    };
+    ElevenLabsTextToDialogue: {
+        parameters: {
+            query?: {
+                /**
+                 * @description Output format of the generated audio. Formatted as codec_sample_rate_bitrate.
+                 *     Examples: mp3_22050_32, mp3_44100_128, pcm_16000, ulaw_8000
+                 */
+                output_format?: "mp3_22050_32" | "mp3_24000_48" | "mp3_44100_32" | "mp3_44100_64" | "mp3_44100_96" | "mp3_44100_128" | "mp3_44100_192" | "pcm_8000" | "pcm_16000" | "pcm_22050" | "pcm_24000" | "pcm_32000" | "pcm_44100" | "pcm_48000" | "ulaw_8000" | "alaw_8000" | "opus_48000_32" | "opus_48000_64" | "opus_48000_96" | "opus_48000_128" | "opus_48000_192";
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["ElevenLabsTextToDialogueRequest"];
+            };
+        };
+        responses: {
+            /** @description The generated audio file */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "audio/mpeg": string;
+                    "audio/wav": string;
+                    "audio/ogg": string;
+                    "application/octet-stream": string;
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ElevenLabsValidationError"];
+                };
+            };
+        };
+    };
     getFeatures: {
         parameters: {
             query?: never;
@@ -24313,4 +33692,604 @@ export interface operations {
             };
         };
     };
+    freepikMagnificUpscalerCreative: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["FreepikMagnificUpscalerCreativeRequest"];
+            };
+        };
+        responses: {
+            /** @description OK - The upscaling process has started */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FreepikTaskResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FreepikErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FreepikErrorResponse"];
+                };
+            };
+        };
+    };
+    freepikMagnificUpscalerCreativeGetStatus: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description ID of the task */
+                task_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description OK - The task status is returned */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FreepikTaskResponse"];
+                };
+            };
+            /** @description Task not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FreepikErrorResponse"];
+                };
+            };
+        };
+    };
+    freepikMagnificUpscalerPrecisionV2: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["FreepikMagnificUpscalerPrecisionV2Request"];
+            };
+        };
+        responses: {
+            /** @description OK - The upscaling process has started */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FreepikTaskResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FreepikErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FreepikErrorResponse"];
+                };
+            };
+        };
+    };
+    freepikMagnificUpscalerPrecisionV2GetStatus: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description ID of the task */
+                task_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description OK - The task status is returned */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FreepikTaskResponse"];
+                };
+            };
+            /** @description Task not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FreepikErrorResponse"];
+                };
+            };
+        };
+    };
+    freepikMagnificRelight: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["FreepikMagnificRelightRequest"];
+            };
+        };
+        responses: {
+            /** @description OK - The relight process has started */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FreepikTaskResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FreepikErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FreepikErrorResponse"];
+                };
+            };
+        };
+    };
+    freepikMagnificRelightGetStatus: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description ID of the task */
+                task_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description OK - The task status is returned */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FreepikTaskResponse"];
+                };
+            };
+            /** @description Task not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FreepikErrorResponse"];
+                };
+            };
+        };
+    };
+    freepikSkinEnhancerCreative: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["FreepikSkinEnhancerCreativeRequest"];
+            };
+        };
+        responses: {
+            /** @description OK - The skin enhancer process has started */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FreepikTaskResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FreepikErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FreepikErrorResponse"];
+                };
+            };
+        };
+    };
+    freepikSkinEnhancerFlexible: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["FreepikSkinEnhancerFlexibleRequest"];
+            };
+        };
+        responses: {
+            /** @description OK - The skin enhancer process has started */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FreepikTaskResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FreepikErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FreepikErrorResponse"];
+                };
+            };
+        };
+    };
+    freepikSkinEnhancerFaithful: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["FreepikSkinEnhancerFaithfulRequest"];
+            };
+        };
+        responses: {
+            /** @description OK - The skin enhancer process has started */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FreepikTaskResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FreepikErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FreepikErrorResponse"];
+                };
+            };
+        };
+    };
+    freepikSkinEnhancerGetStatus: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description ID of the task */
+                task_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description OK - The task status is returned */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FreepikTaskResponse"];
+                };
+            };
+            /** @description Task not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FreepikErrorResponse"];
+                };
+            };
+        };
+    };
+    freepikMagnificStyleTransfer: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["FreepikMagnificStyleTransferRequest"];
+            };
+        };
+        responses: {
+            /** @description OK - The style transfer process has started */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FreepikTaskData"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FreepikErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FreepikErrorResponse"];
+                };
+            };
+        };
+    };
+    freepikMagnificStyleTransferGetStatus: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description ID of the task */
+                task_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description OK - The task status is returned */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FreepikTaskResponse"];
+                };
+            };
+            /** @description Task not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FreepikErrorResponse"];
+                };
+            };
+        };
+    };
+    soniloVideoToMusicGenerate: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "multipart/form-data": components["schemas"]["SoniloVideoToMusicRequest"];
+            };
+        };
+        responses: {
+            /** @description OK - Streaming NDJSON response with audio generation events */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/x-ndjson": components["schemas"]["SoniloStreamEvent"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["SoniloErrorResponse"];
+                };
+            };
+            /** @description Unauthorized - Invalid or missing API key */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["SoniloErrorResponse"];
+                };
+            };
+            /** @description Payload Too Large - Video exceeds size limit */
+            413: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["SoniloErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["SoniloErrorResponse"];
+                };
+            };
+        };
+    };
+    soniloTextToMusicGenerate: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "multipart/form-data": components["schemas"]["SoniloTextToMusicRequest"];
+            };
+        };
+        responses: {
+            /** @description OK - Streaming NDJSON response with audio generation events */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/x-ndjson": components["schemas"]["SoniloStreamEvent"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["SoniloErrorResponse"];
+                };
+            };
+            /** @description Unauthorized - Invalid or missing API key */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["SoniloErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["SoniloErrorResponse"];
+                };
+            };
+        };
+    };
 }
diff --git a/packages/shared-frontend-utils/src/formatUtil.test.ts b/packages/shared-frontend-utils/src/formatUtil.test.ts
index d494126db5..93300a9644 100644
--- a/packages/shared-frontend-utils/src/formatUtil.test.ts
+++ b/packages/shared-frontend-utils/src/formatUtil.test.ts
@@ -62,7 +62,8 @@ describe('formatUtil', () => {
         { filename: 'animation.gif', expected: 'image' },
         { filename: 'web.webp', expected: 'image' },
         { filename: 'bitmap.bmp', expected: 'image' },
-        { filename: 'modern.avif', expected: 'image' }
+        { filename: 'modern.avif', expected: 'image' },
+        { filename: 'logo.svg', expected: 'image' }
       ]
 
       it.for(imageTestCases)(
diff --git a/packages/shared-frontend-utils/src/formatUtil.ts b/packages/shared-frontend-utils/src/formatUtil.ts
index 499745a6f1..874cc60936 100644
--- a/packages/shared-frontend-utils/src/formatUtil.ts
+++ b/packages/shared-frontend-utils/src/formatUtil.ts
@@ -542,7 +542,8 @@ const IMAGE_EXTENSIONS = [
   'bmp',
   'avif',
   'tif',
-  'tiff'
+  'tiff',
+  'svg'
 ] as const
 const VIDEO_EXTENSIONS = ['mp4', 'webm', 'mov', 'avi'] as const
 const AUDIO_EXTENSIONS = ['mp3', 'wav', 'ogg', 'flac'] as const
diff --git a/playwright.config.ts b/playwright.config.ts
index d66c3fa1eb..d5243425f6 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -1,17 +1,14 @@
-import { defineConfig, devices } from '@playwright/test'
 import type { PlaywrightTestConfig } from '@playwright/test'
+import { defineConfig, devices } from '@playwright/test'
 
 const maybeLocalOptions: PlaywrightTestConfig = process.env.PLAYWRIGHT_LOCAL
   ? {
-      // VERY HELPFUL: Skip screenshot tests locally
-      // grep: process.env.CI ? undefined : /^(?!.*screenshot).*$/,
-      timeout: 30_000, // Longer timeout for breakpoints
-      retries: 0, // No retries while debugging. Increase if writing new tests. that may be flaky.
-      workers: 1, // Single worker for easier debugging. Increase to match CPU cores if you want to run a lot of tests in parallel.
-
+      timeout: 30_000,
+      retries: 0,
+      workers: 1,
       use: {
-        trace: 'on', // Always capture traces (CI uses 'on-first-retry')
-        video: 'on' // Always record video (CI uses 'retain-on-failure')
+        trace: 'on',
+        video: 'on'
       }
     }
   : {
@@ -36,7 +33,7 @@ export default defineConfig({
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
       timeout: 15000,
-      grepInvert: /@mobile|@perf|@audit/ // Run all tests except those tagged with @mobile, @perf, or @audit
+      grepInvert: /@mobile|@perf|@audit|@cloud/
     },
 
     {
@@ -65,52 +62,28 @@ export default defineConfig({
       name: 'chromium-2x',
       use: { ...devices['Desktop Chrome'], deviceScaleFactor: 2 },
       timeout: 15000,
-      grep: /@2x/ // Run all tests tagged with @2x
+      grep: /@2x/
     },
 
     {
       name: 'chromium-0.5x',
       use: { ...devices['Desktop Chrome'], deviceScaleFactor: 0.5 },
       timeout: 15000,
-      grep: /@0.5x/ // Run all tests tagged with @0.5x
+      grep: /@0.5x/
     },
 
-    // {
-    //   name: 'firefox',
-    //   use: { ...devices['Desktop Firefox'] },
-    // },
+    {
+      name: 'cloud',
+      use: { ...devices['Desktop Chrome'] },
+      timeout: 15000,
+      grep: /@cloud/,
+      grepInvert: /@oss/
+    },
 
-    // {
-    //   name: 'webkit',
-    //   use: { ...devices['Desktop Safari'] },
-    // },
-
-    /* Test against mobile viewports. */
     {
       name: 'mobile-chrome',
       use: { ...devices['Pixel 5'], hasTouch: true },
-      grep: /@mobile/ // Run only tests tagged with @mobile
+      grep: /@mobile/
     }
-    // {
-    //   name: 'Mobile Safari',
-    //   use: { ...devices['iPhone 12'] },
-    // },
-
-    /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-    // },
   ]
-
-  /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: 'pnpm dev',
-  //   url: 'http://127.0.0.1:5173',
-  //   reuseExistingServer: !process.env.CI,
-  // },
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9263634b75..7a589421d4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,6 +9,12 @@ catalogs:
     '@alloc/quick-lru':
       specifier: ^5.2.0
       version: 5.2.0
+    '@astrojs/check':
+      specifier: ^0.9.8
+      version: 0.9.8
+    '@astrojs/sitemap':
+      specifier: ^3.7.1
+      version: 3.7.1
     '@astrojs/vue':
       specifier: ^5.0.0
       version: 5.1.4
@@ -102,6 +108,9 @@ catalogs:
     '@tailwindcss/vite':
       specifier: ^4.2.0
       version: 4.2.0
+    '@tanstack/vue-virtual':
+      specifier: ^3.13.12
+      version: 3.13.12
     '@testing-library/jest-dom':
       specifier: ^6.9.1
       version: 6.9.1
@@ -135,6 +144,9 @@ catalogs:
     '@tiptap/starter-kit':
       specifier: ^2.27.2
       version: 2.27.2
+    '@total-typescript/shoehorn':
+      specifier: ^0.1.2
+      version: 0.1.2
     '@types/fs-extra':
       specifier: ^11.0.4
       version: 11.0.4
@@ -162,9 +174,6 @@ catalogs:
     '@vitest/ui':
       specifier: ^4.0.16
       version: 4.0.16
-    '@vue/test-utils':
-      specifier: ^2.4.6
-      version: 2.4.6
     '@vueuse/core':
       specifier: ^14.2.0
       version: 14.2.0
@@ -211,8 +220,11 @@ catalogs:
       specifier: ^4.16.1
       version: 4.16.1
     eslint-plugin-oxlint:
-      specifier: 1.55.0
-      version: 1.55.0
+      specifier: 1.59.0
+      version: 1.59.0
+    eslint-plugin-playwright:
+      specifier: ^2.10.1
+      version: 2.10.1
     eslint-plugin-storybook:
       specifier: ^10.2.10
       version: 10.2.10
@@ -237,6 +249,9 @@ catalogs:
     globals:
       specifier: ^16.5.0
       version: 16.5.0
+    gsap:
+      specifier: ^3.14.2
+      version: 3.14.2
     happy-dom:
       specifier: ^20.0.11
       version: 20.0.11
@@ -256,8 +271,11 @@ catalogs:
       specifier: ^0.7.3
       version: 0.7.3
     knip:
-      specifier: ^6.0.1
-      version: 6.0.1
+      specifier: ^6.3.1
+      version: 6.3.1
+    lenis:
+      specifier: ^1.3.21
+      version: 1.3.21
     lint-staged:
       specifier: ^16.2.7
       version: 16.4.0
@@ -267,18 +285,21 @@ catalogs:
     mixpanel-browser:
       specifier: ^2.71.0
       version: 2.71.0
+    monocart-coverage-reports:
+      specifier: ^2.12.9
+      version: 2.12.9
     nx:
       specifier: 22.6.1
       version: 22.6.1
     oxfmt:
-      specifier: ^0.40.0
-      version: 0.40.0
+      specifier: ^0.44.0
+      version: 0.44.0
     oxlint:
-      specifier: ^1.55.0
-      version: 1.55.0
+      specifier: ^1.59.0
+      version: 1.59.0
     oxlint-tsgolint:
-      specifier: ^0.17.0
-      version: 0.17.0
+      specifier: ^0.20.0
+      version: 0.20.0
     picocolors:
       specifier: ^1.1.1
       version: 1.1.1
@@ -452,6 +473,9 @@ importers:
       '@sparkjsdev/spark':
         specifier: 'catalog:'
         version: 0.1.10
+      '@tanstack/vue-virtual':
+        specifier: 'catalog:'
+        version: 3.13.12(vue@3.5.13(typescript@5.9.3))
       '@tiptap/core':
         specifier: 'catalog:'
         version: 2.27.2(@tiptap/pm@2.27.2)
@@ -594,6 +618,9 @@ importers:
         specifier: 'catalog:'
         version: 3.3.0(zod@3.25.76)
     devDependencies:
+      '@comfyorg/ingest-types':
+        specifier: workspace:*
+        version: link:packages/ingest-types
       '@eslint/js':
         specifier: 'catalog:'
         version: 9.39.1
@@ -648,6 +675,9 @@ importers:
       '@testing-library/vue':
         specifier: 'catalog:'
         version: 8.1.0(@vue/compiler-sfc@3.5.28)(vue@3.5.13(typescript@5.9.3))
+      '@total-typescript/shoehorn':
+        specifier: 'catalog:'
+        version: 0.1.2
       '@types/fs-extra':
         specifier: 'catalog:'
         version: 11.0.4
@@ -672,9 +702,6 @@ importers:
       '@vitest/ui':
         specifier: 'catalog:'
         version: 4.0.16(vitest@4.0.16)
-      '@vue/test-utils':
-        specifier: 'catalog:'
-        version: 2.4.6
       '@webgpu/types':
         specifier: 'catalog:'
         version: 0.1.66
@@ -692,13 +719,16 @@ importers:
         version: 4.4.4(eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.56.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint@9.39.1(jiti@2.6.1)))(eslint-plugin-import@2.32.0)(eslint@9.39.1(jiti@2.6.1))
       eslint-plugin-better-tailwindcss:
         specifier: 'catalog:'
-        version: 4.3.1(eslint@9.39.1(jiti@2.6.1))(oxlint@1.55.0(oxlint-tsgolint@0.17.0))(tailwindcss@4.2.0)(typescript@5.9.3)
+        version: 4.3.1(eslint@9.39.1(jiti@2.6.1))(oxlint@1.59.0(oxlint-tsgolint@0.20.0))(tailwindcss@4.2.0)(typescript@5.9.3)
       eslint-plugin-import-x:
         specifier: 'catalog:'
         version: 4.16.1(@typescript-eslint/utils@8.56.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint@9.39.1(jiti@2.6.1))
       eslint-plugin-oxlint:
         specifier: 'catalog:'
-        version: 1.55.0
+        version: 1.59.0(oxlint@1.59.0(oxlint-tsgolint@0.20.0))
+      eslint-plugin-playwright:
+        specifier: 'catalog:'
+        version: 2.10.1(eslint@9.39.1(jiti@2.6.1))
       eslint-plugin-storybook:
         specifier: 'catalog:'
         version: 10.2.10(eslint@9.39.1(jiti@2.6.1))(storybook@10.2.10(@testing-library/dom@10.4.1)(prettier@3.7.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
@@ -734,7 +764,7 @@ importers:
         version: 27.4.0
       knip:
         specifier: 'catalog:'
-        version: 6.0.1
+        version: 6.3.1
       lint-staged:
         specifier: 'catalog:'
         version: 16.4.0
@@ -744,18 +774,21 @@ importers:
       mixpanel-browser:
         specifier: 'catalog:'
         version: 2.71.0
+      monocart-coverage-reports:
+        specifier: 'catalog:'
+        version: 2.12.9
       nx:
         specifier: 'catalog:'
         version: 22.6.1
       oxfmt:
         specifier: 'catalog:'
-        version: 0.40.0
+        version: 0.44.0
       oxlint:
         specifier: 'catalog:'
-        version: 1.55.0(oxlint-tsgolint@0.17.0)
+        version: 1.59.0(oxlint-tsgolint@0.20.0)
       oxlint-tsgolint:
         specifier: 'catalog:'
-        version: 0.17.0
+        version: 0.20.0
       picocolors:
         specifier: 'catalog:'
         version: 1.1.1
@@ -895,19 +928,37 @@ importers:
 
   apps/website:
     dependencies:
+      '@astrojs/sitemap':
+        specifier: 'catalog:'
+        version: 3.7.1
       '@comfyorg/design-system':
         specifier: workspace:*
         version: link:../../packages/design-system
+      '@comfyorg/tailwind-utils':
+        specifier: workspace:*
+        version: link:../../packages/tailwind-utils
       '@vercel/analytics':
         specifier: 'catalog:'
         version: 2.0.1(react@19.2.4)(vue-router@4.4.3(vue@3.5.13(typescript@5.9.3)))(vue@3.5.13(typescript@5.9.3))
+      gsap:
+        specifier: 'catalog:'
+        version: 3.14.2
+      lenis:
+        specifier: 'catalog:'
+        version: 1.3.21(react@19.2.4)(vue@3.5.13(typescript@5.9.3))
       vue:
         specifier: 'catalog:'
         version: 3.5.13(typescript@5.9.3)
     devDependencies:
+      '@astrojs/check':
+        specifier: 'catalog:'
+        version: 0.9.8(prettier@3.7.4)(typescript@5.9.3)
       '@astrojs/vue':
         specifier: 'catalog:'
         version: 5.1.4(@types/node@25.0.3)(astro@5.18.1(@types/node@25.0.3)(jiti@2.6.1)(rollup@4.53.5)(terser@5.39.2)(tsx@4.19.4)(typescript@5.9.3)(yaml@2.8.2))(esbuild@0.27.3)(jiti@2.6.1)(rollup@4.53.5)(terser@5.39.2)(tsx@4.19.4)(vue@3.5.13(typescript@5.9.3))(yaml@2.8.2)
+      '@playwright/test':
+        specifier: 'catalog:'
+        version: 1.58.1
       '@tailwindcss/vite':
         specifier: 'catalog:'
         version: 4.2.0(vite@8.0.0(@types/node@25.0.3)(esbuild@0.27.3)(jiti@2.6.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2))
@@ -1067,12 +1118,30 @@ packages:
   '@asamuzakjp/nwsapi@2.3.9':
     resolution: {integrity: sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==}
 
+  '@astrojs/check@0.9.8':
+    resolution: {integrity: sha512-LDng8446QLS5ToKjRHd3bgUdirvemVVExV7nRyJfW2wV36xuv7vDxwy5NWN9zqeSEDgg0Tv84sP+T3yEq+Zlkw==}
+    hasBin: true
+    peerDependencies:
+      typescript: ^5.0.0
+
   '@astrojs/compiler@2.13.1':
     resolution: {integrity: sha512-f3FN83d2G/v32ipNClRKgYv30onQlMZX1vCeZMjPsMMPl1mDpmbl0+N5BYo4S/ofzqJyS5hvwacEo0CCVDn/Qg==}
 
   '@astrojs/internal-helpers@0.7.6':
     resolution: {integrity: sha512-GOle7smBWKfMSP8osUIGOlB5kaHdQLV3foCsf+5Q9Wsuu+C6Fs3Ez/ttXmhjZ1HkSgsogcM1RXSjjOVieHq16Q==}
 
+  '@astrojs/language-server@2.16.6':
+    resolution: {integrity: sha512-N990lu+HSFiG57owR0XBkr02BYMgiLCshLf+4QG4v6jjSWkBeQGnzqi+E1L08xFPPJ7eEeXnxPXGLaVv5pa4Ug==}
+    hasBin: true
+    peerDependencies:
+      prettier: ^3.0.0
+      prettier-plugin-astro: '>=0.11.0'
+    peerDependenciesMeta:
+      prettier:
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+
   '@astrojs/markdown-remark@6.3.11':
     resolution: {integrity: sha512-hcaxX/5aC6lQgHeGh1i+aauvSwIT6cfyFjKWvExYSxUhZZBBdvCliOtu06gbQyhbe0pGJNoNmqNlQZ5zYUuIyQ==}
 
@@ -1080,6 +1149,9 @@ packages:
     resolution: {integrity: sha512-q8VwfU/fDZNoDOf+r7jUnMC2//H2l0TuQ6FkGJL8vD8nw/q5KiL3DS1KKBI3QhI9UQhpJ5dc7AtqfbXWuOgLCQ==}
     engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0}
 
+  '@astrojs/sitemap@3.7.1':
+    resolution: {integrity: sha512-IzQqdTeskaMX+QDZCzMuJIp8A8C1vgzMBp/NmHNnadepHYNHcxQdGLQZYfkbd2EbRXUfOS+UDIKx8sKg0oWVdw==}
+
   '@astrojs/telemetry@3.3.0':
     resolution: {integrity: sha512-UFBgfeldP06qu6khs/yY+q1cDAaArM2/7AEIqQ9Cuvf7B1hNLq0xDrZkct+QoIGyjq56y8IaE2I3CTvG99mlhQ==}
     engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0}
@@ -1091,6 +1163,9 @@ packages:
       astro: ^5.0.0
       vue: ^3.2.30
 
+  '@astrojs/yaml2ts@0.2.3':
+    resolution: {integrity: sha512-PJzRmgQzUxI2uwpdX2lXSHtP4G8ocp24/t+bZyf5Fy0SZLSF9f9KXZoMlFM/XCGue+B0nH/2IZ7FpBYQATBsCg==}
+
   '@atlaskit/pragmatic-drag-and-drop@1.3.1':
     resolution: {integrity: sha512-MptcLppK78B2eplL5fHk93kfCbZ6uCpt33YauBPrOwI5zcHYJhZGeaGEaAXoVAHnSJOdQUhy6kGVVC9qggz2Fg==}
 
@@ -1711,6 +1786,27 @@ packages:
   '@dual-bundle/import-meta-resolve@4.2.1':
     resolution: {integrity: sha512-id+7YRUgoUX6CgV0DtuhirQWodeeA7Lf4i2x71JS/vtA5pRb/hIGWlw+G6MeXvsM+MXrz0VAydTGElX1rAfgPg==}
 
+  '@emmetio/abbreviation@2.3.3':
+    resolution: {integrity: sha512-mgv58UrU3rh4YgbE/TzgLQwJ3pFsHHhCLqY20aJq+9comytTXUDNGG/SMtSeMJdkpxgXSXunBGLD8Boka3JyVA==}
+
+  '@emmetio/css-abbreviation@2.1.8':
+    resolution: {integrity: sha512-s9yjhJ6saOO/uk1V74eifykk2CBYi01STTK3WlXWGOepyKa23ymJ053+DNQjpFcy1ingpaO7AxCcwLvHFY9tuw==}
+
+  '@emmetio/css-parser@0.4.1':
+    resolution: {integrity: sha512-2bC6m0MV/voF4CTZiAbG5MWKbq5EBmDPKu9Sb7s7nVcEzNQlrZP6mFFFlIaISM8X6514H9shWMme1fCm8cWAfQ==}
+
+  '@emmetio/html-matcher@1.3.0':
+    resolution: {integrity: sha512-NTbsvppE5eVyBMuyGfVu2CRrLvo7J4YHb6t9sBFLyY03WYhXET37qA4zOYUjBWFCRHO7pS1B9khERtY0f5JXPQ==}
+
+  '@emmetio/scanner@1.0.4':
+    resolution: {integrity: sha512-IqRuJtQff7YHHBk4G8YZ45uB9BaAGcwQeVzgj/zj8/UdOhtQpEIupUhSk8dys6spFIWVZVeK20CzGEnqR5SbqA==}
+
+  '@emmetio/stream-reader-utils@0.1.0':
+    resolution: {integrity: sha512-ZsZ2I9Vzso3Ho/pjZFsmmZ++FWeEd/txqybHTm4OgaZzdS8V9V/YYWQwg5TC38Z7uLWUV1vavpLLbjJtKubR1A==}
+
+  '@emmetio/stream-reader@2.2.0':
+    resolution: {integrity: sha512-fXVXEyFA5Yv3M3n8sUGT7+fvecGrZP4k6FnWWMSZVQf69kAq0LLpaBQLGcPR30m3zMmKYhECP4k/ZkzvhEW5kw==}
+
   '@emnapi/core@1.8.1':
     resolution: {integrity: sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==}
 
@@ -2882,129 +2978,129 @@ packages:
   '@oslojs/encoding@1.1.0':
     resolution: {integrity: sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==}
 
-  '@oxc-parser/binding-android-arm-eabi@0.120.0':
-    resolution: {integrity: sha512-WU3qtINx802wOl8RxAF1v0VvmC2O4D9M8Sv486nLeQ7iPHVmncYZrtBhB4SYyX+XZxj2PNnCcN+PW21jHgiOxg==}
+  '@oxc-parser/binding-android-arm-eabi@0.121.0':
+    resolution: {integrity: sha512-n07FQcySwOlzap424/PLMtOkbS7xOu8nsJduKL8P3COGHKgKoDYXwoAHCbChfgFpHnviehrLWIPX0lKGtbEk/A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [android]
 
-  '@oxc-parser/binding-android-arm64@0.120.0':
-    resolution: {integrity: sha512-SEf80EHdhlbjZEgzeWm0ZA/br4GKMenDW3QB/gtyeTV1gStvvZeFi40ioHDZvds2m4Z9J1bUAUL8yn1/+A6iGg==}
+  '@oxc-parser/binding-android-arm64@0.121.0':
+    resolution: {integrity: sha512-/Dd1xIXboYAicw+twT2utxPD7bL8qh7d3ej0qvaYIMj3/EgIrGR+tSnjCUkiCT6g6uTC0neSS4JY8LxhdSU/sA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
-  '@oxc-parser/binding-darwin-arm64@0.120.0':
-    resolution: {integrity: sha512-xVrrbCai8R8CUIBu3CjryutQnEYhZqs1maIqDvtUCFZb8vY33H7uh9mHpL3a0JBIKoBUKjPH8+rzyAeXnS2d6A==}
+  '@oxc-parser/binding-darwin-arm64@0.121.0':
+    resolution: {integrity: sha512-A0jNEvv7QMtCO1yk205t3DWU9sWUjQ2KNF0hSVO5W9R9r/R1BIvzG01UQAfmtC0dQm7sCrs5puixurKSfr2bRQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@oxc-parser/binding-darwin-x64@0.120.0':
-    resolution: {integrity: sha512-xyHBbnJ6mydnQUH7MAcafOkkrNzQC6T+LXgDH/3InEq2BWl/g424IMRiJVSpVqGjB+p2bd0h0WRR8iIwzjU7rw==}
+  '@oxc-parser/binding-darwin-x64@0.121.0':
+    resolution: {integrity: sha512-SsHzipdxTKUs3I9EOAPmnIimEeJOemqRlRDOp9LIj+96wtxZejF51gNibmoGq8KoqbT1ssAI5po/E3J+vEtXGA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
-  '@oxc-parser/binding-freebsd-x64@0.120.0':
-    resolution: {integrity: sha512-UMnVRllquXUYTeNfFKmxTTEdZ/ix1nLl0ducDzMSREoWYGVIHnOOxoKMWlCOvRr9Wk/HZqo2rh1jeumbPGPV9A==}
+  '@oxc-parser/binding-freebsd-x64@0.121.0':
+    resolution: {integrity: sha512-v1APOTkCp+RWOIDAHRoaeW/UoaHF15a60E8eUL6kUQXh+i4K7PBwq2Wi7jm8p0ymID5/m/oC1w3W31Z/+r7HQw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@oxc-parser/binding-linux-arm-gnueabihf@0.120.0':
-    resolution: {integrity: sha512-tkvn2CQ7QdcsMnpfiX3fd3wA3EFsWKYlcQzq9cFw/xc89Al7W6Y4O0FgLVkVQpo0Tnq/qtE1XfkJOnRRA9S/NA==}
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.121.0':
+    resolution: {integrity: sha512-PmqPQuqHZyFVWA4ycr0eu4VnTMmq9laOHZd+8R359w6kzuNZPvmmunmNJ8ybkm769A0nCoVp3TJ6dUz7B3FYIQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@oxc-parser/binding-linux-arm-musleabihf@0.120.0':
-    resolution: {integrity: sha512-WN5y135Ic42gQDk9grbwY9++fDhqf8knN6fnP+0WALlAUh4odY/BDK1nfTJRSfpJD9P3r1BwU0m3pW2DU89whQ==}
+  '@oxc-parser/binding-linux-arm-musleabihf@0.121.0':
+    resolution: {integrity: sha512-vF24htj+MOH+Q7y9A8NuC6pUZu8t/C2Fr/kDOi2OcNf28oogr2xadBPXAbml802E8wRAVfbta6YLDQTearz+jw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@oxc-parser/binding-linux-arm64-gnu@0.120.0':
-    resolution: {integrity: sha512-1GgQBCcXvFMw99EPdMy+4NZ3aYyXsxjf9kbUUg8HuAy3ZBXzOry5KfFEzT9nqmgZI1cuetvApkiJBZLAPo8uaw==}
+  '@oxc-parser/binding-linux-arm64-gnu@0.121.0':
+    resolution: {integrity: sha512-wjH8cIG2Lu/3d64iZpbYr73hREMgKAfu7fqpXjgM2S16y2zhTfDIp8EQjxO8vlDtKP5Rc7waZW72lh8nZtWrpA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-parser/binding-linux-arm64-musl@0.120.0':
-    resolution: {integrity: sha512-gmMQ70gsPdDBgpcErvJEoWNBr7bJooSLlvOBVBSGfOzlP5NvJ3bFvnUeZZ9d+dPrqSngtonf7nyzWUTUj/U+lw==}
+  '@oxc-parser/binding-linux-arm64-musl@0.121.0':
+    resolution: {integrity: sha512-qT663J/W8yQFw3dtscbEi9LKJevr20V7uWs2MPGTnvNZ3rm8anhhE16gXGpxDOHeg9raySaSHKhd4IGa3YZvuw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@oxc-parser/binding-linux-ppc64-gnu@0.120.0':
-    resolution: {integrity: sha512-T/kZuU0ajop0xhzVMwH5r3srC9Nqup5HaIo+3uFjIN5uPxa0LvSxC1ZqP4aQGJVW5G0z8/nCkjIfSMS91P/wzw==}
+  '@oxc-parser/binding-linux-ppc64-gnu@0.121.0':
+    resolution: {integrity: sha512-mYNe4NhVvDBbPkAP8JaVS8lC1dsoJZWH5WCjpw5E+sjhk1R08wt3NnXYUzum7tIiWPfgQxbCMcoxgeemFASbRw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-parser/binding-linux-riscv64-gnu@0.120.0':
-    resolution: {integrity: sha512-vn21KXLAXzaI3N5CZWlBr1iWeXLl9QFIMor7S1hUjUGTeUuWCoE6JZB040/ZNDwf+JXPX8Ao9KbmJq9FMC2iGw==}
+  '@oxc-parser/binding-linux-riscv64-gnu@0.121.0':
+    resolution: {integrity: sha512-+QiFoGxhAbaI/amqX567784cDyyuZIpinBrJNxUzb+/L2aBRX67mN6Jv40pqduHf15yYByI+K5gUEygCuv0z9w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-parser/binding-linux-riscv64-musl@0.120.0':
-    resolution: {integrity: sha512-SUbUxlar007LTGmSLGIC5x/WJvwhdX+PwNzFJ9f/nOzZOrCFbOT4ikt7pJIRg1tXVsEfzk5mWpGO1NFiSs4PIw==}
+  '@oxc-parser/binding-linux-riscv64-musl@0.121.0':
+    resolution: {integrity: sha512-9ykEgyTa5JD/Uhv2sttbKnCfl2PieUfOjyxJC/oDL2UO0qtXOtjPLl7H8Kaj5G7p3hIvFgu3YWvAxvE0sqY+hQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
     libc: [musl]
 
-  '@oxc-parser/binding-linux-s390x-gnu@0.120.0':
-    resolution: {integrity: sha512-hYiPJTxyfJY2+lMBFk3p2bo0R9GN+TtpPFlRqVchL1qvLG+pznstramHNvJlw9AjaoRUHwp9IKR7UZQnRPGjgQ==}
+  '@oxc-parser/binding-linux-s390x-gnu@0.121.0':
+    resolution: {integrity: sha512-DB1EW5VHZdc1lIRjOI3bW/wV6R6y0xlfvdVrqj6kKi7Ayu2U3UqUBdq9KviVkcUGd5Oq+dROqvUEEFRXGAM7EQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-parser/binding-linux-x64-gnu@0.120.0':
-    resolution: {integrity: sha512-q+5jSVZkprJCIy3dzJpApat0InJaoxQLsJuD6DkX8hrUS61z2lHQ1Fe9L2+TYbKHXCLWbL0zXe7ovkIdopBGMQ==}
+  '@oxc-parser/binding-linux-x64-gnu@0.121.0':
+    resolution: {integrity: sha512-s4lfobX9p4kPTclvMiH3gcQUd88VlnkMTF6n2MTMDAyX5FPNRhhRSFZK05Ykhf8Zy5NibV4PbGR6DnK7FGNN6A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-parser/binding-linux-x64-musl@0.120.0':
-    resolution: {integrity: sha512-D9QDDZNnH24e7X4ftSa6ar/2hCavETfW3uk0zgcMIrZNy459O5deTbWrjGzZiVrSWigGtlQwzs2McBP0QsfV1w==}
+  '@oxc-parser/binding-linux-x64-musl@0.121.0':
+    resolution: {integrity: sha512-P9KlyTpuBuMi3NRGpJO8MicuGZfOoqZVRP1WjOecwx8yk4L/+mrCRNc5egSi0byhuReblBF2oVoDSMgV9Bj4Hw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@oxc-parser/binding-openharmony-arm64@0.120.0':
-    resolution: {integrity: sha512-TBU8ZwOUWAOUWVfmI16CYWbvh4uQb9zHnGBHsw5Cp2JUVG044OIY1CSHODLifqzQIMTXvDvLzcL89GGdUIqNrA==}
+  '@oxc-parser/binding-openharmony-arm64@0.121.0':
+    resolution: {integrity: sha512-R+4jrWOfF2OAPPhj3Eb3U5CaKNAH9/btMveMULIrcNW/hjfysFQlF8wE0GaVBr81dWz8JLgQlsxwctoL78JwXw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
-  '@oxc-parser/binding-wasm32-wasi@0.120.0':
-    resolution: {integrity: sha512-WG/FOZgDJCpJnuF3ToG/K28rcOmSY7FmFmfBKYb2fmLyhDzPpUldFGV7/Fz4ru0Iz/v4KPmf8xVgO8N3lO4KHA==}
+  '@oxc-parser/binding-wasm32-wasi@0.121.0':
+    resolution: {integrity: sha512-5TFISkPTymKvsmIlKasPVTPuWxzCcrT8pM+p77+mtQbIZDd1UC8zww4CJcRI46kolmgrEX6QpKO8AvWMVZ+ifw==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
 
-  '@oxc-parser/binding-win32-arm64-msvc@0.120.0':
-    resolution: {integrity: sha512-1T0HKGcsz/BKo77t7+89L8Qvu4f9DoleKWHp3C5sJEcbCjDOLx3m9m722bWZTY+hANlUEs+yjlK+lBFsA+vrVQ==}
+  '@oxc-parser/binding-win32-arm64-msvc@0.121.0':
+    resolution: {integrity: sha512-V0pxh4mql4XTt3aiEtRNUeBAUFOw5jzZNxPABLaOKAWrVzSr9+XUaB095lY7jqMf5t8vkfh8NManGB28zanYKw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@oxc-parser/binding-win32-ia32-msvc@0.120.0':
-    resolution: {integrity: sha512-L7vfLzbOXsjBXV0rv/6Y3Jd9BRjPeCivINZAqrSyAOZN3moCopDN+Psq9ZrGNZtJzP8946MtlRFZ0Als0wBCOw==}
+  '@oxc-parser/binding-win32-ia32-msvc@0.121.0':
+    resolution: {integrity: sha512-4Ob1qvYMPnlF2N9rdmKdkQFdrq16QVcQwBsO8yiPZXof0fHKFF+LmQV501XFbi7lHyrKm8rlJRfQ/M8bZZPVLw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ia32]
     os: [win32]
 
-  '@oxc-parser/binding-win32-x64-msvc@0.120.0':
-    resolution: {integrity: sha512-ys+upfqNtSu58huAhJMBKl3XCkGzyVFBlMlGPzHeFKgpFF/OdgNs1MMf8oaJIbgMH8ZxgGF7qfue39eJohmKIg==}
+  '@oxc-parser/binding-win32-x64-msvc@0.121.0':
+    resolution: {integrity: sha512-BOp1KCzdboB1tPqoCPXgntgFs0jjeSyOXHzgxVFR7B/qfr3F8r4YDacHkTOUNXtDgM8YwKnkf3rE5gwALYX7NA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
@@ -3016,8 +3112,8 @@ packages:
   '@oxc-project/types@0.115.0':
     resolution: {integrity: sha512-4n91DKnebUS4yjUHl2g3/b2T+IUdCfmoZGhmwsovZCDaJSs+QkVAM+0AqqTxHSsHfeiMuueT75cZaZcT/m0pSw==}
 
-  '@oxc-project/types@0.120.0':
-    resolution: {integrity: sha512-k1YNu55DuvAip/MGE1FTsIuU3FUCn6v/ujG9V7Nq5Df/kX2CWb13hhwD0lmJGMGqE+bE1MXvv9SZVnMzEXlWcg==}
+  '@oxc-project/types@0.121.0':
+    resolution: {integrity: sha512-CGtOARQb9tyv7ECgdAlFxi0Fv7lmzvmlm2rpD/RdijOO9rfk/JvB1CjT8EnoD+tjna/IYgKKw3IV7objRb+aYw==}
 
   '@oxc-resolver/binding-android-arm-eabi@11.19.1':
     resolution: {integrity: sha512-aUs47y+xyXHUKlbhqHUjBABjvycq6YSD7bpxSW7vplUmdzAlJ93yXY6ZR0c1o1x5A/QKbENCvs3+NlY8IpIVzg==}
@@ -3127,276 +3223,276 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@oxfmt/binding-android-arm-eabi@0.40.0':
-    resolution: {integrity: sha512-S6zd5r1w/HmqR8t0CTnGjFTBLDq2QKORPwriCHxo4xFNuhmOTABGjPaNvCJJVnrKBLsohOeiDX3YqQfJPF+FXw==}
+  '@oxfmt/binding-android-arm-eabi@0.44.0':
+    resolution: {integrity: sha512-5UvghMd9SA/yvKTWCAxMAPXS1d2i054UeOf4iFjZjfayTwCINcC3oaSXjtbZfCaEpxgJod7XiOjTtby5yEv/BQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [android]
 
-  '@oxfmt/binding-android-arm64@0.40.0':
-    resolution: {integrity: sha512-/mbS9UUP/5Vbl2D6osIdcYiP0oie63LKMoTyGj5hyMCK/SFkl3EhtyRAfdjPvuvHC0SXdW6ePaTKkBSq1SNcIw==}
+  '@oxfmt/binding-android-arm64@0.44.0':
+    resolution: {integrity: sha512-IVudM1BWfvrYO++Khtzr8q9n5Rxu7msUvoFMqzGJVdX7HfUXUDHwaH2zHZNB58svx2J56pmCUzophyaPFkcG/A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
-  '@oxfmt/binding-darwin-arm64@0.40.0':
-    resolution: {integrity: sha512-wRt8fRdfLiEhnRMBonlIbKrJWixoEmn6KCjKE9PElnrSDSXETGZfPb8ee+nQNTobXkCVvVLytp2o0obAsxl78Q==}
+  '@oxfmt/binding-darwin-arm64@0.44.0':
+    resolution: {integrity: sha512-eWCLAIKAHfx88EqEP1Ga2yz7qVcqDU5lemn4xck+07bH182hDdprOHjbogyk0In1Djys3T0/pO2JepFnRJ41Mg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@oxfmt/binding-darwin-x64@0.40.0':
-    resolution: {integrity: sha512-fzowhqbOE/NRy+AE5ob0+Y4X243WbWzDb00W+pKwD7d9tOqsAFbtWUwIyqqCoCLxj791m2xXIEeLH/3uz7zCCg==}
+  '@oxfmt/binding-darwin-x64@0.44.0':
+    resolution: {integrity: sha512-eHTBznHLM49++dwz07MblQ2cOXyIgeedmE3Wgy4ptUESj38/qYZyRi1MPwC9olQJWssMeY6WI3UZ7YmU5ggvyQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
-  '@oxfmt/binding-freebsd-x64@0.40.0':
-    resolution: {integrity: sha512-agZ9ITaqdBjcerRRFEHB8s0OyVcQW8F9ZxsszjxzeSthQ4fcN2MuOtQFWec1ed8/lDa50jSLHVE2/xPmTgtCfQ==}
+  '@oxfmt/binding-freebsd-x64@0.44.0':
+    resolution: {integrity: sha512-jLMmbj0u0Ft43QpkUVr/0v1ZfQCGWAvU+WznEHcN3wZC/q6ox7XeSJtk9P36CCpiDSUf3sGnzbIuG1KdEMEDJQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@oxfmt/binding-linux-arm-gnueabihf@0.40.0':
-    resolution: {integrity: sha512-ZM2oQ47p28TP1DVIp7HL1QoMUgqlBFHey0ksHct7tMXoU5BqjNvPWw7888azzMt25lnyPODVuye1wvNbvVUFOA==}
+  '@oxfmt/binding-linux-arm-gnueabihf@0.44.0':
+    resolution: {integrity: sha512-n+A/u/ByK1qV8FVGOwyaSpw5NPNl0qlZfgTBqHeGIqr8Qzq1tyWZ4lAaxPoe5mZqE3w88vn3+jZtMxriHPE7tg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@oxfmt/binding-linux-arm-musleabihf@0.40.0':
-    resolution: {integrity: sha512-RBFPAxRAIsMisKM47Oe6Lwdv6agZYLz02CUhVCD1sOv5ajAcRMrnwCFBPWwGXpazToW2mjnZxFos8TuFjTU15A==}
+  '@oxfmt/binding-linux-arm-musleabihf@0.44.0':
+    resolution: {integrity: sha512-5eax+FkxyCqAi3Rw0mrZFr7+KTt/XweFsbALR+B5ljWBLBl8nHe4ADrUnb1gLEfQCJLl+Ca5FIVD4xEt95AwIw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@oxfmt/binding-linux-arm64-gnu@0.40.0':
-    resolution: {integrity: sha512-Nb2XbQ+wV3W2jSIihXdPj7k83eOxeSgYP3N/SRXvQ6ZYPIk6Q86qEh5Gl/7OitX3bQoQrESqm1yMLvZV8/J7dA==}
+  '@oxfmt/binding-linux-arm64-gnu@0.44.0':
+    resolution: {integrity: sha512-58l8JaHxSGOmOMOG2CIrNsnkRJAj0YcHQCmvNACniOa/vd1iRHhlPajczegzS5jwMENlqgreyiTR9iNlke8qCw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@oxfmt/binding-linux-arm64-musl@0.40.0':
-    resolution: {integrity: sha512-tGmWhLD/0YMotCdfezlT6tC/MJG/wKpo4vnQ3Cq+4eBk/BwNv7EmkD0VkD5F/dYkT3b8FNU01X2e8vvJuWoM1w==}
+  '@oxfmt/binding-linux-arm64-musl@0.44.0':
+    resolution: {integrity: sha512-AlObQIXyVRZ96LbtVljtFq0JqH5B92NU+BQeDFrXWBUWlCKAM0wF5GLfIhCLT5kQ3Sl+U0YjRJ7Alqj5hGQaCg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@oxfmt/binding-linux-ppc64-gnu@0.40.0':
-    resolution: {integrity: sha512-rVbFyM3e7YhkVnp0IVYjaSHfrBWcTRWb60LEcdNAJcE2mbhTpbqKufx0FrhWfoxOrW/+7UJonAOShoFFLigDqQ==}
+  '@oxfmt/binding-linux-ppc64-gnu@0.44.0':
+    resolution: {integrity: sha512-YcFE8/q/BbrCiIiM5piwbkA6GwJc5QqhMQp2yDrqQ2fuVkZ7CInb1aIijZ/k8EXc72qXMSwKpVlBv1w/MsGO/A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
-  '@oxfmt/binding-linux-riscv64-gnu@0.40.0':
-    resolution: {integrity: sha512-3ZqBw14JtWeEoLiioJcXSJz8RQyPE+3jLARnYM1HdPzZG4vk+Ua8CUupt2+d+vSAvMyaQBTN2dZK+kbBS/j5mA==}
+  '@oxfmt/binding-linux-riscv64-gnu@0.44.0':
+    resolution: {integrity: sha512-eOdzs6RqkRzuqNHUX5C8ISN5xfGh4xDww8OEd9YAmc3OWN8oAe5bmlIqQ+rrHLpv58/0BuU48bxkhnIGjA/ATQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
 
-  '@oxfmt/binding-linux-riscv64-musl@0.40.0':
-    resolution: {integrity: sha512-JJ4PPSdcbGBjPvb+O7xYm2FmAsKCyuEMYhqatBAHMp/6TA6rVlf9Z/sYPa4/3Bommb+8nndm15SPFRHEPU5qFA==}
+  '@oxfmt/binding-linux-riscv64-musl@0.44.0':
+    resolution: {integrity: sha512-YBgNTxntD/QvlFUfgvh8bEdwOhXiquX8gaofZJAwYa/Xp1S1DQrFVZEeck7GFktr24DztsSp8N8WtWCBwxs0Hw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
     libc: [musl]
 
-  '@oxfmt/binding-linux-s390x-gnu@0.40.0':
-    resolution: {integrity: sha512-Kp0zNJoX9Ik77wUya2tpBY3W9f40VUoMQLWVaob5SgCrblH/t2xr/9B2bWHfs0WCefuGmqXcB+t0Lq77sbBmZw==}
+  '@oxfmt/binding-linux-s390x-gnu@0.44.0':
+    resolution: {integrity: sha512-GLIh1R6WHWshl/i4QQDNgj0WtT25aRO4HNUWEoitxiywyRdhTFmFEYT2rXlcl9U6/26vhmOqG5cRlMLG3ocaIA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@oxfmt/binding-linux-x64-gnu@0.40.0':
-    resolution: {integrity: sha512-7YTCNzleWTaQTqNGUNQ66qVjpoV6DjbCOea+RnpMBly2bpzrI/uu7Rr+2zcgRfNxyjXaFTVQKaRKjqVdeUfeVA==}
+  '@oxfmt/binding-linux-x64-gnu@0.44.0':
+    resolution: {integrity: sha512-gZOpgTlOsLcLfAF9qgpTr7FIIFSKnQN3hDf/0JvQ4CIwMY7h+eilNjxq/CorqvYcEOu+LRt1W4ZS7KccEHLOdA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@oxfmt/binding-linux-x64-musl@0.40.0':
-    resolution: {integrity: sha512-hWnSzJ0oegeOwfOEeejYXfBqmnRGHusgtHfCPzmvJvHTwy1s3Neo59UKc1CmpE3zxvrCzJoVHos0rr97GHMNPw==}
+  '@oxfmt/binding-linux-x64-musl@0.44.0':
+    resolution: {integrity: sha512-1CyS9JTB+pCUFYFI6pkQGGZaT/AY5gnhHVrQQLhFba6idP9AzVYm1xbdWfywoldTYvjxQJV6x4SuduCIfP3W+A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@oxfmt/binding-openharmony-arm64@0.40.0':
-    resolution: {integrity: sha512-28sJC1lR4qtBJGzSRRbPnSW3GxU2+4YyQFE6rCmsUYqZ5XYH8jg0/w+CvEzQ8TuAQz5zLkcA25nFQGwoU0PT3Q==}
+  '@oxfmt/binding-openharmony-arm64@0.44.0':
+    resolution: {integrity: sha512-bmEv70Ak6jLr1xotCbF5TxIKjsmQaiX+jFRtnGtfA03tJPf6VG3cKh96S21boAt3JZc+Vjx8PYcDuLj39vM2Pw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
-  '@oxfmt/binding-win32-arm64-msvc@0.40.0':
-    resolution: {integrity: sha512-cDkRnyT0dqwF5oIX1Cv59HKCeZQFbWWdUpXa3uvnHFT2iwYSSZspkhgjXjU6iDp5pFPaAEAe9FIbMoTgkTmKPg==}
+  '@oxfmt/binding-win32-arm64-msvc@0.44.0':
+    resolution: {integrity: sha512-yWzB+oCpSnP/dmw85eFLAT5o35Ve5pkGS2uF/UCISpIwDqf1xa7OpmtomiqY/Vzg8VyvMbuf6vroF2khF/+1Vg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@oxfmt/binding-win32-ia32-msvc@0.40.0':
-    resolution: {integrity: sha512-7rPemBJjqm5Gkv6ZRCPvK8lE6AqQ/2z31DRdWazyx2ZvaSgL7QGofHXHNouRpPvNsT9yxRNQJgigsWkc+0qg4w==}
+  '@oxfmt/binding-win32-ia32-msvc@0.44.0':
+    resolution: {integrity: sha512-TcWpo18xEIE3AmIG2kpr3kz5IEhQgnx0lazl2+8L+3eTopOAUevQcmlr4nhguImNWz0OMeOZrYZOhJNCf16nlQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ia32]
     os: [win32]
 
-  '@oxfmt/binding-win32-x64-msvc@0.40.0':
-    resolution: {integrity: sha512-/Zmj0yTYSvmha6TG1QnoLqVT7ZMRDqXvFXXBQpIjteEwx9qvUYMBH2xbiOFhDeMUJkGwC3D6fdKsFtaqUvkwNA==}
+  '@oxfmt/binding-win32-x64-msvc@0.44.0':
+    resolution: {integrity: sha512-oj8aLkPJZppIM4CMQNsyir9ybM1Xw/CfGPTSsTnzpVGyljgfbdP0EVUlURiGM0BDrmw5psQ6ArmGCcUY/yABaQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
 
-  '@oxlint-tsgolint/darwin-arm64@0.17.0':
-    resolution: {integrity: sha512-z3XwCDuOAKgk7bO4y5tyH8Zogwr51G56R0XGKC3tlAbrAq8DecoxAd3qhRZqWBMG2Gzl5bWU3Ghu7lrxuLPzYw==}
+  '@oxlint-tsgolint/darwin-arm64@0.20.0':
+    resolution: {integrity: sha512-KKQcIHZHMxqpHUA1VXIbOG6chNCFkUWbQy6M+AFVtPKkA/3xAeJkJ3njoV66bfzwPHRcWQO+kcj5XqtbkjakoA==}
     cpu: [arm64]
     os: [darwin]
 
-  '@oxlint-tsgolint/darwin-x64@0.17.0':
-    resolution: {integrity: sha512-TZgVXy0MtI8nt0MYiceuZhHPwHcwlIZ/YwzFTAKrgdHiTvVzFbqHVdXi5wbZfT/o1nHGw9fbGWPlb6qKZ4uZ9Q==}
+  '@oxlint-tsgolint/darwin-x64@0.20.0':
+    resolution: {integrity: sha512-7HeVMuclGfG+NLZi2ybY0T4fMI7/XxO/208rJk+zEIloKkVnlh11Wd241JMGwgNFXn+MLJbOqOfojDb2Dt4L1g==}
     cpu: [x64]
     os: [darwin]
 
-  '@oxlint-tsgolint/linux-arm64@0.17.0':
-    resolution: {integrity: sha512-IDfhFl/Y8bjidCvAP6QAxVyBsl78TmfCHlfjtEv2XtJXgYmIwzv6muO18XMp74SZ2qAyD4y2n2dUedrmghGHeA==}
+  '@oxlint-tsgolint/linux-arm64@0.20.0':
+    resolution: {integrity: sha512-zxhUwz+WSxE6oWlZLK2z2ps9yC6ebmgoYmjAl0Oa48+GqkZ56NVgo+wb8DURNv6xrggzHStQxqQxe3mK51HZag==}
     cpu: [arm64]
     os: [linux]
 
-  '@oxlint-tsgolint/linux-x64@0.17.0':
-    resolution: {integrity: sha512-Bgdgqx/m8EnfjmmlRLEeYy9Yhdt1GdFrMr5mTu/NyLRGkB1C9VLAikdxB7U9QambAGTAmjMbHNFDFk8Vx69Huw==}
+  '@oxlint-tsgolint/linux-x64@0.20.0':
+    resolution: {integrity: sha512-/1l6FnahC9im8PK+Ekkx/V3yetO/PzZnJegE2FXcv/iXEhbeVxP/ouiTYcUQu9shT1FWJCSNti1VJHH+21Y1dg==}
     cpu: [x64]
     os: [linux]
 
-  '@oxlint-tsgolint/win32-arm64@0.17.0':
-    resolution: {integrity: sha512-dO6wyKMDqFWh1vwr+zNZS7/ovlfGgl4S3P1LDy4CKjP6V6NGtdmEwWkWax8j/I8RzGZdfXKnoUfb/qhVg5bx0w==}
+  '@oxlint-tsgolint/win32-arm64@0.20.0':
+    resolution: {integrity: sha512-oPZ5Yz8sVdo7P/5q+i3IKeix31eFZ55JAPa1+RGPoe9PoaYVsdMvR6Jvib6YtrqoJnFPlg3fjEjlEPL8VBKYJA==}
     cpu: [arm64]
     os: [win32]
 
-  '@oxlint-tsgolint/win32-x64@0.17.0':
-    resolution: {integrity: sha512-lPGYFp3yX2nh6hLTpIuMnJbZnt3Df42VkoA/fSkMYi2a/LXdDytQGpgZOrb5j47TICARd34RauKm0P3OA4Oxbw==}
+  '@oxlint-tsgolint/win32-x64@0.20.0':
+    resolution: {integrity: sha512-4stx8RHj3SP9vQyRF/yZbz5igtPvYMEUR8CUoha4BVNZihi39DpCR8qkU7lpjB5Ga1DRMo2pHaA4bdTOMaY4mw==}
     cpu: [x64]
     os: [win32]
 
-  '@oxlint/binding-android-arm-eabi@1.55.0':
-    resolution: {integrity: sha512-NhvgAhncTSOhRahQSCnkK/4YIGPjTmhPurQQ2dwt2IvwCMTvZRW5vF2K10UBOxFve4GZDMw6LtXZdC2qeuYIVQ==}
+  '@oxlint/binding-android-arm-eabi@1.59.0':
+    resolution: {integrity: sha512-etYDw/UaEv936AQUd/CRMBVd+e+XuuU6wC+VzOv1STvsTyZenLChepLWqLtnyTTp4YMlM22ypzogDDwqYxv5cg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [android]
 
-  '@oxlint/binding-android-arm64@1.55.0':
-    resolution: {integrity: sha512-P9iWRh+Ugqhg+D7rkc7boHX8o3H2h7YPcZHQIgvVBgnua5tk4LR2L+IBlreZs58/95cd2x3/004p5VsQM9z4SA==}
+  '@oxlint/binding-android-arm64@1.59.0':
+    resolution: {integrity: sha512-TgLc7XVLKH2a4h8j3vn1MDjfK33i9MY60f/bKhRGWyVzbk5LCZ4X01VZG7iHrMmi5vYbAp8//Ponigx03CLsdw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
-  '@oxlint/binding-darwin-arm64@1.55.0':
-    resolution: {integrity: sha512-esakkJIt7WFAhT30P/Qzn96ehFpzdZ1mNuzpOb8SCW7lI4oB8VsyQnkSHREM671jfpuBb/o2ppzBCx5l0jpgMA==}
+  '@oxlint/binding-darwin-arm64@1.59.0':
+    resolution: {integrity: sha512-DXyFPf5ZKldMLloRHx/B9fsxsiTQomaw7cmEW3YIJko2HgCh+GUhp9gGYwHrqlLJPsEe3dYj9JebjX92D3j3AA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@oxlint/binding-darwin-x64@1.55.0':
-    resolution: {integrity: sha512-xDMFRCCAEK9fOH6As2z8ELsC+VDGSFRHwIKVSilw+xhgLwTDFu37rtmRbmUlx8rRGS6cWKQPTc47AVxAZEVVPQ==}
+  '@oxlint/binding-darwin-x64@1.59.0':
+    resolution: {integrity: sha512-LgvrsdgVLX1qWqIEmNsSmMXJhpAWdtUQ0M+oR0CySwi+9IHWyOGuIL8w8+u/kbZNMyZr4WUyYB5i0+D+AKgkLg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
-  '@oxlint/binding-freebsd-x64@1.55.0':
-    resolution: {integrity: sha512-mYZqnwUD7ALCRxGenyLd1uuG+rHCL+OTT6S8FcAbVm/ZT2AZMGjvibp3F6k1SKOb2aeqFATmwRykrE41Q0GWVw==}
+  '@oxlint/binding-freebsd-x64@1.59.0':
+    resolution: {integrity: sha512-bOJhqX/ny4hrFuTPlyk8foSRx/vLRpxJh0jOOKN2NWW6FScXHPAA5rQbrwdQPcgGB5V8Ua51RS03fke8ssBcug==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@oxlint/binding-linux-arm-gnueabihf@1.55.0':
-    resolution: {integrity: sha512-LcX6RYcF9vL9ESGwJW3yyIZ/d/ouzdOKXxCdey1q0XJOW1asrHsIg5MmyKdEBR4plQx+shvYeQne7AzW5f3T1w==}
+  '@oxlint/binding-linux-arm-gnueabihf@1.59.0':
+    resolution: {integrity: sha512-vVUXxYMF9trXCsz4m9H6U0IjehosVHxBzVgJUxly1uz4W1PdDyicaBnpC0KRXsHYretLVe+uS9pJy8iM57Kujw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@oxlint/binding-linux-arm-musleabihf@1.55.0':
-    resolution: {integrity: sha512-C+8GS1rPtK+dI7mJFkqoRBkDuqbrNihnyYQsJPS9ez+8zF9JzfvU19lawqt4l/Y23o5uQswE/DORa8aiXUih3w==}
+  '@oxlint/binding-linux-arm-musleabihf@1.59.0':
+    resolution: {integrity: sha512-TULQW8YBPGRWg5yZpFPL54HLOnJ3/HiX6VenDPi6YfxB/jlItwSMFh3/hCeSNbh+DAMaE1Py0j5MOaivHkI/9Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@oxlint/binding-linux-arm64-gnu@1.55.0':
-    resolution: {integrity: sha512-ErLE4XbmcCopA4/CIDiH6J1IAaDOMnf/KSx/aFObs4/OjAAM3sFKWGZ57pNOMxhhyBdcmcXwYymph9GwcpcqgQ==}
+  '@oxlint/binding-linux-arm64-gnu@1.59.0':
+    resolution: {integrity: sha512-Gt54Y4eqSgYJ90xipm24xeyaPV854706o/kiT8oZvUt3VDY7qqxdqyGqchMaujd87ib+/MXvnl9WkK8Cc1BExg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@oxlint/binding-linux-arm64-musl@1.55.0':
-    resolution: {integrity: sha512-/kp65avi6zZfqEng56TTuhiy3P/3pgklKIdf38yvYeJ9/PgEeRA2A2AqKAKbZBNAqUzrzHhz9jF6j/PZvhJzTQ==}
+  '@oxlint/binding-linux-arm64-musl@1.59.0':
+    resolution: {integrity: sha512-3CtsKp7NFB3OfqQzbuAecrY7GIZeiv7AD+xutU4tefVQzlfmTI7/ygWLrvkzsDEjTlMq41rYHxgsn6Yh8tybmA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@oxlint/binding-linux-ppc64-gnu@1.55.0':
-    resolution: {integrity: sha512-A6pTdXwcEEwL/nmz0eUJ6WxmxcoIS+97GbH96gikAyre3s5deC7sts38ZVVowjS2QQFuSWkpA4ZmQC0jZSNvJQ==}
+  '@oxlint/binding-linux-ppc64-gnu@1.59.0':
+    resolution: {integrity: sha512-K0diOpT3ncDmOfl9I1HuvpEsAuTxkts0VYwIv/w6Xiy9CdwyPBVX88Ga9l8VlGgMrwBMnSY4xIvVlVY/fkQk7Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
-  '@oxlint/binding-linux-riscv64-gnu@1.55.0':
-    resolution: {integrity: sha512-clj0lnIN+V52G9tdtZl0LbdTSurnZ1NZj92Je5X4lC7gP5jiCSW+Y/oiDiSauBAD4wrHt2S7nN3pA0zfKYK/6Q==}
+  '@oxlint/binding-linux-riscv64-gnu@1.59.0':
+    resolution: {integrity: sha512-xAU7+QDU6kTJJ7mJLOGgo7oOjtAtkKyFZ0Yjdb5cEo3DiCCPFLvyr08rWiQh6evZ7RiUTf+o65NY/bqttzJiQQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
 
-  '@oxlint/binding-linux-riscv64-musl@1.55.0':
-    resolution: {integrity: sha512-NNu08pllN5x/O94/sgR3DA8lbrGBnTHsINZZR0hcav1sj79ksTiKKm1mRzvZvacwQ0hUnGinFo+JO75ok2PxYg==}
+  '@oxlint/binding-linux-riscv64-musl@1.59.0':
+    resolution: {integrity: sha512-KUmZmKlTTyauOnvUNVxK7G40sSSx0+w5l1UhaGsC6KPpOYHenx2oqJTnabmpLJicok7IC+3Y6fXAUOMyexaeJQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
     libc: [musl]
 
-  '@oxlint/binding-linux-s390x-gnu@1.55.0':
-    resolution: {integrity: sha512-BvfQz3PRlWZRoEZ17dZCqgQsMRdpzGZomJkVATwCIGhHVVeHJMQdmdXPSjcT1DCNUrOjXnVyj1RGDj5+/Je2+Q==}
+  '@oxlint/binding-linux-s390x-gnu@1.59.0':
+    resolution: {integrity: sha512-4usRxC8gS0PGdkHnRmwJt/4zrQNZyk6vL0trCxwZSsAKM+OxhB8nKiR+mhjdBbl8lbMh2gc3bZpNN/ik8c4c2A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@oxlint/binding-linux-x64-gnu@1.55.0':
-    resolution: {integrity: sha512-ngSOoFCSBMKVQd24H8zkbcBNc7EHhjnF1sv3mC9NNXQ/4rRjI/4Dj9+9XoDZeFEkF1SX1COSBXF1b2Pr9rqdEw==}
+  '@oxlint/binding-linux-x64-gnu@1.59.0':
+    resolution: {integrity: sha512-s/rNE2gDmbwAOOP493xk2X7M8LZfI1LJFSSW1+yanz3vuQCFPiHkx4GY+O1HuLUDtkzGlhtMrIcxxzyYLv308w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@oxlint/binding-linux-x64-musl@1.55.0':
-    resolution: {integrity: sha512-BDpP7W8GlaG7BR6QjGZAleYzxoyKc/D24spZIF2mB3XsfALQJJT/OBmP8YpeTb1rveFSBHzl8T7l0aqwkWNdGA==}
+  '@oxlint/binding-linux-x64-musl@1.59.0':
+    resolution: {integrity: sha512-+yYj1udJa2UvvIUmEm0IcKgc0UlPMgz0nsSTvkPL2y6n0uU5LgIHSwVu4AHhrve6j9BpVSoRksnz8c9QcvITJA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@oxlint/binding-openharmony-arm64@1.55.0':
-    resolution: {integrity: sha512-PS6GFvmde/pc3fCA2Srt51glr8Lcxhpf6WIBFfLphndjRrD34NEcses4TSxQrEcxYo6qVywGfylM0ZhSCF2gGA==}
+  '@oxlint/binding-openharmony-arm64@1.59.0':
+    resolution: {integrity: sha512-bUplUb48LYsB3hHlQXP2ZMOenpieWoOyppLAnnAhuPag3MGPnt+7caxE3w/Vl9wpQsTA3gzLntQi9rxWrs7Xqg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
-  '@oxlint/binding-win32-arm64-msvc@1.55.0':
-    resolution: {integrity: sha512-P6JcLJGs/q1UOvDLzN8otd9JsH4tsuuPDv+p7aHqHM3PrKmYdmUvkNj4K327PTd35AYcznOCN+l4ZOaq76QzSw==}
+  '@oxlint/binding-win32-arm64-msvc@1.59.0':
+    resolution: {integrity: sha512-/HLsLuz42rWl7h7ePdmMTpHm2HIDmPtcEMYgm5BBEHiEiuNOrzMaUpd2z7UnNni5LGN9obJy2YoAYBLXQwazrA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@oxlint/binding-win32-ia32-msvc@1.55.0':
-    resolution: {integrity: sha512-gzkk4zE2zsE+WmRxFOiAZHpCpUNDFytEakqNXoNHW+PnYEOTPKDdW6nrzgSeTbGKVPXNAKQnRnMgrh7+n3Xueg==}
+  '@oxlint/binding-win32-ia32-msvc@1.59.0':
+    resolution: {integrity: sha512-rUPy+JnanpPwV/aJCPnxAD1fW50+XPI0VkWr7f0vEbqcdsS8NpB24Rw6RsS7SdpFv8Dw+8ugCwao5nCFbqOUSg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ia32]
     os: [win32]
 
-  '@oxlint/binding-win32-x64-msvc@1.55.0':
-    resolution: {integrity: sha512-ZFALNow2/og75gvYzNP7qe+rREQ5xunktwA+lgykoozHZ6hw9bqg4fn5j2UvG4gIn1FXqrZHkOAXuPf5+GOYTQ==}
+  '@oxlint/binding-win32-x64-msvc@1.59.0':
+    resolution: {integrity: sha512-xkE7puteDS/vUyRngLXW0t8WgdWoS/tfxXjhP/P7SMqPDx+hs44SpssO3h3qmTqECYEuXBUPzcAw5257Ka+ofA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
@@ -4271,6 +4367,9 @@ packages:
       '@tmcp/auth':
         optional: true
 
+  '@total-typescript/shoehorn@0.1.2':
+    resolution: {integrity: sha512-p7nNZbOZIofpDNyP0u1BctFbjxD44Qc+oO5jufgQdFdGIXJLc33QRloJpq7k5T59CTgLWfQSUxsuqLcmeurYRw==}
+
   '@tweenjs/tween.js@23.1.3':
     resolution: {integrity: sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==}
 
@@ -4376,6 +4475,9 @@ packages:
   '@types/react@19.1.9':
     resolution: {integrity: sha512-WmdoynAX8Stew/36uTSVMcLJJ1KRh6L3IZRx1PZ7qJtBqT3dYTgyDTx8H1qoRghErydW7xw9mSJ3wS//tCRpFA==}
 
+  '@types/sax@1.2.7':
+    resolution: {integrity: sha512-rO73L89PJxeYM3s3pPPjiPgVVcymqU490g0YO5n5By0k2Erzj6tay/4lr1CHAAU4JyOWd1rpQ8bCf6cZfHU96A==}
+
   '@types/semver@7.7.0':
     resolution: {integrity: sha512-k107IF4+Xr7UHjwDc7Cfd6PRQfbdkiRabXGRjo07b4WyPahFBZCZ1sE+BNxYIJPPg73UkfOsVOLwqVc/6ETrIA==}
 
@@ -4715,12 +4817,23 @@ packages:
   '@vitest/utils@4.0.16':
     resolution: {integrity: sha512-h8z9yYhV3e1LEfaQ3zdypIrnAg/9hguReGZoS7Gl0aBG5xgA410zBqECqmaF/+RkTggRsfnzc1XaAHA6bmUufA==}
 
+  '@volar/kit@2.4.28':
+    resolution: {integrity: sha512-cKX4vK9dtZvDRaAzeoUdaAJEew6IdxHNCRrdp5Kvcl6zZOqb6jTOfk3kXkIkG3T7oTFXguEMt5+9ptyqYR84Pg==}
+    peerDependencies:
+      typescript: '*'
+
   '@volar/language-core@2.4.15':
     resolution: {integrity: sha512-3VHw+QZU0ZG9IuQmzT68IyN4hZNd9GchGPhbD9+pa8CVv7rnoOZwo7T8weIbrRmihqy3ATpdfXFnqRrfPVK6CA==}
 
   '@volar/language-core@2.4.28':
     resolution: {integrity: sha512-w4qhIJ8ZSitgLAkVay6AbcnC7gP3glYM3fYwKV3srj8m494E3xtrCv6E+bWviiK/8hs6e6t1ij1s2Endql7vzQ==}
 
+  '@volar/language-server@2.4.28':
+    resolution: {integrity: sha512-NqcLnE5gERKuS4PUFwlhMxf6vqYo7hXtbMFbViXcbVkbZ905AIVWhnSo0ZNBC2V127H1/2zP7RvVOVnyITFfBw==}
+
+  '@volar/language-service@2.4.28':
+    resolution: {integrity: sha512-Rh/wYCZJrI5vCwMk9xyw/Z+MsWxlJY1rmMZPsxUoJKfzIRjS/NF1NmnuEcrMbEVGja00aVpCsInJfixQTMdvLw==}
+
   '@volar/source-map@2.4.15':
     resolution: {integrity: sha512-CPbMWlUN6hVZJYGcU/GSoHu4EnCHiLaXI9n8c9la6RaI9W5JHX+NqG+GSQcB0JdC2FIBLdZJwGsfKyBB71VlTg==}
 
@@ -4733,6 +4846,12 @@ packages:
   '@volar/typescript@2.4.28':
     resolution: {integrity: sha512-Ja6yvWrbis2QtN4ClAKreeUZPVYMARDYZl9LMEv1iQ1QdepB6wn0jTRxA9MftYmYa4DQ4k/DaSZpFPUfxl8giw==}
 
+  '@vscode/emmet-helper@2.11.0':
+    resolution: {integrity: sha512-QLxjQR3imPZPQltfbWRnHU6JecWTF1QSWhx3GAKQpslx7y3Dp6sIIXhKjiUJ/BR9FX8PVthjr9PD6pNwOJfAzw==}
+
+  '@vscode/l10n@0.0.18':
+    resolution: {integrity: sha512-KYSIHVmslkaCDyw013pphY+d7x1qV8IZupYfeIfzNA+nsaWHbn5uPuQRvdRFsa9zFzGeudPuoGoZ1Op4jrJXIQ==}
+
   '@vue/babel-helper-vue-transform-on@1.4.0':
     resolution: {integrity: sha512-mCokbouEQ/ocRce/FpKCRItGo+013tHg7tixg3DUNS+6bmIchPt66012kBMm476vyEIJPafrvOf4E5OYj3shSw==}
 
@@ -4967,6 +5086,14 @@ packages:
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
 
+  acorn-loose@8.5.2:
+    resolution: {integrity: sha512-PPvV6g8UGMGgjrMu+n/f9E/tCSkNQ2Y97eFvuVdJfG11+xdIeDcLyNdC8SHcrHbRqkfwLASdplyR6B6sKM1U4A==}
+    engines: {node: '>=0.4.0'}
+
+  acorn-walk@8.3.5:
+    resolution: {integrity: sha512-HEHNfbars9v4pgpW6SO1KSPkfoS0xVOM/9UzkJltjlsHZmJasxg8aXkuZa7SMf8vKGIBhpUsPluQSqhJFCqebw==}
+    engines: {node: '>=0.4.0'}
+
   acorn@7.4.1:
     resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
     engines: {node: '>=0.4.0'}
@@ -5073,6 +5200,9 @@ packages:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
 
+  arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+
   argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
 
@@ -5548,6 +5678,9 @@ packages:
     resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
     engines: {node: ^14.18.0 || >=16.10.0}
 
+  console-grid@2.2.3:
+    resolution: {integrity: sha512-+mecFacaFxGl+1G31IsCx41taUXuW2FxX+4xIE0TIPhgML+Jb9JFcBWGhhWerd1/vhScubdmHqTwOhB0KCUUAg==}
+
   constantinople@4.0.1:
     resolution: {integrity: sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==}
 
@@ -5877,6 +6010,9 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
+  eight-colors@1.3.3:
+    resolution: {integrity: sha512-4B54S2Qi4pJjeHmCbDIsveQZWQ/TSSQng4ixYJ9/SYHHpeS5nYK0pzcHvWzWUfRsvJQjwoIENhAwqg59thQceg==}
+
   ejs@3.1.10:
     resolution: {integrity: sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==}
     engines: {node: '>=0.10.0'}
@@ -5885,6 +6021,9 @@ packages:
   electron-to-chromium@1.5.267:
     resolution: {integrity: sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==}
 
+  emmet@2.4.11:
+    resolution: {integrity: sha512-23QPJB3moh/U9sT4rQzGgeyyGIrcM+GH5uVYg2C6wZIxAIJq7Ng3QLT79tl8FUwDXhyq9SusfknOrofAKqvgyQ==}
+
   emoji-regex@10.4.0:
     resolution: {integrity: sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==}
 
@@ -6106,8 +6245,16 @@ packages:
       '@typescript-eslint/parser':
         optional: true
 
-  eslint-plugin-oxlint@1.55.0:
-    resolution: {integrity: sha512-5ng7DOuikSE64e7hX2HBqEWdmql+Q4FWppBoBkxKKflLt1j9LXhab5BN3bYJKyrAihuK1/VH2JvfNefeOZAqpA==}
+  eslint-plugin-oxlint@1.59.0:
+    resolution: {integrity: sha512-g0DR+xSsnUdyaMc2KAXvBVGWz5V4GwlAE1PM+ocKxl2Eg7YgOjkRLLbxgJ3bhYOhRLhD8F0X4DjJu2FSDvrvAg==}
+    peerDependencies:
+      oxlint: ~1.59.0
+
+  eslint-plugin-playwright@2.10.1:
+    resolution: {integrity: sha512-qea3UxBOb8fTwJ77FMApZKvRye5DOluDHcev0LDJwID3RELeun0JlqzrNIXAB/SXCyB/AesCW/6sZfcT9q3Edg==}
+    engines: {node: '>=16.9.0'}
+    peerDependencies:
+      eslint: '>=8.40.0'
 
   eslint-plugin-storybook@10.2.10:
     resolution: {integrity: sha512-aWkoh2rhTaEsMA4yB1iVIcISM5wb0uffp09ZqhwpoD4GAngCs131uq6un+QdnOMc7vXyAnBBfsuhtOj8WwCUgw==}
@@ -6476,8 +6623,8 @@ packages:
     resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
     engines: {node: '>= 0.4'}
 
-  get-tsconfig@4.13.6:
-    resolution: {integrity: sha512-shZT/QMiSHc/YBLxxOkMtgSid5HFoauqCE3/exfsEcwg1WkeqjG+V40yBbBrsD+jW2HDXcs28xOfcbm2jI8Ddw==}
+  get-tsconfig@4.13.7:
+    resolution: {integrity: sha512-7tN6rFgBlMgpBML5j8typ92BKFi2sFQvIdpAqLA2beia5avZDrMs0FLZiM5etShWq5irVyGcGMEA1jcDaK7A/Q==}
 
   giget@2.0.0:
     resolution: {integrity: sha512-L5bGsVkxJbJgdnwyuheIunkGatUF/zssUoxxjACCseZYAVbaqdh9Tsmmlkl8vYan09H7sbvKt4pS8GqKLBrEzA==}
@@ -6528,6 +6675,10 @@ packages:
     resolution: {integrity: sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==}
     engines: {node: '>=18'}
 
+  globals@17.4.0:
+    resolution: {integrity: sha512-hjrNztw/VajQwOLsMNT1cbJiH2muO3OROCHnbehc8eY5JyD2gqz4AcMHPqgaOR59DjgUjYAYLeH699g/eWi2jw==}
+    engines: {node: '>=18'}
+
   globalthis@1.0.4:
     resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
     engines: {node: '>= 0.4'}
@@ -6556,6 +6707,9 @@ packages:
     resolution: {integrity: sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==}
     engines: {node: '>=6.0'}
 
+  gsap@3.14.2:
+    resolution: {integrity: sha512-P8/mMxVLU7o4+55+1TCnQrPmgjPKnwkzkXOK1asnR9Jg2lna4tEY5qBJjMmAaOBDDZWtlRjBXjLa0w53G/uBLA==}
+
   h3@1.15.10:
     resolution: {integrity: sha512-YzJeWSkDZxAhvmp8dexjRK5hxziRO7I9m0N53WhvYL5NiWfkUkzssVzY9jvGu0HBoLFW6+duYmNSn6MaZBCCtg==}
 
@@ -7106,6 +7260,9 @@ packages:
     resolution: {integrity: sha512-WYDyuc/uFcGp6YtM2H0uKmUwieOuzeE/5YocFJLnLfclZ4inf3mRn8ZVy1s7Hxji7Jxm6Ss8gqpexD/GlKoGgg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
+  jsonc-parser@2.3.1:
+    resolution: {integrity: sha512-H8jvkz1O50L3dMZCsLqiuB2tA7muqbSg1AtGEkN0leAqGjsUzDJir3Zwr02BhqdcITPg3ei3mZ+HjMocAknhhg==}
+
   jsonc-parser@3.2.0:
     resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==}
 
@@ -7146,8 +7303,12 @@ packages:
     resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
     engines: {node: '>=6'}
 
-  knip@6.0.1:
-    resolution: {integrity: sha512-qk5m+w6IYEqfRG5546DXZJYl5AXsgFfDD6ULaDvkubqNtLye79sokBg3usURrWFjASMeQtvX19TfldU3jHkMNA==}
+  kleur@4.1.5:
+    resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
+    engines: {node: '>=6'}
+
+  knip@6.3.1:
+    resolution: {integrity: sha512-22kLJloVcOVOAudCxlFOC0ICAMme7dKsS7pVTEnrmyKGpswb8ieznvAiSKUeFVDJhb01ect6dkDc1Ha1g1sPpg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
@@ -7165,6 +7326,20 @@ packages:
     resolution: {integrity: sha512-7W0vV3rqv5tokqkBAFV1LbR7HPOWzXQDpDgEuib/aJ1jsZZx6x3c2mBI+TJhJzOhkGeaLbCKEHXEXLfirtG2JA==}
     engines: {node: '>=18'}
 
+  lenis@1.3.21:
+    resolution: {integrity: sha512-RXWTYm7KQE4Kv8ezxL6wvK0Oiv7aRr6FDo+eNaaniTeu7pLdHokqMIJ5CXO4x5ezvd+9ONdpSFkprLpXsVWmEw==}
+    peerDependencies:
+      '@nuxt/kit': '>=3.0.0'
+      react: '>=17.0.0'
+      vue: '>=3.0.0'
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+      react:
+        optional: true
+      vue:
+        optional: true
+
   levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
@@ -7423,6 +7598,9 @@ packages:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
 
+  lz-utils@2.1.0:
+    resolution: {integrity: sha512-CMkfimAypidTtWjNDxY8a1bc1mJdyEh04V2FfEQ5Zh8Nx4v7k850EYa+dOWGn9hKG5xOyHP5MkuduAZCTHRvJw==}
+
   magic-string-ast@1.0.3:
     resolution: {integrity: sha512-CvkkH1i81zl7mmb94DsRiFeG9V2fR2JeuK8yDgS8oiZSFa++wWLEgZ5ufEOyLHbvSbD1gTRKv9NdX69Rnvr9JA==}
     engines: {node: '>=20.19.0'}
@@ -7699,6 +7877,13 @@ packages:
     resolution: {integrity: sha512-4W79zekKGyYU4JXVmB78DOscMFaJth2gGhgfTl2alWE4rNe3nf4N2pqenQ0rEtIewrnD79M687Ouba3YGTLOvg==}
     engines: {node: '>=18.0.0'}
 
+  monocart-coverage-reports@2.12.9:
+    resolution: {integrity: sha512-vtFqbC3Egl4nVa1FSIrQvMPO6HZtb9lo+3IW7/crdvrLNW2IH8lUsxaK0TsKNmMO2mhFWwqQywLV2CZelqPgwA==}
+    hasBin: true
+
+  monocart-locator@1.0.2:
+    resolution: {integrity: sha512-v8W5hJLcWMIxLCcSi/MHh+VeefI+ycFmGz23Froer9QzWjrbg4J3gFJBuI/T1VLNoYxF47bVPPxq8ZlNX4gVCw==}
+
   mrmime@2.0.1:
     resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
     engines: {node: '>=10'}
@@ -7901,28 +8086,28 @@ packages:
     resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
     engines: {node: '>= 0.4'}
 
-  oxc-parser@0.120.0:
-    resolution: {integrity: sha512-WyPWZlcIm+Fkte63FGfgFB8mAAk33aH9h5N9lphXVOHSXEBFFsmYdOBedVKly363aWABjZdaj/m9lBfEY4wt+w==}
+  oxc-parser@0.121.0:
+    resolution: {integrity: sha512-ek9o58+SCv6AV7nchiAcUJy1DNE2CC5WRdBcO0mF+W4oRjNQfPO7b3pLjTHSFECpHkKGOZSQxx3hk8viIL5YCg==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
   oxc-resolver@11.19.1:
     resolution: {integrity: sha512-qE/CIg/spwrTBFt5aKmwe3ifeDdLfA2NESN30E42X/lII5ClF8V7Wt6WIJhcGZjp0/Q+nQ+9vgxGk//xZNX2hg==}
 
-  oxfmt@0.40.0:
-    resolution: {integrity: sha512-g0C3I7xUj4b4DcagevM9kgH6+pUHytikxUcn3/VUkvzTNaaXBeyZqb7IBsHwojeXm4mTBEC/aBjBTMVUkZwWUQ==}
+  oxfmt@0.44.0:
+    resolution: {integrity: sha512-lnncqvHewyRvaqdrnntVIrZV2tEddz8lbvPsQzG/zlkfvgZkwy0HP1p/2u1aCDToeg1jb9zBpbJdfkV73Itw+w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
-  oxlint-tsgolint@0.17.0:
-    resolution: {integrity: sha512-TdrKhDZCgEYqONFo/j+KvGan7/k3tP5Ouz88wCqpOvJtI2QmcLfGsm1fcMvDnTik48Jj6z83IJBqlkmK9DnY1A==}
+  oxlint-tsgolint@0.20.0:
+    resolution: {integrity: sha512-/Uc9TQyN1l8w9QNvXtVHYtz+SzDJHKpb5X0UnHodl0BVzijUPk0LPlDOHAvogd1UI+iy9ZSF6gQxEqfzUxCULQ==}
     hasBin: true
 
-  oxlint@1.55.0:
-    resolution: {integrity: sha512-T+FjepiyWpaZMhekqRpH8Z3I4vNM610p6w+Vjfqgj5TZUxHXl7N8N5IPvmOU8U4XdTRxqtNNTh9Y4hLtr7yvFg==}
+  oxlint@1.59.0:
+    resolution: {integrity: sha512-0xBLeGGjP4vD9pygRo8iuOkOzEU1MqOnfiOl7KYezL/QvWL8NUg6n03zXc7ZVqltiOpUxBk2zgHI3PnRIEdAvw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
-      oxlint-tsgolint: '>=0.15.0'
+      oxlint-tsgolint: '>=0.18.0'
     peerDependenciesMeta:
       oxlint-tsgolint:
         optional: true
@@ -8470,6 +8655,12 @@ packages:
   remark-stringify@11.0.0:
     resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
 
+  request-light@0.5.8:
+    resolution: {integrity: sha512-3Zjgh+8b5fhRJBQZoy+zbVKpAQGLyka0MPgW3zruTF4dFFJ8Fqcfu9YsAvi/rvdcaTeWG3MkbZv4WKxAn/84Lg==}
+
+  request-light@0.7.0:
+    resolution: {integrity: sha512-lMbBMrDoxgsyO+yB3sDcrDuX85yYt7sS8BfQd11jtbW/z5ZWgLZRcEGLsLoYw7I0WSUGQBs8CC8ScIxkTX1+6Q==}
+
   require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
@@ -8680,6 +8871,11 @@ packages:
   sisteransi@1.0.5:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
 
+  sitemap@9.0.1:
+    resolution: {integrity: sha512-S6hzjGJSG3d6if0YoF5kTyeRJvia6FSTBroE5fQ0bu1QNxyJqhhinfUsXi9fH3MgtXODWvwo2BDyQSnhPQ88uQ==}
+    engines: {node: '>=20.19.5', npm: '>=10.8.2'}
+    hasBin: true
+
   slash@3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
@@ -8696,8 +8892,8 @@ packages:
     resolution: {integrity: sha512-stxByr12oeeOyY2BlviTNQlYV5xOj47GirPr4yA1hE9JCtxfQN0+tVbkxwCtYDQWhEKWFHsEK48ORg5jrouCAg==}
     engines: {node: '>=20'}
 
-  smol-toml@1.6.0:
-    resolution: {integrity: sha512-4zemZi0HvTnYwLfrpk/CF9LOd9Lt87kAt50GnqhMpyF9U3poDAP2+iukq2bZsO/ufegbYehBkqINbsWxj4l4cw==}
+  smol-toml@1.6.1:
+    resolution: {integrity: sha512-dWUG8F5sIIARXih1DTaQAX4SsiTXhInKf1buxdY9DIg4ZYPZK5nGM1VRIYmEbDbsHt7USo99xSLFu5Q1IqTmsg==}
     engines: {node: '>= 18'}
 
   source-map-js@1.2.1:
@@ -8761,6 +8957,9 @@ packages:
       prettier:
         optional: true
 
+  stream-replace-string@2.0.0:
+    resolution: {integrity: sha512-TlnjJ1C0QrmxRNrON00JvaFFlNh5TTG00APw23j74ET7gkQpTASi6/L2fuiav8pzK715HXtUeClpBTw2NPSn6w==}
+
   string-argv@0.3.2:
     resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
     engines: {node: '>=0.6.19'}
@@ -9118,6 +9317,12 @@ packages:
     resolution: {integrity: sha512-wkMJWhJE0pSkw2G/FesjqjbtHkREyOKu1Zmyj19xfmaX5+65YFwgfQNKSK8CxqN4kJkP7JFelLDJTSYY536TYg==}
     engines: {node: '>=12.20.0'}
 
+  typesafe-path@0.2.2:
+    resolution: {integrity: sha512-OJabfkAg1WLZSqJAJ0Z6Sdt3utnbzr/jh+NAHoyWHJe8CMSy79Gm085094M9nvTPy22KzTVn5Zq5mbapCI/hPA==}
+
+  typescript-auto-import-cache@0.3.6:
+    resolution: {integrity: sha512-RpuHXrknHdVdK7wv/8ug3Fr0WNsNi5l5aB8MYYuXhq2UH5lnEB1htJ1smhtD5VeCsGr2p8mUDtd83LCQDFVgjQ==}
+
   typescript-eslint@8.49.0:
     resolution: {integrity: sha512-zRSVH1WXD0uXczCXw+nsdjGPUdx4dfrs5VQoHnUWmv1U3oNlAKv4FUNdLDhVUg+gYn+a5hUESqch//Rv5wVhrg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -9543,6 +9748,95 @@ packages:
     resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
     engines: {node: '>=0.10.0'}
 
+  volar-service-css@0.0.70:
+    resolution: {integrity: sha512-K1qyOvBpE3rzdAv3e4/6Rv5yizrYPy5R/ne3IWCAzLBuMO4qBMV3kSqWzj6KUVe6S0AnN6wxF7cRkiaKfYMYJw==}
+    peerDependencies:
+      '@volar/language-service': ~2.4.0
+    peerDependenciesMeta:
+      '@volar/language-service':
+        optional: true
+
+  volar-service-emmet@0.0.70:
+    resolution: {integrity: sha512-xi5bC4m/VyE3zy/n2CXspKeDZs3qA41tHLTw275/7dNWM/RqE2z3BnDICQybHIVp/6G1iOQj5c1qXMgQC08TNg==}
+    peerDependencies:
+      '@volar/language-service': ~2.4.0
+    peerDependenciesMeta:
+      '@volar/language-service':
+        optional: true
+
+  volar-service-html@0.0.70:
+    resolution: {integrity: sha512-eR6vCgMdmYAo4n+gcT7DSyBQbwB8S3HZZvSagTf0sxNaD4WppMCFfpqWnkrlGStPKMZvMiejRRVmqsX9dYcTvQ==}
+    peerDependencies:
+      '@volar/language-service': ~2.4.0
+    peerDependenciesMeta:
+      '@volar/language-service':
+        optional: true
+
+  volar-service-prettier@0.0.70:
+    resolution: {integrity: sha512-Z6BCFSpGVCd8BPAsZ785Kce1BGlWd5ODqmqZGVuB14MJvrR4+CYz6cDy4F+igmE1gMifqfvMhdgT8Aud4M5ngg==}
+    peerDependencies:
+      '@volar/language-service': ~2.4.0
+      prettier: ^2.2 || ^3.0
+    peerDependenciesMeta:
+      '@volar/language-service':
+        optional: true
+      prettier:
+        optional: true
+
+  volar-service-typescript-twoslash-queries@0.0.70:
+    resolution: {integrity: sha512-IdD13Z9N2Bu8EM6CM0fDV1E69olEYGHDU25X51YXmq8Y0CmJ2LNj6gOiBJgpS5JGUqFzECVhMNBW7R0sPdRTMQ==}
+    peerDependencies:
+      '@volar/language-service': ~2.4.0
+    peerDependenciesMeta:
+      '@volar/language-service':
+        optional: true
+
+  volar-service-typescript@0.0.70:
+    resolution: {integrity: sha512-l46Bx4cokkUedTd74ojO5H/zqHZJ8SUuyZ0IB8JN4jfRqUM3bQFBHoOwlZCyZmOeO0A3RQNkMnFclxO4c++gsg==}
+    peerDependencies:
+      '@volar/language-service': ~2.4.0
+    peerDependenciesMeta:
+      '@volar/language-service':
+        optional: true
+
+  volar-service-yaml@0.0.70:
+    resolution: {integrity: sha512-0c8bXDBeoATF9F6iPIlOuYTuZAC4c+yi0siQo920u7eiBJk8oQmUmg9cDUbR4+Gl++bvGP4plj3fErbJuPqdcQ==}
+    peerDependencies:
+      '@volar/language-service': ~2.4.0
+    peerDependenciesMeta:
+      '@volar/language-service':
+        optional: true
+
+  vscode-css-languageservice@6.3.10:
+    resolution: {integrity: sha512-eq5N9Er3fC4vA9zd9EFhyBG90wtCCuXgRSpAndaOgXMh1Wgep5lBgRIeDgjZBW9pa+332yC9+49cZMW8jcL3MA==}
+
+  vscode-html-languageservice@5.6.2:
+    resolution: {integrity: sha512-ulCrSnFnfQ16YzvwnYUgEbUEl/ZG7u2eV27YhvLObSHKkb8fw1Z9cgsnUwjTEeDIdJDoTDTDpxuhQwoenoLNMg==}
+
+  vscode-json-languageservice@4.1.8:
+    resolution: {integrity: sha512-0vSpg6Xd9hfV+eZAaYN63xVVMOTmJ4GgHxXnkLCh+9RsQBkWKIghzLhW2B9ebfG+LQQg8uLtsQ2aUKjTgE+QOg==}
+    engines: {npm: '>=7.0.0'}
+
+  vscode-jsonrpc@8.2.0:
+    resolution: {integrity: sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==}
+    engines: {node: '>=14.0.0'}
+
+  vscode-languageserver-protocol@3.17.5:
+    resolution: {integrity: sha512-mb1bvRJN8SVznADSGWM9u/b07H7Ecg0I3OgXDuLdn307rl/J3A9YD6/eYOssqhecL27hK1IPZAsaqh00i/Jljg==}
+
+  vscode-languageserver-textdocument@1.0.12:
+    resolution: {integrity: sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==}
+
+  vscode-languageserver-types@3.17.5:
+    resolution: {integrity: sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==}
+
+  vscode-languageserver@9.0.1:
+    resolution: {integrity: sha512-woByF3PDpkHFUreUa7Hos7+pUWdeWMXRd26+ZX2A8cFx6v/JPTtd4/uN0/jB6XQHYaOlHbio03NTHCqrgG5n7g==}
+    hasBin: true
+
+  vscode-nls@5.2.0:
+    resolution: {integrity: sha512-RAaHx7B14ZU04EU31pT+rKz2/zSl7xMsfIZuo8pd+KZO6PXtQmpevpq3vxvWNcrGbdmhM/rr5Uw5Mz+NBfhVng==}
+
   vscode-uri@3.1.0:
     resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
 
@@ -9836,10 +10130,19 @@ packages:
     resolution: {integrity: sha512-E/+VitOorXSLiAqtTd7Yqax0/pAS3xaYMP+AUUJGOK1OZG3rhcj9fcJOM5HJ2VrP1FrStVCWr1muTfQCdj4tAA==}
     engines: {node: ^14.17.0 || >=16.0.0}
 
+  yaml-language-server@1.20.0:
+    resolution: {integrity: sha512-qhjK/bzSRZ6HtTvgeFvjNPJGWdZ0+x5NREV/9XZWFjIGezew2b4r5JPy66IfOhd5OA7KeFwk1JfmEbnTvev0cA==}
+    hasBin: true
+
   yaml@1.10.2:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
 
+  yaml@2.7.1:
+    resolution: {integrity: sha512-10ULxpnOCQXxJvBgxsn9ptjq6uviG/htZKk9veJGhlqn3w/DxQ631zFF+nlQXLwmImeS5amR2dl2U8sg6U9jsQ==}
+    engines: {node: '>= 14'}
+    hasBin: true
+
   yaml@2.8.2:
     resolution: {integrity: sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==}
     engines: {node: '>= 14.6'}
@@ -10038,10 +10341,46 @@ snapshots:
 
   '@asamuzakjp/nwsapi@2.3.9': {}
 
+  '@astrojs/check@0.9.8(prettier@3.7.4)(typescript@5.9.3)':
+    dependencies:
+      '@astrojs/language-server': 2.16.6(prettier@3.7.4)(typescript@5.9.3)
+      chokidar: 4.0.3
+      kleur: 4.1.5
+      typescript: 5.9.3
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - prettier
+      - prettier-plugin-astro
+
   '@astrojs/compiler@2.13.1': {}
 
   '@astrojs/internal-helpers@0.7.6': {}
 
+  '@astrojs/language-server@2.16.6(prettier@3.7.4)(typescript@5.9.3)':
+    dependencies:
+      '@astrojs/compiler': 2.13.1
+      '@astrojs/yaml2ts': 0.2.3
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@volar/kit': 2.4.28(typescript@5.9.3)
+      '@volar/language-core': 2.4.28
+      '@volar/language-server': 2.4.28
+      '@volar/language-service': 2.4.28
+      muggle-string: 0.4.1
+      tinyglobby: 0.2.15
+      volar-service-css: 0.0.70(@volar/language-service@2.4.28)
+      volar-service-emmet: 0.0.70(@volar/language-service@2.4.28)
+      volar-service-html: 0.0.70(@volar/language-service@2.4.28)
+      volar-service-prettier: 0.0.70(@volar/language-service@2.4.28)(prettier@3.7.4)
+      volar-service-typescript: 0.0.70(@volar/language-service@2.4.28)
+      volar-service-typescript-twoslash-queries: 0.0.70(@volar/language-service@2.4.28)
+      volar-service-yaml: 0.0.70(@volar/language-service@2.4.28)
+      vscode-html-languageservice: 5.6.2
+      vscode-uri: 3.1.0
+    optionalDependencies:
+      prettier: 3.7.4
+    transitivePeerDependencies:
+      - typescript
+
   '@astrojs/markdown-remark@6.3.11':
     dependencies:
       '@astrojs/internal-helpers': 0.7.6
@@ -10059,7 +10398,7 @@ snapshots:
       remark-rehype: 11.1.2
       remark-smartypants: 3.0.2
       shiki: 3.23.0
-      smol-toml: 1.6.0
+      smol-toml: 1.6.1
       unified: 11.0.5
       unist-util-remove-position: 5.0.0
       unist-util-visit: 5.1.0
@@ -10072,6 +10411,12 @@ snapshots:
     dependencies:
       prismjs: 1.30.0
 
+  '@astrojs/sitemap@3.7.1':
+    dependencies:
+      sitemap: 9.0.1
+      stream-replace-string: 2.0.0
+      zod: 4.3.6
+
   '@astrojs/telemetry@3.3.0':
     dependencies:
       ci-info: 4.4.0
@@ -10110,6 +10455,10 @@ snapshots:
       - tsx
       - yaml
 
+  '@astrojs/yaml2ts@0.2.3':
+    dependencies:
+      yaml: 2.8.2
+
   '@atlaskit/pragmatic-drag-and-drop@1.3.1':
     dependencies:
       '@babel/runtime': 7.29.2
@@ -10894,6 +11243,29 @@ snapshots:
 
   '@dual-bundle/import-meta-resolve@4.2.1': {}
 
+  '@emmetio/abbreviation@2.3.3':
+    dependencies:
+      '@emmetio/scanner': 1.0.4
+
+  '@emmetio/css-abbreviation@2.1.8':
+    dependencies:
+      '@emmetio/scanner': 1.0.4
+
+  '@emmetio/css-parser@0.4.1':
+    dependencies:
+      '@emmetio/stream-reader': 2.2.0
+      '@emmetio/stream-reader-utils': 0.1.0
+
+  '@emmetio/html-matcher@1.3.0':
+    dependencies:
+      '@emmetio/scanner': 1.0.4
+
+  '@emmetio/scanner@1.0.4': {}
+
+  '@emmetio/stream-reader-utils@0.1.0': {}
+
+  '@emmetio/stream-reader@2.2.0': {}
+
   '@emnapi/core@1.8.1':
     dependencies:
       '@emnapi/wasi-threads': 1.1.0
@@ -12227,73 +12599,73 @@ snapshots:
 
   '@oslojs/encoding@1.1.0': {}
 
-  '@oxc-parser/binding-android-arm-eabi@0.120.0':
+  '@oxc-parser/binding-android-arm-eabi@0.121.0':
     optional: true
 
-  '@oxc-parser/binding-android-arm64@0.120.0':
+  '@oxc-parser/binding-android-arm64@0.121.0':
     optional: true
 
-  '@oxc-parser/binding-darwin-arm64@0.120.0':
+  '@oxc-parser/binding-darwin-arm64@0.121.0':
     optional: true
 
-  '@oxc-parser/binding-darwin-x64@0.120.0':
+  '@oxc-parser/binding-darwin-x64@0.121.0':
     optional: true
 
-  '@oxc-parser/binding-freebsd-x64@0.120.0':
+  '@oxc-parser/binding-freebsd-x64@0.121.0':
     optional: true
 
-  '@oxc-parser/binding-linux-arm-gnueabihf@0.120.0':
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.121.0':
     optional: true
 
-  '@oxc-parser/binding-linux-arm-musleabihf@0.120.0':
+  '@oxc-parser/binding-linux-arm-musleabihf@0.121.0':
     optional: true
 
-  '@oxc-parser/binding-linux-arm64-gnu@0.120.0':
+  '@oxc-parser/binding-linux-arm64-gnu@0.121.0':
     optional: true
 
-  '@oxc-parser/binding-linux-arm64-musl@0.120.0':
+  '@oxc-parser/binding-linux-arm64-musl@0.121.0':
     optional: true
 
-  '@oxc-parser/binding-linux-ppc64-gnu@0.120.0':
+  '@oxc-parser/binding-linux-ppc64-gnu@0.121.0':
     optional: true
 
-  '@oxc-parser/binding-linux-riscv64-gnu@0.120.0':
+  '@oxc-parser/binding-linux-riscv64-gnu@0.121.0':
     optional: true
 
-  '@oxc-parser/binding-linux-riscv64-musl@0.120.0':
+  '@oxc-parser/binding-linux-riscv64-musl@0.121.0':
     optional: true
 
-  '@oxc-parser/binding-linux-s390x-gnu@0.120.0':
+  '@oxc-parser/binding-linux-s390x-gnu@0.121.0':
     optional: true
 
-  '@oxc-parser/binding-linux-x64-gnu@0.120.0':
+  '@oxc-parser/binding-linux-x64-gnu@0.121.0':
     optional: true
 
-  '@oxc-parser/binding-linux-x64-musl@0.120.0':
+  '@oxc-parser/binding-linux-x64-musl@0.121.0':
     optional: true
 
-  '@oxc-parser/binding-openharmony-arm64@0.120.0':
+  '@oxc-parser/binding-openharmony-arm64@0.121.0':
     optional: true
 
-  '@oxc-parser/binding-wasm32-wasi@0.120.0':
+  '@oxc-parser/binding-wasm32-wasi@0.121.0':
     dependencies:
       '@napi-rs/wasm-runtime': 1.1.1
     optional: true
 
-  '@oxc-parser/binding-win32-arm64-msvc@0.120.0':
+  '@oxc-parser/binding-win32-arm64-msvc@0.121.0':
     optional: true
 
-  '@oxc-parser/binding-win32-ia32-msvc@0.120.0':
+  '@oxc-parser/binding-win32-ia32-msvc@0.121.0':
     optional: true
 
-  '@oxc-parser/binding-win32-x64-msvc@0.120.0':
+  '@oxc-parser/binding-win32-x64-msvc@0.121.0':
     optional: true
 
   '@oxc-project/runtime@0.115.0': {}
 
   '@oxc-project/types@0.115.0': {}
 
-  '@oxc-project/types@0.120.0': {}
+  '@oxc-project/types@0.121.0': {}
 
   '@oxc-resolver/binding-android-arm-eabi@11.19.1':
     optional: true
@@ -12357,136 +12729,136 @@ snapshots:
   '@oxc-resolver/binding-win32-x64-msvc@11.19.1':
     optional: true
 
-  '@oxfmt/binding-android-arm-eabi@0.40.0':
+  '@oxfmt/binding-android-arm-eabi@0.44.0':
     optional: true
 
-  '@oxfmt/binding-android-arm64@0.40.0':
+  '@oxfmt/binding-android-arm64@0.44.0':
     optional: true
 
-  '@oxfmt/binding-darwin-arm64@0.40.0':
+  '@oxfmt/binding-darwin-arm64@0.44.0':
     optional: true
 
-  '@oxfmt/binding-darwin-x64@0.40.0':
+  '@oxfmt/binding-darwin-x64@0.44.0':
     optional: true
 
-  '@oxfmt/binding-freebsd-x64@0.40.0':
+  '@oxfmt/binding-freebsd-x64@0.44.0':
     optional: true
 
-  '@oxfmt/binding-linux-arm-gnueabihf@0.40.0':
+  '@oxfmt/binding-linux-arm-gnueabihf@0.44.0':
     optional: true
 
-  '@oxfmt/binding-linux-arm-musleabihf@0.40.0':
+  '@oxfmt/binding-linux-arm-musleabihf@0.44.0':
     optional: true
 
-  '@oxfmt/binding-linux-arm64-gnu@0.40.0':
+  '@oxfmt/binding-linux-arm64-gnu@0.44.0':
     optional: true
 
-  '@oxfmt/binding-linux-arm64-musl@0.40.0':
+  '@oxfmt/binding-linux-arm64-musl@0.44.0':
     optional: true
 
-  '@oxfmt/binding-linux-ppc64-gnu@0.40.0':
+  '@oxfmt/binding-linux-ppc64-gnu@0.44.0':
     optional: true
 
-  '@oxfmt/binding-linux-riscv64-gnu@0.40.0':
+  '@oxfmt/binding-linux-riscv64-gnu@0.44.0':
     optional: true
 
-  '@oxfmt/binding-linux-riscv64-musl@0.40.0':
+  '@oxfmt/binding-linux-riscv64-musl@0.44.0':
     optional: true
 
-  '@oxfmt/binding-linux-s390x-gnu@0.40.0':
+  '@oxfmt/binding-linux-s390x-gnu@0.44.0':
     optional: true
 
-  '@oxfmt/binding-linux-x64-gnu@0.40.0':
+  '@oxfmt/binding-linux-x64-gnu@0.44.0':
     optional: true
 
-  '@oxfmt/binding-linux-x64-musl@0.40.0':
+  '@oxfmt/binding-linux-x64-musl@0.44.0':
     optional: true
 
-  '@oxfmt/binding-openharmony-arm64@0.40.0':
+  '@oxfmt/binding-openharmony-arm64@0.44.0':
     optional: true
 
-  '@oxfmt/binding-win32-arm64-msvc@0.40.0':
+  '@oxfmt/binding-win32-arm64-msvc@0.44.0':
     optional: true
 
-  '@oxfmt/binding-win32-ia32-msvc@0.40.0':
+  '@oxfmt/binding-win32-ia32-msvc@0.44.0':
     optional: true
 
-  '@oxfmt/binding-win32-x64-msvc@0.40.0':
+  '@oxfmt/binding-win32-x64-msvc@0.44.0':
     optional: true
 
-  '@oxlint-tsgolint/darwin-arm64@0.17.0':
+  '@oxlint-tsgolint/darwin-arm64@0.20.0':
     optional: true
 
-  '@oxlint-tsgolint/darwin-x64@0.17.0':
+  '@oxlint-tsgolint/darwin-x64@0.20.0':
     optional: true
 
-  '@oxlint-tsgolint/linux-arm64@0.17.0':
+  '@oxlint-tsgolint/linux-arm64@0.20.0':
     optional: true
 
-  '@oxlint-tsgolint/linux-x64@0.17.0':
+  '@oxlint-tsgolint/linux-x64@0.20.0':
     optional: true
 
-  '@oxlint-tsgolint/win32-arm64@0.17.0':
+  '@oxlint-tsgolint/win32-arm64@0.20.0':
     optional: true
 
-  '@oxlint-tsgolint/win32-x64@0.17.0':
+  '@oxlint-tsgolint/win32-x64@0.20.0':
     optional: true
 
-  '@oxlint/binding-android-arm-eabi@1.55.0':
+  '@oxlint/binding-android-arm-eabi@1.59.0':
     optional: true
 
-  '@oxlint/binding-android-arm64@1.55.0':
+  '@oxlint/binding-android-arm64@1.59.0':
     optional: true
 
-  '@oxlint/binding-darwin-arm64@1.55.0':
+  '@oxlint/binding-darwin-arm64@1.59.0':
     optional: true
 
-  '@oxlint/binding-darwin-x64@1.55.0':
+  '@oxlint/binding-darwin-x64@1.59.0':
     optional: true
 
-  '@oxlint/binding-freebsd-x64@1.55.0':
+  '@oxlint/binding-freebsd-x64@1.59.0':
     optional: true
 
-  '@oxlint/binding-linux-arm-gnueabihf@1.55.0':
+  '@oxlint/binding-linux-arm-gnueabihf@1.59.0':
     optional: true
 
-  '@oxlint/binding-linux-arm-musleabihf@1.55.0':
+  '@oxlint/binding-linux-arm-musleabihf@1.59.0':
     optional: true
 
-  '@oxlint/binding-linux-arm64-gnu@1.55.0':
+  '@oxlint/binding-linux-arm64-gnu@1.59.0':
     optional: true
 
-  '@oxlint/binding-linux-arm64-musl@1.55.0':
+  '@oxlint/binding-linux-arm64-musl@1.59.0':
     optional: true
 
-  '@oxlint/binding-linux-ppc64-gnu@1.55.0':
+  '@oxlint/binding-linux-ppc64-gnu@1.59.0':
     optional: true
 
-  '@oxlint/binding-linux-riscv64-gnu@1.55.0':
+  '@oxlint/binding-linux-riscv64-gnu@1.59.0':
     optional: true
 
-  '@oxlint/binding-linux-riscv64-musl@1.55.0':
+  '@oxlint/binding-linux-riscv64-musl@1.59.0':
     optional: true
 
-  '@oxlint/binding-linux-s390x-gnu@1.55.0':
+  '@oxlint/binding-linux-s390x-gnu@1.59.0':
     optional: true
 
-  '@oxlint/binding-linux-x64-gnu@1.55.0':
+  '@oxlint/binding-linux-x64-gnu@1.59.0':
     optional: true
 
-  '@oxlint/binding-linux-x64-musl@1.55.0':
+  '@oxlint/binding-linux-x64-musl@1.59.0':
     optional: true
 
-  '@oxlint/binding-openharmony-arm64@1.55.0':
+  '@oxlint/binding-openharmony-arm64@1.59.0':
     optional: true
 
-  '@oxlint/binding-win32-arm64-msvc@1.55.0':
+  '@oxlint/binding-win32-arm64-msvc@1.59.0':
     optional: true
 
-  '@oxlint/binding-win32-ia32-msvc@1.55.0':
+  '@oxlint/binding-win32-ia32-msvc@1.59.0':
     optional: true
 
-  '@oxlint/binding-win32-x64-msvc@1.55.0':
+  '@oxlint/binding-win32-x64-msvc@1.59.0':
     optional: true
 
   '@phenomnomnominal/tsquery@6.1.4(typescript@5.9.3)':
@@ -13305,6 +13677,8 @@ snapshots:
       esm-env: 1.2.2
       tmcp: 1.19.0(typescript@5.9.3)
 
+  '@total-typescript/shoehorn@0.1.2': {}
+
   '@tweenjs/tween.js@23.1.3': {}
 
   '@tybys/wasm-util@0.10.1':
@@ -13422,6 +13796,10 @@ snapshots:
     dependencies:
       csstype: 3.2.3
 
+  '@types/sax@1.2.7':
+    dependencies:
+      '@types/node': 25.0.3
+
   '@types/semver@7.7.0': {}
 
   '@types/stats.js@0.17.3': {}
@@ -13778,6 +14156,15 @@ snapshots:
       '@vitest/pretty-format': 4.0.16
       tinyrainbow: 3.0.3
 
+  '@volar/kit@2.4.28(typescript@5.9.3)':
+    dependencies:
+      '@volar/language-service': 2.4.28
+      '@volar/typescript': 2.4.28
+      typesafe-path: 0.2.2
+      typescript: 5.9.3
+      vscode-languageserver-textdocument: 1.0.12
+      vscode-uri: 3.1.0
+
   '@volar/language-core@2.4.15':
     dependencies:
       '@volar/source-map': 2.4.15
@@ -13786,6 +14173,25 @@ snapshots:
     dependencies:
       '@volar/source-map': 2.4.28
 
+  '@volar/language-server@2.4.28':
+    dependencies:
+      '@volar/language-core': 2.4.28
+      '@volar/language-service': 2.4.28
+      '@volar/typescript': 2.4.28
+      path-browserify: 1.0.1
+      request-light: 0.7.0
+      vscode-languageserver: 9.0.1
+      vscode-languageserver-protocol: 3.17.5
+      vscode-languageserver-textdocument: 1.0.12
+      vscode-uri: 3.1.0
+
+  '@volar/language-service@2.4.28':
+    dependencies:
+      '@volar/language-core': 2.4.28
+      vscode-languageserver-protocol: 3.17.5
+      vscode-languageserver-textdocument: 1.0.12
+      vscode-uri: 3.1.0
+
   '@volar/source-map@2.4.15': {}
 
   '@volar/source-map@2.4.28': {}
@@ -13802,6 +14208,16 @@ snapshots:
       path-browserify: 1.0.1
       vscode-uri: 3.1.0
 
+  '@vscode/emmet-helper@2.11.0':
+    dependencies:
+      emmet: 2.4.11
+      jsonc-parser: 2.3.1
+      vscode-languageserver-textdocument: 1.0.12
+      vscode-languageserver-types: 3.17.5
+      vscode-uri: 3.1.0
+
+  '@vscode/l10n@0.0.18': {}
+
   '@vue/babel-helper-vue-transform-on@1.4.0': {}
 
   '@vue/babel-plugin-jsx@1.4.0(@babel/core@7.29.0)':
@@ -14119,6 +14535,14 @@ snapshots:
     dependencies:
       acorn: 8.16.0
 
+  acorn-loose@8.5.2:
+    dependencies:
+      acorn: 8.16.0
+
+  acorn-walk@8.3.5:
+    dependencies:
+      acorn: 8.16.0
+
   acorn@7.4.1: {}
 
   acorn@8.16.0: {}
@@ -14141,6 +14565,10 @@ snapshots:
     optionalDependencies:
       ajv: 8.13.0
 
+  ajv-draft-04@1.0.0(ajv@8.18.0):
+    optionalDependencies:
+      ajv: 8.18.0
+
   ajv-formats@3.0.1(ajv@8.13.0):
     optionalDependencies:
       ajv: 8.13.0
@@ -14228,6 +14656,8 @@ snapshots:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
+  arg@5.0.2: {}
+
   argparse@1.0.10:
     dependencies:
       sprintf-js: 1.0.3
@@ -14374,7 +14804,7 @@ snapshots:
       rehype: 13.0.2
       semver: 7.7.4
       shiki: 3.23.0
-      smol-toml: 1.6.0
+      smol-toml: 1.6.1
       svgo: 4.0.0
       tinyexec: 1.0.4
       tinyglobby: 0.2.15
@@ -14842,6 +15272,8 @@ snapshots:
 
   consola@3.4.2: {}
 
+  console-grid@2.2.3: {}
+
   constantinople@4.0.1:
     dependencies:
       '@babel/parser': 7.29.0
@@ -15184,12 +15616,19 @@ snapshots:
       minimatch: 9.0.1
       semver: 7.7.4
 
+  eight-colors@1.3.3: {}
+
   ejs@3.1.10:
     dependencies:
       jake: 10.9.2
 
   electron-to-chromium@1.5.267: {}
 
+  emmet@2.4.11:
+    dependencies:
+      '@emmetio/abbreviation': 2.3.3
+      '@emmetio/css-abbreviation': 2.1.8
+
   emoji-regex@10.4.0: {}
 
   emoji-regex@8.0.0: {}
@@ -15412,7 +15851,7 @@ snapshots:
 
   eslint-import-context@0.1.9(unrs-resolver@1.11.1):
     dependencies:
-      get-tsconfig: 4.13.6
+      get-tsconfig: 4.13.7
       stable-hash-x: 0.2.0
     optionalDependencies:
       unrs-resolver: 1.11.1
@@ -15431,7 +15870,7 @@ snapshots:
       debug: 4.4.3
       eslint: 9.39.1(jiti@2.6.1)
       eslint-import-context: 0.1.9(unrs-resolver@1.11.1)
-      get-tsconfig: 4.13.6
+      get-tsconfig: 4.13.7
       is-bun-module: 2.0.0
       stable-hash-x: 0.2.0
       tinyglobby: 0.2.15
@@ -15454,7 +15893,7 @@ snapshots:
       - supports-color
     optional: true
 
-  eslint-plugin-better-tailwindcss@4.3.1(eslint@9.39.1(jiti@2.6.1))(oxlint@1.55.0(oxlint-tsgolint@0.17.0))(tailwindcss@4.2.0)(typescript@5.9.3):
+  eslint-plugin-better-tailwindcss@4.3.1(eslint@9.39.1(jiti@2.6.1))(oxlint@1.59.0(oxlint-tsgolint@0.20.0))(tailwindcss@4.2.0)(typescript@5.9.3):
     dependencies:
       '@eslint/css-tree': 3.6.9
       '@valibot/to-json-schema': 1.5.0(valibot@1.2.0(typescript@5.9.3))
@@ -15467,7 +15906,7 @@ snapshots:
       valibot: 1.2.0(typescript@5.9.3)
     optionalDependencies:
       eslint: 9.39.1(jiti@2.6.1)
-      oxlint: 1.55.0(oxlint-tsgolint@0.17.0)
+      oxlint: 1.59.0(oxlint-tsgolint@0.20.0)
     transitivePeerDependencies:
       - typescript
 
@@ -15519,9 +15958,15 @@ snapshots:
       - supports-color
     optional: true
 
-  eslint-plugin-oxlint@1.55.0:
+  eslint-plugin-oxlint@1.59.0(oxlint@1.59.0(oxlint-tsgolint@0.20.0)):
     dependencies:
       jsonc-parser: 3.3.1
+      oxlint: 1.59.0(oxlint-tsgolint@0.20.0)
+
+  eslint-plugin-playwright@2.10.1(eslint@9.39.1(jiti@2.6.1)):
+    dependencies:
+      eslint: 9.39.1(jiti@2.6.1)
+      globals: 17.4.0
 
   eslint-plugin-storybook@10.2.10(eslint@9.39.1(jiti@2.6.1))(storybook@10.2.10(@testing-library/dom@10.4.1)(prettier@3.7.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3):
     dependencies:
@@ -15971,7 +16416,7 @@ snapshots:
       get-intrinsic: 1.3.0
     optional: true
 
-  get-tsconfig@4.13.6:
+  get-tsconfig@4.13.7:
     dependencies:
       resolve-pkg-maps: 1.0.0
 
@@ -16034,6 +16479,8 @@ snapshots:
 
   globals@16.5.0: {}
 
+  globals@17.4.0: {}
+
   globalthis@1.0.4:
     dependencies:
       define-properties: 1.2.1
@@ -16066,6 +16513,8 @@ snapshots:
       section-matter: 1.0.0
       strip-bom-string: 1.0.0
 
+  gsap@3.14.2: {}
+
   h3@1.15.10:
     dependencies:
       cookie-es: 1.2.2
@@ -16685,6 +17134,8 @@ snapshots:
       espree: 9.6.1
       semver: 7.7.4
 
+  jsonc-parser@2.3.1: {}
+
   jsonc-parser@3.2.0: {}
 
   jsonc-parser@3.3.1: {}
@@ -16727,19 +17178,21 @@ snapshots:
 
   kleur@3.0.3: {}
 
-  knip@6.0.1:
+  kleur@4.1.5: {}
+
+  knip@6.3.1:
     dependencies:
       '@nodelib/fs.walk': 1.2.8
       fast-glob: 3.3.3
       formatly: 0.3.0
-      get-tsconfig: 4.13.6
+      get-tsconfig: 4.13.7
       jiti: 2.6.1
       minimist: 1.2.8
-      oxc-parser: 0.120.0
+      oxc-parser: 0.121.0
       oxc-resolver: 11.19.1
       picocolors: 1.1.1
       picomatch: 4.0.3
-      smol-toml: 1.6.0
+      smol-toml: 1.6.1
       strip-json-comments: 5.0.3
       unbash: 2.2.0
       yaml: 2.8.2
@@ -16755,6 +17208,11 @@ snapshots:
     dependencies:
       package-json: 10.0.1
 
+  lenis@1.3.21(react@19.2.4)(vue@3.5.13(typescript@5.9.3)):
+    optionalDependencies:
+      react: 19.2.4
+      vue: 3.5.13(typescript@5.9.3)
+
   levn@0.4.1:
     dependencies:
       prelude-ls: 1.2.1
@@ -16959,6 +17417,8 @@ snapshots:
 
   lz-string@1.5.0: {}
 
+  lz-utils@2.1.0: {}
+
   magic-string-ast@1.0.3:
     dependencies:
       magic-string: 0.30.21
@@ -17431,6 +17891,23 @@ snapshots:
 
   modern-tar@0.7.3: {}
 
+  monocart-coverage-reports@2.12.9:
+    dependencies:
+      acorn: 8.16.0
+      acorn-loose: 8.5.2
+      acorn-walk: 8.3.5
+      commander: 14.0.3
+      console-grid: 2.2.3
+      eight-colors: 1.3.3
+      foreground-child: 3.3.1
+      istanbul-lib-coverage: 3.2.2
+      istanbul-lib-report: 3.0.1
+      istanbul-reports: 3.2.0
+      lz-utils: 2.1.0
+      monocart-locator: 1.0.2
+
+  monocart-locator@1.0.2: {}
+
   mrmime@2.0.1: {}
 
   ms@2.1.3: {}
@@ -17694,30 +18171,30 @@ snapshots:
       safe-push-apply: 1.0.0
     optional: true
 
-  oxc-parser@0.120.0:
+  oxc-parser@0.121.0:
     dependencies:
-      '@oxc-project/types': 0.120.0
+      '@oxc-project/types': 0.121.0
     optionalDependencies:
-      '@oxc-parser/binding-android-arm-eabi': 0.120.0
-      '@oxc-parser/binding-android-arm64': 0.120.0
-      '@oxc-parser/binding-darwin-arm64': 0.120.0
-      '@oxc-parser/binding-darwin-x64': 0.120.0
-      '@oxc-parser/binding-freebsd-x64': 0.120.0
-      '@oxc-parser/binding-linux-arm-gnueabihf': 0.120.0
-      '@oxc-parser/binding-linux-arm-musleabihf': 0.120.0
-      '@oxc-parser/binding-linux-arm64-gnu': 0.120.0
-      '@oxc-parser/binding-linux-arm64-musl': 0.120.0
-      '@oxc-parser/binding-linux-ppc64-gnu': 0.120.0
-      '@oxc-parser/binding-linux-riscv64-gnu': 0.120.0
-      '@oxc-parser/binding-linux-riscv64-musl': 0.120.0
-      '@oxc-parser/binding-linux-s390x-gnu': 0.120.0
-      '@oxc-parser/binding-linux-x64-gnu': 0.120.0
-      '@oxc-parser/binding-linux-x64-musl': 0.120.0
-      '@oxc-parser/binding-openharmony-arm64': 0.120.0
-      '@oxc-parser/binding-wasm32-wasi': 0.120.0
-      '@oxc-parser/binding-win32-arm64-msvc': 0.120.0
-      '@oxc-parser/binding-win32-ia32-msvc': 0.120.0
-      '@oxc-parser/binding-win32-x64-msvc': 0.120.0
+      '@oxc-parser/binding-android-arm-eabi': 0.121.0
+      '@oxc-parser/binding-android-arm64': 0.121.0
+      '@oxc-parser/binding-darwin-arm64': 0.121.0
+      '@oxc-parser/binding-darwin-x64': 0.121.0
+      '@oxc-parser/binding-freebsd-x64': 0.121.0
+      '@oxc-parser/binding-linux-arm-gnueabihf': 0.121.0
+      '@oxc-parser/binding-linux-arm-musleabihf': 0.121.0
+      '@oxc-parser/binding-linux-arm64-gnu': 0.121.0
+      '@oxc-parser/binding-linux-arm64-musl': 0.121.0
+      '@oxc-parser/binding-linux-ppc64-gnu': 0.121.0
+      '@oxc-parser/binding-linux-riscv64-gnu': 0.121.0
+      '@oxc-parser/binding-linux-riscv64-musl': 0.121.0
+      '@oxc-parser/binding-linux-s390x-gnu': 0.121.0
+      '@oxc-parser/binding-linux-x64-gnu': 0.121.0
+      '@oxc-parser/binding-linux-x64-musl': 0.121.0
+      '@oxc-parser/binding-openharmony-arm64': 0.121.0
+      '@oxc-parser/binding-wasm32-wasi': 0.121.0
+      '@oxc-parser/binding-win32-arm64-msvc': 0.121.0
+      '@oxc-parser/binding-win32-ia32-msvc': 0.121.0
+      '@oxc-parser/binding-win32-x64-msvc': 0.121.0
 
   oxc-resolver@11.19.1:
     optionalDependencies:
@@ -17742,61 +18219,61 @@ snapshots:
       '@oxc-resolver/binding-win32-ia32-msvc': 11.19.1
       '@oxc-resolver/binding-win32-x64-msvc': 11.19.1
 
-  oxfmt@0.40.0:
+  oxfmt@0.44.0:
     dependencies:
       tinypool: 2.1.0
     optionalDependencies:
-      '@oxfmt/binding-android-arm-eabi': 0.40.0
-      '@oxfmt/binding-android-arm64': 0.40.0
-      '@oxfmt/binding-darwin-arm64': 0.40.0
-      '@oxfmt/binding-darwin-x64': 0.40.0
-      '@oxfmt/binding-freebsd-x64': 0.40.0
-      '@oxfmt/binding-linux-arm-gnueabihf': 0.40.0
-      '@oxfmt/binding-linux-arm-musleabihf': 0.40.0
-      '@oxfmt/binding-linux-arm64-gnu': 0.40.0
-      '@oxfmt/binding-linux-arm64-musl': 0.40.0
-      '@oxfmt/binding-linux-ppc64-gnu': 0.40.0
-      '@oxfmt/binding-linux-riscv64-gnu': 0.40.0
-      '@oxfmt/binding-linux-riscv64-musl': 0.40.0
-      '@oxfmt/binding-linux-s390x-gnu': 0.40.0
-      '@oxfmt/binding-linux-x64-gnu': 0.40.0
-      '@oxfmt/binding-linux-x64-musl': 0.40.0
-      '@oxfmt/binding-openharmony-arm64': 0.40.0
-      '@oxfmt/binding-win32-arm64-msvc': 0.40.0
-      '@oxfmt/binding-win32-ia32-msvc': 0.40.0
-      '@oxfmt/binding-win32-x64-msvc': 0.40.0
+      '@oxfmt/binding-android-arm-eabi': 0.44.0
+      '@oxfmt/binding-android-arm64': 0.44.0
+      '@oxfmt/binding-darwin-arm64': 0.44.0
+      '@oxfmt/binding-darwin-x64': 0.44.0
+      '@oxfmt/binding-freebsd-x64': 0.44.0
+      '@oxfmt/binding-linux-arm-gnueabihf': 0.44.0
+      '@oxfmt/binding-linux-arm-musleabihf': 0.44.0
+      '@oxfmt/binding-linux-arm64-gnu': 0.44.0
+      '@oxfmt/binding-linux-arm64-musl': 0.44.0
+      '@oxfmt/binding-linux-ppc64-gnu': 0.44.0
+      '@oxfmt/binding-linux-riscv64-gnu': 0.44.0
+      '@oxfmt/binding-linux-riscv64-musl': 0.44.0
+      '@oxfmt/binding-linux-s390x-gnu': 0.44.0
+      '@oxfmt/binding-linux-x64-gnu': 0.44.0
+      '@oxfmt/binding-linux-x64-musl': 0.44.0
+      '@oxfmt/binding-openharmony-arm64': 0.44.0
+      '@oxfmt/binding-win32-arm64-msvc': 0.44.0
+      '@oxfmt/binding-win32-ia32-msvc': 0.44.0
+      '@oxfmt/binding-win32-x64-msvc': 0.44.0
 
-  oxlint-tsgolint@0.17.0:
+  oxlint-tsgolint@0.20.0:
     optionalDependencies:
-      '@oxlint-tsgolint/darwin-arm64': 0.17.0
-      '@oxlint-tsgolint/darwin-x64': 0.17.0
-      '@oxlint-tsgolint/linux-arm64': 0.17.0
-      '@oxlint-tsgolint/linux-x64': 0.17.0
-      '@oxlint-tsgolint/win32-arm64': 0.17.0
-      '@oxlint-tsgolint/win32-x64': 0.17.0
+      '@oxlint-tsgolint/darwin-arm64': 0.20.0
+      '@oxlint-tsgolint/darwin-x64': 0.20.0
+      '@oxlint-tsgolint/linux-arm64': 0.20.0
+      '@oxlint-tsgolint/linux-x64': 0.20.0
+      '@oxlint-tsgolint/win32-arm64': 0.20.0
+      '@oxlint-tsgolint/win32-x64': 0.20.0
 
-  oxlint@1.55.0(oxlint-tsgolint@0.17.0):
+  oxlint@1.59.0(oxlint-tsgolint@0.20.0):
     optionalDependencies:
-      '@oxlint/binding-android-arm-eabi': 1.55.0
-      '@oxlint/binding-android-arm64': 1.55.0
-      '@oxlint/binding-darwin-arm64': 1.55.0
-      '@oxlint/binding-darwin-x64': 1.55.0
-      '@oxlint/binding-freebsd-x64': 1.55.0
-      '@oxlint/binding-linux-arm-gnueabihf': 1.55.0
-      '@oxlint/binding-linux-arm-musleabihf': 1.55.0
-      '@oxlint/binding-linux-arm64-gnu': 1.55.0
-      '@oxlint/binding-linux-arm64-musl': 1.55.0
-      '@oxlint/binding-linux-ppc64-gnu': 1.55.0
-      '@oxlint/binding-linux-riscv64-gnu': 1.55.0
-      '@oxlint/binding-linux-riscv64-musl': 1.55.0
-      '@oxlint/binding-linux-s390x-gnu': 1.55.0
-      '@oxlint/binding-linux-x64-gnu': 1.55.0
-      '@oxlint/binding-linux-x64-musl': 1.55.0
-      '@oxlint/binding-openharmony-arm64': 1.55.0
-      '@oxlint/binding-win32-arm64-msvc': 1.55.0
-      '@oxlint/binding-win32-ia32-msvc': 1.55.0
-      '@oxlint/binding-win32-x64-msvc': 1.55.0
-      oxlint-tsgolint: 0.17.0
+      '@oxlint/binding-android-arm-eabi': 1.59.0
+      '@oxlint/binding-android-arm64': 1.59.0
+      '@oxlint/binding-darwin-arm64': 1.59.0
+      '@oxlint/binding-darwin-x64': 1.59.0
+      '@oxlint/binding-freebsd-x64': 1.59.0
+      '@oxlint/binding-linux-arm-gnueabihf': 1.59.0
+      '@oxlint/binding-linux-arm-musleabihf': 1.59.0
+      '@oxlint/binding-linux-arm64-gnu': 1.59.0
+      '@oxlint/binding-linux-arm64-musl': 1.59.0
+      '@oxlint/binding-linux-ppc64-gnu': 1.59.0
+      '@oxlint/binding-linux-riscv64-gnu': 1.59.0
+      '@oxlint/binding-linux-riscv64-musl': 1.59.0
+      '@oxlint/binding-linux-s390x-gnu': 1.59.0
+      '@oxlint/binding-linux-x64-gnu': 1.59.0
+      '@oxlint/binding-linux-x64-musl': 1.59.0
+      '@oxlint/binding-openharmony-arm64': 1.59.0
+      '@oxlint/binding-win32-arm64-msvc': 1.59.0
+      '@oxlint/binding-win32-ia32-msvc': 1.59.0
+      '@oxlint/binding-win32-x64-msvc': 1.59.0
+      oxlint-tsgolint: 0.20.0
 
   p-limit@3.1.0:
     dependencies:
@@ -18001,8 +18478,7 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
-  prettier@3.7.4:
-    optional: true
+  prettier@3.7.4: {}
 
   pretty-bytes@7.1.0: {}
 
@@ -18498,6 +18974,10 @@ snapshots:
       mdast-util-to-markdown: 2.1.2
       unified: 11.0.5
 
+  request-light@0.5.8: {}
+
+  request-light@0.7.0: {}
+
   require-directory@2.1.1: {}
 
   require-from-string@2.0.2: {}
@@ -18794,6 +19274,13 @@ snapshots:
 
   sisteransi@1.0.5: {}
 
+  sitemap@9.0.1:
+    dependencies:
+      '@types/node': 24.10.4
+      '@types/sax': 1.2.7
+      arg: 5.0.2
+      sax: 1.4.4
+
   slash@3.0.0: {}
 
   slice-ansi@4.0.0:
@@ -18812,7 +19299,7 @@ snapshots:
       ansi-styles: 6.2.3
       is-fullwidth-code-point: 5.1.0
 
-  smol-toml@1.6.0: {}
+  smol-toml@1.6.1: {}
 
   source-map-js@1.2.1: {}
 
@@ -18882,6 +19369,8 @@ snapshots:
       - react-dom
       - utf-8-validate
 
+  stream-replace-string@2.0.0: {}
+
   string-argv@0.3.2: {}
 
   string-width@4.2.3:
@@ -19233,7 +19722,7 @@ snapshots:
   tsx@4.19.4:
     dependencies:
       esbuild: 0.25.5
-      get-tsconfig: 4.13.6
+      get-tsconfig: 4.13.7
     optionalDependencies:
       fsevents: 2.3.3
 
@@ -19295,6 +19784,12 @@ snapshots:
       tinyest: 0.1.2
       typed-binary: 4.3.2
 
+  typesafe-path@0.2.2: {}
+
+  typescript-auto-import-cache@0.3.6:
+    dependencies:
+      semver: 7.7.4
+
   typescript-eslint@8.49.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3):
     dependencies:
       '@typescript-eslint/eslint-plugin': 8.49.0(@typescript-eslint/parser@8.49.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
@@ -19835,6 +20330,101 @@ snapshots:
 
   void-elements@3.1.0: {}
 
+  volar-service-css@0.0.70(@volar/language-service@2.4.28):
+    dependencies:
+      vscode-css-languageservice: 6.3.10
+      vscode-languageserver-textdocument: 1.0.12
+      vscode-uri: 3.1.0
+    optionalDependencies:
+      '@volar/language-service': 2.4.28
+
+  volar-service-emmet@0.0.70(@volar/language-service@2.4.28):
+    dependencies:
+      '@emmetio/css-parser': 0.4.1
+      '@emmetio/html-matcher': 1.3.0
+      '@vscode/emmet-helper': 2.11.0
+      vscode-uri: 3.1.0
+    optionalDependencies:
+      '@volar/language-service': 2.4.28
+
+  volar-service-html@0.0.70(@volar/language-service@2.4.28):
+    dependencies:
+      vscode-html-languageservice: 5.6.2
+      vscode-languageserver-textdocument: 1.0.12
+      vscode-uri: 3.1.0
+    optionalDependencies:
+      '@volar/language-service': 2.4.28
+
+  volar-service-prettier@0.0.70(@volar/language-service@2.4.28)(prettier@3.7.4):
+    dependencies:
+      vscode-uri: 3.1.0
+    optionalDependencies:
+      '@volar/language-service': 2.4.28
+      prettier: 3.7.4
+
+  volar-service-typescript-twoslash-queries@0.0.70(@volar/language-service@2.4.28):
+    dependencies:
+      vscode-uri: 3.1.0
+    optionalDependencies:
+      '@volar/language-service': 2.4.28
+
+  volar-service-typescript@0.0.70(@volar/language-service@2.4.28):
+    dependencies:
+      path-browserify: 1.0.1
+      semver: 7.7.4
+      typescript-auto-import-cache: 0.3.6
+      vscode-languageserver-textdocument: 1.0.12
+      vscode-nls: 5.2.0
+      vscode-uri: 3.1.0
+    optionalDependencies:
+      '@volar/language-service': 2.4.28
+
+  volar-service-yaml@0.0.70(@volar/language-service@2.4.28):
+    dependencies:
+      vscode-uri: 3.1.0
+      yaml-language-server: 1.20.0
+    optionalDependencies:
+      '@volar/language-service': 2.4.28
+
+  vscode-css-languageservice@6.3.10:
+    dependencies:
+      '@vscode/l10n': 0.0.18
+      vscode-languageserver-textdocument: 1.0.12
+      vscode-languageserver-types: 3.17.5
+      vscode-uri: 3.1.0
+
+  vscode-html-languageservice@5.6.2:
+    dependencies:
+      '@vscode/l10n': 0.0.18
+      vscode-languageserver-textdocument: 1.0.12
+      vscode-languageserver-types: 3.17.5
+      vscode-uri: 3.1.0
+
+  vscode-json-languageservice@4.1.8:
+    dependencies:
+      jsonc-parser: 3.3.1
+      vscode-languageserver-textdocument: 1.0.12
+      vscode-languageserver-types: 3.17.5
+      vscode-nls: 5.2.0
+      vscode-uri: 3.1.0
+
+  vscode-jsonrpc@8.2.0: {}
+
+  vscode-languageserver-protocol@3.17.5:
+    dependencies:
+      vscode-jsonrpc: 8.2.0
+      vscode-languageserver-types: 3.17.5
+
+  vscode-languageserver-textdocument@1.0.12: {}
+
+  vscode-languageserver-types@3.17.5: {}
+
+  vscode-languageserver@9.0.1:
+    dependencies:
+      vscode-languageserver-protocol: 3.17.5
+
+  vscode-nls@5.2.0: {}
+
   vscode-uri@3.1.0: {}
 
   vue-component-meta@2.2.12(typescript@5.9.3):
@@ -20126,8 +20716,24 @@ snapshots:
       eslint-visitor-keys: 3.4.3
       yaml: 2.8.2
 
+  yaml-language-server@1.20.0:
+    dependencies:
+      '@vscode/l10n': 0.0.18
+      ajv: 8.18.0
+      ajv-draft-04: 1.0.0(ajv@8.18.0)
+      prettier: 3.7.4
+      request-light: 0.5.8
+      vscode-json-languageservice: 4.1.8
+      vscode-languageserver: 9.0.1
+      vscode-languageserver-textdocument: 1.0.12
+      vscode-languageserver-types: 3.17.5
+      vscode-uri: 3.1.0
+      yaml: 2.7.1
+
   yaml@1.10.2: {}
 
+  yaml@2.7.1: {}
+
   yaml@2.8.2: {}
 
   yargs-parser@21.1.1: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index f94512d0d2..141a229b4a 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -4,6 +4,8 @@ packages:
 
 catalog:
   '@alloc/quick-lru': ^5.2.0
+  '@astrojs/check': ^0.9.8
+  '@astrojs/sitemap': ^3.7.1
   '@astrojs/vue': ^5.0.0
   '@comfyorg/comfyui-electron-types': 0.6.2
   '@eslint/js': ^9.39.1
@@ -35,6 +37,7 @@ catalog:
   '@storybook/vue3': ^10.2.10
   '@storybook/vue3-vite': ^10.2.10
   '@tailwindcss/vite': ^4.2.0
+  '@tanstack/vue-virtual': ^3.13.12
   '@testing-library/jest-dom': ^6.9.1
   '@testing-library/user-event': ^14.6.1
   '@testing-library/vue': ^8.1.0
@@ -46,6 +49,7 @@ catalog:
   '@tiptap/extension-table-row': ^2.27.2
   '@tiptap/pm': 2.27.2
   '@tiptap/starter-kit': ^2.27.2
+  '@total-typescript/shoehorn': ^0.1.2
   '@types/fs-extra': ^11.0.4
   '@types/jsdom': ^21.1.7
   '@types/node': ^24.1.0
@@ -55,7 +59,6 @@ catalog:
   '@vitejs/plugin-vue': ^6.0.0
   '@vitest/coverage-v8': ^4.0.16
   '@vitest/ui': ^4.0.16
-  '@vue/test-utils': ^2.4.6
   '@vueuse/core': ^14.2.0
   '@vueuse/integrations': ^14.2.0
   '@webgpu/types': ^0.1.66
@@ -71,7 +74,8 @@ catalog:
   eslint-import-resolver-typescript: ^4.4.4
   eslint-plugin-better-tailwindcss: ^4.3.1
   eslint-plugin-import-x: ^4.16.1
-  eslint-plugin-oxlint: 1.55.0
+  eslint-plugin-oxlint: 1.59.0
+  eslint-plugin-playwright: ^2.10.1
   eslint-plugin-storybook: ^10.2.10
   eslint-plugin-testing-library: ^7.16.1
   eslint-plugin-unused-imports: ^4.3.0
@@ -80,20 +84,23 @@ catalog:
   firebase: ^11.6.0
   glob: ^13.0.6
   globals: ^16.5.0
+  gsap: ^3.14.2
   happy-dom: ^20.0.11
   husky: ^9.1.7
   jiti: 2.6.1
   jsdom: ^27.4.0
   jsonata: ^2.1.0
   jsondiffpatch: ^0.7.3
-  knip: ^6.0.1
+  knip: ^6.3.1
+  lenis: ^1.3.21
   lint-staged: ^16.2.7
   markdown-table: ^3.0.4
   mixpanel-browser: ^2.71.0
+  monocart-coverage-reports: ^2.12.9
   nx: 22.6.1
-  oxfmt: ^0.40.0
-  oxlint: ^1.55.0
-  oxlint-tsgolint: ^0.17.0
+  oxfmt: ^0.44.0
+  oxlint: ^1.59.0
+  oxlint-tsgolint: ^0.20.0
   picocolors: ^1.1.1
   pinia: ^3.0.4
   postcss-html: ^1.8.0
diff --git a/scripts/cicd/resolve-comfyui-release.ts b/scripts/cicd/resolve-comfyui-release.ts
index 56f6b06a77..afee134cfe 100755
--- a/scripts/cicd/resolve-comfyui-release.ts
+++ b/scripts/cicd/resolve-comfyui-release.ts
@@ -137,35 +137,71 @@ function resolveRelease(
   // Fetch all branches
   exec('git fetch origin', frontendRepoPath)
 
-  // Try next minor first, fall back to current minor if not available
-  let targetMinor = currentMinor + 1
-  let targetBranch = `core/1.${targetMinor}`
+  // Determine target branch based on release type:
+  //   'patch' → target current minor (hotfix for production version)
+  //   'minor' → try next minor, fall back to current minor (bi-weekly cadence)
+  const releaseTypeInput =
+    process.env.RELEASE_TYPE?.trim().toLowerCase() || 'minor'
+  if (releaseTypeInput !== 'minor' && releaseTypeInput !== 'patch') {
+    console.error(
+      `Invalid RELEASE_TYPE: "${releaseTypeInput}". Expected "minor" or "patch"`
+    )
+    return null
+  }
+  const releaseType: 'minor' | 'patch' = releaseTypeInput
+  let targetMinor: number
+  let targetBranch: string
 
-  const nextMinorExists = exec(
-    `git rev-parse --verify origin/${targetBranch}`,
-    frontendRepoPath
-  )
-
-  if (!nextMinorExists) {
-    // Fall back to current minor for patch releases
+  if (releaseType === 'patch') {
     targetMinor = currentMinor
     targetBranch = `core/1.${targetMinor}`
 
-    const currentMinorExists = exec(
+    const branchExists = exec(
       `git rev-parse --verify origin/${targetBranch}`,
       frontendRepoPath
     )
 
-    if (!currentMinorExists) {
+    if (!branchExists) {
       console.error(
-        `Neither core/1.${currentMinor + 1} nor core/1.${currentMinor} branches exist in frontend repo`
+        `Patch release requested but branch ${targetBranch} does not exist`
       )
       return null
     }
 
     console.error(
-      `Next minor branch core/1.${currentMinor + 1} not found, falling back to core/1.${currentMinor} for patch release`
+      `Patch release: targeting current production branch ${targetBranch}`
     )
+  } else {
+    // Try next minor first, fall back to current minor if not available
+    targetMinor = currentMinor + 1
+    targetBranch = `core/1.${targetMinor}`
+
+    const nextMinorExists = exec(
+      `git rev-parse --verify origin/${targetBranch}`,
+      frontendRepoPath
+    )
+
+    if (!nextMinorExists) {
+      // Fall back to current minor for minor release
+      targetMinor = currentMinor
+      targetBranch = `core/1.${targetMinor}`
+
+      const currentMinorExists = exec(
+        `git rev-parse --verify origin/${targetBranch}`,
+        frontendRepoPath
+      )
+
+      if (!currentMinorExists) {
+        console.error(
+          `Neither core/1.${currentMinor + 1} nor core/1.${currentMinor} branches exist in frontend repo`
+        )
+        return null
+      }
+
+      console.error(
+        `Next minor branch core/1.${currentMinor + 1} not found, falling back to core/1.${currentMinor} for minor release`
+      )
+    }
   }
 
   // Get latest patch tag for target minor
@@ -264,7 +300,7 @@ if (!releaseInfo) {
 }
 
 // Output as JSON for GitHub Actions
-
+// oxlint-disable-next-line no-console -- stdout is captured by the workflow
 console.log(JSON.stringify(releaseInfo, null, 2))
 
 export { resolveRelease }
diff --git a/scripts/coverage-report.ts b/scripts/coverage-report.ts
new file mode 100644
index 0000000000..27e2359cb4
--- /dev/null
+++ b/scripts/coverage-report.ts
@@ -0,0 +1,154 @@
+import { existsSync, readFileSync } from 'node:fs'
+
+interface FileStats {
+  lines: number
+  covered: number
+}
+
+interface UncoveredFile {
+  file: string
+  pct: number
+  missed: number
+}
+
+const lcovPath = process.argv[2] || 'coverage/playwright/coverage.lcov'
+
+if (!existsSync(lcovPath)) {
+  process.stdout.write(
+    '## 🔬 E2E Coverage\n\n> ⚠️ No coverage data found. Check the CI workflow logs.\n'
+  )
+  process.exit(0)
+}
+
+const lcov = readFileSync(lcovPath, 'utf-8')
+
+interface RecordAccum {
+  lf: number
+  lh: number
+  fnf: number
+  fnh: number
+  brf: number
+  brh: number
+}
+
+const fileRecords = new Map<string, RecordAccum>()
+let currentFile = ''
+
+for (const line of lcov.split('\n')) {
+  if (line.startsWith('SF:')) {
+    currentFile = line.slice(3)
+  } else if (line.startsWith('LF:')) {
+    const n = parseInt(line.slice(3), 10) || 0
+    const rec = fileRecords.get(currentFile) ?? {
+      lf: 0,
+      lh: 0,
+      fnf: 0,
+      fnh: 0,
+      brf: 0,
+      brh: 0
+    }
+    rec.lf = n
+    fileRecords.set(currentFile, rec)
+  } else if (line.startsWith('LH:')) {
+    const n = parseInt(line.slice(3), 10) || 0
+    const rec = fileRecords.get(currentFile) ?? {
+      lf: 0,
+      lh: 0,
+      fnf: 0,
+      fnh: 0,
+      brf: 0,
+      brh: 0
+    }
+    rec.lh = n
+    fileRecords.set(currentFile, rec)
+  } else if (line.startsWith('FNF:')) {
+    const n = parseInt(line.slice(4), 10) || 0
+    const rec = fileRecords.get(currentFile)
+    if (rec) rec.fnf = n
+  } else if (line.startsWith('FNH:')) {
+    const n = parseInt(line.slice(4), 10) || 0
+    const rec = fileRecords.get(currentFile)
+    if (rec) rec.fnh = n
+  } else if (line.startsWith('BRF:')) {
+    const n = parseInt(line.slice(4), 10) || 0
+    const rec = fileRecords.get(currentFile)
+    if (rec) rec.brf = n
+  } else if (line.startsWith('BRH:')) {
+    const n = parseInt(line.slice(4), 10) || 0
+    const rec = fileRecords.get(currentFile)
+    if (rec) rec.brh = n
+  }
+}
+
+let totalLines = 0
+let coveredLines = 0
+let totalFunctions = 0
+let coveredFunctions = 0
+let totalBranches = 0
+let coveredBranches = 0
+const fileStats = new Map<string, FileStats>()
+
+for (const [file, rec] of fileRecords) {
+  totalLines += rec.lf
+  coveredLines += rec.lh
+  totalFunctions += rec.fnf
+  coveredFunctions += rec.fnh
+  totalBranches += rec.brf
+  coveredBranches += rec.brh
+  fileStats.set(file, { lines: rec.lf, covered: rec.lh })
+}
+
+function pct(covered: number, total: number): string {
+  if (total === 0) return '—'
+  return ((covered / total) * 100).toFixed(1) + '%'
+}
+
+function bar(covered: number, total: number): string {
+  if (total === 0) return '—'
+  const p = (covered / total) * 100
+  if (p >= 80) return '🟢'
+  if (p >= 50) return '🟡'
+  return '🔴'
+}
+
+const lines: string[] = []
+lines.push('## 🔬 E2E Coverage')
+lines.push('')
+lines.push('| Metric | Covered | Total | Pct | |')
+lines.push('|---|--:|--:|--:|---|')
+lines.push(
+  `| Lines | ${coveredLines} | ${totalLines} | ${pct(coveredLines, totalLines)} | ${bar(coveredLines, totalLines)} |`
+)
+lines.push(
+  `| Functions | ${coveredFunctions} | ${totalFunctions} | ${pct(coveredFunctions, totalFunctions)} | ${bar(coveredFunctions, totalFunctions)} |`
+)
+lines.push(
+  `| Branches | ${coveredBranches} | ${totalBranches} | ${pct(coveredBranches, totalBranches)} | ${bar(coveredBranches, totalBranches)} |`
+)
+
+const uncovered: UncoveredFile[] = [...fileStats.entries()]
+  .filter(([, s]) => s.lines > 0)
+  .map(([file, s]) => ({
+    file: file.replace(/^.*\/src\//, 'src/'),
+    pct: s.lines > 0 ? (s.covered / s.lines) * 100 : 100,
+    missed: s.lines - s.covered
+  }))
+  .filter((f) => f.missed > 0)
+  .sort((a, b) => b.missed - a.missed)
+  .slice(0, 10)
+
+if (uncovered.length > 0) {
+  lines.push('')
+  lines.push('<details>')
+  lines.push('<summary>Top 10 files by uncovered lines</summary>')
+  lines.push('')
+  lines.push('| File | Coverage | Missed |')
+  lines.push('|---|--:|--:|')
+  for (const f of uncovered) {
+    lines.push(`| \`${f.file}\` | ${f.pct.toFixed(1)}% | ${f.missed} |`)
+  }
+  lines.push('')
+  lines.push('</details>')
+}
+
+process.stdout.write(lines.join('\n') + '\n')
diff --git a/scripts/coverage-slack-notify.ts b/scripts/coverage-slack-notify.ts
new file mode 100644
index 0000000000..8c154b1ad1
--- /dev/null
+++ b/scripts/coverage-slack-notify.ts
@@ -0,0 +1,228 @@
+import { existsSync, readFileSync } from 'node:fs'
+
+const TARGET = 80
+const MILESTONE_STEP = 5
+const BAR_WIDTH = 20
+
+interface CoverageData {
+  percentage: number
+  totalLines: number
+  coveredLines: number
+}
+
+interface SlackBlock {
+  type: 'section'
+  text: {
+    type: 'mrkdwn'
+    text: string
+  }
+}
+
+function parseLcovContent(content: string): CoverageData | null {
+  const perFile = new Map<string, { lf: number; lh: number }>()
+  let currentFile = ''
+
+  for (const line of content.split('\n')) {
+    if (line.startsWith('SF:')) {
+      currentFile = line.slice(3)
+    } else if (line.startsWith('LF:')) {
+      const n = parseInt(line.slice(3), 10) || 0
+      const entry = perFile.get(currentFile) ?? { lf: 0, lh: 0 }
+      entry.lf = n
+      perFile.set(currentFile, entry)
+    } else if (line.startsWith('LH:')) {
+      const n = parseInt(line.slice(3), 10) || 0
+      const entry = perFile.get(currentFile) ?? { lf: 0, lh: 0 }
+      entry.lh = n
+      perFile.set(currentFile, entry)
+    }
+  }
+
+  let totalLines = 0
+  let coveredLines = 0
+  for (const { lf, lh } of perFile.values()) {
+    totalLines += lf
+    coveredLines += lh
+  }
+
+  if (totalLines === 0) return null
+
+  return {
+    percentage: (coveredLines / totalLines) * 100,
+    totalLines,
+    coveredLines
+  }
+}
+
+function parseLcov(filePath: string): CoverageData | null {
+  if (!existsSync(filePath)) return null
+  return parseLcovContent(readFileSync(filePath, 'utf-8'))
+}
+
+function progressBar(percentage: number): string {
+  const clamped = Math.max(0, Math.min(100, percentage))
+  const filled = Math.round((clamped / 100) * BAR_WIDTH)
+  const empty = BAR_WIDTH - filled
+  return '█'.repeat(filled) + '░'.repeat(empty)
+}
+
+function formatPct(value: number): string {
+  return value.toFixed(1) + '%'
+}
+
+function formatDelta(delta: number): string {
+  const sign = delta >= 0 ? '+' : ''
+  return sign + delta.toFixed(1) + '%'
+}
+
+function crossedMilestone(prev: number, curr: number): number | null {
+  const prevBucket = Math.floor(prev / MILESTONE_STEP)
+  const currBucket = Math.floor(curr / MILESTONE_STEP)
+
+  if (currBucket > prevBucket) {
+    return currBucket * MILESTONE_STEP
+  }
+  return null
+}
+
+function buildMilestoneBlock(label: string, milestone: number): SlackBlock {
+  if (milestone >= TARGET) {
+    return {
+      type: 'section',
+      text: {
+        type: 'mrkdwn',
+        text: [
+          `🏆 *GOAL REACHED: ${label} coverage hit ${milestone}%!* 🏆`,
+          `\`${progressBar(milestone)}\` ${milestone}% ✅`,
+          'The team did it! 🎊🥳🎉'
+        ].join('\n')
+      }
+    }
+  }
+
+  const remaining = TARGET - milestone
+  return {
+    type: 'section',
+    text: {
+      type: 'mrkdwn',
+      text: [
+        `🎉🎉🎉 *MILESTONE: ${label} coverage hit ${milestone}%!*`,
+        `\`${progressBar(milestone)}\` ${milestone}% → ${TARGET}% target`,
+        `${remaining} percentage point${remaining !== 1 ? 's' : ''} to go!`
+      ].join('\n')
+    }
+  }
+}
+
+function parseArgs(argv: string[]): {
+  prUrl: string
+  prNumber: string
+  author: string
+} {
+  let prUrl = ''
+  let prNumber = ''
+  let author = ''
+
+  for (const arg of argv) {
+    if (arg.startsWith('--pr-url=')) prUrl = arg.slice('--pr-url='.length)
+    else if (arg.startsWith('--pr-number='))
+      prNumber = arg.slice('--pr-number='.length)
+    else if (arg.startsWith('--author=')) author = arg.slice('--author='.length)
+  }
+
+  return { prUrl, prNumber, author }
+}
+
+function formatCoverageRow(
+  label: string,
+  current: CoverageData,
+  baseline: CoverageData
+): string {
+  const delta = current.percentage - baseline.percentage
+  return `*${label}:*  ${formatPct(baseline.percentage)} → ${formatPct(current.percentage)}  (${formatDelta(delta)})`
+}
+
+function main() {
+  const { prUrl, prNumber, author } = parseArgs(process.argv.slice(2))
+
+  const unitCurrent = parseLcov('coverage/lcov.info')
+  const unitBaseline = parseLcov('temp/coverage-baseline/lcov.info')
+  const e2eCurrent = parseLcov('temp/e2e-coverage/coverage.lcov')
+  const e2eBaseline = parseLcov('temp/e2e-coverage-baseline/coverage.lcov')
+
+  const unitImproved =
+    unitCurrent !== null &&
+    unitBaseline !== null &&
+    unitCurrent.percentage > unitBaseline.percentage
+
+  const e2eImproved =
+    e2eCurrent !== null &&
+    e2eBaseline !== null &&
+    e2eCurrent.percentage > e2eBaseline.percentage
+
+  if (!unitImproved && !e2eImproved) {
+    process.exit(0)
+  }
+
+  const blocks: SlackBlock[] = []
+
+  const summaryLines: string[] = []
+  summaryLines.push(
+    `✅ *Coverage improved!* — <${prUrl}|PR #${prNumber}> by <https://github.com/${author}|${author}>`
+  )
+  summaryLines.push('')
+
+  if (unitCurrent && unitBaseline) {
+    summaryLines.push(formatCoverageRow('Unit', unitCurrent, unitBaseline))
+  }
+
+  if (e2eCurrent && e2eBaseline) {
+    summaryLines.push(formatCoverageRow('E2E', e2eCurrent, e2eBaseline))
+  }
+
+  summaryLines.push('')
+
+  if (unitCurrent) {
+    summaryLines.push(
+      `\`${progressBar(unitCurrent.percentage)}\` ${formatPct(unitCurrent.percentage)} unit → ${TARGET}% target`
+    )
+  }
+  if (e2eCurrent) {
+    summaryLines.push(
+      `\`${progressBar(e2eCurrent.percentage)}\` ${formatPct(e2eCurrent.percentage)} e2e → ${TARGET}% target`
+    )
+  }
+
+  blocks.push({
+    type: 'section',
+    text: {
+      type: 'mrkdwn',
+      text: summaryLines.join('\n')
+    }
+  })
+
+  if (unitCurrent && unitBaseline) {
+    const milestone = crossedMilestone(
+      unitBaseline.percentage,
+      unitCurrent.percentage
+    )
+    if (milestone !== null) {
+      blocks.push(buildMilestoneBlock('Unit test', milestone))
+    }
+  }
+
+  if (e2eCurrent && e2eBaseline) {
+    const milestone = crossedMilestone(
+      e2eBaseline.percentage,
+      e2eCurrent.percentage
+    )
+    if (milestone !== null) {
+      blocks.push(buildMilestoneBlock('E2E test', milestone))
+    }
+  }
+
+  const payload = { text: 'Coverage improved!', blocks }
+  process.stdout.write(JSON.stringify(payload))
+}
+
+main()
diff --git a/scripts/perf-report.ts b/scripts/perf-report.ts
index 12b78ca5ec..4ae230681f 100644
--- a/scripts/perf-report.ts
+++ b/scripts/perf-report.ts
@@ -29,6 +29,8 @@ interface PerfMeasurement {
   eventListeners: number
   totalBlockingTimeMs: number
   frameDurationMs: number
+  p95FrameDurationMs: number
+  allFrameDurationsMs?: number[]
 }
 
 interface PerfReport {
@@ -53,6 +55,7 @@ type MetricKey =
   | 'eventListeners'
   | 'totalBlockingTimeMs'
   | 'frameDurationMs'
+  | 'p95FrameDurationMs'
   | 'heapUsedBytes'
 
 interface MetricDef {
@@ -64,6 +67,8 @@ interface MetricDef {
 }
 
 const REPORTED_METRICS: MetricDef[] = [
+  { key: 'frameDurationMs', label: 'avg frame time', unit: 'ms' },
+  { key: 'p95FrameDurationMs', label: 'p95 frame time', unit: 'ms' },
   { key: 'layoutDurationMs', label: 'layout duration', unit: 'ms' },
   {
     key: 'styleRecalcDurationMs',
@@ -80,12 +85,15 @@ const REPORTED_METRICS: MetricDef[] = [
   { key: 'taskDurationMs', label: 'task duration', unit: 'ms' },
   { key: 'scriptDurationMs', label: 'script duration', unit: 'ms' },
   { key: 'totalBlockingTimeMs', label: 'TBT', unit: 'ms' },
-  { key: 'frameDurationMs', label: 'frame duration', unit: 'ms' },
   { key: 'heapUsedBytes', label: 'heap used', unit: 'bytes' },
   { key: 'domNodes', label: 'DOM nodes', unit: '', minAbsDelta: 5 },
   { key: 'eventListeners', label: 'event listeners', unit: '', minAbsDelta: 5 }
 ]
 
+/** Target: P5 FPS ≥ 52 → P95 frame time ≤ 19.2ms */
+const TARGET_P95_FRAME_MS = 19.2
+const TARGET_P5_FPS = 52
+
 function groupByName(
   measurements: PerfMeasurement[]
 ): Map<string, PerfMeasurement[]> {
@@ -207,6 +215,46 @@ function formatBytes(bytes: number): string {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
 }
 
+function frameTimeToFps(ms: number): number {
+  return ms > 0 ? 1000 / ms : 0
+}
+
+function renderHeadlineSummary(
+  prGroups: Map<string, PerfMeasurement[]>
+): string[] {
+  const lines: string[] = []
+  const summaries: string[] = []
+
+  for (const [testName, prSamples] of prGroups) {
+    const avgFrame = medianMetric(prSamples, 'frameDurationMs')
+    const p95Frame = medianMetric(prSamples, 'p95FrameDurationMs')
+    const tbt = medianMetric(prSamples, 'totalBlockingTimeMs')
+    const heap = medianMetric(prSamples, 'heapUsedBytes')
+
+    const avgFps = avgFrame !== null ? frameTimeToFps(avgFrame) : null
+    const p5Fps = p95Frame !== null ? frameTimeToFps(p95Frame) : null
+
+    const parts: string[] = [`**${testName}**:`]
+    if (avgFps !== null) parts.push(`${avgFps.toFixed(1)} avg FPS`)
+    if (p5Fps !== null) {
+      const pass = p5Fps >= TARGET_P5_FPS
+      parts.push(
+        `${p5Fps.toFixed(1)} P5 FPS ${pass ? '✅' : '❌'} (target: ≥${TARGET_P5_FPS})`
+      )
+    }
+    if (tbt !== null) parts.push(`${tbt.toFixed(0)}ms TBT`)
+    if (heap !== null) parts.push(`${formatBytes(heap)} heap`)
+
+    if (parts.length > 1) summaries.push(parts.join(' · '))
+  }
+
+  if (summaries.length > 0) {
+    lines.push('> ' + summaries.join('\n> '), '')
+  }
+
+  return lines
+}
+
 function renderFullReport(
   prGroups: Map<string, PerfMeasurement[]>,
   baseline: PerfReport,
@@ -423,6 +471,7 @@ function main() {
 
   const lines: string[] = []
   lines.push('## ⚡ Performance Report\n')
+  lines.push(...renderHeadlineSummary(prGroups))
 
   if (baseline && historical.length >= 2) {
     lines.push(...renderFullReport(prGroups, baseline, historical))
@@ -432,9 +481,15 @@ function main() {
     lines.push(...renderNoBaselineReport(prGroups))
   }
 
+  const rawData = {
+    ...current,
+    measurements: current.measurements.map(
+      ({ allFrameDurationsMs: _, ...rest }) => rest
+    )
+  }
   lines.push('\n<details><summary>Raw data</summary>\n')
   lines.push('```json')
-  lines.push(JSON.stringify(current, null, 2))
+  lines.push(JSON.stringify(rawData, null, 2))
   lines.push('```')
   lines.push('\n</details>')
 
diff --git a/scripts/unified-report.js b/scripts/unified-report.ts
similarity index 66%
rename from scripts/unified-report.js
rename to scripts/unified-report.ts
index b4b9417d19..9b2d0239b9 100644
--- a/scripts/unified-report.js
+++ b/scripts/unified-report.ts
@@ -1,11 +1,9 @@
-// @ts-check
 import { execFileSync } from 'node:child_process'
 import { existsSync } from 'node:fs'
 
-const args = process.argv.slice(2)
+const args: string[] = process.argv.slice(2)
 
-/** @param {string} name */
-function getArg(name) {
+function getArg(name: string): string | undefined {
   const prefix = `--${name}=`
   const arg = args.find((a) => a.startsWith(prefix))
   return arg ? arg.slice(prefix.length) : undefined
@@ -13,11 +11,10 @@ function getArg(name) {
 
 const sizeStatus = getArg('size-status') ?? 'pending'
 const perfStatus = getArg('perf-status') ?? 'pending'
+const coverageStatus = getArg('coverage-status') ?? 'skip'
 
-/** @type {string[]} */
-const lines = []
+const lines: string[] = []
 
-// --- Size section ---
 if (sizeStatus === 'ready') {
   try {
     const sizeReport = execFileSync('node', ['scripts/size-report.js'], {
@@ -43,7 +40,6 @@ if (sizeStatus === 'ready') {
 
 lines.push('')
 
-// --- Perf section ---
 if (perfStatus === 'ready' && existsSync('test-results/perf-metrics.json')) {
   try {
     const perfReport = execFileSync(
@@ -72,4 +68,33 @@ if (perfStatus === 'ready' && existsSync('test-results/perf-metrics.json')) {
   lines.push('> ⏳ Performance tests in progress…')
 }
 
+if (coverageStatus === 'ready' && existsSync('temp/coverage/coverage.lcov')) {
+  try {
+    const coverageReport = execFileSync(
+      'pnpm',
+      [
+        'exec',
+        'tsx',
+        'scripts/coverage-report.ts',
+        'temp/coverage/coverage.lcov'
+      ],
+      { encoding: 'utf-8' }
+    ).trimEnd()
+    lines.push('')
+    lines.push(coverageReport)
+  } catch {
+    lines.push('')
+    lines.push('## 🔬 E2E Coverage')
+    lines.push('')
+    lines.push(
+      '> ⚠️ Failed to render coverage report. Check the CI workflow logs.'
+    )
+  }
+} else if (coverageStatus === 'failed') {
+  lines.push('')
+  lines.push('## 🔬 E2E Coverage')
+  lines.push('')
+  lines.push('> ⚠️ Coverage collection failed. Check the CI workflow logs.')
+}
+
 process.stdout.write(lines.join('\n') + '\n')
diff --git a/src/base/common/downloadUtil.test.ts b/src/base/common/downloadUtil.test.ts
index e601d870c9..916ba36d8a 100644
--- a/src/base/common/downloadUtil.test.ts
+++ b/src/base/common/downloadUtil.test.ts
@@ -1,3 +1,4 @@
+import { fromAny, fromPartial } from '@total-typescript/shoehorn'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import {
@@ -43,12 +44,12 @@ describe('downloadUtil', () => {
     createObjectURLSpy.mockClear().mockReturnValue('blob:mock-url')
     revokeObjectURLSpy.mockClear().mockImplementation(() => {})
     // Create a mock anchor element
-    mockLink = {
+    mockLink = fromPartial<HTMLAnchorElement>({
       href: '',
       download: '',
       click: vi.fn(),
       style: { display: '' }
-    } as unknown as HTMLAnchorElement
+    })
 
     // Spy on DOM methods
     vi.spyOn(document, 'createElement').mockReturnValue(mockLink)
@@ -172,12 +173,14 @@ describe('downloadUtil', () => {
       const headersMock = {
         get: vi.fn().mockReturnValue(null)
       }
-      fetchMock.mockResolvedValue({
-        ok: true,
-        status: 200,
-        blob: blobFn,
-        headers: headersMock
-      } as unknown as Response)
+      fetchMock.mockResolvedValue(
+        fromPartial<Response>({
+          ok: true,
+          status: 200,
+          blob: blobFn,
+          headers: headersMock
+        })
+      )
 
       downloadFile(testUrl)
 
@@ -198,11 +201,13 @@ describe('downloadUtil', () => {
       mockIsCloud.value = true
       const testUrl = 'https://storage.googleapis.com/bucket/missing.bin'
       const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
-      fetchMock.mockResolvedValue({
-        ok: false,
-        status: 404,
-        blob: vi.fn()
-      } as Partial<Response> as Response)
+      fetchMock.mockResolvedValue(
+        fromPartial<Response>({
+          ok: false,
+          status: 404,
+          blob: vi.fn()
+        })
+      )
 
       downloadFile(testUrl)
 
@@ -224,12 +229,14 @@ describe('downloadUtil', () => {
       const headersMock = {
         get: vi.fn().mockReturnValue('attachment; filename="user-friendly.png"')
       }
-      fetchMock.mockResolvedValue({
-        ok: true,
-        status: 200,
-        blob: blobFn,
-        headers: headersMock
-      } as unknown as Response)
+      fetchMock.mockResolvedValue(
+        fromPartial<Response>({
+          ok: true,
+          status: 200,
+          blob: blobFn,
+          headers: headersMock
+        })
+      )
 
       downloadFile(testUrl)
 
@@ -256,12 +263,14 @@ describe('downloadUtil', () => {
             'attachment; filename="fallback.png"; filename*=UTF-8\'\'%E4%B8%AD%E6%96%87.png'
           )
       }
-      fetchMock.mockResolvedValue({
-        ok: true,
-        status: 200,
-        blob: blobFn,
-        headers: headersMock
-      } as unknown as Response)
+      fetchMock.mockResolvedValue(
+        fromPartial<Response>({
+          ok: true,
+          status: 200,
+          blob: blobFn,
+          headers: headersMock
+        })
+      )
 
       downloadFile(testUrl)
 
@@ -282,12 +291,14 @@ describe('downloadUtil', () => {
       const headersMock = {
         get: vi.fn().mockReturnValue(null)
       }
-      fetchMock.mockResolvedValue({
-        ok: true,
-        status: 200,
-        blob: blobFn,
-        headers: headersMock
-      } as unknown as Response)
+      fetchMock.mockResolvedValue(
+        fromPartial<Response>({
+          ok: true,
+          status: 200,
+          blob: blobFn,
+          headers: headersMock
+        })
+      )
 
       downloadFile(testUrl, 'my-fallback.png')
 
@@ -328,11 +339,13 @@ describe('downloadUtil', () => {
       const testUrl = 'https://storage.googleapis.com/bucket/image.png'
       const blob = new Blob(['test'], { type: 'image/png' })
       const mockTab = { location: { href: '' }, closed: false, close: vi.fn() }
-      windowOpenSpy.mockReturnValue(mockTab as unknown as Window)
-      fetchMock.mockResolvedValue({
-        ok: true,
-        blob: vi.fn().mockResolvedValue(blob)
-      } as unknown as Response)
+      windowOpenSpy.mockReturnValue(fromAny<Window, unknown>(mockTab))
+      fetchMock.mockResolvedValue(
+        fromPartial<Response>({
+          ok: true,
+          blob: vi.fn().mockResolvedValue(blob)
+        })
+      )
 
       await openFileInNewTab(testUrl)
 
@@ -346,11 +359,13 @@ describe('downloadUtil', () => {
       mockIsCloud.value = true
       const blob = new Blob(['test'], { type: 'image/png' })
       const mockTab = { location: { href: '' }, closed: false, close: vi.fn() }
-      windowOpenSpy.mockReturnValue(mockTab as unknown as Window)
-      fetchMock.mockResolvedValue({
-        ok: true,
-        blob: vi.fn().mockResolvedValue(blob)
-      } as unknown as Response)
+      windowOpenSpy.mockReturnValue(fromAny<Window, unknown>(mockTab))
+      fetchMock.mockResolvedValue(
+        fromPartial<Response>({
+          ok: true,
+          blob: vi.fn().mockResolvedValue(blob)
+        })
+      )
 
       await openFileInNewTab('https://example.com/image.png')
 
@@ -364,11 +379,10 @@ describe('downloadUtil', () => {
       const testUrl = 'https://storage.googleapis.com/bucket/missing.png'
       const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
       const mockTab = { location: { href: '' }, closed: false, close: vi.fn() }
-      windowOpenSpy.mockReturnValue(mockTab as unknown as Window)
-      fetchMock.mockResolvedValue({
-        ok: false,
-        status: 404
-      } as unknown as Response)
+      windowOpenSpy.mockReturnValue(fromAny<Window, unknown>(mockTab))
+      fetchMock.mockResolvedValue(
+        fromPartial<Response>({ ok: false, status: 404 })
+      )
 
       await openFileInNewTab(testUrl)
 
@@ -381,11 +395,13 @@ describe('downloadUtil', () => {
       mockIsCloud.value = true
       const blob = new Blob(['test'], { type: 'image/png' })
       const mockTab = { location: { href: '' }, closed: true, close: vi.fn() }
-      windowOpenSpy.mockReturnValue(mockTab as unknown as Window)
-      fetchMock.mockResolvedValue({
-        ok: true,
-        blob: vi.fn().mockResolvedValue(blob)
-      } as unknown as Response)
+      windowOpenSpy.mockReturnValue(fromAny<Window, unknown>(mockTab))
+      fetchMock.mockResolvedValue(
+        fromPartial<Response>({
+          ok: true,
+          blob: vi.fn().mockResolvedValue(blob)
+        })
+      )
 
       await openFileInNewTab('https://example.com/image.png')
 
diff --git a/src/components/LiteGraphCanvasSplitterOverlay.vue b/src/components/LiteGraphCanvasSplitterOverlay.vue
index 64de67f2e5..38680f3749 100644
--- a/src/components/LiteGraphCanvasSplitterOverlay.vue
+++ b/src/components/LiteGraphCanvasSplitterOverlay.vue
@@ -171,14 +171,10 @@ const sidebarPanelVisible = computed(
 )
 
 const firstPanelVisible = computed(
-  () =>
-    !focusMode.value &&
-    (sidebarLocation.value === 'left' || showOffsideSplitter.value)
+  () => sidebarLocation.value === 'left' || showOffsideSplitter.value
 )
 const lastPanelVisible = computed(
-  () =>
-    !focusMode.value &&
-    (sidebarLocation.value === 'right' || showOffsideSplitter.value)
+  () => sidebarLocation.value === 'right' || showOffsideSplitter.value
 )
 
 /**
@@ -268,6 +264,7 @@ const splitterRefreshKey = computed(() => {
 })
 
 const firstPanelStyle = computed(() => {
+  if (focusMode.value) return { display: 'none' }
   if (sidebarLocation.value === 'left') {
     return { display: sidebarPanelVisible.value ? 'flex' : 'none' }
   }
@@ -275,6 +272,7 @@ const firstPanelStyle = computed(() => {
 })
 
 const lastPanelStyle = computed(() => {
+  if (focusMode.value) return { display: 'none' }
   if (sidebarLocation.value === 'right') {
     return { display: sidebarPanelVisible.value ? 'flex' : 'none' }
   }
@@ -293,9 +291,13 @@ const lastPanelStyle = computed(() => {
   background-color: var(--p-primary-color);
 }
 
-/* Hide sidebar gutter when sidebar is not visible */
-:deep(.side-bar-panel[style*='display: none'] + .p-splitter-gutter),
-:deep(.p-splitter-gutter + .side-bar-panel[style*='display: none']) {
+/* Hide gutter when adjacent panel is not visible */
+:deep(
+  [data-pc-name='splitterpanel'][style*='display: none'] + .p-splitter-gutter
+),
+:deep(
+  .p-splitter-gutter + [data-pc-name='splitterpanel'][style*='display: none']
+) {
   display: none;
 }
 
diff --git a/src/components/TopMenuSection.test.ts b/src/components/TopMenuSection.test.ts
index 46e158fa71..45262b606a 100644
--- a/src/components/TopMenuSection.test.ts
+++ b/src/components/TopMenuSection.test.ts
@@ -1,5 +1,8 @@
+/* eslint-disable testing-library/no-container */
+/* eslint-disable testing-library/no-node-access */
 import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import type { MenuItem } from 'primevue/menuitem'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { computed, defineComponent, h, nextTick, onMounted, ref } from 'vue'
@@ -8,8 +11,6 @@ import { createI18n } from 'vue-i18n'
 
 import TopMenuSection from '@/components/TopMenuSection.vue'
 import QueueNotificationBannerHost from '@/components/queue/QueueNotificationBannerHost.vue'
-import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
-import LoginButton from '@/components/topbar/LoginButton.vue'
 import type {
   JobListItem,
   JobStatus
@@ -114,8 +115,9 @@ function createWrapper({
     }
   })
 
-  return mount(TopMenuSection, {
-    attachTo,
+  const user = userEvent.setup()
+
+  const renderOptions: Record<string, unknown> = {
     global: {
       plugins: [pinia, i18n],
       stubs: {
@@ -128,7 +130,8 @@ function createWrapper({
         ContextMenu: {
           name: 'ContextMenu',
           props: ['model'],
-          template: '<div />'
+          template:
+            '<div data-testid="context-menu" :data-model="JSON.stringify(model)" />'
         },
         ...stubs
       },
@@ -136,15 +139,23 @@ function createWrapper({
         tooltip: () => {}
       }
     }
-  })
+  }
+
+  if (attachTo) {
+    renderOptions.container = attachTo.appendChild(
+      document.createElement('div')
+    )
+  }
+
+  const { container, unmount } = render(TopMenuSection, renderOptions)
+
+  return { container, unmount, user }
 }
 
-function getLegacyCommandsContainer(
-  wrapper: ReturnType<typeof createWrapper>
-): HTMLElement {
-  const legacyContainer = wrapper.find(
+function getLegacyCommandsContainer(container: Element): HTMLElement {
+  const legacyContainer = container.querySelector(
     '[data-testid="legacy-topbar-container"]'
-  ).element
+  )
   if (!(legacyContainer instanceof HTMLElement)) {
     throw new Error('Expected legacy commands container to be present')
   }
@@ -201,9 +212,11 @@ describe('TopMenuSection', () => {
       })
 
       it('should display CurrentUserButton and not display LoginButton', () => {
-        const wrapper = createLegacyTabBarWrapper()
-        expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(true)
-        expect(wrapper.findComponent(LoginButton).exists()).toBe(false)
+        const { container } = createLegacyTabBarWrapper()
+        expect(
+          container.querySelector('current-user-button-stub')
+        ).not.toBeNull()
+        expect(container.querySelector('login-button-stub')).toBeNull()
       })
     })
 
@@ -215,24 +228,24 @@ describe('TopMenuSection', () => {
       describe('on desktop platform', () => {
         it('should display LoginButton and not display CurrentUserButton', () => {
           mockData.isDesktop = true
-          const wrapper = createLegacyTabBarWrapper()
-          expect(wrapper.findComponent(LoginButton).exists()).toBe(true)
-          expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(false)
+          const { container } = createLegacyTabBarWrapper()
+          expect(container.querySelector('login-button-stub')).not.toBeNull()
+          expect(container.querySelector('current-user-button-stub')).toBeNull()
         })
       })
 
       describe('on web platform', () => {
         it('should not display CurrentUserButton and not display LoginButton', () => {
-          const wrapper = createLegacyTabBarWrapper()
-          expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(false)
-          expect(wrapper.findComponent(LoginButton).exists()).toBe(false)
+          const { container } = createLegacyTabBarWrapper()
+          expect(container.querySelector('current-user-button-stub')).toBeNull()
+          expect(container.querySelector('login-button-stub')).toBeNull()
         })
       })
     })
   })
 
   it('shows the active jobs label with the current count', async () => {
-    const wrapper = createWrapper()
+    createWrapper()
     const queueStore = useQueueStore()
     queueStore.pendingTasks = [createTask('pending-1', 'pending')]
     queueStore.runningTasks = [
@@ -242,19 +255,15 @@ describe('TopMenuSection', () => {
 
     await nextTick()
 
-    const queueButton = wrapper.find('[data-testid="queue-overlay-toggle"]')
-    expect(queueButton.text()).toContain('3 active')
-    expect(wrapper.find('[data-testid="active-jobs-indicator"]').exists()).toBe(
-      true
-    )
+    const queueButton = screen.getByTestId('queue-overlay-toggle')
+    expect(queueButton.textContent).toContain('3 active')
+    expect(screen.getByTestId('active-jobs-indicator')).toBeTruthy()
   })
 
   it('hides the active jobs indicator when no jobs are active', () => {
-    const wrapper = createWrapper()
+    createWrapper()
 
-    expect(wrapper.find('[data-testid="active-jobs-indicator"]').exists()).toBe(
-      false
-    )
+    expect(screen.queryByTestId('active-jobs-indicator')).toBeNull()
   })
 
   it('hides queue progress overlay when QPO V2 is enabled', async () => {
@@ -263,16 +272,12 @@ describe('TopMenuSection', () => {
     vi.mocked(settingStore.get).mockImplementation((key) =>
       key === 'Comfy.Queue.QPOV2' ? true : undefined
     )
-    const wrapper = createWrapper({ pinia })
+    const { container } = createWrapper({ pinia })
 
     await nextTick()
 
-    expect(wrapper.find('[data-testid="queue-overlay-toggle"]').exists()).toBe(
-      true
-    )
-    expect(
-      wrapper.findComponent({ name: 'QueueProgressOverlay' }).exists()
-    ).toBe(false)
+    expect(screen.getByTestId('queue-overlay-toggle')).toBeTruthy()
+    expect(container.querySelector('queue-progress-overlay-stub')).toBeNull()
   })
 
   it('toggles the queue progress overlay when QPO V2 is disabled', async () => {
@@ -281,10 +286,10 @@ describe('TopMenuSection', () => {
     vi.mocked(settingStore.get).mockImplementation((key) =>
       key === 'Comfy.Queue.QPOV2' ? false : undefined
     )
-    const wrapper = createWrapper({ pinia })
+    const { user } = createWrapper({ pinia })
     const commandStore = useCommandStore(pinia)
 
-    await wrapper.find('[data-testid="queue-overlay-toggle"]').trigger('click')
+    await user.click(screen.getByTestId('queue-overlay-toggle'))
 
     expect(commandStore.execute).toHaveBeenCalledWith(
       'Comfy.Queue.ToggleOverlay'
@@ -297,10 +302,10 @@ describe('TopMenuSection', () => {
     vi.mocked(settingStore.get).mockImplementation((key) =>
       key === 'Comfy.Queue.QPOV2' ? true : undefined
     )
-    const wrapper = createWrapper({ pinia })
+    const { user } = createWrapper({ pinia })
     const sidebarTabStore = useSidebarTabStore(pinia)
 
-    await wrapper.find('[data-testid="queue-overlay-toggle"]').trigger('click')
+    await user.click(screen.getByTestId('queue-overlay-toggle'))
 
     expect(sidebarTabStore.activeSidebarTabId).toBe('job-history')
   })
@@ -311,14 +316,14 @@ describe('TopMenuSection', () => {
     vi.mocked(settingStore.get).mockImplementation((key) =>
       key === 'Comfy.Queue.QPOV2' ? true : undefined
     )
-    const wrapper = createWrapper({ pinia })
+    const { user } = createWrapper({ pinia })
     const sidebarTabStore = useSidebarTabStore(pinia)
-    const toggleButton = wrapper.find('[data-testid="queue-overlay-toggle"]')
+    const toggleButton = screen.getByTestId('queue-overlay-toggle')
 
-    await toggleButton.trigger('click')
+    await user.click(toggleButton)
     expect(sidebarTabStore.activeSidebarTabId).toBe('job-history')
 
-    await toggleButton.trigger('click')
+    await user.click(toggleButton)
     expect(sidebarTabStore.activeSidebarTabId).toBe(null)
   })
 
@@ -341,39 +346,39 @@ describe('TopMenuSection', () => {
       const pinia = createTestingPinia({ createSpy: vi.fn })
       configureSettings(pinia, true)
 
-      const wrapper = createWrapper({ pinia })
+      const { container } = createWrapper({ pinia })
 
       await nextTick()
 
       expect(
-        wrapper.findComponent({ name: 'QueueInlineProgressSummary' }).exists()
-      ).toBe(true)
+        container.querySelector('queue-inline-progress-summary-stub')
+      ).not.toBeNull()
     })
 
     it('does not render inline progress summary when QPO V2 is disabled', async () => {
       const pinia = createTestingPinia({ createSpy: vi.fn })
       configureSettings(pinia, false)
 
-      const wrapper = createWrapper({ pinia })
+      const { container } = createWrapper({ pinia })
 
       await nextTick()
 
       expect(
-        wrapper.findComponent({ name: 'QueueInlineProgressSummary' }).exists()
-      ).toBe(false)
+        container.querySelector('queue-inline-progress-summary-stub')
+      ).toBeNull()
     })
 
     it('does not render inline progress summary when run progress bar is disabled', async () => {
       const pinia = createTestingPinia({ createSpy: vi.fn })
       configureSettings(pinia, true, false)
 
-      const wrapper = createWrapper({ pinia })
+      const { container } = createWrapper({ pinia })
 
       await nextTick()
 
       expect(
-        wrapper.findComponent({ name: 'QueueInlineProgressSummary' }).exists()
-      ).toBe(false)
+        container.querySelector('queue-inline-progress-summary-stub')
+      ).toBeNull()
     })
 
     it('teleports inline progress summary when actionbar is floating', async () => {
@@ -387,7 +392,7 @@ describe('TopMenuSection', () => {
 
       const ComfyActionbarStub = createComfyActionbarStub(actionbarTarget)
 
-      const wrapper = createWrapper({
+      const { unmount } = createWrapper({
         pinia,
         attachTo: document.body,
         stubs: {
@@ -401,7 +406,7 @@ describe('TopMenuSection', () => {
 
         expect(actionbarTarget.querySelector('[role="status"]')).not.toBeNull()
       } finally {
-        wrapper.unmount()
+        unmount()
         actionbarTarget.remove()
       }
     })
@@ -424,36 +429,36 @@ describe('TopMenuSection', () => {
       const pinia = createTestingPinia({ createSpy: vi.fn })
       configureSettings(pinia, true)
 
-      const wrapper = createWrapper({ pinia })
+      const { container } = createWrapper({ pinia })
 
       await nextTick()
 
       expect(
-        wrapper.findComponent({ name: 'QueueNotificationBannerHost' }).exists()
-      ).toBe(true)
+        container.querySelector('queue-notification-banner-host-stub')
+      ).not.toBeNull()
     })
 
     it('renders queue notification banners when QPO V2 is disabled', async () => {
       const pinia = createTestingPinia({ createSpy: vi.fn })
       configureSettings(pinia, false)
 
-      const wrapper = createWrapper({ pinia })
+      const { container } = createWrapper({ pinia })
 
       await nextTick()
 
       expect(
-        wrapper.findComponent({ name: 'QueueNotificationBannerHost' }).exists()
-      ).toBe(true)
+        container.querySelector('queue-notification-banner-host-stub')
+      ).not.toBeNull()
     })
 
     it('renders inline summary above banners when both are visible', async () => {
       const pinia = createTestingPinia({ createSpy: vi.fn })
       configureSettings(pinia, true)
-      const wrapper = createWrapper({ pinia })
+      const { container } = createWrapper({ pinia })
 
       await nextTick()
 
-      const html = wrapper.html()
+      const html = container.innerHTML
       const inlineSummaryIndex = html.indexOf(
         'queue-inline-progress-summary-stub'
       )
@@ -477,7 +482,7 @@ describe('TopMenuSection', () => {
 
       const ComfyActionbarStub = createComfyActionbarStub(actionbarTarget)
 
-      const wrapper = createWrapper({
+      const { container, unmount } = createWrapper({
         pinia,
         attachTo: document.body,
         stubs: {
@@ -493,47 +498,49 @@ describe('TopMenuSection', () => {
           actionbarTarget.querySelector('queue-notification-banner-host-stub')
         ).toBeNull()
         expect(
-          wrapper
-            .findComponent({ name: 'QueueNotificationBannerHost' })
-            .exists()
-        ).toBe(true)
+          container.querySelector('queue-notification-banner-host-stub')
+        ).not.toBeNull()
       } finally {
-        wrapper.unmount()
+        unmount()
         actionbarTarget.remove()
       }
     })
   })
 
   it('disables the clear queue context menu item when no queued jobs exist', () => {
-    const wrapper = createWrapper()
-    const menu = wrapper.findComponent({ name: 'ContextMenu' })
-    const model = menu.props('model') as MenuItem[]
+    const { container } = createWrapper()
+    const menuEl = container.querySelector('[data-testid="context-menu"]')
+    const model = JSON.parse(
+      menuEl?.getAttribute('data-model') ?? '[]'
+    ) as MenuItem[]
     expect(model[0]?.label).toBe('Clear queue')
     expect(model[0]?.disabled).toBe(true)
   })
 
   it('enables the clear queue context menu item when queued jobs exist', async () => {
-    const wrapper = createWrapper()
+    const { container } = createWrapper()
     const queueStore = useQueueStore()
     queueStore.pendingTasks = [createTask('pending-1', 'pending')]
 
     await nextTick()
 
-    const menu = wrapper.findComponent({ name: 'ContextMenu' })
-    const model = menu.props('model') as MenuItem[]
+    const menuEl = container.querySelector('[data-testid="context-menu"]')
+    const model = JSON.parse(
+      menuEl?.getAttribute('data-model') ?? '[]'
+    ) as MenuItem[]
     expect(model[0]?.disabled).toBe(false)
   })
 
   it('shows manager red dot only for manager conflicts', async () => {
-    const wrapper = createWrapper()
+    const { container } = createWrapper()
 
     // Release red dot is mocked as true globally for this test file.
-    expect(wrapper.find('span.bg-red-500').exists()).toBe(false)
+    expect(container.querySelector('span.bg-red-500')).toBeNull()
 
     mockData.setShowConflictRedDot(true)
     await nextTick()
 
-    expect(wrapper.find('span.bg-red-500').exists()).toBe(true)
+    expect(container.querySelector('span.bg-red-500')).not.toBeNull()
   })
 
   it('coalesces legacy topbar mutation scans to one check per frame', async () => {
@@ -555,15 +562,19 @@ describe('TopMenuSection', () => {
       return undefined
     })
 
-    const wrapper = createWrapper({ pinia, attachTo: document.body })
+    const { container, unmount } = createWrapper({
+      pinia,
+      attachTo: document.body
+    })
 
     try {
       await nextTick()
 
-      const actionbarContainer = wrapper.find('.actionbar-container')
-      expect(actionbarContainer.classes()).toContain('w-0')
+      const actionbarContainer = container.querySelector('.actionbar-container')
+      expect(actionbarContainer).not.toBeNull()
+      expect(actionbarContainer!.classList).toContain('w-0')
 
-      const legacyContainer = getLegacyCommandsContainer(wrapper)
+      const legacyContainer = getLegacyCommandsContainer(container)
       const querySpy = vi.spyOn(legacyContainer, 'querySelector')
 
       if (rafCallbacks.length > 0) {
@@ -594,9 +605,9 @@ describe('TopMenuSection', () => {
       await nextTick()
 
       expect(querySpy).toHaveBeenCalledTimes(1)
-      expect(actionbarContainer.classes()).toContain('px-2')
+      expect(actionbarContainer!.classList).toContain('px-2')
     } finally {
-      wrapper.unmount()
+      unmount()
       vi.unstubAllGlobals()
     }
   })
diff --git a/src/components/bottomPanel/tabs/shortcuts/EssentialsPanel.test.ts b/src/components/bottomPanel/tabs/shortcuts/EssentialsPanel.test.ts
index 0c4f656aba..f2b5c4997f 100644
--- a/src/components/bottomPanel/tabs/shortcuts/EssentialsPanel.test.ts
+++ b/src/components/bottomPanel/tabs/shortcuts/EssentialsPanel.test.ts
@@ -1,9 +1,7 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import EssentialsPanel from '@/components/bottomPanel/tabs/shortcuts/EssentialsPanel.vue'
-import ShortcutsList from '@/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue'
 import type { ComfyCommandImpl } from '@/stores/commandStore'
 
 // Mock ShortcutsList component
@@ -12,7 +10,7 @@ vi.mock('@/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue', () => ({
     name: 'ShortcutsList',
     props: ['commands', 'subcategories', 'columns'],
     template:
-      '<div class="shortcuts-list-mock">{{ commands.length }} commands</div>'
+      '<div data-testid="shortcuts-list">{{ JSON.stringify(subcategories) }}</div>'
   }
 }))
 
@@ -56,25 +54,34 @@ describe('EssentialsPanel', () => {
     setActivePinia(createPinia())
   })
 
-  it('should render ShortcutsList with essentials commands', () => {
-    const wrapper = mount(EssentialsPanel)
+  it('should render ShortcutsList with essentials commands', async () => {
+    const { default: EssentialsPanel } =
+      await import('@/components/bottomPanel/tabs/shortcuts/EssentialsPanel.vue')
+    render(EssentialsPanel)
 
-    const shortcutsList = wrapper.findComponent(ShortcutsList)
-    expect(shortcutsList.exists()).toBe(true)
+    expect(screen.getByTestId('shortcuts-list')).toBeTruthy()
   })
 
-  it('should categorize commands into subcategories', () => {
-    const wrapper = mount(EssentialsPanel)
+  it('should categorize commands into subcategories', async () => {
+    const { default: EssentialsPanel } =
+      await import('@/components/bottomPanel/tabs/shortcuts/EssentialsPanel.vue')
+    render(EssentialsPanel)
 
-    const shortcutsList = wrapper.findComponent(ShortcutsList)
-    const subcategories = shortcutsList.props('subcategories')
+    const el = screen.getByTestId('shortcuts-list')
+    const subcategories = JSON.parse(el.textContent ?? '{}')
 
     expect(subcategories).toHaveProperty('workflow')
     expect(subcategories).toHaveProperty('node')
     expect(subcategories).toHaveProperty('queue')
 
-    expect(subcategories.workflow).toContain(mockCommands[0])
-    expect(subcategories.node).toContain(mockCommands[1])
-    expect(subcategories.queue).toContain(mockCommands[2])
+    expect(subcategories.workflow).toContainEqual(
+      expect.objectContaining({ id: 'Workflow.New' })
+    )
+    expect(subcategories.node).toContainEqual(
+      expect.objectContaining({ id: 'Node.Add' })
+    )
+    expect(subcategories.queue).toContainEqual(
+      expect.objectContaining({ id: 'Queue.Clear' })
+    )
   })
 })
diff --git a/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.test.ts b/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.test.ts
index 1ba43a9d29..cc9a813193 100644
--- a/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.test.ts
+++ b/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.test.ts
@@ -1,6 +1,7 @@
-import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
 
+import { render, screen } from '@testing-library/vue'
+
 import ShortcutsList from '@/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue'
 import type { ComfyCommandImpl } from '@/stores/commandStore'
 
@@ -64,36 +65,31 @@ describe('ShortcutsList', () => {
   }
 
   it('should render shortcuts organized by subcategories', () => {
-    const wrapper = mount(ShortcutsList, {
+    render(ShortcutsList, {
       props: {
-        commands: mockCommands,
         subcategories: mockSubcategories
       }
     })
 
-    // Check that subcategories are rendered
-    expect(wrapper.text()).toContain('Workflow')
-    expect(wrapper.text()).toContain('Node')
-    expect(wrapper.text()).toContain('Queue')
-
-    // Check that commands are rendered
-    expect(wrapper.text()).toContain('New Blank Workflow')
+    expect(screen.getByText('Workflow')).toBeInTheDocument()
+    expect(screen.getByText('Node')).toBeInTheDocument()
+    expect(screen.getByText('Queue')).toBeInTheDocument()
+    expect(screen.getByText('New Blank Workflow')).toBeInTheDocument()
   })
 
   it('should format keyboard shortcuts correctly', () => {
-    const wrapper = mount(ShortcutsList, {
+    const { container } = render(ShortcutsList, {
       props: {
-        commands: mockCommands,
         subcategories: mockSubcategories
       }
     })
 
-    // Check for formatted keys
-    expect(wrapper.text()).toContain('Ctrl')
-    expect(wrapper.text()).toContain('n')
-    expect(wrapper.text()).toContain('Shift')
-    expect(wrapper.text()).toContain('a')
-    expect(wrapper.text()).toContain('c')
+    const text = container.textContent!
+    expect(text).toContain('Ctrl')
+    expect(text).toContain('n')
+    expect(text).toContain('Shift')
+    expect(text).toContain('a')
+    expect(text).toContain('c')
   })
 
   it('should filter out commands without keybindings', () => {
@@ -107,9 +103,8 @@ describe('ShortcutsList', () => {
       } as ComfyCommandImpl
     ]
 
-    const wrapper = mount(ShortcutsList, {
+    render(ShortcutsList, {
       props: {
-        commands: commandsWithoutKeybinding,
         subcategories: {
           ...mockSubcategories,
           other: [commandsWithoutKeybinding[3]]
@@ -117,7 +112,7 @@ describe('ShortcutsList', () => {
       }
     })
 
-    expect(wrapper.text()).not.toContain('No Keybinding')
+    expect(screen.queryByText('No Keybinding')).not.toBeInTheDocument()
   })
 
   it('should handle special key formatting', () => {
@@ -132,16 +127,15 @@ describe('ShortcutsList', () => {
       }
     } as ComfyCommandImpl
 
-    const wrapper = mount(ShortcutsList, {
+    const { container } = render(ShortcutsList, {
       props: {
-        commands: [specialKeyCommand],
         subcategories: {
           special: [specialKeyCommand]
         }
       }
     })
 
-    const text = wrapper.text()
+    const text = container.textContent!
     expect(text).toContain('Cmd') // Meta -> Cmd
     expect(text).toContain('↑') // ArrowUp -> ↑
     expect(text).toContain('↵') // Enter -> ↵
@@ -150,15 +144,14 @@ describe('ShortcutsList', () => {
   })
 
   it('should use fallback subcategory titles', () => {
-    const wrapper = mount(ShortcutsList, {
+    render(ShortcutsList, {
       props: {
-        commands: mockCommands,
         subcategories: {
           unknown: [mockCommands[0]]
         }
       }
     })
 
-    expect(wrapper.text()).toContain('unknown')
+    expect(screen.getByText('unknown')).toBeInTheDocument()
   })
 })
diff --git a/src/components/bottomPanel/tabs/terminal/BaseTerminal.test.ts b/src/components/bottomPanel/tabs/terminal/BaseTerminal.test.ts
index a651475fb0..493dab5e89 100644
--- a/src/components/bottomPanel/tabs/terminal/BaseTerminal.test.ts
+++ b/src/components/bottomPanel/tabs/terminal/BaseTerminal.test.ts
@@ -1,8 +1,9 @@
+/* eslint-disable testing-library/no-node-access */
+/* eslint-disable testing-library/prefer-user-event */
 import { createTestingPinia } from '@pinia/testing'
-import type { VueWrapper } from '@vue/test-utils'
-import { mount } from '@vue/test-utils'
+import { fireEvent, render, screen } from '@testing-library/vue'
 import type { Mock } from 'vitest'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
@@ -67,9 +68,10 @@ vi.mock('@/platform/distribution/types', () => ({
 }))
 
 // Mock clipboard API
+const mockWriteText = vi.fn().mockResolvedValue(undefined)
 Object.defineProperty(navigator, 'clipboard', {
   value: {
-    writeText: vi.fn().mockResolvedValue(undefined)
+    writeText: mockWriteText
   },
   configurable: true
 })
@@ -87,8 +89,9 @@ const i18n = createI18n({
   }
 })
 
-const mountBaseTerminal = () => {
-  return mount(BaseTerminal, {
+function renderBaseTerminal(props: Record<string, unknown> = {}) {
+  return render(BaseTerminal, {
+    props,
     global: {
       plugins: [
         createTestingPinia({
@@ -107,68 +110,60 @@ const mountBaseTerminal = () => {
 }
 
 describe('BaseTerminal', () => {
-  let wrapper: VueWrapper<InstanceType<typeof BaseTerminal>> | undefined
-
   beforeEach(() => {
     vi.clearAllMocks()
   })
 
-  afterEach(() => {
-    wrapper?.unmount()
-  })
-
   it('emits created event on mount', () => {
-    wrapper = mountBaseTerminal()
+    const onCreated = vi.fn()
+    renderBaseTerminal({ onCreated })
 
-    expect(wrapper.emitted('created')).toBeTruthy()
-    expect(wrapper.emitted('created')![0]).toHaveLength(2)
+    expect(onCreated).toHaveBeenCalled()
+    expect(onCreated.mock.calls[0]).toHaveLength(2)
   })
 
   it('emits unmounted event on unmount', () => {
-    wrapper = mountBaseTerminal()
-    wrapper.unmount()
+    const onUnmounted = vi.fn()
+    const { unmount } = renderBaseTerminal({ onUnmounted })
+    unmount()
 
-    expect(wrapper.emitted('unmounted')).toBeTruthy()
+    expect(onUnmounted).toHaveBeenCalled()
   })
 
-  it('button exists and has correct initial state', async () => {
-    wrapper = mountBaseTerminal()
+  it('button exists and has correct initial state', () => {
+    renderBaseTerminal()
 
-    const button = wrapper.find('button[aria-label]')
-    expect(button.exists()).toBe(true)
-
-    expect(button.classes()).toContain('opacity-0')
-    expect(button.classes()).toContain('pointer-events-none')
+    const button = screen.getByRole('button')
+    expect(button).toHaveClass('opacity-0', 'pointer-events-none')
   })
 
   it('shows correct tooltip when no selection', async () => {
     mockTerminal.hasSelection.mockReturnValue(false)
-    wrapper = mountBaseTerminal()
+    const { container } = renderBaseTerminal()
 
-    await wrapper.trigger('mouseenter')
+    await fireEvent.mouseEnter(container.firstElementChild!)
     await nextTick()
 
-    const button = wrapper.find('button[aria-label]')
-    expect(button.attributes('aria-label')).toBe('Copy all')
+    const button = screen.getByRole('button')
+    expect(button).toHaveAttribute('aria-label', 'Copy all')
   })
 
   it('shows correct tooltip when selection exists', async () => {
     mockTerminal.hasSelection.mockReturnValue(true)
-    wrapper = mountBaseTerminal()
+    const { container } = renderBaseTerminal()
 
     // Trigger the selection change callback that was registered during mount
     expect(mockTerminal.onSelectionChange).toHaveBeenCalled()
-    // Access the mock calls - TypeScript can't infer the mock structure dynamically
     const mockCalls = (mockTerminal.onSelectionChange as Mock).mock.calls
     const selectionCallback = mockCalls[0][0] as () => void
     selectionCallback()
     await nextTick()
 
-    await wrapper.trigger('mouseenter')
+    await fireEvent.mouseEnter(container.firstElementChild!)
     await nextTick()
 
-    const button = wrapper.find('button[aria-label]')
-    expect(button.attributes('aria-label')).toBe('Copy selection')
+    const button = screen.getByRole('button')
+    expect(button).toHaveAttribute('aria-label', 'Copy selection')
   })
 
   it('copies selected text when selection exists', async () => {
@@ -176,16 +171,17 @@ describe('BaseTerminal', () => {
     mockTerminal.hasSelection.mockReturnValue(true)
     mockTerminal.getSelection.mockReturnValue(selectedText)
 
-    wrapper = mountBaseTerminal()
+    const { container } = renderBaseTerminal()
 
-    await wrapper.trigger('mouseenter')
+    await fireEvent.mouseEnter(container.firstElementChild!)
     await nextTick()
 
-    const button = wrapper.find('button[aria-label]')
-    await button.trigger('click')
+    const button = screen.getByRole('button')
+    await fireEvent.click(button)
+    await nextTick()
 
     expect(mockTerminal.selectAll).not.toHaveBeenCalled()
-    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(selectedText)
+    expect(mockWriteText).toHaveBeenCalledWith(selectedText)
     expect(mockTerminal.clearSelection).not.toHaveBeenCalled()
   })
 
@@ -196,16 +192,17 @@ describe('BaseTerminal', () => {
       .mockReturnValueOnce('') // First call returns empty (no selection)
       .mockReturnValueOnce(allText) // Second call after selectAll returns all text
 
-    wrapper = mountBaseTerminal()
+    const { container } = renderBaseTerminal()
 
-    await wrapper.trigger('mouseenter')
+    await fireEvent.mouseEnter(container.firstElementChild!)
     await nextTick()
 
-    const button = wrapper.find('button[aria-label]')
-    await button.trigger('click')
+    const button = screen.getByRole('button')
+    await fireEvent.click(button)
+    await nextTick()
 
     expect(mockTerminal.selectAll).toHaveBeenCalled()
-    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(allText)
+    expect(mockWriteText).toHaveBeenCalledWith(allText)
     expect(mockTerminal.clearSelection).toHaveBeenCalled()
   })
 
@@ -213,15 +210,16 @@ describe('BaseTerminal', () => {
     mockTerminal.hasSelection.mockReturnValue(false)
     mockTerminal.getSelection.mockReturnValue('')
 
-    wrapper = mountBaseTerminal()
+    const { container } = renderBaseTerminal()
 
-    await wrapper.trigger('mouseenter')
+    await fireEvent.mouseEnter(container.firstElementChild!)
     await nextTick()
 
-    const button = wrapper.find('button[aria-label]')
-    await button.trigger('click')
+    const button = screen.getByRole('button')
+    await fireEvent.click(button)
+    await nextTick()
 
     expect(mockTerminal.selectAll).toHaveBeenCalled()
-    expect(navigator.clipboard.writeText).not.toHaveBeenCalled()
+    expect(mockWriteText).not.toHaveBeenCalled()
   })
 })
diff --git a/src/components/builder/AppBuilder.vue b/src/components/builder/AppBuilder.vue
index 222b177940..7f707e8ca4 100644
--- a/src/components/builder/AppBuilder.vue
+++ b/src/components/builder/AppBuilder.vue
@@ -314,6 +314,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
       </PropertiesAccordionItem>
       <div
         v-if="isSelectOutputsMode && !appModeStore.selectedOutputs.length"
+        data-testid="builder-output-placeholder"
         class="m-4 flex flex-1 flex-col items-center justify-center gap-1 rounded-lg border-2 border-dashed border-warning-background bg-warning-background/20 text-center text-sm text-warning-background"
       >
         {{ t('linearMode.builder.outputPlaceholder') }}
diff --git a/src/components/builder/AppModeWidgetList.vue b/src/components/builder/AppModeWidgetList.vue
index 75a9106a18..74601a3a58 100644
--- a/src/components/builder/AppModeWidgetList.vue
+++ b/src/components/builder/AppModeWidgetList.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { useEventListener } from '@vueuse/core'
 import { computed, provide, shallowRef } from 'vue'
+
+import { useAppModeWidgetResizing } from '@/components/builder/useAppModeWidgetResizing'
 import { useI18n } from 'vue-i18n'
 
 import Popover from '@/components/ui/Popover.vue'
@@ -8,7 +10,7 @@ import Button from '@/components/ui/button/Button.vue'
 import { extractVueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { OverlayAppendToKey } from '@/composables/useTransformCompatOverlayProps'
 import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
-import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode'
 import { LGraphEventMode } from '@/lib/litegraph/src/types/globalEnums'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useMaskEditor } from '@/composables/maskeditor/useMaskEditor'
@@ -28,6 +30,9 @@ import { promptRenameWidget } from '@/utils/widgetUtil'
 
 interface WidgetEntry {
   key: string
+  nodeId: NodeId
+  widgetName: string
+  persistedHeight: number | undefined
   nodeData: ReturnType<typeof nodeToNodeData> & {
     widgets: NonNullable<ReturnType<typeof nodeToNodeData>['widgets']>
   }
@@ -44,6 +49,11 @@ const executionErrorStore = useExecutionErrorStore()
 const appModeStore = useAppModeStore()
 const maskEditor = useMaskEditor()
 
+const { onPointerDown } = useAppModeWidgetResizing(
+  (nodeId, widgetName, config) =>
+    appModeStore.updateInputConfig(nodeId, widgetName, config)
+)
+
 provide(HideLayoutFieldKey, true)
 provide(OverlayAppendToKey, 'body')
 
@@ -61,7 +71,7 @@ const mappedSelections = computed((): WidgetEntry[] => {
     ReturnType<typeof nodeToNodeData>
   >()
 
-  return appModeStore.selectedInputs.flatMap(([nodeId, widgetName]) => {
+  return appModeStore.selectedInputs.flatMap(([nodeId, widgetName, config]) => {
     const [node, widget] = resolveNodeWidget(nodeId, widgetName)
     if (!widget || !node || node.mode !== LGraphEventMode.ALWAYS) return []
 
@@ -90,6 +100,9 @@ const mappedSelections = computed((): WidgetEntry[] => {
     return [
       {
         key: `${nodeId}:${widgetName}`,
+        nodeId,
+        widgetName,
+        persistedHeight: config?.height,
         nodeData: {
           ...fullNodeData,
           widgets: [matchingWidget]
@@ -157,7 +170,14 @@ defineExpose({ handleDragDrop })
 </script>
 <template>
   <div
-    v-for="{ key, nodeData, action } in mappedSelections"
+    v-for="{
+      key,
+      nodeId,
+      widgetName,
+      persistedHeight,
+      nodeData,
+      action
+    } in mappedSelections"
     :key
     :class="
       cn(
@@ -170,6 +190,8 @@ defineExpose({ handleDragDrop })
         ? `${action.widget.label ?? action.widget.name} — ${action.node.title}`
         : undefined
     "
+    :data-testid="builderMode ? 'builder-widget-item' : 'app-mode-widget-item'"
+    :data-widget-key="key"
   >
     <div
       :class="
@@ -181,6 +203,7 @@ defineExpose({ handleDragDrop })
     >
       <span
         :class="cn('truncate text-sm/8', builderMode && 'pointer-events-none')"
+        data-testid="builder-widget-label"
       >
         {{ action.widget.label || action.widget.name }}
       </span>
@@ -219,8 +242,20 @@ defineExpose({ handleDragDrop })
       </Popover>
     </div>
     <div
-      :class="builderMode && 'pointer-events-none'"
+      :style="
+        persistedHeight
+          ? { '--persisted-height': `${persistedHeight}px` }
+          : undefined
+      "
+      :class="
+        cn(
+          builderMode && 'pointer-events-none',
+          persistedHeight &&
+            '**:data-[slot=drop-zone-indicator]:h-(--persisted-height) [&_textarea]:h-(--persisted-height)'
+        )
+      "
       :inert="builderMode || undefined"
+      @pointerdown.capture="(e) => onPointerDown(nodeId, widgetName, e)"
     >
       <DropZone
         :on-drag-over="nodeData.onDragOver"
diff --git a/src/components/builder/BuilderFooterToolbar.test.ts b/src/components/builder/BuilderFooterToolbar.test.ts
index 7e7ea8e1a2..4efe8ef10d 100644
--- a/src/components/builder/BuilderFooterToolbar.test.ts
+++ b/src/components/builder/BuilderFooterToolbar.test.ts
@@ -46,7 +46,7 @@ const mockActiveWorkflow = ref<{
   isTemporary: boolean
   initialMode?: string
   isModified?: boolean
-  changeTracker?: { checkState: () => void }
+  changeTracker?: { captureCanvasState: () => void }
 } | null>({
   isTemporary: true,
   initialMode: 'app'
diff --git a/src/components/builder/BuilderFooterToolbar.vue b/src/components/builder/BuilderFooterToolbar.vue
index 6988ff398b..bb090680c5 100644
--- a/src/components/builder/BuilderFooterToolbar.vue
+++ b/src/components/builder/BuilderFooterToolbar.vue
@@ -11,6 +11,7 @@
 
     <!-- Main toolbar -->
     <nav
+      data-testid="builder-footer-nav"
       class="flex items-center gap-2 rounded-2xl border border-border-default bg-base-background p-2 shadow-interface"
     >
       <Button variant="textonly" size="lg" @click="onExitBuilder">
@@ -32,64 +33,91 @@
         {{ t('g.next') }}
         <i class="icon-[lucide--chevron-right]" aria-hidden="true" />
       </Button>
-      <ConnectOutputPopover
-        v-if="!hasOutputs"
-        :is-select-active="isSelectStep"
-        @switch="navigateToStep('builder:outputs')"
-      >
-        <Button size="lg" :class="cn('w-24', disabledSaveClasses)">
-          {{ isSaved ? t('g.save') : t('builderToolbar.saveAs') }}
-        </Button>
-      </ConnectOutputPopover>
-      <ButtonGroup
-        v-else-if="isSaved"
-        class="w-24 rounded-lg bg-secondary-background has-[[data-save-chevron]:hover]:bg-secondary-background-hover"
-      >
-        <Button
-          size="lg"
-          :disabled="!isModified"
-          class="flex-1"
-          :class="isModified ? activeSaveClasses : disabledSaveClasses"
-          @click="save()"
+      <div class="relative min-w-24">
+        <!--
+          Invisible sizers: both labels rendered with matching button padding
+          so the container's intrinsic width equals the wider label.
+          height:0 + overflow:hidden keeps them invisible without affecting height.
+        -->
+        <div class="max-h-0 overflow-y-hidden" aria-hidden="true">
+          <div class="px-4 py-2 text-sm">{{ t('g.save') }}</div>
+          <div class="px-4 py-2 text-sm">{{ t('builderToolbar.saveAs') }}</div>
+        </div>
+        <ConnectOutputPopover
+          v-if="!hasOutputs"
+          class="w-full"
+          :is-select-active="isSelectStep"
+          @switch="navigateToStep('builder:outputs')"
         >
-          {{ t('g.save') }}
+          <Button
+            size="lg"
+            class="w-full"
+            :class="disabledSaveClasses"
+            data-testid="builder-save-as-button"
+          >
+            {{ isSaved ? t('g.save') : t('builderToolbar.saveAs') }}
+          </Button>
+        </ConnectOutputPopover>
+        <ButtonGroup
+          v-else-if="isSaved"
+          data-testid="builder-save-group"
+          class="w-full rounded-lg bg-secondary-background has-[[data-save-chevron]:hover]:bg-secondary-background-hover"
+        >
+          <Button
+            size="lg"
+            :disabled="!isModified"
+            class="flex-1"
+            :class="isModified ? activeSaveClasses : disabledSaveClasses"
+            data-testid="builder-save-button"
+            @click="save()"
+          >
+            {{ t('g.save') }}
+          </Button>
+          <DropdownMenuRoot>
+            <DropdownMenuTrigger as-child>
+              <Button
+                size="lg"
+                :aria-label="t('builderToolbar.saveAs')"
+                data-save-chevron
+                data-testid="builder-save-as-chevron"
+                class="w-6 rounded-l-none border-l border-border-default px-0"
+              >
+                <i
+                  class="icon-[lucide--chevron-down] size-4"
+                  aria-hidden="true"
+                />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuContent
+                align="end"
+                :side-offset="4"
+                class="z-1001 min-w-36 rounded-lg border border-border-subtle bg-base-background p-1 shadow-interface"
+              >
+                <DropdownMenuItem as-child @select="saveAs()">
+                  <Button
+                    variant="secondary"
+                    size="lg"
+                    class="w-full justify-start font-normal"
+                  >
+                    {{ t('builderToolbar.saveAs') }}
+                  </Button>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenuPortal>
+          </DropdownMenuRoot>
+        </ButtonGroup>
+        <Button
+          v-else
+          size="lg"
+          class="w-full"
+          :class="activeSaveClasses"
+          data-testid="builder-save-as-button"
+          @click="saveAs()"
+        >
+          {{ t('builderToolbar.saveAs') }}
         </Button>
-        <DropdownMenuRoot>
-          <DropdownMenuTrigger as-child>
-            <Button
-              size="lg"
-              :aria-label="t('builderToolbar.saveAs')"
-              data-save-chevron
-              class="w-6 rounded-l-none border-l border-border-default px-0"
-            >
-              <i
-                class="icon-[lucide--chevron-down] size-4"
-                aria-hidden="true"
-              />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuPortal>
-            <DropdownMenuContent
-              align="end"
-              :side-offset="4"
-              class="z-1001 min-w-36 rounded-lg border border-border-subtle bg-base-background p-1 shadow-interface"
-            >
-              <DropdownMenuItem as-child @select="saveAs()">
-                <Button
-                  variant="secondary"
-                  size="lg"
-                  class="w-full justify-start font-normal"
-                >
-                  {{ t('builderToolbar.saveAs') }}
-                </Button>
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenuPortal>
-        </DropdownMenuRoot>
-      </ButtonGroup>
-      <Button v-else size="lg" :class="activeSaveClasses" @click="saveAs()">
-        {{ t('builderToolbar.saveAs') }}
-      </Button>
+      </div>
     </nav>
   </div>
 </template>
@@ -113,8 +141,6 @@ import { useAppMode } from '@/composables/useAppMode'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useAppModeStore } from '@/stores/appModeStore'
 import { useDialogStore } from '@/stores/dialogStore'
-import { cn } from '@/utils/tailwindUtil'
-
 import BuilderOpensAsPopover from './BuilderOpensAsPopover.vue'
 import { setWorkflowDefaultView } from './builderViewOptions'
 import ConnectOutputPopover from './ConnectOutputPopover.vue'
diff --git a/src/components/builder/ConnectOutputPopover.vue b/src/components/builder/ConnectOutputPopover.vue
index 914596bc59..e9be368388 100644
--- a/src/components/builder/ConnectOutputPopover.vue
+++ b/src/components/builder/ConnectOutputPopover.vue
@@ -8,6 +8,7 @@
       align="end"
       :side-offset="18"
       :collision-padding="10"
+      data-testid="builder-connect-output-popover"
       class="data-[state=open]:data-[side=bottom]:animate-slideUpAndFade z-1001 w-80 rounded-xl border border-border-default bg-base-background shadow-interface will-change-[transform,opacity]"
     >
       <div class="flex h-12 items-center justify-between px-4">
@@ -46,7 +47,12 @@
             </Button>
           </PopoverClose>
           <PopoverClose as-child>
-            <Button variant="secondary" size="md" @click="emit('switch')">
+            <Button
+              variant="secondary"
+              size="md"
+              data-testid="builder-connect-output-switch"
+              @click="emit('switch')"
+            >
               {{ t('builderToolbar.switchToOutputs') }}
             </Button>
           </PopoverClose>
diff --git a/src/components/builder/EmptyWorkflowDialogContent.vue b/src/components/builder/EmptyWorkflowDialogContent.vue
index e790478b30..fadda9fde3 100644
--- a/src/components/builder/EmptyWorkflowDialogContent.vue
+++ b/src/components/builder/EmptyWorkflowDialogContent.vue
@@ -1,5 +1,8 @@
 <template>
-  <BuilderDialog :show-close="false">
+  <BuilderDialog
+    data-testid="builder-empty-workflow-dialog"
+    :show-close="false"
+  >
     <template #title>
       {{ $t('builderToolbar.emptyWorkflowTitle') }}
     </template>
@@ -17,11 +20,17 @@
       <Button
         variant="muted-textonly"
         size="lg"
+        data-testid="builder-empty-workflow-back"
         @click="$emit('backToWorkflow')"
       >
         {{ $t('linearMode.backToWorkflow') }}
       </Button>
-      <Button variant="secondary" size="lg" @click="$emit('loadTemplate')">
+      <Button
+        variant="secondary"
+        size="lg"
+        data-testid="builder-empty-workflow-load-template"
+        @click="$emit('loadTemplate')"
+      >
         {{ $t('linearMode.loadTemplate') }}
       </Button>
     </template>
diff --git a/src/components/builder/VueNodeSwitchPopup.vue b/src/components/builder/VueNodeSwitchPopup.vue
index 0e2ff58c48..ccf177e53b 100644
--- a/src/components/builder/VueNodeSwitchPopup.vue
+++ b/src/components/builder/VueNodeSwitchPopup.vue
@@ -1,6 +1,7 @@
 <template>
   <NotificationPopup
     v-if="appModeStore.showVueNodeSwitchPopup"
+    data-testid="linear-vue-node-switch-popup"
     :title="$t('appBuilder.vueNodeSwitch.title')"
     show-close
     position="bottom-left"
@@ -15,6 +16,7 @@
         <input
           v-model="dontShowAgain"
           type="checkbox"
+          data-testid="linear-vue-node-switch-dont-show-again"
           class="accent-primary-background"
         />
         {{ $t('appBuilder.vueNodeSwitch.dontShowAgain') }}
@@ -25,6 +27,7 @@
       <Button
         variant="secondary"
         size="lg"
+        data-testid="linear-vue-node-switch-dismiss"
         class="font-normal"
         @click="dismiss"
       >
diff --git a/src/components/builder/builderViewOptions.test.ts b/src/components/builder/builderViewOptions.test.ts
index d866735d31..25a30b3720 100644
--- a/src/components/builder/builderViewOptions.test.ts
+++ b/src/components/builder/builderViewOptions.test.ts
@@ -49,10 +49,10 @@ describe('setWorkflowDefaultView', () => {
     expect(app.rootGraph.extra.linearMode).toBe(false)
   })
 
-  it('calls changeTracker.checkState', () => {
+  it('calls changeTracker.captureCanvasState', () => {
     const workflow = createMockLoadedWorkflow()
     setWorkflowDefaultView(workflow, true)
-    expect(workflow.changeTracker.checkState).toHaveBeenCalledOnce()
+    expect(workflow.changeTracker.captureCanvasState).toHaveBeenCalledOnce()
   })
 
   it('tracks telemetry with correct default_view', () => {
diff --git a/src/components/builder/builderViewOptions.ts b/src/components/builder/builderViewOptions.ts
index 13766c8e0f..dc06ae8530 100644
--- a/src/components/builder/builderViewOptions.ts
+++ b/src/components/builder/builderViewOptions.ts
@@ -9,7 +9,7 @@ export function setWorkflowDefaultView(
   workflow.initialMode = openAsApp ? 'app' : 'graph'
   const extra = (app.rootGraph.extra ??= {})
   extra.linearMode = openAsApp
-  workflow.changeTracker?.checkState()
+  workflow.changeTracker?.captureCanvasState()
   useTelemetry()?.trackDefaultViewSet({
     default_view: openAsApp ? 'app' : 'graph'
   })
diff --git a/src/components/builder/useAppModeWidgetResizing.test.ts b/src/components/builder/useAppModeWidgetResizing.test.ts
new file mode 100644
index 0000000000..6a5cd9015b
--- /dev/null
+++ b/src/components/builder/useAppModeWidgetResizing.test.ts
@@ -0,0 +1,210 @@
+import { describe, expect, it, vi } from 'vitest'
+import { effectScope } from 'vue'
+
+import type { NodeId } from '@/lib/litegraph/src/LGraphNode'
+import type { InputWidgetConfig } from '@/platform/workflow/management/stores/comfyWorkflow'
+
+import { useAppModeWidgetResizing } from './useAppModeWidgetResizing'
+
+function setHeight(el: HTMLElement, height: number) {
+  Object.defineProperty(el, 'offsetHeight', {
+    value: height,
+    configurable: true
+  })
+}
+
+function wrapWithTextarea(initialHeight = 100): {
+  wrapper: HTMLDivElement
+  textarea: HTMLTextAreaElement
+} {
+  const wrapper = document.createElement('div')
+  const textarea = document.createElement('textarea')
+  wrapper.appendChild(textarea)
+  document.body.appendChild(wrapper)
+  setHeight(textarea, initialHeight)
+  return { wrapper, textarea }
+}
+
+describe('useAppModeWidgetResizing', () => {
+  function setup() {
+    const onResize =
+      vi.fn<
+        (nodeId: NodeId, widgetName: string, config: InputWidgetConfig) => void
+      >()
+    const { onPointerDown } = useAppModeWidgetResizing(onResize)
+
+    function bind(wrapper: HTMLElement, nodeId: NodeId, widgetName: string) {
+      wrapper.addEventListener(
+        'pointerdown',
+        (e) => onPointerDown(nodeId, widgetName, e as PointerEvent),
+        { capture: true }
+      )
+    }
+
+    return { onResize, bind }
+  }
+
+  it('persists height when textarea is resized via drag', () => {
+    const { bind, onResize } = setup()
+    const { wrapper, textarea } = wrapWithTextarea()
+    bind(wrapper, 1 as NodeId, 'prompt')
+
+    textarea.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+    setHeight(textarea, 250)
+    window.dispatchEvent(new PointerEvent('pointerup'))
+
+    expect(onResize).toHaveBeenCalledWith(1, 'prompt', { height: 250 })
+  })
+
+  it('does not persist when no height change occurs (e.g. a click)', () => {
+    const { bind, onResize } = setup()
+    const { wrapper, textarea } = wrapWithTextarea()
+    bind(wrapper, 1 as NodeId, 'prompt')
+
+    textarea.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+    window.dispatchEvent(new PointerEvent('pointerup'))
+
+    expect(onResize).not.toHaveBeenCalled()
+  })
+
+  it('persists once per drag gesture; stray pointerup is a no-op', () => {
+    const { bind, onResize } = setup()
+    const { wrapper, textarea } = wrapWithTextarea()
+    bind(wrapper, 1 as NodeId, 'prompt')
+
+    textarea.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+    setHeight(textarea, 250)
+    window.dispatchEvent(new PointerEvent('pointerup'))
+    window.dispatchEvent(new PointerEvent('pointerup'))
+
+    expect(onResize).toHaveBeenCalledTimes(1)
+  })
+
+  it('ignores pointerdown on non-resizable targets (label, button, popover)', () => {
+    const { bind, onResize } = setup()
+    const wrapper = document.createElement('div')
+    const button = document.createElement('button')
+    wrapper.appendChild(button)
+    document.body.appendChild(wrapper)
+    bind(wrapper, 1 as NodeId, 'prompt')
+
+    button.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+    window.dispatchEvent(new PointerEvent('pointerup'))
+
+    expect(onResize).not.toHaveBeenCalled()
+  })
+
+  it('persists when target is a descendant of the drop-zone-indicator', () => {
+    const { bind, onResize } = setup()
+    const wrapper = document.createElement('div')
+    const indicator = document.createElement('div')
+    indicator.setAttribute('data-slot', 'drop-zone-indicator')
+    const inner = document.createElement('span')
+    indicator.appendChild(inner)
+    wrapper.appendChild(indicator)
+    document.body.appendChild(wrapper)
+    setHeight(indicator, 100)
+    bind(wrapper, 1 as NodeId, 'image')
+
+    inner.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+    setHeight(indicator, 250)
+    window.dispatchEvent(new PointerEvent('pointerup'))
+
+    expect(onResize).toHaveBeenCalledWith(1, 'image', { height: 250 })
+  })
+
+  it('drops a stale gesture when a new pointerdown starts before pointerup arrives', () => {
+    const { bind, onResize } = setup()
+    const first = wrapWithTextarea()
+    const second = wrapWithTextarea()
+    bind(first.wrapper, 1 as NodeId, 'prompt')
+    bind(second.wrapper, 2 as NodeId, 'other')
+
+    first.textarea.dispatchEvent(
+      new PointerEvent('pointerdown', { bubbles: true })
+    )
+    setHeight(first.textarea, 250)
+
+    second.textarea.dispatchEvent(
+      new PointerEvent('pointerdown', { bubbles: true })
+    )
+    setHeight(second.textarea, 300)
+    window.dispatchEvent(new PointerEvent('pointerup'))
+
+    expect(onResize).toHaveBeenCalledTimes(1)
+    expect(onResize).toHaveBeenCalledWith(2, 'other', { height: 300 })
+  })
+
+  it('treats pointercancel as the end of a gesture and persists the new height', () => {
+    const { bind, onResize } = setup()
+    const { wrapper, textarea } = wrapWithTextarea()
+    bind(wrapper, 1 as NodeId, 'prompt')
+
+    textarea.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+    setHeight(textarea, 250)
+    window.dispatchEvent(new PointerEvent('pointercancel'))
+
+    expect(onResize).toHaveBeenCalledWith(1, 'prompt', { height: 250 })
+  })
+
+  it('after pointercancel, a subsequent stray pointerup is a no-op', () => {
+    const { bind, onResize } = setup()
+    const { wrapper, textarea } = wrapWithTextarea()
+    bind(wrapper, 1 as NodeId, 'prompt')
+
+    textarea.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+    setHeight(textarea, 250)
+    window.dispatchEvent(new PointerEvent('pointercancel'))
+    setHeight(textarea, 400)
+    window.dispatchEvent(new PointerEvent('pointerup'))
+
+    expect(onResize).toHaveBeenCalledTimes(1)
+    expect(onResize).toHaveBeenCalledWith(1, 'prompt', { height: 250 })
+  })
+
+  it('removes global listeners when the owning scope is disposed mid-gesture', () => {
+    const onResize =
+      vi.fn<
+        (nodeId: NodeId, widgetName: string, config: InputWidgetConfig) => void
+      >()
+    const scope = effectScope()
+    const { onPointerDown } = scope.run(() =>
+      useAppModeWidgetResizing(onResize)
+    )!
+    const { wrapper, textarea } = wrapWithTextarea()
+    wrapper.addEventListener(
+      'pointerdown',
+      (e) => onPointerDown(1 as NodeId, 'prompt', e as PointerEvent),
+      { capture: true }
+    )
+
+    textarea.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+    setHeight(textarea, 250)
+    scope.stop()
+    window.dispatchEvent(new PointerEvent('pointerup'))
+    window.dispatchEvent(new PointerEvent('pointercancel'))
+
+    expect(onResize).not.toHaveBeenCalled()
+  })
+
+  it('does not match a resizable that is an ancestor of the wrapper', () => {
+    const { bind, onResize } = setup()
+    // An unrelated drop-zone-indicator outside the wrapper would otherwise be
+    // returned by target.closest(...) walking up the tree.
+    const outerIndicator = document.createElement('div')
+    outerIndicator.setAttribute('data-slot', 'drop-zone-indicator')
+    const wrapper = document.createElement('div')
+    const inner = document.createElement('span')
+    wrapper.appendChild(inner)
+    outerIndicator.appendChild(wrapper)
+    document.body.appendChild(outerIndicator)
+    setHeight(outerIndicator, 100)
+    bind(wrapper, 1 as NodeId, 'prompt')
+
+    inner.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+    setHeight(outerIndicator, 250)
+    window.dispatchEvent(new PointerEvent('pointerup'))
+
+    expect(onResize).not.toHaveBeenCalled()
+  })
+})
diff --git a/src/components/builder/useAppModeWidgetResizing.ts b/src/components/builder/useAppModeWidgetResizing.ts
new file mode 100644
index 0000000000..f95ee958fe
--- /dev/null
+++ b/src/components/builder/useAppModeWidgetResizing.ts
@@ -0,0 +1,55 @@
+import { onScopeDispose } from 'vue'
+
+import type { NodeId } from '@/lib/litegraph/src/LGraphNode'
+import type { InputWidgetConfig } from '@/platform/workflow/management/stores/comfyWorkflow'
+
+const RESIZABLE_SELECTOR = 'textarea, [data-slot="drop-zone-indicator"]'
+
+export function useAppModeWidgetResizing(
+  onResize: (
+    nodeId: NodeId,
+    widgetName: string,
+    config: InputWidgetConfig
+  ) => void
+) {
+  let pendingHandler: (() => void) | null = null
+
+  function clearPendingHandler() {
+    if (!pendingHandler) return
+    window.removeEventListener('pointerup', pendingHandler)
+    window.removeEventListener('pointercancel', pendingHandler)
+    pendingHandler = null
+  }
+
+  onScopeDispose(clearPendingHandler)
+
+  function onPointerDown(
+    nodeId: NodeId,
+    widgetName: string,
+    event: PointerEvent
+  ) {
+    const wrapper = event.currentTarget
+    const target = event.target
+    if (!(wrapper instanceof HTMLElement) || !(target instanceof HTMLElement))
+      return
+    const resizable = target.closest<HTMLElement>(RESIZABLE_SELECTOR)
+    if (!resizable || !wrapper.contains(resizable)) return
+
+    clearPendingHandler()
+
+    const startHeight = resizable.offsetHeight
+    const handler = () => {
+      window.removeEventListener('pointerup', handler)
+      window.removeEventListener('pointercancel', handler)
+      pendingHandler = null
+      const height = resizable.offsetHeight
+      if (height === startHeight) return
+      onResize(nodeId, widgetName, { height })
+    }
+    pendingHandler = handler
+    window.addEventListener('pointerup', handler)
+    window.addEventListener('pointercancel', handler)
+  }
+
+  return { onPointerDown }
+}
diff --git a/src/components/builder/useBuilderSave.test.ts b/src/components/builder/useBuilderSave.test.ts
index dcd784c348..10768573e2 100644
--- a/src/components/builder/useBuilderSave.test.ts
+++ b/src/components/builder/useBuilderSave.test.ts
@@ -6,6 +6,7 @@ import { useBuilderSave } from './useBuilderSave'
 const mockSetMode = vi.hoisted(() => vi.fn())
 const mockToastErrorHandler = vi.hoisted(() => vi.fn())
 const mockTrackEnterLinear = vi.hoisted(() => vi.fn())
+const mockTrackDefaultViewSet = vi.hoisted(() => vi.fn())
 const mockSaveWorkflow = vi.hoisted(() => vi.fn<() => Promise<void>>())
 const mockSaveWorkflowAs = vi.hoisted(() =>
   vi.fn<() => Promise<boolean | null>>()
@@ -13,7 +14,6 @@ const mockSaveWorkflowAs = vi.hoisted(() =>
 const mockShowLayoutDialog = vi.hoisted(() => vi.fn())
 const mockShowConfirmDialog = vi.hoisted(() => vi.fn())
 const mockCloseDialog = vi.hoisted(() => vi.fn())
-const mockSetWorkflowDefaultView = vi.hoisted(() => vi.fn())
 const mockExitBuilder = vi.hoisted(() => vi.fn())
 
 const mockActiveWorkflow = ref<{
@@ -30,7 +30,10 @@ vi.mock('@/composables/useErrorHandling', () => ({
 }))
 
 vi.mock('@/platform/telemetry', () => ({
-  useTelemetry: () => ({ trackEnterLinear: mockTrackEnterLinear })
+  useTelemetry: () => ({
+    trackEnterLinear: mockTrackEnterLinear,
+    trackDefaultViewSet: mockTrackDefaultViewSet
+  })
 }))
 
 vi.mock('@/platform/workflow/core/services/workflowService', () => ({
@@ -60,10 +63,6 @@ vi.mock('@/stores/dialogStore', () => ({
   useDialogStore: () => ({ closeDialog: mockCloseDialog })
 }))
 
-vi.mock('./builderViewOptions', () => ({
-  setWorkflowDefaultView: mockSetWorkflowDefaultView
-}))
-
 vi.mock('@/components/dialog/confirm/confirmDialog', () => ({
   showConfirmDialog: mockShowConfirmDialog
 }))
@@ -190,7 +189,7 @@ describe('useBuilderSave', () => {
       }
     }
 
-    it('onSave calls saveWorkflowAs then setWorkflowDefaultView on success', async () => {
+    it('onSave calls saveWorkflowAs with isApp and tracks telemetry', async () => {
       mockSaveWorkflowAs.mockResolvedValueOnce(true)
       const { onSave } = getSaveDialogProps()
 
@@ -199,35 +198,40 @@ describe('useBuilderSave', () => {
       expect(mockSaveWorkflowAs).toHaveBeenCalledWith(
         mockActiveWorkflow.value,
         {
-          filename: 'new-name'
+          filename: 'new-name',
+          isApp: true
         }
       )
-      expect(mockSetWorkflowDefaultView).toHaveBeenCalledWith(
-        mockActiveWorkflow.value,
-        true
-      )
+      expect(mockTrackDefaultViewSet).toHaveBeenCalledWith({
+        default_view: 'app'
+      })
     })
 
-    it('onSave uses fresh activeWorkflow reference for setWorkflowDefaultView', async () => {
-      const newWorkflow = { filename: 'new-name', initialMode: 'app' }
-      mockSaveWorkflowAs.mockImplementationOnce(async () => {
-        mockActiveWorkflow.value = newWorkflow
-        return true
-      })
+    it('onSave passes isApp: false when saving as graph', async () => {
+      mockSaveWorkflowAs.mockResolvedValueOnce(true)
       const { onSave } = getSaveDialogProps()
 
-      await onSave('new-name', true)
+      await onSave('new-name', false)
 
-      expect(mockSetWorkflowDefaultView).toHaveBeenCalledWith(newWorkflow, true)
+      expect(mockSaveWorkflowAs).toHaveBeenCalledWith(
+        mockActiveWorkflow.value,
+        {
+          filename: 'new-name',
+          isApp: false
+        }
+      )
+      expect(mockTrackDefaultViewSet).toHaveBeenCalledWith({
+        default_view: 'graph'
+      })
     })
 
-    it('onSave does not mutate or close when saveWorkflowAs returns falsy', async () => {
+    it('onSave does not track or close when saveWorkflowAs returns falsy', async () => {
       mockSaveWorkflowAs.mockResolvedValueOnce(null)
       const { onSave } = getSaveDialogProps()
 
       await onSave('new-name', false)
 
-      expect(mockSetWorkflowDefaultView).not.toHaveBeenCalled()
+      expect(mockTrackDefaultViewSet).not.toHaveBeenCalled()
       expect(mockCloseDialog).not.toHaveBeenCalled()
     })
 
diff --git a/src/components/builder/useBuilderSave.ts b/src/components/builder/useBuilderSave.ts
index 1d5cc05214..d3ee33e32d 100644
--- a/src/components/builder/useBuilderSave.ts
+++ b/src/components/builder/useBuilderSave.ts
@@ -10,7 +10,6 @@ import { useAppModeStore } from '@/stores/appModeStore'
 import { useDialogStore } from '@/stores/dialogStore'
 import { ref } from 'vue'
 
-import { setWorkflowDefaultView } from './builderViewOptions'
 import BuilderSaveDialogContent from './BuilderSaveDialogContent.vue'
 
 const SAVE_DIALOG_KEY = 'builder-save'
@@ -71,13 +70,14 @@ export function useBuilderSave() {
       if (!workflow) return
 
       const saved = await workflowService.saveWorkflowAs(workflow, {
-        filename
+        filename,
+        isApp: openAsApp
       })
 
       if (!saved) return
-      const activeWorkflow = workflowStore.activeWorkflow
-      if (!activeWorkflow) return
-      setWorkflowDefaultView(activeWorkflow, openAsApp)
+      useTelemetry()?.trackDefaultViewSet({
+        default_view: openAsApp ? 'app' : 'graph'
+      })
       closeDialog(SAVE_DIALOG_KEY)
       showSuccessDialog(openAsApp ? 'app' : 'graph')
     } catch (e) {
diff --git a/src/components/button/MoreButton.vue b/src/components/button/MoreButton.vue
index 0ffea76ce5..d29debf15d 100644
--- a/src/components/button/MoreButton.vue
+++ b/src/components/button/MoreButton.vue
@@ -51,7 +51,10 @@
         }
       "
     >
-      <div class="flex min-w-40 flex-col gap-2 p-2">
+      <div
+        class="flex min-w-40 flex-col gap-2 p-2"
+        data-testid="more-menu-content"
+      >
         <slot :close="hide" />
       </div>
     </Popover>
diff --git a/src/components/card/Card.stories.ts b/src/components/card/Card.stories.ts
index 5ab01f4232..6c2ec30e87 100644
--- a/src/components/card/Card.stories.ts
+++ b/src/components/card/Card.stories.ts
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { ref } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
-import SquareChip from '../chip/SquareChip.vue'
+import Tag from '@/components/chip/Tag.vue'
 import CardBottom from './CardBottom.vue'
 import CardContainer from './CardContainer.vue'
 import CardDescription from './CardDescription.vue'
@@ -174,7 +174,7 @@ const createCardTemplate = (args: CardStoryArgs) => ({
     CardTitle,
     CardDescription,
     Button,
-    SquareChip
+    Tag
   },
   setup() {
     const favorited = ref(false)
@@ -218,7 +218,7 @@ const createCardTemplate = (args: CardStoryArgs) => ({
             </template>
             
             <template v-if="args.showTopLeft" #top-left>
-              <SquareChip label="Featured" />
+              <Tag label="Featured" />
             </template>
             
             <template v-if="args.showTopRight" #top-right>
@@ -238,17 +238,17 @@ const createCardTemplate = (args: CardStoryArgs) => ({
             </template>
             
             <template v-if="args.showBottomLeft" #bottom-left>
-              <SquareChip label="New" />
+              <Tag label="New" />
             </template>
             
             <template v-if="args.showBottomRight" #bottom-right>
-              <SquareChip v-if="args.showFileType" :label="args.fileType" />
-              <SquareChip v-if="args.showFileSize" :label="args.fileSize" />
-              <SquareChip v-for="tag in args.tags" :key="tag" :label="tag">
+              <Tag v-if="args.showFileType" :label="args.fileType" />
+              <Tag v-if="args.showFileSize" :label="args.fileSize" />
+              <Tag v-for="tag in args.tags" :key="tag" :label="tag">
                 <template v-if="tag === 'LoRA'" #icon>
                   <i class="icon-[lucide--folder] size-3" />
                 </template>
-              </SquareChip>
+              </Tag>
             </template>
           </CardTop>
         </template>
diff --git a/src/components/chip/SquareChip.stories.ts b/src/components/chip/SquareChip.stories.ts
deleted file mode 100644
index 6ae12b1e93..0000000000
--- a/src/components/chip/SquareChip.stories.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-import SquareChip from './SquareChip.vue'
-
-const meta: Meta<typeof SquareChip> = {
-  title: 'Components/SquareChip',
-  component: SquareChip,
-  tags: ['autodocs'],
-  argTypes: {
-    label: {
-      control: 'text',
-      defaultValue: 'Tag'
-    }
-  }
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const TagList: Story = {
-  render: () => ({
-    components: { SquareChip },
-    template: `
-      <div class="flex flex-wrap gap-2">
-        <SquareChip label="JavaScript" />
-        <SquareChip label="TypeScript" />
-        <SquareChip label="Vue.js" />
-        <SquareChip label="React" />
-        <SquareChip label="Node.js" />
-        <SquareChip label="Python" />
-        <SquareChip label="Docker" />
-        <SquareChip label="Kubernetes" />
-      </div>
-    `
-  })
-}
diff --git a/src/components/chip/SquareChip.vue b/src/components/chip/SquareChip.vue
deleted file mode 100644
index e9f4979226..0000000000
--- a/src/components/chip/SquareChip.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <div :class="chipClasses">
-    <slot name="icon"></slot>
-    <span>{{ label }}</span>
-  </div>
-</template>
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import { cn } from '@/utils/tailwindUtil'
-
-const { label, variant = 'dark' } = defineProps<{
-  label: string
-  variant?: 'dark' | 'light' | 'gray'
-}>()
-
-const baseClasses =
-  'inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold'
-
-const variantStyles = {
-  dark: 'bg-zinc-500/40 text-white/90',
-  light: cn('bg-base-background/50 text-base-foreground backdrop-blur-[2px]'),
-  gray: cn(
-    'bg-modal-card-tag-background text-base-foreground backdrop-blur-[2px]'
-  )
-}
-
-const chipClasses = computed(() => {
-  return cn(baseClasses, variantStyles[variant])
-})
-</script>
diff --git a/src/components/chip/Tag.stories.ts b/src/components/chip/Tag.stories.ts
new file mode 100644
index 0000000000..0cf9d9e731
--- /dev/null
+++ b/src/components/chip/Tag.stories.ts
@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import Tag from './Tag.vue'
+
+const meta: Meta<typeof Tag> = {
+  title: 'Components/Tag',
+  component: Tag,
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: 'text' },
+    shape: {
+      control: 'select',
+      options: ['square', 'rounded', 'overlay']
+    },
+    state: {
+      control: 'select',
+      options: ['default', 'unselected', 'selected']
+    },
+    removable: { control: 'boolean' }
+  },
+  args: {
+    label: 'Tag',
+    shape: 'square',
+    state: 'default',
+    removable: false
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const Rounded: Story = {
+  args: {
+    label: 'Tag',
+    shape: 'rounded'
+  }
+}
+
+export const Unselected: Story = {
+  args: {
+    label: 'Tag',
+    state: 'unselected'
+  }
+}
+
+export const Removable: Story = {
+  args: {
+    label: 'Tag',
+    removable: true
+  }
+}
+
+export const AllStates: Story = {
+  render: () => ({
+    components: { Tag },
+    template: `
+      <div class="flex flex-col gap-4">
+        <div>
+          <p class="mb-2 text-xs text-muted-foreground">Square</p>
+          <div class="flex items-center gap-2">
+            <Tag label="Default" />
+            <Tag label="Unselected" state="unselected" />
+            <Tag label="Removable" removable />
+          </div>
+        </div>
+        <div>
+          <p class="mb-2 text-xs text-muted-foreground">Rounded</p>
+          <div class="flex items-center gap-2">
+            <Tag label="Default" shape="rounded" />
+            <Tag label="Unselected" shape="rounded" state="unselected" />
+            <Tag label="Removable" shape="rounded" removable />
+          </div>
+        </div>
+        <div class="bg-zinc-800 p-2 rounded">
+          <p class="mb-2 text-xs text-muted-foreground">Overlay (on images)</p>
+          <div class="flex items-center gap-2">
+            <Tag label="png" shape="overlay" />
+            <Tag label="1.2 MB" shape="overlay" />
+          </div>
+        </div>
+      </div>
+    `
+  })
+}
+
+export const TagList: Story = {
+  render: () => ({
+    components: { Tag },
+    template: `
+      <div class="flex flex-wrap gap-2">
+        <Tag label="JavaScript" />
+        <Tag label="TypeScript" />
+        <Tag label="Vue.js" />
+        <Tag label="React" />
+        <Tag label="Node.js" />
+        <Tag label="Python" />
+        <Tag label="Docker" />
+        <Tag label="Kubernetes" />
+      </div>
+    `
+  })
+}
diff --git a/src/components/chip/Tag.test.ts b/src/components/chip/Tag.test.ts
new file mode 100644
index 0000000000..425c0931da
--- /dev/null
+++ b/src/components/chip/Tag.test.ts
@@ -0,0 +1,66 @@
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import Tag from './Tag.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: { g: { remove: 'Remove' } } }
+})
+
+function renderTag(
+  props: {
+    label: string
+    shape?: 'square' | 'rounded'
+    removable?: boolean
+    onRemove?: (...args: unknown[]) => void
+  },
+  options?: { slots?: Record<string, string> }
+) {
+  return render(Tag, {
+    props,
+    global: { plugins: [i18n] },
+    ...options
+  })
+}
+
+describe('Tag', () => {
+  it('renders label text', () => {
+    renderTag({ label: 'JavaScript' })
+    expect(screen.getByText('JavaScript')).toBeInTheDocument()
+  })
+
+  it('does not show remove button by default', () => {
+    renderTag({ label: 'Test' })
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
+  })
+
+  it('shows remove button when removable', () => {
+    renderTag({ label: 'Test', removable: true })
+    expect(screen.getByRole('button', { name: 'Remove' })).toBeInTheDocument()
+  })
+
+  it('emits remove event when remove button is clicked', async () => {
+    const user = userEvent.setup()
+    const onRemove = vi.fn()
+    renderTag({ label: 'Test', removable: true, onRemove })
+
+    await user.click(screen.getByRole('button', { name: 'Remove' }))
+    expect(onRemove).toHaveBeenCalledOnce()
+  })
+
+  it('renders icon slot content', () => {
+    renderTag(
+      { label: 'LoRA' },
+      {
+        slots: {
+          icon: '<i data-testid="tag-icon" class="icon-[lucide--folder]" />'
+        }
+      }
+    )
+    expect(screen.getByTestId('tag-icon')).toBeInTheDocument()
+  })
+})
diff --git a/src/components/chip/Tag.vue b/src/components/chip/Tag.vue
new file mode 100644
index 0000000000..65c73a087e
--- /dev/null
+++ b/src/components/chip/Tag.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+
+import { tagVariants } from './tag.variants'
+import type { TagVariants } from './tag.variants'
+
+const {
+  label,
+  shape = 'square',
+  state = 'default',
+  removable = false,
+  class: className
+} = defineProps<{
+  label: string
+  shape?: TagVariants['shape']
+  state?: TagVariants['state']
+  removable?: boolean
+  class?: string
+}>()
+
+const emit = defineEmits<{
+  remove: [event: Event]
+}>()
+
+const tagClass = computed(() =>
+  cn(tagVariants({ shape, state, removable }), className)
+)
+</script>
+
+<template>
+  <span :class="tagClass">
+    <slot name="icon" />
+    <span class="truncate">{{ label }}</span>
+    <button
+      v-if="removable"
+      type="button"
+      :aria-label="$t('g.remove')"
+      class="inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full p-0.5 hover:bg-white/10"
+      @click.stop="emit('remove', $event)"
+    >
+      <i class="icon-[lucide--x] size-3" aria-hidden="true" />
+    </button>
+  </span>
+</template>
diff --git a/src/components/chip/tag.variants.ts b/src/components/chip/tag.variants.ts
new file mode 100644
index 0000000000..6f1a4b05c4
--- /dev/null
+++ b/src/components/chip/tag.variants.ts
@@ -0,0 +1,29 @@
+import type { VariantProps } from 'cva'
+import { cva } from 'cva'
+
+export const tagVariants = cva({
+  base: 'inline-flex h-6 shrink-0 items-center justify-center gap-1 text-xs',
+  variants: {
+    shape: {
+      square: 'rounded-sm bg-modal-card-tag-background',
+      rounded: 'rounded-full bg-secondary-background',
+      overlay: 'rounded-sm bg-zinc-500/40 text-white/90'
+    },
+    state: {
+      default: 'text-modal-card-tag-foreground',
+      unselected: 'text-muted-foreground opacity-70',
+      selected: 'text-modal-card-tag-foreground'
+    },
+    removable: {
+      true: 'py-1 pr-1 pl-2',
+      false: 'px-2 py-1'
+    }
+  },
+  defaultVariants: {
+    shape: 'square',
+    state: 'default',
+    removable: false
+  }
+})
+
+export type TagVariants = VariantProps<typeof tagVariants>
diff --git a/src/components/common/ApiNodesList.vue b/src/components/common/ApiNodesList.vue
new file mode 100644
index 0000000000..b16ea2ceff
--- /dev/null
+++ b/src/components/common/ApiNodesList.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="flex h-full flex-col gap-3">
+    <div class="flex text-xs">
+      <div>{{ t('apiNodesCostBreakdown.title') }}</div>
+    </div>
+    <ScrollPanel class="h-0 grow">
+      <div class="flex flex-col gap-2">
+        <div
+          v-for="nodeName in nodeNames"
+          :key="nodeName"
+          class="flex items-center justify-between rounded-md bg-(--p-content-border-color) px-3 py-2"
+        >
+          <div class="flex items-center gap-2">
+            <span class="text-base/tight font-medium">{{ nodeName }}</span>
+          </div>
+        </div>
+      </div>
+    </ScrollPanel>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ScrollPanel from 'primevue/scrollpanel'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const { nodeNames } = defineProps<{ nodeNames: string[] }>()
+</script>
diff --git a/src/components/common/Badge.test.ts b/src/components/common/Badge.test.ts
index 56636400eb..86507cce53 100644
--- a/src/components/common/Badge.test.ts
+++ b/src/components/common/Badge.test.ts
@@ -1,44 +1,44 @@
-import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 
+import { render, screen } from '@testing-library/vue'
+
 import Badge from './Badge.vue'
 import { badgeVariants } from './badge.variants'
 
 describe('Badge', () => {
   it('renders label text', () => {
-    const wrapper = mount(Badge, { props: { label: 'NEW' } })
-    expect(wrapper.text()).toBe('NEW')
+    render(Badge, { props: { label: 'NEW' } })
+    expect(screen.getByText('NEW')).toBeInTheDocument()
   })
 
   it('renders numeric label', () => {
-    const wrapper = mount(Badge, { props: { label: 5 } })
-    expect(wrapper.text()).toBe('5')
+    render(Badge, { props: { label: 5 } })
+    expect(screen.getByText('5')).toBeInTheDocument()
   })
 
   it('defaults to dot variant when no label is provided', () => {
-    const wrapper = mount(Badge)
-    expect(wrapper.classes()).toContain('size-2')
+    const { container } = render(Badge)
+    // eslint-disable-next-line testing-library/no-node-access -- dot badge has no text/role to query
+    expect(container.firstElementChild).toHaveClass('size-2')
   })
 
   it('defaults to label variant when label is provided', () => {
-    const wrapper = mount(Badge, { props: { label: 'NEW' } })
-    expect(wrapper.classes()).toContain('font-semibold')
-    expect(wrapper.classes()).toContain('uppercase')
+    render(Badge, { props: { label: 'NEW' } })
+    const el = screen.getByText('NEW')
+    expect(el).toHaveClass('font-semibold')
+    expect(el).toHaveClass('uppercase')
   })
 
   it('applies circle variant', () => {
-    const wrapper = mount(Badge, {
-      props: { label: '3', variant: 'circle' }
-    })
-    expect(wrapper.classes()).toContain('size-3.5')
+    render(Badge, { props: { label: '3', variant: 'circle' } })
+    expect(screen.getByText('3')).toHaveClass('size-3.5')
   })
 
   it('merges custom class via cn()', () => {
-    const wrapper = mount(Badge, {
-      props: { label: 'Test', class: 'ml-2' }
-    })
-    expect(wrapper.classes()).toContain('ml-2')
-    expect(wrapper.classes()).toContain('rounded-full')
+    render(Badge, { props: { label: 'Test', class: 'ml-2' } })
+    const el = screen.getByText('Test')
+    expect(el).toHaveClass('ml-2')
+    expect(el).toHaveClass('rounded-full')
   })
 
   describe('twMerge preserves color alongside text-3xs font size', () => {
@@ -58,12 +58,10 @@ describe('Badge', () => {
     )
 
     it('cn() does not clobber text-white when merging with text-3xs', () => {
-      const wrapper = mount(Badge, {
-        props: { label: 'Test', severity: 'danger' }
-      })
-      const classList = wrapper.classes()
-      expect(classList).toContain('text-white')
-      expect(classList).toContain('text-3xs')
+      render(Badge, { props: { label: 'Test', severity: 'danger' } })
+      const el = screen.getByText('Test')
+      expect(el).toHaveClass('text-white')
+      expect(el).toHaveClass('text-3xs')
     })
   })
 })
diff --git a/src/components/common/LoadingOverlay.vue b/src/components/common/LoadingOverlay.vue
index ccc34908e1..9253fee0b8 100644
--- a/src/components/common/LoadingOverlay.vue
+++ b/src/components/common/LoadingOverlay.vue
@@ -3,6 +3,7 @@
     <div
       v-if="loading"
       class="absolute inset-0 z-50 flex items-center justify-center bg-backdrop/50"
+      data-testid="loading-overlay"
     >
       <div class="flex flex-col items-center">
         <div class="grid place-items-center">
diff --git a/src/components/common/MarqueeLine.test.ts b/src/components/common/MarqueeLine.test.ts
index 210f388c1a..a6cf3e2c94 100644
--- a/src/components/common/MarqueeLine.test.ts
+++ b/src/components/common/MarqueeLine.test.ts
@@ -1,22 +1,22 @@
-import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 
+import { render, screen } from '@testing-library/vue'
+
 import MarqueeLine from './MarqueeLine.vue'
 
 describe(MarqueeLine, () => {
   it('renders slot content', () => {
-    const wrapper = mount(MarqueeLine, {
+    render(MarqueeLine, {
       slots: { default: 'Hello World' }
     })
-    expect(wrapper.text()).toBe('Hello World')
+    expect(screen.getByText('Hello World')).toBeInTheDocument()
   })
 
   it('renders content inside a span within the container', () => {
-    const wrapper = mount(MarqueeLine, {
+    render(MarqueeLine, {
       slots: { default: 'Test Text' }
     })
-    const span = wrapper.find('span')
-    expect(span.exists()).toBe(true)
-    expect(span.text()).toBe('Test Text')
+    const el = screen.getByText('Test Text')
+    expect(el.tagName).toBe('SPAN')
   })
 })
diff --git a/src/components/common/NotificationPopup.test.ts b/src/components/common/NotificationPopup.test.ts
index e494410808..fe152d496d 100644
--- a/src/components/common/NotificationPopup.test.ts
+++ b/src/components/common/NotificationPopup.test.ts
@@ -1,6 +1,6 @@
-import { mount } from '@vue/test-utils'
-import type { ComponentProps } from 'vue-component-type-helpers'
-import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import NotificationPopup from './NotificationPopup.vue'
@@ -13,13 +13,11 @@ const i18n = createI18n({
   }
 })
 
-function mountPopup(
-  props: ComponentProps<typeof NotificationPopup> = {
-    title: 'Test'
-  },
+function renderPopup(
+  props: { title: string; [key: string]: unknown } = { title: 'Test' },
   slots: Record<string, string> = {}
 ) {
-  return mount(NotificationPopup, {
+  return render(NotificationPopup, {
     global: { plugins: [i18n] },
     props,
     slots
@@ -28,51 +26,58 @@ function mountPopup(
 
 describe('NotificationPopup', () => {
   it('renders title', () => {
-    const wrapper = mountPopup({ title: 'Hello World' })
-    expect(wrapper.text()).toContain('Hello World')
+    renderPopup({ title: 'Hello World' })
+    expect(screen.getByRole('status')).toHaveTextContent('Hello World')
   })
 
   it('has role="status" for accessibility', () => {
-    const wrapper = mountPopup()
-    expect(wrapper.find('[role="status"]').exists()).toBe(true)
+    renderPopup()
+    expect(screen.getByRole('status')).toBeInTheDocument()
   })
 
   it('renders subtitle when provided', () => {
-    const wrapper = mountPopup({ title: 'T', subtitle: 'v1.2.3' })
-    expect(wrapper.text()).toContain('v1.2.3')
+    renderPopup({ title: 'T', subtitle: 'v1.2.3' })
+    expect(screen.getByRole('status')).toHaveTextContent('v1.2.3')
   })
 
   it('renders icon when provided', () => {
-    const wrapper = mountPopup({
+    const { container } = renderPopup({
       title: 'T',
       icon: 'icon-[lucide--rocket]'
     })
-    expect(wrapper.find('i.icon-\\[lucide--rocket\\]').exists()).toBe(true)
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const icon = container.querySelector('i.icon-\\[lucide--rocket\\]')
+    expect(icon).toBeInTheDocument()
   })
 
   it('emits close when close button clicked', async () => {
-    const wrapper = mountPopup({ title: 'T', showClose: true })
-    await wrapper.find('[aria-label="Close"]').trigger('click')
-    expect(wrapper.emitted('close')).toHaveLength(1)
+    const user = userEvent.setup()
+    const closeSpy = vi.fn()
+    renderPopup({ title: 'T', showClose: true, onClose: closeSpy })
+    await user.click(screen.getByRole('button', { name: 'Close' }))
+    expect(closeSpy).toHaveBeenCalledOnce()
   })
 
   it('renders default slot content', () => {
-    const wrapper = mountPopup({ title: 'T' }, { default: 'Body text here' })
-    expect(wrapper.text()).toContain('Body text here')
+    renderPopup({ title: 'T' }, { default: 'Body text here' })
+    expect(screen.getByRole('status')).toHaveTextContent('Body text here')
   })
 
   it('renders footer slots', () => {
-    const wrapper = mountPopup(
+    renderPopup(
       { title: 'T' },
       { 'footer-start': 'Left side', 'footer-end': 'Right side' }
     )
-    expect(wrapper.text()).toContain('Left side')
-    expect(wrapper.text()).toContain('Right side')
+    const status = screen.getByRole('status')
+    expect(status).toHaveTextContent('Left side')
+    expect(status).toHaveTextContent('Right side')
   })
 
   it('positions bottom-right when specified', () => {
-    const wrapper = mountPopup({ title: 'T', position: 'bottom-right' })
-    const root = wrapper.find('[role="status"]')
-    expect(root.attributes('data-position')).toBe('bottom-right')
+    renderPopup({ title: 'T', position: 'bottom-right' })
+    expect(screen.getByRole('status')).toHaveAttribute(
+      'data-position',
+      'bottom-right'
+    )
   })
 })
diff --git a/src/components/common/TextTicker.test.ts b/src/components/common/TextTicker.test.ts
index 0d94b84b40..cb7141656c 100644
--- a/src/components/common/TextTicker.test.ts
+++ b/src/components/common/TextTicker.test.ts
@@ -1,4 +1,5 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { nextTick } from 'vue'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -13,7 +14,8 @@ function mockScrollWidth(el: HTMLElement, scrollWidth: number) {
 
 describe(TextTicker, () => {
   let rafCallbacks: ((time: number) => void)[]
-  let wrapper: ReturnType<typeof mount>
+  let user: ReturnType<typeof userEvent.setup>
+  let cleanup: (() => void) | undefined
 
   beforeEach(() => {
     vi.useFakeTimers()
@@ -23,32 +25,35 @@ describe(TextTicker, () => {
       return rafCallbacks.length
     })
     vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => {})
+    user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime })
   })
 
   afterEach(() => {
-    wrapper?.unmount()
+    cleanup?.()
     vi.useRealTimers()
     vi.restoreAllMocks()
   })
 
   it('renders slot content', () => {
-    wrapper = mount(TextTicker, {
+    const { unmount } = render(TextTicker, {
       slots: { default: 'Hello World' }
     })
-    expect(wrapper.text()).toBe('Hello World')
+    cleanup = unmount
+    expect(screen.getByText('Hello World')).toBeInTheDocument()
   })
 
   it('scrolls on hover after delay', async () => {
-    wrapper = mount(TextTicker, {
+    const { unmount } = render(TextTicker, {
       slots: { default: 'Very long text that overflows' },
       props: { speed: 100 }
     })
+    cleanup = unmount
 
-    const el = wrapper.element as HTMLElement
+    const el = screen.getByText('Very long text that overflows')
     mockScrollWidth(el, 300)
 
     await nextTick()
-    await wrapper.trigger('mouseenter')
+    await user.hover(el)
     await nextTick()
 
     expect(rafCallbacks.length).toBe(0)
@@ -62,19 +67,21 @@ describe(TextTicker, () => {
   })
 
   it('cancels delayed scroll on mouse leave before delay elapses', async () => {
-    wrapper = mount(TextTicker, {
+    const { unmount } = render(TextTicker, {
       slots: { default: 'Very long text that overflows' },
       props: { speed: 100 }
     })
+    cleanup = unmount
 
-    mockScrollWidth(wrapper.element as HTMLElement, 300)
+    const el = screen.getByText('Very long text that overflows')
+    mockScrollWidth(el, 300)
 
     await nextTick()
-    await wrapper.trigger('mouseenter')
+    await user.hover(el)
     await nextTick()
 
     vi.advanceTimersByTime(200)
-    await wrapper.trigger('mouseleave')
+    await user.unhover(el)
     await nextTick()
 
     vi.advanceTimersByTime(350)
@@ -83,16 +90,17 @@ describe(TextTicker, () => {
   })
 
   it('resets scroll position on mouse leave', async () => {
-    wrapper = mount(TextTicker, {
+    const { unmount } = render(TextTicker, {
       slots: { default: 'Very long text that overflows' },
       props: { speed: 100 }
     })
+    cleanup = unmount
 
-    const el = wrapper.element as HTMLElement
+    const el = screen.getByText('Very long text that overflows')
     mockScrollWidth(el, 300)
 
     await nextTick()
-    await wrapper.trigger('mouseenter')
+    await user.hover(el)
     await nextTick()
     vi.advanceTimersByTime(350)
     await nextTick()
@@ -100,19 +108,22 @@ describe(TextTicker, () => {
     rafCallbacks[0](performance.now() + 500)
     expect(el.scrollLeft).toBeGreaterThan(0)
 
-    await wrapper.trigger('mouseleave')
+    await user.unhover(el)
     await nextTick()
 
     expect(el.scrollLeft).toBe(0)
   })
 
   it('does not scroll when content fits', async () => {
-    wrapper = mount(TextTicker, {
+    const { unmount } = render(TextTicker, {
       slots: { default: 'Short' }
     })
+    cleanup = unmount
+
+    const el = screen.getByText('Short')
 
     await nextTick()
-    await wrapper.trigger('mouseenter')
+    await user.hover(el)
     await nextTick()
     vi.advanceTimersByTime(350)
     await nextTick()
diff --git a/src/components/common/TextTickerMultiLine.test.ts b/src/components/common/TextTickerMultiLine.test.ts
index 9680472965..cfdcc29ff3 100644
--- a/src/components/common/TextTickerMultiLine.test.ts
+++ b/src/components/common/TextTickerMultiLine.test.ts
@@ -1,8 +1,7 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
 import { nextTick } from 'vue'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 
-import MarqueeLine from './MarqueeLine.vue'
 import TextTickerMultiLine from './TextTickerMultiLine.vue'
 
 type Callback = () => void
@@ -41,23 +40,38 @@ function mockElementSize(
 }
 
 describe(TextTickerMultiLine, () => {
-  let wrapper: ReturnType<typeof mount>
+  let unmountFn: () => void
 
   afterEach(() => {
-    wrapper?.unmount()
+    unmountFn?.()
     resizeCallbacks.length = 0
     mutationCallbacks.length = 0
   })
 
-  function mountComponent(text: string) {
-    wrapper = mount(TextTickerMultiLine, {
+  function renderComponent(text: string) {
+    const result = render(TextTickerMultiLine, {
       slots: { default: text }
     })
-    return wrapper
+    unmountFn = result.unmount
+    return {
+      ...result,
+      container: result.container as HTMLElement
+    }
   }
 
-  function getMeasureEl(): HTMLElement {
-    return wrapper.find('[aria-hidden="true"]').element as HTMLElement
+  function getMeasureEl(container: HTMLElement): HTMLElement {
+    // eslint-disable-next-line testing-library/no-node-access
+    return container.querySelector('[aria-hidden="true"]') as HTMLElement
+  }
+
+  function getVisibleLines(container: HTMLElement): HTMLElement[] {
+    /* eslint-disable testing-library/no-node-access */
+    return Array.from(
+      container.querySelectorAll<HTMLElement>(
+        'div.overflow-hidden:not([aria-hidden])'
+      )
+    )
+    /* eslint-enable testing-library/no-node-access */
   }
 
   async function triggerSplitLines() {
@@ -66,40 +80,42 @@ describe(TextTickerMultiLine, () => {
   }
 
   it('renders slot content', () => {
-    mountComponent('Load Checkpoint')
-    expect(wrapper.text()).toContain('Load Checkpoint')
+    renderComponent('Load Checkpoint')
+    expect(
+      screen.getAllByText('Load Checkpoint').length
+    ).toBeGreaterThanOrEqual(1)
   })
 
-  it('renders a single MarqueeLine when text fits', async () => {
-    mountComponent('Short')
-    mockElementSize(getMeasureEl(), 200, 100)
+  it('renders a single line when text fits', async () => {
+    const { container } = renderComponent('Short')
+    mockElementSize(getMeasureEl(container), 200, 100)
     await triggerSplitLines()
 
-    expect(wrapper.findAllComponents(MarqueeLine)).toHaveLength(1)
+    expect(getVisibleLines(container)).toHaveLength(1)
   })
 
-  it('renders two MarqueeLines when text overflows', async () => {
-    mountComponent('Load Checkpoint Loader Simple')
-    mockElementSize(getMeasureEl(), 100, 300)
+  it('renders two lines when text overflows', async () => {
+    const { container } = renderComponent('Load Checkpoint Loader Simple')
+    mockElementSize(getMeasureEl(container), 100, 300)
     await triggerSplitLines()
 
-    expect(wrapper.findAllComponents(MarqueeLine)).toHaveLength(2)
+    expect(getVisibleLines(container)).toHaveLength(2)
   })
 
   it('splits text at word boundary when overflowing', async () => {
-    mountComponent('Load Checkpoint Loader')
-    mockElementSize(getMeasureEl(), 100, 200)
+    const { container } = renderComponent('Load Checkpoint Loader')
+    mockElementSize(getMeasureEl(container), 100, 200)
     await triggerSplitLines()
 
-    const lines = wrapper.findAllComponents(MarqueeLine)
-    expect(lines[0].text()).toBe('Load')
-    expect(lines[1].text()).toBe('Checkpoint Loader')
+    const lines = getVisibleLines(container)
+    expect(lines[0].textContent).toBe('Load')
+    expect(lines[1].textContent).toBe('Checkpoint Loader')
   })
 
   it('has hidden measurement element with aria-hidden', () => {
-    mountComponent('Test')
-    const measureEl = wrapper.find('[aria-hidden="true"]')
-    expect(measureEl.exists()).toBe(true)
-    expect(measureEl.classes()).toContain('invisible')
+    const { container } = renderComponent('Test')
+    const measureEl = getMeasureEl(container)
+    expect(measureEl).toBeInTheDocument()
+    expect(measureEl).toHaveClass('invisible')
   })
 })
diff --git a/src/components/common/TreeExplorerV2.vue b/src/components/common/TreeExplorerV2.vue
index 1257a994f3..9d30b85a28 100644
--- a/src/components/common/TreeExplorerV2.vue
+++ b/src/components/common/TreeExplorerV2.vue
@@ -37,13 +37,13 @@
       </TreeRoot>
     </ContextMenuTrigger>
 
-    <ContextMenuPortal v-if="showContextMenu">
+    <ContextMenuPortal v-if="showContextMenu && contextMenuNode?.data">
       <ContextMenuContent
         class="z-9999 min-w-32 overflow-hidden rounded-md border border-border-default bg-comfy-menu-bg p-1 shadow-md"
       >
         <ContextMenuItem
           class="flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none hover:bg-highlight focus:bg-highlight"
-          @select="handleAddToFavorites"
+          @select="handleToggleBookmark"
         >
           <i
             :class="
@@ -59,6 +59,14 @@
               : $t('sideToolbar.nodeLibraryTab.sections.favoriteNode')
           }}
         </ContextMenuItem>
+        <ContextMenuItem
+          v-if="isCurrentNodeUserBlueprint"
+          class="text-destructive flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none hover:bg-highlight focus:bg-highlight"
+          @select="handleDeleteBlueprint"
+        >
+          <i class="icon-[lucide--trash-2] size-4" />
+          {{ $t('g.delete') }}
+        </ContextMenuItem>
       </ContextMenuContent>
     </ContextMenuPortal>
   </ContextMenuRoot>
@@ -79,6 +87,7 @@ import { computed, provide, ref } from 'vue'
 
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useSubgraphStore } from '@/stores/subgraphStore'
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 import { InjectKeyContextMenuNode } from '@/types/treeExplorerTypes'
 
@@ -98,7 +107,6 @@ const emit = defineEmits<{
     node: RenderedTreeExplorerNode<ComfyNodeDefImpl>,
     event: MouseEvent
   ]
-  addToFavorites: [node: RenderedTreeExplorerNode<ComfyNodeDefImpl>]
 }>()
 
 const contextMenuNode = ref<RenderedTreeExplorerNode<ComfyNodeDefImpl> | null>(
@@ -107,6 +115,7 @@ const contextMenuNode = ref<RenderedTreeExplorerNode<ComfyNodeDefImpl> | null>(
 provide(InjectKeyContextMenuNode, contextMenuNode)
 
 const nodeBookmarkStore = useNodeBookmarkStore()
+const subgraphStore = useSubgraphStore()
 
 const isCurrentNodeBookmarked = computed(() => {
   const node = contextMenuNode.value
@@ -114,9 +123,21 @@ const isCurrentNodeBookmarked = computed(() => {
   return nodeBookmarkStore.isBookmarked(node.data)
 })
 
-function handleAddToFavorites() {
-  if (contextMenuNode.value) {
-    emit('addToFavorites', contextMenuNode.value)
+const isCurrentNodeUserBlueprint = computed(() =>
+  subgraphStore.isUserBlueprint(contextMenuNode.value?.data?.name)
+)
+
+function handleToggleBookmark() {
+  const node = contextMenuNode.value
+  if (node?.data) {
+    nodeBookmarkStore.toggleBookmark(node.data)
+  }
+}
+
+function handleDeleteBlueprint() {
+  const name = contextMenuNode.value?.data?.name
+  if (name) {
+    void subgraphStore.deleteBlueprint(name)
   }
 }
 </script>
diff --git a/src/components/common/TreeExplorerV2Node.test.ts b/src/components/common/TreeExplorerV2Node.test.ts
index e8433a4510..1156156383 100644
--- a/src/components/common/TreeExplorerV2Node.test.ts
+++ b/src/components/common/TreeExplorerV2Node.test.ts
@@ -1,6 +1,7 @@
-import { mount } from '@vue/test-utils'
+import { fireEvent, render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import type { FlattenedItem } from 'reka-ui'
-import { ref } from 'vue'
+import { nextTick, ref } from 'vue'
 import { describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
@@ -13,7 +14,7 @@ import TreeExplorerV2Node from './TreeExplorerV2Node.vue'
 const i18n = createI18n({
   legacy: false,
   locale: 'en',
-  messages: { en: {} }
+  messages: { en: { g: { delete: 'Delete' } } }
 })
 
 vi.mock('@/platform/settings/settingStore', () => ({
@@ -29,6 +30,17 @@ vi.mock('@/stores/nodeBookmarkStore', () => ({
   })
 }))
 
+const mockDeleteBlueprint = vi.fn()
+const mockIsUserBlueprint = vi.fn().mockReturnValue(false)
+
+vi.mock('@/stores/subgraphStore', () => ({
+  useSubgraphStore: () => ({
+    isUserBlueprint: mockIsUserBlueprint,
+    deleteBlueprint: mockDeleteBlueprint,
+    typePrefix: 'SubgraphBlueprint.'
+  })
+}))
+
 vi.mock('@/components/node/NodePreviewCard.vue', () => ({
   default: { template: '<div />' }
 }))
@@ -81,7 +93,7 @@ describe('TreeExplorerV2Node', () => {
     }
   }
 
-  function mountComponent(
+  function renderComponent(
     props: Record<string, unknown> = {},
     options: {
       provide?: Record<string, unknown>
@@ -89,68 +101,76 @@ describe('TreeExplorerV2Node', () => {
     } = {}
   ) {
     const treeItemStub = options.treeItemStub ?? createTreeItemStub()
-    return {
-      wrapper: mount(TreeExplorerV2Node, {
-        global: {
-          plugins: [i18n],
-          stubs: {
-            TreeItem: treeItemStub.stub,
-            Teleport: { template: '<div />' }
-          },
-          provide: {
-            ...options.provide
-          }
+    const onNodeClick = vi.fn()
+    const { container } = render(TreeExplorerV2Node, {
+      global: {
+        plugins: [i18n],
+        stubs: {
+          TreeItem: treeItemStub.stub,
+          Teleport: { template: '<div />' }
         },
-        props: {
-          item: createMockItem('node'),
-          ...props
+        provide: {
+          ...options.provide
         }
-      }),
-      treeItemStub
-    }
+      },
+      props: {
+        item: createMockItem('node'),
+        onNodeClick,
+        ...props
+      }
+    })
+    return { container, treeItemStub, onNodeClick }
+  }
+
+  function getTreeNode(container: Element) {
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    return container.querySelector('div.group\\/tree-node')! as HTMLElement
   }
 
   describe('handleClick', () => {
     it('emits nodeClick event when clicked', async () => {
-      const { wrapper } = mountComponent({
+      const user = userEvent.setup()
+      const { container, onNodeClick } = renderComponent({
         item: createMockItem('node')
       })
 
-      const nodeDiv = wrapper.find('div.group\\/tree-node')
-      await nodeDiv.trigger('click')
+      const nodeDiv = getTreeNode(container)
+      await user.click(nodeDiv)
 
-      expect(wrapper.emitted('nodeClick')).toBeTruthy()
-      expect(wrapper.emitted('nodeClick')?.[0]?.[0]).toMatchObject({
+      expect(onNodeClick).toHaveBeenCalled()
+      expect(onNodeClick.mock.calls[0][0]).toMatchObject({
         type: 'node',
         label: 'Test Label'
       })
     })
 
     it('calls handleToggle for folder items', async () => {
+      const user = userEvent.setup()
       const treeItemStub = createTreeItemStub()
-      const { wrapper } = mountComponent(
+      const { container, onNodeClick } = renderComponent(
         { item: createMockItem('folder') },
         { treeItemStub }
       )
 
-      const folderDiv = wrapper.find('div.group\\/tree-node')
-      await folderDiv.trigger('click')
+      const folderDiv = getTreeNode(container)
+      await user.click(folderDiv)
 
-      expect(wrapper.emitted('nodeClick')).toBeTruthy()
+      expect(onNodeClick).toHaveBeenCalled()
       expect(treeItemStub.handleToggle).toHaveBeenCalled()
     })
 
     it('does not call handleToggle for node items', async () => {
+      const user = userEvent.setup()
       const treeItemStub = createTreeItemStub()
-      const { wrapper } = mountComponent(
+      const { container, onNodeClick } = renderComponent(
         { item: createMockItem('node') },
         { treeItemStub }
       )
 
-      const nodeDiv = wrapper.find('div.group\\/tree-node')
-      await nodeDiv.trigger('click')
+      const nodeDiv = getTreeNode(container)
+      await user.click(nodeDiv)
 
-      expect(wrapper.emitted('nodeClick')).toBeTruthy()
+      expect(onNodeClick).toHaveBeenCalled()
       expect(treeItemStub.handleToggle).not.toHaveBeenCalled()
     })
   })
@@ -160,7 +180,7 @@ describe('TreeExplorerV2Node', () => {
       const contextMenuNode = ref<RenderedTreeExplorerNode | null>(null)
       const nodeItem = createMockItem('node')
 
-      const { wrapper } = mountComponent(
+      const { container } = renderComponent(
         { item: nodeItem },
         {
           provide: {
@@ -169,16 +189,20 @@ describe('TreeExplorerV2Node', () => {
         }
       )
 
-      const nodeDiv = wrapper.find('div.group\\/tree-node')
-      await nodeDiv.trigger('contextmenu')
+      const nodeDiv = getTreeNode(container)
+      await fireEvent.contextMenu(nodeDiv)
 
       expect(contextMenuNode.value).toEqual(nodeItem.value)
     })
 
-    it('does not set contextMenuNode for folder items', async () => {
-      const contextMenuNode = ref<RenderedTreeExplorerNode | null>(null)
+    it('clears contextMenuNode when right-clicking a folder', async () => {
+      const contextMenuNode = ref<RenderedTreeExplorerNode | null>({
+        key: 'stale',
+        type: 'node',
+        label: 'Stale'
+      } as RenderedTreeExplorerNode)
 
-      const { wrapper } = mountComponent(
+      const { container } = renderComponent(
         { item: createMockItem('folder') },
         {
           provide: {
@@ -187,49 +211,115 @@ describe('TreeExplorerV2Node', () => {
         }
       )
 
-      const folderDiv = wrapper.find('div.group\\/tree-node')
-      await folderDiv.trigger('contextmenu')
+      const folderDiv = getTreeNode(container)
+      await fireEvent.contextMenu(folderDiv)
 
       expect(contextMenuNode.value).toBeNull()
     })
   })
 
+  describe('blueprint actions', () => {
+    beforeEach(() => {
+      vi.clearAllMocks()
+    })
+
+    it('shows delete button for user blueprints', () => {
+      mockIsUserBlueprint.mockReturnValue(true)
+      renderComponent({
+        item: createMockItem('node', {
+          data: { name: 'SubgraphBlueprint.test' }
+        })
+      })
+
+      expect(screen.getByRole('button', { name: 'Delete' })).toBeInTheDocument()
+    })
+
+    it('hides delete button for non-blueprint nodes', () => {
+      mockIsUserBlueprint.mockReturnValue(false)
+      renderComponent({
+        item: createMockItem('node', {
+          data: { name: 'KSampler' }
+        })
+      })
+
+      expect(
+        screen.queryByRole('button', { name: 'Delete' })
+      ).not.toBeInTheDocument()
+    })
+
+    it('always shows bookmark button', () => {
+      mockIsUserBlueprint.mockReturnValue(true)
+      renderComponent({
+        item: createMockItem('node', {
+          data: { name: 'SubgraphBlueprint.test' }
+        })
+      })
+
+      expect(
+        screen.getByRole('button', { name: 'icon.bookmark' })
+      ).toBeInTheDocument()
+    })
+
+    it('calls deleteBlueprint when delete button is clicked', async () => {
+      const user = userEvent.setup()
+      mockIsUserBlueprint.mockReturnValue(true)
+      const nodeName = 'SubgraphBlueprint.test'
+      renderComponent({
+        item: createMockItem('node', {
+          data: { name: nodeName }
+        })
+      })
+
+      const deleteButton = screen.getByRole('button', { name: 'Delete' })
+      await user.click(deleteButton)
+
+      expect(mockDeleteBlueprint).toHaveBeenCalledWith(nodeName)
+    })
+  })
+
   describe('rendering', () => {
     it('renders node icon for node type', () => {
-      const { wrapper } = mountComponent({
+      const { container } = renderComponent({
         item: createMockItem('node')
       })
 
-      expect(wrapper.find('i.icon-\\[comfy--node\\]').exists()).toBe(true)
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      expect(container.querySelector('i.icon-\\[comfy--node\\]')).toBeTruthy()
     })
 
     it('renders folder icon for folder type', () => {
-      const { wrapper } = mountComponent({
+      const { container } = renderComponent({
         item: createMockItem('folder', { icon: 'icon-[lucide--folder]' })
       })
 
-      expect(wrapper.find('i.icon-\\[lucide--folder\\]').exists()).toBe(true)
+      /* eslint-disable testing-library/no-container, testing-library/no-node-access */
+      expect(
+        container.querySelector('i.icon-\\[lucide--folder\\]')
+      ).toBeTruthy()
+      /* eslint-enable testing-library/no-container, testing-library/no-node-access */
     })
 
     it('renders label text', () => {
-      const { wrapper } = mountComponent({
+      renderComponent({
         item: createMockItem('node', { label: 'My Node' })
       })
 
-      expect(wrapper.text()).toContain('My Node')
+      expect(screen.getByText('My Node')).toBeInTheDocument()
     })
 
     it('renders chevron for folder with children', () => {
-      const { wrapper } = mountComponent({
+      const { container } = renderComponent({
         item: {
           ...createMockItem('folder'),
           hasChildren: true
         }
       })
 
-      expect(wrapper.find('i.icon-\\[lucide--chevron-down\\]').exists()).toBe(
-        true
-      )
+      /* eslint-disable testing-library/no-container, testing-library/no-node-access */
+      expect(
+        container.querySelector('i.icon-\\[lucide--chevron-down\\]')
+      ).toBeTruthy()
+      /* eslint-enable testing-library/no-container, testing-library/no-node-access */
     })
   })
 
@@ -239,75 +329,75 @@ describe('TreeExplorerV2Node', () => {
     })
 
     it('sets draggable attribute on node items', () => {
-      const { wrapper } = mountComponent({
+      const { container } = renderComponent({
         item: createMockItem('node')
       })
 
-      const nodeDiv = wrapper.find('div.group\\/tree-node')
-      expect(nodeDiv.attributes('draggable')).toBe('true')
+      const nodeDiv = getTreeNode(container)
+      expect(nodeDiv.getAttribute('draggable')).toBe('true')
     })
 
     it('does not set draggable on folder items', () => {
-      const { wrapper } = mountComponent({
+      const { container } = renderComponent({
         item: createMockItem('folder')
       })
 
-      const folderDiv = wrapper.find('div.group\\/tree-node')
-      expect(folderDiv.attributes('draggable')).toBeUndefined()
+      const folderDiv = getTreeNode(container)
+      expect(folderDiv.getAttribute('draggable')).toBeNull()
     })
 
     it('calls startDrag with native mode on dragstart', async () => {
       const mockData = { name: 'TestNode' }
-      const { wrapper } = mountComponent({
+      const { container } = renderComponent({
         item: createMockItem('node', { data: mockData })
       })
 
-      const nodeDiv = wrapper.find('div.group\\/tree-node')
-      await nodeDiv.trigger('dragstart')
+      const nodeDiv = getTreeNode(container)
+      await fireEvent.dragStart(nodeDiv)
 
       expect(mockStartDrag).toHaveBeenCalledWith(mockData, 'native')
     })
 
     it('does not call startDrag for folder items on dragstart', async () => {
-      const { wrapper } = mountComponent({
+      const { container } = renderComponent({
         item: createMockItem('folder')
       })
 
-      const folderDiv = wrapper.find('div.group\\/tree-node')
-      await folderDiv.trigger('dragstart')
+      const folderDiv = getTreeNode(container)
+      await fireEvent.dragStart(folderDiv)
 
       expect(mockStartDrag).not.toHaveBeenCalled()
     })
 
     it('calls handleNativeDrop on dragend with drop coordinates', async () => {
       const mockData = { name: 'TestNode' }
-      const { wrapper } = mountComponent({
+      const { container } = renderComponent({
         item: createMockItem('node', { data: mockData })
       })
 
-      const nodeDiv = wrapper.find('div.group\\/tree-node')
+      const nodeDiv = getTreeNode(container)
 
-      await nodeDiv.trigger('dragstart')
+      await fireEvent.dragStart(nodeDiv)
 
       const dragEndEvent = new DragEvent('dragend', { bubbles: true })
       Object.defineProperty(dragEndEvent, 'clientX', { value: 100 })
       Object.defineProperty(dragEndEvent, 'clientY', { value: 200 })
 
-      await nodeDiv.element.dispatchEvent(dragEndEvent)
-      await wrapper.vm.$nextTick()
+      nodeDiv.dispatchEvent(dragEndEvent)
+      await nextTick()
 
       expect(mockHandleNativeDrop).toHaveBeenCalledWith(100, 200)
     })
 
     it('calls handleNativeDrop regardless of dropEffect', async () => {
       const mockData = { name: 'TestNode' }
-      const { wrapper } = mountComponent({
+      const { container } = renderComponent({
         item: createMockItem('node', { data: mockData })
       })
 
-      const nodeDiv = wrapper.find('div.group\\/tree-node')
+      const nodeDiv = getTreeNode(container)
 
-      await nodeDiv.trigger('dragstart')
+      await fireEvent.dragStart(nodeDiv)
       mockHandleNativeDrop.mockClear()
 
       const dragEndEvent = new DragEvent('dragend', { bubbles: true })
@@ -317,8 +407,8 @@ describe('TreeExplorerV2Node', () => {
         value: { dropEffect: 'none' }
       })
 
-      await nodeDiv.element.dispatchEvent(dragEndEvent)
-      await wrapper.vm.$nextTick()
+      nodeDiv.dispatchEvent(dragEndEvent)
+      await nextTick()
 
       expect(mockHandleNativeDrop).toHaveBeenCalledWith(300, 400)
     })
diff --git a/src/components/common/TreeExplorerV2Node.vue b/src/components/common/TreeExplorerV2Node.vue
index 1158d65ffe..ba2e776857 100644
--- a/src/components/common/TreeExplorerV2Node.vue
+++ b/src/components/common/TreeExplorerV2Node.vue
@@ -25,25 +25,37 @@
           {{ item.value.label }}
         </slot>
       </span>
-      <button
-        :class="
-          cn(
-            'hover:text-foreground flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-sm border-none bg-transparent text-muted-foreground',
-            'opacity-0 group-hover/tree-node:opacity-100'
-          )
-        "
-        :aria-label="$t('icon.bookmark')"
-        @click.stop="toggleBookmark"
-      >
-        <i
-          :class="
-            cn(
-              isBookmarked ? 'pi pi-bookmark-fill' : 'pi pi-bookmark',
-              'text-xs'
-            )
-          "
-        />
-      </button>
+      <div class="flex shrink-0 items-center gap-0.5">
+        <Button
+          v-if="isUserBlueprint"
+          variant="muted-textonly"
+          size="icon-sm"
+          class="opacity-0 group-hover/tree-node:opacity-100"
+          :aria-label="$t('g.delete')"
+          @click.stop="deleteBlueprint"
+        >
+          <i class="icon-[lucide--trash-2] bg-destructive-background" />
+        </Button>
+        <Button
+          v-if="isUserBlueprint"
+          variant="muted-textonly"
+          size="icon-sm"
+          class="opacity-0 group-hover/tree-node:opacity-100"
+          :aria-label="$t('g.edit')"
+          @click.stop="editBlueprint"
+        >
+          <i class="icon-[lucide--square-pen]" />
+        </Button>
+        <Button
+          variant="muted-textonly"
+          size="icon-sm"
+          class="opacity-0 group-hover/tree-node:opacity-100"
+          :aria-label="$t('icon.bookmark')"
+          @click.stop="toggleBookmark"
+        >
+          <i :class="isBookmarked ? 'pi pi-bookmark-fill' : 'pi pi-bookmark'" />
+        </Button>
+      </div>
     </div>
 
     <!-- Folder -->
@@ -53,6 +65,7 @@
       :class="cn(ROW_CLASS, isSelected && 'bg-comfy-input')"
       :style="rowStyle"
       @click.stop="handleClick($event, handleToggle, handleSelect)"
+      @contextmenu="clearContextMenuNode"
     >
       <i
         v-if="item.hasChildren"
@@ -94,8 +107,10 @@ import { computed, inject } from 'vue'
 
 import NodePreviewCard from '@/components/node/NodePreviewCard.vue'
 import { useNodePreviewAndDrag } from '@/composables/node/useNodePreviewAndDrag'
+import Button from '@/components/ui/button/Button.vue'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useSubgraphStore } from '@/stores/subgraphStore'
 import { InjectKeyContextMenuNode } from '@/types/treeExplorerTypes'
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 import { cn } from '@/utils/tailwindUtil'
@@ -120,6 +135,7 @@ const emit = defineEmits<{
 
 const contextMenuNode = inject(InjectKeyContextMenuNode)
 const nodeBookmarkStore = useNodeBookmarkStore()
+const subgraphStore = useSubgraphStore()
 
 const nodeDef = computed(() => item.value.data)
 
@@ -128,12 +144,29 @@ const isBookmarked = computed(() => {
   return nodeBookmarkStore.isBookmarked(nodeDef.value)
 })
 
+const isUserBlueprint = computed(() =>
+  subgraphStore.isUserBlueprint(nodeDef.value?.name)
+)
+
 function toggleBookmark() {
   if (nodeDef.value) {
     nodeBookmarkStore.toggleBookmark(nodeDef.value)
   }
 }
 
+function deleteBlueprint() {
+  if (nodeDef.value) {
+    void subgraphStore.deleteBlueprint(nodeDef.value.name)
+  }
+}
+const editBlueprint = async () => {
+  if (!nodeDef.value)
+    throw new Error(
+      'Failed to edit subgraph blueprint lacking backing node data'
+    )
+  await useSubgraphStore().editBlueprint(nodeDef.value.name)
+}
+
 const {
   previewRef,
   showPreview,
@@ -166,6 +199,12 @@ function handleContextMenu() {
   }
 }
 
+function clearContextMenuNode() {
+  if (contextMenuNode) {
+    contextMenuNode.value = null
+  }
+}
+
 function handleMouseEnter(e: MouseEvent) {
   if (item.value.type !== 'node') return
   baseHandleMouseEnter(e)
diff --git a/src/components/common/VirtualGrid.test.ts b/src/components/common/VirtualGrid.test.ts
index 2834e92199..36d355141b 100644
--- a/src/components/common/VirtualGrid.test.ts
+++ b/src/components/common/VirtualGrid.test.ts
@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import type { Ref } from 'vue'
 import { nextTick, ref } from 'vue'
@@ -46,7 +46,7 @@ describe('VirtualGrid', () => {
     mockedHeight.value = 200
     mockedScrollY.value = 0
 
-    const wrapper = mount(VirtualGrid<TestItem>, {
+    render(VirtualGrid, {
       props: {
         items,
         gridStyle: defaultGridStyle,
@@ -60,16 +60,14 @@ describe('VirtualGrid', () => {
           <div class="test-item">{{ item.name }}</div>
         </template>`
       },
-      attachTo: document.body
+      container: document.body.appendChild(document.createElement('div'))
     })
 
     await nextTick()
 
-    const renderedItems = wrapper.findAll('.test-item')
+    const renderedItems = screen.getAllByText(/^Item \d+$/)
     expect(renderedItems.length).toBeGreaterThan(0)
     expect(renderedItems.length).toBeLessThan(items.length)
-
-    wrapper.unmount()
   })
 
   it('provides correct index in slot props', async () => {
@@ -79,7 +77,7 @@ describe('VirtualGrid', () => {
     mockedHeight.value = 200
     mockedScrollY.value = 0
 
-    const wrapper = mount(VirtualGrid<TestItem>, {
+    render(VirtualGrid, {
       props: {
         items,
         gridStyle: defaultGridStyle,
@@ -94,7 +92,7 @@ describe('VirtualGrid', () => {
           return null
         }
       },
-      attachTo: document.body
+      container: document.body.appendChild(document.createElement('div'))
     })
 
     await nextTick()
@@ -104,8 +102,6 @@ describe('VirtualGrid', () => {
     for (let i = 1; i < receivedIndices.length; i++) {
       expect(receivedIndices[i]).toBe(receivedIndices[i - 1] + 1)
     }
-
-    wrapper.unmount()
   })
 
   it('respects maxColumns prop', async () => {
@@ -114,28 +110,29 @@ describe('VirtualGrid', () => {
     mockedHeight.value = 200
     mockedScrollY.value = 0
 
-    const wrapper = mount(VirtualGrid<TestItem>, {
+    const { container } = render(VirtualGrid, {
       props: {
         items,
         gridStyle: defaultGridStyle,
         maxColumns: 2
       },
-      attachTo: document.body
+      container: document.body.appendChild(document.createElement('div'))
     })
 
     await nextTick()
 
-    const gridElement = wrapper.find('[style*="display: grid"]')
-    expect(gridElement.exists()).toBe(true)
-
-    const gridEl = gridElement.element as HTMLElement
-    expect(gridEl.style.gridTemplateColumns).toBe('repeat(2, minmax(0, 1fr))')
-
-    wrapper.unmount()
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const gridElement = container.querySelector(
+      '[style*="display: grid"]'
+    ) as HTMLElement
+    expect(gridElement).not.toBeNull()
+    expect(gridElement.style.gridTemplateColumns).toBe(
+      'repeat(2, minmax(0, 1fr))'
+    )
   })
 
   it('renders empty when no items provided', async () => {
-    const wrapper = mount(VirtualGrid<TestItem>, {
+    render(VirtualGrid, {
       props: {
         items: [],
         gridStyle: defaultGridStyle
@@ -149,10 +146,8 @@ describe('VirtualGrid', () => {
 
     await nextTick()
 
-    const renderedItems = wrapper.findAll('.test-item')
+    const renderedItems = screen.queryAllByText(/^Item \d+$/)
     expect(renderedItems.length).toBe(0)
-
-    wrapper.unmount()
   })
 
   it('emits approach-end for single-column list when scrolled near bottom', async () => {
@@ -161,7 +156,9 @@ describe('VirtualGrid', () => {
     mockedHeight.value = 600
     mockedScrollY.value = 0
 
-    const wrapper = mount(VirtualGrid<TestItem>, {
+    const onApproachEnd = vi.fn()
+
+    render(VirtualGrid, {
       props: {
         items,
         gridStyle: {
@@ -171,19 +168,20 @@ describe('VirtualGrid', () => {
         defaultItemHeight: 48,
         defaultItemWidth: 200,
         maxColumns: 1,
-        bufferRows: 1
+        bufferRows: 1,
+        onApproachEnd
       },
       slots: {
         item: `<template #item="{ item }">
           <div class="test-item">{{ item.name }}</div>
         </template>`
       },
-      attachTo: document.body
+      container: document.body.appendChild(document.createElement('div'))
     })
 
     await nextTick()
 
-    expect(wrapper.emitted('approach-end')).toBeUndefined()
+    expect(onApproachEnd).not.toHaveBeenCalled()
 
     // Scroll near the end: 50 items * 48px = 2400px total
     // viewRows = ceil(600/48) = 13, buffer = 1
@@ -195,9 +193,7 @@ describe('VirtualGrid', () => {
     mockedScrollY.value = 1680
     await nextTick()
 
-    expect(wrapper.emitted('approach-end')).toBeDefined()
-
-    wrapper.unmount()
+    expect(onApproachEnd).toHaveBeenCalled()
   })
 
   it('does not emit approach-end without maxColumns in single-column layout', async () => {
@@ -208,7 +204,9 @@ describe('VirtualGrid', () => {
     mockedHeight.value = 600
     mockedScrollY.value = 0
 
-    const wrapper = mount(VirtualGrid<TestItem>, {
+    const onApproachEnd = vi.fn()
+
+    render(VirtualGrid, {
       props: {
         items,
         gridStyle: {
@@ -218,14 +216,15 @@ describe('VirtualGrid', () => {
         defaultItemHeight: 48,
         defaultItemWidth: 200,
         // No maxColumns — cols will be floor(400/200) = 2
-        bufferRows: 1
+        bufferRows: 1,
+        onApproachEnd
       },
       slots: {
         item: `<template #item="{ item }">
           <div class="test-item">{{ item.name }}</div>
         </template>`
       },
-      attachTo: document.body
+      container: document.body.appendChild(document.createElement('div'))
     })
 
     await nextTick()
@@ -237,9 +236,7 @@ describe('VirtualGrid', () => {
     // With cols=2, toCol = (35+1+13)*2 = 98, which exceeds items.length (50)
     // remainingCol = 50-98 = -48, hasMoreToRender = false → isNearEnd = false
     // The approach-end never fires at the correct scroll position
-    expect(wrapper.emitted('approach-end')).toBeUndefined()
-
-    wrapper.unmount()
+    expect(onApproachEnd).not.toHaveBeenCalled()
   })
 
   it('forces cols to maxColumns when maxColumns is finite', async () => {
@@ -248,7 +245,7 @@ describe('VirtualGrid', () => {
     mockedScrollY.value = 0
 
     const items = createItems(20)
-    const wrapper = mount(VirtualGrid<TestItem>, {
+    render(VirtualGrid, {
       props: {
         items,
         gridStyle: defaultGridStyle,
@@ -262,15 +259,13 @@ describe('VirtualGrid', () => {
           <div class="test-item">{{ item.name }}</div>
         </template>`
       },
-      attachTo: document.body
+      container: document.body.appendChild(document.createElement('div'))
     })
 
     await nextTick()
 
-    const renderedItems = wrapper.findAll('.test-item')
+    const renderedItems = screen.getAllByText(/^Item \d+$/)
     expect(renderedItems.length).toBeGreaterThan(0)
     expect(renderedItems.length % 4).toBe(0)
-
-    wrapper.unmount()
   })
 })
diff --git a/src/components/common/WorkflowActionsList.test.ts b/src/components/common/WorkflowActionsList.test.ts
index e5483c65a0..620a7e85ee 100644
--- a/src/components/common/WorkflowActionsList.test.ts
+++ b/src/components/common/WorkflowActionsList.test.ts
@@ -1,4 +1,5 @@
-import { shallowMount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { describe, expect, it, vi } from 'vitest'
 
 import WorkflowActionsList from '@/components/common/WorkflowActionsList.vue'
@@ -7,10 +8,23 @@ import type {
   WorkflowMenuItem
 } from '@/types/workflowMenuItem'
 
-function createWrapper(items: WorkflowMenuItem[]) {
-  return shallowMount(WorkflowActionsList, {
-    props: { items },
-    global: { renderStubDefaultSlot: true }
+const MenuItemStub = {
+  template:
+    '<div data-testid="menu-item" @click="$emit(\'select\')"><slot /></div>',
+  emits: ['select']
+}
+
+const SeparatorStub = {
+  template: '<hr data-testid="menu-separator" />'
+}
+
+function renderList(items: WorkflowMenuItem[]) {
+  return render(WorkflowActionsList, {
+    props: {
+      items,
+      itemComponent: MenuItemStub,
+      separatorComponent: SeparatorStub
+    }
   })
 }
 
@@ -20,10 +34,9 @@ describe('WorkflowActionsList', () => {
       { id: 'save', label: 'Save', icon: 'pi pi-save', command: vi.fn() }
     ]
 
-    const wrapper = createWrapper(items)
+    renderList(items)
 
-    expect(wrapper.text()).toContain('Save')
-    expect(wrapper.find('.pi-save').exists()).toBe(true)
+    expect(screen.getByText('Save')).toBeInTheDocument()
   })
 
   it('renders separator items', () => {
@@ -33,24 +46,23 @@ describe('WorkflowActionsList', () => {
       { id: 'after', label: 'After', icon: 'pi pi-b', command: vi.fn() }
     ]
 
-    const wrapper = createWrapper(items)
-    const html = wrapper.html()
+    renderList(items)
 
-    expect(html).toContain('dropdown-menu-separator-stub')
-    expect(wrapper.text()).toContain('Before')
-    expect(wrapper.text()).toContain('After')
+    screen.getByTestId('menu-separator')
+    screen.getByText('Before')
+    screen.getByText('After')
   })
 
   it('dispatches command on select', async () => {
+    const user = userEvent.setup()
     const command = vi.fn()
     const items: WorkflowMenuItem[] = [
       { id: 'action', label: 'Action', icon: 'pi pi-play', command }
     ]
 
-    const wrapper = createWrapper(items)
-    const item = wrapper.findComponent({ name: 'DropdownMenuItem' })
-    await item.vm.$emit('select')
+    renderList(items)
 
+    await user.click(screen.getByTestId('menu-item'))
     expect(command).toHaveBeenCalledOnce()
   })
 
@@ -65,9 +77,9 @@ describe('WorkflowActionsList', () => {
       }
     ]
 
-    const wrapper = createWrapper(items)
+    renderList(items)
 
-    expect(wrapper.text()).toContain('NEW')
+    screen.getByText('NEW')
   })
 
   it('does not render items with visible set to false', () => {
@@ -82,10 +94,10 @@ describe('WorkflowActionsList', () => {
       { id: 'shown', label: 'Shown Item', icon: 'pi pi-eye', command: vi.fn() }
     ]
 
-    const wrapper = createWrapper(items)
+    renderList(items)
 
-    expect(wrapper.text()).not.toContain('Hidden Item')
-    expect(wrapper.text()).toContain('Shown Item')
+    expect(screen.queryByText('Hidden Item')).toBeNull()
+    screen.getByText('Shown Item')
   })
 
   it('does not render badge when absent', () => {
@@ -93,8 +105,8 @@ describe('WorkflowActionsList', () => {
       { id: 'plain', label: 'Plain', icon: 'pi pi-check', command: vi.fn() }
     ]
 
-    const wrapper = createWrapper(items)
+    renderList(items)
 
-    expect(wrapper.text()).not.toContain('NEW')
+    expect(screen.queryByText('NEW')).toBeNull()
   })
 })
diff --git a/src/components/curve/CurveEditor.test.ts b/src/components/curve/CurveEditor.test.ts
index e04eae8329..a97987e0da 100644
--- a/src/components/curve/CurveEditor.test.ts
+++ b/src/components/curve/CurveEditor.test.ts
@@ -1,86 +1,91 @@
-import { mount } from '@vue/test-utils'
+import { fireEvent, render, screen } from '@testing-library/vue'
 import { describe, expect, it } from 'vitest'
 
 import type { CurvePoint } from './types'
 
 import CurveEditor from './CurveEditor.vue'
 
-function mountEditor(points: CurvePoint[], extraProps = {}) {
-  return mount(CurveEditor, {
+function renderEditor(points: CurvePoint[], extraProps = {}) {
+  const { container } = render(CurveEditor, {
     props: { modelValue: points, ...extraProps }
   })
+  return { container }
 }
 
-function getCurvePath(wrapper: ReturnType<typeof mount>) {
-  return wrapper.find('[data-testid="curve-path"]')
+function getCurvePath() {
+  return screen.getByTestId('curve-path')
 }
 
 describe('CurveEditor', () => {
   it('renders SVG with curve path', () => {
-    const wrapper = mountEditor([
+    const { container } = renderEditor([
       [0, 0],
       [1, 1]
     ])
-    expect(wrapper.find('svg').exists()).toBe(true)
-    const curvePath = getCurvePath(wrapper)
-    expect(curvePath.exists()).toBe(true)
-    expect(curvePath.attributes('d')).toBeTruthy()
+    /* eslint-disable testing-library/no-container, testing-library/no-node-access */
+    expect(container.querySelector('svg')).toBeInTheDocument()
+    /* eslint-enable testing-library/no-container, testing-library/no-node-access */
+    const curvePath = getCurvePath()
+    expect(curvePath).toBeInTheDocument()
+    expect(curvePath.getAttribute('d')).toBeTruthy()
   })
 
   it('renders a circle for each control point', () => {
-    const wrapper = mountEditor([
+    const { container } = renderEditor([
       [0, 0],
       [0.5, 0.7],
       [1, 1]
     ])
-    expect(wrapper.findAll('circle')).toHaveLength(3)
+    /* eslint-disable testing-library/no-container, testing-library/no-node-access */
+    expect(container.querySelectorAll('circle')).toHaveLength(3)
+    /* eslint-enable testing-library/no-container, testing-library/no-node-access */
   })
 
   it('renders histogram path when provided', () => {
     const histogram = new Uint32Array(256)
     for (let i = 0; i < 256; i++) histogram[i] = i + 1
-    const wrapper = mountEditor(
+    renderEditor(
       [
         [0, 0],
         [1, 1]
       ],
       { histogram }
     )
-    const histogramPath = wrapper.find('[data-testid="histogram-path"]')
-    expect(histogramPath.exists()).toBe(true)
-    expect(histogramPath.attributes('d')).toContain('M0,1')
+    const histogramPath = screen.getByTestId('histogram-path')
+    expect(histogramPath).toBeInTheDocument()
+    expect(histogramPath.getAttribute('d')).toContain('M0,1')
   })
 
   it('does not render histogram path when not provided', () => {
-    const wrapper = mountEditor([
+    renderEditor([
       [0, 0],
       [1, 1]
     ])
-    expect(wrapper.find('[data-testid="histogram-path"]').exists()).toBe(false)
+    expect(screen.queryByTestId('histogram-path')).not.toBeInTheDocument()
   })
 
   it('returns empty path with fewer than 2 points', () => {
-    const wrapper = mountEditor([[0.5, 0.5]])
-    expect(getCurvePath(wrapper).attributes('d')).toBe('')
+    renderEditor([[0.5, 0.5]])
+    expect(getCurvePath().getAttribute('d')).toBe('')
   })
 
   it('generates path starting with M and containing L segments', () => {
-    const wrapper = mountEditor([
+    renderEditor([
       [0, 0],
       [0.5, 0.8],
       [1, 1]
     ])
-    const d = getCurvePath(wrapper).attributes('d')!
+    const d = getCurvePath().getAttribute('d')!
     expect(d).toMatch(/^M/)
     expect(d).toContain('L')
   })
 
   it('curve path only spans the x-range of control points', () => {
-    const wrapper = mountEditor([
+    renderEditor([
       [0.2, 0.3],
       [0.8, 0.9]
     ])
-    const d = getCurvePath(wrapper).attributes('d')!
+    const d = getCurvePath().getAttribute('d')!
     const xValues = d
       .split(/[ML]/)
       .filter(Boolean)
@@ -95,19 +100,22 @@ describe('CurveEditor', () => {
       [0.5, 0.5],
       [1, 1]
     ]
-    const wrapper = mountEditor(points)
-    expect(wrapper.findAll('circle')).toHaveLength(3)
+    const { container } = renderEditor(points)
 
-    await wrapper.findAll('circle')[1].trigger('pointerdown', {
+    /* eslint-disable testing-library/no-container, testing-library/no-node-access, testing-library/prefer-user-event */
+    expect(container.querySelectorAll('circle')).toHaveLength(3)
+
+    await fireEvent.pointerDown(container.querySelectorAll('circle')[1], {
       button: 2,
       pointerId: 1
     })
-    expect(wrapper.findAll('circle')).toHaveLength(2)
+    expect(container.querySelectorAll('circle')).toHaveLength(2)
 
-    await wrapper.findAll('circle')[0].trigger('pointerdown', {
+    await fireEvent.pointerDown(container.querySelectorAll('circle')[0], {
       button: 2,
       pointerId: 1
     })
-    expect(wrapper.findAll('circle')).toHaveLength(2)
+    expect(container.querySelectorAll('circle')).toHaveLength(2)
+    /* eslint-enable testing-library/no-container, testing-library/no-node-access */
   })
 })
diff --git a/src/components/curve/CurveEditor.vue b/src/components/curve/CurveEditor.vue
index ea8d216c91..b623da9a3e 100644
--- a/src/components/curve/CurveEditor.vue
+++ b/src/components/curve/CurveEditor.vue
@@ -89,7 +89,7 @@ import { cn } from '@/utils/tailwindUtil'
 
 import type { CurveInterpolation, CurvePoint } from './types'
 
-import { histogramToPath } from './curveUtils'
+import { histogramToPath } from '@/utils/histogramUtil'
 
 const {
   curveColor = 'white',
diff --git a/src/components/curve/curveUtils.test.ts b/src/components/curve/curveUtils.test.ts
index e959651f81..a20852d1f1 100644
--- a/src/components/curve/curveUtils.test.ts
+++ b/src/components/curve/curveUtils.test.ts
@@ -5,8 +5,7 @@ import type { CurvePoint } from './types'
 import {
   createLinearInterpolator,
   createMonotoneInterpolator,
-  curvesToLUT,
-  histogramToPath
+  curvesToLUT
 } from './curveUtils'
 
 describe('createMonotoneInterpolator', () => {
@@ -164,37 +163,3 @@ describe('curvesToLUT', () => {
     }
   })
 })
-
-describe('histogramToPath', () => {
-  it('returns empty string for empty histogram', () => {
-    expect(histogramToPath(new Uint32Array(0))).toBe('')
-  })
-
-  it('returns empty string when all bins are zero', () => {
-    expect(histogramToPath(new Uint32Array(256))).toBe('')
-  })
-
-  it('returns a closed SVG path for valid histogram', () => {
-    const histogram = new Uint32Array(256)
-    for (let i = 0; i < 256; i++) histogram[i] = i + 1
-    const path = histogramToPath(histogram)
-    expect(path).toMatch(/^M0,1/)
-    expect(path).toMatch(/L1,1 Z$/)
-  })
-
-  it('normalizes using 99.5th percentile to suppress outliers', () => {
-    const histogram = new Uint32Array(256)
-    for (let i = 0; i < 256; i++) histogram[i] = 100
-    histogram[255] = 100000
-    const path = histogramToPath(histogram)
-    // Most bins should map to y=0 (1 - 100/100 = 0) since
-    // the 99.5th percentile is 100, not the outlier 100000
-    const yValues = path
-      .split(/[ML]/)
-      .filter(Boolean)
-      .map((s) => parseFloat(s.split(',')[1]))
-      .filter((y) => !isNaN(y))
-    const nearZero = yValues.filter((y) => Math.abs(y) < 0.01)
-    expect(nearZero.length).toBeGreaterThan(200)
-  })
-})
diff --git a/src/components/curve/curveUtils.ts b/src/components/curve/curveUtils.ts
index 4254878dd2..6bbd507311 100644
--- a/src/components/curve/curveUtils.ts
+++ b/src/components/curve/curveUtils.ts
@@ -149,34 +149,6 @@ export function createMonotoneInterpolator(
   }
 }
 
-/**
- * Convert a histogram (arbitrary number of bins) into an SVG path string.
- * Applies square-root scaling and normalizes using the 99.5th percentile
- * to avoid outlier spikes.
- */
-export function histogramToPath(histogram: Uint32Array): string {
-  const len = histogram.length
-  if (len === 0) return ''
-
-  const sqrtValues = new Float32Array(len)
-  for (let i = 0; i < len; i++) sqrtValues[i] = Math.sqrt(histogram[i])
-
-  const sorted = Array.from(sqrtValues).sort((a, b) => a - b)
-  const max = sorted[Math.floor((len - 1) * 0.995)]
-  if (max === 0) return ''
-
-  const invMax = 1 / max
-  const lastIdx = len - 1
-  const parts: string[] = ['M0,1']
-  for (let i = 0; i < len; i++) {
-    const x = lastIdx === 0 ? 0.5 : i / lastIdx
-    const y = 1 - Math.min(1, sqrtValues[i] * invMax)
-    parts.push(`L${x},${y}`)
-  }
-  parts.push('L1,1 Z')
-  return parts.join(' ')
-}
-
 export function curvesToLUT(
   points: CurvePoint[],
   interpolation: CurveInterpolation = 'monotone_cubic'
@@ -192,3 +164,15 @@ export function curvesToLUT(
 
   return lut
 }
+
+export function curveDataToFloatLUT(
+  curve: CurveData,
+  size: number = 256
+): Float32Array {
+  const lut = new Float32Array(size)
+  const interpolate = createInterpolator(curve.points, curve.interpolation)
+  for (let i = 0; i < size; i++) {
+    lut[i] = interpolate(i / (size - 1))
+  }
+  return lut
+}
diff --git a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
index 6495d4ece4..3c743d483f 100644
--- a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
+++ b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
@@ -265,10 +265,11 @@
                 </template>
                 <template #bottom-right>
                   <template v-if="template.tags && template.tags.length > 0">
-                    <SquareChip
+                    <Tag
                       v-for="tag in template.tags"
                       :key="tag"
                       :label="tag"
+                      shape="overlay"
                     />
                   </template>
                 </template>
@@ -402,7 +403,7 @@ import { useI18n } from 'vue-i18n'
 import CardBottom from '@/components/card/CardBottom.vue'
 import CardContainer from '@/components/card/CardContainer.vue'
 import CardTop from '@/components/card/CardTop.vue'
-import SquareChip from '@/components/chip/SquareChip.vue'
+import Tag from '@/components/chip/Tag.vue'
 import SearchInput from '@/components/ui/search-input/SearchInput.vue'
 import MultiSelect from '@/components/input/MultiSelect.vue'
 import SingleSelect from '@/components/input/SingleSelect.vue'
diff --git a/src/components/dialog/content/ApiNodesSignInContent.vue b/src/components/dialog/content/ApiNodesSignInContent.vue
index 41ad903c7b..20ccb38fb6 100644
--- a/src/components/dialog/content/ApiNodesSignInContent.vue
+++ b/src/components/dialog/content/ApiNodesSignInContent.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="flex h-110 max-w-96 flex-col gap-4 p-2">
+  <div
+    data-testid="api-signin-dialog"
+    class="flex h-110 max-w-96 flex-col gap-4 p-2"
+  >
     <div class="mb-2 text-2xl font-medium">
       {{ t('apiNodesSignInDialog.title') }}
     </div>
@@ -29,6 +32,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 
+import ApiNodesList from '@/components/common/ApiNodesList.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useExternalLink } from '@/composables/useExternalLink'
 
diff --git a/src/components/dialog/content/ErrorDialogContent.vue b/src/components/dialog/content/ErrorDialogContent.vue
index aeee060b0d..d471198225 100644
--- a/src/components/dialog/content/ErrorDialogContent.vue
+++ b/src/components/dialog/content/ErrorDialogContent.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="comfy-error-report flex flex-col gap-4">
+  <div
+    data-testid="error-dialog"
+    class="comfy-error-report flex flex-col gap-4"
+  >
     <NoResultsPlaceholder
       class="pb-0"
       icon="pi pi-exclamation-circle"
@@ -14,11 +17,17 @@
     </template>
 
     <div class="flex justify-center gap-2">
-      <Button v-show="!reportOpen" variant="textonly" @click="showReport">
+      <Button
+        v-show="!reportOpen"
+        data-testid="error-dialog-show-report"
+        variant="textonly"
+        @click="showReport"
+      >
         {{ $t('g.showReport') }}
       </Button>
       <Button
         v-show="!reportOpen"
+        data-testid="error-dialog-contact-support"
         variant="textonly"
         @click="showContactSupport"
       >
@@ -40,7 +49,11 @@
         :repo-owner="repoOwner"
         :repo-name="repoName"
       />
-      <Button v-if="reportOpen" @click="copyReportToClipboard">
+      <Button
+        v-if="reportOpen"
+        data-testid="error-dialog-copy-report"
+        @click="copyReportToClipboard"
+      >
         <i class="pi pi-copy" />
         {{ $t('g.copyToClipboard') }}
       </Button>
diff --git a/src/components/dialog/content/UpdatePasswordContent.vue b/src/components/dialog/content/UpdatePasswordContent.vue
index a6314b67c9..cc3ff0f4be 100644
--- a/src/components/dialog/content/UpdatePasswordContent.vue
+++ b/src/components/dialog/content/UpdatePasswordContent.vue
@@ -1,5 +1,6 @@
 <template>
   <Form
+    data-testid="update-password-dialog"
     class="flex w-96 flex-col gap-6"
     :resolver="zodResolver(updatePasswordSchema)"
     @submit="onSubmit"
diff --git a/src/components/dialog/content/credit/CreditTopUpOption.test.ts b/src/components/dialog/content/credit/CreditTopUpOption.test.ts
index 7faf432e72..708e20df09 100644
--- a/src/components/dialog/content/credit/CreditTopUpOption.test.ts
+++ b/src/components/dialog/content/credit/CreditTopUpOption.test.ts
@@ -1,6 +1,7 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { createI18n } from 'vue-i18n'
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 
 import CreditTopUpOption from '@/components/dialog/content/credit/CreditTopUpOption.vue'
 
@@ -10,10 +11,16 @@ const i18n = createI18n({
   messages: { en: {} }
 })
 
-const mountOption = (
-  props?: Partial<{ credits: number; description: string; selected: boolean }>
-) =>
-  mount(CreditTopUpOption, {
+function renderOption(
+  props?: Partial<{
+    credits: number
+    description: string
+    selected: boolean
+    onSelect: () => void
+  }>
+) {
+  const user = userEvent.setup()
+  const result = render(CreditTopUpOption, {
     props: {
       credits: 1000,
       description: '~100 videos*',
@@ -24,25 +31,30 @@ const mountOption = (
       plugins: [i18n]
     }
   })
+  return { user, ...result }
+}
 
 describe('CreditTopUpOption', () => {
   it('renders credit amount and description', () => {
-    const wrapper = mountOption({ credits: 5000, description: '~500 videos*' })
-    expect(wrapper.text()).toContain('5,000')
-    expect(wrapper.text()).toContain('~500 videos*')
+    renderOption({ credits: 5000, description: '~500 videos*' })
+    expect(screen.getByText('5,000')).toBeInTheDocument()
+    expect(screen.getByText('~500 videos*')).toBeInTheDocument()
   })
 
   it('applies unselected styling when not selected', () => {
-    const wrapper = mountOption({ selected: false })
-    expect(wrapper.find('div').classes()).toContain(
-      'bg-component-node-disabled'
+    const { container } = renderOption({ selected: false })
+    // eslint-disable-next-line testing-library/no-node-access
+    const rootDiv = container.firstElementChild as HTMLElement
+    expect(rootDiv).toHaveClass(
+      'bg-component-node-disabled',
+      'border-transparent'
     )
-    expect(wrapper.find('div').classes()).toContain('border-transparent')
   })
 
   it('emits select event when clicked', async () => {
-    const wrapper = mountOption()
-    await wrapper.find('div').trigger('click')
-    expect(wrapper.emitted('select')).toHaveLength(1)
+    const selectSpy = vi.fn()
+    const { user } = renderOption({ onSelect: selectSpy })
+    await user.click(screen.getByText('1,000'))
+    expect(selectSpy).toHaveBeenCalledOnce()
   })
 })
diff --git a/src/components/dialog/content/error/FindIssueButton.vue b/src/components/dialog/content/error/FindIssueButton.vue
index 7ec89ebc86..a7d2d15fe9 100644
--- a/src/components/dialog/content/error/FindIssueButton.vue
+++ b/src/components/dialog/content/error/FindIssueButton.vue
@@ -1,5 +1,9 @@
 <template>
-  <Button variant="secondary" @click="openGitHubIssues">
+  <Button
+    data-testid="error-dialog-find-issues"
+    variant="secondary"
+    @click="openGitHubIssues"
+  >
     <i class="pi pi-github" />
     {{ $t('g.findIssues') }}
   </Button>
diff --git a/src/components/dialog/content/setting/SettingItem.test.ts b/src/components/dialog/content/setting/SettingItem.test.ts
index 673fe5894c..ad5842913a 100644
--- a/src/components/dialog/content/setting/SettingItem.test.ts
+++ b/src/components/dialog/content/setting/SettingItem.test.ts
@@ -1,12 +1,15 @@
-import { mount } from '@vue/test-utils'
+import { render } from '@testing-library/vue'
+import { fromAny } from '@total-typescript/shoehorn'
 import { createPinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import Tag from 'primevue/tag'
 import Tooltip from 'primevue/tooltip'
+import { defineComponent, h } from 'vue'
 import { describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import SettingItem from '@/platform/settings/components/SettingItem.vue'
+import type { SettingParams } from '@/platform/settings/types'
 
 const i18n = createI18n({
   legacy: false,
@@ -17,60 +20,72 @@ vi.mock('@/utils/formatUtil', () => ({
   normalizeI18nKey: vi.fn()
 }))
 
+const FormItemStub = defineComponent({
+  name: 'FormItem',
+  props: {
+    item: { type: Object, default: () => ({}) },
+    id: { type: String, default: undefined },
+    formValue: { type: null, default: undefined }
+  },
+  setup(props) {
+    return () =>
+      h('div', { 'data-testid': 'form-item-data' }, JSON.stringify(props.item))
+  }
+})
+
 describe('SettingItem', () => {
-  const mountComponent = (props: Record<string, unknown>, options = {}) => {
-    return mount(SettingItem, {
+  function renderComponent(setting: SettingParams) {
+    return render(SettingItem, {
       global: {
         plugins: [PrimeVue, i18n, createPinia()],
-        components: {
-          Tag
-        },
-        directives: {
-          tooltip: Tooltip
-        },
+        components: { Tag },
         stubs: {
+          FormItem: FormItemStub,
           'i-material-symbols:experiment-outline': true
-        }
+        },
+        directives: { tooltip: Tooltip }
       },
-      // @ts-expect-error - Test utility accepts flexible props for testing edge cases
-      props,
-      ...options
+      props: { setting }
     })
   }
 
+  function getFormItemData(container: Element) {
+    // eslint-disable-next-line testing-library/no-node-access
+    const el = container.querySelector('[data-testid="form-item-data"]')
+    return JSON.parse(el!.textContent!)
+  }
+
   it('translates options that use legacy type', () => {
-    const wrapper = mountComponent({
-      setting: {
+    const { container } = renderComponent(
+      fromAny({
         id: 'Comfy.NodeInputConversionSubmenus',
         name: 'Node Input Conversion Submenus',
         type: 'combo',
-        value: 'Top',
+        defaultValue: 'Top',
         options: () => ['Correctly Translated']
-      }
-    })
+      })
+    )
 
-    // Check the FormItem component's item prop for the options
-    const formItem = wrapper.findComponent({ name: 'FormItem' })
-    const options = formItem.props('item').options
-    expect(options).toEqual([
+    const data = getFormItemData(container)
+    expect(data.options).toEqual([
       { text: 'Correctly Translated', value: 'Correctly Translated' }
     ])
   })
 
   it('handles tooltips with @ symbols without errors', () => {
-    const wrapper = mountComponent({
-      setting: {
-        id: 'TestSetting',
+    const { container } = renderComponent(
+      fromAny({
+        id: 'Comfy.NodeInputConversionSubmenus',
         name: 'Test Setting',
         type: 'boolean',
+        defaultValue: false,
         tooltip:
           'This will load a larger version of @mtb/markdown-parser that bundles shiki'
-      }
-    })
+      })
+    )
 
-    // Should not throw an error and tooltip should be preserved as-is
-    const formItem = wrapper.findComponent({ name: 'FormItem' })
-    expect(formItem.props('item').tooltip).toBe(
+    const data = getFormItemData(container)
+    expect(data.tooltip).toBe(
       'This will load a larger version of @mtb/markdown-parser that bundles shiki'
     )
   })
diff --git a/src/components/dialog/content/signin/ApiKeyForm.test.ts b/src/components/dialog/content/signin/ApiKeyForm.test.ts
index 37d37b4bf2..8d7ed6af72 100644
--- a/src/components/dialog/content/signin/ApiKeyForm.test.ts
+++ b/src/components/dialog/content/signin/ApiKeyForm.test.ts
@@ -1,14 +1,12 @@
-import type { ComponentProps } from 'vue-component-type-helpers'
-
 import { Form } from '@primevue/forms'
-import { mount } from '@vue/test-utils'
-import { createPinia } from 'pinia'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import Button from '@/components/ui/button/Button.vue'
 import PrimeVue from 'primevue/config'
 import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { createApp } from 'vue'
+import { ref } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import { getComfyPlatformBaseUrl } from '@/config/comfyApi'
@@ -16,11 +14,13 @@ import { getComfyPlatformBaseUrl } from '@/config/comfyApi'
 import ApiKeyForm from './ApiKeyForm.vue'
 
 const mockStoreApiKey = vi.fn()
-const mockLoading = vi.fn(() => false)
+const mockLoadingRef = ref(false)
 
 vi.mock('@/stores/authStore', () => ({
   useAuthStore: vi.fn(() => ({
-    loading: mockLoading()
+    get loading() {
+      return mockLoadingRef.value
+    }
   }))
 }))
 
@@ -58,62 +58,57 @@ const i18n = createI18n({
 
 describe('ApiKeyForm', () => {
   beforeEach(() => {
-    const app = createApp({})
-    app.use(PrimeVue)
     vi.clearAllMocks()
     mockStoreApiKey.mockReset()
-    mockLoading.mockReset()
+    mockLoadingRef.value = false
   })
 
-  const mountComponent = (props: ComponentProps<typeof ApiKeyForm> = {}) => {
-    return mount(ApiKeyForm, {
+  function renderComponent(props: Record<string, unknown> = {}) {
+    const user = userEvent.setup()
+    const result = render(ApiKeyForm, {
       global: {
-        plugins: [PrimeVue, createPinia(), i18n],
+        plugins: [PrimeVue, i18n],
         components: { Button, Form, InputText, Message }
       },
       props
     })
+    return { ...result, user }
   }
 
   it('renders correctly with all required elements', () => {
-    const wrapper = mountComponent()
+    renderComponent()
 
-    expect(wrapper.find('h1').text()).toBe('API Key')
-    expect(wrapper.find('label').text()).toBe('API Key')
-    expect(wrapper.findComponent(InputText).exists()).toBe(true)
-    expect(wrapper.findComponent(Button).exists()).toBe(true)
+    expect(screen.getByRole('heading', { name: 'API Key' })).toBeInTheDocument()
+    expect(screen.getByLabelText('API Key')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument()
   })
 
   it('emits back event when back button is clicked', async () => {
-    const wrapper = mountComponent()
+    const onBack = vi.fn()
+    const { user } = renderComponent({ onBack })
 
-    await wrapper.findComponent(Button).trigger('click')
-    expect(wrapper.emitted('back')).toBeTruthy()
+    await user.click(screen.getByRole('button', { name: 'Back' }))
+
+    expect(onBack).toHaveBeenCalled()
   })
 
-  it('shows loading state when submitting', async () => {
-    mockLoading.mockReturnValue(true)
-    const wrapper = mountComponent()
-    const input = wrapper.findComponent(InputText)
+  it('shows loading state when submitting', () => {
+    mockLoadingRef.value = true
+    const { container } = renderComponent()
 
-    await input.setValue(
-      'comfyui-123456789012345678901234567890123456789012345678901234567890123456789012'
-    )
-    await wrapper.find('form').trigger('submit')
-
-    const buttons = wrapper.findAllComponents(Button)
-    const submitButton = buttons.find(
-      (btn) => btn.attributes('type') === 'submit'
-    )
-    expect(submitButton?.props('loading')).toBe(true)
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const submitButton = container.querySelector('button[type="submit"]')
+    expect(submitButton).toBeDisabled()
   })
 
   it('displays help text and links correctly', () => {
-    const wrapper = mountComponent()
+    renderComponent()
 
-    const helpText = wrapper.find('small')
-    expect(helpText.text()).toContain('Need an API key?')
-    expect(helpText.find('a').attributes('href')).toBe(
+    expect(
+      screen.getByText('Need an API key?', { exact: false })
+    ).toBeInTheDocument()
+    expect(screen.getByRole('link', { name: 'Get one here' })).toHaveAttribute(
+      'href',
       `${getComfyPlatformBaseUrl()}/login`
     )
   })
diff --git a/src/components/gradientslider/GradientSlider.test.ts b/src/components/gradientslider/GradientSlider.test.ts
index 711f04bdd9..3d4f7cf336 100644
--- a/src/components/gradientslider/GradientSlider.test.ts
+++ b/src/components/gradientslider/GradientSlider.test.ts
@@ -1,8 +1,10 @@
-import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 
-import GradientSlider from './GradientSlider.vue'
+import { render, screen } from '@testing-library/vue'
+
 import type { ColorStop } from '@/lib/litegraph/src/interfaces'
+
+import GradientSlider from './GradientSlider.vue'
 import { interpolateStops, stopsToGradient } from './gradients'
 
 const TEST_STOPS: ColorStop[] = [
@@ -10,40 +12,44 @@ const TEST_STOPS: ColorStop[] = [
   { offset: 1, color: [255, 255, 255] }
 ]
 
-function mountSlider(props: {
+function renderSlider(props: {
   stops?: ColorStop[]
   modelValue: number
   min?: number
   max?: number
   step?: number
 }) {
-  return mount(GradientSlider, {
+  return render(GradientSlider, {
     props: { stops: TEST_STOPS, ...props }
   })
 }
 
 describe('GradientSlider', () => {
-  it('passes min, max, step to SliderRoot', () => {
-    const wrapper = mountSlider({
+  it('passes min and max to SliderRoot', () => {
+    renderSlider({
       modelValue: 50,
       min: -100,
       max: 100,
       step: 5
     })
-    const thumb = wrapper.find('[role="slider"]')
-    expect(thumb.attributes('aria-valuemin')).toBe('-100')
-    expect(thumb.attributes('aria-valuemax')).toBe('100')
+    const thumb = screen.getByRole('slider', { hidden: true })
+    expect(thumb).toBeInTheDocument()
+    expect(thumb).toHaveAttribute('aria-valuemin', '-100')
+    expect(thumb).toHaveAttribute('aria-valuemax', '100')
   })
 
   it('renders slider root with track and thumb', () => {
-    const wrapper = mountSlider({ modelValue: 0 })
-    expect(wrapper.find('[data-slider-impl]').exists()).toBe(true)
-    expect(wrapper.find('[role="slider"]').exists()).toBe(true)
+    const { container } = renderSlider({ modelValue: 0 })
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    expect(container.querySelector('[data-slider-impl]')).toBeInTheDocument()
+    expect(screen.getByRole('slider', { hidden: true })).toBeInTheDocument()
   })
 
   it('does not render SliderRange', () => {
-    const wrapper = mountSlider({ modelValue: 50 })
-    expect(wrapper.find('[data-slot="slider-range"]').exists()).toBe(false)
+    const { container } = renderSlider({ modelValue: 50 })
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const range = container.querySelector('[data-slot="slider-range"]')
+    expect(range).not.toBeInTheDocument()
   })
 })
 
diff --git a/src/components/graph/CanvasModeSelector.test.ts b/src/components/graph/CanvasModeSelector.test.ts
index 1133873544..eaaf9b2c44 100644
--- a/src/components/graph/CanvasModeSelector.test.ts
+++ b/src/components/graph/CanvasModeSelector.test.ts
@@ -1,5 +1,6 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import CanvasModeSelector from '@/components/graph/CanvasModeSelector.vue'
@@ -44,8 +45,9 @@ const i18n = createI18n({
 
 const mockPopoverHide = vi.fn()
 
-function createWrapper() {
-  return mount(CanvasModeSelector, {
+function renderComponent() {
+  const user = userEvent.setup()
+  render(CanvasModeSelector, {
     global: {
       plugins: [i18n],
       stubs: {
@@ -59,94 +61,98 @@ function createWrapper() {
       }
     }
   })
+  return { user }
 }
 
 describe('CanvasModeSelector', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
   it('should render menu with menuitemradio roles and aria-checked', () => {
-    const wrapper = createWrapper()
+    renderComponent()
 
-    const menu = wrapper.find('[role="menu"]')
-    expect(menu.exists()).toBe(true)
+    expect(screen.getByRole('menu')).toBeInTheDocument()
 
-    const menuItems = wrapper.findAll('[role="menuitemradio"]')
+    const menuItems = screen.getAllByRole('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')
+    expect(menuItems[0]).toHaveAttribute('aria-checked', 'true')
+    expect(menuItems[1]).toHaveAttribute('aria-checked', 'false')
   })
 
   it('should render menu items as buttons with aria-labels', () => {
-    const wrapper = createWrapper()
+    renderComponent()
 
-    const menuItems = wrapper.findAll('[role="menuitemradio"]')
-    menuItems.forEach((btn) => {
-      expect(btn.element.tagName).toBe('BUTTON')
-      expect(btn.attributes('type')).toBe('button')
+    const menuItems = screen.getAllByRole('menuitemradio')
+    menuItems.forEach((item) => {
+      expect(item.tagName).toBe('BUTTON')
+      expect(item).toHaveAttribute('type', 'button')
     })
-    expect(menuItems[0].attributes('aria-label')).toBe('Select')
-    expect(menuItems[1].attributes('aria-label')).toBe('Hand')
+    expect(menuItems[0]).toHaveAttribute('aria-label', 'Select')
+    expect(menuItems[1]).toHaveAttribute('aria-label', 'Hand')
   })
 
   it('should use roving tabindex based on active mode', () => {
-    const wrapper = createWrapper()
+    renderComponent()
 
-    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')
+    const menuItems = screen.getAllByRole('menuitemradio')
+    expect(menuItems[0]).toHaveAttribute('tabindex', '0')
+    expect(menuItems[1]).toHaveAttribute('tabindex', '-1')
   })
 
   it('should mark icons as aria-hidden', () => {
-    const wrapper = createWrapper()
+    renderComponent()
 
-    const icons = wrapper.findAll('[role="menuitemradio"] i')
-    icons.forEach((icon) => {
-      expect(icon.attributes('aria-hidden')).toBe('true')
+    const menuItems = screen.getAllByRole('menuitemradio')
+    menuItems.forEach((item) => {
+      // eslint-disable-next-line testing-library/no-node-access
+      const icons = item.querySelectorAll('i')
+      icons.forEach((icon) => {
+        expect(icon).toHaveAttribute('aria-hidden', 'true')
+      })
     })
   })
 
   it('should expose trigger button with aria-haspopup and aria-expanded', () => {
-    const wrapper = createWrapper()
+    renderComponent()
 
-    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')
+    const trigger = screen.getByRole('button', { name: 'Canvas Mode' })
+    expect(trigger).toHaveAttribute('aria-haspopup', 'menu')
+    expect(trigger).toHaveAttribute('aria-expanded', 'false')
   })
 
   it('should call focus on next item when ArrowDown is pressed', async () => {
-    const wrapper = createWrapper()
+    const { user } = renderComponent()
 
-    const menuItems = wrapper.findAll('[role="menuitemradio"]')
-    const secondItemEl = menuItems[1].element as HTMLElement
-    const focusSpy = vi.spyOn(secondItemEl, 'focus')
+    const menuItems = screen.getAllByRole('menuitemradio')
+    const focusSpy = vi.spyOn(menuItems[1], 'focus')
 
-    await menuItems[0].trigger('keydown', { key: 'ArrowDown' })
+    menuItems[0].focus()
+    await user.keyboard('{ArrowDown}')
     expect(focusSpy).toHaveBeenCalled()
   })
 
   it('should call focus on previous item when ArrowUp is pressed', async () => {
-    const wrapper = createWrapper()
+    const { user } = renderComponent()
 
-    const menuItems = wrapper.findAll('[role="menuitemradio"]')
-    const firstItemEl = menuItems[0].element as HTMLElement
-    const focusSpy = vi.spyOn(firstItemEl, 'focus')
+    const menuItems = screen.getAllByRole('menuitemradio')
+    const focusSpy = vi.spyOn(menuItems[0], 'focus')
 
-    await menuItems[1].trigger('keydown', { key: 'ArrowUp' })
+    menuItems[1].focus()
+    await user.keyboard('{ArrowUp}')
     expect(focusSpy).toHaveBeenCalled()
   })
 
   it('should close popover on Escape and restore focus to trigger', async () => {
-    const wrapper = createWrapper()
+    const { user } = renderComponent()
 
-    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')
+    const menuItems = screen.getAllByRole('menuitemradio')
+    const trigger = screen.getByRole('button', { name: 'Canvas Mode' })
+    const focusSpy = vi.spyOn(trigger, 'focus')
 
-    await menuItems[0].trigger('keydown', { key: 'Escape' })
+    menuItems[0].focus()
+    await user.keyboard('{Escape}')
     expect(mockPopoverHide).toHaveBeenCalled()
     expect(focusSpy).toHaveBeenCalled()
   })
diff --git a/src/components/graph/CanvasModeSelector.vue b/src/components/graph/CanvasModeSelector.vue
index 6c5a05e45e..2e6b842009 100644
--- a/src/components/graph/CanvasModeSelector.vue
+++ b/src/components/graph/CanvasModeSelector.vue
@@ -55,9 +55,11 @@
           <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>
+        <span
+          class="text-[9px] text-text-primary"
+          data-testid="shortcut-hint"
+          >{{ unlockCommandText }}</span
+        >
       </button>
 
       <button
@@ -76,7 +78,11 @@
           <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>
+        <span
+          class="text-[9px] text-text-primary"
+          data-testid="shortcut-hint"
+          >{{ lockCommandText }}</span
+        >
       </button>
     </div>
   </Popover>
diff --git a/src/components/graph/DomWidgets.test.ts b/src/components/graph/DomWidgets.test.ts
index 2b9c1fbf77..4d400d326a 100644
--- a/src/components/graph/DomWidgets.test.ts
+++ b/src/components/graph/DomWidgets.test.ts
@@ -1,4 +1,6 @@
-import { mount } from '@vue/test-utils'
+import { createTestingPinia } from '@pinia/testing'
+import { fromPartial } from '@total-typescript/shoehorn'
+import { render } from '@testing-library/vue'
 import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -9,7 +11,6 @@ import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import type { BaseDOMWidget } from '@/scripts/domWidget'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
-import { createTestingPinia } from '@pinia/testing'
 
 type TestWidget = BaseDOMWidget<object | string>
 
@@ -28,7 +29,7 @@ function createNode(
 }
 
 function createWidget(id: string, node: LGraphNode, y = 12): TestWidget {
-  return {
+  return fromPartial<TestWidget>({
     id,
     node,
     name: 'test_widget',
@@ -40,16 +41,16 @@ function createWidget(id: string, node: LGraphNode, y = 12): TestWidget {
     computedHeight: 40,
     margin: 10,
     isVisible: () => true
-  } as unknown as TestWidget
+  })
 }
 
 function createCanvas(graph: LGraph): LGraphCanvas {
-  return {
+  return fromPartial<LGraphCanvas>({
     graph,
     low_quality: false,
     read_only: false,
     isNodeVisible: vi.fn(() => true)
-  } as unknown as LGraphCanvas
+  })
 }
 
 function drawFrame(canvas: LGraphCanvas) {
@@ -88,7 +89,7 @@ describe('DomWidgets transition grace characterization', () => {
     const canvas = createCanvas(graphA)
     canvasStore.canvas = canvas
 
-    mount(DomWidgets, {
+    render(DomWidgets, {
       global: {
         stubs: {
           DomWidget: true
@@ -133,7 +134,7 @@ describe('DomWidgets transition grace characterization', () => {
     const canvas = createCanvas(graphB)
     canvasStore.canvas = canvas
 
-    mount(DomWidgets, {
+    render(DomWidgets, {
       global: {
         stubs: {
           DomWidget: true
@@ -159,7 +160,7 @@ describe('DomWidgets transition grace characterization', () => {
     const canvas = createCanvas(graphA)
     canvasStore.canvas = canvas
 
-    mount(DomWidgets, {
+    render(DomWidgets, {
       global: {
         stubs: {
           DomWidget: true
diff --git a/src/components/graph/NodeContextMenu.vue b/src/components/graph/NodeContextMenu.vue
index 5c06c79f65..6bd285fd8c 100644
--- a/src/components/graph/NodeContextMenu.vue
+++ b/src/components/graph/NodeContextMenu.vue
@@ -260,8 +260,26 @@ function handleColorSelect(subOption: SubMenuOption) {
   hide()
 }
 
+function constrainMenuHeight() {
+  const menuInstance = contextMenu.value as unknown as {
+    container?: HTMLElement
+  }
+  const rootList = menuInstance?.container?.querySelector(
+    ':scope > ul'
+  ) as HTMLElement | null
+  if (!rootList) return
+
+  const rect = rootList.getBoundingClientRect()
+  const maxHeight = window.innerHeight - rect.top - 8
+  if (maxHeight > 0) {
+    rootList.style.maxHeight = `${maxHeight}px`
+    rootList.style.overflowY = 'auto'
+  }
+}
+
 function onMenuShow() {
   isOpen.value = true
+  requestAnimationFrame(constrainMenuHeight)
 }
 
 function onMenuHide() {
diff --git a/src/components/graph/NodeTooltip.vue b/src/components/graph/NodeTooltip.vue
index 53af7c95ba..51948afe6e 100644
--- a/src/components/graph/NodeTooltip.vue
+++ b/src/components/graph/NodeTooltip.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="tooltipText"
+    v-show="tooltipText"
     ref="tooltipRef"
     class="node-tooltip"
     :style="{ left, top }"
@@ -34,7 +34,8 @@ const left = ref<string>()
 const top = ref<string>()
 
 function hideTooltip() {
-  return (tooltipText.value = '')
+  if (!tooltipText.value) return
+  tooltipText.value = ''
 }
 
 async function showTooltip(tooltip: string | null | undefined) {
diff --git a/src/components/graph/SelectionRectangle.vue b/src/components/graph/SelectionRectangle.vue
index 4078279e68..7fc886d586 100644
--- a/src/components/graph/SelectionRectangle.vue
+++ b/src/components/graph/SelectionRectangle.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="isVisible"
+    v-show="isVisible"
     class="pointer-events-none absolute z-9999 border border-blue-400 bg-blue-500/20"
     :style="rectangleStyle"
   />
diff --git a/src/components/graph/SelectionToolbox.vue b/src/components/graph/SelectionToolbox.vue
index ac8263b7df..4abc0f45cc 100644
--- a/src/components/graph/SelectionToolbox.vue
+++ b/src/components/graph/SelectionToolbox.vue
@@ -7,6 +7,7 @@
     <Transition name="slide-up">
       <Panel
         v-if="visible"
+        data-testid="selection-toolbox"
         class="selection-toolbox pointer-events-auto rounded-lg border border-interface-stroke bg-interface-panel-surface"
         :pt="{
           header: 'hidden',
diff --git a/src/components/graph/TitleEditor.vue b/src/components/graph/TitleEditor.vue
index e0ea66a157..27c1a8f513 100644
--- a/src/components/graph/TitleEditor.vue
+++ b/src/components/graph/TitleEditor.vue
@@ -7,6 +7,7 @@
     <EditableText
       :is-editing="showInput"
       :model-value="editedTitle"
+      :input-attrs="{ 'data-testid': 'node-title-input' }"
       @edit="onEdit"
     />
   </div>
diff --git a/src/components/graph/modals/ZoomControlsModal.test.ts b/src/components/graph/modals/ZoomControlsModal.test.ts
index cff7c17c78..00e2d9e14f 100644
--- a/src/components/graph/modals/ZoomControlsModal.test.ts
+++ b/src/components/graph/modals/ZoomControlsModal.test.ts
@@ -1,19 +1,37 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import ZoomControlsModal from '@/components/graph/modals/ZoomControlsModal.vue'
 
-// Mock functions
 const mockExecute = vi.fn()
-const mockGetCommand = vi.fn().mockReturnValue({
+const mockGetCommand = vi.fn().mockImplementation((commandId: string) => ({
   keybinding: {
     combo: {
-      getKeySequences: () => ['Ctrl', '+']
+      getKeySequences: () => [
+        'Ctrl',
+        commandId === 'Comfy.Canvas.ZoomIn'
+          ? '+'
+          : commandId === 'Comfy.Canvas.ZoomOut'
+            ? '-'
+            : '0'
+      ]
     }
   }
-})
-const mockFormatKeySequence = vi.fn().mockReturnValue('Ctrl+')
+}))
+const mockFormatKeySequence = vi
+  .fn()
+  .mockImplementation(
+    (command: {
+      keybinding: { combo: { getKeySequences: () => string[] } }
+    }) => {
+      const seq = command.keybinding.combo.getKeySequences()
+      if (seq.includes('+')) return 'Ctrl+'
+      if (seq.includes('-')) return 'Ctrl-'
+      return 'Ctrl+0'
+    }
+  )
 const mockSetAppZoom = vi.fn()
 const mockSettingGet = vi.fn().mockReturnValue(true)
 
@@ -23,11 +41,11 @@ const i18n = createI18n({
   messages: { en: {} }
 })
 
-// Mock dependencies
-
 vi.mock('@/renderer/extensions/minimap/composables/useMinimap', () => ({
   useMinimap: () => ({
-    containerStyles: { value: { backgroundColor: '#fff', borderRadius: '8px' } }
+    containerStyles: {
+      value: { backgroundColor: '#fff', borderRadius: '8px' }
+    }
   })
 }))
 
@@ -52,8 +70,8 @@ vi.mock('@/platform/settings/settingStore', () => ({
   })
 }))
 
-const createWrapper = (props = {}) => {
-  return mount(ZoomControlsModal, {
+function renderComponent(props = {}) {
+  return render(ZoomControlsModal, {
     props: {
       visible: true,
       ...props
@@ -70,90 +88,89 @@ const createWrapper = (props = {}) => {
 
 describe('ZoomControlsModal', () => {
   beforeEach(() => {
-    vi.resetAllMocks()
+    vi.clearAllMocks()
   })
 
   it('should execute zoom in command when zoom in button is clicked', async () => {
-    const wrapper = createWrapper()
+    const user = userEvent.setup()
+    renderComponent()
 
-    const buttons = wrapper.findAll('.cursor-pointer')
-    const zoomInButton = buttons.find((btn) =>
-      btn.text().includes('graphCanvasMenu.zoomIn')
-    )
-
-    expect(zoomInButton).toBeDefined()
-    await zoomInButton!.trigger('mousedown')
+    const zoomInButton = screen.getByTestId('zoom-in-action')
+    await user.click(zoomInButton)
 
     expect(mockExecute).toHaveBeenCalledWith('Comfy.Canvas.ZoomIn')
   })
 
   it('should execute zoom out command when zoom out button is clicked', async () => {
-    const wrapper = createWrapper()
+    const user = userEvent.setup()
+    renderComponent()
 
-    const buttons = wrapper.findAll('.cursor-pointer')
-    const zoomOutButton = buttons.find((btn) =>
-      btn.text().includes('graphCanvasMenu.zoomOut')
-    )
-
-    expect(zoomOutButton).toBeDefined()
-    await zoomOutButton!.trigger('mousedown')
+    const zoomOutButton = screen.getByTestId('zoom-out-action')
+    await user.click(zoomOutButton)
 
     expect(mockExecute).toHaveBeenCalledWith('Comfy.Canvas.ZoomOut')
   })
 
   it('should execute fit view command when fit view button is clicked', async () => {
-    const wrapper = createWrapper()
+    const user = userEvent.setup()
+    renderComponent()
 
-    const buttons = wrapper.findAll('.cursor-pointer')
-    const fitViewButton = buttons.find((btn) =>
-      btn.text().includes('zoomControls.zoomToFit')
-    )
-
-    expect(fitViewButton).toBeDefined()
-    await fitViewButton!.trigger('click')
+    const fitViewButton = screen.getByTestId('zoom-to-fit-action')
+    await user.click(fitViewButton)
 
     expect(mockExecute).toHaveBeenCalledWith('Comfy.Canvas.FitView')
   })
 
   it('should call setAppZoomFromPercentage with valid zoom input values', async () => {
-    const wrapper = createWrapper()
+    const user = userEvent.setup()
+    renderComponent()
 
-    const inputNumber = wrapper.findComponent({ name: 'InputNumber' })
-    expect(inputNumber.exists()).toBe(true)
-
-    // Emit the input event with PrimeVue's InputNumberInputEvent structure
-    await inputNumber.vm.$emit('input', { value: 150 })
+    const input = screen.getByRole('spinbutton')
+    await user.tripleClick(input)
+    await user.keyboard('150')
 
     expect(mockSetAppZoom).toHaveBeenCalledWith(150)
   })
 
-  it('should not call setAppZoomFromPercentage with invalid zoom input values', async () => {
-    const wrapper = createWrapper()
+  it('should not call setAppZoomFromPercentage when value is below minimum', async () => {
+    const user = userEvent.setup()
+    renderComponent()
 
-    const inputNumber = wrapper.findComponent({ name: 'InputNumber' })
-    expect(inputNumber.exists()).toBe(true)
+    const input = screen.getByRole('spinbutton')
+    await user.tripleClick(input)
+    await user.keyboard('0')
 
-    // Test out of range values
-    await inputNumber.vm.$emit('input', { value: 0 })
     expect(mockSetAppZoom).not.toHaveBeenCalled()
+  })
+
+  it('should not apply zoom values exceeding the maximum', async () => {
+    const user = userEvent.setup()
+    renderComponent()
+
+    const input = screen.getByRole('spinbutton')
+    await user.tripleClick(input)
+    await user.keyboard('100')
+    mockSetAppZoom.mockClear()
+
+    await user.keyboard('1')
 
-    await inputNumber.vm.$emit('input', { value: 1001 })
     expect(mockSetAppZoom).not.toHaveBeenCalled()
   })
 
   it('should display keyboard shortcuts for commands', () => {
-    const wrapper = createWrapper()
+    renderComponent()
 
-    const buttons = wrapper.findAll('.cursor-pointer')
-    expect(buttons.length).toBeGreaterThan(0)
-
-    // Each command button should show the keyboard shortcut
-    expect(mockFormatKeySequence).toHaveBeenCalled()
+    expect(screen.getByText('Ctrl+')).toBeInTheDocument()
+    expect(screen.getByText('Ctrl-')).toBeInTheDocument()
+    expect(screen.getByText('Ctrl+0')).toBeInTheDocument()
+    expect(mockGetCommand).toHaveBeenCalledWith('Comfy.Canvas.ZoomIn')
+    expect(mockGetCommand).toHaveBeenCalledWith('Comfy.Canvas.ZoomOut')
+    expect(mockGetCommand).toHaveBeenCalledWith('Comfy.Canvas.FitView')
   })
 
   it('should not be visible when visible prop is false', () => {
-    const wrapper = createWrapper({ visible: false })
+    renderComponent({ visible: false })
 
-    expect(wrapper.find('.absolute').exists()).toBe(false)
+    expect(screen.queryByTestId('zoom-in-action')).toBeNull()
   })
 })
diff --git a/src/components/graph/selectionToolbox/ColorPickerButton.test.ts b/src/components/graph/selectionToolbox/ColorPickerButton.test.ts
index 718455436c..5fc46f2120 100644
--- a/src/components/graph/selectionToolbox/ColorPickerButton.test.ts
+++ b/src/components/graph/selectionToolbox/ColorPickerButton.test.ts
@@ -1,5 +1,6 @@
 import type { Mock } from 'vitest'
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { createPinia, setActivePinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import Tooltip from 'primevue/tooltip'
@@ -30,7 +31,7 @@ function createMockWorkflow(
   const changeTracker = Object.assign(
     new ChangeTracker(workflow, structuredClone(defaultGraph)),
     {
-      checkState: vi.fn() as Mock
+      captureCanvasState: vi.fn() as Mock
     }
   )
 
@@ -105,8 +106,10 @@ describe('ColorPickerButton', () => {
     workflowStore.activeWorkflow = createMockWorkflow()
   })
 
-  const createWrapper = () => {
-    return mount(ColorPickerButton, {
+  function renderComponent() {
+    const user = userEvent.setup()
+
+    render(ColorPickerButton, {
       global: {
         plugins: [PrimeVue, i18n],
         directives: {
@@ -114,28 +117,30 @@ describe('ColorPickerButton', () => {
         }
       }
     })
+
+    return { user }
   }
 
   it('should render when nodes are selected', () => {
-    // Add a mock node to selectedItems
     canvasStore.selectedItems = [createMockPositionable()]
-    const wrapper = createWrapper()
-    expect(wrapper.find('button').exists()).toBe(true)
+    renderComponent()
+    expect(screen.getByTestId('color-picker-button')).toBeInTheDocument()
   })
 
   it('should toggle color picker visibility on button click', async () => {
     canvasStore.selectedItems = [createMockPositionable()]
-    const wrapper = createWrapper()
-    const button = wrapper.find('button')
+    const { user } = renderComponent()
+    const button = screen.getByTestId('color-picker-button')
 
-    expect(wrapper.findComponent({ name: 'SelectButton' }).exists()).toBe(false)
+    expect(screen.queryByTestId('noColor')).not.toBeInTheDocument()
 
-    await button.trigger('click')
-    const picker = wrapper.findComponent({ name: 'SelectButton' })
-    expect(picker.exists()).toBe(true)
-    expect(picker.findAll('button').length).toBeGreaterThan(0)
+    await user.click(button)
+    expect(screen.getByTestId('noColor')).toBeInTheDocument()
+    expect(screen.getByTestId('red')).toBeInTheDocument()
+    expect(screen.getByTestId('green')).toBeInTheDocument()
+    expect(screen.getByTestId('blue')).toBeInTheDocument()
 
-    await button.trigger('click')
-    expect(wrapper.findComponent({ name: 'SelectButton' }).exists()).toBe(false)
+    await user.click(button)
+    expect(screen.queryByTestId('noColor')).not.toBeInTheDocument()
   })
 })
diff --git a/src/components/graph/selectionToolbox/ColorPickerButton.vue b/src/components/graph/selectionToolbox/ColorPickerButton.vue
index e78bec6c30..b7ae7bc65e 100644
--- a/src/components/graph/selectionToolbox/ColorPickerButton.vue
+++ b/src/components/graph/selectionToolbox/ColorPickerButton.vue
@@ -125,7 +125,7 @@ const applyColor = (colorOption: ColorOption | null) => {
   canvasStore.canvas?.setDirty(true, true)
   currentColorOption.value = canvasColorOption
   showColorPicker.value = false
-  workflowStore.activeWorkflow?.changeTracker.checkState()
+  workflowStore.activeWorkflow?.changeTracker?.captureCanvasState()
 }
 
 const currentColorOption = ref<CanvasColorOption | null>(null)
diff --git a/src/components/graph/selectionToolbox/ExecuteButton.test.ts b/src/components/graph/selectionToolbox/ExecuteButton.test.ts
index 370b96b1d3..11cff5324a 100644
--- a/src/components/graph/selectionToolbox/ExecuteButton.test.ts
+++ b/src/components/graph/selectionToolbox/ExecuteButton.test.ts
@@ -1,4 +1,5 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { createTestingPinia } from '@pinia/testing'
 import { setActivePinia } from 'pinia'
 import PrimeVue from 'primevue/config'
@@ -12,7 +13,6 @@ import type { LGraphCanvas, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'
 
-// Mock the utils
 vi.mock('@/utils/litegraphUtil', () => ({
   isLGraphNode: vi.fn((node) => !!node?.type)
 }))
@@ -21,7 +21,6 @@ vi.mock('@/utils/nodeFilterUtil', () => ({
   isOutputNode: vi.fn((node) => !!node?.constructor?.nodeData?.output_node)
 }))
 
-// Mock the composables
 vi.mock('@/composables/graph/useSelectionState', () => ({
   useSelectionState: vi.fn(() => ({
     selectedNodes: {
@@ -49,14 +48,12 @@ describe('ExecuteButton', () => {
   })
 
   beforeEach(() => {
-    // Set up Pinia with testing utilities
     setActivePinia(
       createTestingPinia({
         createSpy: vi.fn
       })
     )
 
-    // Reset mocks
     const partialCanvas: Partial<LGraphCanvas> = {
       setDirty: vi.fn()
     }
@@ -64,14 +61,12 @@ describe('ExecuteButton', () => {
 
     mockSelectedNodes = []
 
-    // Get store instances and mock methods
     const canvasStore = useCanvasStore()
     const commandStore = useCommandStore()
 
     vi.spyOn(canvasStore, 'getCanvas').mockReturnValue(mockCanvas)
     vi.spyOn(commandStore, 'execute').mockResolvedValue()
 
-    // Update the useSelectionState mock
     vi.mocked(useSelectionState).mockReturnValue({
       selectedNodes: {
         value: mockSelectedNodes
@@ -81,33 +76,33 @@ describe('ExecuteButton', () => {
     vi.clearAllMocks()
   })
 
-  const mountComponent = () => {
-    return mount(ExecuteButton, {
+  const renderComponent = () => {
+    return render(ExecuteButton, {
       global: {
         plugins: [i18n, PrimeVue],
-        directives: { tooltip: Tooltip },
-        stubs: {
-          'i-lucide:play': { template: '<div class="play-icon" />' }
-        }
+        directives: { tooltip: Tooltip }
       }
     })
   }
 
   describe('Rendering', () => {
     it('should be able to render', () => {
-      const wrapper = mountComponent()
-      const button = wrapper.find('button')
-      expect(button.exists()).toBe(true)
+      renderComponent()
+      expect(
+        screen.getByRole('button', { name: 'Execute selected nodes' })
+      ).toBeTruthy()
     })
   })
 
   describe('Click Handler', () => {
     it('should execute Comfy.QueueSelectedOutputNodes command on click', async () => {
       const commandStore = useCommandStore()
-      const wrapper = mountComponent()
-      const button = wrapper.find('button')
+      const user = userEvent.setup()
+      renderComponent()
 
-      await button.trigger('click')
+      await user.click(
+        screen.getByRole('button', { name: 'Execute selected nodes' })
+      )
 
       expect(commandStore.execute).toHaveBeenCalledWith(
         'Comfy.QueueSelectedOutputNodes'
diff --git a/src/components/graph/selectionToolbox/InfoButton.test.ts b/src/components/graph/selectionToolbox/InfoButton.test.ts
index 61e2929202..8acb9d61cd 100644
--- a/src/components/graph/selectionToolbox/InfoButton.test.ts
+++ b/src/components/graph/selectionToolbox/InfoButton.test.ts
@@ -1,4 +1,5 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { createPinia, setActivePinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import Tooltip from 'primevue/tooltip'
@@ -18,6 +19,12 @@ vi.mock('@/stores/workspace/rightSidePanelStore', () => ({
   })
 }))
 
+vi.mock('@/platform/telemetry', () => ({
+  useTelemetry: () => ({
+    trackUiButtonClicked: vi.fn()
+  })
+}))
+
 describe('InfoButton', () => {
   const i18n = createI18n({
     legacy: false,
@@ -36,8 +43,8 @@ describe('InfoButton', () => {
     vi.clearAllMocks()
   })
 
-  const mountComponent = () => {
-    return mount(InfoButton, {
+  const renderComponent = () => {
+    return render(InfoButton, {
       global: {
         plugins: [i18n, PrimeVue],
         directives: { tooltip: Tooltip },
@@ -47,9 +54,11 @@ describe('InfoButton', () => {
   }
 
   it('should open the info panel on click', async () => {
-    const wrapper = mountComponent()
-    const button = wrapper.find('[data-testid="info-button"]')
-    await button.trigger('click')
+    const user = userEvent.setup()
+    renderComponent()
+
+    await user.click(screen.getByRole('button', { name: 'Node Info' }))
+
     expect(openPanelMock).toHaveBeenCalledWith('info')
   })
 })
diff --git a/src/components/graph/widgets/DomWidget.test.ts b/src/components/graph/widgets/DomWidget.test.ts
index 11121ed85b..7659f6da31 100644
--- a/src/components/graph/widgets/DomWidget.test.ts
+++ b/src/components/graph/widgets/DomWidget.test.ts
@@ -1,14 +1,14 @@
-import { mount } from '@vue/test-utils'
 import { createTestingPinia } from '@pinia/testing'
+import { render } from '@testing-library/vue'
+import { fromPartial } from '@total-typescript/shoehorn'
 import { setActivePinia } from 'pinia'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { reactive } from 'vue'
+import { nextTick, reactive } from 'vue'
 
-import { createMockLGraphNode } from '@/utils/__tests__/litegraphTestUtils'
 import type { BaseDOMWidget } from '@/scripts/domWidget'
 import type { DomWidgetState } from '@/stores/domWidgetStore'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
-
+import { createMockLGraphNode } from '@/utils/__tests__/litegraphTestUtils'
 import DomWidget from './DomWidget.vue'
 
 const mockUpdatePosition = vi.fn()
@@ -63,7 +63,7 @@ function createWidgetState(overrideDisabled: boolean): DomWidgetState {
     }
   })
 
-  const widget = {
+  const widget = fromPartial<BaseDOMWidget<object | string>>({
     id: 'dom-widget-id',
     name: 'test_widget',
     type: 'custom',
@@ -71,7 +71,7 @@ function createWidgetState(overrideDisabled: boolean): DomWidgetState {
     options: {},
     node,
     computedDisabled: false
-  } as unknown as BaseDOMWidget<object | string>
+  })
 
   domWidgetStore.registerWidget(widget)
   domWidgetStore.setPositionOverride(widget.id, {
@@ -100,17 +100,35 @@ describe('DomWidget disabled style', () => {
 
   it('uses disabled style when promoted override widget is computedDisabled', async () => {
     const widgetState = createWidgetState(true)
-    const wrapper = mount(DomWidget, {
+    const { container } = render(DomWidget, {
       props: {
         widgetState
       }
     })
 
     widgetState.zIndex = 3
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
-    const root = wrapper.get('.dom-widget').element as HTMLElement
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const root = container.querySelector('.dom-widget') as HTMLElement
     expect(root.style.pointerEvents).toBe('none')
     expect(root.style.opacity).toBe('0.5')
   })
+
+  it('disables pointer events when widget is not visible', async () => {
+    const widgetState = createWidgetState(false)
+    widgetState.visible = false
+    const { container } = render(DomWidget, {
+      props: {
+        widgetState
+      }
+    })
+
+    widgetState.zIndex = 3
+    await nextTick()
+
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const root = container.querySelector('.dom-widget') as HTMLElement
+    expect(root.style.pointerEvents).toBe('none')
+  })
 })
diff --git a/src/components/graph/widgets/DomWidget.vue b/src/components/graph/widgets/DomWidget.vue
index 24fce2755a..381c79d8a3 100644
--- a/src/components/graph/widgets/DomWidget.vue
+++ b/src/components/graph/widgets/DomWidget.vue
@@ -113,7 +113,10 @@ function composeStyle() {
     ...positionStyle.value,
     ...(enableDomClipping.value ? clippingStyle.value : {}),
     zIndex: widgetState.zIndex,
-    pointerEvents: widgetState.readonly || isDisabled ? 'none' : 'auto',
+    pointerEvents:
+      !widgetState.visible || widgetState.readonly || isDisabled
+        ? 'none'
+        : 'auto',
     opacity: isDisabled ? 0.5 : 1
   }
 }
diff --git a/src/components/graph/widgets/domWidgetZIndex.test.ts b/src/components/graph/widgets/domWidgetZIndex.test.ts
index fb578d998c..d70578844c 100644
--- a/src/components/graph/widgets/domWidgetZIndex.test.ts
+++ b/src/components/graph/widgets/domWidgetZIndex.test.ts
@@ -1,7 +1,7 @@
+import { fromPartial } from '@total-typescript/shoehorn'
 import { describe, expect, it } from 'vitest'
 
 import { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
-
 import { getDomWidgetZIndex } from './domWidgetZIndex'
 
 describe('getDomWidgetZIndex', () => {
@@ -15,7 +15,7 @@ describe('getDomWidgetZIndex', () => {
     first.order = 0
     second.order = 1
 
-    const nodes = (graph as unknown as { _nodes: LGraphNode[] })._nodes
+    const nodes = fromPartial<{ _nodes: LGraphNode[] }>(graph)._nodes
     nodes.splice(nodes.indexOf(first), 1)
     nodes.push(first)
 
diff --git a/src/components/helpcenter/HelpCenterMenuContent.vue b/src/components/helpcenter/HelpCenterMenuContent.vue
index 1d1b2b4734..c205615f4a 100644
--- a/src/components/helpcenter/HelpCenterMenuContent.vue
+++ b/src/components/helpcenter/HelpCenterMenuContent.vue
@@ -159,7 +159,7 @@ import { useI18n } from 'vue-i18n'
 
 import PuzzleIcon from '@/components/icons/PuzzleIcon.vue'
 import { useExternalLink } from '@/composables/useExternalLink'
-import { isCloud, isDesktop } from '@/platform/distribution/types'
+import { isCloud, isDesktop, isNightly } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import type { ReleaseNote } from '@/platform/updates/common/releaseService'
@@ -299,9 +299,18 @@ const menuItems = computed<MenuItem[]>(() => {
       type: 'item',
       icon: 'icon-[lucide--clipboard-pen]',
       label: t('helpCenter.feedback'),
+      showExternalIcon: isCloud || isNightly,
       action: () => {
-        trackResourceClick('help_feedback', false)
-        void commandStore.execute('Comfy.ContactSupport')
+        trackResourceClick('help_feedback', isCloud || isNightly)
+        if (isCloud || isNightly) {
+          window.open(
+            'https://form.typeform.com/to/q7azbWPi',
+            '_blank',
+            'noopener,noreferrer'
+          )
+        } else {
+          void commandStore.execute('Comfy.ContactSupport')
+        }
         emit('close')
       }
     },
diff --git a/src/components/honeyToast/HoneyToast.test.ts b/src/components/honeyToast/HoneyToast.test.ts
index 7174208fed..1360e35524 100644
--- a/src/components/honeyToast/HoneyToast.test.ts
+++ b/src/components/honeyToast/HoneyToast.test.ts
@@ -1,5 +1,5 @@
-import type { VueWrapper } from '@vue/test-utils'
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { defineComponent, h, nextTick, ref } from 'vue'
 
@@ -11,10 +11,11 @@ describe('HoneyToast', () => {
     document.body.innerHTML = ''
   })
 
-  function mountComponent(
+  function renderComponent(
     props: { visible: boolean; expanded?: boolean } = { visible: true }
-  ): VueWrapper {
-    return mount(HoneyToast, {
+  ) {
+    const user = userEvent.setup()
+    const { unmount } = render(HoneyToast, {
       props,
       slots: {
         default: (slotProps: { isExpanded: boolean }) =>
@@ -33,48 +34,45 @@ describe('HoneyToast', () => {
             slotProps.isExpanded ? 'Collapse' : 'Expand'
           )
       },
-      attachTo: document.body
+      container: document.body.appendChild(document.createElement('div'))
     })
+    return { user, unmount }
   }
 
   it('renders when visible is true', async () => {
-    const wrapper = mountComponent({ visible: true })
+    const { unmount } = renderComponent({ visible: true })
     await nextTick()
 
-    const toast = document.body.querySelector('[role="status"]')
-    expect(toast).toBeTruthy()
+    expect(screen.getByRole('status')).toBeInTheDocument()
 
-    wrapper.unmount()
+    unmount()
   })
 
   it('does not render when visible is false', async () => {
-    const wrapper = mountComponent({ visible: false })
+    const { unmount } = renderComponent({ visible: false })
     await nextTick()
 
-    const toast = document.body.querySelector('[role="status"]')
-    expect(toast).toBeFalsy()
+    expect(screen.queryByRole('status')).not.toBeInTheDocument()
 
-    wrapper.unmount()
+    unmount()
   })
 
   it('passes is-expanded=false to slots by default', async () => {
-    const wrapper = mountComponent({ visible: true })
+    const { unmount } = renderComponent({ visible: true })
     await nextTick()
 
-    const content = document.body.querySelector('[data-testid="content"]')
-    expect(content?.textContent).toBe('collapsed')
+    expect(screen.getByTestId('content')).toHaveTextContent('collapsed')
 
-    wrapper.unmount()
+    unmount()
   })
 
   it('has aria-live="polite" for accessibility', async () => {
-    const wrapper = mountComponent({ visible: true })
+    const { unmount } = renderComponent({ visible: true })
     await nextTick()
 
-    const toast = document.body.querySelector('[role="status"]')
-    expect(toast?.getAttribute('aria-live')).toBe('polite')
+    expect(screen.getByRole('status')).toHaveAttribute('aria-live', 'polite')
 
-    wrapper.unmount()
+    unmount()
   })
 
   it('supports v-model:expanded with reactive parent state', async () => {
@@ -98,23 +96,21 @@ describe('HoneyToast', () => {
       `
     })
 
-    const wrapper = mount(TestWrapper, { attachTo: document.body })
+    const user = userEvent.setup()
+    const { unmount } = render(TestWrapper, {
+      container: document.body.appendChild(document.createElement('div'))
+    })
     await nextTick()
 
-    const content = document.body.querySelector('[data-testid="content"]')
-    expect(content?.textContent).toBe('collapsed')
+    expect(screen.getByTestId('content')).toHaveTextContent('collapsed')
+    expect(screen.getByTestId('toggle-btn')).toHaveTextContent('Expand')
 
-    const toggleBtn = document.body.querySelector(
-      '[data-testid="toggle-btn"]'
-    ) as HTMLButtonElement
-    expect(toggleBtn?.textContent?.trim()).toBe('Expand')
-
-    toggleBtn?.click()
+    await user.click(screen.getByTestId('toggle-btn'))
     await nextTick()
 
-    expect(content?.textContent).toBe('expanded')
-    expect(toggleBtn?.textContent?.trim()).toBe('Collapse')
+    expect(screen.getByTestId('content')).toHaveTextContent('expanded')
+    expect(screen.getByTestId('toggle-btn')).toHaveTextContent('Collapse')
 
-    wrapper.unmount()
+    unmount()
   })
 })
diff --git a/src/components/imagecrop/WidgetImageCrop.vue b/src/components/imagecrop/WidgetImageCrop.vue
index e99c1dedc0..166f8480ce 100644
--- a/src/components/imagecrop/WidgetImageCrop.vue
+++ b/src/components/imagecrop/WidgetImageCrop.vue
@@ -17,8 +17,12 @@
       <div
         v-else-if="!imageUrl"
         class="flex size-full flex-col items-center justify-center text-center"
+        data-testid="crop-empty-state"
       >
-        <i class="mb-2 icon-[lucide--image] size-12" />
+        <i
+          class="mb-2 icon-[lucide--image] size-12"
+          data-testid="crop-empty-icon"
+        />
         <p class="text-sm">{{ $t('imageCrop.noInputImage') }}</p>
       </div>
 
@@ -43,6 +47,7 @@
           )
         "
         :style="cropBoxStyle"
+        data-testid="crop-overlay"
         @pointerdown="handleDragStart"
         @pointermove="handleDragMove"
         @pointerup="handleDragEnd"
diff --git a/src/components/input/MultiSelect.test.ts b/src/components/input/MultiSelect.test.ts
index c106175f21..7bcc29892f 100644
--- a/src/components/input/MultiSelect.test.ts
+++ b/src/components/input/MultiSelect.test.ts
@@ -1,4 +1,5 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { describe, expect, it } from 'vitest'
 import { nextTick, ref } from 'vue'
 import { createI18n } from 'vue-i18n'
@@ -27,7 +28,7 @@ const options = [
   { name: 'Option C', value: 'c' }
 ]
 
-function mountInParent(
+function renderInParent(
   multiSelectProps: Record<string, unknown> = {},
   modelValue: { name: string; value: string }[] = []
 ) {
@@ -49,12 +50,12 @@ function mountInParent(
     }
   }
 
-  const wrapper = mount(Parent, {
-    attachTo: document.body,
+  const { unmount } = render(Parent, {
+    container: document.body.appendChild(document.createElement('div')),
     global: { plugins: [i18n] }
   })
 
-  return { wrapper, parentEscapeCount }
+  return { unmount, parentEscapeCount }
 }
 
 function dispatchEscape(element: Element) {
@@ -73,30 +74,32 @@ function findContentElement(): HTMLElement | null {
 
 describe('MultiSelect', () => {
   it('keeps open-state border styling available while the dropdown is open', async () => {
-    const { wrapper } = mountInParent()
+    const user = userEvent.setup()
+    const { unmount } = renderInParent()
 
-    const trigger = wrapper.get('button[aria-haspopup="listbox"]')
+    const trigger = screen.getByRole('button')
 
-    expect(trigger.classes()).toContain(
+    expect(trigger).toHaveClass(
       'data-[state=open]:border-node-component-border'
     )
-    expect(trigger.attributes('aria-expanded')).toBe('false')
+    expect(trigger).toHaveAttribute('aria-expanded', 'false')
 
-    await trigger.trigger('click')
+    await user.click(trigger)
     await nextTick()
 
-    expect(trigger.attributes('aria-expanded')).toBe('true')
-    expect(trigger.attributes('data-state')).toBe('open')
+    expect(trigger).toHaveAttribute('aria-expanded', 'true')
+    expect(trigger).toHaveAttribute('data-state', 'open')
 
-    wrapper.unmount()
+    unmount()
   })
 
   describe('Escape key propagation', () => {
     it('stops Escape from propagating to parent when popover is open', async () => {
-      const { wrapper, parentEscapeCount } = mountInParent()
+      const user = userEvent.setup()
+      const { unmount, parentEscapeCount } = renderInParent()
 
-      const trigger = wrapper.find('button[aria-haspopup="listbox"]')
-      await trigger.trigger('click')
+      const trigger = screen.getByRole('button')
+      await user.click(trigger)
       await nextTick()
 
       const content = findContentElement()
@@ -107,48 +110,46 @@ describe('MultiSelect', () => {
 
       expect(parentEscapeCount.value).toBe(0)
 
-      wrapper.unmount()
+      unmount()
     })
 
     it('closes the popover when Escape is pressed', async () => {
-      const { wrapper } = mountInParent()
+      const user = userEvent.setup()
+      const { unmount } = renderInParent()
 
-      const trigger = wrapper.find('button[aria-haspopup="listbox"]')
-      await trigger.trigger('click')
+      const trigger = screen.getByRole('button')
+      await user.click(trigger)
       await nextTick()
-      expect(trigger.attributes('data-state')).toBe('open')
+      expect(trigger).toHaveAttribute('data-state', 'open')
 
       const content = findContentElement()
       dispatchEscape(content!)
       await nextTick()
 
-      expect(trigger.attributes('data-state')).toBe('closed')
+      expect(trigger).toHaveAttribute('data-state', 'closed')
 
-      wrapper.unmount()
+      unmount()
     })
   })
 
   describe('selected count badge', () => {
     it('shows selected count when items are selected', () => {
-      const { wrapper } = mountInParent({}, [
+      const { unmount } = renderInParent({}, [
         { name: 'Option A', value: 'a' },
         { name: 'Option B', value: 'b' }
       ])
 
-      expect(wrapper.text()).toContain('2')
+      expect(screen.getByText('2')).toBeInTheDocument()
 
-      wrapper.unmount()
+      unmount()
     })
 
     it('does not show count badge when no items are selected', () => {
-      const { wrapper } = mountInParent()
-      const multiSelect = wrapper.findComponent(MultiSelect)
-      const spans = multiSelect.findAll('span')
-      const countBadge = spans.find((s) => /^\d+$/.test(s.text().trim()))
+      const { unmount } = renderInParent()
 
-      expect(countBadge).toBeUndefined()
+      expect(screen.queryByText(/^\d+$/)).not.toBeInTheDocument()
 
-      wrapper.unmount()
+      unmount()
     })
   })
 })
diff --git a/src/components/input/SingleSelect.test.ts b/src/components/input/SingleSelect.test.ts
index 69ed6ee909..d421e8d117 100644
--- a/src/components/input/SingleSelect.test.ts
+++ b/src/components/input/SingleSelect.test.ts
@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
 import { describe, expect, it } from 'vitest'
 import { nextTick, ref } from 'vue'
 import { createI18n } from 'vue-i18n'
@@ -37,7 +37,7 @@ function findContentElement(): HTMLElement | null {
   return document.querySelector('[data-dismissable-layer]')
 }
 
-function mountInParent(modelValue?: string) {
+function renderInParent(modelValue?: string) {
   const parentEscapeCount = { value: 0 }
 
   const Parent = {
@@ -55,12 +55,12 @@ function mountInParent(modelValue?: string) {
     }
   }
 
-  const wrapper = mount(Parent, {
-    attachTo: document.body,
+  const { unmount } = render(Parent, {
+    container: document.body.appendChild(document.createElement('div')),
     global: { plugins: [i18n] }
   })
 
-  return { wrapper, parentEscapeCount }
+  return { unmount, parentEscapeCount }
 }
 
 async function openSelect(triggerEl: HTMLElement) {
@@ -81,10 +81,10 @@ async function openSelect(triggerEl: HTMLElement) {
 describe('SingleSelect', () => {
   describe('Escape key propagation', () => {
     it('stops Escape from propagating to parent when popover is open', async () => {
-      const { wrapper, parentEscapeCount } = mountInParent()
+      const { unmount, parentEscapeCount } = renderInParent()
 
-      const trigger = wrapper.find('button[role="combobox"]')
-      await openSelect(trigger.element as HTMLElement)
+      const trigger = screen.getByRole('combobox')
+      await openSelect(trigger)
 
       const content = findContentElement()
       expect(content).not.toBeNull()
@@ -94,23 +94,23 @@ describe('SingleSelect', () => {
 
       expect(parentEscapeCount.value).toBe(0)
 
-      wrapper.unmount()
+      unmount()
     })
 
     it('closes the popover when Escape is pressed', async () => {
-      const { wrapper } = mountInParent()
+      const { unmount } = renderInParent()
 
-      const trigger = wrapper.find('button[role="combobox"]')
-      await openSelect(trigger.element as HTMLElement)
-      expect(trigger.attributes('data-state')).toBe('open')
+      const trigger = screen.getByRole('combobox')
+      await openSelect(trigger)
+      expect(trigger).toHaveAttribute('data-state', 'open')
 
       const content = findContentElement()
       dispatchEscape(content!)
       await nextTick()
 
-      expect(trigger.attributes('data-state')).toBe('closed')
+      expect(trigger).toHaveAttribute('data-state', 'closed')
 
-      wrapper.unmount()
+      unmount()
     })
   })
 })
diff --git a/src/components/load3d/Load3D.vue b/src/components/load3d/Load3D.vue
index f370071c80..fd48c8d597 100644
--- a/src/components/load3d/Load3D.vue
+++ b/src/components/load3d/Load3D.vue
@@ -27,6 +27,7 @@
         :has-skeleton="hasSkeleton"
         @update-background-image="handleBackgroundImageUpdate"
         @export-model="handleExportModel"
+        @update-hdri-file="handleHDRIFileUpdate"
       />
       <AnimationControls
         v-if="animations && animations.length > 0"
@@ -139,6 +140,7 @@ const {
   handleClearRecording,
   handleSeek,
   handleBackgroundImageUpdate,
+  handleHDRIFileUpdate,
   handleExportModel,
   handleModelDrop,
   cleanup
diff --git a/src/components/load3d/Load3DControls.vue b/src/components/load3d/Load3DControls.vue
index 68251c7412..36dad94bfd 100644
--- a/src/components/load3d/Load3DControls.vue
+++ b/src/components/load3d/Load3DControls.vue
@@ -6,19 +6,21 @@
     @pointerup.stop
     @wheel.stop
   >
-    <div class="show-menu relative">
+    <div class="relative">
       <Button
+        ref="menuTriggerRef"
         variant="textonly"
         size="icon"
         :aria-label="$t('menu.showMenu')"
         class="rounded-full"
         @click="toggleMenu"
       >
-        <i class="pi pi-bars text-lg text-base-foreground" />
+        <i class="icon-[lucide--menu] text-lg text-base-foreground" />
       </Button>
 
       <div
         v-show="isMenuOpen"
+        ref="menuPanelRef"
         class="absolute top-0 left-12 rounded-lg bg-interface-menu-surface shadow-lg"
       >
         <div class="flex flex-col">
@@ -42,7 +44,6 @@
         </div>
       </div>
     </div>
-
     <div v-show="activeCategory" class="rounded-lg bg-smoke-700/30">
       <SceneControls
         v-if="showSceneControls"
@@ -51,6 +52,9 @@
         v-model:background-image="sceneConfig!.backgroundImage"
         v-model:background-render-mode="sceneConfig!.backgroundRenderMode"
         v-model:fov="cameraConfig!.fov"
+        :hdri-active="
+          !!lightConfig?.hdri?.hdriPath && !!lightConfig?.hdri?.enabled
+        "
         @update-background-image="handleBackgroundImageUpdate"
       />
 
@@ -70,11 +74,19 @@
         v-model:fov="cameraConfig!.fov"
       />
 
-      <LightControls
-        v-if="showLightControls"
-        v-model:light-intensity="lightConfig!.intensity"
-        v-model:material-mode="modelConfig!.materialMode"
-      />
+      <div v-if="showLightControls" class="flex flex-col">
+        <LightControls
+          v-model:light-intensity="lightConfig!.intensity"
+          v-model:material-mode="modelConfig!.materialMode"
+          v-model:hdri-config="lightConfig!.hdri"
+        />
+
+        <HDRIControls
+          v-model:hdri-config="lightConfig!.hdri"
+          :has-background-image="!!sceneConfig?.backgroundImage"
+          @update-hdri-file="handleHDRIFileUpdate"
+        />
+      </div>
 
       <ExportControls
         v-if="showExportControls"
@@ -85,10 +97,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, ref } from 'vue'
 
 import CameraControls from '@/components/load3d/controls/CameraControls.vue'
+import { useDismissableOverlay } from '@/composables/useDismissableOverlay'
 import ExportControls from '@/components/load3d/controls/ExportControls.vue'
+import HDRIControls from '@/components/load3d/controls/HDRIControls.vue'
 import LightControls from '@/components/load3d/controls/LightControls.vue'
 import ModelControls from '@/components/load3d/controls/ModelControls.vue'
 import SceneControls from '@/components/load3d/controls/SceneControls.vue'
@@ -117,6 +131,17 @@ const cameraConfig = defineModel<CameraConfig>('cameraConfig')
 const lightConfig = defineModel<LightConfig>('lightConfig')
 
 const isMenuOpen = ref(false)
+const menuPanelRef = ref<HTMLElement | null>(null)
+const menuTriggerRef = ref<InstanceType<typeof Button> | null>(null)
+
+useDismissableOverlay({
+  isOpen: isMenuOpen,
+  getOverlayEl: () => menuPanelRef.value,
+  getTriggerEl: () => menuTriggerRef.value?.$el ?? null,
+  onDismiss: () => {
+    isMenuOpen.value = false
+  }
+})
 const activeCategory = ref<string>('scene')
 const categoryLabels: Record<string, string> = {
   scene: 'load3d.scene',
@@ -160,21 +185,26 @@ const selectCategory = (category: string) => {
   isMenuOpen.value = false
 }
 
+const categoryIcons = {
+  scene: 'icon-[lucide--image]',
+  model: 'icon-[lucide--box]',
+  camera: 'icon-[lucide--camera]',
+  light: 'icon-[lucide--sun]',
+  export: 'icon-[lucide--download]'
+} as const
+
 const getCategoryIcon = (category: string) => {
-  const icons = {
-    scene: 'pi pi-image',
-    model: 'pi pi-box',
-    camera: 'pi pi-camera',
-    light: 'pi pi-sun',
-    export: 'pi pi-download'
-  }
-  // @ts-expect-error fixme ts strict error
-  return `${icons[category]} text-base-foreground text-lg`
+  const icon =
+    category in categoryIcons
+      ? categoryIcons[category as keyof typeof categoryIcons]
+      : 'icon-[lucide--circle]'
+  return cn(icon, 'text-lg text-base-foreground')
 }
 
 const emit = defineEmits<{
   (e: 'updateBackgroundImage', file: File | null): void
   (e: 'exportModel', format: string): void
+  (e: 'updateHdriFile', file: File | null): void
 }>()
 
 const handleBackgroundImageUpdate = (file: File | null) => {
@@ -185,19 +215,7 @@ const handleExportModel = (format: string) => {
   emit('exportModel', format)
 }
 
-const closeSlider = (e: MouseEvent) => {
-  const target = e.target as HTMLElement
-
-  if (!target.closest('.show-menu')) {
-    isMenuOpen.value = false
-  }
+const handleHDRIFileUpdate = (file: File | null) => {
+  emit('updateHdriFile', file)
 }
-
-onMounted(() => {
-  document.addEventListener('click', closeSlider)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', closeSlider)
-})
 </script>
diff --git a/src/components/load3d/Load3dViewerContent.vue b/src/components/load3d/Load3dViewerContent.vue
index aad944adea..6be0dfa6bd 100644
--- a/src/components/load3d/Load3dViewerContent.vue
+++ b/src/components/load3d/Load3dViewerContent.vue
@@ -37,7 +37,7 @@
       </div>
     </div>
 
-    <div class="flex w-72 flex-col">
+    <div class="flex w-72 flex-col" data-testid="load3d-viewer-sidebar">
       <div class="flex-1 overflow-y-auto p-4">
         <div class="space-y-2">
           <div class="space-y-4 p-2">
@@ -197,4 +197,15 @@ onBeforeUnmount(() => {
 :deep(.p-panel-content) {
   padding: 0;
 }
+
+:deep(.p-slider) {
+  height: 6px;
+}
+
+:deep(.p-slider-handle) {
+  width: 14px;
+  height: 14px;
+  margin-top: -4px;
+  margin-left: -7px;
+}
 </style>
diff --git a/src/components/load3d/controls/HDRIControls.vue b/src/components/load3d/controls/HDRIControls.vue
new file mode 100644
index 0000000000..7e52f9109d
--- /dev/null
+++ b/src/components/load3d/controls/HDRIControls.vue
@@ -0,0 +1,148 @@
+<template>
+  <div v-if="!hasBackgroundImage || hdriConfig?.hdriPath" class="flex flex-col">
+    <Button
+      v-tooltip.right="{
+        value: hdriConfig?.hdriPath
+          ? $t('load3d.hdri.changeFile')
+          : $t('load3d.hdri.uploadFile'),
+        showDelay: 300
+      }"
+      size="icon"
+      variant="textonly"
+      class="rounded-full"
+      :aria-label="
+        hdriConfig?.hdriPath
+          ? $t('load3d.hdri.changeFile')
+          : $t('load3d.hdri.uploadFile')
+      "
+      @click="triggerFileInput"
+    >
+      <i class="icon-[lucide--upload] text-lg text-base-foreground" />
+    </Button>
+
+    <template v-if="hdriConfig?.hdriPath">
+      <Button
+        v-tooltip.right="{
+          value: $t('load3d.hdri.label'),
+          showDelay: 300
+        }"
+        size="icon"
+        variant="textonly"
+        :class="
+          cn('rounded-full', hdriConfig?.enabled && 'ring-2 ring-white/50')
+        "
+        :aria-label="$t('load3d.hdri.label')"
+        @click="toggleEnabled"
+      >
+        <i class="icon-[lucide--globe] text-lg text-base-foreground" />
+      </Button>
+
+      <Button
+        v-tooltip.right="{
+          value: $t('load3d.hdri.showAsBackground'),
+          showDelay: 300
+        }"
+        size="icon"
+        variant="textonly"
+        :class="
+          cn(
+            'rounded-full',
+            hdriConfig?.showAsBackground && 'ring-2 ring-white/50'
+          )
+        "
+        :aria-label="$t('load3d.hdri.showAsBackground')"
+        @click="toggleShowAsBackground"
+      >
+        <i class="icon-[lucide--image] text-lg text-base-foreground" />
+      </Button>
+
+      <Button
+        v-tooltip.right="{
+          value: $t('load3d.hdri.removeFile'),
+          showDelay: 300
+        }"
+        size="icon"
+        variant="textonly"
+        class="rounded-full"
+        :aria-label="$t('load3d.hdri.removeFile')"
+        @click="onRemoveHDRI"
+      >
+        <i class="icon-[lucide--x] text-lg text-base-foreground" />
+      </Button>
+    </template>
+
+    <input
+      ref="fileInputRef"
+      type="file"
+      class="hidden"
+      :accept="SUPPORTED_HDRI_EXTENSIONS_ACCEPT"
+      @change="onFileChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import {
+  SUPPORTED_HDRI_EXTENSIONS,
+  SUPPORTED_HDRI_EXTENSIONS_ACCEPT
+} from '@/extensions/core/load3d/constants'
+import type { HDRIConfig } from '@/extensions/core/load3d/interfaces'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import { cn } from '@/utils/tailwindUtil'
+
+const { t } = useI18n()
+
+const { hasBackgroundImage = false } = defineProps<{
+  hasBackgroundImage?: boolean
+}>()
+
+const hdriConfig = defineModel<HDRIConfig>('hdriConfig')
+
+const emit = defineEmits<{
+  (e: 'updateHdriFile', file: File | null): void
+}>()
+
+const fileInputRef = ref<HTMLInputElement | null>(null)
+
+function triggerFileInput() {
+  fileInputRef.value?.click()
+}
+
+function onFileChange(event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0] ?? null
+  input.value = ''
+  if (file) {
+    const ext = `.${file.name.split('.').pop()?.toLowerCase() ?? ''}`
+    if (!SUPPORTED_HDRI_EXTENSIONS.has(ext)) {
+      useToastStore().addAlert(t('toastMessages.unsupportedHDRIFormat'))
+      return
+    }
+  }
+  emit('updateHdriFile', file)
+}
+
+function toggleEnabled() {
+  if (!hdriConfig.value) return
+  hdriConfig.value = {
+    ...hdriConfig.value,
+    enabled: !hdriConfig.value.enabled
+  }
+}
+
+function toggleShowAsBackground() {
+  if (!hdriConfig.value) return
+  hdriConfig.value = {
+    ...hdriConfig.value,
+    showAsBackground: !hdriConfig.value.showAsBackground
+  }
+}
+
+function onRemoveHDRI() {
+  emit('updateHdriFile', null)
+}
+</script>
diff --git a/src/components/load3d/controls/LightControls.vue b/src/components/load3d/controls/LightControls.vue
index ebf693913d..d9e7ad3e6a 100644
--- a/src/components/load3d/controls/LightControls.vue
+++ b/src/components/load3d/controls/LightControls.vue
@@ -1,7 +1,24 @@
 <template>
   <div class="flex flex-col">
-    <div v-if="showLightIntensityButton" class="show-light-intensity relative">
+    <div
+      v-if="embedded && showIntensityControl"
+      class="flex w-[200px] flex-col gap-2 rounded-lg bg-black/50 p-3 shadow-lg"
+    >
+      <span class="text-sm font-medium text-base-foreground">{{
+        $t('load3d.lightIntensity')
+      }}</span>
+      <Slider
+        :model-value="sliderValue"
+        class="w-full"
+        :min="sliderMin"
+        :max="sliderMax"
+        :step="sliderStep"
+        @update:model-value="onSliderUpdate"
+      />
+    </div>
+    <div v-else-if="showIntensityControl" class="relative">
       <Button
+        ref="triggerRef"
         v-tooltip.right="{
           value: $t('load3d.lightIntensity'),
           showDelay: 300
@@ -12,19 +29,20 @@
         :aria-label="$t('load3d.lightIntensity')"
         @click="toggleLightIntensity"
       >
-        <i class="pi pi-sun text-lg text-base-foreground" />
+        <i class="icon-[lucide--sun] text-lg text-base-foreground" />
       </Button>
       <div
         v-show="showLightIntensity"
-        class="absolute top-0 left-12 rounded-lg bg-black/50 p-4 shadow-lg"
-        style="width: 150px"
+        ref="panelRef"
+        class="absolute top-0 left-12 w-[200px] rounded-lg bg-black/50 p-3 shadow-lg"
       >
         <Slider
-          v-model="lightIntensity"
+          :model-value="sliderValue"
           class="w-full"
-          :min="lightIntensityMinimum"
-          :max="lightIntensityMaximum"
-          :step="lightAdjustmentIncrement"
+          :min="sliderMin"
+          :max="sliderMax"
+          :step="sliderStep"
+          @update:model-value="onSliderUpdate"
         />
       </div>
     </div>
@@ -32,20 +50,30 @@
 </template>
 
 <script setup lang="ts">
-import Slider from 'primevue/slider'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, ref } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
-import type { MaterialMode } from '@/extensions/core/load3d/interfaces'
+import Slider from '@/components/ui/slider/Slider.vue'
+import { useDismissableOverlay } from '@/composables/useDismissableOverlay'
+import type {
+  HDRIConfig,
+  MaterialMode
+} from '@/extensions/core/load3d/interfaces'
 import { useSettingStore } from '@/platform/settings/settingStore'
 
 const lightIntensity = defineModel<number>('lightIntensity')
 const materialMode = defineModel<MaterialMode>('materialMode')
+const hdriConfig = defineModel<HDRIConfig | undefined>('hdriConfig')
 
-const showLightIntensityButton = computed(
-  () => materialMode.value === 'original'
+const { embedded = false } = defineProps<{
+  embedded?: boolean
+}>()
+
+const usesHdriIntensity = computed(
+  () => !!hdriConfig.value?.hdriPath?.length && !!hdriConfig.value?.enabled
 )
-const showLightIntensity = ref(false)
+
+const showIntensityControl = computed(() => materialMode.value === 'original')
 
 const lightIntensityMaximum = useSettingStore().get(
   'Comfy.Load3D.LightIntensityMaximum'
@@ -57,23 +85,49 @@ const lightAdjustmentIncrement = useSettingStore().get(
   'Comfy.Load3D.LightAdjustmentIncrement'
 )
 
+const sliderMin = computed(() =>
+  usesHdriIntensity.value ? 0 : lightIntensityMinimum
+)
+const sliderMax = computed(() =>
+  usesHdriIntensity.value ? 5 : lightIntensityMaximum
+)
+const sliderStep = computed(() =>
+  usesHdriIntensity.value ? 0.1 : lightAdjustmentIncrement
+)
+
+const sliderValue = computed(() => {
+  if (usesHdriIntensity.value) {
+    return [hdriConfig.value?.intensity ?? 1]
+  }
+  return [lightIntensity.value ?? lightIntensityMinimum]
+})
+
+const showLightIntensity = ref(false)
+const panelRef = ref<HTMLElement | null>(null)
+const triggerRef = ref<InstanceType<typeof Button> | null>(null)
+
+useDismissableOverlay({
+  isOpen: showLightIntensity,
+  getOverlayEl: () => panelRef.value,
+  getTriggerEl: () => triggerRef.value?.$el ?? null,
+  onDismiss: () => {
+    showLightIntensity.value = false
+  }
+})
+
 function toggleLightIntensity() {
   showLightIntensity.value = !showLightIntensity.value
 }
 
-function closeLightSlider(e: MouseEvent) {
-  const target = e.target as HTMLElement
-
-  if (!target.closest('.show-light-intensity')) {
-    showLightIntensity.value = false
+function onSliderUpdate(value: number[] | undefined) {
+  if (!value?.length) return
+  const next = value[0]
+  if (usesHdriIntensity.value) {
+    const h = hdriConfig.value
+    if (!h) return
+    hdriConfig.value = { ...h, intensity: next }
+  } else {
+    lightIntensity.value = next
   }
 }
-
-onMounted(() => {
-  document.addEventListener('click', closeLightSlider)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', closeLightSlider)
-})
 </script>
diff --git a/src/components/load3d/controls/SceneControls.vue b/src/components/load3d/controls/SceneControls.vue
index 911bea78a0..3925b0d381 100644
--- a/src/components/load3d/controls/SceneControls.vue
+++ b/src/components/load3d/controls/SceneControls.vue
@@ -11,53 +11,55 @@
       <i class="pi pi-table text-lg text-base-foreground" />
     </Button>
 
-    <div v-if="!hasBackgroundImage">
-      <Button
-        v-tooltip.right="{
-          value: $t('load3d.backgroundColor'),
-          showDelay: 300
-        }"
-        variant="textonly"
-        size="icon"
-        class="rounded-full"
-        :aria-label="$t('load3d.backgroundColor')"
-        @click="openColorPicker"
-      >
-        <i class="pi pi-palette text-lg text-base-foreground" />
-        <input
-          ref="colorPickerRef"
-          type="color"
-          :value="backgroundColor"
-          class="pointer-events-none absolute m-0 size-0 p-0 opacity-0"
-          @input="
-            updateBackgroundColor(($event.target as HTMLInputElement).value)
-          "
-        />
-      </Button>
-    </div>
+    <template v-if="!hdriActive">
+      <div v-if="!hasBackgroundImage">
+        <Button
+          v-tooltip.right="{
+            value: $t('load3d.backgroundColor'),
+            showDelay: 300
+          }"
+          variant="textonly"
+          size="icon"
+          class="rounded-full"
+          :aria-label="$t('load3d.backgroundColor')"
+          @click="openColorPicker"
+        >
+          <i class="pi pi-palette text-lg text-base-foreground" />
+          <input
+            ref="colorPickerRef"
+            type="color"
+            :value="backgroundColor"
+            class="pointer-events-none absolute m-0 size-0 p-0 opacity-0"
+            @input="
+              updateBackgroundColor(($event.target as HTMLInputElement).value)
+            "
+          />
+        </Button>
+      </div>
 
-    <div v-if="!hasBackgroundImage">
-      <Button
-        v-tooltip.right="{
-          value: $t('load3d.uploadBackgroundImage'),
-          showDelay: 300
-        }"
-        variant="textonly"
-        size="icon"
-        class="rounded-full"
-        :aria-label="$t('load3d.uploadBackgroundImage')"
-        @click="openImagePicker"
-      >
-        <i class="pi pi-image text-lg text-base-foreground" />
-        <input
-          ref="imagePickerRef"
-          type="file"
-          accept="image/*"
-          class="pointer-events-none absolute m-0 size-0 p-0 opacity-0"
-          @change="uploadBackgroundImage"
-        />
-      </Button>
-    </div>
+      <div v-if="!hasBackgroundImage">
+        <Button
+          v-tooltip.right="{
+            value: $t('load3d.uploadBackgroundImage'),
+            showDelay: 300
+          }"
+          variant="textonly"
+          size="icon"
+          class="rounded-full"
+          :aria-label="$t('load3d.uploadBackgroundImage')"
+          @click="openImagePicker"
+        >
+          <i class="pi pi-image text-lg text-base-foreground" />
+          <input
+            ref="imagePickerRef"
+            type="file"
+            accept="image/*"
+            class="pointer-events-none absolute m-0 size-0 p-0 opacity-0"
+            @change="uploadBackgroundImage"
+          />
+        </Button>
+      </div>
+    </template>
 
     <div v-if="hasBackgroundImage">
       <Button
@@ -112,6 +114,10 @@ import Button from '@/components/ui/button/Button.vue'
 import type { BackgroundRenderModeType } from '@/extensions/core/load3d/interfaces'
 import { cn } from '@/utils/tailwindUtil'
 
+const { hdriActive = false } = defineProps<{
+  hdriActive?: boolean
+}>()
+
 const emit = defineEmits<{
   (e: 'updateBackgroundImage', file: File | null): void
 }>()
diff --git a/src/components/load3d/controls/viewer/ViewerCameraControls.vue b/src/components/load3d/controls/viewer/ViewerCameraControls.vue
index bc63d39df8..f6712c7132 100644
--- a/src/components/load3d/controls/viewer/ViewerCameraControls.vue
+++ b/src/components/load3d/controls/viewer/ViewerCameraControls.vue
@@ -1,9 +1,7 @@
 <template>
   <div class="space-y-4">
-    <div class="space-y-4">
-      <label>
-        {{ t('load3d.viewer.cameraType') }}
-      </label>
+    <div class="flex flex-col gap-2">
+      <label>{{ t('load3d.viewer.cameraType') }}</label>
       <Select
         v-model="cameraType"
         :options="cameras"
@@ -13,7 +11,7 @@
       </Select>
     </div>
 
-    <div v-if="showFOVButton" class="space-y-4">
+    <div v-if="showFOVButton" class="flex flex-col gap-2">
       <label>{{ t('load3d.fov') }}</label>
       <Slider
         v-model="fov"
diff --git a/src/components/load3d/controls/viewer/ViewerLightControls.vue b/src/components/load3d/controls/viewer/ViewerLightControls.vue
index ba830198e1..0df98f464f 100644
--- a/src/components/load3d/controls/viewer/ViewerLightControls.vue
+++ b/src/components/load3d/controls/viewer/ViewerLightControls.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="space-y-4">
+  <div class="flex flex-col gap-2">
     <label>{{ $t('load3d.lightIntensity') }}</label>
 
     <Slider
diff --git a/src/components/load3d/controls/viewer/ViewerModelControls.vue b/src/components/load3d/controls/viewer/ViewerModelControls.vue
index 8a850c4a95..f8896dfeeb 100644
--- a/src/components/load3d/controls/viewer/ViewerModelControls.vue
+++ b/src/components/load3d/controls/viewer/ViewerModelControls.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="space-y-4">
-    <div>
+    <div class="flex flex-col gap-2">
       <label>{{ $t('load3d.upDirection') }}</label>
       <Select
         v-model="upDirection"
@@ -10,7 +10,7 @@
       />
     </div>
 
-    <div v-if="!hideMaterialMode">
+    <div v-if="!hideMaterialMode" class="flex flex-col gap-2">
       <label>{{ $t('load3d.materialMode') }}</label>
       <Select
         v-model="materialMode"
diff --git a/src/components/load3d/controls/viewer/ViewerSceneControls.vue b/src/components/load3d/controls/viewer/ViewerSceneControls.vue
index 7df65ab004..25f37be254 100644
--- a/src/components/load3d/controls/viewer/ViewerSceneControls.vue
+++ b/src/components/load3d/controls/viewer/ViewerSceneControls.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="space-y-4">
-    <div v-if="!hasBackgroundImage">
+    <div v-if="!hasBackgroundImage" class="flex flex-col gap-2">
       <label>
         {{ $t('load3d.backgroundColor') }}
       </label>
-      <input v-model="backgroundColor" type="color" class="w-full" />
+      <input v-model="backgroundColor" type="color" class="h-8 w-full" />
     </div>
 
     <div>
diff --git a/src/components/node/NodePreview.test.ts b/src/components/node/NodePreview.test.ts
index a5dae56380..dfe989e9ea 100644
--- a/src/components/node/NodePreview.test.ts
+++ b/src/components/node/NodePreview.test.ts
@@ -1,10 +1,11 @@
-import { mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import { beforeAll, describe, expect, it, vi } from 'vitest'
 import { createApp } from 'vue'
 import { createI18n } from 'vue-i18n'
 
+import { render, screen } from '@testing-library/vue'
+
 import type { ComfyNodeDef as ComfyNodeDefV2 } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import * as markdownRendererUtil from '@/utils/markdownRendererUtil'
 
@@ -54,13 +55,11 @@ describe('NodePreview', () => {
     description: 'Test node description'
   }
 
-  const mountComponent = (nodeDef: ComfyNodeDefV2 = mockNodeDef) => {
-    return mount(NodePreview, {
+  function renderComponent(nodeDef: ComfyNodeDefV2 = mockNodeDef) {
+    return render(NodePreview, {
       global: {
         plugins: [PrimeVue, i18n, pinia],
-        stubs: {
-          // Stub stores if needed
-        }
+        stubs: {}
       },
       props: {
         nodeDef
@@ -69,18 +68,18 @@ describe('NodePreview', () => {
   }
 
   it('renders node preview with correct structure', () => {
-    const wrapper = mountComponent()
+    renderComponent()
 
-    expect(wrapper.find('._sb_node_preview').exists()).toBe(true)
-    expect(wrapper.find('.node_header').exists()).toBe(true)
-    expect(wrapper.find('._sb_preview_badge').text()).toBe('Preview')
+    expect(screen.getByTestId('node-preview')).toBeInTheDocument()
+    expect(screen.getByTestId('node-header')).toBeInTheDocument()
+    expect(screen.getByText('Preview')).toBeInTheDocument()
   })
 
   it('sets title attribute on node header with full display name', () => {
-    const wrapper = mountComponent()
-    const nodeHeader = wrapper.find('.node_header')
+    renderComponent()
+    const nodeHeader = screen.getByTestId('node-header')
 
-    expect(nodeHeader.attributes('title')).toBe(mockNodeDef.display_name)
+    expect(nodeHeader).toHaveAttribute('title', mockNodeDef.display_name)
   })
 
   it('displays truncated long node names with ellipsis', () => {
@@ -90,17 +89,11 @@ describe('NodePreview', () => {
         'This Is An Extremely Long Node Name That Should Definitely Be Truncated With Ellipsis To Prevent Layout Issues'
     }
 
-    const wrapper = mountComponent(longNameNodeDef)
-    const nodeHeader = wrapper.find('.node_header')
+    renderComponent(longNameNodeDef)
+    const nodeHeader = screen.getByTestId('node-header')
 
-    // Verify the title attribute contains the full name
-    expect(nodeHeader.attributes('title')).toBe(longNameNodeDef.display_name)
-
-    // Verify overflow handling classes are applied
-    expect(nodeHeader.classes()).toContain('text-ellipsis')
-
-    // The actual text content should still be the full name (CSS handles truncation)
-    expect(nodeHeader.text()).toContain(longNameNodeDef.display_name)
+    expect(nodeHeader).toHaveAttribute('title', longNameNodeDef.display_name)
+    expect(nodeHeader).toHaveTextContent(longNameNodeDef.display_name!)
   })
 
   it('handles short node names without issues', () => {
@@ -109,18 +102,18 @@ describe('NodePreview', () => {
       display_name: 'Short'
     }
 
-    const wrapper = mountComponent(shortNameNodeDef)
-    const nodeHeader = wrapper.find('.node_header')
+    renderComponent(shortNameNodeDef)
+    const nodeHeader = screen.getByTestId('node-header')
 
-    expect(nodeHeader.attributes('title')).toBe('Short')
-    expect(nodeHeader.text()).toContain('Short')
+    expect(nodeHeader).toHaveAttribute('title', 'Short')
+    expect(nodeHeader).toHaveTextContent('Short')
   })
 
   it('applies proper spacing to the dot element', () => {
-    const wrapper = mountComponent()
-    const headdot = wrapper.find('.headdot')
+    renderComponent()
+    const headdot = screen.getByTestId('head-dot')
 
-    expect(headdot.classes()).toContain('pr-3')
+    expect(headdot).toBeInTheDocument()
   })
 
   describe('Description Rendering', () => {
@@ -130,11 +123,13 @@ describe('NodePreview', () => {
         description: 'This is a plain text description'
       }
 
-      const wrapper = mountComponent(plainTextNodeDef)
-      const description = wrapper.find('._sb_description')
+      renderComponent(plainTextNodeDef)
+      const description = screen.getByTestId('node-description')
 
-      expect(description.exists()).toBe(true)
-      expect(description.html()).toContain('This is a plain text description')
+      expect(description).toBeInTheDocument()
+      expect(description.innerHTML).toContain(
+        'This is a plain text description'
+      )
     })
 
     it('renders markdown description with formatting', () => {
@@ -143,13 +138,13 @@ describe('NodePreview', () => {
         description: '**Bold text** and *italic text* with `code`'
       }
 
-      const wrapper = mountComponent(markdownNodeDef)
-      const description = wrapper.find('._sb_description')
+      renderComponent(markdownNodeDef)
+      const description = screen.getByTestId('node-description')
 
-      expect(description.exists()).toBe(true)
-      expect(description.html()).toContain('<strong>Bold text</strong>')
-      expect(description.html()).toContain('<em>italic text</em>')
-      expect(description.html()).toContain('<code>code</code>')
+      expect(description).toBeInTheDocument()
+      expect(description.innerHTML).toContain('<strong>Bold text</strong>')
+      expect(description.innerHTML).toContain('<em>italic text</em>')
+      expect(description.innerHTML).toContain('<code>code</code>')
     })
 
     it('does not render description element when description is empty', () => {
@@ -158,20 +153,16 @@ describe('NodePreview', () => {
         description: ''
       }
 
-      const wrapper = mountComponent(noDescriptionNodeDef)
-      const description = wrapper.find('._sb_description')
+      renderComponent(noDescriptionNodeDef)
 
-      expect(description.exists()).toBe(false)
+      expect(screen.queryByTestId('node-description')).not.toBeInTheDocument()
     })
 
     it('does not render description element when description is undefined', () => {
       const { description, ...nodeDefWithoutDescription } = mockNodeDef
-      const wrapper = mountComponent(
-        nodeDefWithoutDescription as ComfyNodeDefV2
-      )
-      const descriptionElement = wrapper.find('._sb_description')
+      renderComponent(nodeDefWithoutDescription as ComfyNodeDefV2)
 
-      expect(descriptionElement.exists()).toBe(false)
+      expect(screen.queryByTestId('node-description')).not.toBeInTheDocument()
     })
 
     it('calls renderMarkdownToHtml utility function', () => {
@@ -183,7 +174,7 @@ describe('NodePreview', () => {
         description: testDescription
       }
 
-      mountComponent(nodeDefWithDescription)
+      renderComponent(nodeDefWithDescription)
 
       expect(spy).toHaveBeenCalledWith(testDescription)
       spy.mockRestore()
@@ -196,21 +187,13 @@ describe('NodePreview', () => {
           'Safe **markdown** content <script>alert("xss")</script> with `code` blocks'
       }
 
-      const wrapper = mountComponent(unsafeNodeDef)
-      const description = wrapper.find('._sb_description')
+      renderComponent(unsafeNodeDef)
+      const description = screen.getByTestId('node-description')
 
-      // The description should still exist because there's safe content
-      if (description.exists()) {
-        // Should not contain script tags (sanitized by DOMPurify)
-        expect(description.html()).not.toContain('<script>')
-        expect(description.html()).not.toContain('alert("xss")')
-        // Should contain the safe markdown content rendered as HTML
-        expect(description.html()).toContain('<strong>markdown</strong>')
-        expect(description.html()).toContain('<code>code</code>')
-      } else {
-        // If DOMPurify removes everything, that's also acceptable for security
-        expect(description.exists()).toBe(false)
-      }
+      expect(description.innerHTML).not.toContain('<script>')
+      expect(description.innerHTML).not.toContain('alert("xss")')
+      expect(description.innerHTML).toContain('<strong>markdown</strong>')
+      expect(description.innerHTML).toContain('<code>code</code>')
     })
 
     it('handles markdown with line breaks', () => {
@@ -219,12 +202,11 @@ describe('NodePreview', () => {
         description: 'Line 1\n\nLine 3 after empty line'
       }
 
-      const wrapper = mountComponent(multilineNodeDef)
-      const description = wrapper.find('._sb_description')
+      renderComponent(multilineNodeDef)
+      const description = screen.getByTestId('node-description')
 
-      expect(description.exists()).toBe(true)
-      // Should contain paragraph tags for proper line break handling
-      expect(description.html()).toContain('<p>')
+      expect(description).toBeInTheDocument()
+      expect(description.innerHTML).toContain('<p>')
     })
 
     it('handles markdown lists', () => {
@@ -233,19 +215,19 @@ describe('NodePreview', () => {
         description: '- Item 1\n- Item 2\n- Item 3'
       }
 
-      const wrapper = mountComponent(listNodeDef)
-      const description = wrapper.find('._sb_description')
+      renderComponent(listNodeDef)
+      const description = screen.getByTestId('node-description')
 
-      expect(description.exists()).toBe(true)
-      expect(description.html()).toContain('<ul>')
-      expect(description.html()).toContain('<li>')
+      expect(description).toBeInTheDocument()
+      expect(description.innerHTML).toContain('<ul>')
+      expect(description.innerHTML).toContain('<li>')
     })
 
-    it('applies correct styling classes to description', () => {
-      const wrapper = mountComponent()
-      const description = wrapper.find('._sb_description')
+    it('renders description element', () => {
+      renderComponent()
+      const description = screen.getByTestId('node-description')
 
-      expect(description.classes()).toContain('_sb_description')
+      expect(description).toBeInTheDocument()
     })
 
     it('uses v-html directive for rendered content', () => {
@@ -254,12 +236,11 @@ describe('NodePreview', () => {
         description: 'Content with **bold** text'
       }
 
-      const wrapper = mountComponent(htmlNodeDef)
-      const description = wrapper.find('._sb_description')
+      renderComponent(htmlNodeDef)
+      const description = screen.getByTestId('node-description')
 
-      // The component should render the HTML, not escape it
-      expect(description.html()).toContain('<strong>bold</strong>')
-      expect(description.html()).not.toContain('&lt;strong&gt;')
+      expect(description.innerHTML).toContain('<strong>bold</strong>')
+      expect(description.innerHTML).not.toContain('&lt;strong&gt;')
     })
 
     it('prevents XSS attacks by sanitizing dangerous HTML elements', () => {
@@ -269,17 +250,12 @@ describe('NodePreview', () => {
           'Normal text <img src="x" onerror="alert(\'XSS\')" /> and **bold** text'
       }
 
-      const wrapper = mountComponent(maliciousNodeDef)
-      const description = wrapper.find('._sb_description')
+      renderComponent(maliciousNodeDef)
+      const description = screen.getByTestId('node-description')
 
-      if (description.exists()) {
-        // Should not contain dangerous event handlers
-        expect(description.html()).not.toContain('onerror')
-        expect(description.html()).not.toContain('alert(')
-        // Should still contain safe markdown content
-        expect(description.html()).toContain('<strong>bold</strong>')
-        // May or may not contain img tag depending on DOMPurify config
-      }
+      expect(description.innerHTML).not.toContain('onerror')
+      expect(description.innerHTML).not.toContain('alert(')
+      expect(description.innerHTML).toContain('<strong>bold</strong>')
     })
   })
 })
diff --git a/src/components/node/NodePreview.vue b/src/components/node/NodePreview.vue
index 56d80a9c84..804d4ad696 100644
--- a/src/components/node/NodePreview.vue
+++ b/src/components/node/NodePreview.vue
@@ -7,17 +7,22 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
     :node-def="nodeDef"
     :position="position"
   />
-  <div v-else class="_sb_node_preview bg-component-node-background">
+  <div
+    v-else
+    class="_sb_node_preview bg-component-node-background"
+    data-testid="node-preview"
+  >
     <div class="_sb_table">
       <div
         class="node_header text-ellipsis"
+        data-testid="node-header"
         :title="nodeDef.display_name"
         :style="{
           backgroundColor: litegraphColors.NODE_DEFAULT_COLOR,
           color: litegraphColors.NODE_TITLE_COLOR
         }"
       >
-        <div class="_sb_dot headdot pr-3" />
+        <div class="_sb_dot headdot pr-3" data-testid="head-dot" />
         {{ nodeDef.display_name }}
       </div>
       <div class="_sb_preview_badge">{{ $t('g.preview') }}</div>
@@ -76,6 +81,7 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
     <div
       v-if="renderedDescription"
       class="_sb_description"
+      data-testid="node-description"
       :style="{
         color: litegraphColors.WIDGET_SECONDARY_TEXT_COLOR,
         backgroundColor: litegraphColors.WIDGET_BGCOLOR
diff --git a/src/components/painter/WidgetPainter.vue b/src/components/painter/WidgetPainter.vue
index 6e5abbee3f..f93d77c5c3 100644
--- a/src/components/painter/WidgetPainter.vue
+++ b/src/components/painter/WidgetPainter.vue
@@ -38,6 +38,7 @@
     <div
       v-if="isImageInputConnected"
       class="text-center text-xs text-muted-foreground"
+      data-testid="painter-dimension-text"
     >
       {{ canvasWidth }} x {{ canvasHeight }}
     </div>
@@ -100,6 +101,7 @@
       </div>
       <div
         class="flex h-8 items-center gap-2 rounded-lg bg-component-node-widget-background pr-2 pl-3"
+        data-testid="painter-size-row"
       >
         <Slider
           :model-value="[brushSize]"
@@ -109,9 +111,12 @@
           class="flex-1"
           @update:model-value="(v) => v?.length && (brushSize = v[0])"
         />
-        <span class="text-node-text-muted w-8 text-center text-xs">{{
-          brushSize
-        }}</span>
+        <span
+          class="text-node-text-muted w-8 text-center text-xs"
+          data-testid="painter-size-value"
+        >
+          {{ brushSize }}
+        </span>
       </div>
 
       <template v-if="tool === PAINTER_TOOLS.BRUSH">
@@ -123,6 +128,7 @@
         </div>
         <div
           class="flex h-8 w-full items-center gap-2 rounded-lg bg-component-node-widget-background px-4"
+          data-testid="painter-color-row"
         >
           <input
             type="color"
@@ -166,6 +172,7 @@
         </div>
         <div
           class="flex h-8 items-center gap-2 rounded-lg bg-component-node-widget-background pr-2 pl-3"
+          data-testid="painter-hardness-row"
         >
           <Slider
             :model-value="[brushHardnessPercent]"
@@ -192,6 +199,7 @@
         </div>
         <div
           class="flex h-8 items-center gap-2 rounded-lg bg-component-node-widget-background pr-2 pl-3"
+          data-testid="painter-width-row"
         >
           <Slider
             :model-value="[canvasWidth]"
@@ -214,6 +222,7 @@
         </div>
         <div
           class="flex h-8 items-center gap-2 rounded-lg bg-component-node-widget-background pr-2 pl-3"
+          data-testid="painter-height-row"
         >
           <Slider
             :model-value="[canvasHeight]"
@@ -255,6 +264,7 @@
       <Button
         variant="secondary"
         size="md"
+        data-testid="painter-clear-button"
         :class="
           cn(
             'gap-2 rounded-lg border border-component-node-border bg-component-node-background text-xs text-muted-foreground hover:text-base-foreground',
diff --git a/src/components/queue/JobHistoryActionsMenu.test.ts b/src/components/queue/JobHistoryActionsMenu.test.ts
index 550fe8176e..bd0ae4efb5 100644
--- a/src/components/queue/JobHistoryActionsMenu.test.ts
+++ b/src/components/queue/JobHistoryActionsMenu.test.ts
@@ -1,9 +1,9 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { defineComponent, h } from 'vue'
 
 import { i18n } from '@/i18n'
-import JobHistoryActionsMenu from '@/components/queue/JobHistoryActionsMenu.vue'
 
 const popoverCloseSpy = vi.fn()
 
@@ -52,8 +52,10 @@ vi.mock('@/stores/workspace/sidebarTabStore', () => ({
   useSidebarTabStore: () => mockSidebarTabStore
 }))
 
-const mountMenu = () =>
-  mount(JobHistoryActionsMenu, {
+import JobHistoryActionsMenu from '@/components/queue/JobHistoryActionsMenu.vue'
+
+const renderMenu = () =>
+  render(JobHistoryActionsMenu, {
     global: {
       plugins: [i18n],
       directives: { tooltip: () => {} }
@@ -75,12 +77,11 @@ describe('JobHistoryActionsMenu', () => {
   })
 
   it('toggles show run progress bar setting from the menu', async () => {
-    const wrapper = mountMenu()
+    const user = userEvent.setup()
 
-    const showRunProgressBarButton = wrapper.get(
-      '[data-testid="show-run-progress-bar-action"]'
-    )
-    await showRunProgressBarButton.trigger('click')
+    renderMenu()
+
+    await user.click(screen.getByTestId('show-run-progress-bar-action'))
 
     expect(mockSetSetting).toHaveBeenCalledTimes(1)
     expect(mockSetSetting).toHaveBeenCalledWith(
@@ -90,17 +91,16 @@ describe('JobHistoryActionsMenu', () => {
   })
 
   it('opens docked job history sidebar when enabling from the menu', async () => {
+    const user = userEvent.setup()
     mockGetSetting.mockImplementation((key: string) => {
       if (key === 'Comfy.Queue.QPOV2') return false
       if (key === 'Comfy.Queue.ShowRunProgressBar') return true
       return undefined
     })
-    const wrapper = mountMenu()
 
-    const dockedJobHistoryButton = wrapper.get(
-      '[data-testid="docked-job-history-action"]'
-    )
-    await dockedJobHistoryButton.trigger('click')
+    renderMenu()
+
+    await user.click(screen.getByTestId('docked-job-history-action'))
 
     expect(popoverCloseSpy).toHaveBeenCalledTimes(1)
     expect(mockSetSetting).toHaveBeenCalledTimes(1)
@@ -110,14 +110,20 @@ describe('JobHistoryActionsMenu', () => {
   })
 
   it('emits clear history from the menu', async () => {
-    const wrapper = mountMenu()
+    const user = userEvent.setup()
+    const clearHistorySpy = vi.fn()
 
-    const clearHistoryButton = wrapper.get(
-      '[data-testid="clear-history-action"]'
-    )
-    await clearHistoryButton.trigger('click')
+    render(JobHistoryActionsMenu, {
+      props: { onClearHistory: clearHistorySpy },
+      global: {
+        plugins: [i18n],
+        directives: { tooltip: () => {} }
+      }
+    })
+
+    await user.click(screen.getByTestId('clear-history-action'))
 
     expect(popoverCloseSpy).toHaveBeenCalledTimes(1)
-    expect(wrapper.emitted('clearHistory')).toHaveLength(1)
+    expect(clearHistorySpy).toHaveBeenCalledOnce()
   })
 })
diff --git a/src/components/queue/QueueOverlayActive.test.ts b/src/components/queue/QueueOverlayActive.test.ts
index 9b8d131d23..38e14c2364 100644
--- a/src/components/queue/QueueOverlayActive.test.ts
+++ b/src/components/queue/QueueOverlayActive.test.ts
@@ -1,4 +1,5 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
@@ -32,30 +33,20 @@ const tooltipDirectiveStub = {
   updated: vi.fn()
 }
 
-const SELECTORS = {
-  interruptAllButton: 'button[aria-label="Interrupt all running jobs"]',
-  clearQueuedButton: 'button[aria-label="Clear queued"]',
-  summaryRow: '.flex.items-center.gap-2',
-  currentNodeRow: '.flex.items-center.gap-1.text-text-secondary'
+const defaultProps = {
+  totalProgressStyle: { width: '65%' },
+  currentNodeProgressStyle: { width: '40%' },
+  totalPercentFormatted: '65%',
+  currentNodePercentFormatted: '40%',
+  currentNodeName: 'Sampler',
+  runningCount: 1,
+  queuedCount: 2,
+  bottomRowClass: 'flex custom-bottom-row'
 }
 
-const COPY = {
-  viewAllJobs: 'View all jobs'
-}
-
-const mountComponent = (props: Record<string, unknown> = {}) =>
-  mount(QueueOverlayActive, {
-    props: {
-      totalProgressStyle: { width: '65%' },
-      currentNodeProgressStyle: { width: '40%' },
-      totalPercentFormatted: '65%',
-      currentNodePercentFormatted: '40%',
-      currentNodeName: 'Sampler',
-      runningCount: 1,
-      queuedCount: 2,
-      bottomRowClass: 'flex custom-bottom-row',
-      ...props
-    },
+const renderComponent = (props: Record<string, unknown> = {}) =>
+  render(QueueOverlayActive, {
+    props: { ...defaultProps, ...props },
     global: {
       plugins: [i18n],
       directives: {
@@ -66,58 +57,65 @@ const mountComponent = (props: Record<string, unknown> = {}) =>
 
 describe('QueueOverlayActive', () => {
   it('renders progress metrics and emits actions when buttons clicked', async () => {
-    const wrapper = mountComponent({ runningCount: 2, queuedCount: 3 })
+    const user = userEvent.setup()
+    const interruptAllSpy = vi.fn()
+    const clearQueuedSpy = vi.fn()
+    const viewAllJobsSpy = vi.fn()
 
-    const progressBars = wrapper.findAll('.absolute.inset-0')
-    expect(progressBars[0].attributes('style')).toContain('width: 65%')
-    expect(progressBars[1].attributes('style')).toContain('width: 40%')
+    const { container } = renderComponent({
+      runningCount: 2,
+      queuedCount: 3,
+      onInterruptAll: interruptAllSpy,
+      onClearQueued: clearQueuedSpy,
+      onViewAllJobs: viewAllJobsSpy
+    })
 
-    const content = wrapper.text().replace(/\s+/g, ' ')
-    expect(content).toContain('Total: 65%')
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const progressBars = container.querySelectorAll('.absolute.inset-0')
+    expect(progressBars[0]).toHaveStyle({ width: '65%' })
+    expect(progressBars[1]).toHaveStyle({ width: '40%' })
 
-    const [runningSection, queuedSection] = wrapper.findAll(
-      SELECTORS.summaryRow
+    expect(screen.getByText('65%')).toBeInTheDocument()
+
+    expect(screen.getByText('2')).toBeInTheDocument()
+    expect(screen.getByText('running')).toBeInTheDocument()
+    expect(screen.getByText('3')).toBeInTheDocument()
+    expect(screen.getByText('queued')).toBeInTheDocument()
+
+    expect(screen.getByText('Current node:')).toBeInTheDocument()
+    expect(screen.getByText('Sampler')).toBeInTheDocument()
+    expect(screen.getByText('40%')).toBeInTheDocument()
+
+    await user.click(
+      screen.getByRole('button', { name: 'Interrupt all running jobs' })
     )
-    expect(runningSection.text()).toContain('2')
-    expect(runningSection.text()).toContain('running')
-    expect(queuedSection.text()).toContain('3')
-    expect(queuedSection.text()).toContain('queued')
+    expect(interruptAllSpy).toHaveBeenCalledOnce()
 
-    const currentNodeSection = wrapper.find(SELECTORS.currentNodeRow)
-    expect(currentNodeSection.text()).toContain('Current node:')
-    expect(currentNodeSection.text()).toContain('Sampler')
-    expect(currentNodeSection.text()).toContain('40%')
+    await user.click(screen.getByRole('button', { name: 'Clear queued' }))
+    expect(clearQueuedSpy).toHaveBeenCalledOnce()
 
-    const interruptButton = wrapper.get(SELECTORS.interruptAllButton)
-    await interruptButton.trigger('click')
-    expect(wrapper.emitted('interruptAll')).toHaveLength(1)
+    await user.click(screen.getByRole('button', { name: 'View all jobs' }))
+    expect(viewAllJobsSpy).toHaveBeenCalledOnce()
 
-    const clearQueuedButton = wrapper.get(SELECTORS.clearQueuedButton)
-    await clearQueuedButton.trigger('click')
-    expect(wrapper.emitted('clearQueued')).toHaveLength(1)
-
-    const buttons = wrapper.findAll('button')
-    const viewAllButton = buttons.find((btn) =>
-      btn.text().includes(COPY.viewAllJobs)
-    )
-    expect(viewAllButton).toBeDefined()
-    await viewAllButton!.trigger('click')
-    expect(wrapper.emitted('viewAllJobs')).toHaveLength(1)
-
-    expect(wrapper.find('.custom-bottom-row').exists()).toBe(true)
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    expect(container.querySelector('.custom-bottom-row')).toBeTruthy()
   })
 
   it('hides action buttons when counts are zero', () => {
-    const wrapper = mountComponent({ runningCount: 0, queuedCount: 0 })
+    renderComponent({ runningCount: 0, queuedCount: 0 })
 
-    expect(wrapper.find(SELECTORS.interruptAllButton).exists()).toBe(false)
-    expect(wrapper.find(SELECTORS.clearQueuedButton).exists()).toBe(false)
+    expect(
+      screen.queryByRole('button', { name: 'Interrupt all running jobs' })
+    ).not.toBeInTheDocument()
+    expect(
+      screen.queryByRole('button', { name: 'Clear queued' })
+    ).not.toBeInTheDocument()
   })
 
   it('builds tooltip configs with translated strings', () => {
     const spy = vi.spyOn(tooltipConfig, 'buildTooltipConfig')
 
-    mountComponent()
+    renderComponent()
 
     expect(spy).toHaveBeenCalledWith('Cancel job')
     expect(spy).toHaveBeenCalledWith('Clear queue')
diff --git a/src/components/queue/QueueOverlayExpanded.vue b/src/components/queue/QueueOverlayExpanded.vue
index 526ea34f2e..db2cbe846f 100644
--- a/src/components/queue/QueueOverlayExpanded.vue
+++ b/src/components/queue/QueueOverlayExpanded.vue
@@ -20,7 +20,7 @@
       @update:selected-sort-mode="$emit('update:selectedSortMode', $event)"
     />
 
-    <div class="min-h-0 flex-1 overflow-y-auto">
+    <div class="min-h-0 flex-1">
       <JobAssetsList
         :displayed-job-groups="displayedJobGroups"
         @cancel-item="onCancelItemEvent"
diff --git a/src/components/queue/QueueOverlayHeader.test.ts b/src/components/queue/QueueOverlayHeader.test.ts
index 858e62f88f..c71de2a174 100644
--- a/src/components/queue/QueueOverlayHeader.test.ts
+++ b/src/components/queue/QueueOverlayHeader.test.ts
@@ -1,4 +1,5 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { defineComponent, h } from 'vue'
 
@@ -55,8 +56,8 @@ const tooltipDirectiveStub = {
   updated: vi.fn()
 }
 
-const mountHeader = (props = {}) =>
-  mount(QueueOverlayHeader, {
+const renderHeader = (props = {}) =>
+  render(QueueOverlayHeader, {
     props: {
       headerTitle: 'Job queue',
       queuedCount: 3,
@@ -81,54 +82,53 @@ describe('QueueOverlayHeader', () => {
   })
 
   it('renders header title', () => {
-    const wrapper = mountHeader()
-    expect(wrapper.text()).toContain('Job queue')
+    renderHeader()
+    expect(screen.getByText('Job queue')).toBeInTheDocument()
   })
 
   it('shows clear queue text and emits clear queued', async () => {
-    const wrapper = mountHeader({ queuedCount: 4 })
+    const user = userEvent.setup()
+    const clearQueuedSpy = vi.fn()
 
-    expect(wrapper.text()).toContain('Clear queue')
-    expect(wrapper.text()).not.toContain('4 queued')
+    renderHeader({ queuedCount: 4, onClearQueued: clearQueuedSpy })
 
-    const clearQueuedButton = wrapper.get('button[aria-label="Clear queued"]')
-    await clearQueuedButton.trigger('click')
-    expect(wrapper.emitted('clearQueued')).toHaveLength(1)
+    expect(screen.getByText('Clear queue')).toBeInTheDocument()
+    expect(screen.queryByText('4 queued')).not.toBeInTheDocument()
+
+    await user.click(screen.getByRole('button', { name: 'Clear queued' }))
+    expect(clearQueuedSpy).toHaveBeenCalledOnce()
   })
 
   it('disables clear queued button when queued count is zero', () => {
-    const wrapper = mountHeader({ queuedCount: 0 })
-    const clearQueuedButton = wrapper.get('button[aria-label="Clear queued"]')
+    renderHeader({ queuedCount: 0 })
 
-    expect(clearQueuedButton.attributes('disabled')).toBeDefined()
-    expect(wrapper.text()).toContain('Clear queue')
+    expect(screen.getByRole('button', { name: 'Clear queued' })).toBeDisabled()
+    expect(screen.getByText('Clear queue')).toBeInTheDocument()
   })
 
   it('emits clear history from the menu', async () => {
+    const user = userEvent.setup()
     const spy = vi.spyOn(tooltipConfig, 'buildTooltipConfig')
+    const clearHistorySpy = vi.fn()
 
-    const wrapper = mountHeader()
+    renderHeader({ onClearHistory: clearHistorySpy })
 
-    expect(wrapper.find('button[aria-label="More options"]').exists()).toBe(
-      true
-    )
+    expect(
+      screen.getByRole('button', { name: 'More options' })
+    ).toBeInTheDocument()
     expect(spy).toHaveBeenCalledWith('More')
 
-    const clearHistoryButton = wrapper.get(
-      '[data-testid="clear-history-action"]'
-    )
-    await clearHistoryButton.trigger('click')
+    await user.click(screen.getByTestId('clear-history-action'))
     expect(popoverCloseSpy).toHaveBeenCalledTimes(1)
-    expect(wrapper.emitted('clearHistory')).toHaveLength(1)
+    expect(clearHistorySpy).toHaveBeenCalledOnce()
   })
 
   it('opens floating queue progress overlay when disabling from the menu', async () => {
-    const wrapper = mountHeader()
+    const user = userEvent.setup()
 
-    const dockedJobHistoryButton = wrapper.get(
-      '[data-testid="docked-job-history-action"]'
-    )
-    await dockedJobHistoryButton.trigger('click')
+    renderHeader()
+
+    await user.click(screen.getByTestId('docked-job-history-action'))
 
     expect(popoverCloseSpy).toHaveBeenCalledTimes(1)
     expect(mockSetMany).toHaveBeenCalledTimes(1)
@@ -141,15 +141,14 @@ describe('QueueOverlayHeader', () => {
   })
 
   it('opens docked job history sidebar when enabling from the menu', async () => {
+    const user = userEvent.setup()
     mockGetSetting.mockImplementation((key: string) =>
       key === 'Comfy.Queue.QPOV2' ? false : undefined
     )
-    const wrapper = mountHeader()
 
-    const dockedJobHistoryButton = wrapper.get(
-      '[data-testid="docked-job-history-action"]'
-    )
-    await dockedJobHistoryButton.trigger('click')
+    renderHeader()
+
+    await user.click(screen.getByTestId('docked-job-history-action'))
 
     expect(popoverCloseSpy).toHaveBeenCalledTimes(1)
     expect(mockSetSetting).toHaveBeenCalledTimes(1)
@@ -159,16 +158,15 @@ describe('QueueOverlayHeader', () => {
   })
 
   it('keeps docked target open even when enabling persistence fails', async () => {
+    const user = userEvent.setup()
     mockGetSetting.mockImplementation((key: string) =>
       key === 'Comfy.Queue.QPOV2' ? false : undefined
     )
     mockSetSetting.mockRejectedValueOnce(new Error('persistence failed'))
-    const wrapper = mountHeader()
 
-    const dockedJobHistoryButton = wrapper.get(
-      '[data-testid="docked-job-history-action"]'
-    )
-    await dockedJobHistoryButton.trigger('click')
+    renderHeader()
+
+    await user.click(screen.getByTestId('docked-job-history-action'))
 
     expect(popoverCloseSpy).toHaveBeenCalledTimes(1)
     expect(mockSetSetting).toHaveBeenCalledWith('Comfy.Queue.QPOV2', true)
@@ -176,13 +174,12 @@ describe('QueueOverlayHeader', () => {
   })
 
   it('closes the menu when disabling persistence fails', async () => {
+    const user = userEvent.setup()
     mockSetMany.mockRejectedValueOnce(new Error('persistence failed'))
-    const wrapper = mountHeader()
 
-    const dockedJobHistoryButton = wrapper.get(
-      '[data-testid="docked-job-history-action"]'
-    )
-    await dockedJobHistoryButton.trigger('click')
+    renderHeader()
+
+    await user.click(screen.getByTestId('docked-job-history-action'))
 
     expect(popoverCloseSpy).toHaveBeenCalledTimes(1)
     expect(mockSetMany).toHaveBeenCalledWith({
@@ -192,12 +189,11 @@ describe('QueueOverlayHeader', () => {
   })
 
   it('toggles show run progress bar setting from the menu', async () => {
-    const wrapper = mountHeader()
+    const user = userEvent.setup()
 
-    const showRunProgressBarButton = wrapper.get(
-      '[data-testid="show-run-progress-bar-action"]'
-    )
-    await showRunProgressBarButton.trigger('click')
+    renderHeader()
+
+    await user.click(screen.getByTestId('show-run-progress-bar-action'))
 
     expect(mockSetSetting).toHaveBeenCalledTimes(1)
     expect(mockSetSetting).toHaveBeenCalledWith(
diff --git a/src/components/queue/job/JobAssetsList.test.ts b/src/components/queue/job/JobAssetsList.test.ts
index 5a04fd1b76..d1f673ffb9 100644
--- a/src/components/queue/job/JobAssetsList.test.ts
+++ b/src/components/queue/job/JobAssetsList.test.ts
@@ -1,4 +1,3 @@
-/* eslint-disable vue/one-component-per-file -- test stubs */
 /* eslint-disable testing-library/no-container, testing-library/no-node-access -- stubs lack ARIA roles; data attributes for props */
 /* eslint-disable testing-library/prefer-user-event -- fireEvent needed: fake timers require fireEvent for mouseEnter/mouseLeave */
 import { fireEvent, render, screen } from '@testing-library/vue'
@@ -6,21 +5,27 @@ import userEvent from '@testing-library/user-event'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { defineComponent, nextTick } from 'vue'
 
+import './testUtils/mockTanstackVirtualizer'
+
 import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
-import type { JobListItem as ApiJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
-import { ResultItemImpl, TaskItemImpl } from '@/stores/queueStore'
 
 import JobAssetsList from './JobAssetsList.vue'
 
-const JobDetailsPopoverStub = defineComponent({
-  name: 'JobDetailsPopover',
-  props: {
-    jobId: { type: String, required: true },
-    workflowId: { type: String, default: undefined }
-  },
-  template:
-    '<div class="job-details-popover-stub" :data-job-id="jobId" :data-workflow-id="workflowId" />'
-})
+const hoisted = vi.hoisted(() => ({
+  jobDetailsPopoverStub: {
+    name: 'JobDetailsPopover',
+    props: {
+      jobId: { type: String, required: true },
+      workflowId: { type: String, default: undefined }
+    },
+    template:
+      '<div class="job-details-popover-stub" :data-job-id="jobId" :data-workflow-id="workflowId" />'
+  }
+}))
+
+vi.mock('@/components/queue/job/JobDetailsPopover.vue', () => ({
+  default: hoisted.jobDetailsPopoverStub
+}))
 
 const AssetsListItemStub = defineComponent({
   name: 'AssetsListItem',
@@ -65,71 +70,81 @@ vi.mock('vue-i18n', () => {
   }
 })
 
-const createResultItem = (
+type TestPreviewOutput = {
+  url: string
+  isImage: boolean
+  isVideo: boolean
+}
+
+type TestTaskRef = {
+  workflowId?: string
+  previewOutput?: TestPreviewOutput
+}
+
+type TestJobListItem = Omit<JobListItem, 'taskRef'> & {
+  taskRef?: TestTaskRef
+}
+
+type TestJobGroup = Omit<JobGroup, 'items'> & {
+  items: TestJobListItem[]
+}
+
+const createPreviewOutput = (
   filename: string,
   mediaType: string = 'images'
-): ResultItemImpl => {
-  const item = new ResultItemImpl({
-    filename,
-    subfolder: '',
-    type: 'output',
-    nodeId: 'node-1',
-    mediaType
-  })
-  Object.defineProperty(item, 'url', {
-    get: () => `/api/view/${filename}`
-  })
-  return item
-}
-
-const createTaskRef = (preview?: ResultItemImpl): TaskItemImpl => {
-  const job: ApiJobListItem = {
-    id: `task-${Math.random().toString(36).slice(2)}`,
-    status: 'completed',
-    create_time: Date.now(),
-    preview_output: null,
-    outputs_count: preview ? 1 : 0,
-    workflow_id: 'workflow-1',
-    priority: 0
+): TestPreviewOutput => {
+  const url = `/api/view/${filename}`
+  return {
+    url,
+    isImage: mediaType === 'images',
+    isVideo: mediaType === 'video'
   }
-  const flatOutputs = preview ? [preview] : []
-  return new TaskItemImpl(job, {}, flatOutputs)
 }
 
-const buildJob = (overrides: Partial<JobListItem> = {}): JobListItem => ({
+const createTaskRef = (preview?: TestPreviewOutput): TestTaskRef => ({
+  workflowId: 'workflow-1',
+  ...(preview && { previewOutput: preview })
+})
+
+const buildJob = (
+  overrides: Partial<TestJobListItem> = {}
+): TestJobListItem => ({
   id: 'job-1',
   title: 'Job 1',
   meta: 'meta',
   state: 'completed',
-  taskRef: createTaskRef(createResultItem('job-1.png')),
+  taskRef: createTaskRef(createPreviewOutput('job-1.png')),
   ...overrides
 })
 
-function renderJobAssetsList(
-  jobs: JobListItem[],
-  callbacks: {
-    onViewItem?: (item: JobListItem) => void
-  } = {}
-) {
-  const displayedJobGroups: JobGroup[] = [
-    {
-      key: 'group-1',
-      label: 'Group 1',
-      items: jobs
-    }
-  ]
-
+function renderJobAssetsList({
+  jobs = [],
+  displayedJobGroups,
+  attrs,
+  onViewItem
+}: {
+  jobs?: TestJobListItem[]
+  displayedJobGroups?: TestJobGroup[]
+  attrs?: Record<string, string>
+  onViewItem?: (item: JobListItem) => void
+} = {}) {
   const user = userEvent.setup()
 
   const result = render(JobAssetsList, {
     props: {
-      displayedJobGroups,
-      ...(callbacks.onViewItem && { onViewItem: callbacks.onViewItem })
+      displayedJobGroups: (displayedJobGroups ?? [
+        {
+          key: 'group-1',
+          label: 'Group 1',
+          items: jobs
+        }
+      ]) as JobGroup[],
+      ...(onViewItem && { onViewItem })
     },
+    attrs,
     global: {
       stubs: {
         teleport: true,
-        JobDetailsPopover: JobDetailsPopoverStub,
         AssetsListItem: AssetsListItemStub
       }
     }
@@ -168,10 +183,57 @@ afterEach(() => {
 })
 
 describe('JobAssetsList', () => {
+  it('renders grouped headers alongside job rows', () => {
+    const displayedJobGroups: TestJobGroup[] = [
+      {
+        key: 'today',
+        label: 'Today',
+        items: [buildJob({ id: 'job-1' })]
+      },
+      {
+        key: 'yesterday',
+        label: 'Yesterday',
+        items: [buildJob({ id: 'job-2', title: 'Job 2' })]
+      }
+    ]
+
+    const { container } = renderJobAssetsList({ displayedJobGroups })
+
+    expect(screen.getByText('Today')).toBeTruthy()
+    expect(screen.getByText('Yesterday')).toBeTruthy()
+    expect(container.querySelector('[data-job-id="job-1"]')).not.toBeNull()
+    expect(container.querySelector('[data-job-id="job-2"]')).not.toBeNull()
+  })
+
+  it('forwards parent attrs to the scroll container', () => {
+    renderJobAssetsList({
+      attrs: {
+        class: 'min-h-0 flex-1'
+      },
+      displayedJobGroups: [
+        {
+          key: 'today',
+          label: 'Today',
+          items: [buildJob({ id: 'job-1' })]
+        }
+      ]
+    })
+
+    expect(screen.getByTestId('job-assets-list').className.split(' ')).toEqual(
+      expect.arrayContaining([
+        'min-h-0',
+        'flex-1',
+        'h-full',
+        'overflow-y-auto',
+        'pb-4'
+      ])
+    )
+  })
+
   it('emits viewItem on preview-click for completed jobs with preview', async () => {
     const job = buildJob()
     const onViewItem = vi.fn()
-    const { user } = renderJobAssetsList([job], { onViewItem })
+    const { user } = renderJobAssetsList({ jobs: [job], onViewItem })
 
     await user.click(screen.getByTestId('preview-trigger'))
 
@@ -181,7 +243,7 @@ describe('JobAssetsList', () => {
   it('emits viewItem on double-click for completed jobs with preview', async () => {
     const job = buildJob()
     const onViewItem = vi.fn()
-    const { container, user } = renderJobAssetsList([job], { onViewItem })
+    const { container, user } = renderJobAssetsList({ jobs: [job], onViewItem })
 
     const stubRoot = container.querySelector('.assets-list-item-stub')!
     await user.dblClick(stubRoot)
@@ -192,10 +254,10 @@ describe('JobAssetsList', () => {
   it('emits viewItem on double-click for completed video jobs without icon image', async () => {
     const job = buildJob({
       iconImageUrl: undefined,
-      taskRef: createTaskRef(createResultItem('job-1.webm', 'video'))
+      taskRef: createTaskRef(createPreviewOutput('job-1.webm', 'video'))
     })
     const onViewItem = vi.fn()
-    const { container, user } = renderJobAssetsList([job], { onViewItem })
+    const { container, user } = renderJobAssetsList({ jobs: [job], onViewItem })
 
     const stubRoot = container.querySelector('.assets-list-item-stub')!
     expect(stubRoot.getAttribute('data-preview-url')).toBe(
@@ -211,10 +273,10 @@ describe('JobAssetsList', () => {
   it('emits viewItem on icon click for completed 3D jobs without preview tile', async () => {
     const job = buildJob({
       iconImageUrl: undefined,
-      taskRef: createTaskRef(createResultItem('job-1.glb', 'model'))
+      taskRef: createTaskRef(createPreviewOutput('job-1.glb', 'model'))
     })
     const onViewItem = vi.fn()
-    const { container, user } = renderJobAssetsList([job], { onViewItem })
+    const { container, user } = renderJobAssetsList({ jobs: [job], onViewItem })
 
     const icon = container.querySelector('.assets-list-item-stub i')!
     await user.click(icon)
@@ -225,10 +287,10 @@ describe('JobAssetsList', () => {
   it('does not emit viewItem on double-click for non-completed jobs', async () => {
     const job = buildJob({
       state: 'running',
-      taskRef: createTaskRef(createResultItem('job-1.png'))
+      taskRef: createTaskRef(createPreviewOutput('job-1.png'))
     })
     const onViewItem = vi.fn()
-    const { container, user } = renderJobAssetsList([job], { onViewItem })
+    const { container, user } = renderJobAssetsList({ jobs: [job], onViewItem })
 
     const stubRoot = container.querySelector('.assets-list-item-stub')!
     await user.dblClick(stubRoot)
@@ -242,7 +304,7 @@ describe('JobAssetsList', () => {
       taskRef: createTaskRef()
     })
     const onViewItem = vi.fn()
-    const { container } = renderJobAssetsList([job], { onViewItem })
+    const { container } = renderJobAssetsList({ jobs: [job], onViewItem })
 
     const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!
     await fireEvent.mouseEnter(jobRow)
@@ -256,7 +318,7 @@ describe('JobAssetsList', () => {
   it('shows and hides the job details popover with hover delays', async () => {
     vi.useFakeTimers()
     const job = buildJob()
-    const { container } = renderJobAssetsList([job])
+    const { container } = renderJobAssetsList({ jobs: [job] })
 
     const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!
 
@@ -286,7 +348,7 @@ describe('JobAssetsList', () => {
   it('keeps the job details popover open while hovering the popover', async () => {
     vi.useFakeTimers()
     const job = buildJob()
-    const { container } = renderJobAssetsList([job])
+    const { container } = renderJobAssetsList({ jobs: [job] })
 
     const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!
 
@@ -319,7 +381,7 @@ describe('JobAssetsList', () => {
   it('positions the popover to the right of rows near the left viewport edge', async () => {
     vi.useFakeTimers()
     const job = buildJob()
-    const { container } = renderJobAssetsList([job])
+    const { container } = renderJobAssetsList({ jobs: [job] })
 
     const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!
 
@@ -344,7 +406,7 @@ describe('JobAssetsList', () => {
   it('positions the popover to the left of rows near the right viewport edge', async () => {
     vi.useFakeTimers()
     const job = buildJob()
-    const { container } = renderJobAssetsList([job])
+    const { container } = renderJobAssetsList({ jobs: [job] })
 
     const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!
 
@@ -370,7 +432,9 @@ describe('JobAssetsList', () => {
     vi.useFakeTimers()
     const firstJob = buildJob({ id: 'job-1' })
     const secondJob = buildJob({ id: 'job-2', title: 'Job 2' })
-    const { container } = renderJobAssetsList([firstJob, secondJob])
+    const { container } = renderJobAssetsList({
+      jobs: [firstJob, secondJob]
+    })
 
     const firstRow = container.querySelector('[data-job-id="job-1"]')!
     const secondRow = container.querySelector('[data-job-id="job-2"]')!
@@ -398,7 +462,9 @@ describe('JobAssetsList', () => {
     vi.useFakeTimers()
     const firstJob = buildJob({ id: 'job-1' })
     const secondJob = buildJob({ id: 'job-2', title: 'Job 2' })
-    const { container } = renderJobAssetsList([firstJob, secondJob])
+    const { container } = renderJobAssetsList({
+      jobs: [firstJob, secondJob]
+    })
 
     const firstRow = container.querySelector('[data-job-id="job-1"]')!
     const secondRow = container.querySelector('[data-job-id="job-2"]')!
@@ -429,7 +495,7 @@ describe('JobAssetsList', () => {
   it('does not show details if the hovered row disappears before the show delay ends', async () => {
     vi.useFakeTimers()
     const job = buildJob()
-    const { container, rerender } = renderJobAssetsList([job])
+    const { container, rerender } = renderJobAssetsList({ jobs: [job] })
 
     const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!
 
diff --git a/src/components/queue/job/JobAssetsList.vue b/src/components/queue/job/JobAssetsList.vue
index e98ef21bf5..c4e21909a1 100644
--- a/src/components/queue/job/JobAssetsList.vue
+++ b/src/components/queue/job/JobAssetsList.vue
@@ -1,79 +1,92 @@
 <template>
-  <div class="flex flex-col gap-4 px-3 pb-4">
-    <div
-      v-for="group in displayedJobGroups"
-      :key="group.key"
-      class="flex flex-col gap-2"
-    >
-      <div class="text-xs leading-none text-text-secondary">
-        {{ group.label }}
-      </div>
-      <div
-        v-for="job in group.items"
-        :key="job.id"
-        :data-job-id="job.id"
-        @mouseenter="onJobEnter(job, $event)"
-        @mouseleave="onJobLeave(job.id)"
-      >
-        <AssetsListItem
-          :class="
-            cn(
-              'w-full shrink-0 cursor-default text-text-primary transition-colors hover:bg-secondary-background-hover',
-              job.state === 'running' && 'bg-secondary-background'
-            )
-          "
-          :preview-url="getJobPreviewUrl(job)"
-          :is-video-preview="isVideoPreviewJob(job)"
-          :preview-alt="job.title"
-          :icon-name="job.iconName ?? iconForJobState(job.state)"
-          :icon-class="getJobIconClass(job)"
-          :primary-text="job.title"
-          :secondary-text="job.meta"
-          :progress-total-percent="job.progressTotalPercent"
-          :progress-current-percent="job.progressCurrentPercent"
-          @contextmenu.prevent.stop="$emit('menu', job, $event)"
-          @dblclick.stop="emitViewItem(job)"
-          @preview-click="emitViewItem(job)"
-          @click.stop
+  <div
+    ref="scrollContainer"
+    v-bind="$attrs"
+    data-testid="job-assets-list"
+    class="h-full overflow-y-auto pb-4"
+    @scroll="onListScroll"
+  >
+    <div :style="virtualWrapperStyle">
+      <template v-for="{ row, virtualItem } in virtualRows" :key="row.key">
+        <div
+          v-if="row.type === 'header'"
+          class="box-border px-3 pb-2 text-xs leading-none text-text-secondary"
+          :style="getVirtualRowStyle(virtualItem)"
         >
-          <template v-if="hoveredJobId === job.id" #actions>
-            <Button
-              v-if="isCancelable(job)"
-              variant="destructive"
-              size="icon"
-              :aria-label="t('g.cancel')"
-              @click.stop="emitCancelItem(job)"
+          {{ row.label }}
+        </div>
+        <div
+          v-else-if="row.type === 'job'"
+          class="box-border px-3"
+          :style="getVirtualRowStyle(virtualItem)"
+        >
+          <div
+            :data-job-id="row.job.id"
+            class="h-12"
+            @mouseenter="onJobEnter(row.job, $event)"
+            @mouseleave="onJobLeave(row.job.id)"
+          >
+            <AssetsListItem
+              :class="
+                cn(
+                  'size-full shrink-0 cursor-default text-text-primary transition-colors hover:bg-secondary-background-hover',
+                  row.job.state === 'running' && 'bg-secondary-background'
+                )
+              "
+              :preview-url="getJobPreviewUrl(row.job)"
+              :is-video-preview="isVideoPreviewJob(row.job)"
+              :preview-alt="row.job.title"
+              :icon-name="row.job.iconName ?? iconForJobState(row.job.state)"
+              :icon-class="getJobIconClass(row.job)"
+              :primary-text="row.job.title"
+              :secondary-text="row.job.meta"
+              :progress-total-percent="row.job.progressTotalPercent"
+              :progress-current-percent="row.job.progressCurrentPercent"
+              @contextmenu.prevent.stop="$emit('menu', row.job, $event)"
+              @dblclick.stop="emitViewItem(row.job)"
+              @preview-click="emitViewItem(row.job)"
+              @click.stop
             >
-              <i class="icon-[lucide--x] size-4" />
-            </Button>
-            <Button
-              v-else-if="isFailedDeletable(job)"
-              variant="destructive"
-              size="icon"
-              :aria-label="t('g.delete')"
-              @click.stop="emitDeleteItem(job)"
-            >
-              <i class="icon-[lucide--trash-2] size-4" />
-            </Button>
-            <Button
-              v-else-if="job.state === 'completed'"
-              variant="textonly"
-              size="sm"
-              @click.stop="emitCompletedViewItem(job)"
-            >
-              {{ t('menuLabels.View') }}
-            </Button>
-            <Button
-              variant="secondary"
-              size="icon"
-              :aria-label="t('g.more')"
-              @click.stop="$emit('menu', job, $event)"
-            >
-              <i class="icon-[lucide--ellipsis] size-4" />
-            </Button>
-          </template>
-        </AssetsListItem>
-      </div>
+              <template v-if="hoveredJobId === row.job.id" #actions>
+                <Button
+                  v-if="isCancelable(row.job)"
+                  variant="destructive"
+                  size="icon"
+                  :aria-label="t('g.cancel')"
+                  @click.stop="emitCancelItem(row.job)"
+                >
+                  <i class="icon-[lucide--x] size-4" />
+                </Button>
+                <Button
+                  v-else-if="isFailedDeletable(row.job)"
+                  variant="destructive"
+                  size="icon"
+                  :aria-label="t('g.delete')"
+                  @click.stop="emitDeleteItem(row.job)"
+                >
+                  <i class="icon-[lucide--trash-2] size-4" />
+                </Button>
+                <Button
+                  v-else-if="row.job.state === 'completed'"
+                  variant="textonly"
+                  size="sm"
+                  @click.stop="emitCompletedViewItem(row.job)"
+                >
+                  {{ t('menuLabels.View') }}
+                </Button>
+                <Button
+                  variant="secondary"
+                  size="icon"
+                  :aria-label="t('g.more')"
+                  @click.stop="$emit('menu', row.job, $event)"
+                >
+                  <i class="icon-[lucide--ellipsis] size-4" />
+                </Button>
+              </template>
+            </AssetsListItem>
+          </div>
+        </div>
+      </template>
     </div>
   </div>
 
@@ -97,8 +110,11 @@
 </template>
 
 <script setup lang="ts">
+import type { VirtualItem } from '@tanstack/vue-virtual'
+import type { CSSProperties } from 'vue'
+import { useVirtualizer } from '@tanstack/vue-virtual'
 import { useI18n } from 'vue-i18n'
-import { nextTick, ref } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 
 import JobDetailsPopover from '@/components/queue/job/JobDetailsPopover.vue'
 import { getHoverPopoverPosition } from '@/components/queue/job/getHoverPopoverPosition'
@@ -110,6 +126,17 @@ import { cn } from '@/utils/tailwindUtil'
 import { iconForJobState } from '@/utils/queueDisplay'
 import { isActiveJobState } from '@/utils/queueUtil'
 
+import { buildVirtualJobRows } from './buildVirtualJobRows'
+import type { VirtualJobRow } from './buildVirtualJobRows'
+
+const HEADER_ROW_HEIGHT = 20
+const GROUP_ROW_GAP = 16
+const JOB_ROW_HEIGHT = 48
+
+defineOptions({
+  inheritAttrs: false
+})
+
 const { displayedJobGroups } = defineProps<{ displayedJobGroups: JobGroup[] }>()
 
 const emit = defineEmits<{
@@ -120,9 +147,43 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
+const scrollContainer = ref<HTMLElement | null>(null)
 const hoveredJobId = ref<string | null>(null)
 const activeRowElement = ref<HTMLElement | null>(null)
 const popoverPosition = ref<{ top: number; left: number } | null>(null)
+const flatRows = computed(() => buildVirtualJobRows(displayedJobGroups))
+const virtualizer = useVirtualizer({
+  get count(): number {
+    return flatRows.value.length
+  },
+  getItemKey(index: number) {
+    return flatRows.value[index]?.key ?? index
+  },
+  estimateSize(index: number) {
+    const row = flatRows.value[index]
+    return row ? getRowHeight(row, index, flatRows.value) : JOB_ROW_HEIGHT
+  },
+  getScrollElement() {
+    return scrollContainer.value
+  },
+  overscan: 12
+})
+const virtualRows = computed(() => {
+  const rows = flatRows.value
+  return virtualizer.value
+    .getVirtualItems()
+    .flatMap((virtualItem: VirtualItem) => {
+      const row = rows[virtualItem.index]
+      return row ? [{ row, virtualItem }] : []
+    })
+})
+const virtualWrapperStyle = computed<CSSProperties>(() => ({
+  position: 'relative',
+  width: '100%',
+  ...(flatRows.value.length > 0 && {
+    height: `${virtualizer.value.getTotalSize()}px`
+  })
+}))
 const {
   activeDetails,
   clearHoverTimers,
@@ -135,6 +196,37 @@ const {
   onReset: clearPopoverAnchor
 })
 
+function getVirtualRowStyle(virtualItem: VirtualItem): CSSProperties {
+  return {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: `${virtualItem.size}px`,
+    transform: `translateY(${virtualItem.start}px)`,
+    overflowAnchor: 'none'
+  }
+}
+
+function getRowHeight(
+  row: VirtualJobRow,
+  index: number,
+  rows: VirtualJobRow[]
+): number {
+  if (row.type === 'header') {
+    return HEADER_ROW_HEIGHT
+  }
+
+  return (
+    JOB_ROW_HEIGHT + (rows[index + 1]?.type === 'header' ? GROUP_ROW_GAP : 0)
+  )
+}
+
+function onListScroll() {
+  hoveredJobId.value = null
+  resetActiveDetails()
+}
+
 function clearPopoverAnchor() {
   activeRowElement.value = null
   popoverPosition.value = null
diff --git a/src/components/queue/job/JobContextMenu.test.ts b/src/components/queue/job/JobContextMenu.test.ts
index c9196b5096..425487e135 100644
--- a/src/components/queue/job/JobContextMenu.test.ts
+++ b/src/components/queue/job/JobContextMenu.test.ts
@@ -1,6 +1,7 @@
-import { mount } from '@vue/test-utils'
+import { fireEvent, render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import { defineComponent, nextTick } from 'vue'
+import { defineComponent, nextTick, ref } from 'vue'
 
 import JobContextMenu from '@/components/queue/job/JobContextMenu.vue'
 import type { MenuEntry } from '@/composables/queue/useJobMenu'
@@ -28,7 +29,6 @@ const popoverStub = defineComponent({
         this.hide()
         return
       }
-
       this.show(event, target)
     },
     show(event: Event, target?: EventTarget | null) {
@@ -43,7 +43,7 @@ const popoverStub = defineComponent({
     }
   },
   template: `
-    <div v-if="visible" ref="container" class="popover-stub">
+    <div v-if="visible" ref="container" data-testid="popover">
       <slot />
     </div>
   `
@@ -51,21 +51,18 @@ const popoverStub = defineComponent({
 
 const buttonStub = {
   props: {
-    disabled: {
-      type: Boolean,
-      default: false
-    }
+    disabled: { type: Boolean, default: false },
+    ariaLabel: { type: String, default: undefined }
   },
   template: `
-    <div
-      class="button-stub"
-      :data-disabled="String(disabled)"
-    >
+    <button :disabled="disabled" :aria-label="ariaLabel">
       <slot />
-    </div>
+    </button>
   `
 }
 
+type MenuHandle = { open: (e: Event) => Promise<void>; hide: () => void }
+
 const createEntries = (): MenuEntry[] => [
   { key: 'enabled', label: 'Enabled action', onClick: vi.fn() },
   {
@@ -77,17 +74,6 @@ const createEntries = (): MenuEntry[] => [
   { kind: 'divider', key: 'divider-1' }
 ]
 
-const mountComponent = (entries: MenuEntry[]) =>
-  mount(JobContextMenu, {
-    props: { entries },
-    global: {
-      stubs: {
-        Popover: popoverStub,
-        Button: buttonStub
-      }
-    }
-  })
-
 const createTriggerEvent = (type: string, currentTarget: EventTarget) =>
   ({
     type,
@@ -95,13 +81,37 @@ const createTriggerEvent = (type: string, currentTarget: EventTarget) =>
     target: currentTarget
   }) as Event
 
-const openMenu = async (
-  wrapper: ReturnType<typeof mountComponent>,
+function renderMenu(entries: MenuEntry[], onAction?: ReturnType<typeof vi.fn>) {
+  const menuRef = ref<MenuHandle | null>(null)
+
+  const Wrapper = {
+    components: { JobContextMenu },
+    setup() {
+      return { menuRef, entries }
+    },
+    template:
+      '<JobContextMenu ref="menuRef" :entries="entries" @action="$emit(\'action\', $event)" />'
+  }
+
+  const user = userEvent.setup()
+  const actionSpy = onAction ?? vi.fn()
+  const { unmount } = render(Wrapper, {
+    props: { onAction: actionSpy },
+    global: {
+      stubs: { Popover: popoverStub, Button: buttonStub }
+    }
+  })
+
+  return { user, menuRef, onAction: actionSpy, unmount }
+}
+
+async function openMenu(
+  menuRef: ReturnType<typeof ref<MenuHandle | null>>,
   type: string = 'click'
-) => {
+) {
   const trigger = document.createElement('button')
   document.body.append(trigger)
-  await wrapper.vm.open(createTriggerEvent(type, trigger))
+  await menuRef.value!.open(createTriggerEvent(type, trigger))
   await nextTick()
   return trigger
 }
@@ -112,31 +122,33 @@ afterEach(() => {
 
 describe('JobContextMenu', () => {
   it('passes disabled state to action buttons', async () => {
-    const wrapper = mountComponent(createEntries())
-    await openMenu(wrapper)
+    const { menuRef, unmount } = renderMenu(createEntries())
+    await openMenu(menuRef)
 
-    const buttons = wrapper.findAll('.button-stub')
-    expect(buttons).toHaveLength(2)
-    expect(buttons[0].attributes('data-disabled')).toBe('false')
-    expect(buttons[1].attributes('data-disabled')).toBe('true')
+    const enabledBtn = screen.getByRole('button', { name: 'Enabled action' })
+    const disabledBtn = screen.getByRole('button', {
+      name: 'Disabled action'
+    })
+    expect(enabledBtn).not.toBeDisabled()
+    expect(disabledBtn).toBeDisabled()
 
-    wrapper.unmount()
+    unmount()
   })
 
   it('emits action for enabled entries', async () => {
     const entries = createEntries()
-    const wrapper = mountComponent(entries)
-    await openMenu(wrapper)
+    const { user, menuRef, onAction, unmount } = renderMenu(entries)
+    await openMenu(menuRef)
 
-    await wrapper.findAll('.button-stub')[0].trigger('click')
+    await user.click(screen.getByRole('button', { name: 'Enabled action' }))
 
-    expect(wrapper.emitted('action')).toEqual([[entries[0]]])
+    expect(onAction).toHaveBeenCalledWith(entries[0])
 
-    wrapper.unmount()
+    unmount()
   })
 
   it('does not emit action for disabled entries', async () => {
-    const wrapper = mountComponent([
+    const { user, menuRef, onAction, unmount } = renderMenu([
       {
         key: 'disabled',
         label: 'Disabled action',
@@ -144,52 +156,54 @@ describe('JobContextMenu', () => {
         onClick: vi.fn()
       }
     ])
-    await openMenu(wrapper)
+    await openMenu(menuRef)
 
-    await wrapper.get('.button-stub').trigger('click')
+    await user.click(screen.getByRole('button', { name: 'Disabled action' }))
 
-    expect(wrapper.emitted('action')).toBeUndefined()
+    expect(onAction).not.toHaveBeenCalled()
 
-    wrapper.unmount()
+    unmount()
   })
 
   it('hides on pointerdown outside the popover', async () => {
-    const wrapper = mountComponent(createEntries())
+    const { menuRef, unmount } = renderMenu(createEntries())
+
     const trigger = document.createElement('button')
     const outside = document.createElement('div')
     document.body.append(trigger, outside)
 
-    await wrapper.vm.open(createTriggerEvent('contextmenu', trigger))
+    await menuRef.value!.open(createTriggerEvent('contextmenu', trigger))
     await nextTick()
-    expect(wrapper.find('.popover-stub').exists()).toBe(true)
+    expect(screen.getByTestId('popover')).toBeInTheDocument()
 
-    outside.dispatchEvent(new Event('pointerdown', { bubbles: true }))
+    // eslint-disable-next-line testing-library/prefer-user-event
+    await fireEvent.pointerDown(outside)
     await nextTick()
 
-    expect(wrapper.find('.popover-stub').exists()).toBe(false)
+    expect(screen.queryByTestId('popover')).not.toBeInTheDocument()
 
-    wrapper.unmount()
+    unmount()
   })
 
   it('keeps the menu open through trigger pointerdown and closes on same trigger click', async () => {
-    const wrapper = mountComponent(createEntries())
+    const { menuRef, unmount } = renderMenu(createEntries())
+
     const trigger = document.createElement('button')
     document.body.append(trigger)
 
-    await wrapper.vm.open(createTriggerEvent('click', trigger))
+    await menuRef.value!.open(createTriggerEvent('click', trigger))
     await nextTick()
-    expect(wrapper.find('.popover-stub').exists()).toBe(true)
+    expect(screen.getByTestId('popover')).toBeInTheDocument()
 
-    trigger.dispatchEvent(new Event('pointerdown', { bubbles: true }))
+    // eslint-disable-next-line testing-library/prefer-user-event
+    await fireEvent.pointerDown(trigger)
     await nextTick()
+    expect(screen.getByTestId('popover')).toBeInTheDocument()
 
-    expect(wrapper.find('.popover-stub').exists()).toBe(true)
-
-    await wrapper.vm.open(createTriggerEvent('click', trigger))
+    await menuRef.value!.open(createTriggerEvent('click', trigger))
     await nextTick()
+    expect(screen.queryByTestId('popover')).not.toBeInTheDocument()
 
-    expect(wrapper.find('.popover-stub').exists()).toBe(false)
-
-    wrapper.unmount()
+    unmount()
   })
 })
diff --git a/src/components/queue/job/JobFiltersBar.test.ts b/src/components/queue/job/JobFiltersBar.test.ts
index c4043f534c..de74df7d9c 100644
--- a/src/components/queue/job/JobFiltersBar.test.ts
+++ b/src/components/queue/job/JobFiltersBar.test.ts
@@ -1,4 +1,5 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 import { defineComponent } from 'vue'
@@ -56,12 +57,16 @@ const i18n = createI18n({
 
 describe('JobFiltersBar', () => {
   it('emits showAssets when the assets icon button is clicked', async () => {
-    const wrapper = mount(JobFiltersBar, {
+    const user = userEvent.setup()
+    const showAssetsSpy = vi.fn()
+
+    render(JobFiltersBar, {
       props: {
         selectedJobTab: 'All',
         selectedWorkflowFilter: 'all',
         selectedSortMode: 'mostRecent',
-        hasFailedJobs: false
+        hasFailedJobs: false,
+        onShowAssets: showAssetsSpy
       },
       global: {
         plugins: [i18n],
@@ -69,16 +74,13 @@ describe('JobFiltersBar', () => {
       }
     })
 
-    const showAssetsButton = wrapper.get(
-      'button[aria-label="Show assets panel"]'
-    )
-    await showAssetsButton.trigger('click')
+    await user.click(screen.getByRole('button', { name: 'Show assets panel' }))
 
-    expect(wrapper.emitted('showAssets')).toHaveLength(1)
+    expect(showAssetsSpy).toHaveBeenCalledOnce()
   })
 
   it('hides the assets icon button when hideShowAssetsAction is true', () => {
-    const wrapper = mount(JobFiltersBar, {
+    render(JobFiltersBar, {
       props: {
         selectedJobTab: 'All',
         selectedWorkflowFilter: 'all',
@@ -93,7 +95,7 @@ describe('JobFiltersBar', () => {
     })
 
     expect(
-      wrapper.find('button[aria-label="Show assets panel"]').exists()
-    ).toBe(false)
+      screen.queryByRole('button', { name: 'Show assets panel' })
+    ).not.toBeInTheDocument()
   })
 })
diff --git a/src/components/queue/job/JobGroupsList.test.ts b/src/components/queue/job/JobGroupsList.test.ts
index 86803c5902..dc63db2934 100644
--- a/src/components/queue/job/JobGroupsList.test.ts
+++ b/src/components/queue/job/JobGroupsList.test.ts
@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils'
+import { fireEvent, render, screen } from '@testing-library/vue'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { defineComponent, nextTick } from 'vue'
 
@@ -23,7 +23,12 @@ const QueueJobItemStub = defineComponent({
     runningNodeName: { type: String, default: undefined },
     activeDetailsId: { type: String, default: null }
   },
-  template: '<div class="queue-job-item-stub"></div>'
+  template: `
+    <div class="queue-job-item-stub" :data-job-id="jobId" :data-active-details-id="activeDetailsId">
+      <div :data-testid="'enter-' + jobId" @click="$emit('details-enter', jobId)" />
+      <div :data-testid="'leave-' + jobId" @click="$emit('details-leave', jobId)" />
+    </div>
+  `
 })
 
 const createJobItem = (overrides: Partial<JobListItem> = {}): JobListItem => {
@@ -46,8 +51,16 @@ const createJobItem = (overrides: Partial<JobListItem> = {}): JobListItem => {
   }
 }
 
-const mountComponent = (groups: JobGroup[]) =>
-  mount(JobGroupsList, {
+function getActiveDetailsId(container: Element, jobId: string): string | null {
+  return (
+    container
+      .querySelector(`[data-job-id="${jobId}"]`)
+      ?.getAttribute('data-active-details-id') ?? null
+  )
+}
+
+const renderComponent = (groups: JobGroup[]) =>
+  render(JobGroupsList, {
     props: { displayedJobGroups: groups },
     global: {
       stubs: {
@@ -64,64 +77,60 @@ describe('JobGroupsList hover behavior', () => {
   it('delays showing and hiding details while hovering over job rows', async () => {
     vi.useFakeTimers()
     const job = createJobItem({ id: 'job-d' })
-    const wrapper = mountComponent([
+    const { container } = renderComponent([
       { key: 'today', label: 'Today', items: [job] }
     ])
-    const jobItem = wrapper.findComponent(QueueJobItemStub)
 
-    jobItem.vm.$emit('details-enter', job.id)
+    // eslint-disable-next-line testing-library/prefer-user-event
+    await fireEvent.click(screen.getByTestId('enter-job-d'))
     vi.advanceTimersByTime(199)
     await nextTick()
-    expect(
-      wrapper.findComponent(QueueJobItemStub).props('activeDetailsId')
-    ).toBeNull()
+    expect(getActiveDetailsId(container, 'job-d')).toBeNull()
 
     vi.advanceTimersByTime(1)
     await nextTick()
-    expect(
-      wrapper.findComponent(QueueJobItemStub).props('activeDetailsId')
-    ).toBe(job.id)
+    expect(getActiveDetailsId(container, 'job-d')).toBe(job.id)
 
-    wrapper.findComponent(QueueJobItemStub).vm.$emit('details-leave', job.id)
+    // eslint-disable-next-line testing-library/prefer-user-event
+    await fireEvent.click(screen.getByTestId('leave-job-d'))
     vi.advanceTimersByTime(149)
     await nextTick()
-    expect(
-      wrapper.findComponent(QueueJobItemStub).props('activeDetailsId')
-    ).toBe(job.id)
+    expect(getActiveDetailsId(container, 'job-d')).toBe(job.id)
 
     vi.advanceTimersByTime(1)
     await nextTick()
-    expect(
-      wrapper.findComponent(QueueJobItemStub).props('activeDetailsId')
-    ).toBeNull()
+    expect(getActiveDetailsId(container, 'job-d')).toBeNull()
   })
 
   it('clears the previous popover when hovering a new row briefly and leaving', async () => {
     vi.useFakeTimers()
     const firstJob = createJobItem({ id: 'job-1', title: 'First job' })
     const secondJob = createJobItem({ id: 'job-2', title: 'Second job' })
-    const wrapper = mountComponent([
+    const { container } = renderComponent([
       { key: 'today', label: 'Today', items: [firstJob, secondJob] }
     ])
-    const jobItems = wrapper.findAllComponents(QueueJobItemStub)
 
-    jobItems[0].vm.$emit('details-enter', firstJob.id)
+    // eslint-disable-next-line testing-library/prefer-user-event
+    await fireEvent.click(screen.getByTestId('enter-job-1'))
     vi.advanceTimersByTime(200)
     await nextTick()
-    expect(jobItems[0].props('activeDetailsId')).toBe(firstJob.id)
+    expect(getActiveDetailsId(container, 'job-1')).toBe(firstJob.id)
 
-    jobItems[0].vm.$emit('details-leave', firstJob.id)
-    jobItems[1].vm.$emit('details-enter', secondJob.id)
+    // eslint-disable-next-line testing-library/prefer-user-event
+    await fireEvent.click(screen.getByTestId('leave-job-1'))
+    // eslint-disable-next-line testing-library/prefer-user-event
+    await fireEvent.click(screen.getByTestId('enter-job-2'))
     vi.advanceTimersByTime(100)
     await nextTick()
-    jobItems[1].vm.$emit('details-leave', secondJob.id)
+    // eslint-disable-next-line testing-library/prefer-user-event
+    await fireEvent.click(screen.getByTestId('leave-job-2'))
 
     vi.advanceTimersByTime(50)
     await nextTick()
-    expect(jobItems[0].props('activeDetailsId')).toBeNull()
+    expect(getActiveDetailsId(container, 'job-1')).toBeNull()
 
     vi.advanceTimersByTime(50)
     await nextTick()
-    expect(jobItems[1].props('activeDetailsId')).toBeNull()
+    expect(getActiveDetailsId(container, 'job-2')).toBeNull()
   })
 })
diff --git a/src/components/queue/job/buildVirtualJobRows.test.ts b/src/components/queue/job/buildVirtualJobRows.test.ts
new file mode 100644
index 0000000000..e603e09fd4
--- /dev/null
+++ b/src/components/queue/job/buildVirtualJobRows.test.ts
@@ -0,0 +1,82 @@
+import { describe, expect, it } from 'vitest'
+
+import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
+
+import { buildVirtualJobRows } from './buildVirtualJobRows'
+
+function buildJob(id: string): JobListItem {
+  return {
+    id,
+    title: `Job ${id}`,
+    meta: 'meta',
+    state: 'completed'
+  }
+}
+
+describe('buildVirtualJobRows', () => {
+  it('flattens grouped jobs into headers and rows in display order', () => {
+    const displayedJobGroups: JobGroup[] = [
+      {
+        key: 'today',
+        label: 'Today',
+        items: [buildJob('job-1'), buildJob('job-2')]
+      },
+      {
+        key: 'yesterday',
+        label: 'Yesterday',
+        items: [buildJob('job-3')]
+      }
+    ]
+
+    expect(buildVirtualJobRows(displayedJobGroups)).toEqual([
+      {
+        key: 'header-today',
+        type: 'header',
+        label: 'Today'
+      },
+      {
+        key: 'job-job-1',
+        type: 'job',
+        job: displayedJobGroups[0].items[0]
+      },
+      {
+        key: 'job-job-2',
+        type: 'job',
+        job: displayedJobGroups[0].items[1]
+      },
+      {
+        key: 'header-yesterday',
+        type: 'header',
+        label: 'Yesterday'
+      },
+      {
+        key: 'job-job-3',
+        type: 'job',
+        job: displayedJobGroups[1].items[0]
+      }
+    ])
+  })
+
+  it('keeps a single group flattened without extra row metadata', () => {
+    const displayedJobGroups: JobGroup[] = [
+      {
+        key: 'today',
+        label: 'Today',
+        items: [buildJob('job-1')]
+      }
+    ]
+
+    expect(buildVirtualJobRows(displayedJobGroups)).toEqual([
+      {
+        key: 'header-today',
+        type: 'header',
+        label: 'Today'
+      },
+      {
+        key: 'job-job-1',
+        type: 'job',
+        job: displayedJobGroups[0].items[0]
+      }
+    ])
+  })
+})
diff --git a/src/components/queue/job/buildVirtualJobRows.ts b/src/components/queue/job/buildVirtualJobRows.ts
new file mode 100644
index 0000000000..2a3cd81c3f
--- /dev/null
+++ b/src/components/queue/job/buildVirtualJobRows.ts
@@ -0,0 +1,37 @@
+import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
+
+export type VirtualJobRow =
+  | {
+      key: string
+      type: 'header'
+      label: string
+    }
+  | {
+      key: string
+      type: 'job'
+      job: JobListItem
+    }
+
+export function buildVirtualJobRows(
+  displayedJobGroups: JobGroup[]
+): VirtualJobRow[] {
+  const rows: VirtualJobRow[] = []
+
+  displayedJobGroups.forEach((group) => {
+    rows.push({
+      key: `header-${group.key}`,
+      type: 'header',
+      label: group.label
+    })
+
+    group.items.forEach((job) => {
+      rows.push({
+        key: `job-${job.id}`,
+        type: 'job',
+        job
+      })
+    })
+  })
+
+  return rows
+}
diff --git a/src/components/queue/job/testUtils/mockTanstackVirtualizer.ts b/src/components/queue/job/testUtils/mockTanstackVirtualizer.ts
new file mode 100644
index 0000000000..e07c5f6ea8
--- /dev/null
+++ b/src/components/queue/job/testUtils/mockTanstackVirtualizer.ts
@@ -0,0 +1,33 @@
+import { vi } from 'vitest'
+
+vi.mock('@tanstack/vue-virtual', async () => {
+  const { computed } = await import('vue')
+
+  return {
+    useVirtualizer: (options: {
+      count: number
+      estimateSize: (index: number) => number
+      getItemKey?: (index: number) => number | string
+    }) =>
+      computed(() => {
+        let start = 0
+        const items = Array.from({ length: options.count }, (_, index) => {
+          const size = options.estimateSize(index)
+          const item = {
+            key: options.getItemKey?.(index) ?? index,
+            index,
+            start,
+            size
+          }
+
+          start += size
+          return item
+        })
+
+        return {
+          getVirtualItems: () => items,
+          getTotalSize: () => start
+        }
+      })
+  }
+})
diff --git a/src/components/range/RangeEditor.test.ts b/src/components/range/RangeEditor.test.ts
new file mode 100644
index 0000000000..9fe9052c92
--- /dev/null
+++ b/src/components/range/RangeEditor.test.ts
@@ -0,0 +1,129 @@
+import { render, screen } from '@testing-library/vue'
+import { describe, expect, it } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import RangeEditor from './RangeEditor.vue'
+
+const i18n = createI18n({ legacy: false, locale: 'en', messages: { en: {} } })
+
+function renderEditor(props: {
+  modelValue: { min: number; max: number; midpoint?: number }
+  [key: string]: unknown
+}) {
+  return render(RangeEditor, {
+    props,
+    global: { plugins: [i18n] }
+  })
+}
+
+describe('RangeEditor', () => {
+  it('renders with min and max handles', () => {
+    renderEditor({ modelValue: { min: 0.2, max: 0.8 } })
+
+    expect(screen.getByTestId('handle-min')).toBeDefined()
+    expect(screen.getByTestId('handle-max')).toBeDefined()
+  })
+
+  it('highlights selected range in plain mode', () => {
+    renderEditor({ modelValue: { min: 0.2, max: 0.8 } })
+
+    const highlight = screen.getByTestId('range-highlight')
+    expect(highlight.getAttribute('x')).toBe('0.2')
+    expect(
+      Number.parseFloat(highlight.getAttribute('width') ?? 'NaN')
+    ).toBeCloseTo(0.6, 6)
+  })
+
+  it('dims area outside the range in histogram mode', () => {
+    const histogram = new Uint32Array(256)
+    for (let i = 0; i < 256; i++)
+      histogram[i] = Math.floor(50 + 50 * Math.sin(i / 20))
+
+    renderEditor({
+      modelValue: { min: 0.2, max: 0.8 },
+      display: 'histogram',
+      histogram
+    })
+
+    const left = screen.getByTestId('range-dim-left')
+    const right = screen.getByTestId('range-dim-right')
+    expect(left.getAttribute('width')).toBe('0.2')
+    expect(right.getAttribute('x')).toBe('0.8')
+  })
+
+  it('hides midpoint handle by default', () => {
+    renderEditor({
+      modelValue: { min: 0, max: 1, midpoint: 0.5 }
+    })
+
+    expect(screen.queryByTestId('handle-midpoint')).toBeNull()
+  })
+
+  it('shows midpoint handle when showMidpoint is true', () => {
+    renderEditor({
+      modelValue: { min: 0, max: 1, midpoint: 0.5 },
+      showMidpoint: true
+    })
+
+    expect(screen.getByTestId('handle-midpoint')).toBeDefined()
+  })
+
+  it('renders gradient background when display is gradient', () => {
+    renderEditor({
+      modelValue: { min: 0, max: 1 },
+      display: 'gradient',
+      gradientStops: [
+        { offset: 0, color: [0, 0, 0] as const },
+        { offset: 1, color: [255, 255, 255] as const }
+      ]
+    })
+
+    expect(screen.getByTestId('gradient-bg')).toBeDefined()
+    expect(screen.getByTestId('gradient-def')).toBeDefined()
+  })
+
+  it('renders histogram path when display is histogram with data', () => {
+    const histogram = new Uint32Array(256)
+    for (let i = 0; i < 256; i++)
+      histogram[i] = Math.floor(50 + 50 * Math.sin(i / 20))
+
+    renderEditor({
+      modelValue: { min: 0, max: 1 },
+      display: 'histogram',
+      histogram
+    })
+
+    expect(screen.getByTestId('histogram-path')).toBeDefined()
+  })
+
+  it('renders inputs for min and max', () => {
+    renderEditor({ modelValue: { min: 0.2, max: 0.8 } })
+
+    const inputs = screen.getAllByRole('textbox')
+    expect(inputs).toHaveLength(2)
+  })
+
+  it('renders midpoint input when showMidpoint is true', () => {
+    renderEditor({
+      modelValue: { min: 0, max: 1, midpoint: 0.5 },
+      showMidpoint: true
+    })
+
+    const inputs = screen.getAllByRole('textbox')
+    expect(inputs).toHaveLength(3)
+  })
+
+  it('normalizes handle positions with custom value range', () => {
+    renderEditor({
+      modelValue: { min: 64, max: 192 },
+      valueMin: 0,
+      valueMax: 255
+    })
+
+    const minHandle = screen.getByTestId('handle-min')
+    const maxHandle = screen.getByTestId('handle-max')
+
+    expect(Number.parseFloat(minHandle.style.left)).toBeCloseTo(25, 0)
+    expect(Number.parseFloat(maxHandle.style.left)).toBeCloseTo(75, 0)
+  })
+})
diff --git a/src/components/range/RangeEditor.vue b/src/components/range/RangeEditor.vue
new file mode 100644
index 0000000000..67d452fb5c
--- /dev/null
+++ b/src/components/range/RangeEditor.vue
@@ -0,0 +1,297 @@
+<template>
+  <div>
+    <div
+      ref="trackRef"
+      class="relative select-none"
+      @pointerdown.stop="onTrackPointerDown"
+      @contextmenu.prevent.stop
+    >
+      <svg
+        viewBox="0 0 1 1"
+        preserveAspectRatio="none"
+        :class="
+          cn(
+            'block w-full rounded-sm bg-node-component-surface',
+            display === 'histogram' ? 'aspect-3/2' : 'h-8'
+          )
+        "
+      >
+        <defs v-if="display === 'gradient'">
+          <linearGradient
+            :id="gradientId"
+            data-testid="gradient-def"
+            x1="0"
+            y1="0"
+            x2="1"
+            y2="0"
+          >
+            <stop
+              v-for="(stop, i) in computedStops"
+              :key="i"
+              :offset="stop.offset"
+              :stop-color="`rgb(${stop.color[0]},${stop.color[1]},${stop.color[2]})`"
+            />
+          </linearGradient>
+        </defs>
+
+        <rect
+          v-if="display === 'gradient'"
+          data-testid="gradient-bg"
+          x="0"
+          y="0"
+          width="1"
+          height="1"
+          :fill="`url(#${gradientId})`"
+        />
+
+        <path
+          v-if="display === 'histogram' && histogramPath"
+          data-testid="histogram-path"
+          :d="histogramPath"
+          fill="currentColor"
+          fill-opacity="0.3"
+        />
+
+        <rect
+          v-if="display === 'plain'"
+          data-testid="range-highlight"
+          :x="minNorm"
+          y="0"
+          :width="Math.max(0, maxNorm - minNorm)"
+          height="1"
+          fill="white"
+          fill-opacity="0.15"
+        />
+        <template v-if="display === 'histogram'">
+          <rect
+            v-if="minNorm > 0"
+            data-testid="range-dim-left"
+            x="0"
+            y="0"
+            :width="minNorm"
+            height="1"
+            fill="black"
+            fill-opacity="0.5"
+          />
+          <rect
+            v-if="maxNorm < 1"
+            data-testid="range-dim-right"
+            :x="maxNorm"
+            y="0"
+            :width="1 - maxNorm"
+            height="1"
+            fill="black"
+            fill-opacity="0.5"
+          />
+        </template>
+      </svg>
+
+      <template v-if="!disabled">
+        <div
+          data-testid="handle-min"
+          class="absolute -translate-x-1/2 cursor-grab"
+          :style="{ left: `${minNorm * 100}%`, bottom: '-10px' }"
+          @pointerdown.stop="startDrag('min', $event)"
+        >
+          <svg width="12" height="10" viewBox="0 0 12 10">
+            <polygon
+              points="6,0 0,10 12,10"
+              fill="#333"
+              stroke="#aaa"
+              stroke-width="0.5"
+            />
+          </svg>
+        </div>
+
+        <div
+          v-if="showMidpoint && modelValue.midpoint !== undefined"
+          data-testid="handle-midpoint"
+          class="absolute -translate-x-1/2 cursor-grab"
+          :style="{ left: `${midpointPercent}%`, bottom: '-10px' }"
+          @pointerdown.stop="startDrag('midpoint', $event)"
+        >
+          <svg width="12" height="10" viewBox="0 0 12 10">
+            <polygon
+              points="6,0 0,10 12,10"
+              fill="#888"
+              stroke="#ccc"
+              stroke-width="0.5"
+            />
+          </svg>
+        </div>
+
+        <div
+          data-testid="handle-max"
+          class="absolute -translate-x-1/2 cursor-grab"
+          :style="{ left: `${maxNorm * 100}%`, bottom: '-10px' }"
+          @pointerdown.stop="startDrag('max', $event)"
+        >
+          <svg width="12" height="10" viewBox="0 0 12 10">
+            <polygon
+              points="6,0 0,10 12,10"
+              fill="white"
+              stroke="#555"
+              stroke-width="0.5"
+            />
+          </svg>
+        </div>
+      </template>
+    </div>
+
+    <div
+      v-if="!disabled"
+      class="mt-3 flex items-center justify-between"
+      @pointerdown.stop
+    >
+      <ScrubableNumberInput
+        v-model="minValue"
+        :display-value="formatValue(minValue)"
+        :min="valueMin"
+        :max="valueMax"
+        :step="step"
+        hide-buttons
+        class="w-16"
+      />
+      <ScrubableNumberInput
+        v-if="showMidpoint && modelValue.midpoint !== undefined"
+        v-model="midpointValue"
+        :display-value="midpointValue.toFixed(2)"
+        :min="midpointScale === 'gamma' ? 0.01 : 0"
+        :max="midpointScale === 'gamma' ? 9.99 : 1"
+        :step="0.01"
+        hide-buttons
+        class="w-16"
+      />
+      <ScrubableNumberInput
+        v-model="maxValue"
+        :display-value="formatValue(maxValue)"
+        :min="valueMin"
+        :max="valueMax"
+        :step="step"
+        hide-buttons
+        class="w-16"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, toRef, useId, useTemplateRef } from 'vue'
+
+import ScrubableNumberInput from '@/components/common/ScrubableNumberInput.vue'
+import { cn } from '@/utils/tailwindUtil'
+import { histogramToPath } from '@/utils/histogramUtil'
+import { useRangeEditor } from '@/composables/useRangeEditor'
+import type { ColorStop } from '@/lib/litegraph/src/interfaces'
+import type { RangeValue } from '@/lib/litegraph/src/types/widgets'
+
+import { normalize } from '@/utils/mathUtil'
+
+import { clamp } from 'es-toolkit'
+
+import { gammaToPosition, positionToGamma } from './rangeUtils'
+
+const {
+  display = 'plain',
+  gradientStops,
+  showMidpoint = false,
+  midpointScale = 'linear',
+  histogram,
+  disabled = false,
+  valueMin = 0,
+  valueMax = 1
+} = defineProps<{
+  display?: 'plain' | 'gradient' | 'histogram'
+  gradientStops?: ColorStop[]
+  showMidpoint?: boolean
+  midpointScale?: 'linear' | 'gamma'
+  histogram?: Uint32Array | null
+  disabled?: boolean
+  valueMin?: number
+  valueMax?: number
+}>()
+
+const modelValue = defineModel<RangeValue>({ required: true })
+
+const trackRef = useTemplateRef<HTMLDivElement>('trackRef')
+const gradientId = useId()
+
+const { handleTrackPointerDown, startDrag } = useRangeEditor({
+  trackRef,
+  modelValue,
+  valueMin: toRef(() => valueMin),
+  valueMax: toRef(() => valueMax),
+  showMidpoint: toRef(() => showMidpoint)
+})
+
+function onTrackPointerDown(e: PointerEvent) {
+  if (!disabled) handleTrackPointerDown(e)
+}
+
+const isIntegerRange = computed(() => valueMax - valueMin >= 2)
+const step = computed(() => (isIntegerRange.value ? 1 : 0.01))
+
+function formatValue(v: number): string {
+  return isIntegerRange.value ? Math.round(v).toString() : v.toFixed(2)
+}
+
+const minNorm = computed(() =>
+  normalize(modelValue.value.min, valueMin, valueMax)
+)
+const maxNorm = computed(() =>
+  normalize(modelValue.value.max, valueMin, valueMax)
+)
+
+const computedStops = computed(
+  () =>
+    gradientStops ?? [
+      { offset: 0, color: [0, 0, 0] as const },
+      { offset: 1, color: [255, 255, 255] as const }
+    ]
+)
+
+const midpointPercent = computed(() => {
+  const { min, max, midpoint } = modelValue.value
+  if (midpoint === undefined) return 0
+  const midAbs = min + midpoint * (max - min)
+  return normalize(midAbs, valueMin, valueMax) * 100
+})
+
+const minValue = computed({
+  get: () => modelValue.value.min,
+  set: (min) => {
+    modelValue.value = {
+      ...modelValue.value,
+      min: Math.min(clamp(min, valueMin, valueMax), modelValue.value.max)
+    }
+  }
+})
+
+const maxValue = computed({
+  get: () => modelValue.value.max,
+  set: (max) => {
+    modelValue.value = {
+      ...modelValue.value,
+      max: Math.max(clamp(max, valueMin, valueMax), modelValue.value.min)
+    }
+  }
+})
+
+const midpointValue = computed({
+  get: () => {
+    const pos = modelValue.value.midpoint ?? 0.5
+    return midpointScale === 'gamma' ? positionToGamma(pos) : pos
+  },
+  set: (val) => {
+    const position =
+      midpointScale === 'gamma'
+        ? clamp(gammaToPosition(val), 0, 1)
+        : clamp(val, 0, 1)
+    modelValue.value = { ...modelValue.value, midpoint: position }
+  }
+})
+
+const histogramPath = computed(() =>
+  histogram ? histogramToPath(histogram) : ''
+)
+</script>
diff --git a/src/components/range/WidgetRange.vue b/src/components/range/WidgetRange.vue
new file mode 100644
index 0000000000..f0c19b15fc
--- /dev/null
+++ b/src/components/range/WidgetRange.vue
@@ -0,0 +1,74 @@
+<template>
+  <RangeEditor
+    :model-value="effectiveValue"
+    :display="widget?.options?.display"
+    :gradient-stops="widget?.options?.gradient_stops"
+    :show-midpoint="widget?.options?.show_midpoint"
+    :midpoint-scale="widget?.options?.midpoint_scale"
+    :histogram="histogram"
+    :disabled="isDisabled"
+    :value-min="widget?.options?.value_min"
+    :value-max="widget?.options?.value_max"
+    @update:model-value="onValueChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, watch } from 'vue'
+
+import {
+  singleValueExtractor,
+  useUpstreamValue
+} from '@/composables/useUpstreamValue'
+import type {
+  IWidgetRangeOptions,
+  RangeValue
+} from '@/lib/litegraph/src/types/widgets'
+import { useNodeOutputStore } from '@/stores/nodeOutputStore'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+import RangeEditor from './RangeEditor.vue'
+import { isRangeValue } from './rangeUtils'
+
+const { widget } = defineProps<{
+  widget: SimplifiedWidget<RangeValue, IWidgetRangeOptions>
+}>()
+
+const modelValue = defineModel<RangeValue>({
+  default: () => ({ min: 0, max: 1 })
+})
+
+const isDisabled = computed(() => !!widget.options?.disabled)
+
+const nodeOutputStore = useNodeOutputStore()
+const histogram = computed(() => {
+  const locatorId = widget.nodeLocatorId
+  if (!locatorId) return null
+  const output = nodeOutputStore.nodeOutputs[locatorId]
+  const key = `histogram_${widget.name}`
+  const data = (output as Record<string, unknown>)?.[key]
+  if (!Array.isArray(data) || data.length === 0) return null
+  return new Uint32Array(data)
+})
+
+const upstreamValue = useUpstreamValue(
+  () => widget.linkedUpstream,
+  singleValueExtractor(isRangeValue)
+)
+
+watch(upstreamValue, (upstream) => {
+  if (isDisabled.value && upstream) {
+    modelValue.value = upstream
+  }
+})
+
+const effectiveValue = computed(() =>
+  isDisabled.value && upstreamValue.value
+    ? upstreamValue.value
+    : modelValue.value
+)
+
+function onValueChange(value: RangeValue) {
+  modelValue.value = value
+}
+</script>
diff --git a/src/components/range/rangeUtils.test.ts b/src/components/range/rangeUtils.test.ts
new file mode 100644
index 0000000000..c1dbee7c09
--- /dev/null
+++ b/src/components/range/rangeUtils.test.ts
@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest'
+
+import { gammaToPosition, isRangeValue, positionToGamma } from './rangeUtils'
+
+describe('positionToGamma', () => {
+  it('converts 0.5 to gamma 1.0', () => {
+    expect(positionToGamma(0.5)).toBeCloseTo(1.0)
+  })
+
+  it('converts 0.25 to gamma 2.0', () => {
+    expect(positionToGamma(0.25)).toBeCloseTo(2.0)
+  })
+})
+
+describe('gammaToPosition', () => {
+  it('converts gamma 1.0 to position 0.5', () => {
+    expect(gammaToPosition(1.0)).toBeCloseTo(0.5)
+  })
+
+  it('converts gamma 2.0 to position 0.25', () => {
+    expect(gammaToPosition(2.0)).toBeCloseTo(0.25)
+  })
+
+  it('round-trips with positionToGamma', () => {
+    for (const pos of [0.1, 0.3, 0.5, 0.7, 0.9]) {
+      expect(gammaToPosition(positionToGamma(pos))).toBeCloseTo(pos)
+    }
+  })
+})
+
+describe('isRangeValue', () => {
+  it('returns true for valid range', () => {
+    expect(isRangeValue({ min: 0, max: 1 })).toBe(true)
+    expect(isRangeValue({ min: 0, max: 1, midpoint: 0.5 })).toBe(true)
+  })
+
+  it('returns false for non-objects', () => {
+    expect(isRangeValue(null)).toBe(false)
+    expect(isRangeValue(42)).toBe(false)
+    expect(isRangeValue('foo')).toBe(false)
+    expect(isRangeValue([0, 1])).toBe(false)
+  })
+
+  it('returns false for objects missing min or max', () => {
+    expect(isRangeValue({ min: 0 })).toBe(false)
+    expect(isRangeValue({ max: 1 })).toBe(false)
+    expect(isRangeValue({ min: 'a', max: 1 })).toBe(false)
+  })
+})
diff --git a/src/components/range/rangeUtils.ts b/src/components/range/rangeUtils.ts
new file mode 100644
index 0000000000..999245f024
--- /dev/null
+++ b/src/components/range/rangeUtils.ts
@@ -0,0 +1,23 @@
+import { clamp } from 'es-toolkit'
+
+import type { RangeValue } from '@/lib/litegraph/src/types/widgets'
+
+export function positionToGamma(position: number): number {
+  // Avoid log2(0) = -Infinity and log2(1) = 0 (division by zero in gamma)
+  const clamped = clamp(position, 0.001, 0.999)
+  return -Math.log2(clamped)
+}
+
+export function gammaToPosition(gamma: number): number {
+  return Math.pow(2, -gamma)
+}
+
+export function isRangeValue(value: unknown): value is RangeValue {
+  if (typeof value !== 'object' || value === null || Array.isArray(value))
+    return false
+  const v = value as Record<string, unknown>
+  const hasFiniteBounds = Number.isFinite(v.min) && Number.isFinite(v.max)
+  const hasValidMidpoint =
+    v.midpoint === undefined || Number.isFinite(v.midpoint)
+  return hasFiniteBounds && hasValidMidpoint
+}
diff --git a/src/components/rightSidePanel/RightSidePanel.vue b/src/components/rightSidePanel/RightSidePanel.vue
index af24d79536..7b562aa920 100644
--- a/src/components/rightSidePanel/RightSidePanel.vue
+++ b/src/components/rightSidePanel/RightSidePanel.vue
@@ -16,6 +16,7 @@ import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
+import { useMissingMediaStore } from '@/platform/missingMedia/missingMediaStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
@@ -41,6 +42,7 @@ import TabErrors from './errors/TabErrors.vue'
 const canvasStore = useCanvasStore()
 const executionErrorStore = useExecutionErrorStore()
 const missingModelStore = useMissingModelStore()
+const missingMediaStore = useMissingMediaStore()
 const missingNodesErrorStore = useMissingNodesErrorStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const settingStore = useSettingStore()
@@ -58,6 +60,7 @@ const activeMissingNodeGraphIds = computed<Set<string>>(() => {
 })
 
 const { activeMissingModelGraphIds } = storeToRefs(missingModelStore)
+const { activeMissingMediaGraphIds } = storeToRefs(missingMediaStore)
 
 const { findParentGroup } = useGraphHierarchy()
 
@@ -142,13 +145,22 @@ const hasMissingModelSelected = computed(
     )
 )
 
+const hasMissingMediaSelected = computed(
+  () =>
+    hasSelection.value &&
+    selectedNodes.value.some((node) =>
+      activeMissingMediaGraphIds.value.has(String(node.id))
+    )
+)
+
 const hasRelevantErrors = computed(() => {
   if (!hasSelection.value) return hasAnyError.value
   return (
     hasDirectNodeError.value ||
     hasContainerInternalError.value ||
     hasMissingNodeSelected.value ||
-    hasMissingModelSelected.value
+    hasMissingModelSelected.value ||
+    hasMissingMediaSelected.value
   )
 })
 
@@ -287,11 +299,14 @@ function handleTitleCancel() {
               @cancel="handleTitleCancel"
               @click="isEditing = true"
             />
-            <i
+            <button
               v-if="!isEditing"
-              class="relative top-[2px] ml-2 icon-[lucide--pencil] size-4 shrink-0 cursor-pointer content-center text-muted-foreground hover:text-base-foreground"
+              :aria-label="t('rightSidePanel.editTitle')"
+              class="relative top-[2px] ml-2 size-4 shrink-0 cursor-pointer content-center text-muted-foreground hover:text-base-foreground"
               @click="isEditing = true"
-            />
+            >
+              <i aria-hidden="true" class="icon-[lucide--pencil] size-4" />
+            </button>
           </template>
           <template v-else>
             {{ panelTitle }}
@@ -303,6 +318,8 @@ function handleTitleCancel() {
             v-if="isSingleSubgraphNode"
             variant="secondary"
             size="icon"
+            data-testid="subgraph-editor-toggle"
+            :aria-label="t('rightSidePanel.editSubgraph')"
             :class="cn(isEditingSubgraph && 'bg-secondary-background-selected')"
             @click="
               rightSidePanelStore.openPanel(
@@ -337,6 +354,7 @@ function handleTitleCancel() {
             :key="tab.value"
             class="px-2 py-1 font-inter text-sm transition-all active:scale-95"
             :value="tab.value"
+            :data-testid="`panel-tab-${tab.value}`"
           >
             {{ tab.label() }}
             <i
diff --git a/src/components/rightSidePanel/errors/ErrorNodeCard.test.ts b/src/components/rightSidePanel/errors/ErrorNodeCard.test.ts
index 7b58195fa8..6b603f6a95 100644
--- a/src/components/rightSidePanel/errors/ErrorNodeCard.test.ts
+++ b/src/components/rightSidePanel/errors/ErrorNodeCard.test.ts
@@ -1,5 +1,6 @@
-import { mount, flushPromises } from '@vue/test-utils'
 import { createTestingPinia } from '@pinia/testing'
+import { render, screen, waitFor } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import PrimeVue from 'primevue/config'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
@@ -89,16 +90,21 @@ describe('ErrorNodeCard.vue', () => {
     })
   })
 
-  function mountCard(card: ErrorCardData) {
-    return mount(ErrorNodeCard, {
-      props: { card },
+  function renderCard(
+    card: ErrorCardData,
+    options: { initialState?: Record<string, unknown> } = {}
+  ) {
+    const user = userEvent.setup()
+    const onCopyToClipboard = vi.fn()
+    render(ErrorNodeCard, {
+      props: { card, onCopyToClipboard },
       global: {
         plugins: [
           PrimeVue,
           i18n,
           createTestingPinia({
             createSpy: vi.fn,
-            initialState: {
+            initialState: options.initialState ?? {
               systemStats: {
                 systemStats: {
                   system: {
@@ -132,6 +138,7 @@ describe('ErrorNodeCard.vue', () => {
         }
       }
     })
+    return { user, onCopyToClipboard }
   }
 
   let cardIdCounter = 0
@@ -173,76 +180,82 @@ describe('ErrorNodeCard.vue', () => {
       '# ComfyUI Error Report\n## System Information\n- OS: Linux'
     mockGenerateErrorReport.mockReturnValue(reportText)
 
-    const wrapper = mountCard(makeRuntimeErrorCard())
-    await flushPromises()
+    renderCard(makeRuntimeErrorCard())
 
-    expect(wrapper.text()).toContain('ComfyUI Error Report')
-    expect(wrapper.text()).toContain('System Information')
-    expect(wrapper.text()).toContain('OS: Linux')
+    await waitFor(() => {
+      expect(screen.getByText(/ComfyUI Error Report/)).toBeInTheDocument()
+    })
+    expect(screen.getByText(/System Information/)).toBeInTheDocument()
+    expect(screen.getByText(/OS: Linux/)).toBeInTheDocument()
   })
 
   it('does not generate report for non-runtime errors', async () => {
-    mountCard(makeValidationErrorCard())
-    await flushPromises()
+    renderCard(makeValidationErrorCard())
+
+    await waitFor(() => {
+      expect(screen.getByText('Input: text')).toBeInTheDocument()
+    })
 
     expect(mockGetLogs).not.toHaveBeenCalled()
     expect(mockGenerateErrorReport).not.toHaveBeenCalled()
   })
 
   it('displays original details for non-runtime errors', async () => {
-    const wrapper = mountCard(makeValidationErrorCard())
-    await flushPromises()
+    renderCard(makeValidationErrorCard())
 
-    expect(wrapper.text()).toContain('Input: text')
-    expect(wrapper.text()).not.toContain('ComfyUI Error Report')
+    await waitFor(() => {
+      expect(screen.getByText('Input: text')).toBeInTheDocument()
+    })
+    expect(screen.queryByText(/ComfyUI Error Report/)).not.toBeInTheDocument()
   })
 
   it('copies enriched report when copy button is clicked for runtime error', async () => {
     const reportText = '# Full Report Content'
     mockGenerateErrorReport.mockReturnValue(reportText)
 
-    const wrapper = mountCard(makeRuntimeErrorCard())
-    await flushPromises()
+    const { user, onCopyToClipboard } = renderCard(makeRuntimeErrorCard())
 
-    const copyButton = wrapper
-      .findAll('button')
-      .find((btn) => btn.text().includes('Copy'))!
-    expect(copyButton.exists()).toBe(true)
-    await copyButton.trigger('click')
+    await waitFor(() => {
+      expect(screen.getByText(/Full Report Content/)).toBeInTheDocument()
+    })
 
-    const emitted = wrapper.emitted('copyToClipboard')
-    expect(emitted).toHaveLength(1)
-    expect(emitted![0][0]).toContain('# Full Report Content')
+    await user.click(screen.getByRole('button', { name: /Copy/ }))
+
+    expect(onCopyToClipboard).toHaveBeenCalledTimes(1)
+    expect(onCopyToClipboard.mock.calls[0][0]).toContain(
+      '# Full Report Content'
+    )
   })
 
   it('copies original details when copy button is clicked for validation error', async () => {
-    const wrapper = mountCard(makeValidationErrorCard())
-    await flushPromises()
+    const { user, onCopyToClipboard } = renderCard(makeValidationErrorCard())
 
-    const copyButton = wrapper
-      .findAll('button')
-      .find((btn) => btn.text().includes('Copy'))!
-    await copyButton.trigger('click')
+    await waitFor(() => {
+      expect(screen.getByText('Input: text')).toBeInTheDocument()
+    })
 
-    const emitted = wrapper.emitted('copyToClipboard')
-    expect(emitted).toHaveLength(1)
-    expect(emitted![0][0]).toBe('Required input is missing\n\nInput: text')
+    await user.click(screen.getByRole('button', { name: /Copy/ }))
+
+    expect(onCopyToClipboard).toHaveBeenCalledTimes(1)
+    expect(onCopyToClipboard.mock.calls[0][0]).toBe(
+      'Required input is missing\n\nInput: text'
+    )
   })
 
   it('generates report with fallback logs when getLogs fails', async () => {
     mockGetLogs.mockRejectedValue(new Error('Network error'))
 
-    const wrapper = mountCard(makeRuntimeErrorCard())
-    await flushPromises()
+    renderCard(makeRuntimeErrorCard())
 
-    // Report is still generated with fallback log message
-    expect(mockGenerateErrorReport).toHaveBeenCalledOnce()
+    await waitFor(() => {
+      expect(mockGenerateErrorReport).toHaveBeenCalledOnce()
+    })
     expect(mockGenerateErrorReport).toHaveBeenCalledWith(
       expect.objectContaining({
         serverLogs: 'Failed to retrieve server logs'
       })
     )
-    expect(wrapper.text()).toContain('ComfyUI Error Report')
+    expect(screen.getByText(/ComfyUI Error Report/)).toBeInTheDocument()
   })
 
   it('falls back to original details when generateErrorReport throws', async () => {
@@ -250,24 +263,25 @@ describe('ErrorNodeCard.vue', () => {
       throw new Error('Serialization error')
     })
 
-    const wrapper = mountCard(makeRuntimeErrorCard())
-    await flushPromises()
+    renderCard(makeRuntimeErrorCard())
 
-    expect(wrapper.text()).toContain('Traceback line 1')
+    await waitFor(() => {
+      expect(screen.getByText(/Traceback line 1/)).toBeInTheDocument()
+    })
   })
 
   it('opens GitHub issues search when Find Issue button is clicked', async () => {
     const openSpy = vi.spyOn(window, 'open').mockImplementation(() => null)
 
-    const wrapper = mountCard(makeRuntimeErrorCard())
-    await flushPromises()
+    const { user } = renderCard(makeRuntimeErrorCard())
 
-    const findIssuesButton = wrapper
-      .findAll('button')
-      .find((btn) => btn.text().includes('Find on GitHub'))!
-    expect(findIssuesButton.exists()).toBe(true)
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: /Find on GitHub/ })
+      ).toBeInTheDocument()
+    })
 
-    await findIssuesButton.trigger('click')
+    await user.click(screen.getByRole('button', { name: /Find on GitHub/ }))
 
     expect(openSpy).toHaveBeenCalledWith(
       expect.stringContaining('github.com/comfyanonymous/ComfyUI/issues?q='),
@@ -284,15 +298,15 @@ describe('ErrorNodeCard.vue', () => {
   })
 
   it('executes ContactSupport command when Get Help button is clicked', async () => {
-    const wrapper = mountCard(makeRuntimeErrorCard())
-    await flushPromises()
+    const { user } = renderCard(makeRuntimeErrorCard())
 
-    const getHelpButton = wrapper
-      .findAll('button')
-      .find((btn) => btn.text().includes('Get Help'))!
-    expect(getHelpButton.exists()).toBe(true)
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: /Get Help/ })
+      ).toBeInTheDocument()
+    })
 
-    await getHelpButton.trigger('click')
+    await user.click(screen.getByRole('button', { name: /Get Help/ }))
 
     expect(mockExecuteCommand).toHaveBeenCalledWith('Comfy.ContactSupport')
     expect(mockTrackHelpResourceClicked).toHaveBeenCalledWith(
@@ -304,9 +318,11 @@ describe('ErrorNodeCard.vue', () => {
   })
 
   it('passes exceptionType from error item to report generator', async () => {
-    mountCard(makeRuntimeErrorCard())
-    await flushPromises()
+    renderCard(makeRuntimeErrorCard())
 
+    await waitFor(() => {
+      expect(mockGenerateErrorReport).toHaveBeenCalledOnce()
+    })
     expect(mockGenerateErrorReport).toHaveBeenCalledWith(
       expect.objectContaining({
         exceptionType: 'RuntimeError'
@@ -329,9 +345,11 @@ describe('ErrorNodeCard.vue', () => {
       ]
     }
 
-    mountCard(card)
-    await flushPromises()
+    renderCard(card)
 
+    await waitFor(() => {
+      expect(mockGenerateErrorReport).toHaveBeenCalledOnce()
+    })
     expect(mockGenerateErrorReport).toHaveBeenCalledWith(
       expect.objectContaining({
         exceptionType: 'Runtime Error'
@@ -340,30 +358,16 @@ describe('ErrorNodeCard.vue', () => {
   })
 
   it('falls back to original details when systemStats is unavailable', async () => {
-    const wrapper = mount(ErrorNodeCard, {
-      props: { card: makeRuntimeErrorCard() },
-      global: {
-        plugins: [
-          PrimeVue,
-          i18n,
-          createTestingPinia({
-            createSpy: vi.fn,
-            initialState: {
-              systemStats: { systemStats: null }
-            }
-          })
-        ],
-        stubs: {
-          Button: {
-            template:
-              '<button :aria-label="$attrs[\'aria-label\']"><slot /></button>'
-          }
-        }
+    renderCard(makeRuntimeErrorCard(), {
+      initialState: {
+        systemStats: { systemStats: null }
       }
     })
-    await flushPromises()
+
+    await waitFor(() => {
+      expect(screen.getByText(/Traceback line 1/)).toBeInTheDocument()
+    })
 
     expect(mockGenerateErrorReport).not.toHaveBeenCalled()
-    expect(wrapper.text()).toContain('Traceback line 1')
   })
 })
diff --git a/src/components/rightSidePanel/errors/MissingNodeCard.test.ts b/src/components/rightSidePanel/errors/MissingNodeCard.test.ts
index d9a55d21c3..e3771f4207 100644
--- a/src/components/rightSidePanel/errors/MissingNodeCard.test.ts
+++ b/src/components/rightSidePanel/errors/MissingNodeCard.test.ts
@@ -1,5 +1,6 @@
-import { mount } from '@vue/test-utils'
 import { createTestingPinia } from '@pinia/testing'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
@@ -68,7 +69,13 @@ vi.mock('@/workbench/extensions/manager/composables/useManagerState', () => ({
 vi.mock('./MissingPackGroupRow.vue', () => ({
   default: {
     name: 'MissingPackGroupRow',
-    template: '<div class="pack-row" />',
+    template: `<div class="pack-row" data-testid="pack-row"
+      :data-show-info-button="String(showInfoButton)"
+      :data-show-node-id-badge="String(showNodeIdBadge)"
+    >
+      <button data-testid="locate-node" @click="$emit('locate-node', group.nodeTypes[0]?.nodeId)" />
+      <button data-testid="open-manager-info" @click="$emit('open-manager-info', group.packId)" />
+    </div>`,
     props: ['group', 'showInfoButton', 'showNodeIdBadge'],
     emits: ['locate-node', 'open-manager-info']
   }
@@ -95,7 +102,8 @@ const i18n = createI18n({
           'Some nodes require a newer version of ComfyUI (current: {version}).',
         outdatedVersionGeneric:
           'Some nodes require a newer version of ComfyUI.',
-        coreNodesFromVersion: 'Requires ComfyUI {version}:'
+        coreNodesFromVersion: 'Requires ComfyUI {version}:',
+        unknownVersion: 'unknown'
       }
     }
   },
@@ -113,14 +121,15 @@ function makePackGroups(count = 2): MissingPackGroup[] {
   }))
 }
 
-function mountCard(
+function renderCard(
   props: Partial<{
     showInfoButton: boolean
     showNodeIdBadge: boolean
     missingPackGroups: MissingPackGroup[]
   }> = {}
 ) {
-  return mount(MissingNodeCard, {
+  const user = userEvent.setup()
+  const result = render(MissingNodeCard, {
     props: {
       showInfoButton: false,
       showNodeIdBadge: false,
@@ -134,6 +143,7 @@ function mountCard(
       }
     }
   })
+  return { ...result, user }
 }
 
 describe('MissingNodeCard', () => {
@@ -151,131 +161,163 @@ describe('MissingNodeCard', () => {
   describe('Rendering & Props', () => {
     it('renders cloud message when isCloud is true', () => {
       mockIsCloud.value = true
-      const wrapper = mountCard()
-      expect(wrapper.text()).toContain('Unsupported node packs detected')
+      renderCard()
+      expect(
+        screen.getByText('Unsupported node packs detected.')
+      ).toBeInTheDocument()
     })
 
     it('renders OSS message when isCloud is false', () => {
-      const wrapper = mountCard()
-      expect(wrapper.text()).toContain('Missing node packs detected')
+      renderCard()
+      expect(
+        screen.getByText('Missing node packs detected. Install them.')
+      ).toBeInTheDocument()
     })
 
     it('renders correct number of MissingPackGroupRow components', () => {
-      const wrapper = mountCard({ missingPackGroups: makePackGroups(3) })
-      expect(
-        wrapper.findAllComponents({ name: 'MissingPackGroupRow' })
-      ).toHaveLength(3)
+      renderCard({ missingPackGroups: makePackGroups(3) })
+      expect(screen.getAllByTestId('pack-row')).toHaveLength(3)
     })
 
     it('renders zero rows when missingPackGroups is empty', () => {
-      const wrapper = mountCard({ missingPackGroups: [] })
-      expect(
-        wrapper.findAllComponents({ name: 'MissingPackGroupRow' })
-      ).toHaveLength(0)
+      renderCard({ missingPackGroups: [] })
+      expect(screen.queryAllByTestId('pack-row')).toHaveLength(0)
     })
 
     it('passes props correctly to MissingPackGroupRow children', () => {
-      const wrapper = mountCard({
+      renderCard({
         showInfoButton: true,
         showNodeIdBadge: true
       })
-      const row = wrapper.findComponent({ name: 'MissingPackGroupRow' })
-      expect(row.props('showInfoButton')).toBe(true)
-      expect(row.props('showNodeIdBadge')).toBe(true)
+      const row = screen.getAllByTestId('pack-row')[0]
+      expect(row.getAttribute('data-show-info-button')).toBe('true')
+      expect(row.getAttribute('data-show-node-id-badge')).toBe('true')
     })
   })
 
   describe('Manager Disabled Hint', () => {
     it('shows hint when OSS and manager is disabled (showInfoButton false)', () => {
       mockIsCloud.value = false
-      const wrapper = mountCard({ showInfoButton: false })
-      expect(wrapper.text()).toContain('pip install -U --pre comfyui-manager')
-      expect(wrapper.text()).toContain('--enable-manager')
+      renderCard({ showInfoButton: false })
+      expect(
+        screen.getByText('pip install -U --pre comfyui-manager')
+      ).toBeInTheDocument()
+      expect(screen.getByText('--enable-manager')).toBeInTheDocument()
     })
 
     it('hides hint when manager is enabled (showInfoButton true)', () => {
       mockIsCloud.value = false
-      const wrapper = mountCard({ showInfoButton: true })
-      expect(wrapper.text()).not.toContain('--enable-manager')
+      renderCard({ showInfoButton: true })
+      expect(screen.queryByText('--enable-manager')).not.toBeInTheDocument()
     })
 
     it('hides hint on Cloud even when showInfoButton is false', () => {
       mockIsCloud.value = true
-      const wrapper = mountCard({ showInfoButton: false })
-      expect(wrapper.text()).not.toContain('--enable-manager')
+      renderCard({ showInfoButton: false })
+      expect(screen.queryByText('--enable-manager')).not.toBeInTheDocument()
     })
   })
 
   describe('Apply Changes Section', () => {
     it('hides Apply Changes when manager is not enabled', () => {
       mockShouldShowManagerButtons.value = false
-      const wrapper = mountCard()
-      expect(wrapper.text()).not.toContain('Apply Changes')
+      renderCard()
+      expect(screen.queryByText('Apply Changes')).not.toBeInTheDocument()
     })
 
     it('hides Apply Changes when manager enabled but no packs pending', () => {
       mockShouldShowManagerButtons.value = true
       mockIsPackInstalled.mockReturnValue(false)
-      const wrapper = mountCard()
-      expect(wrapper.text()).not.toContain('Apply Changes')
+      renderCard()
+      expect(screen.queryByText('Apply Changes')).not.toBeInTheDocument()
     })
 
     it('shows Apply Changes when at least one pack is pending restart', () => {
       mockShouldShowManagerButtons.value = true
       mockIsPackInstalled.mockReturnValue(true)
-      const wrapper = mountCard()
-      expect(wrapper.text()).toContain('Apply Changes')
+      renderCard()
+      expect(screen.getByText('Apply Changes')).toBeInTheDocument()
     })
 
     it('displays spinner during restart', () => {
       mockShouldShowManagerButtons.value = true
       mockIsPackInstalled.mockReturnValue(true)
       mockIsRestarting.value = true
-      const wrapper = mountCard()
-      expect(wrapper.find('[role="status"]').exists()).toBe(true)
+      renderCard()
+      expect(screen.getByRole('status')).toBeInTheDocument()
     })
 
     it('disables button during restart', () => {
       mockShouldShowManagerButtons.value = true
       mockIsPackInstalled.mockReturnValue(true)
       mockIsRestarting.value = true
-      const wrapper = mountCard()
-      const btn = wrapper.find('button')
-      expect(btn.attributes('disabled')).toBeDefined()
+      renderCard()
+      expect(
+        screen.getByRole('button', { name: /apply changes/i })
+      ).toBeDisabled()
     })
 
     it('calls applyChanges when Apply Changes button is clicked', async () => {
       mockShouldShowManagerButtons.value = true
       mockIsPackInstalled.mockReturnValue(true)
-      const wrapper = mountCard()
-      const btn = wrapper.find('button')
-      await btn.trigger('click')
+      const { user } = renderCard()
+      await user.click(screen.getByRole('button', { name: /apply changes/i }))
       expect(mockApplyChanges).toHaveBeenCalledOnce()
     })
   })
 
   describe('Event Handling', () => {
     it('emits locateNode when child emits locate-node', async () => {
-      const wrapper = mountCard()
-      const row = wrapper.findComponent({ name: 'MissingPackGroupRow' })
-      await row.vm.$emit('locate-node', '42')
-      expect(wrapper.emitted('locateNode')).toBeTruthy()
-      expect(wrapper.emitted('locateNode')?.[0]).toEqual(['42'])
+      const onLocateNode = vi.fn()
+      const user = userEvent.setup()
+      render(MissingNodeCard, {
+        props: {
+          showInfoButton: false,
+          showNodeIdBadge: false,
+          missingPackGroups: makePackGroups(),
+          onLocateNode
+        },
+        global: {
+          plugins: [createTestingPinia({ createSpy: vi.fn }), i18n],
+          stubs: {
+            DotSpinner: {
+              template: '<span role="status" aria-label="loading" />'
+            }
+          }
+        }
+      })
+      await user.click(screen.getAllByTestId('locate-node')[0])
+      expect(onLocateNode).toHaveBeenCalledWith('0')
     })
 
     it('emits openManagerInfo when child emits open-manager-info', async () => {
-      const wrapper = mountCard()
-      const row = wrapper.findComponent({ name: 'MissingPackGroupRow' })
-      await row.vm.$emit('open-manager-info', 'pack-0')
-      expect(wrapper.emitted('openManagerInfo')).toBeTruthy()
-      expect(wrapper.emitted('openManagerInfo')?.[0]).toEqual(['pack-0'])
+      const onOpenManagerInfo = vi.fn()
+      const user = userEvent.setup()
+      render(MissingNodeCard, {
+        props: {
+          showInfoButton: false,
+          showNodeIdBadge: false,
+          missingPackGroups: makePackGroups(),
+          onOpenManagerInfo
+        },
+        global: {
+          plugins: [createTestingPinia({ createSpy: vi.fn }), i18n],
+          stubs: {
+            DotSpinner: {
+              template: '<span role="status" aria-label="loading" />'
+            }
+          }
+        }
+      })
+      await user.click(screen.getAllByTestId('open-manager-info')[0])
+      expect(onOpenManagerInfo).toHaveBeenCalledWith('pack-0')
     })
   })
 
   describe('Core Node Version Warning', () => {
     it('does not render warning when no missing core nodes', () => {
-      const wrapper = mountCard()
-      expect(wrapper.text()).not.toContain('newer version of ComfyUI')
+      const { container } = renderCard()
+      expect(container.textContent).not.toContain('newer version of ComfyUI')
     })
 
     it('renders warning with version when missing core nodes exist', () => {
@@ -283,20 +325,20 @@ describe('MissingNodeCard', () => {
         '1.2.0': [{ type: 'TestNode' }]
       }
       mockSystemStats.value = { system: { comfyui_version: '1.0.0' } }
-      const wrapper = mountCard()
-      expect(wrapper.text()).toContain('(current: 1.0.0)')
-      expect(wrapper.text()).toContain('Requires ComfyUI 1.2.0:')
-      expect(wrapper.text()).toContain('TestNode')
+      const { container } = renderCard()
+      expect(container.textContent).toContain('(current: 1.0.0)')
+      expect(container.textContent).toContain('Requires ComfyUI 1.2.0:')
+      expect(container.textContent).toContain('TestNode')
     })
 
     it('renders generic message when version is unavailable', () => {
       mockMissingCoreNodes.value = {
         '1.2.0': [{ type: 'TestNode' }]
       }
-      const wrapper = mountCard()
-      expect(wrapper.text()).toContain(
-        'Some nodes require a newer version of ComfyUI.'
-      )
+      renderCard()
+      expect(
+        screen.getByText('Some nodes require a newer version of ComfyUI.')
+      ).toBeInTheDocument()
     })
 
     it('does not render warning on Cloud', () => {
@@ -304,8 +346,8 @@ describe('MissingNodeCard', () => {
       mockMissingCoreNodes.value = {
         '1.2.0': [{ type: 'TestNode' }]
       }
-      const wrapper = mountCard()
-      expect(wrapper.text()).not.toContain('newer version of ComfyUI')
+      const { container } = renderCard()
+      expect(container.textContent).not.toContain('newer version of ComfyUI')
     })
 
     it('deduplicates and sorts node names within a version', () => {
@@ -316,9 +358,10 @@ describe('MissingNodeCard', () => {
           { type: 'ZebraNode' }
         ]
       }
-      const wrapper = mountCard()
-      expect(wrapper.text()).toContain('AlphaNode, ZebraNode')
-      expect(wrapper.text().match(/ZebraNode/g)?.length).toBe(1)
+      const { container } = renderCard()
+      expect(container.textContent).toContain('AlphaNode, ZebraNode')
+      // eslint-disable-next-line testing-library/no-container
+      expect(container.textContent?.match(/ZebraNode/g)).toHaveLength(1)
     })
 
     it('sorts versions in descending order', () => {
@@ -327,8 +370,8 @@ describe('MissingNodeCard', () => {
         '1.3.0': [{ type: 'Node3' }],
         '1.2.0': [{ type: 'Node2' }]
       }
-      const wrapper = mountCard()
-      const text = wrapper.text()
+      const { container } = renderCard()
+      const text = container.textContent ?? ''
       const v13 = text.indexOf('1.3.0')
       const v12 = text.indexOf('1.2.0')
       const v11 = text.indexOf('1.1.0')
@@ -341,11 +384,11 @@ describe('MissingNodeCard', () => {
         '': [{ type: 'NoVersionNode' }],
         '1.2.0': [{ type: 'VersionedNode' }]
       }
-      const wrapper = mountCard()
-      expect(wrapper.text()).toContain('Requires ComfyUI 1.2.0:')
-      expect(wrapper.text()).toContain('VersionedNode')
-      expect(wrapper.text()).toContain('unknown')
-      expect(wrapper.text()).toContain('NoVersionNode')
+      const { container } = renderCard()
+      expect(container.textContent).toContain('Requires ComfyUI 1.2.0:')
+      expect(container.textContent).toContain('VersionedNode')
+      expect(container.textContent).toContain('unknown')
+      expect(container.textContent).toContain('NoVersionNode')
     })
   })
 })
diff --git a/src/components/rightSidePanel/errors/MissingPackGroupRow.test.ts b/src/components/rightSidePanel/errors/MissingPackGroupRow.test.ts
index b923a4f0e9..9e6c4f8661 100644
--- a/src/components/rightSidePanel/errors/MissingPackGroupRow.test.ts
+++ b/src/components/rightSidePanel/errors/MissingPackGroupRow.test.ts
@@ -1,5 +1,6 @@
-import { mount } from '@vue/test-utils'
 import { createTestingPinia } from '@pinia/testing'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import PrimeVue from 'primevue/config'
 import { ref } from 'vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -95,18 +96,23 @@ function makeGroup(
   }
 }
 
-function mountRow(
+function renderRow(
   props: Partial<{
     group: MissingPackGroup
     showInfoButton: boolean
     showNodeIdBadge: boolean
   }> = {}
 ) {
-  return mount(MissingPackGroupRow, {
+  const user = userEvent.setup()
+  const onLocateNode = vi.fn()
+  const onOpenManagerInfo = vi.fn()
+  render(MissingPackGroupRow, {
     props: {
       group: makeGroup(),
       showInfoButton: false,
       showNodeIdBadge: false,
+      onLocateNode,
+      onOpenManagerInfo,
       ...props
     },
     global: {
@@ -119,6 +125,7 @@ function mountRow(
       }
     }
   })
+  return { user, onLocateNode, onOpenManagerInfo }
 }
 
 describe('MissingPackGroupRow', () => {
@@ -135,27 +142,27 @@ describe('MissingPackGroupRow', () => {
 
   describe('Basic Rendering', () => {
     it('renders pack name from packId', () => {
-      const wrapper = mountRow()
-      expect(wrapper.text()).toContain('my-pack')
+      renderRow()
+      expect(screen.getByText(/my-pack/)).toBeInTheDocument()
     })
 
     it('renders "Unknown pack" when packId is null', () => {
-      const wrapper = mountRow({ group: makeGroup({ packId: null }) })
-      expect(wrapper.text()).toContain('Unknown pack')
+      renderRow({ group: makeGroup({ packId: null }) })
+      expect(screen.getByText(/Unknown pack/)).toBeInTheDocument()
     })
 
     it('renders loading text when isResolving is true', () => {
-      const wrapper = mountRow({ group: makeGroup({ isResolving: true }) })
-      expect(wrapper.text()).toContain('Loading')
+      renderRow({ group: makeGroup({ isResolving: true }) })
+      expect(screen.getByText(/Loading/)).toBeInTheDocument()
     })
 
     it('renders node count', () => {
-      const wrapper = mountRow()
-      expect(wrapper.text()).toContain('(2)')
+      renderRow()
+      expect(screen.getByText(/\(2\)/)).toBeInTheDocument()
     })
 
     it('renders count of 5 for 5 nodeTypes', () => {
-      const wrapper = mountRow({
+      renderRow({
         group: makeGroup({
           nodeTypes: Array.from({ length: 5 }, (_, i) => ({
             type: `Node${i}`,
@@ -164,39 +171,39 @@ describe('MissingPackGroupRow', () => {
           }))
         })
       })
-      expect(wrapper.text()).toContain('(5)')
+      expect(screen.getByText(/\(5\)/)).toBeInTheDocument()
     })
   })
 
   describe('Expand / Collapse', () => {
     it('starts collapsed', () => {
-      const wrapper = mountRow()
-      expect(wrapper.text()).not.toContain('MissingA')
+      renderRow()
+      expect(screen.queryByText('MissingA')).not.toBeInTheDocument()
     })
 
     it('expands when chevron is clicked', async () => {
-      const wrapper = mountRow()
-      await wrapper.get('button[aria-label="Expand"]').trigger('click')
-      expect(wrapper.text()).toContain('MissingA')
-      expect(wrapper.text()).toContain('MissingB')
+      const { user } = renderRow()
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
+      expect(screen.getByText('MissingA')).toBeInTheDocument()
+      expect(screen.getByText('MissingB')).toBeInTheDocument()
     })
 
     it('collapses when chevron is clicked again', async () => {
-      const wrapper = mountRow()
-      await wrapper.get('button[aria-label="Expand"]').trigger('click')
-      expect(wrapper.text()).toContain('MissingA')
-      await wrapper.get('button[aria-label="Collapse"]').trigger('click')
-      expect(wrapper.text()).not.toContain('MissingA')
+      const { user } = renderRow()
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
+      expect(screen.getByText('MissingA')).toBeInTheDocument()
+      await user.click(screen.getByRole('button', { name: 'Collapse' }))
+      expect(screen.queryByText('MissingA')).not.toBeInTheDocument()
     })
   })
 
   describe('Node Type List', () => {
-    async function expand(wrapper: ReturnType<typeof mountRow>) {
-      await wrapper.get('button[aria-label="Expand"]').trigger('click')
+    async function expand(user: ReturnType<typeof userEvent.setup>) {
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
     }
 
     it('renders all nodeTypes when expanded', async () => {
-      const wrapper = mountRow({
+      const { user } = renderRow({
         group: makeGroup({
           nodeTypes: [
             { type: 'NodeA', nodeId: '1', isReplaceable: false },
@@ -205,48 +212,47 @@ describe('MissingPackGroupRow', () => {
           ]
         })
       })
-      await expand(wrapper)
-      expect(wrapper.text()).toContain('NodeA')
-      expect(wrapper.text()).toContain('NodeB')
-      expect(wrapper.text()).toContain('NodeC')
+      await expand(user)
+      expect(screen.getByText('NodeA')).toBeInTheDocument()
+      expect(screen.getByText('NodeB')).toBeInTheDocument()
+      expect(screen.getByText('NodeC')).toBeInTheDocument()
     })
 
     it('shows nodeId badge when showNodeIdBadge is true', async () => {
-      const wrapper = mountRow({ showNodeIdBadge: true })
-      await expand(wrapper)
-      expect(wrapper.text()).toContain('#10')
+      const { user } = renderRow({ showNodeIdBadge: true })
+      await expand(user)
+      expect(screen.getByText('#10')).toBeInTheDocument()
     })
 
     it('hides nodeId badge when showNodeIdBadge is false', async () => {
-      const wrapper = mountRow({ showNodeIdBadge: false })
-      await expand(wrapper)
-      expect(wrapper.text()).not.toContain('#10')
+      const { user } = renderRow({ showNodeIdBadge: false })
+      await expand(user)
+      expect(screen.queryByText('#10')).not.toBeInTheDocument()
     })
 
     it('emits locateNode when Locate button is clicked', async () => {
-      const wrapper = mountRow({ showNodeIdBadge: true })
-      await expand(wrapper)
-      await wrapper
-        .get('button[aria-label="Locate node on canvas"]')
-        .trigger('click')
-      expect(wrapper.emitted('locateNode')).toBeTruthy()
-      expect(wrapper.emitted('locateNode')?.[0]).toEqual(['10'])
+      const { user, onLocateNode } = renderRow({ showNodeIdBadge: true })
+      await expand(user)
+      await user.click(
+        screen.getAllByRole('button', { name: 'Locate node on canvas' })[0]
+      )
+      expect(onLocateNode).toHaveBeenCalledWith('10')
     })
 
     it('does not show Locate for nodeType without nodeId', async () => {
-      const wrapper = mountRow({
+      const { user } = renderRow({
         group: makeGroup({
           nodeTypes: [{ type: 'NoId', isReplaceable: false } as never]
         })
       })
-      await expand(wrapper)
+      await expand(user)
       expect(
-        wrapper.find('button[aria-label="Locate node on canvas"]').exists()
-      ).toBe(false)
+        screen.queryByRole('button', { name: 'Locate node on canvas' })
+      ).not.toBeInTheDocument()
     })
 
     it('handles mixed nodeTypes with and without nodeId', async () => {
-      const wrapper = mountRow({
+      const { user } = renderRow({
         showNodeIdBadge: true,
         group: makeGroup({
           nodeTypes: [
@@ -255,11 +261,11 @@ describe('MissingPackGroupRow', () => {
           ]
         })
       })
-      await expand(wrapper)
-      expect(wrapper.text()).toContain('WithId')
-      expect(wrapper.text()).toContain('WithoutId')
+      await expand(user)
+      expect(screen.getByText('WithId')).toBeInTheDocument()
+      expect(screen.getByText('WithoutId')).toBeInTheDocument()
       expect(
-        wrapper.findAll('button[aria-label="Locate node on canvas"]')
+        screen.getAllByRole('button', { name: 'Locate node on canvas' })
       ).toHaveLength(1)
     })
   })
@@ -267,102 +273,103 @@ describe('MissingPackGroupRow', () => {
   describe('Manager Integration', () => {
     it('hides install UI when shouldShowManagerButtons is false', () => {
       mockShouldShowManagerButtons.value = false
-      const wrapper = mountRow()
-      expect(wrapper.text()).not.toContain('Install node pack')
+      renderRow()
+      expect(screen.queryByText('Install node pack')).not.toBeInTheDocument()
     })
 
     it('hides install UI when packId is null', () => {
       mockShouldShowManagerButtons.value = true
-      const wrapper = mountRow({ group: makeGroup({ packId: null }) })
-      expect(wrapper.text()).not.toContain('Install node pack')
+      renderRow({ group: makeGroup({ packId: null }) })
+      expect(screen.queryByText('Install node pack')).not.toBeInTheDocument()
     })
 
     it('shows "Search in Node Manager" when packId exists but pack not in registry', () => {
       mockShouldShowManagerButtons.value = true
       mockIsPackInstalled.mockReturnValue(false)
       mockMissingNodePacks.value = []
-      const wrapper = mountRow()
-      expect(wrapper.text()).toContain('Search in Node Manager')
+      renderRow()
+      expect(screen.getByText('Search in Node Manager')).toBeInTheDocument()
     })
 
     it('shows "Installed" state when pack is installed', () => {
       mockShouldShowManagerButtons.value = true
       mockIsPackInstalled.mockReturnValue(true)
       mockMissingNodePacks.value = [{ id: 'my-pack', name: 'My Pack' }]
-      const wrapper = mountRow()
-      expect(wrapper.text()).toContain('Installed')
+      renderRow()
+      expect(screen.getByText('Installed')).toBeInTheDocument()
     })
 
     it('shows spinner when installing', () => {
       mockShouldShowManagerButtons.value = true
       mockIsInstalling.value = true
       mockMissingNodePacks.value = [{ id: 'my-pack', name: 'My Pack' }]
-      const wrapper = mountRow()
-      expect(wrapper.find('[role="status"]').exists()).toBe(true)
+      renderRow()
+      expect(screen.getByRole('status')).toBeInTheDocument()
     })
 
     it('shows install button when not installed and pack found', () => {
       mockShouldShowManagerButtons.value = true
       mockIsPackInstalled.mockReturnValue(false)
       mockMissingNodePacks.value = [{ id: 'my-pack', name: 'My Pack' }]
-      const wrapper = mountRow()
-      expect(wrapper.text()).toContain('Install node pack')
+      renderRow()
+      expect(screen.getByText('Install node pack')).toBeInTheDocument()
     })
 
     it('calls installAllPacks when Install button is clicked', async () => {
       mockShouldShowManagerButtons.value = true
       mockIsPackInstalled.mockReturnValue(false)
       mockMissingNodePacks.value = [{ id: 'my-pack', name: 'My Pack' }]
-      const wrapper = mountRow()
-      await wrapper.get('button:not([aria-label])').trigger('click')
+      const { user } = renderRow()
+      await user.click(
+        screen.getByRole('button', { name: /Install node pack/ })
+      )
       expect(mockInstallAllPacks).toHaveBeenCalledOnce()
     })
 
     it('shows loading spinner when registry is loading', () => {
       mockShouldShowManagerButtons.value = true
       mockIsLoading.value = true
-      const wrapper = mountRow()
-      expect(wrapper.find('[role="status"]').exists()).toBe(true)
+      renderRow()
+      expect(screen.getByRole('status')).toBeInTheDocument()
     })
   })
 
   describe('Info Button', () => {
     it('shows Info button when showInfoButton true and packId not null', () => {
-      const wrapper = mountRow({ showInfoButton: true })
+      renderRow({ showInfoButton: true })
       expect(
-        wrapper.find('button[aria-label="View in Manager"]').exists()
-      ).toBe(true)
+        screen.getByRole('button', { name: 'View in Manager' })
+      ).toBeInTheDocument()
     })
 
     it('hides Info button when showInfoButton is false', () => {
-      const wrapper = mountRow({ showInfoButton: false })
+      renderRow({ showInfoButton: false })
       expect(
-        wrapper.find('button[aria-label="View in Manager"]').exists()
-      ).toBe(false)
+        screen.queryByRole('button', { name: 'View in Manager' })
+      ).not.toBeInTheDocument()
     })
 
     it('hides Info button when packId is null', () => {
-      const wrapper = mountRow({
+      renderRow({
         showInfoButton: true,
         group: makeGroup({ packId: null })
       })
       expect(
-        wrapper.find('button[aria-label="View in Manager"]').exists()
-      ).toBe(false)
+        screen.queryByRole('button', { name: 'View in Manager' })
+      ).not.toBeInTheDocument()
     })
 
     it('emits openManagerInfo when Info button is clicked', async () => {
-      const wrapper = mountRow({ showInfoButton: true })
-      await wrapper.get('button[aria-label="View in Manager"]').trigger('click')
-      expect(wrapper.emitted('openManagerInfo')).toBeTruthy()
-      expect(wrapper.emitted('openManagerInfo')?.[0]).toEqual(['my-pack'])
+      const { user, onOpenManagerInfo } = renderRow({ showInfoButton: true })
+      await user.click(screen.getByRole('button', { name: 'View in Manager' }))
+      expect(onOpenManagerInfo).toHaveBeenCalledWith('my-pack')
     })
   })
 
   describe('Edge Cases', () => {
     it('handles empty nodeTypes array', () => {
-      const wrapper = mountRow({ group: makeGroup({ nodeTypes: [] }) })
-      expect(wrapper.text()).toContain('(0)')
+      renderRow({ group: makeGroup({ nodeTypes: [] }) })
+      expect(screen.getByText(/\(0\)/)).toBeInTheDocument()
     })
   })
 })
diff --git a/src/components/rightSidePanel/errors/TabErrors.test.ts b/src/components/rightSidePanel/errors/TabErrors.test.ts
index b64b63727d..f7dc8502b3 100644
--- a/src/components/rightSidePanel/errors/TabErrors.test.ts
+++ b/src/components/rightSidePanel/errors/TabErrors.test.ts
@@ -1,11 +1,11 @@
-import { mount } from '@vue/test-utils'
 import { createTestingPinia } from '@pinia/testing'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import PrimeVue from 'primevue/config'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 import TabErrors from './TabErrors.vue'
 
-// Mock dependencies
 vi.mock('@/scripts/app', () => ({
   app: {
     rootGraph: {
@@ -61,8 +61,9 @@ describe('TabErrors.vue', () => {
     })
   })
 
-  function mountComponent(initialState = {}) {
-    return mount(TabErrors, {
+  function renderComponent(initialState = {}) {
+    const user = userEvent.setup()
+    render(TabErrors, {
       global: {
         plugins: [
           PrimeVue,
@@ -86,15 +87,16 @@ describe('TabErrors.vue', () => {
         }
       }
     })
+    return { user }
   }
 
   it('renders "no errors" state when store is empty', () => {
-    const wrapper = mountComponent()
-    expect(wrapper.text()).toContain('No errors')
+    renderComponent()
+    expect(screen.getByText('No errors')).toBeInTheDocument()
   })
 
   it('renders prompt-level errors (Group title = error message)', async () => {
-    const wrapper = mountComponent({
+    renderComponent({
       executionError: {
         lastPromptError: {
           type: 'prompt_no_outputs',
@@ -104,12 +106,9 @@ describe('TabErrors.vue', () => {
       }
     })
 
-    // Group title should be the raw message from store
-    expect(wrapper.text()).toContain('Server Error: No outputs')
-    // Item message should be localized desc
-    expect(wrapper.text()).toContain('Prompt has no outputs')
-    // Details should not be rendered for prompt errors
-    expect(wrapper.text()).not.toContain('Error details')
+    expect(screen.getByText('Server Error: No outputs')).toBeInTheDocument()
+    expect(screen.getByText('Prompt has no outputs')).toBeInTheDocument()
+    expect(screen.queryByText('Error details')).not.toBeInTheDocument()
   })
 
   it('renders node validation errors grouped by class_type', async () => {
@@ -118,7 +117,7 @@ describe('TabErrors.vue', () => {
       title: 'CLIP Text Encode'
     } as ReturnType<typeof getNodeByExecutionId>)
 
-    const wrapper = mountComponent({
+    renderComponent({
       executionError: {
         lastNodeErrors: {
           '6': {
@@ -131,10 +130,10 @@ describe('TabErrors.vue', () => {
       }
     })
 
-    expect(wrapper.text()).toContain('CLIPTextEncode')
-    expect(wrapper.text()).toContain('#6')
-    expect(wrapper.text()).toContain('CLIP Text Encode')
-    expect(wrapper.text()).toContain('Required input is missing')
+    expect(screen.getByText('CLIPTextEncode')).toBeInTheDocument()
+    expect(screen.getByText('#6')).toBeInTheDocument()
+    expect(screen.getByText('CLIP Text Encode')).toBeInTheDocument()
+    expect(screen.getByText('Required input is missing')).toBeInTheDocument()
   })
 
   it('renders runtime execution errors from WebSocket', async () => {
@@ -143,7 +142,7 @@ describe('TabErrors.vue', () => {
       title: 'KSampler'
     } as ReturnType<typeof getNodeByExecutionId>)
 
-    const wrapper = mountComponent({
+    renderComponent({
       executionError: {
         lastExecutionError: {
           prompt_id: 'abc',
@@ -157,17 +156,17 @@ describe('TabErrors.vue', () => {
       }
     })
 
-    expect(wrapper.text()).toContain('KSampler')
-    expect(wrapper.text()).toContain('#10')
-    expect(wrapper.text()).toContain('RuntimeError: Out of memory')
-    expect(wrapper.text()).toContain('Line 1')
+    expect(screen.getAllByText('KSampler').length).toBeGreaterThanOrEqual(1)
+    expect(screen.getByText('#10')).toBeInTheDocument()
+    expect(screen.getByText('RuntimeError: Out of memory')).toBeInTheDocument()
+    expect(screen.getByText(/Line 1/)).toBeInTheDocument()
   })
 
   it('filters errors based on search query', async () => {
     const { getNodeByExecutionId } = await import('@/utils/graphTraversalUtil')
     vi.mocked(getNodeByExecutionId).mockReturnValue(null)
 
-    const wrapper = mountComponent({
+    const { user } = renderComponent({
       executionError: {
         lastNodeErrors: {
           '1': {
@@ -182,14 +181,17 @@ describe('TabErrors.vue', () => {
       }
     })
 
-    expect(wrapper.text()).toContain('CLIPTextEncode')
-    expect(wrapper.text()).toContain('KSampler')
+    expect(screen.getAllByText('CLIPTextEncode').length).toBeGreaterThanOrEqual(
+      1
+    )
+    expect(screen.getAllByText('KSampler').length).toBeGreaterThanOrEqual(1)
 
-    const searchInput = wrapper.find('input')
-    await searchInput.setValue('Missing text input')
+    await user.type(screen.getByRole('textbox'), 'Missing text input')
 
-    expect(wrapper.text()).toContain('CLIPTextEncode')
-    expect(wrapper.text()).not.toContain('KSampler')
+    expect(screen.getAllByText('CLIPTextEncode').length).toBeGreaterThanOrEqual(
+      1
+    )
+    expect(screen.queryByText('KSampler')).not.toBeInTheDocument()
   })
 
   it('calls copyToClipboard when copy button is clicked', async () => {
@@ -198,7 +200,7 @@ describe('TabErrors.vue', () => {
     const mockCopy = vi.fn()
     vi.mocked(useCopyToClipboard).mockReturnValue({ copyToClipboard: mockCopy })
 
-    const wrapper = mountComponent({
+    const { user } = renderComponent({
       executionError: {
         lastNodeErrors: {
           '1': {
@@ -209,9 +211,7 @@ describe('TabErrors.vue', () => {
       }
     })
 
-    const copyButton = wrapper.find('[data-testid="error-card-copy"]')
-    expect(copyButton.exists()).toBe(true)
-    await copyButton.trigger('click')
+    await user.click(screen.getByTestId('error-card-copy'))
 
     expect(mockCopy).toHaveBeenCalledWith('Test message\n\nTest details')
   })
@@ -222,7 +222,7 @@ describe('TabErrors.vue', () => {
       title: 'KSampler'
     } as ReturnType<typeof getNodeByExecutionId>)
 
-    const wrapper = mountComponent({
+    renderComponent({
       executionError: {
         lastExecutionError: {
           prompt_id: 'abc',
@@ -236,15 +236,9 @@ describe('TabErrors.vue', () => {
       }
     })
 
-    // Runtime error panel title should show class type
-    expect(wrapper.text()).toContain('KSampler')
-    expect(wrapper.text()).toContain('RuntimeError: Out of memory')
-    // Should render in the dedicated runtime error panel, not inside accordion
-    const runtimePanel = wrapper.find('[data-testid="runtime-error-panel"]')
-    expect(runtimePanel.exists()).toBe(true)
-    // Verify the error message appears exactly once (not duplicated in accordion)
-    expect(
-      wrapper.text().match(/RuntimeError: Out of memory/g) ?? []
-    ).toHaveLength(1)
+    expect(screen.getAllByText('KSampler').length).toBeGreaterThanOrEqual(1)
+    expect(screen.getByText('RuntimeError: Out of memory')).toBeInTheDocument()
+    expect(screen.getByTestId('runtime-error-panel')).toBeInTheDocument()
+    expect(screen.getAllByText('RuntimeError: Out of memory')).toHaveLength(1)
   })
 })
diff --git a/src/components/rightSidePanel/errors/TabErrors.vue b/src/components/rightSidePanel/errors/TabErrors.vue
index cedb3f8f24..879a6040ee 100644
--- a/src/components/rightSidePanel/errors/TabErrors.vue
+++ b/src/components/rightSidePanel/errors/TabErrors.vue
@@ -15,6 +15,7 @@
     <div
       v-if="singleRuntimeErrorCard"
       data-testid="runtime-error-panel"
+      aria-live="polite"
       class="flex min-h-0 flex-1 flex-col overflow-hidden px-4 py-3"
     >
       <div
@@ -103,7 +104,7 @@
               <Button
                 v-else-if="
                   group.type === 'missing_model' &&
-                  downloadableModels.length > 0
+                  downloadableModels.length > 1
                 "
                 variant="secondary"
                 size="sm"
@@ -168,7 +169,15 @@
             v-else-if="group.type === 'missing_model'"
             :missing-model-groups="missingModelGroups"
             :show-node-id-badge="showNodeIdBadge"
-            @locate-model="handleLocateModel"
+            @locate-model="handleLocateAssetNode"
+          />
+
+          <!-- Missing Media -->
+          <MissingMediaCard
+            v-else-if="group.type === 'missing_media'"
+            :missing-media-groups="missingMediaGroups"
+            :show-node-id-badge="showNodeIdBadge"
+            @locate-node="handleLocateAssetNode"
           />
         </PropertiesAccordionItem>
       </TransitionGroup>
@@ -225,6 +234,7 @@ import ErrorNodeCard from './ErrorNodeCard.vue'
 import MissingNodeCard from './MissingNodeCard.vue'
 import SwapNodesCard from '@/platform/nodeReplacement/components/SwapNodesCard.vue'
 import MissingModelCard from '@/platform/missingModel/components/MissingModelCard.vue'
+import MissingMediaCard from '@/platform/missingMedia/components/MissingMediaCard.vue'
 import { isCloud } from '@/platform/distribution/types'
 import {
   downloadModel,
@@ -261,7 +271,8 @@ const isSearching = computed(() => searchQuery.value.trim() !== '')
 const fullSizeGroupTypes = new Set([
   'missing_node',
   'swap_nodes',
-  'missing_model'
+  'missing_model',
+  'missing_media'
 ])
 function getGroupSize(group: ErrorGroup) {
   return fullSizeGroupTypes.has(group.type) ? 'lg' : 'default'
@@ -282,7 +293,8 @@ const {
   errorNodeCache,
   missingNodeCache,
   missingPackGroups,
-  missingModelGroups,
+  filteredMissingModelGroups: missingModelGroups,
+  filteredMissingMediaGroups: missingMediaGroups,
   swapNodeGroups
 } = useErrorGroups(searchQuery, t)
 
@@ -393,7 +405,7 @@ function handleLocateMissingNode(nodeId: string) {
   focusNode(nodeId, missingNodeCache.value)
 }
 
-function handleLocateModel(nodeId: string) {
+function handleLocateAssetNode(nodeId: string) {
   focusNode(nodeId)
 }
 
diff --git a/src/components/rightSidePanel/errors/swapNodeGroups.test.ts b/src/components/rightSidePanel/errors/swapNodeGroups.test.ts
index 4af142a372..4c59c9e1a5 100644
--- a/src/components/rightSidePanel/errors/swapNodeGroups.test.ts
+++ b/src/components/rightSidePanel/errors/swapNodeGroups.test.ts
@@ -1,3 +1,4 @@
+import { fromAny } from '@total-typescript/shoehorn'
 import { createPinia, setActivePinia } from 'pinia'
 import { nextTick, ref } from 'vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -159,7 +160,7 @@ describe('swapNodeGroups computed', () => {
 
   it('excludes string nodeType entries', async () => {
     const swap = getSwapNodeGroups([
-      'StringGroupNode' as unknown as MissingNodeType,
+      fromAny<MissingNodeType, unknown>('StringGroupNode'),
       makeMissingNodeType('OldNode', {
         nodeId: '1',
         isReplaceable: true,
diff --git a/src/components/rightSidePanel/errors/types.ts b/src/components/rightSidePanel/errors/types.ts
index 41842b79a6..964a728b14 100644
--- a/src/components/rightSidePanel/errors/types.ts
+++ b/src/components/rightSidePanel/errors/types.ts
@@ -25,3 +25,4 @@ export type ErrorGroup =
   | { type: 'missing_node'; title: string; priority: number }
   | { type: 'swap_nodes'; title: string; priority: number }
   | { type: 'missing_model'; title: string; priority: number }
+  | { type: 'missing_media'; title: string; priority: number }
diff --git a/src/components/rightSidePanel/errors/useErrorActions.ts b/src/components/rightSidePanel/errors/useErrorActions.ts
index 9cc1bade0c..192cd4b1f7 100644
--- a/src/components/rightSidePanel/errors/useErrorActions.ts
+++ b/src/components/rightSidePanel/errors/useErrorActions.ts
@@ -20,7 +20,7 @@ export function useErrorActions() {
       is_external: true,
       source: 'error_dialog'
     })
-    void commandStore.execute('Comfy.ContactSupport')
+    return commandStore.execute('Comfy.ContactSupport')
   }
 
   function findOnGitHub(errorMessage: string) {
diff --git a/src/components/rightSidePanel/errors/useErrorGroups.test.ts b/src/components/rightSidePanel/errors/useErrorGroups.test.ts
index 3455badf8f..0d98e19fca 100644
--- a/src/components/rightSidePanel/errors/useErrorGroups.test.ts
+++ b/src/components/rightSidePanel/errors/useErrorGroups.test.ts
@@ -1,3 +1,4 @@
+import { fromAny } from '@total-typescript/shoehorn'
 import { createPinia, setActivePinia } from 'pinia'
 import { nextTick, ref } from 'vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -57,8 +58,10 @@ vi.mock(
   })
 )
 
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
+import { isLGraphNode } from '@/utils/litegraphUtil'
 import { useErrorGroups } from './useErrorGroups'
 
 function makeMissingNodeType(
@@ -215,7 +218,7 @@ describe('useErrorGroups', () => {
       const { groups } = createErrorGroups()
       const missingNodesStore = useMissingNodesErrorStore()
       missingNodesStore.setMissingNodeTypes([
-        'StringGroupNode' as unknown as MissingNodeType
+        fromAny<MissingNodeType, unknown>('StringGroupNode')
       ])
       await nextTick()
 
@@ -753,4 +756,48 @@ describe('useErrorGroups', () => {
       ).toBe(true)
     })
   })
+
+  describe('unfiltered vs selection-filtered model/media groups', () => {
+    it('exposes both unfiltered (missingModelGroups) and filtered (filteredMissingModelGroups)', () => {
+      const { groups } = createErrorGroups()
+      expect(groups.missingModelGroups).toBeDefined()
+      expect(groups.filteredMissingModelGroups).toBeDefined()
+      expect(groups.missingMediaGroups).toBeDefined()
+      expect(groups.filteredMissingMediaGroups).toBeDefined()
+    })
+
+    it('missingModelGroups returns total candidates regardless of selection (ErrorOverlay contract)', async () => {
+      const { store, groups } = createErrorGroups()
+      store.surfaceMissingModels([
+        makeModel('a.safetensors', { nodeId: '1', directory: 'checkpoints' }),
+        makeModel('b.safetensors', { nodeId: '2', directory: 'checkpoints' })
+      ])
+      // Simulate canvas selection of a single node so the filtered
+      // variant actually narrows. Without this, both sides return the
+      // same value trivially and the test can't prove the contract.
+      vi.mocked(isLGraphNode).mockReturnValue(true)
+      const canvasStore = useCanvasStore()
+      canvasStore.selectedItems = fromAny<
+        typeof canvasStore.selectedItems,
+        unknown
+      >([{ id: '1' }])
+      await nextTick()
+
+      // Unfiltered total stays at one group of two models regardless of
+      // the selection — ErrorOverlay reads this for the overlay label
+      // and must not shrink with canvas selection.
+      expect(groups.missingModelGroups.value).toHaveLength(1)
+      expect(groups.missingModelGroups.value[0].models).toHaveLength(2)
+
+      // Filtered variant does narrow under the same selection state —
+      // this is how the errors tab scopes cards to the selected node.
+      // Exact filtered output depends on the app.rootGraph lookup
+      // (mocked to return undefined here); what matters is that the
+      // filtered shape is a different reference and does not blindly
+      // mirror the unfiltered one.
+      expect(groups.filteredMissingModelGroups.value).not.toBe(
+        groups.missingModelGroups.value
+      )
+    })
+  })
 })
diff --git a/src/components/rightSidePanel/errors/useErrorGroups.ts b/src/components/rightSidePanel/errors/useErrorGroups.ts
index 6c3339ba20..24947f559d 100644
--- a/src/components/rightSidePanel/errors/useErrorGroups.ts
+++ b/src/components/rightSidePanel/errors/useErrorGroups.ts
@@ -4,6 +4,7 @@ import Fuse from 'fuse.js'
 import type { IFuseOptions } from 'fuse.js'
 
 import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
+import { useMissingMediaStore } from '@/platform/missingMedia/missingMediaStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
@@ -29,7 +30,9 @@ import type {
   MissingModelCandidate,
   MissingModelGroup
 } from '@/platform/missingModel/types'
+import type { MissingMediaGroup } from '@/platform/missingMedia/types'
 import { groupCandidatesByName } from '@/platform/missingModel/missingModelScan'
+import { groupCandidatesByMediaType } from '@/platform/missingMedia/missingMediaScan'
 import {
   isNodeExecutionId,
   compareExecutionId
@@ -239,6 +242,7 @@ export function useErrorGroups(
   const executionErrorStore = useExecutionErrorStore()
   const missingNodesStore = useMissingNodesErrorStore()
   const missingModelStore = useMissingModelStore()
+  const missingMediaStore = useMissingMediaStore()
   const canvasStore = useCanvasStore()
   const { inferPackFromNodeName } = useComfyRegistryStore()
   const collapseState = reactive<Record<string, boolean>>({})
@@ -635,6 +639,127 @@ export function useErrorGroups(
     ]
   }
 
+  const missingMediaGroups = computed<MissingMediaGroup[]>(() => {
+    const candidates = missingMediaStore.missingMediaCandidates
+    if (!candidates?.length) return []
+    return groupCandidatesByMediaType(candidates)
+  })
+
+  function buildMissingMediaGroups(): ErrorGroup[] {
+    if (!missingMediaGroups.value.length) return []
+    const totalItems = missingMediaGroups.value.reduce(
+      (count, group) => count + group.items.length,
+      0
+    )
+    return [
+      {
+        type: 'missing_media' as const,
+        title: `${t('rightSidePanel.missingMedia.missingMediaTitle')} (${totalItems})`,
+        priority: 3
+      }
+    ]
+  }
+
+  function isAssetErrorInSelection(executionNodeId: string): boolean {
+    const nodeIds = selectedNodeInfo.value.nodeIds
+    if (!nodeIds) return true
+
+    // Try missing node cache first
+    const cachedNode = missingNodeCache.value.get(executionNodeId)
+    if (cachedNode && nodeIds.has(String(cachedNode.id))) return true
+
+    // Resolve from graph for model/media candidates
+    if (app.rootGraph) {
+      const graphNode = getNodeByExecutionId(app.rootGraph, executionNodeId)
+      if (graphNode && nodeIds.has(String(graphNode.id))) return true
+    }
+
+    for (const containerExecId of selectedNodeInfo.value
+      .containerExecutionIds) {
+      if (executionNodeId.startsWith(`${containerExecId}:`)) return true
+    }
+
+    return false
+  }
+
+  const filteredMissingModelGroups = computed(() => {
+    if (!selectedNodeInfo.value.nodeIds) return missingModelGroups.value
+    const candidates = missingModelStore.missingModelCandidates
+    if (!candidates?.length) return []
+    const filtered = candidates.filter(
+      (c) => c.nodeId != null && isAssetErrorInSelection(String(c.nodeId))
+    )
+    if (!filtered.length) return []
+
+    const map = new Map<
+      string | null | typeof UNSUPPORTED,
+      { candidates: MissingModelCandidate[]; isAssetSupported: boolean }
+    >()
+    for (const c of filtered) {
+      const groupKey =
+        c.isAssetSupported || !isCloud ? c.directory || null : UNSUPPORTED
+      const existing = map.get(groupKey)
+      if (existing) {
+        existing.candidates.push(c)
+      } else {
+        map.set(groupKey, {
+          candidates: [c],
+          isAssetSupported: c.isAssetSupported
+        })
+      }
+    }
+    return Array.from(map.entries())
+      .sort(([dirA], [dirB]) => {
+        if (dirA === UNSUPPORTED) return 1
+        if (dirB === UNSUPPORTED) return -1
+        if (dirA === null) return 1
+        if (dirB === null) return -1
+        return dirA.localeCompare(dirB)
+      })
+      .map(([key, { candidates: groupCandidates, isAssetSupported }]) => ({
+        directory: typeof key === 'string' ? key : null,
+        models: groupCandidatesByName(groupCandidates),
+        isAssetSupported
+      }))
+  })
+
+  const filteredMissingMediaGroups = computed(() => {
+    if (!selectedNodeInfo.value.nodeIds) return missingMediaGroups.value
+    const candidates = missingMediaStore.missingMediaCandidates
+    if (!candidates?.length) return []
+    const filtered = candidates.filter(
+      (c) => c.nodeId != null && isAssetErrorInSelection(String(c.nodeId))
+    )
+    if (!filtered.length) return []
+    return groupCandidatesByMediaType(filtered)
+  })
+
+  function buildMissingModelGroupsFiltered(): ErrorGroup[] {
+    if (!filteredMissingModelGroups.value.length) return []
+    return [
+      {
+        type: 'missing_model' as const,
+        title: `${t('rightSidePanel.missingModels.missingModelsTitle')} (${filteredMissingModelGroups.value.reduce((count, group) => count + group.models.length, 0)})`,
+        priority: 2
+      }
+    ]
+  }
+
+  function buildMissingMediaGroupsFiltered(): ErrorGroup[] {
+    if (!filteredMissingMediaGroups.value.length) return []
+    const totalItems = filteredMissingMediaGroups.value.reduce(
+      (count, group) => count + group.items.length,
+      0
+    )
+    return [
+      {
+        type: 'missing_media' as const,
+        title: `${t('rightSidePanel.missingMedia.missingMediaTitle')} (${totalItems})`,
+        priority: 3
+      }
+    ]
+  }
+
   const allErrorGroups = computed<ErrorGroup[]>(() => {
     const groupsMap = new Map<string, GroupEntry>()
 
@@ -645,6 +770,7 @@ export function useErrorGroups(
     return [
       ...buildMissingNodeGroups(),
       ...buildMissingModelGroups(),
+      ...buildMissingMediaGroups(),
       ...toSortedGroups(groupsMap)
     ]
   })
@@ -660,9 +786,18 @@ export function useErrorGroups(
       ? toSortedGroups(regroupByErrorMessage(groupsMap))
       : toSortedGroups(groupsMap)
 
+    const filterByNode = selectedNodeInfo.value.nodeIds !== null
+
+    // Missing nodes are intentionally unfiltered — they represent
+    // pack-level problems relevant regardless of which node is selected.
     return [
       ...buildMissingNodeGroups(),
-      ...buildMissingModelGroups(),
+      ...(filterByNode
+        ? buildMissingModelGroupsFiltered()
+        : buildMissingModelGroups()),
+      ...(filterByNode
+        ? buildMissingMediaGroupsFiltered()
+        : buildMissingMediaGroups()),
       ...executionGroups
     ]
   })
@@ -699,6 +834,9 @@ export function useErrorGroups(
     groupedErrorMessages,
     missingPackGroups,
     missingModelGroups,
+    missingMediaGroups,
+    filteredMissingModelGroups,
+    filteredMissingMediaGroups,
     swapNodeGroups
   }
 }
diff --git a/src/components/rightSidePanel/errors/useErrorReport.ts b/src/components/rightSidePanel/errors/useErrorReport.ts
index 95340641b9..862cd002d1 100644
--- a/src/components/rightSidePanel/errors/useErrorReport.ts
+++ b/src/components/rightSidePanel/errors/useErrorReport.ts
@@ -1,4 +1,4 @@
-import { computed, onMounted, onUnmounted, reactive, toValue } from 'vue'
+import { computed, reactive, toValue, watch } from 'vue'
 
 import type { MaybeRefOrGetter } from 'vue'
 
@@ -28,66 +28,73 @@ export function useErrorReport(cardSource: MaybeRefOrGetter<ErrorCardData>) {
     )
   })
 
-  let cancelled = false
-  onUnmounted(() => {
-    cancelled = true
-  })
+  watch(
+    () => toValue(cardSource),
+    async (card, _, onCleanup) => {
+      let cancelled = false
+      onCleanup(() => {
+        cancelled = true
+      })
 
-  onMounted(async () => {
-    const card = toValue(cardSource)
-    const runtimeErrors = card.errors
-      .map((error, idx) => ({ error, idx }))
-      .filter(({ error }) => error.isRuntimeError)
+      for (const key of Object.keys(enrichedDetails)) {
+        delete enrichedDetails[key as unknown as number]
+      }
 
-    if (runtimeErrors.length === 0) return
+      const runtimeErrors = card.errors
+        .map((error, idx) => ({ error, idx }))
+        .filter(({ error }) => error.isRuntimeError)
 
-    if (!systemStatsStore.systemStats) {
-      if (systemStatsStore.isLoading) {
-        await until(systemStatsStore.isLoading).toBe(false)
-      } else {
-        try {
-          await systemStatsStore.refetchSystemStats()
-        } catch (e) {
-          console.warn('Failed to fetch system stats for error report:', e)
-          return
+      if (runtimeErrors.length === 0) return
+
+      if (!systemStatsStore.systemStats) {
+        if (systemStatsStore.isLoading) {
+          await until(() => systemStatsStore.isLoading).toBe(false)
+        } else {
+          try {
+            await systemStatsStore.refetchSystemStats()
+          } catch (e) {
+            console.warn('Failed to fetch system stats for error report:', e)
+            return
+          }
         }
       }
-    }
-    if (!systemStatsStore.systemStats || cancelled) return
+      if (!systemStatsStore.systemStats || cancelled) return
 
-    const logs = await api
-      .getLogs()
-      .catch(() => 'Failed to retrieve server logs')
-    if (cancelled) return
+      const logs = await api
+        .getLogs()
+        .catch(() => 'Failed to retrieve server logs')
+      if (cancelled) return
 
-    const workflow = (() => {
-      try {
-        return app.rootGraph.serialize()
-      } catch (e) {
-        console.warn('Failed to serialize workflow for error report:', e)
-        return null
+      const workflow = (() => {
+        try {
+          return app.rootGraph.serialize()
+        } catch (e) {
+          console.warn('Failed to serialize workflow for error report:', e)
+          return null
+        }
+      })()
+      if (!workflow) return
+
+      for (const { error, idx } of runtimeErrors) {
+        try {
+          const report = generateErrorReport({
+            exceptionType: error.exceptionType ?? FALLBACK_EXCEPTION_TYPE,
+            exceptionMessage: error.message,
+            traceback: error.details,
+            nodeId: card.nodeId,
+            nodeType: card.title,
+            systemStats: systemStatsStore.systemStats,
+            serverLogs: logs,
+            workflow
+          })
+          enrichedDetails[idx] = report
+        } catch (e) {
+          console.warn('Failed to generate error report:', e)
+        }
       }
-    })()
-    if (!workflow) return
-
-    for (const { error, idx } of runtimeErrors) {
-      try {
-        const report = generateErrorReport({
-          exceptionType: error.exceptionType ?? FALLBACK_EXCEPTION_TYPE,
-          exceptionMessage: error.message,
-          traceback: error.details,
-          nodeId: card.nodeId,
-          nodeType: card.title,
-          systemStats: systemStatsStore.systemStats,
-          serverLogs: logs,
-          workflow
-        })
-        enrichedDetails[idx] = report
-      } catch (e) {
-        console.warn('Failed to generate error report:', e)
-      }
-    }
-  })
+    },
+    { immediate: true }
+  )
 
   return { displayedDetailsMap }
 }
diff --git a/src/components/rightSidePanel/parameters/SectionWidgets.vue b/src/components/rightSidePanel/parameters/SectionWidgets.vue
index 98d65aa5bc..646f852525 100644
--- a/src/components/rightSidePanel/parameters/SectionWidgets.vue
+++ b/src/components/rightSidePanel/parameters/SectionWidgets.vue
@@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
 import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
-import { getSourceNodeId } from '@/core/graph/subgraph/promotionUtils'
 import type { LGraphGroup, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import { usePromotionStore } from '@/stores/promotionStore'
@@ -79,7 +78,6 @@ function isWidgetShownOnParents(
 ): boolean {
   return parents.some((parent) => {
     if (isPromotedWidgetView(widget)) {
-      const sourceNodeId = getSourceNodeId(widget)
       const interiorNodeId =
         String(widgetNode.id) === String(parent.id)
           ? widget.sourceNodeId
@@ -88,7 +86,7 @@ function isWidgetShownOnParents(
       return promotionStore.isPromoted(parent.rootGraph.id, parent.id, {
         sourceNodeId: interiorNodeId,
         sourceWidgetName: widget.sourceWidgetName,
-        disambiguatingSourceNodeId: sourceNodeId
+        disambiguatingSourceNodeId: widget.disambiguatingSourceNodeId
       })
     }
     return promotionStore.isPromoted(parent.rootGraph.id, parent.id, {
diff --git a/src/components/rightSidePanel/parameters/TabSubgraphInputs.vue b/src/components/rightSidePanel/parameters/TabSubgraphInputs.vue
index c2ed741ea0..8bce407ae0 100644
--- a/src/components/rightSidePanel/parameters/TabSubgraphInputs.vue
+++ b/src/components/rightSidePanel/parameters/TabSubgraphInputs.vue
@@ -14,10 +14,7 @@ import {
 import { useI18n } from 'vue-i18n'
 
 import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
-import {
-  getSourceNodeId,
-  getWidgetName
-} from '@/core/graph/subgraph/promotionUtils'
+import { getWidgetName } from '@/core/graph/subgraph/promotionUtils'
 import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import FormSearchInput from '@/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue'
@@ -132,7 +129,9 @@ const advancedInputsWidgets = computed((): NodeWidgetsList => {
       !promotionStore.isPromoted(node.rootGraph.id, node.id, {
         sourceNodeId: String(interiorNode.id),
         sourceWidgetName: getWidgetName(widget),
-        disambiguatingSourceNodeId: getSourceNodeId(widget)
+        disambiguatingSourceNodeId: isPromotedWidgetView(widget)
+          ? widget.disambiguatingSourceNodeId
+          : undefined
       })
   )
 })
diff --git a/src/components/rightSidePanel/parameters/WidgetActions.test.ts b/src/components/rightSidePanel/parameters/WidgetActions.test.ts
index 3f14a3e8cb..4cd97f0695 100644
--- a/src/components/rightSidePanel/parameters/WidgetActions.test.ts
+++ b/src/components/rightSidePanel/parameters/WidgetActions.test.ts
@@ -1,5 +1,7 @@
 import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { fromAny } from '@total-typescript/shoehorn'
 import { setActivePinia } from 'pinia'
 import type { Slots } from 'vue'
 import { h } from 'vue'
@@ -10,7 +12,6 @@ import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { usePromotionStore } from '@/stores/promotionStore'
-
 import WidgetActions from './WidgetActions.vue'
 
 const { mockGetInputSpecForWidget } = vi.hoisted(() => ({
@@ -93,67 +94,66 @@ describe('WidgetActions', () => {
   }
 
   function createMockNode(): LGraphNode {
-    return {
+    return fromAny<LGraphNode, unknown>({
       id: 1,
       type: 'TestNode',
       rootGraph: { id: 'graph-test' },
       computeSize: vi.fn(),
-      size: [200, 100]
-    } as unknown as LGraphNode
+      size: [200, 100],
+      isSubgraphNode: () => false
+    })
   }
 
-  function mountWidgetActions(widget: IBaseWidget, node: LGraphNode) {
-    return mount(WidgetActions, {
+  function renderWidgetActions(
+    widget: IBaseWidget,
+    node: LGraphNode,
+    extraProps: Record<string, unknown> = {}
+  ) {
+    const user = userEvent.setup()
+    const onResetToDefault = vi.fn()
+    render(WidgetActions, {
       props: {
         widget,
         node,
-        label: 'Test Widget'
+        label: 'Test Widget',
+        onResetToDefault,
+        ...extraProps
       },
       global: {
         plugins: [i18n]
       }
     })
+    return { user, onResetToDefault }
   }
 
   it('shows reset button when widget has default value', () => {
     const widget = createMockWidget()
     const node = createMockNode()
 
-    const wrapper = mountWidgetActions(widget, node)
+    renderWidgetActions(widget, node)
 
-    const resetButton = wrapper
-      .findAll('button')
-      .find((b) => b.text().includes('Reset'))
-    expect(resetButton).toBeDefined()
+    expect(screen.getByRole('button', { name: /Reset/ })).toBeInTheDocument()
   })
 
   it('emits resetToDefault with default value when reset button clicked', async () => {
     const widget = createMockWidget(100)
     const node = createMockNode()
 
-    const wrapper = mountWidgetActions(widget, node)
+    const { user, onResetToDefault } = renderWidgetActions(widget, node)
 
-    const resetButton = wrapper
-      .findAll('button')
-      .find((b) => b.text().includes('Reset'))
+    await user.click(screen.getByRole('button', { name: /Reset/ }))
 
-    await resetButton?.trigger('click')
-
-    expect(wrapper.emitted('resetToDefault')).toHaveLength(1)
-    expect(wrapper.emitted('resetToDefault')![0]).toEqual([42])
+    expect(onResetToDefault).toHaveBeenCalledTimes(1)
+    expect(onResetToDefault).toHaveBeenCalledWith(42)
   })
 
   it('disables reset button when value equals default', () => {
     const widget = createMockWidget(42)
     const node = createMockNode()
 
-    const wrapper = mountWidgetActions(widget, node)
+    renderWidgetActions(widget, node)
 
-    const resetButton = wrapper
-      .findAll('button')
-      .find((b) => b.text().includes('Reset'))
-
-    expect(resetButton?.attributes('disabled')).toBeDefined()
+    expect(screen.getByRole('button', { name: /Reset/ })).toBeDisabled()
   })
 
   it('does not show reset button when no default value exists', () => {
@@ -164,13 +164,11 @@ describe('WidgetActions', () => {
     const widget = createMockWidget(100)
     const node = createMockNode()
 
-    const wrapper = mountWidgetActions(widget, node)
+    renderWidgetActions(widget, node)
 
-    const resetButton = wrapper
-      .findAll('button')
-      .find((b) => b.text().includes('Reset'))
-
-    expect(resetButton).toBeUndefined()
+    expect(
+      screen.queryByRole('button', { name: /Reset/ })
+    ).not.toBeInTheDocument()
   })
 
   it('uses fallback default for INT type without explicit default', async () => {
@@ -181,15 +179,11 @@ describe('WidgetActions', () => {
     const widget = createMockWidget(100)
     const node = createMockNode()
 
-    const wrapper = mountWidgetActions(widget, node)
+    const { user, onResetToDefault } = renderWidgetActions(widget, node)
 
-    const resetButton = wrapper
-      .findAll('button')
-      .find((b) => b.text().includes('Reset'))
+    await user.click(screen.getByRole('button', { name: /Reset/ }))
 
-    await resetButton?.trigger('click')
-
-    expect(wrapper.emitted('resetToDefault')![0]).toEqual([0])
+    expect(onResetToDefault).toHaveBeenCalledWith(0)
   })
 
   it('uses first option as default for combo without explicit default', async () => {
@@ -201,32 +195,29 @@ describe('WidgetActions', () => {
     const widget = createMockWidget(100)
     const node = createMockNode()
 
-    const wrapper = mountWidgetActions(widget, node)
+    const { user, onResetToDefault } = renderWidgetActions(widget, node)
 
-    const resetButton = wrapper
-      .findAll('button')
-      .find((b) => b.text().includes('Reset'))
+    await user.click(screen.getByRole('button', { name: /Reset/ }))
 
-    await resetButton?.trigger('click')
-
-    expect(wrapper.emitted('resetToDefault')![0]).toEqual(['option1'])
+    expect(onResetToDefault).toHaveBeenCalledWith('option1')
   })
 
   it('demotes promoted widgets by immediate interior node identity when shown from parent context', async () => {
     mockGetInputSpecForWidget.mockReturnValue({
       type: 'CUSTOM'
     })
-    const parentSubgraphNode = {
+    const parentSubgraphNode = fromAny<SubgraphNode, unknown>({
       id: 4,
       rootGraph: { id: 'graph-test' },
       computeSize: vi.fn(),
       size: [300, 150]
-    } as unknown as SubgraphNode
-    const node = {
+    })
+    const node = fromAny<LGraphNode, unknown>({
       id: 4,
       type: 'SubgraphNode',
-      rootGraph: { id: 'graph-test' }
-    } as unknown as LGraphNode
+      rootGraph: { id: 'graph-test' },
+      isSubgraphNode: () => false
+    })
     const widget = {
       name: 'text',
       type: 'text',
@@ -246,7 +237,8 @@ describe('WidgetActions', () => {
       disambiguatingSourceNodeId: '1'
     })
 
-    const wrapper = mount(WidgetActions, {
+    const user = userEvent.setup()
+    render(WidgetActions, {
       props: {
         widget,
         node,
@@ -259,11 +251,7 @@ describe('WidgetActions', () => {
       }
     })
 
-    const hideButton = wrapper
-      .findAll('button')
-      .find((button) => button.text().includes('Hide input'))
-    expect(hideButton).toBeDefined()
-    await hideButton?.trigger('click')
+    await user.click(screen.getByRole('button', { name: /Hide input/ }))
 
     expect(
       promotionStore.isPromoted('graph-test', 4, {
diff --git a/src/components/rightSidePanel/parameters/WidgetActions.vue b/src/components/rightSidePanel/parameters/WidgetActions.vue
index 5658f8c076..039065e4f0 100644
--- a/src/components/rightSidePanel/parameters/WidgetActions.vue
+++ b/src/components/rightSidePanel/parameters/WidgetActions.vue
@@ -9,7 +9,7 @@ import type { PromotedWidgetSource } from '@/core/graph/subgraph/promotedWidgetT
 import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import {
   demoteWidget,
-  getSourceNodeId,
+  isLinkedPromotion,
   promoteWidget
 } from '@/core/graph/subgraph/promotionUtils'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
@@ -47,6 +47,11 @@ const promotionStore = usePromotionStore()
 const { t } = useI18n()
 
 const hasParents = computed(() => parents?.length > 0)
+const isLinked = computed(() => {
+  if (!node.isSubgraphNode() || !isPromotedWidgetView(widget)) return false
+  return isLinkedPromotion(node, widget.sourceNodeId, widget.sourceWidgetName)
+})
+const canToggleVisibility = computed(() => hasParents.value && !isLinked.value)
 const favoriteNode = computed(() =>
   isShownOnParents && hasParents.value ? parents[0] : node
 )
@@ -76,8 +81,6 @@ function handleHideInput() {
   if (!parents?.length) return
 
   if (isPromotedWidgetView(widget)) {
-    const disambiguatingSourceNodeId = getSourceNodeId(widget)
-
     for (const parent of parents) {
       const source: PromotedWidgetSource = {
         sourceNodeId:
@@ -85,7 +88,7 @@ function handleHideInput() {
             ? widget.sourceNodeId
             : String(node.id),
         sourceWidgetName: widget.sourceWidgetName,
-        disambiguatingSourceNodeId
+        disambiguatingSourceNodeId: widget.disambiguatingSourceNodeId
       }
       promotionStore.demote(parent.rootGraph.id, parent.id, source)
       parent.computeSize(parent.size)
@@ -114,6 +117,7 @@ function handleResetToDefault() {
 <template>
   <MoreButton
     is-vertical
+    data-testid="widget-actions-menu-button"
     class="bg-transparent text-muted-foreground transition-all hover:bg-secondary-background-hover hover:text-base-foreground active:scale-95"
   >
     <template #default="{ close }">
@@ -133,7 +137,7 @@ function handleResetToDefault() {
       </Button>
 
       <Button
-        v-if="hasParents"
+        v-if="canToggleVisibility"
         variant="textonly"
         size="unset"
         class="flex w-full items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
diff --git a/src/components/rightSidePanel/parameters/WidgetItem.test.ts b/src/components/rightSidePanel/parameters/WidgetItem.test.ts
index c1d8f50eb2..ff9239123b 100644
--- a/src/components/rightSidePanel/parameters/WidgetItem.test.ts
+++ b/src/components/rightSidePanel/parameters/WidgetItem.test.ts
@@ -1,5 +1,6 @@
 import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
+import { render } from '@testing-library/vue'
+import { fromAny } from '@total-typescript/shoehorn'
 import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
@@ -13,7 +14,8 @@ const { mockGetInputSpecForWidget, StubWidgetComponent } = vi.hoisted(() => ({
   StubWidgetComponent: {
     name: 'StubWidget',
     props: ['widget', 'modelValue', 'nodeId', 'nodeType'],
-    template: '<div class="stub-widget" />'
+    template:
+      '<div class="stub-widget" :data-widget-options="JSON.stringify(widget?.options)" :data-widget-type="widget?.type" :data-widget-name="widget?.name" :data-widget-value="String(widget?.value)" />'
   }
 }))
 
@@ -72,13 +74,13 @@ const i18n = createI18n({
 })
 
 function createMockNode(overrides: Partial<LGraphNode> = {}): LGraphNode {
-  return {
+  return fromAny<LGraphNode, unknown>({
     id: 1,
     type: 'TestNode',
     isSubgraphNode: () => false,
     graph: { rootGraph: { id: 'test-graph-id' } },
     ...overrides
-  } as unknown as LGraphNode
+  })
 }
 
 function createMockWidget(overrides: Partial<IBaseWidget> = {}): IBaseWidget {
@@ -128,14 +130,14 @@ function createMockPromotedWidgetView(
       return 0
     }
   }
-  return new MockPromotedWidgetView() as unknown as IBaseWidget
+  return fromAny<IBaseWidget, unknown>(new MockPromotedWidgetView())
 }
 
-function mountWidgetItem(
+function renderWidgetItem(
   widget: IBaseWidget,
   node: LGraphNode = createMockNode()
 ) {
-  return mount(WidgetItem, {
+  return render(WidgetItem, {
     props: { widget, node },
     global: {
       plugins: [i18n],
@@ -147,6 +149,18 @@ function mountWidgetItem(
   })
 }
 
+function getStubWidget(container: Element) {
+  // eslint-disable-next-line testing-library/no-node-access
+  const el = container.querySelector('.stub-widget')
+  if (!el) throw new Error('stub-widget not found')
+  return {
+    options: JSON.parse(el.getAttribute('data-widget-options') ?? 'null'),
+    type: el.getAttribute('data-widget-type'),
+    name: el.getAttribute('data-widget-name'),
+    value: el.getAttribute('data-widget-value')
+  }
+}
+
 describe('WidgetItem', () => {
   beforeEach(() => {
     setActivePinia(createTestingPinia({ stubActions: false }))
@@ -158,10 +172,10 @@ describe('WidgetItem', () => {
       const widget = createMockWidget({
         options: { values: ['a', 'b', 'c'] }
       })
-      const wrapper = mountWidgetItem(widget)
-      const stub = wrapper.findComponent(StubWidgetComponent)
+      const { container } = renderWidgetItem(widget)
+      const stub = getStubWidget(container)
 
-      expect(stub.props('widget').options).toEqual({
+      expect(stub.options).toEqual({
         values: ['a', 'b', 'c']
       })
     })
@@ -171,34 +185,34 @@ describe('WidgetItem', () => {
         values: ['model_a.safetensors', 'model_b.safetensors']
       }
       const widget = createMockPromotedWidgetView(expectedOptions)
-      const wrapper = mountWidgetItem(widget)
-      const stub = wrapper.findComponent(StubWidgetComponent)
+      const { container } = renderWidgetItem(widget)
+      const stub = getStubWidget(container)
 
-      expect(stub.props('widget').options).toEqual(expectedOptions)
+      expect(stub.options).toEqual(expectedOptions)
     })
 
     it('passes type from a PromotedWidgetView to the widget component', () => {
       const widget = createMockPromotedWidgetView()
-      const wrapper = mountWidgetItem(widget)
-      const stub = wrapper.findComponent(StubWidgetComponent)
+      const { container } = renderWidgetItem(widget)
+      const stub = getStubWidget(container)
 
-      expect(stub.props('widget').type).toBe('combo')
+      expect(stub.type).toBe('combo')
     })
 
     it('passes name from a PromotedWidgetView to the widget component', () => {
       const widget = createMockPromotedWidgetView()
-      const wrapper = mountWidgetItem(widget)
-      const stub = wrapper.findComponent(StubWidgetComponent)
+      const { container } = renderWidgetItem(widget)
+      const stub = getStubWidget(container)
 
-      expect(stub.props('widget').name).toBe('ckpt_name')
+      expect(stub.name).toBe('ckpt_name')
     })
 
     it('passes value from a PromotedWidgetView to the widget component', () => {
       const widget = createMockPromotedWidgetView()
-      const wrapper = mountWidgetItem(widget)
-      const stub = wrapper.findComponent(StubWidgetComponent)
+      const { container } = renderWidgetItem(widget)
+      const stub = getStubWidget(container)
 
-      expect(stub.props('widget').value).toBe('model_a.safetensors')
+      expect(stub.value).toBe('model_a.safetensors')
     })
   })
 })
diff --git a/src/components/rightSidePanel/subgraph/SubgraphEditor.vue b/src/components/rightSidePanel/subgraph/SubgraphEditor.vue
index 9232640331..872210b098 100644
--- a/src/components/rightSidePanel/subgraph/SubgraphEditor.vue
+++ b/src/components/rightSidePanel/subgraph/SubgraphEditor.vue
@@ -11,6 +11,7 @@ import {
   getPromotableWidgets,
   getSourceNodeId,
   getWidgetName,
+  isLinkedPromotion,
   isRecommendedWidget,
   promoteWidget,
   pruneDisconnected
@@ -88,14 +89,13 @@ const activeWidgets = computed<WidgetItem[]>({
     promotionStore.setPromotions(
       node.rootGraph.id,
       node.id,
-      value.map(([n, w]) => {
-        const sid = getSourceNodeId(w)
-        return {
-          sourceNodeId: String(n.id),
-          sourceWidgetName: getWidgetName(w),
-          ...(sid && { disambiguatingSourceNodeId: sid })
-        }
-      })
+      value.map(([n, w]) => ({
+        sourceNodeId: String(n.id),
+        sourceWidgetName: getWidgetName(w),
+        disambiguatingSourceNodeId: isPromotedWidgetView(w)
+          ? w.disambiguatingSourceNodeId
+          : undefined
+      }))
     )
     refreshPromotedWidgetRendering()
   }
@@ -123,7 +123,9 @@ const candidateWidgets = computed<WidgetItem[]>(() => {
       !promotionStore.isPromoted(node.rootGraph.id, node.id, {
         sourceNodeId: String(n.id),
         sourceWidgetName: getWidgetName(w),
-        disambiguatingSourceNodeId: getSourceNodeId(w)
+        disambiguatingSourceNodeId: isPromotedWidgetView(w)
+          ? w.disambiguatingSourceNodeId
+          : undefined
       })
   )
 })
@@ -162,6 +164,18 @@ function refreshPromotedWidgetRendering() {
   canvasStore.canvas?.setDirty(true, true)
 }
 
+function isItemLinked([node, widget]: WidgetItem): boolean {
+  return (
+    node.id === -1 ||
+    (!!activeNode.value &&
+      isLinkedPromotion(
+        activeNode.value,
+        String(node.id),
+        getWidgetName(widget)
+      ))
+  )
+}
+
 function toKey(item: WidgetItem) {
   const sid = getSourceNodeId(item[1])
   return sid
@@ -187,8 +201,14 @@ function showAll() {
   }
 }
 function hideAll() {
+  const node = activeNode.value
   for (const item of filteredActive.value) {
     if (String(item[0].id) === '-1') continue
+    if (
+      node &&
+      isLinkedPromotion(node, String(item[0].id), getWidgetName(item[1]))
+    )
+      continue
     demote(item)
   }
 }
@@ -223,6 +243,7 @@ onMounted(() => {
 
       <div
         v-if="filteredActive.length"
+        data-testid="subgraph-editor-shown-section"
         class="flex flex-col border-b border-interface-stroke"
       >
         <div
@@ -244,8 +265,8 @@ onMounted(() => {
             :key="toKey([node, widget])"
             :class="cn(!searchQuery && dragClass, 'bg-comfy-menu-bg')"
             :node-title="node.title"
-            :widget-name="widget.name"
-            :is-physical="node.id === -1"
+            :widget-name="widget.label || widget.name"
+            :is-physical="isItemLinked([node, widget])"
             :is-draggable="!searchQuery"
             @toggle-visibility="demote([node, widget])"
           />
@@ -254,6 +275,7 @@ onMounted(() => {
 
       <div
         v-if="filteredCandidates.length"
+        data-testid="subgraph-editor-hidden-section"
         class="flex flex-col border-b border-interface-stroke"
       >
         <div
diff --git a/src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue b/src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue
index b206aac4ce..6697cd3187 100644
--- a/src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue
+++ b/src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue
@@ -1,9 +1,17 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import Button from '@/components/ui/button/Button.vue'
 import { cn } from '@/utils/tailwindUtil'
 import type { ClassValue } from '@/utils/tailwindUtil'
 
-const props = defineProps<{
+const {
+  nodeTitle,
+  widgetName,
+  isDraggable = false,
+  isPhysical = false,
+  class: className
+} = defineProps<{
   nodeTitle: string
   widgetName: string
   isDraggable?: boolean
@@ -14,13 +22,13 @@ defineEmits<{
   (e: 'toggleVisibility'): void
 }>()
 
-function getIcon() {
-  return props.isPhysical
+const icon = computed(() =>
+  isPhysical
     ? 'icon-[lucide--link]'
-    : props.isDraggable
+    : isDraggable
       ? 'icon-[lucide--eye]'
       : 'icon-[lucide--eye-off]'
-}
+)
 </script>
 
 <template>
@@ -29,8 +37,8 @@ function getIcon() {
       cn(
         'flex items-center gap-1 rounded-sm px-2 py-1 break-all',
         'bg-node-component-surface',
-        props.isDraggable && 'ring-accent-background hover:ring-1',
-        props.class
+        isDraggable && 'ring-accent-background hover:ring-1',
+        className
       )
     "
   >
@@ -38,15 +46,18 @@ function getIcon() {
       <div class="line-clamp-1 text-xs text-text-secondary">
         {{ nodeTitle }}
       </div>
-      <div class="line-clamp-1 text-sm/8">{{ widgetName }}</div>
+      <div class="line-clamp-1 text-sm/8" data-testid="subgraph-widget-label">
+        {{ widgetName }}
+      </div>
     </div>
     <Button
       variant="muted-textonly"
       size="sm"
+      data-testid="subgraph-widget-toggle"
       :disabled="isPhysical"
       @click.stop="$emit('toggleVisibility')"
     >
-      <i :class="getIcon()" />
+      <i :class="icon" :data-testid="isPhysical ? 'icon-link' : 'icon-eye'" />
     </Button>
     <div
       v-if="isDraggable"
diff --git a/src/components/searchbox/NodeSearchBoxPopover.vue b/src/components/searchbox/NodeSearchBoxPopover.vue
index 316370b81f..7d5b3a7e1d 100644
--- a/src/components/searchbox/NodeSearchBoxPopover.vue
+++ b/src/components/searchbox/NodeSearchBoxPopover.vue
@@ -143,7 +143,7 @@ function addNode(nodeDef: ComfyNodeDefImpl, dragEvent?: MouseEvent) {
   disconnectOnReset = false
 
   // Notify changeTracker - new step should be added
-  useWorkflowStore().activeWorkflow?.changeTracker?.checkState()
+  useWorkflowStore().activeWorkflow?.changeTracker?.captureCanvasState()
   window.requestAnimationFrame(closeDialog)
 }
 
diff --git a/src/components/searchbox/v2/NodeSearchCategorySidebar.test.ts b/src/components/searchbox/v2/NodeSearchCategorySidebar.test.ts
index 34140f201c..719d5a0613 100644
--- a/src/components/searchbox/v2/NodeSearchCategorySidebar.test.ts
+++ b/src/components/searchbox/v2/NodeSearchCategorySidebar.test.ts
@@ -1,4 +1,5 @@
-import { mount } from '@vue/test-utils'
+import { render, screen, waitFor } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 
@@ -23,25 +24,48 @@ describe('NodeSearchCategorySidebar', () => {
     setupTestPinia()
   })
 
-  async function createWrapper(props = {}) {
-    const wrapper = mount(NodeSearchCategorySidebar, {
-      props: { selectedCategory: 'most-relevant', ...props },
+  async function createRender(props = {}) {
+    const user = userEvent.setup()
+    const onUpdateSelectedCategory = vi.fn()
+    const baseProps = { selectedCategory: 'most-relevant', ...props }
+
+    let currentProps = { ...baseProps }
+    let rerenderFn: (
+      p: typeof baseProps & Record<string, unknown>
+    ) => void = () => {}
+
+    function makeProps(overrides = {}) {
+      const merged = { ...currentProps, ...overrides }
+      return {
+        ...merged,
+        'onUpdate:selectedCategory': (val: string) => {
+          onUpdateSelectedCategory(val)
+          currentProps = { ...currentProps, selectedCategory: val }
+          rerenderFn(makeProps())
+        }
+      }
+    }
+
+    const result = render(NodeSearchCategorySidebar, {
+      props: makeProps(),
       global: { plugins: [testI18n] }
     })
+    rerenderFn = (p) => result.rerender(p)
     await nextTick()
-    return wrapper
+    return { user, onUpdateSelectedCategory }
   }
 
   async function clickCategory(
-    wrapper: ReturnType<typeof mount>,
+    user: ReturnType<typeof userEvent.setup>,
     text: string,
     exact = false
   ) {
-    const btn = wrapper
-      .findAll('button')
-      .find((b) => (exact ? b.text().trim() === text : b.text().includes(text)))
+    const buttons = screen.getAllByRole('button')
+    const btn = buttons.find((b) =>
+      exact ? b.textContent?.trim() === text : b.textContent?.includes(text)
+    )
     expect(btn, `Expected to find a button with text "${text}"`).toBeDefined()
-    await btn!.trigger('click')
+    await user.click(btn!)
     await nextTick()
   }
 
@@ -56,37 +80,35 @@ describe('NodeSearchCategorySidebar', () => {
       ])
       await nextTick()
 
-      const wrapper = await createWrapper()
+      await createRender()
 
-      expect(wrapper.text()).toContain('Most relevant')
-      expect(wrapper.text()).toContain('Recents')
-      expect(wrapper.text()).toContain('Favorites')
-      expect(wrapper.text()).toContain('Essentials')
-      expect(wrapper.text()).toContain('Blueprints')
-      expect(wrapper.text()).toContain('Partner')
-      expect(wrapper.text()).toContain('Comfy')
-      expect(wrapper.text()).toContain('Extensions')
+      expect(screen.getByText('Most relevant')).toBeInTheDocument()
+      expect(screen.getByText('Recents')).toBeInTheDocument()
+      expect(screen.getByText('Favorites')).toBeInTheDocument()
+      expect(screen.getByText('Essentials')).toBeInTheDocument()
+      expect(screen.getByText('Blueprints')).toBeInTheDocument()
+      expect(screen.getByText('Partner')).toBeInTheDocument()
+      expect(screen.getByText('Comfy')).toBeInTheDocument()
+      expect(screen.getByText('Extensions')).toBeInTheDocument()
     })
 
     it('should mark the selected preset category as selected', async () => {
-      const wrapper = await createWrapper({ selectedCategory: 'most-relevant' })
+      await createRender({ selectedCategory: 'most-relevant' })
 
-      const mostRelevantBtn = wrapper.find(
-        '[data-testid="category-most-relevant"]'
+      expect(screen.getByTestId('category-most-relevant')).toHaveAttribute(
+        'aria-current',
+        'true'
       )
-
-      expect(mostRelevantBtn.attributes('aria-current')).toBe('true')
     })
 
     it('should emit update:selectedCategory when preset is clicked', async () => {
-      const wrapper = await createWrapper({ selectedCategory: 'most-relevant' })
+      const { user, onUpdateSelectedCategory } = await createRender({
+        selectedCategory: 'most-relevant'
+      })
 
-      await clickCategory(wrapper, 'Favorites')
+      await clickCategory(user, 'Favorites')
 
-      expect(wrapper.emitted('update:selectedCategory')).toBeTruthy()
-      expect(wrapper.emitted('update:selectedCategory')![0]).toEqual([
-        'favorites'
-      ])
+      expect(onUpdateSelectedCategory).toHaveBeenCalledWith('favorites')
     })
   })
 
@@ -99,11 +121,11 @@ describe('NodeSearchCategorySidebar', () => {
       ])
       await nextTick()
 
-      const wrapper = await createWrapper()
+      await createRender()
 
-      expect(wrapper.text()).toContain('sampling')
-      expect(wrapper.text()).toContain('loaders')
-      expect(wrapper.text()).toContain('conditioning')
+      expect(screen.getByText('sampling')).toBeInTheDocument()
+      expect(screen.getByText('loaders')).toBeInTheDocument()
+      expect(screen.getByText('conditioning')).toBeInTheDocument()
     })
 
     it('should emit update:selectedCategory when category is clicked', async () => {
@@ -112,13 +134,11 @@ describe('NodeSearchCategorySidebar', () => {
       ])
       await nextTick()
 
-      const wrapper = await createWrapper()
+      const { user, onUpdateSelectedCategory } = await createRender()
 
-      await clickCategory(wrapper, 'sampling')
+      await clickCategory(user, 'sampling')
 
-      expect(wrapper.emitted('update:selectedCategory')![0]).toEqual([
-        'sampling'
-      ])
+      expect(onUpdateSelectedCategory).toHaveBeenCalledWith('sampling')
     })
   })
 
@@ -131,14 +151,16 @@ describe('NodeSearchCategorySidebar', () => {
       ])
       await nextTick()
 
-      const wrapper = await createWrapper()
+      const { user } = await createRender()
 
-      expect(wrapper.text()).not.toContain('advanced')
+      expect(screen.queryByText('advanced')).not.toBeInTheDocument()
 
-      await clickCategory(wrapper, 'sampling')
+      await clickCategory(user, 'sampling')
 
-      expect(wrapper.text()).toContain('advanced')
-      expect(wrapper.text()).toContain('basic')
+      await waitFor(() => {
+        expect(screen.getByText('advanced')).toBeInTheDocument()
+        expect(screen.getByText('basic')).toBeInTheDocument()
+      })
     })
 
     it('should collapse sibling category when another is expanded', async () => {
@@ -150,17 +172,21 @@ describe('NodeSearchCategorySidebar', () => {
       ])
       await nextTick()
 
-      const wrapper = await createWrapper()
+      const { user } = await createRender()
 
       // Expand sampling
-      await clickCategory(wrapper, 'sampling', true)
-      expect(wrapper.text()).toContain('advanced')
+      await clickCategory(user, 'sampling', true)
+      await waitFor(() => {
+        expect(screen.getByText('advanced')).toBeInTheDocument()
+      })
 
       // Expand image — sampling should collapse
-      await clickCategory(wrapper, 'image', true)
+      await clickCategory(user, 'image', true)
 
-      expect(wrapper.text()).toContain('upscale')
-      expect(wrapper.text()).not.toContain('advanced')
+      await waitFor(() => {
+        expect(screen.getByText('upscale')).toBeInTheDocument()
+        expect(screen.queryByText('advanced')).not.toBeInTheDocument()
+      })
     })
 
     it('should emit update:selectedCategory when subcategory is clicked', async () => {
@@ -170,16 +196,19 @@ describe('NodeSearchCategorySidebar', () => {
       ])
       await nextTick()
 
-      const wrapper = await createWrapper()
+      const { user, onUpdateSelectedCategory } = await createRender()
 
       // Expand sampling category
-      await clickCategory(wrapper, 'sampling', true)
+      await clickCategory(user, 'sampling', true)
+      await waitFor(() => {
+        expect(screen.getByText('advanced')).toBeInTheDocument()
+      })
 
       // Click on advanced subcategory
-      await clickCategory(wrapper, 'advanced')
+      await clickCategory(user, 'advanced')
 
-      const emitted = wrapper.emitted('update:selectedCategory')!
-      expect(emitted[emitted.length - 1]).toEqual(['sampling/advanced'])
+      const calls = onUpdateSelectedCategory.mock.calls
+      expect(calls[calls.length - 1]).toEqual(['sampling/advanced'])
     })
   })
 
@@ -190,13 +219,12 @@ describe('NodeSearchCategorySidebar', () => {
       ])
       await nextTick()
 
-      const wrapper = await createWrapper({ selectedCategory: 'sampling' })
+      await createRender({ selectedCategory: 'sampling' })
 
-      expect(
-        wrapper
-          .find('[data-testid="category-sampling"]')
-          .attributes('aria-current')
-      ).toBe('true')
+      expect(screen.getByTestId('category-sampling')).toHaveAttribute(
+        'aria-current',
+        'true'
+      )
     })
 
     it('should emit selected subcategory when expanded', async () => {
@@ -206,14 +234,19 @@ describe('NodeSearchCategorySidebar', () => {
       ])
       await nextTick()
 
-      const wrapper = await createWrapper({ selectedCategory: 'most-relevant' })
+      const { user, onUpdateSelectedCategory } = await createRender({
+        selectedCategory: 'most-relevant'
+      })
 
       // Expand and click subcategory
-      await clickCategory(wrapper, 'sampling', true)
-      await clickCategory(wrapper, 'advanced')
+      await clickCategory(user, 'sampling', true)
+      await waitFor(() => {
+        expect(screen.getByText('advanced')).toBeInTheDocument()
+      })
+      await clickCategory(user, 'advanced')
 
-      const emitted = wrapper.emitted('update:selectedCategory')!
-      expect(emitted[emitted.length - 1]).toEqual(['sampling/advanced'])
+      const calls = onUpdateSelectedCategory.mock.calls
+      expect(calls[calls.length - 1]).toEqual(['sampling/advanced'])
     })
   })
 
@@ -225,29 +258,31 @@ describe('NodeSearchCategorySidebar', () => {
     ])
     await nextTick()
 
-    const wrapper = await createWrapper()
+    const { user, onUpdateSelectedCategory } = await createRender()
 
     // Only top-level visible initially
-    expect(wrapper.text()).toContain('api')
-    expect(wrapper.text()).not.toContain('image')
-    expect(wrapper.text()).not.toContain('BFL')
+    expect(screen.getByText('api')).toBeInTheDocument()
+    expect(screen.queryByText('image')).not.toBeInTheDocument()
+    expect(screen.queryByText('BFL')).not.toBeInTheDocument()
 
     // Expand api
-    await clickCategory(wrapper, 'api', true)
-
-    expect(wrapper.text()).toContain('image')
-    expect(wrapper.text()).not.toContain('BFL')
+    await clickCategory(user, 'api', true)
+    await waitFor(() => {
+      expect(screen.getByText('image')).toBeInTheDocument()
+    })
+    expect(screen.queryByText('BFL')).not.toBeInTheDocument()
 
     // Expand image
-    await clickCategory(wrapper, 'image', true)
-
-    expect(wrapper.text()).toContain('BFL')
+    await clickCategory(user, 'image', true)
+    await waitFor(() => {
+      expect(screen.getByText('BFL')).toBeInTheDocument()
+    })
 
     // Click BFL and verify emission
-    await clickCategory(wrapper, 'BFL', true)
+    await clickCategory(user, 'BFL', true)
 
-    const emitted = wrapper.emitted('update:selectedCategory')!
-    expect(emitted[emitted.length - 1]).toEqual(['api/image/BFL'])
+    const calls = onUpdateSelectedCategory.mock.calls
+    expect(calls[calls.length - 1]).toEqual(['api/image/BFL'])
   })
 
   it('should emit category without root/ prefix', async () => {
@@ -256,10 +291,10 @@ describe('NodeSearchCategorySidebar', () => {
     ])
     await nextTick()
 
-    const wrapper = await createWrapper()
+    const { user, onUpdateSelectedCategory } = await createRender()
 
-    await clickCategory(wrapper, 'sampling')
+    await clickCategory(user, 'sampling')
 
-    expect(wrapper.emitted('update:selectedCategory')![0][0]).toBe('sampling')
+    expect(onUpdateSelectedCategory).toHaveBeenCalledWith('sampling')
   })
 })
diff --git a/src/components/searchbox/v2/NodeSearchContent.test.ts b/src/components/searchbox/v2/NodeSearchContent.test.ts
index 7ef891f9bb..e8b186f20a 100644
--- a/src/components/searchbox/v2/NodeSearchContent.test.ts
+++ b/src/components/searchbox/v2/NodeSearchContent.test.ts
@@ -1,9 +1,8 @@
-import type { VueWrapper } from '@vue/test-utils'
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 
-import NodeSearchCategorySidebar from '@/components/searchbox/v2/NodeSearchCategorySidebar.vue'
 import NodeSearchContent from '@/components/searchbox/v2/NodeSearchContent.vue'
 import {
   createMockNodeDef,
@@ -32,14 +31,27 @@ describe('NodeSearchContent', () => {
     vi.restoreAllMocks()
   })
 
-  async function createWrapper(props = {}) {
-    const wrapper = mount(NodeSearchContent, {
-      props: { filters: [], ...props },
+  async function renderComponent(props = {}) {
+    const user = userEvent.setup()
+    const onAddNode = vi.fn()
+    const onHoverNode = vi.fn()
+    const onRemoveFilter = vi.fn()
+    const onAddFilter = vi.fn()
+    render(NodeSearchContent, {
+      props: {
+        filters: [],
+        onAddNode,
+        onHoverNode,
+        onRemoveFilter,
+        onAddFilter,
+        ...props
+      },
       global: {
         plugins: [testI18n],
         stubs: {
           NodeSearchListItem: {
-            template: '<div class="node-item">{{ nodeDef.display_name }}</div>',
+            template:
+              '<div class="node-item" data-testid="node-item">{{ nodeDef.display_name }}</div>',
             props: [
               'nodeDef',
               'currentQuery',
@@ -52,7 +64,7 @@ describe('NodeSearchContent', () => {
       }
     })
     await nextTick()
-    return wrapper
+    return { user, onAddNode, onHoverNode, onRemoveFilter, onAddFilter }
   }
 
   async function setupFavorites(
@@ -60,18 +72,10 @@ describe('NodeSearchContent', () => {
   ) {
     useNodeDefStore().updateNodeDefs(nodes.map(createMockNodeDef))
     vi.spyOn(useNodeBookmarkStore(), 'isBookmarked').mockReturnValue(true)
-    const wrapper = await createWrapper()
-    await wrapper.find('[data-testid="category-favorites"]').trigger('click')
+    const result = await renderComponent()
+    await result.user.click(screen.getByTestId('category-favorites'))
     await nextTick()
-    return wrapper
-  }
-
-  function getResultItems(wrapper: VueWrapper) {
-    return wrapper.findAll('[data-testid="result-item"]')
-  }
-
-  function getNodeItems(wrapper: VueWrapper) {
-    return wrapper.findAll('.node-item')
+    return result
   }
 
   describe('category selection', () => {
@@ -88,11 +92,11 @@ describe('NodeSearchContent', () => {
         useNodeDefStore().nodeDefsByName['FrequentNode']
       ])
 
-      const wrapper = await createWrapper()
+      await renderComponent()
 
-      const items = getNodeItems(wrapper)
+      const items = screen.getAllByTestId('node-item')
       expect(items).toHaveLength(1)
-      expect(items[0].text()).toContain('Frequent Node')
+      expect(items[0]).toHaveTextContent('Frequent Node')
     })
 
     it('should show only bookmarked nodes when Favorites is selected', async () => {
@@ -110,13 +114,13 @@ describe('NodeSearchContent', () => {
         (node: ComfyNodeDefImpl) => node.name === 'BookmarkedNode'
       )
 
-      const wrapper = await createWrapper()
-      await wrapper.find('[data-testid="category-favorites"]').trigger('click')
+      const { user } = await renderComponent()
+      await user.click(screen.getByTestId('category-favorites'))
       await nextTick()
 
-      const items = getNodeItems(wrapper)
+      const items = screen.getAllByTestId('node-item')
       expect(items).toHaveLength(1)
-      expect(items[0].text()).toContain('Bookmarked')
+      expect(items[0]).toHaveTextContent('Bookmarked')
     })
 
     it('should show empty state when no bookmarks exist', async () => {
@@ -125,11 +129,11 @@ describe('NodeSearchContent', () => {
       ])
       vi.spyOn(useNodeBookmarkStore(), 'isBookmarked').mockReturnValue(false)
 
-      const wrapper = await createWrapper()
-      await wrapper.find('[data-testid="category-favorites"]').trigger('click')
+      const { user } = await renderComponent()
+      await user.click(screen.getByTestId('category-favorites'))
       await nextTick()
 
-      expect(wrapper.text()).toContain('No results')
+      expect(screen.getByText('No results')).toBeInTheDocument()
     })
 
     it('should show only CustomNodes when Extensions is selected', async () => {
@@ -154,13 +158,13 @@ describe('NodeSearchContent', () => {
         useNodeDefStore().nodeDefsByName['CustomNode'].nodeSource.type
       ).toBe(NodeSourceType.CustomNodes)
 
-      const wrapper = await createWrapper()
-      await wrapper.find('[data-testid="category-extensions"]').trigger('click')
+      const { user } = await renderComponent()
+      await user.click(screen.getByTestId('category-extensions'))
       await nextTick()
 
-      const items = getNodeItems(wrapper)
+      const items = screen.getAllByTestId('node-item')
       expect(items).toHaveLength(1)
-      expect(items[0].text()).toContain('Custom Node')
+      expect(items[0]).toHaveTextContent('Custom Node')
     })
 
     it('should hide Essentials category when no essential nodes exist', async () => {
@@ -171,10 +175,10 @@ describe('NodeSearchContent', () => {
         })
       ])
 
-      const wrapper = await createWrapper()
-      expect(wrapper.find('[data-testid="category-essentials"]').exists()).toBe(
-        false
-      )
+      await renderComponent()
+      expect(
+        screen.queryByTestId('category-essentials')
+      ).not.toBeInTheDocument()
     })
 
     it('should show only essential nodes when Essentials is selected', async () => {
@@ -191,13 +195,13 @@ describe('NodeSearchContent', () => {
       ])
       await nextTick()
 
-      const wrapper = await createWrapper()
-      await wrapper.find('[data-testid="category-essentials"]').trigger('click')
+      const { user } = await renderComponent()
+      await user.click(screen.getByTestId('category-essentials'))
       await nextTick()
 
-      const items = getNodeItems(wrapper)
+      const items = screen.getAllByTestId('node-item')
       expect(items).toHaveLength(1)
-      expect(items[0].text()).toContain('Essential Node')
+      expect(items[0]).toHaveTextContent('Essential Node')
     })
 
     it('should include subcategory nodes when parent category is selected', async () => {
@@ -219,11 +223,11 @@ describe('NodeSearchContent', () => {
         })
       ])
 
-      const wrapper = await createWrapper()
-      await wrapper.find('[data-testid="category-sampling"]').trigger('click')
+      const { user } = await renderComponent()
+      await user.click(screen.getByTestId('category-sampling'))
       await nextTick()
 
-      const texts = getNodeItems(wrapper).map((i) => i.text())
+      const texts = screen.getAllByTestId('node-item').map((i) => i.textContent)
       expect(texts).toHaveLength(2)
       expect(texts).toContain('KSampler')
       expect(texts).toContain('KSampler Advanced')
@@ -245,18 +249,18 @@ describe('NodeSearchContent', () => {
         })
       ])
 
-      const wrapper = await createWrapper()
-      await wrapper.find('[data-testid="category-sampling"]').trigger('click')
+      const { user } = await renderComponent()
+      await user.click(screen.getByTestId('category-sampling'))
       await nextTick()
 
-      expect(getNodeItems(wrapper)).toHaveLength(1)
+      expect(screen.getAllByTestId('node-item')).toHaveLength(1)
 
-      const input = wrapper.find('input[type="text"]')
-      await input.setValue('Load')
+      const input = screen.getByRole('combobox')
+      await user.type(input, 'Load')
       await nextTick()
 
-      const texts = getNodeItems(wrapper).map((i) => i.text())
-      expect(texts.some((t) => t.includes('Load Checkpoint'))).toBe(true)
+      const texts = screen.getAllByTestId('node-item').map((i) => i.textContent)
+      expect(texts.some((t) => t?.includes('Load Checkpoint'))).toBe(true)
     })
 
     it('should clear search query when category changes', async () => {
@@ -264,56 +268,58 @@ describe('NodeSearchContent', () => {
         createMockNodeDef({ name: 'TestNode', display_name: 'Test Node' })
       ])
 
-      const wrapper = await createWrapper()
+      const { user } = await renderComponent()
 
-      const input = wrapper.find('input[type="text"]')
-      await input.setValue('test query')
+      const input = screen.getByRole('combobox')
+      await user.type(input, 'test query')
       await nextTick()
-      expect((input.element as HTMLInputElement).value).toBe('test query')
+      expect(input).toHaveValue('test query')
 
-      await wrapper.find('[data-testid="category-favorites"]').trigger('click')
+      await user.click(screen.getByTestId('category-favorites'))
       await nextTick()
-      expect((input.element as HTMLInputElement).value).toBe('')
+      expect(input).toHaveValue('')
     })
 
     it('should reset selected index when search query changes', async () => {
-      const wrapper = await setupFavorites([
+      const { user } = await setupFavorites([
         { name: 'Node1', display_name: 'Node One' },
         { name: 'Node2', display_name: 'Node Two' }
       ])
 
-      const input = wrapper.find('input[type="text"]')
-      await input.trigger('keydown', { key: 'ArrowDown' })
+      const input = screen.getByRole('combobox')
+      await user.click(input)
+      await user.keyboard('{ArrowDown}')
       await nextTick()
-      expect(getResultItems(wrapper)[1].attributes('aria-selected')).toBe(
+      expect(screen.getAllByTestId('result-item')[1]).toHaveAttribute(
+        'aria-selected',
         'true'
       )
 
-      await input.setValue('Node')
+      await user.type(input, 'Node')
       await nextTick()
-      expect(getResultItems(wrapper)[0].attributes('aria-selected')).toBe(
+      expect(screen.getAllByTestId('result-item')[0]).toHaveAttribute(
+        'aria-selected',
         'true'
       )
     })
 
     it('should reset selected index when category changes', async () => {
-      const wrapper = await setupFavorites([
+      const { user } = await setupFavorites([
         { name: 'Node1', display_name: 'Node One' },
         { name: 'Node2', display_name: 'Node Two' }
       ])
 
-      const input = wrapper.find('input[type="text"]')
-      await input.trigger('keydown', { key: 'ArrowDown' })
+      await user.click(screen.getByRole('combobox'))
+      await user.keyboard('{ArrowDown}')
       await nextTick()
 
-      await wrapper
-        .find('[data-testid="category-most-relevant"]')
-        .trigger('click')
+      await user.click(screen.getByTestId('category-most-relevant'))
       await nextTick()
-      await wrapper.find('[data-testid="category-favorites"]').trigger('click')
+      await user.click(screen.getByTestId('category-favorites'))
       await nextTick()
 
-      expect(getResultItems(wrapper)[0].attributes('aria-selected')).toBe(
+      expect(screen.getAllByTestId('result-item')[0]).toHaveAttribute(
+        'aria-selected',
         'true'
       )
     })
@@ -321,106 +327,105 @@ describe('NodeSearchContent', () => {
 
   describe('keyboard and mouse interaction', () => {
     it('should navigate results with ArrowDown/ArrowUp and clamp to bounds', async () => {
-      const wrapper = await setupFavorites([
+      const { user } = await setupFavorites([
         { name: 'Node1', display_name: 'Node One' },
         { name: 'Node2', display_name: 'Node Two' },
         { name: 'Node3', display_name: 'Node Three' }
       ])
 
-      const input = wrapper.find('input[type="text"]')
+      await user.click(screen.getByRole('combobox'))
       const selectedIndex = () =>
-        getResultItems(wrapper).findIndex(
-          (r) => r.attributes('aria-selected') === 'true'
-        )
+        screen
+          .getAllByTestId('result-item')
+          .findIndex((r) => r.getAttribute('aria-selected') === 'true')
 
       expect(selectedIndex()).toBe(0)
 
-      await input.trigger('keydown', { key: 'ArrowDown' })
+      await user.keyboard('{ArrowDown}')
       await nextTick()
       expect(selectedIndex()).toBe(1)
 
-      await input.trigger('keydown', { key: 'ArrowDown' })
+      await user.keyboard('{ArrowDown}')
       await nextTick()
       expect(selectedIndex()).toBe(2)
 
-      await input.trigger('keydown', { key: 'ArrowUp' })
+      await user.keyboard('{ArrowUp}')
       await nextTick()
       expect(selectedIndex()).toBe(1)
 
       // Navigate to first, then try going above — should clamp
-      await input.trigger('keydown', { key: 'ArrowUp' })
+      await user.keyboard('{ArrowUp}')
       await nextTick()
       expect(selectedIndex()).toBe(0)
 
-      await input.trigger('keydown', { key: 'ArrowUp' })
+      await user.keyboard('{ArrowUp}')
       await nextTick()
       expect(selectedIndex()).toBe(0)
     })
 
     it('should select current result with Enter key', async () => {
-      const wrapper = await setupFavorites([
+      const { user, onAddNode } = await setupFavorites([
         { name: 'TestNode', display_name: 'Test Node' }
       ])
 
-      await wrapper
-        .find('input[type="text"]')
-        .trigger('keydown', { key: 'Enter' })
+      await user.click(screen.getByRole('combobox'))
+      await user.keyboard('{Enter}')
       await nextTick()
 
-      expect(wrapper.emitted('addNode')).toBeTruthy()
-      expect(wrapper.emitted('addNode')![0][0]).toMatchObject({
-        name: 'TestNode'
-      })
+      expect(onAddNode).toHaveBeenCalledWith(
+        expect.objectContaining({ name: 'TestNode' })
+      )
     })
 
     it('should select item on hover', async () => {
-      const wrapper = await setupFavorites([
+      const { user } = await setupFavorites([
         { name: 'Node1', display_name: 'Node One' },
         { name: 'Node2', display_name: 'Node Two' }
       ])
 
-      const results = getResultItems(wrapper)
-      await results[1].trigger('mouseenter')
+      const results = screen.getAllByTestId('result-item')
+      await user.hover(results[1])
       await nextTick()
 
-      expect(results[1].attributes('aria-selected')).toBe('true')
+      expect(results[1]).toHaveAttribute('aria-selected', 'true')
     })
 
     it('should add node on click', async () => {
-      const wrapper = await setupFavorites([
+      const { user, onAddNode } = await setupFavorites([
         { name: 'TestNode', display_name: 'Test Node' }
       ])
 
-      await getResultItems(wrapper)[0].trigger('click')
+      await user.click(screen.getAllByTestId('result-item')[0])
       await nextTick()
 
-      expect(wrapper.emitted('addNode')![0][0]).toMatchObject({
-        name: 'TestNode'
-      })
+      expect(onAddNode).toHaveBeenCalledWith(
+        expect.objectContaining({ name: 'TestNode' }),
+        expect.any(PointerEvent)
+      )
     })
   })
 
   describe('hoverNode emission', () => {
     it('should emit hoverNode with the currently selected node', async () => {
-      const wrapper = await setupFavorites([
+      const { onHoverNode } = await setupFavorites([
         { name: 'HoverNode', display_name: 'Hover Node' }
       ])
 
-      const emitted = wrapper.emitted('hoverNode')!
-      expect(emitted[emitted.length - 1][0]).toMatchObject({
+      const calls = onHoverNode.mock.calls
+      expect(calls[calls.length - 1][0]).toMatchObject({
         name: 'HoverNode'
       })
     })
 
     it('should emit null hoverNode when no results', async () => {
-      const wrapper = await createWrapper()
+      const { user, onHoverNode } = await renderComponent()
 
       vi.spyOn(useNodeBookmarkStore(), 'isBookmarked').mockReturnValue(false)
-      await wrapper.find('[data-testid="category-favorites"]').trigger('click')
+      await user.click(screen.getByTestId('category-favorites'))
       await nextTick()
 
-      const emitted = wrapper.emitted('hoverNode')!
-      expect(emitted[emitted.length - 1][0]).toBeNull()
+      const calls = onHoverNode.mock.calls
+      expect(calls[calls.length - 1][0]).toBeNull()
     })
   })
 
@@ -434,7 +439,7 @@ describe('NodeSearchContent', () => {
         })
       ])
 
-      const wrapper = await createWrapper({
+      await renderComponent({
         filters: [
           {
             filterDef: useNodeDefStore().nodeSearchService.inputTypeFilter,
@@ -443,9 +448,7 @@ describe('NodeSearchContent', () => {
         ]
       })
 
-      expect(
-        wrapper.findAll('[data-testid="filter-chip"]').length
-      ).toBeGreaterThan(0)
+      expect(screen.getAllByTestId('filter-chip').length).toBeGreaterThan(0)
     })
   })
 
@@ -471,42 +474,41 @@ describe('NodeSearchContent', () => {
 
     it('should emit removeFilter on backspace', async () => {
       const filters = createFilters(1)
-      const wrapper = await createWrapper({ filters })
+      const { user, onRemoveFilter } = await renderComponent({ filters })
 
-      const input = wrapper.find('input[type="text"]')
-      await input.trigger('keydown', { key: 'Backspace' })
+      await user.click(screen.getByRole('combobox'))
+      await user.keyboard('{Backspace}')
       await nextTick()
-      await input.trigger('keydown', { key: 'Backspace' })
+      await user.keyboard('{Backspace}')
       await nextTick()
 
-      expect(wrapper.emitted('removeFilter')).toHaveLength(1)
-      expect(wrapper.emitted('removeFilter')![0][0]).toMatchObject({
-        value: 'IMAGE'
-      })
+      expect(onRemoveFilter).toHaveBeenCalledTimes(1)
+      expect(onRemoveFilter).toHaveBeenCalledWith(
+        expect.objectContaining({ value: 'IMAGE' })
+      )
     })
 
     it('should not interact with chips when no filters exist', async () => {
-      const wrapper = await createWrapper({ filters: [] })
+      const { user, onRemoveFilter } = await renderComponent({ filters: [] })
 
-      const input = wrapper.find('input[type="text"]')
-      await input.trigger('keydown', { key: 'Backspace' })
+      await user.click(screen.getByRole('combobox'))
+      await user.keyboard('{Backspace}')
       await nextTick()
 
-      expect(wrapper.emitted('removeFilter')).toBeUndefined()
+      expect(onRemoveFilter).not.toHaveBeenCalled()
     })
 
     it('should remove chip when clicking its delete button', async () => {
       const filters = createFilters(1)
-      const wrapper = await createWrapper({ filters })
+      const { user, onRemoveFilter } = await renderComponent({ filters })
 
-      const deleteBtn = wrapper.find('[data-testid="chip-delete"]')
-      await deleteBtn.trigger('click')
+      await user.click(screen.getByTestId('chip-delete'))
       await nextTick()
 
-      expect(wrapper.emitted('removeFilter')).toHaveLength(1)
-      expect(wrapper.emitted('removeFilter')![0][0]).toMatchObject({
-        value: 'IMAGE'
-      })
+      expect(onRemoveFilter).toHaveBeenCalledTimes(1)
+      expect(onRemoveFilter).toHaveBeenCalledWith(
+        expect.objectContaining({ value: 'IMAGE' })
+      )
     })
   })
 
@@ -534,54 +536,46 @@ describe('NodeSearchContent', () => {
       ])
     }
 
-    function findFilterBarButton(wrapper: VueWrapper, label: string) {
-      return wrapper
-        .findAll('button[aria-pressed]')
-        .find((b) => b.text() === label)
+    function findFilterBarButton(label: string) {
+      return screen.getAllByRole('button').find((b) => b.textContent === label)
     }
 
-    async function enterFilterMode(wrapper: VueWrapper) {
-      await findFilterBarButton(wrapper, 'Input')!.trigger('click')
+    async function enterFilterMode(user: ReturnType<typeof userEvent.setup>) {
+      const btn = findFilterBarButton('Input')
+      expect(btn).toBeDefined()
+      await user.click(btn!)
       await nextTick()
     }
 
-    function getFilterOptions(wrapper: VueWrapper) {
-      return wrapper.findAll('[data-testid="filter-option"]')
-    }
-
-    function getFilterOptionTexts(wrapper: VueWrapper) {
-      return getFilterOptions(wrapper).map(
-        (o) =>
-          o
-            .findAll('span')[0]
-            ?.text()
-            .replace(/^[•·]\s*/, '')
-            .trim() ?? ''
-      )
-    }
-
-    function hasSidebar(wrapper: VueWrapper) {
-      return wrapper.findComponent(NodeSearchCategorySidebar).exists()
+    function hasSidebar() {
+      return screen.queryByTestId('category-most-relevant') !== null
     }
 
     it('should enter filter mode when a filter chip is selected', async () => {
       setupNodesWithTypes()
-      const wrapper = await createWrapper()
+      const { user } = await renderComponent()
 
-      expect(hasSidebar(wrapper)).toBe(true)
+      expect(hasSidebar()).toBe(true)
 
-      await enterFilterMode(wrapper)
+      await enterFilterMode(user)
 
-      expect(hasSidebar(wrapper)).toBe(false)
-      expect(getFilterOptions(wrapper).length).toBeGreaterThan(0)
+      expect(hasSidebar()).toBe(false)
+      expect(screen.getAllByTestId('filter-option').length).toBeGreaterThan(0)
     })
 
     it('should show available filter options sorted alphabetically', async () => {
       setupNodesWithTypes()
-      const wrapper = await createWrapper()
-      await enterFilterMode(wrapper)
+      const { user } = await renderComponent()
+      await enterFilterMode(user)
 
-      const texts = getFilterOptionTexts(wrapper)
+      const texts = screen.getAllByTestId('filter-option').map(
+        (o) =>
+          /* eslint-disable testing-library/no-node-access */
+          (o.querySelectorAll('span')[0] as HTMLElement)?.textContent
+            ?.replace(/^[•·]\s*/, '')
+            .trim() ?? ''
+        /* eslint-enable testing-library/no-node-access */
+      )
       expect(texts).toContain('IMAGE')
       expect(texts).toContain('LATENT')
       expect(texts).toContain('MODEL')
@@ -590,140 +584,152 @@ describe('NodeSearchContent', () => {
 
     it('should filter options when typing in filter mode', async () => {
       setupNodesWithTypes()
-      const wrapper = await createWrapper()
-      await enterFilterMode(wrapper)
+      const { user } = await renderComponent()
+      await enterFilterMode(user)
 
-      await wrapper.find('input[type="text"]').setValue('IMAGE')
+      await user.type(screen.getByRole('combobox'), 'IMAGE')
       await nextTick()
 
-      const texts = getFilterOptionTexts(wrapper)
+      const texts = screen.getAllByTestId('filter-option').map(
+        (o) =>
+          /* eslint-disable testing-library/no-node-access */
+          (o.querySelectorAll('span')[0] as HTMLElement)?.textContent
+            ?.replace(/^[•·]\s*/, '')
+            .trim() ?? ''
+        /* eslint-enable testing-library/no-node-access */
+      )
       expect(texts).toContain('IMAGE')
       expect(texts).not.toContain('MODEL')
     })
 
     it('should show no results when filter query has no matches', async () => {
       setupNodesWithTypes()
-      const wrapper = await createWrapper()
-      await enterFilterMode(wrapper)
+      const { user } = await renderComponent()
+      await enterFilterMode(user)
 
-      await wrapper.find('input[type="text"]').setValue('NONEXISTENT_TYPE')
+      await user.type(screen.getByRole('combobox'), 'NONEXISTENT_TYPE')
       await nextTick()
 
-      expect(wrapper.text()).toContain('No results')
+      expect(screen.getByText('No results')).toBeInTheDocument()
     })
 
     it('should emit addFilter when a filter option is clicked', async () => {
       setupNodesWithTypes()
-      const wrapper = await createWrapper()
-      await enterFilterMode(wrapper)
+      const { user, onAddFilter } = await renderComponent()
+      await enterFilterMode(user)
 
-      const imageOption = getFilterOptions(wrapper).find((o) =>
-        o.text().includes('IMAGE')
-      )
-      await imageOption!.trigger('click')
+      const imageOption = screen
+        .getAllByTestId('filter-option')
+        .find((o) => o.textContent?.includes('IMAGE'))
+      await user.click(imageOption!)
       await nextTick()
 
-      expect(wrapper.emitted('addFilter')![0][0]).toMatchObject({
-        filterDef: expect.objectContaining({ id: 'input' }),
-        value: 'IMAGE'
-      })
+      expect(onAddFilter).toHaveBeenCalledWith(
+        expect.objectContaining({
+          filterDef: expect.objectContaining({ id: 'input' }),
+          value: 'IMAGE'
+        })
+      )
     })
 
     it('should exit filter mode after applying a filter', async () => {
       setupNodesWithTypes()
-      const wrapper = await createWrapper()
-      await enterFilterMode(wrapper)
+      const { user } = await renderComponent()
+      await enterFilterMode(user)
 
-      await getFilterOptions(wrapper)[0].trigger('click')
+      await user.click(screen.getAllByTestId('filter-option')[0])
       await nextTick()
       await nextTick()
 
-      expect(hasSidebar(wrapper)).toBe(true)
+      expect(hasSidebar()).toBe(true)
     })
 
     it('should emit addFilter when Enter is pressed on selected option', async () => {
       setupNodesWithTypes()
-      const wrapper = await createWrapper()
-      await enterFilterMode(wrapper)
+      const { user, onAddFilter } = await renderComponent()
+      await enterFilterMode(user)
 
-      await wrapper
-        .find('input[type="text"]')
-        .trigger('keydown', { key: 'Enter' })
+      await user.click(screen.getByRole('combobox'))
+      await user.keyboard('{Enter}')
       await nextTick()
 
-      expect(wrapper.emitted('addFilter')![0][0]).toMatchObject({
-        filterDef: expect.objectContaining({ id: 'input' }),
-        value: 'IMAGE'
-      })
+      expect(onAddFilter).toHaveBeenCalledWith(
+        expect.objectContaining({
+          filterDef: expect.objectContaining({ id: 'input' }),
+          value: 'IMAGE'
+        })
+      )
     })
 
     it('should navigate filter options with ArrowDown/ArrowUp', async () => {
       setupNodesWithTypes()
-      const wrapper = await createWrapper()
-      await enterFilterMode(wrapper)
+      const { user } = await renderComponent()
+      await enterFilterMode(user)
 
-      const input = wrapper.find('input[type="text"]')
+      await user.click(screen.getByRole('combobox'))
 
-      expect(getFilterOptions(wrapper)[0].attributes('aria-selected')).toBe(
+      expect(screen.getAllByTestId('filter-option')[0]).toHaveAttribute(
+        'aria-selected',
         'true'
       )
 
-      await input.trigger('keydown', { key: 'ArrowDown' })
+      await user.keyboard('{ArrowDown}')
       await nextTick()
-      expect(getFilterOptions(wrapper)[1].attributes('aria-selected')).toBe(
+      expect(screen.getAllByTestId('filter-option')[1]).toHaveAttribute(
+        'aria-selected',
         'true'
       )
 
-      await input.trigger('keydown', { key: 'ArrowUp' })
+      await user.keyboard('{ArrowUp}')
       await nextTick()
-      expect(getFilterOptions(wrapper)[0].attributes('aria-selected')).toBe(
+      expect(screen.getAllByTestId('filter-option')[0]).toHaveAttribute(
+        'aria-selected',
         'true'
       )
     })
 
     it('should toggle filter mode off when same chip is clicked again', async () => {
       setupNodesWithTypes()
-      const wrapper = await createWrapper()
-      await enterFilterMode(wrapper)
+      const { user } = await renderComponent()
+      await enterFilterMode(user)
 
-      await findFilterBarButton(wrapper, 'Input')!.trigger('click')
+      await user.click(findFilterBarButton('Input')!)
       await nextTick()
       await nextTick()
 
-      expect(hasSidebar(wrapper)).toBe(true)
+      expect(hasSidebar()).toBe(true)
     })
 
     it('should reset filter query when re-entering filter mode', async () => {
       setupNodesWithTypes()
-      const wrapper = await createWrapper()
-      await enterFilterMode(wrapper)
+      const { user } = await renderComponent()
+      await enterFilterMode(user)
 
-      const input = wrapper.find('input[type="text"]')
-      await input.setValue('IMAGE')
+      const input = screen.getByRole('combobox')
+      await user.type(input, 'IMAGE')
       await nextTick()
 
-      await findFilterBarButton(wrapper, 'Input')!.trigger('click')
+      await user.click(findFilterBarButton('Input')!)
       await nextTick()
       await nextTick()
 
-      await enterFilterMode(wrapper)
+      await enterFilterMode(user)
 
-      expect((input.element as HTMLInputElement).value).toBe('')
+      expect(input).toHaveValue('')
     })
 
     it('should exit filter mode when cancel button is clicked', async () => {
       setupNodesWithTypes()
-      const wrapper = await createWrapper()
-      await enterFilterMode(wrapper)
+      const { user } = await renderComponent()
+      await enterFilterMode(user)
 
-      expect(hasSidebar(wrapper)).toBe(false)
+      expect(hasSidebar()).toBe(false)
 
-      const cancelBtn = wrapper.find('[data-testid="cancel-filter"]')
-      await cancelBtn.trigger('click')
+      await user.click(screen.getByTestId('cancel-filter'))
       await nextTick()
       await nextTick()
 
-      expect(hasSidebar(wrapper)).toBe(true)
+      expect(hasSidebar()).toBe(true)
     })
   })
 })
diff --git a/src/components/searchbox/v2/NodeSearchFilterBar.test.ts b/src/components/searchbox/v2/NodeSearchFilterBar.test.ts
index 6708bc6b4a..b618315b4a 100644
--- a/src/components/searchbox/v2/NodeSearchFilterBar.test.ts
+++ b/src/components/searchbox/v2/NodeSearchFilterBar.test.ts
@@ -1,4 +1,5 @@
-import { mount } from '@vue/test-utils'
+import { render, within } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 
@@ -30,54 +31,59 @@ describe(NodeSearchFilterBar, () => {
     ])
   })
 
-  async function createWrapper(props = {}) {
-    const wrapper = mount(NodeSearchFilterBar, {
-      props,
+  async function createRender(props = {}) {
+    const user = userEvent.setup()
+    const onSelectChip = vi.fn()
+    const { container } = render(NodeSearchFilterBar, {
+      props: { onSelectChip, ...props },
       global: { plugins: [testI18n] }
     })
     await nextTick()
-    return wrapper
+    const view = within(container as HTMLElement)
+    return { user, onSelectChip, view }
   }
 
   it('should render all filter chips', async () => {
-    const wrapper = await createWrapper()
+    const { view } = await createRender()
 
-    const buttons = wrapper.findAll('button')
+    const buttons = view.getAllByRole('button')
     expect(buttons).toHaveLength(6)
-    expect(buttons[0].text()).toBe('Blueprints')
-    expect(buttons[1].text()).toBe('Partner Nodes')
-    expect(buttons[2].text()).toBe('Essentials')
-    expect(buttons[3].text()).toBe('Extensions')
-    expect(buttons[4].text()).toBe('Input')
-    expect(buttons[5].text()).toBe('Output')
+    expect(buttons[0]).toHaveTextContent('Blueprints')
+    expect(buttons[1]).toHaveTextContent('Partner Nodes')
+    expect(buttons[2]).toHaveTextContent('Essentials')
+    expect(buttons[3]).toHaveTextContent('Extensions')
+    expect(buttons[4]).toHaveTextContent('Input')
+    expect(buttons[5]).toHaveTextContent('Output')
   })
 
   it('should mark active chip as pressed when activeChipKey matches', async () => {
-    const wrapper = await createWrapper({ activeChipKey: 'input' })
+    const { view } = await createRender({ activeChipKey: 'input' })
 
-    const inputBtn = wrapper.findAll('button').find((b) => b.text() === 'Input')
-    expect(inputBtn?.attributes('aria-pressed')).toBe('true')
+    expect(view.getByRole('button', { name: 'Input' })).toHaveAttribute(
+      'aria-pressed',
+      'true'
+    )
   })
 
   it('should not mark chips as pressed when activeChipKey does not match', async () => {
-    const wrapper = await createWrapper({ activeChipKey: null })
+    const { view } = await createRender({ activeChipKey: null })
 
-    wrapper.findAll('button').forEach((btn) => {
-      expect(btn.attributes('aria-pressed')).toBe('false')
+    view.getAllByRole('button').forEach((btn) => {
+      expect(btn).toHaveAttribute('aria-pressed', 'false')
     })
   })
 
   it('should emit selectChip with chip data when clicked', async () => {
-    const wrapper = await createWrapper()
+    const { user, onSelectChip, view } = await createRender()
 
-    const inputBtn = wrapper.findAll('button').find((b) => b.text() === 'Input')
-    await inputBtn?.trigger('click')
+    await user.click(view.getByRole('button', { name: 'Input' }))
 
-    const emitted = wrapper.emitted('selectChip')!
-    expect(emitted[0][0]).toMatchObject({
-      key: 'input',
-      label: 'Input',
-      filter: expect.anything()
-    })
+    expect(onSelectChip).toHaveBeenCalledWith(
+      expect.objectContaining({
+        key: 'input',
+        label: 'Input',
+        filter: expect.anything()
+      })
+    )
   })
 })
diff --git a/src/components/searchbox/v2/NodeSearchInput.test.ts b/src/components/searchbox/v2/NodeSearchInput.test.ts
index 5bc875466a..58bb1f0390 100644
--- a/src/components/searchbox/v2/NodeSearchInput.test.ts
+++ b/src/components/searchbox/v2/NodeSearchInput.test.ts
@@ -1,4 +1,5 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import type { FilterChip } from '@/components/searchbox/v2/NodeSearchFilterBar.vue'
@@ -59,7 +60,7 @@ describe('NodeSearchInput', () => {
     vi.restoreAllMocks()
   })
 
-  function createWrapper(
+  function createRender(
     props: Partial<{
       filters: FuseFilterWithValue<ComfyNodeDefImpl, string>[]
       activeFilter: FilterChip | null
@@ -67,101 +68,128 @@ describe('NodeSearchInput', () => {
       filterQuery: string
     }> = {}
   ) {
-    return mount(NodeSearchInput, {
+    const user = userEvent.setup()
+    const onUpdateSearchQuery = vi.fn()
+    const onUpdateFilterQuery = vi.fn()
+    const onCancelFilter = vi.fn()
+    const onSelectCurrent = vi.fn()
+    const onNavigateDown = vi.fn()
+    const onNavigateUp = vi.fn()
+    render(NodeSearchInput, {
       props: {
         filters: [],
         activeFilter: null,
         searchQuery: '',
         filterQuery: '',
+        'onUpdate:searchQuery': onUpdateSearchQuery,
+        'onUpdate:filterQuery': onUpdateFilterQuery,
+        onCancelFilter,
+        onSelectCurrent,
+        onNavigateDown,
+        onNavigateUp,
         ...props
       },
       global: { plugins: [testI18n] }
     })
+    return {
+      user,
+      onUpdateSearchQuery,
+      onUpdateFilterQuery,
+      onCancelFilter,
+      onSelectCurrent,
+      onNavigateDown,
+      onNavigateUp
+    }
   }
 
   it('should route input to searchQuery when no active filter', async () => {
-    const wrapper = createWrapper()
-    await wrapper.find('input').setValue('test search')
+    const { user, onUpdateSearchQuery } = createRender()
+    await user.type(screen.getByRole('combobox'), 'test search')
 
-    expect(wrapper.emitted('update:searchQuery')![0]).toEqual(['test search'])
+    expect(onUpdateSearchQuery).toHaveBeenLastCalledWith('test search')
   })
 
   it('should route input to filterQuery when active filter is set', async () => {
-    const wrapper = createWrapper({
+    const { user, onUpdateFilterQuery, onUpdateSearchQuery } = createRender({
       activeFilter: createActiveFilter('Input')
     })
-    await wrapper.find('input').setValue('IMAGE')
+    await user.type(screen.getByRole('combobox'), 'IMAGE')
 
-    expect(wrapper.emitted('update:filterQuery')![0]).toEqual(['IMAGE'])
-    expect(wrapper.emitted('update:searchQuery')).toBeUndefined()
+    expect(onUpdateFilterQuery).toHaveBeenLastCalledWith('IMAGE')
+    expect(onUpdateSearchQuery).not.toHaveBeenCalled()
   })
 
   it('should show filter label placeholder when active filter is set', () => {
-    const wrapper = createWrapper({
+    createRender({
       activeFilter: createActiveFilter('Input')
     })
 
-    expect(
-      (wrapper.find('input').element as HTMLInputElement).placeholder
-    ).toContain('input')
+    expect(screen.getByRole('combobox')).toHaveAttribute(
+      'placeholder',
+      expect.stringContaining('input')
+    )
   })
 
   it('should show add node placeholder when no active filter', () => {
-    const wrapper = createWrapper()
+    createRender()
 
-    expect(
-      (wrapper.find('input').element as HTMLInputElement).placeholder
-    ).toContain('Add a node')
+    expect(screen.getByRole('combobox')).toHaveAttribute(
+      'placeholder',
+      expect.stringContaining('Add a node')
+    )
   })
 
   it('should hide filter chips when active filter is set', () => {
-    const wrapper = createWrapper({
+    createRender({
       filters: [createFilter('input', 'IMAGE')],
       activeFilter: createActiveFilter('Input')
     })
 
-    expect(wrapper.findAll('[data-testid="filter-chip"]')).toHaveLength(0)
+    expect(screen.queryAllByTestId('filter-chip')).toHaveLength(0)
   })
 
   it('should show filter chips when no active filter', () => {
-    const wrapper = createWrapper({
+    createRender({
       filters: [createFilter('input', 'IMAGE')]
     })
 
-    expect(wrapper.findAll('[data-testid="filter-chip"]')).toHaveLength(1)
+    expect(screen.getAllByTestId('filter-chip')).toHaveLength(1)
   })
 
   it('should emit cancelFilter when cancel button is clicked', async () => {
-    const wrapper = createWrapper({
+    const { user, onCancelFilter } = createRender({
       activeFilter: createActiveFilter('Input')
     })
 
-    await wrapper.find('[data-testid="cancel-filter"]').trigger('click')
+    await user.click(screen.getByTestId('cancel-filter'))
 
-    expect(wrapper.emitted('cancelFilter')).toHaveLength(1)
+    expect(onCancelFilter).toHaveBeenCalledOnce()
   })
 
   it('should emit selectCurrent on Enter', async () => {
-    const wrapper = createWrapper()
+    const { user, onSelectCurrent } = createRender()
 
-    await wrapper.find('input').trigger('keydown', { key: 'Enter' })
+    await user.click(screen.getByRole('combobox'))
+    await user.keyboard('{Enter}')
 
-    expect(wrapper.emitted('selectCurrent')).toHaveLength(1)
+    expect(onSelectCurrent).toHaveBeenCalledOnce()
   })
 
   it('should emit navigateDown on ArrowDown', async () => {
-    const wrapper = createWrapper()
+    const { user, onNavigateDown } = createRender()
 
-    await wrapper.find('input').trigger('keydown', { key: 'ArrowDown' })
+    await user.click(screen.getByRole('combobox'))
+    await user.keyboard('{ArrowDown}')
 
-    expect(wrapper.emitted('navigateDown')).toHaveLength(1)
+    expect(onNavigateDown).toHaveBeenCalledOnce()
   })
 
   it('should emit navigateUp on ArrowUp', async () => {
-    const wrapper = createWrapper()
+    const { user, onNavigateUp } = createRender()
 
-    await wrapper.find('input').trigger('keydown', { key: 'ArrowUp' })
+    await user.click(screen.getByRole('combobox'))
+    await user.keyboard('{ArrowUp}')
 
-    expect(wrapper.emitted('navigateUp')).toHaveLength(1)
+    expect(onNavigateUp).toHaveBeenCalledOnce()
   })
 })
diff --git a/src/components/sidebar/tabs/AssetsSidebarListView.test.ts b/src/components/sidebar/tabs/AssetsSidebarListView.test.ts
index 9f8510fe81..40293ba7f7 100644
--- a/src/components/sidebar/tabs/AssetsSidebarListView.test.ts
+++ b/src/components/sidebar/tabs/AssetsSidebarListView.test.ts
@@ -1,4 +1,5 @@
-import { mount } from '@vue/test-utils'
+/* eslint-disable vue/one-component-per-file */
+import { render, fireEvent } from '@testing-library/vue'
 import { defineComponent } from 'vue'
 import { describe, expect, it, vi } from 'vitest'
 
@@ -31,6 +32,32 @@ const VirtualGridStub = defineComponent({
     '<div><slot v-for="item in items" :key="item.key" name="item" :item="item" /></div>'
 })
 
+const AssetsListItemStub = defineComponent({
+  name: 'AssetsListItem',
+  props: {
+    previewUrl: { type: String, default: '' },
+    isVideoPreview: { type: Boolean, default: false },
+    previewAlt: { type: String, default: '' },
+    iconName: { type: String, default: '' },
+    iconAriaLabel: { type: String, default: '' },
+    iconClass: { type: String, default: '' },
+    iconWrapperClass: { type: String, default: '' },
+    primaryText: { type: String, default: '' },
+    secondaryText: { type: String, default: '' },
+    stackCount: { type: Number, default: 0 },
+    stackIndicatorLabel: { type: String, default: '' },
+    stackExpanded: { type: Boolean, default: false },
+    progressTotalPercent: { type: Number, default: undefined },
+    progressCurrentPercent: { type: Number, default: undefined }
+  },
+  template: `<div
+    class="assets-list-item-stub"
+    :data-preview-url="previewUrl"
+    :data-is-video-preview="isVideoPreview"
+    data-testid="assets-list-item"
+  ><button data-testid="preview-click-trigger" @click="$emit('preview-click')" /><slot /></div>`
+})
+
 const buildAsset = (id: string, name: string): AssetItem =>
   ({
     id,
@@ -43,21 +70,27 @@ const buildOutputItem = (asset: AssetItem): OutputStackListItem => ({
   asset
 })
 
-const mountListView = (assetItems: OutputStackListItem[] = []) =>
-  mount(AssetsSidebarListView, {
+function renderListView(
+  assetItems: OutputStackListItem[] = [],
+  props: Record<string, unknown> = {}
+) {
+  return render(AssetsSidebarListView, {
     props: {
       assetItems,
       selectableAssets: [],
       isSelected: () => false,
       isStackExpanded: () => false,
-      toggleStack: async () => {}
+      toggleStack: async () => {},
+      ...props
     },
     global: {
       stubs: {
-        VirtualGrid: VirtualGridStub
+        VirtualGrid: VirtualGridStub,
+        AssetsListItem: AssetsListItemStub
       }
     }
   })
+}
 
 describe('AssetsSidebarListView', () => {
   it('marks mp4 assets as video previews', () => {
@@ -67,14 +100,17 @@ describe('AssetsSidebarListView', () => {
       user_metadata: {}
     } satisfies AssetItem
 
-    const wrapper = mountListView([buildOutputItem(videoAsset)])
+    const { container } = renderListView([buildOutputItem(videoAsset)])
 
-    const listItems = wrapper.findAllComponents({ name: 'AssetsListItem' })
-    const assetListItem = listItems.at(-1)
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const stubs = container.querySelectorAll('[data-testid="assets-list-item"]')
+    const assetListItem = stubs[stubs.length - 1]
 
     expect(assetListItem).toBeDefined()
-    expect(assetListItem?.props('previewUrl')).toBe('/api/view/clip.mp4')
-    expect(assetListItem?.props('isVideoPreview')).toBe(true)
+    expect(assetListItem?.getAttribute('data-preview-url')).toBe(
+      '/api/view/clip.mp4'
+    )
+    expect(assetListItem?.getAttribute('data-is-video-preview')).toBe('true')
   })
 
   it('uses icon fallback for text assets even when preview_url exists', () => {
@@ -84,14 +120,15 @@ describe('AssetsSidebarListView', () => {
       user_metadata: {}
     } satisfies AssetItem
 
-    const wrapper = mountListView([buildOutputItem(textAsset)])
+    const { container } = renderListView([buildOutputItem(textAsset)])
 
-    const listItems = wrapper.findAllComponents({ name: 'AssetsListItem' })
-    const assetListItem = listItems.at(-1)
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const stubs = container.querySelectorAll('[data-testid="assets-list-item"]')
+    const assetListItem = stubs[stubs.length - 1]
 
     expect(assetListItem).toBeDefined()
-    expect(assetListItem?.props('previewUrl')).toBe('')
-    expect(assetListItem?.props('isVideoPreview')).toBe(false)
+    expect(assetListItem?.getAttribute('data-preview-url')).toBe('')
+    expect(assetListItem?.getAttribute('data-is-video-preview')).toBe('false')
   })
 
   it('emits preview-asset when item preview is clicked', async () => {
@@ -101,16 +138,19 @@ describe('AssetsSidebarListView', () => {
       user_metadata: {}
     } satisfies AssetItem
 
-    const wrapper = mountListView([buildOutputItem(imageAsset)])
-    const listItems = wrapper.findAllComponents({ name: 'AssetsListItem' })
-    const assetListItem = listItems.at(-1)
+    const onPreviewAsset = vi.fn()
+    const { container } = renderListView([buildOutputItem(imageAsset)], {
+      'onPreview-asset': onPreviewAsset
+    })
 
-    expect(assetListItem).toBeDefined()
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const trigger = container.querySelector(
+      '[data-testid="preview-click-trigger"]'
+    )!
+    // eslint-disable-next-line testing-library/prefer-user-event
+    await fireEvent.click(trigger)
 
-    assetListItem!.vm.$emit('preview-click')
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.emitted('preview-asset')).toEqual([[imageAsset]])
+    expect(onPreviewAsset).toHaveBeenCalledWith(imageAsset)
   })
 
   it('emits preview-asset when item is double-clicked', async () => {
@@ -120,15 +160,16 @@ describe('AssetsSidebarListView', () => {
       user_metadata: {}
     } satisfies AssetItem
 
-    const wrapper = mountListView([buildOutputItem(imageAsset)])
-    const listItems = wrapper.findAllComponents({ name: 'AssetsListItem' })
-    const assetListItem = listItems.at(-1)
+    const onPreviewAsset = vi.fn()
+    const { container } = renderListView([buildOutputItem(imageAsset)], {
+      'onPreview-asset': onPreviewAsset
+    })
 
-    expect(assetListItem).toBeDefined()
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const stub = container.querySelector('[data-testid="assets-list-item"]')!
+    // eslint-disable-next-line testing-library/prefer-user-event
+    await fireEvent.dblClick(stub)
 
-    await assetListItem!.trigger('dblclick')
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.emitted('preview-asset')).toEqual([[imageAsset]])
+    expect(onPreviewAsset).toHaveBeenCalledWith(imageAsset)
   })
 })
diff --git a/src/components/sidebar/tabs/AssetsSidebarTab.vue b/src/components/sidebar/tabs/AssetsSidebarTab.vue
index e91f9f6b63..4188e0cccb 100644
--- a/src/components/sidebar/tabs/AssetsSidebarTab.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue
@@ -143,11 +143,16 @@
             <Button
               v-if="shouldShowDeleteButton"
               size="icon"
+              data-testid="assets-delete-selected"
               @click="handleDeleteSelected"
             >
               <i class="icon-[lucide--trash-2] size-4" />
             </Button>
-            <Button size="icon" @click="handleDownloadSelected">
+            <Button
+              size="icon"
+              data-testid="assets-download-selected"
+              @click="handleDownloadSelected"
+            >
               <i class="icon-[lucide--download] size-4" />
             </Button>
           </template>
@@ -156,12 +161,17 @@
             <Button
               v-if="shouldShowDeleteButton"
               variant="secondary"
+              data-testid="assets-delete-selected"
               @click="handleDeleteSelected"
             >
               <span>{{ $t('mediaAsset.selection.deleteSelected') }}</span>
               <i class="icon-[lucide--trash-2] size-4" />
             </Button>
-            <Button variant="secondary" @click="handleDownloadSelected">
+            <Button
+              variant="secondary"
+              data-testid="assets-download-selected"
+              @click="handleDownloadSelected"
+            >
               <span>{{ $t('mediaAsset.selection.downloadSelected') }}</span>
               <i class="icon-[lucide--download] size-4" />
             </Button>
diff --git a/src/components/sidebar/tabs/JobHistorySidebarTab.test.ts b/src/components/sidebar/tabs/JobHistorySidebarTab.test.ts
deleted file mode 100644
index d5dbabccc5..0000000000
--- a/src/components/sidebar/tabs/JobHistorySidebarTab.test.ts
+++ /dev/null
@@ -1,163 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { createI18n } from 'vue-i18n'
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import { defineComponent, nextTick } from 'vue'
-
-import JobHistorySidebarTab from './JobHistorySidebarTab.vue'
-
-const JobDetailsPopoverStub = defineComponent({
-  name: 'JobDetailsPopover',
-  props: {
-    jobId: { type: String, required: true },
-    workflowId: { type: String, default: undefined }
-  },
-  template: '<div class="job-details-popover-stub" />'
-})
-
-vi.mock('@/composables/queue/useJobList', async () => {
-  const { ref } = await import('vue')
-  const jobHistoryItem = {
-    id: 'job-1',
-    title: 'Job 1',
-    meta: 'meta',
-    state: 'completed',
-    taskRef: {
-      workflowId: 'workflow-1',
-      previewOutput: {
-        isImage: true,
-        isVideo: false,
-        url: '/api/view/job-1.png'
-      }
-    }
-  }
-
-  return {
-    useJobList: () => ({
-      selectedJobTab: ref('All'),
-      selectedWorkflowFilter: ref('all'),
-      selectedSortMode: ref('mostRecent'),
-      searchQuery: ref(''),
-      hasFailedJobs: ref(false),
-      filteredTasks: ref([]),
-      groupedJobItems: ref([
-        {
-          key: 'group-1',
-          label: 'Group 1',
-          items: [jobHistoryItem]
-        }
-      ])
-    })
-  }
-})
-
-vi.mock('@/composables/queue/useJobMenu', () => ({
-  useJobMenu: () => ({
-    jobMenuEntries: [],
-    cancelJob: vi.fn()
-  })
-}))
-
-vi.mock('@/composables/queue/useQueueClearHistoryDialog', () => ({
-  useQueueClearHistoryDialog: () => ({
-    showQueueClearHistoryDialog: vi.fn()
-  })
-}))
-
-vi.mock('@/composables/queue/useResultGallery', async () => {
-  const { ref } = await import('vue')
-  return {
-    useResultGallery: () => ({
-      galleryActiveIndex: ref(-1),
-      galleryItems: ref([]),
-      onViewItem: vi.fn()
-    })
-  }
-})
-
-vi.mock('@/composables/useErrorHandling', () => ({
-  useErrorHandling: () => ({
-    wrapWithErrorHandlingAsync: <T extends (...args: never[]) => unknown>(
-      fn: T
-    ) => fn
-  })
-}))
-
-vi.mock('@/stores/commandStore', () => ({
-  useCommandStore: () => ({
-    execute: vi.fn()
-  })
-}))
-
-vi.mock('@/stores/dialogStore', () => ({
-  useDialogStore: () => ({
-    showDialog: vi.fn()
-  })
-}))
-
-vi.mock('@/stores/executionStore', () => ({
-  useExecutionStore: () => ({
-    clearInitializationByJobIds: vi.fn()
-  })
-}))
-
-vi.mock('@/stores/queueStore', () => ({
-  useQueueStore: () => ({
-    runningTasks: [],
-    pendingTasks: [],
-    delete: vi.fn()
-  })
-}))
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: { en: {} }
-})
-
-const SidebarTabTemplateStub = {
-  name: 'SidebarTabTemplate',
-  props: ['title'],
-  template:
-    '<div><slot name="alt-title" /><slot name="header" /><slot name="body" /></div>'
-}
-
-function mountComponent() {
-  return mount(JobHistorySidebarTab, {
-    global: {
-      plugins: [i18n],
-      stubs: {
-        SidebarTabTemplate: SidebarTabTemplateStub,
-        JobFilterTabs: true,
-        JobFilterActions: true,
-        JobHistoryActionsMenu: true,
-        JobContextMenu: true,
-        ResultGallery: true,
-        teleport: true,
-        JobDetailsPopover: JobDetailsPopoverStub
-      }
-    }
-  })
-}
-
-afterEach(() => {
-  vi.useRealTimers()
-})
-
-describe('JobHistorySidebarTab', () => {
-  it('shows the job details popover for jobs in the history panel', async () => {
-    vi.useFakeTimers()
-    const wrapper = mountComponent()
-    const jobRow = wrapper.find('[data-job-id="job-1"]')
-
-    await jobRow.trigger('mouseenter')
-    await vi.advanceTimersByTimeAsync(200)
-    await nextTick()
-
-    const popover = wrapper.findComponent(JobDetailsPopoverStub)
-    expect(popover.exists()).toBe(true)
-    expect(popover.props()).toMatchObject({
-      jobId: 'job-1',
-      workflowId: 'workflow-1'
-    })
-  })
-})
diff --git a/src/components/sidebar/tabs/JobHistorySidebarTab.vue b/src/components/sidebar/tabs/JobHistorySidebarTab.vue
index fa85818dcd..ae323e9dfd 100644
--- a/src/components/sidebar/tabs/JobHistorySidebarTab.vue
+++ b/src/components/sidebar/tabs/JobHistorySidebarTab.vue
@@ -46,22 +46,25 @@
       </div>
     </template>
     <template #body>
-      <JobAssetsList
-        :displayed-job-groups="displayedJobGroups"
-        @cancel-item="onCancelItem"
-        @delete-item="onDeleteItem"
-        @view-item="onViewItem"
-        @menu="onMenuItem"
-      />
-      <JobContextMenu
-        ref="jobContextMenuRef"
-        :entries="jobMenuEntries"
-        @action="onJobMenuAction"
-      />
-      <MediaLightbox
-        v-model:active-index="galleryActiveIndex"
-        :all-gallery-items="galleryItems"
-      />
+      <div class="flex h-full min-h-0 flex-col">
+        <JobAssetsList
+          class="min-h-0 flex-1"
+          :displayed-job-groups="displayedJobGroups"
+          @cancel-item="onCancelItem"
+          @delete-item="onDeleteItem"
+          @view-item="onViewItem"
+          @menu="onMenuItem"
+        />
+        <JobContextMenu
+          ref="jobContextMenuRef"
+          :entries="jobMenuEntries"
+          @action="onJobMenuAction"
+        />
+        <MediaLightbox
+          v-model:active-index="galleryActiveIndex"
+          :all-gallery-items="galleryItems"
+        />
+      </div>
     </template>
   </SidebarTabTemplate>
 </template>
diff --git a/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.test.ts b/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.test.ts
index 96748de376..2fcf1d9ef7 100644
--- a/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.test.ts
+++ b/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.test.ts
@@ -1,9 +1,10 @@
-import { mount } from '@vue/test-utils'
 import { createTestingPinia } from '@pinia/testing'
 import { ref } from 'vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
+import { render, screen } from '@testing-library/vue'
+
 import NodeLibrarySidebarTabV2 from './NodeLibrarySidebarTabV2.vue'
 
 vi.mock('@vueuse/core', async () => {
@@ -91,8 +92,8 @@ describe('NodeLibrarySidebarTabV2', () => {
     vi.clearAllMocks()
   })
 
-  function mountComponent() {
-    return mount(NodeLibrarySidebarTabV2, {
+  function renderComponent() {
+    return render(NodeLibrarySidebarTabV2, {
       global: {
         plugins: [createTestingPinia({ stubActions: false }), i18n],
         stubs: {
@@ -103,25 +104,23 @@ describe('NodeLibrarySidebarTabV2', () => {
   }
 
   it('should render with tabs', () => {
-    const wrapper = mountComponent()
+    renderComponent()
 
-    const triggers = wrapper.findAll('[role="tab"]')
+    const triggers = screen.getAllByRole('tab')
     expect(triggers).toHaveLength(3)
   })
 
   it('should render search box', () => {
-    const wrapper = mountComponent()
+    renderComponent()
 
-    expect(wrapper.find('[data-testid="search-box"]').exists()).toBe(true)
+    expect(screen.getByTestId('search-box')).toBeInTheDocument()
   })
 
   it('should render only the selected panel', () => {
-    const wrapper = mountComponent()
+    renderComponent()
 
-    expect(wrapper.find('[data-testid="essential-panel"]').exists()).toBe(true)
-    expect(wrapper.find('[data-testid="all-panel"]').exists()).toBe(false)
-    expect(wrapper.find('[data-testid="blueprints-panel"]').exists()).toBe(
-      false
-    )
+    expect(screen.getByTestId('essential-panel')).toBeInTheDocument()
+    expect(screen.queryByTestId('all-panel')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('blueprints-panel')).not.toBeInTheDocument()
   })
 })
diff --git a/src/components/sidebar/tabs/nodeLibrary/AllNodesPanel.vue b/src/components/sidebar/tabs/nodeLibrary/AllNodesPanel.vue
index e8f90a4d54..4bbbf04836 100644
--- a/src/components/sidebar/tabs/nodeLibrary/AllNodesPanel.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/AllNodesPanel.vue
@@ -12,7 +12,6 @@
       :root="favoritesRoot"
       show-context-menu
       @node-click="(node) => emit('nodeClick', node)"
-      @add-to-favorites="handleAddToFavorites"
     />
     <div v-else class="px-6 py-2 text-xs text-muted-background">
       {{ $t('sideToolbar.nodeLibraryTab.noBookmarkedNodes') }}
@@ -31,7 +30,6 @@
         :root="section.root"
         show-context-menu
         @node-click="(node) => emit('nodeClick', node)"
-        @add-to-favorites="handleAddToFavorites"
       />
     </div>
   </div>
@@ -71,12 +69,4 @@ const hasFavorites = computed(
 const favoritesRoot = computed(() =>
   fillNodeInfo(nodeBookmarkStore.bookmarkedRoot)
 )
-
-function handleAddToFavorites(
-  node: RenderedTreeExplorerNode<ComfyNodeDefImpl>
-) {
-  if (node.data) {
-    nodeBookmarkStore.toggleBookmark(node.data)
-  }
-}
 </script>
diff --git a/src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.test.ts b/src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.test.ts
index bd0f6af5b0..87e6290184 100644
--- a/src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.test.ts
+++ b/src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.test.ts
@@ -1,4 +1,5 @@
-import { mount } from '@vue/test-utils'
+import { fireEvent, render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
@@ -25,7 +26,9 @@ vi.mock('@/composables/node/useNodeDragToCanvas', () => ({
 }))
 
 vi.mock('@/components/node/NodePreviewCard.vue', () => ({
-  default: { template: '<div class="mock-preview" />' }
+  default: {
+    template: '<div class="mock-preview" data-testid="node-preview" />'
+  }
 }))
 
 describe('EssentialNodeCard', () => {
@@ -52,69 +55,93 @@ describe('EssentialNodeCard', () => {
     }
   }
 
-  function mountComponent(
+  function renderComponent(
     node: RenderedTreeExplorerNode<ComfyNodeDefImpl> = createMockNode()
   ) {
-    return mount(EssentialNodeCard, {
-      props: { node },
+    const onClick = vi.fn()
+    const user = userEvent.setup()
+    const { container } = render(EssentialNodeCard, {
+      props: { node, onClick },
       global: {
         stubs: {
           Teleport: true
         }
       }
     })
+    return { user, onClick, container }
+  }
+
+  function getCard(container: Element) {
+    /* eslint-disable testing-library/no-container, testing-library/no-node-access */
+    const card = container.querySelector('[data-node-name]') as HTMLElement
+    /* eslint-enable testing-library/no-container, testing-library/no-node-access */
+    return card
   }
 
   describe('rendering', () => {
     it('should display the node display_name', () => {
-      const wrapper = mountComponent(
-        createMockNode({ display_name: 'Load Image' })
-      )
-      expect(wrapper.text()).toContain('Load Image')
+      renderComponent(createMockNode({ display_name: 'Load Image' }))
+      expect(screen.getAllByText('Load Image').length).toBeGreaterThan(0)
     })
 
     it('should set data-node-name attribute', () => {
-      const wrapper = mountComponent(
+      const { container } = renderComponent(
         createMockNode({ display_name: 'Save Image' })
       )
-      const card = wrapper.find('[data-node-name]')
-      expect(card.attributes('data-node-name')).toBe('Save Image')
+      /* eslint-disable testing-library/no-container, testing-library/no-node-access */
+      const card = container.querySelector('[data-node-name]')
+      /* eslint-enable testing-library/no-container, testing-library/no-node-access */
+      expect(card).toHaveAttribute('data-node-name', 'Save Image')
     })
 
     it('should be draggable', () => {
-      const wrapper = mountComponent()
-      const card = wrapper.find('[draggable]')
-      expect(card.attributes('draggable')).toBe('true')
+      const { container } = renderComponent()
+      /* eslint-disable testing-library/no-container, testing-library/no-node-access */
+      const card = container.querySelector('[draggable]')
+      /* eslint-enable testing-library/no-container, testing-library/no-node-access */
+      expect(card).toHaveAttribute('draggable', 'true')
     })
   })
 
   describe('icon generation', () => {
     it('should use override icon for LoadImage', () => {
-      const wrapper = mountComponent(createMockNode({ name: 'LoadImage' }))
-      const icon = wrapper.find('i')
-      expect(icon.classes()).toContain('icon-s1.3-[lucide--image-up]')
+      const { container } = renderComponent(
+        createMockNode({ name: 'LoadImage' })
+      )
+      /* eslint-disable testing-library/no-container, testing-library/no-node-access */
+      const icon = container.querySelector('i')
+      /* eslint-enable testing-library/no-container, testing-library/no-node-access */
+      expect(icon).toHaveClass('icon-s1.3-[lucide--image-up]')
     })
 
     it('should use override icon for SaveImage', () => {
-      const wrapper = mountComponent(createMockNode({ name: 'SaveImage' }))
-      const icon = wrapper.find('i')
-      expect(icon.classes()).toContain('icon-s1.3-[lucide--image-down]')
+      const { container } = renderComponent(
+        createMockNode({ name: 'SaveImage' })
+      )
+      /* eslint-disable testing-library/no-container, testing-library/no-node-access */
+      const icon = container.querySelector('i')
+      /* eslint-enable testing-library/no-container, testing-library/no-node-access */
+      expect(icon).toHaveClass('icon-s1.3-[lucide--image-down]')
     })
 
     it('should use override icon for ImageCrop', () => {
-      const wrapper = mountComponent(createMockNode({ name: 'ImageCrop' }))
-      const icon = wrapper.find('i')
-      expect(icon.classes()).toContain('icon-s1.3-[lucide--crop]')
+      const { container } = renderComponent(
+        createMockNode({ name: 'ImageCrop' })
+      )
+      /* eslint-disable testing-library/no-container, testing-library/no-node-access */
+      const icon = container.querySelector('i')
+      /* eslint-enable testing-library/no-container, testing-library/no-node-access */
+      expect(icon).toHaveClass('icon-s1.3-[lucide--crop]')
     })
 
     it('should use kebab-case for complex node names', () => {
-      const wrapper = mountComponent(
+      const { container } = renderComponent(
         createMockNode({ name: 'RecraftRemoveBackgroundNode' })
       )
-      const icon = wrapper.find('i')
-      expect(icon.classes()).toContain(
-        'icon-[comfy--recraft-remove-background-node]'
-      )
+      /* eslint-disable testing-library/no-container, testing-library/no-node-access */
+      const icon = container.querySelector('i')
+      /* eslint-enable testing-library/no-container, testing-library/no-node-access */
+      expect(icon).toHaveClass('icon-[comfy--recraft-remove-background-node]')
     })
 
     it('should use default node icon when nodeDef has no name', () => {
@@ -126,21 +153,22 @@ describe('EssentialNodeCard', () => {
         totalLeaves: 1,
         data: undefined
       }
-      const wrapper = mountComponent(node)
-      const icon = wrapper.find('i')
-      expect(icon.classes()).toContain('icon-[comfy--node]')
+      const { container } = renderComponent(node)
+      /* eslint-disable testing-library/no-container, testing-library/no-node-access */
+      const icon = container.querySelector('i')
+      /* eslint-enable testing-library/no-container, testing-library/no-node-access */
+      expect(icon).toHaveClass('icon-[comfy--node]')
     })
   })
 
   describe('events', () => {
     it('should emit click event when clicked', async () => {
       const node = createMockNode()
-      const wrapper = mountComponent(node)
+      const { user, onClick, container } = renderComponent(node)
 
-      await wrapper.find('div').trigger('click')
+      await user.click(getCard(container))
 
-      expect(wrapper.emitted('click')).toBeTruthy()
-      expect(wrapper.emitted('click')?.[0]).toEqual([node])
+      expect(onClick).toHaveBeenCalledWith(node)
     })
 
     it('should not emit click when nodeDef is undefined', async () => {
@@ -152,29 +180,27 @@ describe('EssentialNodeCard', () => {
         totalLeaves: 1,
         data: undefined
       }
-      const wrapper = mountComponent(node)
+      const { user, onClick, container } = renderComponent(node)
 
-      await wrapper.find('div').trigger('click')
+      await user.click(getCard(container))
 
-      expect(wrapper.emitted('click')).toBeFalsy()
+      expect(onClick).not.toHaveBeenCalled()
     })
   })
 
   describe('drag and drop', () => {
     it('should call startDrag on dragstart', async () => {
-      const wrapper = mountComponent()
-      const card = wrapper.find('div')
+      const { container } = renderComponent()
 
-      await card.trigger('dragstart')
+      await fireEvent.dragStart(getCard(container))
 
       expect(mockStartDrag).toHaveBeenCalled()
     })
 
     it('should call handleNativeDrop on dragend', async () => {
-      const wrapper = mountComponent()
-      const card = wrapper.find('div')
+      const { container } = renderComponent()
 
-      await card.trigger('dragend')
+      await fireEvent.dragEnd(getCard(container))
 
       expect(mockHandleNativeDrop).toHaveBeenCalled()
     })
@@ -182,23 +208,21 @@ describe('EssentialNodeCard', () => {
 
   describe('hover preview', () => {
     it('should show preview on mouseenter', async () => {
-      const wrapper = mountComponent()
-      const card = wrapper.find('div')
+      const { user, container } = renderComponent()
 
-      await card.trigger('mouseenter')
+      await user.hover(getCard(container))
 
-      expect(wrapper.find('teleport-stub').exists()).toBe(true)
+      expect(screen.getByTestId('node-preview')).toBeInTheDocument()
     })
 
     it('should hide preview after mouseleave', async () => {
-      const wrapper = mountComponent()
-      const card = wrapper.find('div')
+      const { user, container } = renderComponent()
 
-      await card.trigger('mouseenter')
-      expect(wrapper.find('teleport-stub').exists()).toBe(true)
+      await user.hover(getCard(container))
+      expect(screen.getByTestId('node-preview')).toBeInTheDocument()
 
-      await card.trigger('mouseleave')
-      expect(wrapper.find('teleport-stub').exists()).toBe(false)
+      await user.unhover(getCard(container))
+      expect(screen.queryByTestId('node-preview')).not.toBeInTheDocument()
     })
   })
 })
diff --git a/src/components/sidebar/tabs/nodeLibrary/EssentialNodesPanel.test.ts b/src/components/sidebar/tabs/nodeLibrary/EssentialNodesPanel.test.ts
index cccd1b1f06..c1c55fa197 100644
--- a/src/components/sidebar/tabs/nodeLibrary/EssentialNodesPanel.test.ts
+++ b/src/components/sidebar/tabs/nodeLibrary/EssentialNodesPanel.test.ts
@@ -1,5 +1,5 @@
-import { flushPromises, mount } from '@vue/test-utils'
-import { nextTick, ref } from 'vue'
+import { render, waitFor } from '@testing-library/vue'
+import { ref } from 'vue'
 import { describe, expect, it, vi } from 'vitest'
 
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
@@ -80,7 +80,7 @@ describe('EssentialNodesPanel', () => {
     }
   }
 
-  function mountComponent(
+  function renderComponent(
     root = createMockRoot(),
     expandedKeys: string[] = [],
     flatNodes: RenderedTreeExplorerNode<ComfyNodeDefImpl>[] = []
@@ -93,7 +93,7 @@ describe('EssentialNodesPanel', () => {
         return { root, flatNodes, keys }
       }
     }
-    return mount(WrapperComponent, {
+    return render(WrapperComponent, {
       global: {
         stubs: {
           Teleport: true,
@@ -112,6 +112,9 @@ describe('EssentialNodesPanel', () => {
           },
           CollapsibleContent: {
             template: '<div class="collapsible-content"><slot /></div>'
+          },
+          EssentialNodeCard: {
+            template: '<div data-testid="essential-node-card" />'
           }
         }
       }
@@ -120,54 +123,61 @@ describe('EssentialNodesPanel', () => {
 
   describe('folder rendering', () => {
     it('should render all top-level folders', () => {
-      const wrapper = mountComponent()
-      const triggers = wrapper.findAll('.collapsible-trigger')
-      expect(triggers).toHaveLength(3)
+      const { container } = renderComponent()
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      expect(container.querySelectorAll('.collapsible-trigger')).toHaveLength(3)
     })
 
     it('should display folder labels', () => {
-      const wrapper = mountComponent()
-      expect(wrapper.text()).toContain('images')
-      expect(wrapper.text()).toContain('video')
-      expect(wrapper.text()).toContain('audio')
+      const { container } = renderComponent()
+      expect(container.textContent).toContain('images')
+      expect(container.textContent).toContain('video')
+      expect(container.textContent).toContain('audio')
     })
   })
 
   describe('default expansion', () => {
     it('should expand all folders by default when expandedKeys is empty', async () => {
-      const wrapper = mountComponent(createMockRoot(), [])
-      await nextTick()
-      await flushPromises()
-      await nextTick()
+      const { container } = renderComponent(createMockRoot(), [])
 
-      const roots = wrapper.findAll('.collapsible-root')
-      expect(roots[0].attributes('data-state')).toBe('open')
-      expect(roots[1].attributes('data-state')).toBe('open')
-      expect(roots[2].attributes('data-state')).toBe('open')
+      await waitFor(() => {
+        // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+        const roots = container.querySelectorAll('.collapsible-root')
+        expect(roots).toHaveLength(3)
+        expect(roots[0].getAttribute('data-state')).toBe('open')
+        expect(roots[1].getAttribute('data-state')).toBe('open')
+        expect(roots[2].getAttribute('data-state')).toBe('open')
+      })
     })
 
     it('should respect provided expandedKeys', async () => {
-      const wrapper = mountComponent(createMockRoot(), ['folder-audio'])
-      await nextTick()
+      const { container } = renderComponent(createMockRoot(), ['folder-audio'])
 
-      const roots = wrapper.findAll('.collapsible-root')
-      expect(roots[0].attributes('data-state')).toBe('closed')
-      expect(roots[1].attributes('data-state')).toBe('closed')
-      expect(roots[2].attributes('data-state')).toBe('open')
+      await waitFor(() => {
+        // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+        const roots = container.querySelectorAll('.collapsible-root')
+        expect(roots).toHaveLength(3)
+        expect(roots[0].getAttribute('data-state')).toBe('closed')
+        expect(roots[1].getAttribute('data-state')).toBe('closed')
+        expect(roots[2].getAttribute('data-state')).toBe('open')
+      })
     })
 
     it('should expand all provided keys', async () => {
-      const wrapper = mountComponent(createMockRoot(), [
+      const { container } = renderComponent(createMockRoot(), [
         'folder-images',
         'folder-video',
         'folder-audio'
       ])
-      await nextTick()
 
-      const roots = wrapper.findAll('.collapsible-root')
-      expect(roots[0].attributes('data-state')).toBe('open')
-      expect(roots[1].attributes('data-state')).toBe('open')
-      expect(roots[2].attributes('data-state')).toBe('open')
+      await waitFor(() => {
+        // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+        const roots = container.querySelectorAll('.collapsible-root')
+        expect(roots).toHaveLength(3)
+        expect(roots[0].getAttribute('data-state')).toBe('open')
+        expect(roots[1].getAttribute('data-state')).toBe('open')
+        expect(roots[2].getAttribute('data-state')).toBe('open')
+      })
     })
   })
 
@@ -187,21 +197,24 @@ describe('EssentialNodesPanel', () => {
         ]
       }
 
-      const wrapper = mountComponent(root, [])
-      await nextTick()
-      await flushPromises()
-      await nextTick()
+      const { container } = renderComponent(root, [])
 
-      const roots = wrapper.findAll('.collapsible-root')
-      expect(roots).toHaveLength(1)
-      expect(roots[0].attributes('data-state')).toBe('open')
+      await waitFor(() => {
+        // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+        const roots = container.querySelectorAll('.collapsible-root')
+        expect(roots).toHaveLength(1)
+        expect(roots[0].getAttribute('data-state')).toBe('open')
+      })
     })
   })
 
   describe('node cards', () => {
     it('should render node cards for each node in expanded folders', () => {
-      const wrapper = mountComponent(createMockRoot(), ['folder-images'])
-      const cards = wrapper.findAllComponents({ name: 'EssentialNodeCard' })
+      const { container } = renderComponent(createMockRoot(), ['folder-images'])
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      const cards = container.querySelectorAll(
+        '[data-testid="essential-node-card"]'
+      )
       expect(cards.length).toBeGreaterThanOrEqual(2)
     })
   })
@@ -213,11 +226,15 @@ describe('EssentialNodesPanel', () => {
         createMockNode('LoadImage'),
         createMockNode('SaveImage')
       ]
-      const wrapper = mountComponent(createMockRoot(), [], flatNodes)
+      const { container } = renderComponent(createMockRoot(), [], flatNodes)
 
-      expect(wrapper.findAll('.collapsible-root')).toHaveLength(0)
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      expect(container.querySelectorAll('.collapsible-root')).toHaveLength(0)
 
-      const cards = wrapper.findAllComponents({ name: 'EssentialNodeCard' })
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      const cards = container.querySelectorAll(
+        '[data-testid="essential-node-card"]'
+      )
       expect(cards).toHaveLength(3)
     })
   })
diff --git a/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue b/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
index 854947b0ef..0f2e37eb9b 100644
--- a/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
@@ -25,7 +25,7 @@
           :aria-label="$t('g.delete')"
           @click.stop="deleteBlueprint"
         >
-          <i class="icon-[lucide--trash-2] size-3.5" />
+          <i class="icon-[lucide--trash-2] size-4" />
         </Button>
         <Button
           variant="muted-textonly"
@@ -33,7 +33,7 @@
           :aria-label="$t('g.edit')"
           @click.stop="editBlueprint"
         >
-          <i class="icon-[lucide--square-pen] size-3.5" />
+          <i class="icon-[lucide--square-pen] size-4" />
         </Button>
       </template>
       <template v-else #actions>
diff --git a/src/components/sidebar/tabs/queue/MediaLightbox.test.ts b/src/components/sidebar/tabs/queue/MediaLightbox.test.ts
index 7d7bbd8f79..f159a79fb9 100644
--- a/src/components/sidebar/tabs/queue/MediaLightbox.test.ts
+++ b/src/components/sidebar/tabs/queue/MediaLightbox.test.ts
@@ -1,10 +1,9 @@
-import { enableAutoUnmount, mount } from '@vue/test-utils'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
-enableAutoUnmount(afterEach)
-
 import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type { ResultItemImpl } from '@/stores/queueStore'
 
@@ -99,16 +98,13 @@ describe('MediaLightbox', () => {
   ]
 
   beforeEach(() => {
-    document.body.innerHTML = '<div id="app"></div>'
-  })
-
-  afterEach(() => {
     document.body.innerHTML = ''
-    vi.restoreAllMocks()
   })
 
-  const mountGallery = (props = {}) => {
-    return mount(MediaLightbox, {
+  const renderGallery = (props = {}) => {
+    const onUpdateActiveIndex = vi.fn()
+    const user = userEvent.setup()
+    const { rerender, container } = render(MediaLightbox, {
       global: {
         plugins: [i18n],
         components: {
@@ -123,107 +119,118 @@ describe('MediaLightbox', () => {
       props: {
         allGalleryItems: mockGalleryItems as ResultItemImpl[],
         activeIndex: 0,
+        'onUpdate:activeIndex': onUpdateActiveIndex,
         ...props
       },
-      attachTo: document.getElementById('app') || undefined
+      container: document.body.appendChild(document.createElement('div'))
     })
+    return { user, onUpdateActiveIndex, rerender, container }
   }
 
   it('renders overlay with role="dialog" and aria-modal', async () => {
-    const wrapper = mountGallery()
+    renderGallery()
     await nextTick()
 
-    const dialog = wrapper.find('[role="dialog"]')
-    expect(dialog.exists()).toBe(true)
-    expect(dialog.attributes('aria-modal')).toBe('true')
+    const dialog = screen.getByRole('dialog')
+    expect(dialog).toBeInTheDocument()
+    expect(dialog).toHaveAttribute('aria-modal', 'true')
   })
 
   it('shows navigation buttons when multiple items', async () => {
-    const wrapper = mountGallery()
+    renderGallery()
     await nextTick()
 
-    expect(wrapper.find('[aria-label="Previous"]').exists()).toBe(true)
-    expect(wrapper.find('[aria-label="Next"]').exists()).toBe(true)
+    expect(screen.getByLabelText('Previous')).toBeInTheDocument()
+    expect(screen.getByLabelText('Next')).toBeInTheDocument()
   })
 
   it('hides navigation buttons for single item', async () => {
-    const wrapper = mountGallery({
+    renderGallery({
       allGalleryItems: [mockGalleryItems[0]] as ResultItemImpl[]
     })
     await nextTick()
 
-    expect(wrapper.find('[aria-label="Previous"]').exists()).toBe(false)
-    expect(wrapper.find('[aria-label="Next"]').exists()).toBe(false)
+    expect(screen.queryByLabelText('Previous')).not.toBeInTheDocument()
+    expect(screen.queryByLabelText('Next')).not.toBeInTheDocument()
   })
 
   it('shows gallery when activeIndex changes from -1', async () => {
-    const wrapper = mountGallery({ activeIndex: -1 })
+    const { rerender, container } = renderGallery({ activeIndex: -1 })
 
-    expect(wrapper.find('[data-mask]').exists()).toBe(false)
+    /* eslint-disable testing-library/no-container, testing-library/no-node-access */
+    expect(container.querySelector('[data-mask]')).not.toBeInTheDocument()
+    /* eslint-enable testing-library/no-container, testing-library/no-node-access */
 
-    await wrapper.setProps({ activeIndex: 0 })
+    await rerender({
+      allGalleryItems: mockGalleryItems as ResultItemImpl[],
+      activeIndex: 0
+    })
     await nextTick()
 
-    expect(wrapper.find('[data-mask]').exists()).toBe(true)
+    /* eslint-disable testing-library/no-container, testing-library/no-node-access */
+    expect(container.querySelector('[data-mask]')).toBeInTheDocument()
+    /* eslint-enable testing-library/no-container, testing-library/no-node-access */
   })
 
   it('emits update:activeIndex with -1 when close button clicked', async () => {
-    const wrapper = mountGallery()
+    const { user, onUpdateActiveIndex } = renderGallery()
     await nextTick()
 
-    await wrapper.find('[aria-label="Close"]').trigger('click')
+    await user.click(screen.getByLabelText('Close'))
     await nextTick()
 
-    expect(wrapper.emitted('update:activeIndex')?.[0]).toEqual([-1])
+    expect(onUpdateActiveIndex).toHaveBeenCalledWith(-1)
   })
 
+  /* eslint-disable testing-library/prefer-user-event -- keyDown on dialog element for navigation, not text input */
   describe('keyboard navigation', () => {
     it('navigates to next item on ArrowRight', async () => {
-      const wrapper = mountGallery({ activeIndex: 0 })
+      const { onUpdateActiveIndex } = renderGallery({ activeIndex: 0 })
       await nextTick()
 
-      await wrapper
-        .find('[role="dialog"]')
-        .trigger('keydown', { key: 'ArrowRight' })
+      await fireEvent.keyDown(screen.getByRole('dialog'), {
+        key: 'ArrowRight'
+      })
       await nextTick()
 
-      expect(wrapper.emitted('update:activeIndex')?.[0]).toEqual([1])
+      expect(onUpdateActiveIndex).toHaveBeenCalledWith(1)
     })
 
     it('navigates to previous item on ArrowLeft', async () => {
-      const wrapper = mountGallery({ activeIndex: 1 })
+      const { onUpdateActiveIndex } = renderGallery({ activeIndex: 1 })
       await nextTick()
 
-      await wrapper
-        .find('[role="dialog"]')
-        .trigger('keydown', { key: 'ArrowLeft' })
+      await fireEvent.keyDown(screen.getByRole('dialog'), {
+        key: 'ArrowLeft'
+      })
       await nextTick()
 
-      expect(wrapper.emitted('update:activeIndex')?.[0]).toEqual([0])
+      expect(onUpdateActiveIndex).toHaveBeenCalledWith(0)
     })
 
     it('wraps to last item on ArrowLeft from first', async () => {
-      const wrapper = mountGallery({ activeIndex: 0 })
+      const { onUpdateActiveIndex } = renderGallery({ activeIndex: 0 })
       await nextTick()
 
-      await wrapper
-        .find('[role="dialog"]')
-        .trigger('keydown', { key: 'ArrowLeft' })
+      await fireEvent.keyDown(screen.getByRole('dialog'), {
+        key: 'ArrowLeft'
+      })
       await nextTick()
 
-      expect(wrapper.emitted('update:activeIndex')?.[0]).toEqual([2])
+      expect(onUpdateActiveIndex).toHaveBeenCalledWith(2)
     })
 
     it('closes gallery on Escape', async () => {
-      const wrapper = mountGallery({ activeIndex: 0 })
+      const { onUpdateActiveIndex } = renderGallery({ activeIndex: 0 })
       await nextTick()
 
-      await wrapper
-        .find('[role="dialog"]')
-        .trigger('keydown', { key: 'Escape' })
+      await fireEvent.keyDown(screen.getByRole('dialog'), {
+        key: 'Escape'
+      })
       await nextTick()
 
-      expect(wrapper.emitted('update:activeIndex')?.[0]).toEqual([-1])
+      expect(onUpdateActiveIndex).toHaveBeenCalledWith(-1)
     })
   })
+  /* eslint-enable testing-library/prefer-user-event */
 })
diff --git a/src/components/templates/thumbnails/CompareSliderThumbnail.test.ts b/src/components/templates/thumbnails/CompareSliderThumbnail.test.ts
index 681d812384..372c3e1a93 100644
--- a/src/components/templates/thumbnails/CompareSliderThumbnail.test.ts
+++ b/src/components/templates/thumbnails/CompareSliderThumbnail.test.ts
@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
 import { describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
 
@@ -30,8 +30,8 @@ vi.mock('@vueuse/core', () => ({
 }))
 
 describe('CompareSliderThumbnail', () => {
-  const mountThumbnail = (props = {}) => {
-    return mount(CompareSliderThumbnail, {
+  const renderThumbnail = (props = {}) => {
+    return render(CompareSliderThumbnail, {
       props: {
         baseImageSrc: '/base-image.jpg',
         overlayImageSrc: '/overlay-image.jpg',
@@ -43,42 +43,35 @@ describe('CompareSliderThumbnail', () => {
   }
 
   it('renders both base and overlay images', () => {
-    const wrapper = mountThumbnail()
-    const lazyImages = wrapper.findAllComponents({ name: 'LazyImage' })
-    expect(lazyImages.length).toBe(2)
-    expect(lazyImages[0].props('src')).toBe('/base-image.jpg')
-    expect(lazyImages[1].props('src')).toBe('/overlay-image.jpg')
+    renderThumbnail()
+    const images = screen.getAllByRole('img')
+    expect(images).toHaveLength(2)
+    expect(images[0]).toHaveAttribute('src', '/base-image.jpg')
+    expect(images[1]).toHaveAttribute('src', '/overlay-image.jpg')
   })
 
   it('applies correct alt text to both images', () => {
-    const wrapper = mountThumbnail({ alt: 'Custom Alt Text' })
-    const lazyImages = wrapper.findAllComponents({ name: 'LazyImage' })
-    expect(lazyImages[0].props('alt')).toBe('Custom Alt Text')
-    expect(lazyImages[1].props('alt')).toBe('Custom Alt Text')
+    renderThumbnail({ alt: 'Custom Alt Text' })
+    const images = screen.getAllByRole('img')
+    expect(images[0]).toHaveAttribute('alt', 'Custom Alt Text')
+    expect(images[1]).toHaveAttribute('alt', 'Custom Alt Text')
   })
 
   it('applies clip-path style to overlay image', () => {
-    const wrapper = mountThumbnail()
-    const overlayLazyImage = wrapper.findAllComponents({ name: 'LazyImage' })[1]
-    const imageStyle = overlayLazyImage.props('imageStyle')
-    expect(imageStyle.clipPath).toContain('inset')
+    renderThumbnail()
+    const images = screen.getAllByRole('img')
+    expect(images[1].style.clipPath).toContain('inset')
   })
 
   it('renders slider divider', () => {
-    const wrapper = mountThumbnail()
-    const divider = wrapper.find('.bg-white\\/30')
-    expect(divider.exists()).toBe(true)
+    renderThumbnail()
+    const divider = screen.getByTestId('compare-slider-divider')
+    expect(divider).toBeDefined()
   })
 
   it('positions slider based on default value', () => {
-    const wrapper = mountThumbnail()
-    const divider = wrapper.find('.bg-white\\/30')
-    expect(divider.attributes('style')).toContain('left: 50%')
-  })
-
-  it('passes isHovered prop to BaseThumbnail', () => {
-    const wrapper = mountThumbnail({ isHovered: true })
-    const baseThumbnail = wrapper.findComponent({ name: 'BaseThumbnail' })
-    expect(baseThumbnail.props('isHovered')).toBe(true)
+    renderThumbnail()
+    const divider = screen.getByTestId('compare-slider-divider')
+    expect(divider.style.left).toBe('50%')
   })
 })
diff --git a/src/components/templates/thumbnails/CompareSliderThumbnail.vue b/src/components/templates/thumbnails/CompareSliderThumbnail.vue
index 7272727787..24c5a49d76 100644
--- a/src/components/templates/thumbnails/CompareSliderThumbnail.vue
+++ b/src/components/templates/thumbnails/CompareSliderThumbnail.vue
@@ -23,6 +23,7 @@
         }"
       />
       <div
+        data-testid="compare-slider-divider"
         class="pointer-events-none absolute inset-y-0 z-10 w-0.5 bg-white/30 backdrop-blur-sm"
         :style="{
           left: `${sliderPosition}%`
diff --git a/src/components/templates/thumbnails/HoverDissolveThumbnail.test.ts b/src/components/templates/thumbnails/HoverDissolveThumbnail.test.ts
index 168ccac3bd..8031053f88 100644
--- a/src/components/templates/thumbnails/HoverDissolveThumbnail.test.ts
+++ b/src/components/templates/thumbnails/HoverDissolveThumbnail.test.ts
@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
 import { describe, expect, it, vi } from 'vitest'
 
 import HoverDissolveThumbnail from '@/components/templates/thumbnails/HoverDissolveThumbnail.vue'
@@ -21,8 +21,8 @@ vi.mock('@/components/common/LazyImage.vue', () => ({
 }))
 
 describe('HoverDissolveThumbnail', () => {
-  const mountThumbnail = (props = {}) => {
-    return mount(HoverDissolveThumbnail, {
+  const renderThumbnail = (props = {}) => {
+    return render(HoverDissolveThumbnail, {
       props: {
         baseImageSrc: '/base-image.jpg',
         overlayImageSrc: '/overlay-image.jpg',
@@ -35,75 +35,31 @@ describe('HoverDissolveThumbnail', () => {
   }
 
   it('renders both base and overlay images', () => {
-    const wrapper = mountThumbnail()
-    const lazyImages = wrapper.findAllComponents({ name: 'LazyImage' })
-    expect(lazyImages.length).toBe(2)
-    expect(lazyImages[0].props('src')).toBe('/base-image.jpg')
-    expect(lazyImages[1].props('src')).toBe('/overlay-image.jpg')
+    renderThumbnail()
+    const images = screen.getAllByRole('img')
+    expect(images).toHaveLength(2)
+    expect(images[0]).toHaveAttribute('src', '/base-image.jpg')
+    expect(images[1]).toHaveAttribute('src', '/overlay-image.jpg')
   })
 
   it('applies correct alt text to both images', () => {
-    const wrapper = mountThumbnail({ alt: 'Custom Alt Text' })
-    const lazyImages = wrapper.findAllComponents({ name: 'LazyImage' })
-    expect(lazyImages[0].props('alt')).toBe('Custom Alt Text')
-    expect(lazyImages[1].props('alt')).toBe('Custom Alt Text')
+    renderThumbnail({ alt: 'Custom Alt Text' })
+    const images = screen.getAllByRole('img')
+    expect(images[0]).toHaveAttribute('alt', 'Custom Alt Text')
+    expect(images[1]).toHaveAttribute('alt', 'Custom Alt Text')
   })
 
   it('makes overlay image visible when hovered', () => {
-    const wrapper = mountThumbnail({ isHovered: true })
-    const overlayLazyImage = wrapper.findAllComponents({ name: 'LazyImage' })[1]
-    const imageClass = overlayLazyImage.props('imageClass')
-    const classString = Array.isArray(imageClass)
-      ? imageClass.join(' ')
-      : imageClass
-    expect(classString).toContain('opacity-100')
-    expect(classString).not.toContain('opacity-0')
+    renderThumbnail({ isHovered: true })
+    const images = screen.getAllByRole('img')
+    expect(images[1]).toHaveClass('opacity-100')
+    expect(images[1]).not.toHaveClass('opacity-0')
   })
 
   it('makes overlay image hidden when not hovered', () => {
-    const wrapper = mountThumbnail({ isHovered: false })
-    const overlayLazyImage = wrapper.findAllComponents({ name: 'LazyImage' })[1]
-    const imageClass = overlayLazyImage.props('imageClass')
-    const classString = Array.isArray(imageClass)
-      ? imageClass.join(' ')
-      : imageClass
-    expect(classString).toContain('opacity-0')
-    expect(classString).not.toContain('opacity-100')
-  })
-
-  it('passes isHovered prop to BaseThumbnail', () => {
-    const wrapper = mountThumbnail({ isHovered: true })
-    const baseThumbnail = wrapper.findComponent({ name: 'BaseThumbnail' })
-    expect(baseThumbnail.props('isHovered')).toBe(true)
-  })
-
-  it('applies transition classes to overlay image', () => {
-    const wrapper = mountThumbnail()
-    const overlayLazyImage = wrapper.findAllComponents({ name: 'LazyImage' })[1]
-    const imageClass = overlayLazyImage.props('imageClass')
-    const classString = Array.isArray(imageClass)
-      ? imageClass.join(' ')
-      : imageClass
-    expect(classString).toContain('transition-opacity')
-    expect(classString).toContain('duration-300')
-  })
-
-  it('applies correct positioning to both images', () => {
-    const wrapper = mountThumbnail()
-    const lazyImages = wrapper.findAllComponents({ name: 'LazyImage' })
-
-    // Check base image
-    const baseImageClass = lazyImages[0].props('imageClass')
-    const baseClassList = Array.isArray(baseImageClass)
-      ? baseImageClass
-      : baseImageClass.split(' ')
-    expect(baseClassList).toContain('size-full')
-
-    // Check overlay image
-    const overlayImageClass = lazyImages[1].props('imageClass')
-    const overlayClassList = Array.isArray(overlayImageClass)
-      ? overlayImageClass
-      : overlayImageClass.split(' ')
-    expect(overlayClassList).toContain('size-full')
+    renderThumbnail({ isHovered: false })
+    const images = screen.getAllByRole('img')
+    expect(images[1]).toHaveClass('opacity-0')
+    expect(images[1]).not.toHaveClass('opacity-100')
   })
 })
diff --git a/src/components/topbar/CurrentUserPopoverLegacy.test.ts b/src/components/topbar/CurrentUserPopoverLegacy.test.ts
index c36bf77a3b..e5fd0469b6 100644
--- a/src/components/topbar/CurrentUserPopoverLegacy.test.ts
+++ b/src/components/topbar/CurrentUserPopoverLegacy.test.ts
@@ -1,5 +1,5 @@
-import type { VueWrapper } from '@vue/test-utils'
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
 import { h } from 'vue'
 import { createI18n } from 'vue-i18n'
@@ -196,32 +196,39 @@ describe('CurrentUserPopoverLegacy', () => {
     mockAuthStoreState.isFetchingBalance = false
   })
 
-  const mountComponent = (): VueWrapper => {
+  function renderComponent() {
     const i18n = createI18n({
       legacy: false,
       locale: 'en',
       messages: { en: enMessages }
     })
+    const onClose = vi.fn()
+    const user = userEvent.setup()
 
-    return mount(CurrentUserPopoverLegacy, {
+    render(CurrentUserPopoverLegacy, {
       global: {
         plugins: [i18n],
         stubs: {
           Divider: true
         }
+      },
+      props: {
+        onClose
       }
     })
+
+    return { user, onClose }
   }
 
   it('renders user information correctly', () => {
-    const wrapper = mountComponent()
+    renderComponent()
 
-    expect(wrapper.text()).toContain('Test User')
-    expect(wrapper.text()).toContain('test@example.com')
+    expect(screen.getByText('Test User')).toBeInTheDocument()
+    expect(screen.getByText('test@example.com')).toBeInTheDocument()
   })
 
   it('calls formatCreditsFromCents with correct parameters and displays formatted credits', () => {
-    const wrapper = mountComponent()
+    renderComponent()
 
     expect(formatCreditsFromCents).toHaveBeenCalledWith({
       cents: 100_000,
@@ -232,103 +239,72 @@ describe('CurrentUserPopoverLegacy', () => {
       }
     })
 
-    // Verify the formatted credit string (1000) is rendered in the DOM
-    expect(wrapper.text()).toContain('1000')
+    expect(screen.getByText('1000')).toBeInTheDocument()
   })
 
   it('renders logout menu item with correct text', () => {
-    const wrapper = mountComponent()
+    renderComponent()
 
-    const logoutItem = wrapper.find('[data-testid="logout-menu-item"]')
-    expect(logoutItem.exists()).toBe(true)
-    expect(wrapper.text()).toContain('Log Out')
+    expect(screen.getByTestId('logout-menu-item')).toBeInTheDocument()
+    expect(screen.getByText('Log Out')).toBeInTheDocument()
   })
 
   it('opens user settings and emits close event when settings item is clicked', async () => {
-    const wrapper = mountComponent()
+    const { user, onClose } = renderComponent()
 
-    const settingsItem = wrapper.find('[data-testid="user-settings-menu-item"]')
-    expect(settingsItem.exists()).toBe(true)
+    expect(screen.getByTestId('user-settings-menu-item')).toBeInTheDocument()
 
-    await settingsItem.trigger('click')
+    await user.click(screen.getByTestId('user-settings-menu-item'))
 
-    // Verify showSettingsDialog was called with 'user'
     expect(mockShowSettingsDialog).toHaveBeenCalledWith('user')
-
-    // Verify close event was emitted
-    expect(wrapper.emitted('close')).toBeTruthy()
-    expect(wrapper.emitted('close')!.length).toBe(1)
+    expect(onClose).toHaveBeenCalledTimes(1)
   })
 
   it('calls logout function and emits close event when logout item is clicked', async () => {
-    const wrapper = mountComponent()
+    const { user, onClose } = renderComponent()
 
-    const logoutItem = wrapper.find('[data-testid="logout-menu-item"]')
-    expect(logoutItem.exists()).toBe(true)
+    expect(screen.getByTestId('logout-menu-item')).toBeInTheDocument()
 
-    await logoutItem.trigger('click')
+    await user.click(screen.getByTestId('logout-menu-item'))
 
-    // Verify handleSignOut was called
     expect(mockHandleSignOut).toHaveBeenCalled()
-
-    // Verify close event was emitted
-    expect(wrapper.emitted('close')).toBeTruthy()
-    expect(wrapper.emitted('close')!.length).toBe(1)
+    expect(onClose).toHaveBeenCalledTimes(1)
   })
 
   it('opens API pricing docs and emits close event when partner nodes item is clicked', async () => {
-    const wrapper = mountComponent()
+    const { user, onClose } = renderComponent()
 
-    const partnerNodesItem = wrapper.find(
-      '[data-testid="partner-nodes-menu-item"]'
-    )
-    expect(partnerNodesItem.exists()).toBe(true)
+    expect(screen.getByTestId('partner-nodes-menu-item')).toBeInTheDocument()
 
-    await partnerNodesItem.trigger('click')
+    await user.click(screen.getByTestId('partner-nodes-menu-item'))
 
-    // Verify window.open was called with the correct URL
     expect(window.open).toHaveBeenCalledWith(
       'https://docs.comfy.org/tutorials/partner-nodes/pricing',
       '_blank'
     )
-
-    // Verify close event was emitted
-    expect(wrapper.emitted('close')).toBeTruthy()
-    expect(wrapper.emitted('close')!.length).toBe(1)
+    expect(onClose).toHaveBeenCalledTimes(1)
   })
 
   it('opens top-up dialog and emits close event when top-up button is clicked', async () => {
-    const wrapper = mountComponent()
+    const { user, onClose } = renderComponent()
 
-    const topUpButton = wrapper.find('[data-testid="add-credits-button"]')
-    expect(topUpButton.exists()).toBe(true)
+    expect(screen.getByTestId('add-credits-button')).toBeInTheDocument()
 
-    await topUpButton.trigger('click')
+    await user.click(screen.getByTestId('add-credits-button'))
 
-    // Verify showTopUpCreditsDialog was called
     expect(mockShowTopUpCreditsDialog).toHaveBeenCalled()
-
-    // Verify close event was emitted
-    expect(wrapper.emitted('close')).toBeTruthy()
-    expect(wrapper.emitted('close')!.length).toBe(1)
+    expect(onClose).toHaveBeenCalledTimes(1)
   })
 
   it('opens subscription dialog and emits close event when plans & pricing item is clicked', async () => {
-    const wrapper = mountComponent()
+    const { user, onClose } = renderComponent()
 
-    const plansPricingItem = wrapper.find(
-      '[data-testid="plans-pricing-menu-item"]'
-    )
-    expect(plansPricingItem.exists()).toBe(true)
+    expect(screen.getByTestId('plans-pricing-menu-item')).toBeInTheDocument()
 
-    await plansPricingItem.trigger('click')
+    await user.click(screen.getByTestId('plans-pricing-menu-item'))
 
-    // Verify showPricingTable was called
     expect(mockShowPricingTable).toHaveBeenCalled()
-
-    // Verify close event was emitted
-    expect(wrapper.emitted('close')).toBeTruthy()
-    expect(wrapper.emitted('close')!.length).toBe(1)
+    expect(onClose).toHaveBeenCalledTimes(1)
   })
 
   describe('effective_balance_micros handling', () => {
@@ -339,7 +315,7 @@ describe('CurrentUserPopoverLegacy', () => {
         currency: 'usd'
       }
 
-      const wrapper = mountComponent()
+      renderComponent()
 
       expect(formatCreditsFromCents).toHaveBeenCalledWith({
         cents: 150_000,
@@ -349,7 +325,7 @@ describe('CurrentUserPopoverLegacy', () => {
           maximumFractionDigits: 2
         }
       })
-      expect(wrapper.text()).toContain('1500')
+      expect(screen.getByText('1500')).toBeInTheDocument()
     })
 
     it('uses effective_balance_micros when zero', () => {
@@ -359,7 +335,7 @@ describe('CurrentUserPopoverLegacy', () => {
         currency: 'usd'
       }
 
-      const wrapper = mountComponent()
+      renderComponent()
 
       expect(formatCreditsFromCents).toHaveBeenCalledWith({
         cents: 0,
@@ -369,7 +345,7 @@ describe('CurrentUserPopoverLegacy', () => {
           maximumFractionDigits: 2
         }
       })
-      expect(wrapper.text()).toContain('0')
+      expect(screen.getByText('0')).toBeInTheDocument()
     })
 
     it('uses effective_balance_micros when negative', () => {
@@ -379,7 +355,7 @@ describe('CurrentUserPopoverLegacy', () => {
         currency: 'usd'
       }
 
-      const wrapper = mountComponent()
+      renderComponent()
 
       expect(formatCreditsFromCents).toHaveBeenCalledWith({
         cents: -50_000,
@@ -389,7 +365,7 @@ describe('CurrentUserPopoverLegacy', () => {
           maximumFractionDigits: 2
         }
       })
-      expect(wrapper.text()).toContain('-500')
+      expect(screen.getByText('-500')).toBeInTheDocument()
     })
 
     it('falls back to amount_micros when effective_balance_micros is missing', () => {
@@ -398,7 +374,7 @@ describe('CurrentUserPopoverLegacy', () => {
         currency: 'usd'
       }
 
-      const wrapper = mountComponent()
+      renderComponent()
 
       expect(formatCreditsFromCents).toHaveBeenCalledWith({
         cents: 100_000,
@@ -408,7 +384,7 @@ describe('CurrentUserPopoverLegacy', () => {
           maximumFractionDigits: 2
         }
       })
-      expect(wrapper.text()).toContain('1000')
+      expect(screen.getByText('1000')).toBeInTheDocument()
     })
 
     it('falls back to 0 when both effective_balance_micros and amount_micros are missing', () => {
@@ -416,7 +392,7 @@ describe('CurrentUserPopoverLegacy', () => {
         currency: 'usd'
       }
 
-      const wrapper = mountComponent()
+      renderComponent()
 
       expect(formatCreditsFromCents).toHaveBeenCalledWith({
         cents: 0,
@@ -426,7 +402,7 @@ describe('CurrentUserPopoverLegacy', () => {
           maximumFractionDigits: 2
         }
       })
-      expect(wrapper.text()).toContain('0')
+      expect(screen.getByText('0')).toBeInTheDocument()
     })
   })
 
@@ -436,53 +412,47 @@ describe('CurrentUserPopoverLegacy', () => {
     })
 
     it('hides credits section', () => {
-      const wrapper = mountComponent()
-      expect(wrapper.find('[data-testid="add-credits-button"]').exists()).toBe(
-        false
-      )
+      renderComponent()
+      expect(screen.queryByTestId('add-credits-button')).not.toBeInTheDocument()
       expect(
-        wrapper.find('[data-testid="upgrade-to-add-credits-button"]').exists()
-      ).toBe(false)
+        screen.queryByTestId('upgrade-to-add-credits-button')
+      ).not.toBeInTheDocument()
     })
 
     it('hides subscribe button', () => {
-      const wrapper = mountComponent()
-      expect(wrapper.text()).not.toContain('Subscribe Button')
+      renderComponent()
+      expect(screen.queryByText('Subscribe Button')).not.toBeInTheDocument()
     })
 
     it('hides partner nodes menu item', () => {
-      const wrapper = mountComponent()
+      renderComponent()
       expect(
-        wrapper.find('[data-testid="partner-nodes-menu-item"]').exists()
-      ).toBe(false)
+        screen.queryByTestId('partner-nodes-menu-item')
+      ).not.toBeInTheDocument()
     })
 
     it('hides plans & pricing menu item', () => {
-      const wrapper = mountComponent()
+      renderComponent()
       expect(
-        wrapper.find('[data-testid="plans-pricing-menu-item"]').exists()
-      ).toBe(false)
+        screen.queryByTestId('plans-pricing-menu-item')
+      ).not.toBeInTheDocument()
     })
 
     it('hides manage plan menu item', () => {
-      const wrapper = mountComponent()
+      renderComponent()
       expect(
-        wrapper.find('[data-testid="manage-plan-menu-item"]').exists()
-      ).toBe(false)
+        screen.queryByTestId('manage-plan-menu-item')
+      ).not.toBeInTheDocument()
     })
 
     it('still shows user settings menu item', () => {
-      const wrapper = mountComponent()
-      expect(
-        wrapper.find('[data-testid="user-settings-menu-item"]').exists()
-      ).toBe(true)
+      renderComponent()
+      expect(screen.getByTestId('user-settings-menu-item')).toBeInTheDocument()
     })
 
     it('still shows logout menu item', () => {
-      const wrapper = mountComponent()
-      expect(wrapper.find('[data-testid="logout-menu-item"]').exists()).toBe(
-        true
-      )
+      renderComponent()
+      expect(screen.getByTestId('logout-menu-item')).toBeInTheDocument()
     })
   })
 })
diff --git a/src/components/topbar/TopbarSubscribeButton.test.ts b/src/components/topbar/TopbarSubscribeButton.test.ts
index c31559c9f8..36d172a742 100644
--- a/src/components/topbar/TopbarSubscribeButton.test.ts
+++ b/src/components/topbar/TopbarSubscribeButton.test.ts
@@ -1,7 +1,8 @@
-import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
+import { render, screen } from '@testing-library/vue'
+
 import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
 import TopbarSubscribeButton from './TopbarSubscribeButton.vue'
@@ -46,14 +47,14 @@ vi.mock('firebase/auth', () => ({
   signOut: vi.fn()
 }))
 
-function mountComponent() {
+function renderComponent() {
   const i18n = createI18n({
     legacy: false,
     locale: 'en',
     messages: { en: enMessages }
   })
 
-  return mount(TopbarSubscribeButton, {
+  return render(TopbarSubscribeButton, {
     global: {
       plugins: [i18n]
     }
@@ -63,17 +64,15 @@ function mountComponent() {
 describe('TopbarSubscribeButton', () => {
   it('renders on cloud when isFreeTier is true', () => {
     mockIsCloud.value = true
-    const wrapper = mountComponent()
-    expect(
-      wrapper.find('[data-testid="topbar-subscribe-button"]').exists()
-    ).toBe(true)
+    renderComponent()
+    expect(screen.getByTestId('topbar-subscribe-button')).toBeInTheDocument()
   })
 
   it('hides on non-cloud distribution', () => {
     mockIsCloud.value = false
-    const wrapper = mountComponent()
+    renderComponent()
     expect(
-      wrapper.find('[data-testid="topbar-subscribe-button"]').exists()
-    ).toBe(false)
+      screen.queryByTestId('topbar-subscribe-button')
+    ).not.toBeInTheDocument()
   })
 })
diff --git a/src/components/widget/SampleModelSelector.vue b/src/components/widget/SampleModelSelector.vue
index c3903c0085..8758218555 100644
--- a/src/components/widget/SampleModelSelector.vue
+++ b/src/components/widget/SampleModelSelector.vue
@@ -99,13 +99,13 @@
                 </Button>
               </template>
               <template #bottom-right>
-                <SquareChip label="png" />
-                <SquareChip label="1.2 MB" />
-                <SquareChip label="LoRA">
+                <Tag label="png" shape="overlay" />
+                <Tag label="1.2 MB" shape="overlay" />
+                <Tag label="LoRA" shape="overlay">
                   <template #icon>
                     <i class="icon-[lucide--folder]" />
                   </template>
-                </SquareChip>
+                </Tag>
               </template>
             </CardTop>
           </template>
@@ -129,7 +129,7 @@ import MoreButton from '@/components/button/MoreButton.vue'
 import CardBottom from '@/components/card/CardBottom.vue'
 import CardContainer from '@/components/card/CardContainer.vue'
 import CardTop from '@/components/card/CardTop.vue'
-import SquareChip from '@/components/chip/SquareChip.vue'
+import Tag from '@/components/chip/Tag.vue'
 import SearchInput from '@/components/ui/search-input/SearchInput.vue'
 import MultiSelect from '@/components/input/MultiSelect.vue'
 import SingleSelect from '@/components/input/SingleSelect.vue'
diff --git a/src/components/widget/layout/BaseModalLayout.stories.ts b/src/components/widget/layout/BaseModalLayout.stories.ts
index a8f4dc57f4..fb70e5a133 100644
--- a/src/components/widget/layout/BaseModalLayout.stories.ts
+++ b/src/components/widget/layout/BaseModalLayout.stories.ts
@@ -6,7 +6,7 @@ import MoreButton from '@/components/button/MoreButton.vue'
 import CardBottom from '@/components/card/CardBottom.vue'
 import CardContainer from '@/components/card/CardContainer.vue'
 import CardTop from '@/components/card/CardTop.vue'
-import SquareChip from '@/components/chip/SquareChip.vue'
+import Tag from '@/components/chip/Tag.vue'
 import MultiSelect from '@/components/input/MultiSelect.vue'
 import SearchInput from '@/components/ui/search-input/SearchInput.vue'
 import SingleSelect from '@/components/input/SingleSelect.vue'
@@ -76,7 +76,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
     CardContainer,
     CardTop,
     CardBottom,
-    SquareChip
+    Tag
   },
   setup() {
     const t = (k: string) => k
@@ -276,13 +276,13 @@ const createStoryTemplate = (args: StoryArgs) => ({
                     </Button>
                   </template>
                   <template #bottom-right>
-                    <SquareChip label="png" />
-                    <SquareChip label="1.2 MB" />
-                    <SquareChip label="LoRA">
+                    <Tag label="png" />
+                    <Tag label="1.2 MB" />
+                    <Tag label="LoRA">
                       <template #icon>
                         <i class="icon-[lucide--folder] size-3" />
                       </template>
-                    </SquareChip>
+                    </Tag>
                   </template>
                 </CardTop>
               </template>
@@ -392,13 +392,13 @@ const createStoryTemplate = (args: StoryArgs) => ({
                     </Button>
                   </template>
                   <template #bottom-right>
-                    <SquareChip label="png" />
-                    <SquareChip label="1.2 MB" />
-                    <SquareChip label="LoRA">
+                    <Tag label="png" />
+                    <Tag label="1.2 MB" />
+                    <Tag label="LoRA">
                       <template #icon>
                         <i class="icon-[lucide--folder] size-3" />
                       </template>
-                    </SquareChip>
+                    </Tag>
                   </template>
                 </CardTop>
               </template>
diff --git a/src/composables/element/useDomClipping.test.ts b/src/composables/element/useDomClipping.test.ts
index 0900d0d24b..c7d7cedf69 100644
--- a/src/composables/element/useDomClipping.test.ts
+++ b/src/composables/element/useDomClipping.test.ts
@@ -1,3 +1,4 @@
+import { fromPartial } from '@total-typescript/shoehorn'
 import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
 
 import { useDomClipping } from './useDomClipping'
@@ -8,7 +9,7 @@ function createMockElement(rect: {
   width: number
   height: number
 }): HTMLElement {
-  return {
+  return fromPartial<HTMLElement>({
     getBoundingClientRect: vi.fn(
       () =>
         ({
@@ -20,7 +21,7 @@ function createMockElement(rect: {
           toJSON: () => ({})
         }) as DOMRect
     )
-  } as unknown as HTMLElement
+  })
 }
 
 function createMockCanvas(rect: {
@@ -29,7 +30,7 @@ function createMockCanvas(rect: {
   width: number
   height: number
 }): HTMLCanvasElement {
-  return {
+  return fromPartial<HTMLCanvasElement>({
     getBoundingClientRect: vi.fn(
       () =>
         ({
@@ -41,7 +42,7 @@ function createMockCanvas(rect: {
           toJSON: () => ({})
         }) as DOMRect
     )
-  } as unknown as HTMLCanvasElement
+  })
 }
 
 describe('useDomClipping', () => {
diff --git a/src/composables/graph/useCanvasRefresh.ts b/src/composables/graph/useCanvasRefresh.ts
index ddb3b4670c..2bc2ff942d 100644
--- a/src/composables/graph/useCanvasRefresh.ts
+++ b/src/composables/graph/useCanvasRefresh.ts
@@ -13,7 +13,7 @@ export function useCanvasRefresh() {
     canvasStore.canvas?.setDirty(true, true)
     canvasStore.canvas?.graph?.afterChange()
     canvasStore.canvas?.emitAfterChange()
-    workflowStore.activeWorkflow?.changeTracker?.checkState()
+    workflowStore.activeWorkflow?.changeTracker?.captureCanvasState()
   }
 
   return {
diff --git a/src/composables/graph/useErrorClearingHooks.test.ts b/src/composables/graph/useErrorClearingHooks.test.ts
index ea82714a84..1c2329274d 100644
--- a/src/composables/graph/useErrorClearingHooks.test.ts
+++ b/src/composables/graph/useErrorClearingHooks.test.ts
@@ -1,5 +1,6 @@
-import { setActivePinia } from 'pinia'
 import { createTestingPinia } from '@pinia/testing'
+import { fromAny } from '@total-typescript/shoehorn'
+import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { installErrorClearingHooks } from '@/composables/graph/useErrorClearingHooks'
@@ -8,7 +9,15 @@ import {
   createTestSubgraph,
   createTestSubgraphNode
 } from '@/lib/litegraph/src/subgraph/__fixtures__/subgraphHelpers'
-import { NodeSlotType } from '@/lib/litegraph/src/types/globalEnums'
+import {
+  LGraphEventMode,
+  NodeSlotType
+} from '@/lib/litegraph/src/types/globalEnums'
+import * as missingMediaScan from '@/platform/missingMedia/missingMediaScan'
+import { useMissingMediaStore } from '@/platform/missingMedia/missingMediaStore'
+import * as missingModelScan from '@/platform/missingModel/missingModelScan'
+import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
+import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import { app } from '@/scripts/app'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 
@@ -194,7 +203,7 @@ describe('Widget change error clearing via onWidgetChanged', () => {
 
     const store = useExecutionErrorStore()
     vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(
-      undefined as unknown as LGraph
+      fromAny<LGraph, unknown>(undefined)
     )
     store.lastNodeErrors = {
       [String(node.id)]: {
@@ -356,6 +365,474 @@ describe('installErrorClearingHooks lifecycle', () => {
   })
 })
 
+describe('onNodeRemoved clears missing asset errors by execution ID', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    vi.spyOn(app, 'isGraphReady', 'get').mockReturnValue(false)
+  })
+
+  it('removes root-level node missing model error using its local id', () => {
+    const graph = new LGraph()
+    const node = new LGraphNode('CheckpointLoaderSimple')
+    graph.add(node)
+
+    vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graph)
+    installErrorClearingHooks(graph)
+
+    const modelStore = useMissingModelStore()
+    modelStore.setMissingModels([
+      fromAny<
+        Parameters<typeof modelStore.setMissingModels>[0][number],
+        unknown
+      >({
+        nodeId: String(node.id),
+        nodeType: 'CheckpointLoaderSimple',
+        widgetName: 'ckpt_name',
+        isAssetSupported: false,
+        name: 'model.safetensors',
+        isMissing: true
+      })
+    ])
+
+    graph.remove(node)
+
+    expect(modelStore.missingModelCandidates).toBeNull()
+  })
+
+  it('removes subgraph interior node missing model error using parentId:nodeId', () => {
+    // Regression: node.graph is nulled before onNodeRemoved fires, so
+    // getExecutionIdByNode returned null and removal fell back to the
+    // local node id. Errors stored under "parentId:nodeId" were never
+    // removed for subgraph interior nodes.
+    const subgraph = createTestSubgraph()
+    const interiorNode = new LGraphNode('CheckpointLoaderSimple')
+    subgraph.add(interiorNode)
+
+    const subgraphNode = createTestSubgraphNode(subgraph, { id: 65 })
+    const rootGraph = subgraphNode.graph as LGraph
+    rootGraph.add(subgraphNode)
+
+    vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(rootGraph)
+    // Hooks are installed on whichever graph is currently active in
+    // the canvas; when the user is inside the subgraph, that is the
+    // graph whose onNodeRemoved fires for interior deletions.
+    installErrorClearingHooks(subgraph)
+
+    const interiorExecId = `${subgraphNode.id}:${interiorNode.id}`
+    const modelStore = useMissingModelStore()
+    modelStore.setMissingModels([
+      fromAny<
+        Parameters<typeof modelStore.setMissingModels>[0][number],
+        unknown
+      >({
+        nodeId: interiorExecId,
+        nodeType: 'CheckpointLoaderSimple',
+        widgetName: 'ckpt_name',
+        isAssetSupported: false,
+        name: 'model.safetensors',
+        isMissing: true
+      })
+    ])
+
+    subgraph.remove(interiorNode)
+
+    expect(modelStore.missingModelCandidates).toBeNull()
+  })
+
+  it('removes subgraph interior node missing media and missing node errors', () => {
+    const subgraph = createTestSubgraph()
+    const interiorNode = new LGraphNode('LoadImage')
+    subgraph.add(interiorNode)
+
+    const subgraphNode = createTestSubgraphNode(subgraph, { id: 65 })
+    const rootGraph = subgraphNode.graph as LGraph
+    rootGraph.add(subgraphNode)
+
+    vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(rootGraph)
+    installErrorClearingHooks(subgraph)
+
+    const interiorExecId = `${subgraphNode.id}:${interiorNode.id}`
+
+    const mediaStore = useMissingMediaStore()
+    mediaStore.setMissingMedia([
+      fromAny<
+        Parameters<typeof mediaStore.setMissingMedia>[0][number],
+        unknown
+      >({
+        nodeId: interiorExecId,
+        nodeType: 'LoadImage',
+        widgetName: 'image',
+        mediaType: 'image',
+        name: 'cat.png',
+        isMissing: true
+      })
+    ])
+
+    const nodesStore = useMissingNodesErrorStore()
+    nodesStore.surfaceMissingNodes([
+      {
+        type: 'LoadImage',
+        nodeId: interiorExecId,
+        cnrId: undefined,
+        isReplaceable: false,
+        replacement: undefined
+      }
+    ])
+
+    subgraph.remove(interiorNode)
+
+    expect(mediaStore.missingMediaCandidates).toBeNull()
+    expect(nodesStore.missingNodesError).toBeNull()
+  })
+})
+
+describe('realtime scan verifies pending cloud candidates', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    vi.spyOn(app, 'isGraphReady', 'get').mockReturnValue(false)
+  })
+
+  it('un-bypass path surfaces pending model candidates after verification', async () => {
+    const graph = new LGraph()
+    const node = new LGraphNode('CheckpointLoaderSimple')
+    graph.add(node)
+    vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graph)
+
+    // Cloud mode returns candidates with isMissing: undefined until
+    // verifyAssetSupportedCandidates resolves them against the assets store.
+    vi.spyOn(missingModelScan, 'scanNodeModelCandidates').mockReturnValue([
+      {
+        nodeId: String(node.id),
+        nodeType: 'CheckpointLoaderSimple',
+        widgetName: 'ckpt_name',
+        isAssetSupported: true,
+        name: 'cloud_model.safetensors',
+        isMissing: undefined
+      }
+    ])
+    const verifySpy = vi
+      .spyOn(missingModelScan, 'verifyAssetSupportedCandidates')
+      .mockImplementation(async (candidates) => {
+        for (const c of candidates) c.isMissing = true
+      })
+    vi.spyOn(missingMediaScan, 'scanNodeMediaCandidates').mockReturnValue([])
+
+    installErrorClearingHooks(graph)
+
+    // Simulate un-bypass (BYPASS → NEVER_BY_USER is not active; use 0 = active)
+    node.mode = LGraphEventMode.ALWAYS
+    graph.onTrigger?.({
+      type: 'node:property:changed',
+      nodeId: node.id,
+      property: 'mode',
+      oldValue: LGraphEventMode.BYPASS,
+      newValue: LGraphEventMode.ALWAYS
+    })
+
+    await vi.waitFor(() => {
+      expect(verifySpy).toHaveBeenCalledOnce()
+    })
+    await vi.waitFor(() => {
+      const store = useMissingModelStore()
+      expect(store.missingModelCandidates).toHaveLength(1)
+      expect(store.missingModelCandidates![0].name).toBe(
+        'cloud_model.safetensors'
+      )
+    })
+  })
+
+  it('un-bypass path surfaces pending media candidates after verification', async () => {
+    const graph = new LGraph()
+    const node = new LGraphNode('LoadImage')
+    graph.add(node)
+    vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graph)
+
+    vi.spyOn(missingModelScan, 'scanNodeModelCandidates').mockReturnValue([])
+    vi.spyOn(missingMediaScan, 'scanNodeMediaCandidates').mockReturnValue([
+      {
+        nodeId: String(node.id),
+        nodeType: 'LoadImage',
+        widgetName: 'image',
+        mediaType: 'image',
+        name: 'cloud_image.png',
+        isMissing: undefined
+      }
+    ])
+    const verifySpy = vi
+      .spyOn(missingMediaScan, 'verifyCloudMediaCandidates')
+      .mockImplementation(async (candidates) => {
+        for (const c of candidates) c.isMissing = true
+      })
+
+    installErrorClearingHooks(graph)
+
+    node.mode = LGraphEventMode.ALWAYS
+    graph.onTrigger?.({
+      type: 'node:property:changed',
+      nodeId: node.id,
+      property: 'mode',
+      oldValue: LGraphEventMode.BYPASS,
+      newValue: LGraphEventMode.ALWAYS
+    })
+
+    await vi.waitFor(() => {
+      expect(verifySpy).toHaveBeenCalledOnce()
+    })
+    await vi.waitFor(() => {
+      const store = useMissingMediaStore()
+      expect(store.missingMediaCandidates).toHaveLength(1)
+      expect(store.missingMediaCandidates![0].name).toBe('cloud_image.png')
+    })
+  })
+
+  it('does not add candidates that remain confirmed-present after verification', async () => {
+    const graph = new LGraph()
+    const node = new LGraphNode('CheckpointLoaderSimple')
+    graph.add(node)
+    vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graph)
+
+    vi.spyOn(missingModelScan, 'scanNodeModelCandidates').mockReturnValue([
+      {
+        nodeId: String(node.id),
+        nodeType: 'CheckpointLoaderSimple',
+        widgetName: 'ckpt_name',
+        isAssetSupported: true,
+        name: 'present.safetensors',
+        isMissing: undefined
+      }
+    ])
+    vi.spyOn(
+      missingModelScan,
+      'verifyAssetSupportedCandidates'
+    ).mockImplementation(async (candidates) => {
+      for (const c of candidates) c.isMissing = false
+    })
+    vi.spyOn(missingMediaScan, 'scanNodeMediaCandidates').mockReturnValue([])
+
+    installErrorClearingHooks(graph)
+
+    node.mode = LGraphEventMode.ALWAYS
+    graph.onTrigger?.({
+      type: 'node:property:changed',
+      nodeId: node.id,
+      property: 'mode',
+      oldValue: LGraphEventMode.BYPASS,
+      newValue: LGraphEventMode.ALWAYS
+    })
+
+    await new Promise((r) => setTimeout(r, 0))
+    expect(useMissingModelStore().missingModelCandidates).toBeNull()
+  })
+})
+
+describe('realtime verification staleness guards', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks()
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    vi.spyOn(app, 'isGraphReady', 'get').mockReturnValue(false)
+  })
+
+  it('skips adding verified model when node was bypassed before verification resolved', async () => {
+    const graph = new LGraph()
+    const node = new LGraphNode('CheckpointLoaderSimple')
+    graph.add(node)
+    vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graph)
+
+    vi.spyOn(missingModelScan, 'scanNodeModelCandidates').mockReturnValue([
+      {
+        nodeId: String(node.id),
+        nodeType: 'CheckpointLoaderSimple',
+        widgetName: 'ckpt_name',
+        isAssetSupported: true,
+        name: 'stale_model.safetensors',
+        isMissing: undefined
+      }
+    ])
+    let resolveVerify: (() => void) | undefined
+    const verifyPromise = new Promise<void>((r) => (resolveVerify = r))
+    const verifySpy = vi
+      .spyOn(missingModelScan, 'verifyAssetSupportedCandidates')
+      .mockImplementation(async (candidates) => {
+        await verifyPromise
+        for (const c of candidates) c.isMissing = true
+      })
+    vi.spyOn(missingMediaScan, 'scanNodeMediaCandidates').mockReturnValue([])
+
+    installErrorClearingHooks(graph)
+
+    // Un-bypass: kicks off verification (still pending)
+    node.mode = LGraphEventMode.ALWAYS
+    graph.onTrigger?.({
+      type: 'node:property:changed',
+      nodeId: node.id,
+      property: 'mode',
+      oldValue: LGraphEventMode.BYPASS,
+      newValue: LGraphEventMode.ALWAYS
+    })
+    await vi.waitFor(() => expect(verifySpy).toHaveBeenCalledOnce())
+
+    // Bypass again before verification resolves
+    node.mode = LGraphEventMode.BYPASS
+
+    // Verification now resolves with isMissing: true, but staleness
+    // check must drop the add because node is currently bypassed.
+    resolveVerify!()
+    await new Promise((r) => setTimeout(r, 0))
+
+    expect(useMissingModelStore().missingModelCandidates).toBeNull()
+  })
+
+  it('skips adding verified media when node is deleted before verification resolved', async () => {
+    const graph = new LGraph()
+    const node = new LGraphNode('LoadImage')
+    graph.add(node)
+    vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graph)
+
+    vi.spyOn(missingModelScan, 'scanNodeModelCandidates').mockReturnValue([])
+    vi.spyOn(missingMediaScan, 'scanNodeMediaCandidates').mockReturnValue([
+      {
+        nodeId: String(node.id),
+        nodeType: 'LoadImage',
+        widgetName: 'image',
+        mediaType: 'image',
+        name: 'deleted_image.png',
+        isMissing: undefined
+      }
+    ])
+    let resolveVerify: (() => void) | undefined
+    const verifyPromise = new Promise<void>((r) => (resolveVerify = r))
+    const verifySpy = vi
+      .spyOn(missingMediaScan, 'verifyCloudMediaCandidates')
+      .mockImplementation(async (candidates) => {
+        await verifyPromise
+        for (const c of candidates) c.isMissing = true
+      })
+
+    installErrorClearingHooks(graph)
+
+    node.mode = LGraphEventMode.ALWAYS
+    graph.onTrigger?.({
+      type: 'node:property:changed',
+      nodeId: node.id,
+      property: 'mode',
+      oldValue: LGraphEventMode.BYPASS,
+      newValue: LGraphEventMode.ALWAYS
+    })
+    await vi.waitFor(() => expect(verifySpy).toHaveBeenCalledOnce())
+
+    // Delete the node before verification completes
+    graph.remove(node)
+
+    resolveVerify!()
+    await new Promise((r) => setTimeout(r, 0))
+
+    expect(useMissingMediaStore().missingMediaCandidates).toBeNull()
+  })
+
+  it('skips adding verified model when rootGraph switched before verification resolved', async () => {
+    // Workflow A has a pending candidate on node id=1. A is replaced
+    // by workflow B (fresh LGraph, potentially has a node with the
+    // same id). Late verification from A must not leak into B.
+    const graphA = new LGraph()
+    const nodeA = new LGraphNode('CheckpointLoaderSimple')
+    graphA.add(nodeA)
+    const rootSpy = vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graphA)
+
+    vi.spyOn(missingModelScan, 'scanNodeModelCandidates').mockReturnValue([
+      {
+        nodeId: String(nodeA.id),
+        nodeType: 'CheckpointLoaderSimple',
+        widgetName: 'ckpt_name',
+        isAssetSupported: true,
+        name: 'stale_from_A.safetensors',
+        isMissing: undefined
+      }
+    ])
+    let resolveVerify: (() => void) | undefined
+    const verifyPromise = new Promise<void>((r) => (resolveVerify = r))
+    const verifySpy = vi
+      .spyOn(missingModelScan, 'verifyAssetSupportedCandidates')
+      .mockImplementation(async (candidates) => {
+        await verifyPromise
+        for (const c of candidates) c.isMissing = true
+      })
+    vi.spyOn(missingMediaScan, 'scanNodeMediaCandidates').mockReturnValue([])
+
+    installErrorClearingHooks(graphA)
+
+    nodeA.mode = LGraphEventMode.ALWAYS
+    graphA.onTrigger?.({
+      type: 'node:property:changed',
+      nodeId: nodeA.id,
+      property: 'mode',
+      oldValue: LGraphEventMode.BYPASS,
+      newValue: LGraphEventMode.ALWAYS
+    })
+    await vi.waitFor(() => expect(verifySpy).toHaveBeenCalledOnce())
+
+    // Workflow swap: app.rootGraph now points at graphB.
+    const graphB = new LGraph()
+    const nodeB = new LGraphNode('CheckpointLoaderSimple')
+    graphB.add(nodeB)
+    rootSpy.mockReturnValue(graphB)
+
+    resolveVerify!()
+    await new Promise((r) => setTimeout(r, 0))
+
+    // A's verification finished but rootGraph is now B — the late
+    // result must not be added to the store.
+    expect(useMissingModelStore().missingModelCandidates).toBeNull()
+  })
+})
+
+describe('scan skips interior of bypassed subgraph containers', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks()
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    vi.spyOn(app, 'isGraphReady', 'get').mockReturnValue(false)
+  })
+
+  it('does not surface interior missing model when entering a bypassed subgraph', async () => {
+    // Repro: root has a bypassed subgraph container, interior node is
+    // itself active. useGraphNodeManager replays `onNodeAdded` for each
+    // interior node on subgraph entry, which previously reached
+    // scanSingleNodeErrors without an ancestor check and resurfaced the
+    // error that the initial pipeline post-filter had correctly dropped.
+    const subgraph = createTestSubgraph()
+    const interiorNode = new LGraphNode('CheckpointLoaderSimple')
+    subgraph.add(interiorNode)
+
+    const subgraphNode = createTestSubgraphNode(subgraph, { id: 65 })
+    subgraphNode.mode = LGraphEventMode.BYPASS
+    const rootGraph = subgraphNode.graph as LGraph
+    rootGraph.add(subgraphNode)
+
+    vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(rootGraph)
+    // Any scanner output would surface the error if the ancestor guard
+    // didn't short-circuit first — return a concrete missing candidate.
+    vi.spyOn(missingModelScan, 'scanNodeModelCandidates').mockReturnValue([
+      {
+        nodeId: `${subgraphNode.id}:${interiorNode.id}`,
+        nodeType: 'CheckpointLoaderSimple',
+        widgetName: 'ckpt_name',
+        isAssetSupported: false,
+        name: 'fake.safetensors',
+        isMissing: true
+      }
+    ])
+    vi.spyOn(missingMediaScan, 'scanNodeMediaCandidates').mockReturnValue([])
+
+    installErrorClearingHooks(subgraph)
+
+    // Simulate useGraphNodeManager replaying onNodeAdded for existing
+    // interior nodes after Vue node manager init on subgraph entry.
+    subgraph.onNodeAdded?.(interiorNode)
+    await new Promise((r) => setTimeout(r, 0))
+
+    expect(useMissingModelStore().missingModelCandidates).toBeNull()
+  })
+})
+
 describe('clearWidgetRelatedErrors parameter routing', () => {
   beforeEach(() => {
     setActivePinia(createTestingPinia({ stubActions: false }))
diff --git a/src/composables/graph/useErrorClearingHooks.ts b/src/composables/graph/useErrorClearingHooks.ts
index 9f9be0b642..88b1fbc04d 100644
--- a/src/composables/graph/useErrorClearingHooks.ts
+++ b/src/composables/graph/useErrorClearingHooks.ts
@@ -8,12 +8,42 @@
 import { useChainCallback } from '@/composables/functional/useChainCallback'
 import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import { resolveConcretePromotedWidget } from '@/core/graph/subgraph/resolveConcretePromotedWidget'
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
-import { NodeSlotType } from '@/lib/litegraph/src/types/globalEnums'
+import {
+  LGraphEventMode,
+  NodeSlotType
+} from '@/lib/litegraph/src/types/globalEnums'
+import type { LGraphTriggerEvent } from '@/lib/litegraph/src/types/graphTriggers'
+import { ChangeTracker } from '@/scripts/changeTracker'
+import { isCloud } from '@/platform/distribution/types'
+import { assetService } from '@/platform/assets/services/assetService'
+import type { MissingMediaCandidate } from '@/platform/missingMedia/types'
+import type { MissingModelCandidate } from '@/platform/missingModel/types'
+import {
+  scanNodeModelCandidates,
+  verifyAssetSupportedCandidates
+} from '@/platform/missingModel/missingModelScan'
+import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
+import {
+  scanNodeMediaCandidates,
+  verifyCloudMediaCandidates
+} from '@/platform/missingMedia/missingMediaScan'
+import { useMissingMediaStore } from '@/platform/missingMedia/missingMediaStore'
+import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
+import { useNodeReplacementStore } from '@/platform/nodeReplacement/nodeReplacementStore'
+import { getCnrIdFromNode } from '@/platform/nodeReplacement/cnrIdUtil'
 import { app } from '@/scripts/app'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
-import { getExecutionIdByNode } from '@/utils/graphTraversalUtil'
+import { useModelToNodeStore } from '@/stores/modelToNodeStore'
+import {
+  collectAllNodes,
+  getExecutionIdByNode,
+  getExecutionIdForNodeInGraph,
+  getNodeByExecutionId,
+  isAncestorPathActive
+} from '@/utils/graphTraversalUtil'
 
 function resolvePromotedExecId(
   rootGraph: LGraph,
@@ -121,6 +151,210 @@ function restoreNodeHooksRecursive(node: LGraphNode): void {
   }
 }
 
+function isNodeInactive(mode: number): boolean {
+  return mode === LGraphEventMode.NEVER || mode === LGraphEventMode.BYPASS
+}
+
+/** Scan a single node and add confirmed missing model/media to stores.
+ *  For subgraph containers, also scans all active interior nodes. */
+function scanAndAddNodeErrors(node: LGraphNode): void {
+  if (!app.rootGraph) return
+
+  if (node.isSubgraphNode?.() && node.subgraph) {
+    for (const innerNode of collectAllNodes(node.subgraph)) {
+      if (isNodeInactive(innerNode.mode)) continue
+      scanSingleNodeErrors(innerNode)
+    }
+    return
+  }
+
+  scanSingleNodeErrors(node)
+}
+
+function scanSingleNodeErrors(node: LGraphNode): void {
+  if (!app.rootGraph) return
+  // Skip when any enclosing subgraph is muted/bypassed. Callers only
+  // verify each node's own mode; entering a bypassed subgraph (via
+  // useGraphNodeManager replaying onNodeAdded for existing interior
+  // nodes) reaches this point without the ancestor check. A null
+  // execId means the node has no current graph (e.g. detached mid
+  // lifecycle) — also skip, since we cannot verify its scope.
+  const execId = getExecutionIdByNode(app.rootGraph, node)
+  if (!execId || !isAncestorPathActive(app.rootGraph, execId)) return
+
+  const modelCandidates = scanNodeModelCandidates(
+    app.rootGraph,
+    node,
+    isCloud
+      ? (nodeType, widgetName) =>
+          assetService.shouldUseAssetBrowser(nodeType, widgetName)
+      : () => false,
+    (nodeType) => useModelToNodeStore().getCategoryForNodeType(nodeType)
+  )
+  const confirmedModels = modelCandidates.filter((c) => c.isMissing === true)
+  if (confirmedModels.length) {
+    useMissingModelStore().addMissingModels(confirmedModels)
+  }
+  // Cloud scans return isMissing: undefined for asset-browser-supported
+  // widgets until async verification resolves. Without this, realtime
+  // add/un-bypass paths would silently drop those candidates.
+  const pendingModels = modelCandidates.filter((c) => c.isMissing === undefined)
+  if (pendingModels.length) {
+    void verifyAndAddPendingModels(pendingModels)
+  }
+
+  const mediaCandidates = scanNodeMediaCandidates(app.rootGraph, node, isCloud)
+  const confirmedMedia = mediaCandidates.filter((c) => c.isMissing === true)
+  if (confirmedMedia.length) {
+    useMissingMediaStore().addMissingMedia(confirmedMedia)
+  }
+  // Cloud media scans always return isMissing: undefined pending
+  // verification against the input-assets list.
+  const pendingMedia = mediaCandidates.filter((c) => c.isMissing === undefined)
+  if (pendingMedia.length) {
+    void verifyAndAddPendingMedia(pendingMedia)
+  }
+
+  // Check for missing node type
+  const originalType = node.last_serialization?.type ?? node.type ?? 'Unknown'
+  if (!(originalType in LiteGraph.registered_node_types)) {
+    const execId = getExecutionIdByNode(app.rootGraph, node)
+    if (execId) {
+      const nodeReplacementStore = useNodeReplacementStore()
+      const replacement = nodeReplacementStore.getReplacementFor(originalType)
+      const store = useMissingNodesErrorStore()
+      const existing = store.missingNodesError?.nodeTypes ?? []
+      store.surfaceMissingNodes([
+        ...existing,
+        {
+          type: originalType,
+          nodeId: execId,
+          cnrId: getCnrIdFromNode(node),
+          isReplaceable: replacement !== null,
+          replacement: replacement ?? undefined
+        }
+      ])
+    }
+  }
+}
+
+/**
+ * True when the candidate's node still exists in the current root graph
+ * and is active. Filters out late verification results for nodes that
+ * have been bypassed, deleted, or belong to a workflow that is no
+ * longer current — any of which would reintroduce stale errors.
+ */
+function isCandidateStillActive(nodeId: unknown): boolean {
+  if (!app.rootGraph || nodeId == null) return false
+  const execId = String(nodeId)
+  const node = getNodeByExecutionId(app.rootGraph, execId)
+  if (!node) return false
+  if (isNodeInactive(node.mode)) return false
+  // Also reject if any enclosing subgraph was bypassed between scan
+  // kick-off and verification resolving — mirrors the pipeline-level
+  // ancestor post-filter so realtime and initial-load paths stay
+  // symmetric.
+  return isAncestorPathActive(app.rootGraph, execId)
+}
+
+async function verifyAndAddPendingModels(
+  pending: MissingModelCandidate[]
+): Promise<void> {
+  // Capture rootGraph at scan time so a late verification for workflow
+  // A cannot leak into workflow B after a switch — execution IDs (esp.
+  // root-level like "1") collide across workflows.
+  const rootGraphAtScan = app.rootGraph
+  try {
+    await verifyAssetSupportedCandidates(pending)
+    if (app.rootGraph !== rootGraphAtScan) return
+    const verified = pending.filter(
+      (c) => c.isMissing === true && isCandidateStillActive(c.nodeId)
+    )
+    if (verified.length) useMissingModelStore().addMissingModels(verified)
+  } catch (error: unknown) {
+    console.warn('[useErrorClearingHooks] model verification failed:', error)
+  }
+}
+
+async function verifyAndAddPendingMedia(
+  pending: MissingMediaCandidate[]
+): Promise<void> {
+  const rootGraphAtScan = app.rootGraph
+  try {
+    await verifyCloudMediaCandidates(pending)
+    if (app.rootGraph !== rootGraphAtScan) return
+    const verified = pending.filter(
+      (c) => c.isMissing === true && isCandidateStillActive(c.nodeId)
+    )
+    if (verified.length) useMissingMediaStore().addMissingMedia(verified)
+  } catch (error: unknown) {
+    console.warn('[useErrorClearingHooks] media verification failed:', error)
+  }
+}
+
+function scanAddedNode(node: LGraphNode): void {
+  if (!app.rootGraph || ChangeTracker.isLoadingGraph) return
+  if (isNodeInactive(node.mode)) return
+  scanAndAddNodeErrors(node)
+}
+
+function handleNodeModeChange(
+  localGraph: LGraph,
+  nodeId: number,
+  oldMode: number,
+  newMode: number
+): void {
+  if (!app.rootGraph) return
+
+  const wasInactive = isNodeInactive(oldMode)
+  const isNowInactive = isNodeInactive(newMode)
+
+  if (wasInactive === isNowInactive) return
+
+  // Find the node by local ID in the graph that fired the event,
+  // then compute its execution ID relative to the root graph.
+  const node = localGraph.getNodeById(nodeId)
+  if (!node) return
+
+  const execId = getExecutionIdByNode(app.rootGraph, node)
+  if (!execId) return
+
+  if (isNowInactive) {
+    removeNodeErrors(node, execId)
+  } else {
+    scanAndAddNodeErrors(node)
+    if (
+      useMissingModelStore().hasMissingModels ||
+      useMissingMediaStore().hasMissingMedia ||
+      useMissingNodesErrorStore().hasMissingNodes
+    ) {
+      useExecutionErrorStore().showErrorOverlay()
+    }
+  }
+}
+
+/** Remove all missing asset errors for a node and, if it's a subgraph
+ *  container, for all interior nodes (prefix match on execution ID). */
+function removeNodeErrors(node: LGraphNode, execId: string): void {
+  const modelStore = useMissingModelStore()
+  const mediaStore = useMissingMediaStore()
+  const nodesStore = useMissingNodesErrorStore()
+
+  modelStore.removeMissingModelsByNodeId(execId)
+  mediaStore.removeMissingMediaByNodeId(execId)
+  nodesStore.removeMissingNodesByNodeId(execId)
+
+  // For subgraph containers, also remove errors from interior nodes.
+  // The trailing colon in the prefix is load-bearing: it prevents sibling
+  // IDs sharing a numeric prefix (e.g. "705" vs "70") from being matched.
+  if (node.isSubgraphNode?.() && node.subgraph) {
+    const prefix = `${execId}:`
+    modelStore.removeMissingModelsByPrefix(prefix)
+    mediaStore.removeMissingMediaByPrefix(prefix)
+    nodesStore.removeMissingNodesByPrefix(prefix)
+  }
+}
+
 export function installErrorClearingHooks(graph: LGraph): () => void {
   for (const node of graph._nodes ?? []) {
     installNodeHooksRecursive(node)
@@ -129,20 +363,54 @@ export function installErrorClearingHooks(graph: LGraph): () => void {
   const originalOnNodeAdded = graph.onNodeAdded
   graph.onNodeAdded = function (node: LGraphNode) {
     installNodeHooksRecursive(node)
+
+    // Scan pasted/duplicated nodes for missing models/media.
+    // Skip during loadGraphData (undo/redo/tab switch) — those are
+    // handled by the full pipeline or cache restore.
+    // Deferred to microtask because onNodeAdded fires before
+    // node.configure() restores widget values.
+    if (!ChangeTracker.isLoadingGraph) {
+      queueMicrotask(() => scanAddedNode(node))
+    }
+
     originalOnNodeAdded?.call(this, node)
   }
 
   const originalOnNodeRemoved = graph.onNodeRemoved
   graph.onNodeRemoved = function (node: LGraphNode) {
+    // node.graph is already null by the time onNodeRemoved fires, so
+    // derive the execution ID from the graph the hook is installed on
+    // plus node.id. For subgraph interior nodes this yields the full
+    // "parentId:...:nodeId" path that matches how missing asset errors
+    // are keyed; without this, removal falls back to the local ID and
+    // misses subgraph entries.
+    const execId = app.rootGraph
+      ? getExecutionIdForNodeInGraph(app.rootGraph, graph, node.id)
+      : String(node.id)
+    removeNodeErrors(node, execId)
     restoreNodeHooksRecursive(node)
     originalOnNodeRemoved?.call(this, node)
   }
 
+  const originalOnTrigger = graph.onTrigger
+  graph.onTrigger = (event: LGraphTriggerEvent) => {
+    if (event.type === 'node:property:changed' && event.property === 'mode') {
+      handleNodeModeChange(
+        graph,
+        event.nodeId as number,
+        event.oldValue as number,
+        event.newValue as number
+      )
+    }
+    originalOnTrigger?.(event)
+  }
+
   return () => {
     for (const node of graph._nodes ?? []) {
       restoreNodeHooksRecursive(node)
     }
     graph.onNodeAdded = originalOnNodeAdded || undefined
     graph.onNodeRemoved = originalOnNodeRemoved || undefined
+    graph.onTrigger = originalOnTrigger || undefined
   }
 }
diff --git a/src/composables/graph/useGraphHierarchy.test.ts b/src/composables/graph/useGraphHierarchy.test.ts
index c7b5a8f819..30cb8968e2 100644
--- a/src/composables/graph/useGraphHierarchy.test.ts
+++ b/src/composables/graph/useGraphHierarchy.test.ts
@@ -1,3 +1,4 @@
+import { fromAny } from '@total-typescript/shoehorn'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { Rectangle } from '@/lib/litegraph/src/infrastructure/Rectangle'
@@ -8,7 +9,6 @@ import {
   createMockLGraphNode,
   createMockLGraphGroup
 } from '@/utils/__tests__/litegraphTestUtils'
-
 import { useGraphHierarchy } from './useGraphHierarchy'
 
 vi.mock('@/renderer/core/canvas/canvasStore')
@@ -36,7 +36,10 @@ describe('useGraphHierarchy', () => {
     mockNode = createMockNode()
     mockGroups = []
 
-    mockCanvasStore = {
+    mockCanvasStore = fromAny<
+      Partial<ReturnType<typeof useCanvasStore>>,
+      unknown
+    >({
       canvas: {
         graph: {
           groups: mockGroups
@@ -51,7 +54,7 @@ describe('useGraphHierarchy', () => {
       $dispose: vi.fn(),
       _customProperties: new Set(),
       _p: {}
-    } as unknown as Partial<ReturnType<typeof useCanvasStore>>
+    })
 
     vi.mocked(useCanvasStore).mockReturnValue(
       mockCanvasStore as ReturnType<typeof useCanvasStore>
diff --git a/src/composables/graph/useGraphNodeManager.test.ts b/src/composables/graph/useGraphNodeManager.test.ts
index 268e07ec57..cb00bbfbd7 100644
--- a/src/composables/graph/useGraphNodeManager.test.ts
+++ b/src/composables/graph/useGraphNodeManager.test.ts
@@ -1,5 +1,6 @@
-import { setActivePinia } from 'pinia'
 import { createTestingPinia } from '@pinia/testing'
+import { fromAny } from '@total-typescript/shoehorn'
+import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { computed, nextTick, watch } from 'vue'
 
@@ -11,10 +12,10 @@ import {
   createTestSubgraphNode
 } from '@/lib/litegraph/src/subgraph/__fixtures__/subgraphHelpers'
 import { NodeSlotType } from '@/lib/litegraph/src/types/globalEnums'
-import { app } from '@/scripts/app'
-import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { app } from '@/scripts/app'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { usePromotionStore } from '@/stores/promotionStore'
 import { useWidgetValueStore } from '@/stores/widgetValueStore'
 
@@ -277,18 +278,20 @@ describe('Widget slotMetadata reactivity on link disconnect', () => {
     const secondPromotedView = promotedViews[1]
     if (!secondPromotedView) throw new Error('Expected second promoted view')
 
-    ;(
-      secondPromotedView as unknown as {
+    fromAny<
+      {
         sourceNodeId: string
         sourceWidgetName: string
-      }
-    ).sourceNodeId = '9999'
-    ;(
-      secondPromotedView as unknown as {
+      },
+      unknown
+    >(secondPromotedView).sourceNodeId = '9999'
+    fromAny<
+      {
         sourceNodeId: string
         sourceWidgetName: string
-      }
-    ).sourceWidgetName = 'stale_widget'
+      },
+      unknown
+    >(secondPromotedView).sourceWidgetName = 'stale_widget'
 
     const { vueNodeData } = useGraphNodeManager(graph)
     const nodeData = vueNodeData.get(String(subgraphNode.id))
diff --git a/src/composables/graph/useGroupMenuOptions.ts b/src/composables/graph/useGroupMenuOptions.ts
index ac390a62cd..60cf4ac101 100644
--- a/src/composables/graph/useGroupMenuOptions.ts
+++ b/src/composables/graph/useGroupMenuOptions.ts
@@ -36,7 +36,7 @@ export function useGroupMenuOptions() {
       groupContext.resizeTo(groupContext.children, padding)
       groupContext.graph?.change()
       canvasStore.canvas?.setDirty(true, true)
-      workflowStore.activeWorkflow?.changeTracker?.checkState()
+      workflowStore.activeWorkflow?.changeTracker?.captureCanvasState()
     }
   })
 
@@ -119,7 +119,7 @@ export function useGroupMenuOptions() {
         })
         canvasStore.canvas?.setDirty(true, true)
         groupContext.graph?.change()
-        workflowStore.activeWorkflow?.changeTracker?.checkState()
+        workflowStore.activeWorkflow?.changeTracker?.captureCanvasState()
         bump()
       }
     })
diff --git a/src/composables/graph/useImageMenuOptions.test.ts b/src/composables/graph/useImageMenuOptions.test.ts
index 510a7b927e..bac50a9749 100644
--- a/src/composables/graph/useImageMenuOptions.test.ts
+++ b/src/composables/graph/useImageMenuOptions.test.ts
@@ -1,8 +1,8 @@
+import { fromPartial } from '@total-typescript/shoehorn'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { createMockLGraphNode } from '@/utils/__tests__/litegraphTestUtils'
-
 import { useImageMenuOptions } from './useImageMenuOptions'
 
 vi.mock('vue-i18n', async (importOriginal) => {
@@ -112,9 +112,11 @@ describe('useImageMenuOptions', () => {
         getType: vi.fn().mockResolvedValue(mockBlob)
       }
 
-      mockClipboard({
-        read: vi.fn().mockResolvedValue([mockClipboardItem])
-      } as unknown as Clipboard)
+      mockClipboard(
+        fromPartial<Clipboard>({
+          read: vi.fn().mockResolvedValue([mockClipboardItem])
+        })
+      )
 
       const { getImageMenuOptions } = useImageMenuOptions()
       const options = getImageMenuOptions(node)
@@ -131,7 +133,7 @@ describe('useImageMenuOptions', () => {
 
     it('handles missing clipboard API gracefully', async () => {
       const node = createImageNode()
-      mockClipboard({ read: undefined } as unknown as Clipboard)
+      mockClipboard(fromPartial<Clipboard>({ read: undefined }))
 
       const { getImageMenuOptions } = useImageMenuOptions()
       const options = getImageMenuOptions(node)
@@ -148,9 +150,11 @@ describe('useImageMenuOptions', () => {
         getType: vi.fn()
       }
 
-      mockClipboard({
-        read: vi.fn().mockResolvedValue([mockClipboardItem])
-      } as unknown as Clipboard)
+      mockClipboard(
+        fromPartial<Clipboard>({
+          read: vi.fn().mockResolvedValue([mockClipboardItem])
+        })
+      )
 
       const { getImageMenuOptions } = useImageMenuOptions()
       const options = getImageMenuOptions(node)
diff --git a/src/composables/graph/useNodeErrorFlagSync.ts b/src/composables/graph/useNodeErrorFlagSync.ts
index bb32b82363..361b892161 100644
--- a/src/composables/graph/useNodeErrorFlagSync.ts
+++ b/src/composables/graph/useNodeErrorFlagSync.ts
@@ -3,6 +3,7 @@ import { computed, watch } from 'vue'
 
 import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
+import type { useMissingMediaStore } from '@/platform/missingMedia/missingMediaStore'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
 import type { NodeError } from '@/schemas/apiSchema'
@@ -32,7 +33,8 @@ function setNodeHasErrors(node: LGraphNode, hasErrors: boolean): void {
 function reconcileNodeErrorFlags(
   rootGraph: LGraph,
   nodeErrors: Record<string, NodeError> | null,
-  missingModelExecIds: Set<string>
+  missingModelExecIds: Set<string>,
+  missingMediaExecIds: Set<string> = new Set()
 ): void {
   // Collect nodes and slot info that should be flagged
   // Includes both error-owning nodes and their ancestor containers
@@ -64,6 +66,11 @@ function reconcileNodeErrorFlags(
     if (node) flaggedNodes.add(node)
   }
 
+  for (const execId of missingMediaExecIds) {
+    const node = getNodeByExecutionId(rootGraph, execId)
+    if (node) flaggedNodes.add(node)
+  }
+
   forEachNode(rootGraph, (node) => {
     setNodeHasErrors(node, flaggedNodes.has(node))
 
@@ -78,7 +85,8 @@ function reconcileNodeErrorFlags(
 
 export function useNodeErrorFlagSync(
   lastNodeErrors: Ref<Record<string, NodeError> | null>,
-  missingModelStore: ReturnType<typeof useMissingModelStore>
+  missingModelStore: ReturnType<typeof useMissingModelStore>,
+  missingMediaStore: ReturnType<typeof useMissingMediaStore>
 ): () => void {
   const settingStore = useSettingStore()
   const showErrorsTab = computed(() =>
@@ -89,12 +97,13 @@ export function useNodeErrorFlagSync(
     [
       lastNodeErrors,
       () => missingModelStore.missingModelNodeIds,
+      () => missingMediaStore.missingMediaNodeIds,
       showErrorsTab
     ],
     () => {
       if (!app.isGraphReady) return
-      // Legacy (LGraphNode) only: suppress missing-model error flags when
-      // the Errors tab is hidden, since legacy nodes lack the per-widget
+      // Legacy (LGraphNode) only: suppress missing-model/media error flags
+      // when the Errors tab is hidden, since legacy nodes lack the per-widget
       // red highlight that Vue nodes use to indicate *why* a node has errors.
       // Vue nodes compute hasAnyError independently and are unaffected.
       reconcileNodeErrorFlags(
@@ -102,6 +111,9 @@ export function useNodeErrorFlagSync(
         lastNodeErrors.value,
         showErrorsTab.value
           ? missingModelStore.missingModelAncestorExecutionIds
+          : new Set(),
+        showErrorsTab.value
+          ? missingMediaStore.missingMediaAncestorExecutionIds
           : new Set()
       )
     },
diff --git a/src/composables/graph/useSelectedNodeActions.ts b/src/composables/graph/useSelectedNodeActions.ts
index 7ea48b5454..68fabe304a 100644
--- a/src/composables/graph/useSelectedNodeActions.ts
+++ b/src/composables/graph/useSelectedNodeActions.ts
@@ -23,7 +23,7 @@ export function useSelectedNodeActions() {
     })
 
     app.canvas.setDirty(true, true)
-    workflowStore.activeWorkflow?.changeTracker?.checkState()
+    workflowStore.activeWorkflow?.changeTracker?.captureCanvasState()
   }
 
   const toggleNodeCollapse = () => {
@@ -33,7 +33,7 @@ export function useSelectedNodeActions() {
     })
 
     app.canvas.setDirty(true, true)
-    workflowStore.activeWorkflow?.changeTracker?.checkState()
+    workflowStore.activeWorkflow?.changeTracker?.captureCanvasState()
   }
 
   const toggleNodePin = () => {
@@ -43,7 +43,7 @@ export function useSelectedNodeActions() {
     })
 
     app.canvas.setDirty(true, true)
-    workflowStore.activeWorkflow?.changeTracker?.checkState()
+    workflowStore.activeWorkflow?.changeTracker?.captureCanvasState()
   }
 
   const toggleNodeBypass = () => {
diff --git a/src/composables/graph/useSelectionOperations.ts b/src/composables/graph/useSelectionOperations.ts
index 857e8871d6..d53a170989 100644
--- a/src/composables/graph/useSelectionOperations.ts
+++ b/src/composables/graph/useSelectionOperations.ts
@@ -47,7 +47,7 @@ export function useSelectionOperations() {
     canvas.pasteFromClipboard({ connectInputs: false })
 
     // Trigger change tracking
-    workflowStore.activeWorkflow?.changeTracker?.checkState()
+    workflowStore.activeWorkflow?.changeTracker?.captureCanvasState()
   }
 
   const duplicateSelection = () => {
@@ -73,7 +73,7 @@ export function useSelectionOperations() {
     canvas.pasteFromClipboard({ connectInputs: false })
 
     // Trigger change tracking
-    workflowStore.activeWorkflow?.changeTracker?.checkState()
+    workflowStore.activeWorkflow?.changeTracker?.captureCanvasState()
   }
 
   const deleteSelection = () => {
@@ -92,7 +92,7 @@ export function useSelectionOperations() {
     canvas.setDirty(true, true)
 
     // Trigger change tracking
-    workflowStore.activeWorkflow?.changeTracker?.checkState()
+    workflowStore.activeWorkflow?.changeTracker?.captureCanvasState()
   }
 
   const renameSelection = async () => {
@@ -122,7 +122,7 @@ export function useSelectionOperations() {
           const titledItem = item as { title: string }
           titledItem.title = newTitle
           app.canvas.setDirty(true, true)
-          workflowStore.activeWorkflow?.changeTracker?.checkState()
+          workflowStore.activeWorkflow?.changeTracker?.captureCanvasState()
         }
       }
       return
@@ -145,7 +145,7 @@ export function useSelectionOperations() {
           }
         })
         app.canvas.setDirty(true, true)
-        workflowStore.activeWorkflow?.changeTracker?.checkState()
+        workflowStore.activeWorkflow?.changeTracker?.captureCanvasState()
       }
       return
     }
diff --git a/src/composables/graph/useSubgraphOperations.ts b/src/composables/graph/useSubgraphOperations.ts
index 3df39d3fac..9a50752c26 100644
--- a/src/composables/graph/useSubgraphOperations.ts
+++ b/src/composables/graph/useSubgraphOperations.ts
@@ -31,7 +31,7 @@ export function useSubgraphOperations() {
     canvas.select(node)
     canvasStore.updateSelectedItems()
     // Trigger change tracking
-    workflowStore.activeWorkflow?.changeTracker?.checkState()
+    workflowStore.activeWorkflow?.changeTracker?.captureCanvasState()
   }
 
   const doUnpack = (
@@ -46,7 +46,7 @@ export function useSubgraphOperations() {
       nodeOutputStore.revokeSubgraphPreviews(subgraphNode)
       graph.unpackSubgraph(subgraphNode, { skipMissingNodes })
     }
-    workflowStore.activeWorkflow?.changeTracker?.checkState()
+    workflowStore.activeWorkflow?.changeTracker?.captureCanvasState()
   }
 
   const unpackSubgraph = () => {
diff --git a/src/composables/maskeditor/useCanvasTools.ts b/src/composables/maskeditor/useCanvasTools.ts
index 59a45247f0..1f1c9e0e31 100644
--- a/src/composables/maskeditor/useCanvasTools.ts
+++ b/src/composables/maskeditor/useCanvasTools.ts
@@ -2,6 +2,7 @@ import { ref, watch } from 'vue'
 import { useMaskEditorStore } from '@/stores/maskEditorStore'
 import { ColorComparisonMethod } from '@/extensions/core/maskeditor/types'
 import type { Point } from '@/extensions/core/maskeditor/types'
+import { rgbToHsl } from '@/utils/colorUtil'
 
 const getPixelAlpha = (
   data: Uint8ClampedArray,
@@ -47,39 +48,8 @@ const rgbToHSL = (
   g: number,
   b: number
 ): { h: number; s: number; l: number } => {
-  r /= 255
-  g /= 255
-  b /= 255
-
-  const max = Math.max(r, g, b)
-  const min = Math.min(r, g, b)
-  let h = 0
-  let s = 0
-  const l = (max + min) / 2
-
-  if (max !== min) {
-    const d = max - min
-    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
-
-    switch (max) {
-      case r:
-        h = (g - b) / d + (g < b ? 6 : 0)
-        break
-      case g:
-        h = (b - r) / d + 2
-        break
-      case b:
-        h = (r - g) / d + 4
-        break
-    }
-    h /= 6
-  }
-
-  return {
-    h: h * 360,
-    s: s * 100,
-    l: l * 100
-  }
+  const hsl = rgbToHsl({ r, g, b })
+  return { h: hsl.h * 360, s: hsl.s * 100, l: hsl.l * 100 }
 }
 
 const rgbToLab = (rgb: {
diff --git a/src/composables/maskeditor/useMaskEditorSaver.test.ts b/src/composables/maskeditor/useMaskEditorSaver.test.ts
index c074c6566a..7031bf0189 100644
--- a/src/composables/maskeditor/useMaskEditorSaver.test.ts
+++ b/src/composables/maskeditor/useMaskEditorSaver.test.ts
@@ -1,10 +1,11 @@
 import { createTestingPinia } from '@pinia/testing'
+import { fromAny, fromPartial } from '@total-typescript/shoehorn'
 import { setActivePinia } from 'pinia'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { app } from '@/scripts/app'
 import { api } from '@/scripts/api'
+import { app } from '@/scripts/app'
 import { useNodeOutputStore } from '@/stores/nodeOutputStore'
 import { useMaskEditorSaver } from './useMaskEditorSaver'
 
@@ -21,7 +22,7 @@ vi.mock('@/stores/maskEditorDataStore', () => ({
 }))
 
 function createMockCtx(): CanvasRenderingContext2D {
-  return {
+  return fromPartial<CanvasRenderingContext2D>({
     drawImage: vi.fn(),
     getImageData: vi.fn(() => ({
       data: new Uint8ClampedArray(4 * 4 * 4),
@@ -30,11 +31,11 @@ function createMockCtx(): CanvasRenderingContext2D {
     })),
     putImageData: vi.fn(),
     globalCompositeOperation: 'source-over'
-  } as unknown as CanvasRenderingContext2D
+  })
 }
 
 function createMockCanvas(): HTMLCanvasElement {
-  return {
+  return fromPartial<HTMLCanvasElement>({
     width: 4,
     height: 4,
     getContext: vi.fn(() => createMockCtx()),
@@ -42,7 +43,7 @@ function createMockCanvas(): HTMLCanvasElement {
       cb(new Blob(['x'], { type: 'image/png' }))
     }),
     toDataURL: vi.fn(() => 'data:image/png;base64,mock')
-  } as unknown as HTMLCanvasElement
+  })
 }
 
 const mockEditorStore: Record<string, HTMLCanvasElement | null> = {
@@ -96,7 +97,7 @@ describe('useMaskEditorSaver', () => {
     app.nodeOutputs = {}
     app.nodePreviewImages = {}
 
-    mockNode = {
+    mockNode = fromAny<LGraphNode, unknown>({
       id: 42,
       type: 'LoadImage',
       images: [],
@@ -107,7 +108,7 @@ describe('useMaskEditorSaver', () => {
       widgets_values: ['original.png [input]'],
       properties: { image: 'original.png [input]' },
       graph: { setDirtyCanvas: vi.fn() }
-    } as unknown as LGraphNode
+    })
 
     mockDataStore.sourceNode = mockNode
     mockDataStore.inputData = {
@@ -135,7 +136,7 @@ describe('useMaskEditorSaver', () => {
     vi.spyOn(document, 'createElement').mockImplementation(
       (tagName: string, options?: ElementCreationOptions) => {
         if (tagName === 'canvas')
-          return createMockCanvas() as unknown as HTMLCanvasElement
+          return fromAny<HTMLCanvasElement, unknown>(createMockCanvas())
         return originalCreateElement(tagName, options)
       }
     )
diff --git a/src/composables/node/useNodeImageUpload.test.ts b/src/composables/node/useNodeImageUpload.test.ts
index ca755faa4a..b03d80237b 100644
--- a/src/composables/node/useNodeImageUpload.test.ts
+++ b/src/composables/node/useNodeImageUpload.test.ts
@@ -1,3 +1,4 @@
+import { fromAny } from '@total-typescript/shoehorn'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
@@ -44,12 +45,12 @@ vi.mock('@/stores/assetsStore', () => ({
 }))
 
 function createMockNode(): LGraphNode {
-  return {
+  return fromAny<LGraphNode, unknown>({
     isUploading: false,
     imgs: [new Image()],
     graph: { setDirtyCanvas: vi.fn() },
     size: [300, 400]
-  } as unknown as LGraphNode
+  })
 }
 
 function createFile(name = 'test.png'): File {
diff --git a/src/composables/node/useNodeImageUpload.ts b/src/composables/node/useNodeImageUpload.ts
index 587d67bcdc..407f2fbfd0 100644
--- a/src/composables/node/useNodeImageUpload.ts
+++ b/src/composables/node/useNodeImageUpload.ts
@@ -9,6 +9,7 @@ import { api } from '@/scripts/api'
 import { useAssetsStore } from '@/stores/assetsStore'
 
 const PASTED_IMAGE_EXPIRY_MS = 2000
+const UPLOAD_TIMEOUT_MS = 120_000
 
 interface ImageUploadFormFields {
   /**
@@ -30,7 +31,8 @@ const uploadFile = async (
 
   const resp = await api.fetchApi('/upload/image', {
     method: 'POST',
-    body
+    body,
+    signal: AbortSignal.timeout(UPLOAD_TIMEOUT_MS)
   })
 
   if (resp.status !== 200) {
@@ -88,7 +90,11 @@ export const useNodeImageUpload = (
       if (!path) return
       return path
     } catch (error) {
-      useToastStore().addAlert(String(error))
+      if (error instanceof DOMException && error.name === 'TimeoutError') {
+        useToastStore().addAlert(t('g.uploadTimedOut'))
+      } else {
+        useToastStore().addAlert(String(error))
+      }
     }
   }
 
diff --git a/src/composables/node/useNodePreviewAndDrag.test.ts b/src/composables/node/useNodePreviewAndDrag.test.ts
index bad6d3d7fe..79e365a907 100644
--- a/src/composables/node/useNodePreviewAndDrag.test.ts
+++ b/src/composables/node/useNodePreviewAndDrag.test.ts
@@ -1,8 +1,8 @@
+import { fromAny, fromPartial } from '@total-typescript/shoehorn'
 import { ref } from 'vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-
 import { useNodePreviewAndDrag } from './useNodePreviewAndDrag'
 
 const mockStartDrag = vi.fn()
@@ -72,9 +72,9 @@ describe('useNodePreviewAndDrag', () => {
         toJSON: () => ({})
       })
 
-      const mockEvent = {
+      const mockEvent = fromPartial<MouseEvent>({
         currentTarget: mockElement
-      } as Partial<MouseEvent> as MouseEvent
+      })
       result.handleMouseEnter(mockEvent)
 
       expect(result.isHovered.value).toBe(true)
@@ -85,9 +85,9 @@ describe('useNodePreviewAndDrag', () => {
       const result = useNodePreviewAndDrag(nodeDef)
 
       const mockElement = document.createElement('div')
-      const mockEvent = {
+      const mockEvent = fromPartial<MouseEvent>({
         currentTarget: mockElement
-      } as Partial<MouseEvent> as MouseEvent
+      })
       result.handleMouseEnter(mockEvent)
 
       expect(result.isHovered.value).toBe(false)
@@ -116,9 +116,9 @@ describe('useNodePreviewAndDrag', () => {
         setData: vi.fn(),
         setDragImage: vi.fn()
       }
-      const mockEvent = {
+      const mockEvent = fromAny<DragEvent, unknown>({
         dataTransfer: mockDataTransfer
-      } as unknown as DragEvent
+      })
 
       result.handleDragStart(mockEvent)
 
@@ -151,10 +151,10 @@ describe('useNodePreviewAndDrag', () => {
 
       result.isDragging.value = true
 
-      const mockEvent = {
+      const mockEvent = fromPartial<DragEvent>({
         clientX: 100,
         clientY: 200
-      } as Partial<DragEvent> as DragEvent
+      })
 
       result.handleDragEnd(mockEvent)
 
@@ -168,11 +168,11 @@ describe('useNodePreviewAndDrag', () => {
 
       result.isDragging.value = true
 
-      const mockEvent = {
+      const mockEvent = fromPartial<DragEvent>({
         dataTransfer: { dropEffect: 'none' },
         clientX: 300,
         clientY: 400
-      } as Partial<DragEvent> as DragEvent
+      })
 
       result.handleDragEnd(mockEvent)
 
diff --git a/src/composables/painter/usePainter.test.ts b/src/composables/painter/usePainter.test.ts
new file mode 100644
index 0000000000..9e4f643523
--- /dev/null
+++ b/src/composables/painter/usePainter.test.ts
@@ -0,0 +1,446 @@
+import { createTestingPinia } from '@pinia/testing'
+import { render } from '@testing-library/vue'
+import { setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, nextTick, ref } from 'vue'
+
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import { api } from '@/scripts/api'
+
+import { usePainter } from './usePainter'
+
+vi.mock('vue-i18n', () => ({
+  useI18n: vi.fn(() => ({
+    t: (key: string, params?: Record<string, unknown>) =>
+      params ? `${key}:${JSON.stringify(params)}` : key
+  }))
+}))
+
+vi.mock('@vueuse/core', () => ({
+  useElementSize: vi.fn(() => ({
+    width: ref(512),
+    height: ref(512)
+  }))
+}))
+
+vi.mock('@/composables/maskeditor/StrokeProcessor', () => ({
+  StrokeProcessor: vi.fn(() => ({
+    addPoint: vi.fn(() => []),
+    endStroke: vi.fn(() => [])
+  }))
+}))
+
+vi.mock('@/platform/distribution/types', () => ({
+  isCloud: false
+}))
+
+vi.mock('@/platform/updates/common/toastStore', () => {
+  const store = { addAlert: vi.fn() }
+  return { useToastStore: () => store }
+})
+
+vi.mock('@/stores/nodeOutputStore', () => {
+  const store = {
+    getNodeImageUrls: vi.fn(() => undefined),
+    nodeOutputs: {},
+    nodePreviewImages: {}
+  }
+  return { useNodeOutputStore: () => store }
+})
+
+vi.mock('@/scripts/api', () => ({
+  api: {
+    apiURL: vi.fn((path: string) => `http://localhost:8188${path}`),
+    fetchApi: vi.fn()
+  }
+}))
+
+const mockWidgets: IBaseWidget[] = []
+const mockProperties: Record<string, unknown> = {}
+const mockIsInputConnected = vi.fn(() => false)
+const mockGetInputNode = vi.fn(() => null)
+
+vi.mock('@/scripts/app', () => ({
+  app: {
+    canvas: {
+      graph: {
+        getNodeById: vi.fn(() => ({
+          get widgets() {
+            return mockWidgets
+          },
+          get properties() {
+            return mockProperties
+          },
+          isInputConnected: mockIsInputConnected,
+          getInputNode: mockGetInputNode
+        }))
+      }
+    }
+  }
+}))
+
+type PainterResult = ReturnType<typeof usePainter>
+
+function makeWidget(name: string, value: unknown = null): IBaseWidget {
+  return {
+    name,
+    value,
+    callback: vi.fn(),
+    serializeValue: undefined
+  } as unknown as IBaseWidget
+}
+
+/**
+ * Mounts a thin wrapper component so Vue lifecycle hooks fire.
+ */
+function mountPainter(nodeId = 'test-node', initialModelValue = '') {
+  let painter!: PainterResult
+  const canvasEl = ref<HTMLCanvasElement | null>(null)
+  const cursorEl = ref<HTMLElement | null>(null)
+  const modelValue = ref(initialModelValue)
+
+  const Wrapper = defineComponent({
+    setup() {
+      painter = usePainter(nodeId, {
+        canvasEl,
+        cursorEl,
+        modelValue
+      })
+      return {}
+    },
+    render() {
+      return null
+    }
+  })
+
+  render(Wrapper)
+  return { painter, canvasEl, cursorEl, modelValue }
+}
+
+describe('usePainter', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    vi.resetAllMocks()
+    mockWidgets.length = 0
+    for (const key of Object.keys(mockProperties)) {
+      delete mockProperties[key]
+    }
+    mockIsInputConnected.mockReturnValue(false)
+    mockGetInputNode.mockReturnValue(null)
+  })
+
+  describe('syncCanvasSizeFromWidgets', () => {
+    it('reads width/height from widget values on initialization', () => {
+      mockWidgets.push(makeWidget('width', 1024), makeWidget('height', 768))
+
+      const { painter } = mountPainter()
+
+      expect(painter.canvasWidth.value).toBe(1024)
+      expect(painter.canvasHeight.value).toBe(768)
+    })
+
+    it('defaults to 512 when widgets are missing', () => {
+      const { painter } = mountPainter()
+
+      expect(painter.canvasWidth.value).toBe(512)
+      expect(painter.canvasHeight.value).toBe(512)
+    })
+  })
+
+  describe('restoreSettingsFromProperties', () => {
+    it('restores tool and brush settings from node properties on init', () => {
+      mockProperties.painterTool = 'eraser'
+      mockProperties.painterBrushSize = 42
+      mockProperties.painterBrushColor = '#ff0000'
+      mockProperties.painterBrushOpacity = 0.5
+      mockProperties.painterBrushHardness = 0.8
+
+      const { painter } = mountPainter()
+
+      expect(painter.tool.value).toBe('eraser')
+      expect(painter.brushSize.value).toBe(42)
+      expect(painter.brushColor.value).toBe('#ff0000')
+      expect(painter.brushOpacity.value).toBe(0.5)
+      expect(painter.brushHardness.value).toBe(0.8)
+    })
+
+    it('restores backgroundColor from bg_color widget', () => {
+      mockWidgets.push(makeWidget('bg_color', '#123456'))
+
+      const { painter } = mountPainter()
+
+      expect(painter.backgroundColor.value).toBe('#123456')
+    })
+
+    it('keeps defaults when no properties are stored', () => {
+      const { painter } = mountPainter()
+
+      expect(painter.tool.value).toBe('brush')
+      expect(painter.brushSize.value).toBe(20)
+      expect(painter.brushColor.value).toBe('#ffffff')
+      expect(painter.brushOpacity.value).toBe(1)
+      expect(painter.brushHardness.value).toBe(1)
+    })
+  })
+
+  describe('saveSettingsToProperties', () => {
+    it('persists tool settings to node properties when they change', async () => {
+      const { painter } = mountPainter()
+
+      painter.tool.value = 'eraser'
+      painter.brushSize.value = 50
+      painter.brushColor.value = '#00ff00'
+      painter.brushOpacity.value = 0.7
+      painter.brushHardness.value = 0.3
+
+      await nextTick()
+
+      expect(mockProperties.painterTool).toBe('eraser')
+      expect(mockProperties.painterBrushSize).toBe(50)
+      expect(mockProperties.painterBrushColor).toBe('#00ff00')
+      expect(mockProperties.painterBrushOpacity).toBe(0.7)
+      expect(mockProperties.painterBrushHardness).toBe(0.3)
+    })
+  })
+
+  describe('syncCanvasSizeToWidgets', () => {
+    it('syncs canvas dimensions to widgets when size changes', async () => {
+      const widthWidget = makeWidget('width', 512)
+      const heightWidget = makeWidget('height', 512)
+      mockWidgets.push(widthWidget, heightWidget)
+
+      const { painter } = mountPainter()
+
+      painter.canvasWidth.value = 800
+      painter.canvasHeight.value = 600
+      await nextTick()
+
+      expect(widthWidget.value).toBe(800)
+      expect(heightWidget.value).toBe(600)
+      expect(widthWidget.callback).toHaveBeenCalledWith(800)
+      expect(heightWidget.callback).toHaveBeenCalledWith(600)
+    })
+  })
+
+  describe('syncBackgroundColorToWidget', () => {
+    it('syncs background color to widget when color changes', async () => {
+      const bgWidget = makeWidget('bg_color', '#000000')
+      mockWidgets.push(bgWidget)
+
+      const { painter } = mountPainter()
+
+      painter.backgroundColor.value = '#ff00ff'
+      await nextTick()
+
+      expect(bgWidget.value).toBe('#ff00ff')
+      expect(bgWidget.callback).toHaveBeenCalledWith('#ff00ff')
+    })
+  })
+
+  describe('updateInputImageUrl', () => {
+    it('sets isImageInputConnected to false when input is not connected', () => {
+      const { painter } = mountPainter()
+
+      expect(painter.isImageInputConnected.value).toBe(false)
+      expect(painter.inputImageUrl.value).toBeNull()
+    })
+
+    it('sets isImageInputConnected to true when input is connected', () => {
+      mockIsInputConnected.mockReturnValue(true)
+
+      const { painter } = mountPainter()
+
+      expect(painter.isImageInputConnected.value).toBe(true)
+    })
+  })
+
+  describe('handleInputImageLoad', () => {
+    it('updates canvas size and widgets from loaded image dimensions', () => {
+      const widthWidget = makeWidget('width', 512)
+      const heightWidget = makeWidget('height', 512)
+      mockWidgets.push(widthWidget, heightWidget)
+
+      const { painter } = mountPainter()
+
+      const fakeEvent = {
+        target: {
+          naturalWidth: 1920,
+          naturalHeight: 1080
+        }
+      } as unknown as Event
+
+      painter.handleInputImageLoad(fakeEvent)
+
+      expect(painter.canvasWidth.value).toBe(1920)
+      expect(painter.canvasHeight.value).toBe(1080)
+      expect(widthWidget.value).toBe(1920)
+      expect(heightWidget.value).toBe(1080)
+    })
+  })
+
+  describe('cursor visibility', () => {
+    it('sets cursorVisible to true on pointer enter', () => {
+      const { painter } = mountPainter()
+
+      painter.handlePointerEnter()
+      expect(painter.cursorVisible.value).toBe(true)
+    })
+
+    it('sets cursorVisible to false on pointer leave', () => {
+      const { painter } = mountPainter()
+
+      painter.handlePointerEnter()
+      painter.handlePointerLeave()
+      expect(painter.cursorVisible.value).toBe(false)
+    })
+  })
+
+  describe('displayBrushSize', () => {
+    it('scales brush size by canvas display ratio', () => {
+      const { painter } = mountPainter()
+
+      // canvasDisplayWidth=512, canvasWidth=512 → ratio=1
+      // hardness=1 → effectiveRadius = radius * 1.0
+      // displayBrushSize = (20/2) * 1.0 * 2 * 1 = 20
+      expect(painter.displayBrushSize.value).toBe(20)
+    })
+
+    it('increases for soft brush hardness', () => {
+      const { painter } = mountPainter()
+
+      painter.brushHardness.value = 0
+      // hardness=0 → effectiveRadius = 10 * 1.5 = 15
+      // displayBrushSize = 15 * 2 * 1 = 30
+      expect(painter.displayBrushSize.value).toBe(30)
+    })
+  })
+
+  describe('activeHardness (via displayBrushSize)', () => {
+    it('returns 1 for eraser regardless of brushHardness', () => {
+      const { painter } = mountPainter()
+
+      painter.brushHardness.value = 0.3
+      painter.tool.value = 'eraser'
+
+      // eraser hardness=1 → displayBrushSize = 10 * 1.0 * 2 = 20
+      expect(painter.displayBrushSize.value).toBe(20)
+    })
+
+    it('uses brushHardness for brush tool', () => {
+      const { painter } = mountPainter()
+
+      painter.tool.value = 'brush'
+      painter.brushHardness.value = 0.5
+      // hardness=0.5 → scale=1.25 → 10*1.25*2 = 25
+      expect(painter.displayBrushSize.value).toBe(25)
+    })
+  })
+
+  describe('registerWidgetSerialization', () => {
+    it('attaches serializeValue to the mask widget on init', () => {
+      const maskWidget = makeWidget('mask', '')
+      mockWidgets.push(maskWidget)
+
+      mountPainter()
+
+      expect(maskWidget.serializeValue).toBeTypeOf('function')
+    })
+  })
+
+  describe('serializeValue', () => {
+    it('returns empty string when canvas has no strokes', async () => {
+      const maskWidget = makeWidget('mask', '')
+      mockWidgets.push(maskWidget)
+
+      mountPainter()
+
+      const result = await maskWidget.serializeValue!({} as LGraphNode, 0)
+      expect(result).toBe('')
+    })
+
+    it('returns existing modelValue when not dirty', async () => {
+      const maskWidget = makeWidget('mask', '')
+      mockWidgets.push(maskWidget)
+
+      const { modelValue } = mountPainter()
+      modelValue.value = 'painter/existing.png [temp]'
+
+      const result = await maskWidget.serializeValue!({} as LGraphNode, 0)
+      // isCanvasEmpty() is true (no strokes drawn), so returns ''
+      expect(result).toBe('')
+    })
+  })
+
+  describe('restoreCanvas', () => {
+    it('builds correct URL from modelValue on mount', () => {
+      const { modelValue } = mountPainter()
+      // Before mount, set the modelValue
+      // restoreCanvas is called in onMounted, so we test by observing api.apiURL calls
+      // With empty modelValue, restoreCanvas exits early
+      expect(modelValue.value).toBe('')
+    })
+
+    it('calls api.apiURL with parsed filename params when modelValue is set', () => {
+      vi.mocked(api.apiURL).mockClear()
+
+      mountPainter('test-node', 'painter/my-image.png [temp]')
+
+      expect(api.apiURL).toHaveBeenCalledWith(
+        expect.stringContaining('filename=my-image.png')
+      )
+      expect(api.apiURL).toHaveBeenCalledWith(
+        expect.stringContaining('subfolder=painter')
+      )
+      expect(api.apiURL).toHaveBeenCalledWith(
+        expect.stringContaining('type=temp')
+      )
+    })
+  })
+
+  describe('handleClear', () => {
+    it('does not throw when canvas element is null', () => {
+      const { painter } = mountPainter()
+
+      expect(() => painter.handleClear()).not.toThrow()
+    })
+  })
+
+  describe('handlePointerDown', () => {
+    it('ignores non-primary button clicks', () => {
+      const { painter } = mountPainter()
+
+      const mockSetPointerCapture = vi.fn()
+      const event = new PointerEvent('pointerdown', {
+        button: 2
+      })
+      Object.defineProperty(event, 'target', {
+        value: {
+          setPointerCapture: mockSetPointerCapture
+        }
+      })
+
+      painter.handlePointerDown(event)
+
+      expect(mockSetPointerCapture).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('handlePointerUp', () => {
+    it('ignores non-primary button releases', () => {
+      const { painter } = mountPainter()
+
+      const mockReleasePointerCapture = vi.fn()
+      const event = {
+        button: 2,
+        target: {
+          releasePointerCapture: mockReleasePointerCapture
+        }
+      } as unknown as PointerEvent
+
+      painter.handlePointerUp(event)
+
+      expect(mockReleasePointerCapture).not.toHaveBeenCalled()
+    })
+  })
+})
diff --git a/src/composables/queue/useJobList.test.ts b/src/composables/queue/useJobList.test.ts
index 1fdb2bbc39..2d560ac743 100644
--- a/src/composables/queue/useJobList.test.ts
+++ b/src/composables/queue/useJobList.test.ts
@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils'
+import { render } from '@testing-library/vue'
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
 import { nextTick, reactive, ref } from 'vue'
 import type { Ref } from 'vue'
@@ -184,14 +184,14 @@ const createTask = (
 
 const mountUseJobList = () => {
   let composable: ReturnType<typeof useJobList>
-  const wrapper = mount({
+  const result = render({
     template: '<div />',
     setup() {
       composable = useJobList()
       return {}
     }
   })
-  return { wrapper, composable: composable! }
+  return { ...result, composable: composable! }
 }
 
 const resetStores = () => {
@@ -230,27 +230,27 @@ const flush = async () => {
 }
 
 describe('useJobList', () => {
-  let wrapper: ReturnType<typeof mount> | null = null
+  let unmount: (() => void) | null = null
   let api: ReturnType<typeof useJobList> | null = null
 
   beforeEach(() => {
     vi.resetAllMocks()
     resetStores()
-    wrapper?.unmount()
-    wrapper = null
+    unmount?.()
+    unmount = null
     api = null
   })
 
   afterEach(() => {
-    wrapper?.unmount()
-    wrapper = null
+    unmount?.()
+    unmount = null
     api = null
     vi.useRealTimers()
   })
 
   const initComposable = () => {
     const mounted = mountUseJobList()
-    wrapper = mounted.wrapper
+    unmount = mounted.unmount
     api = mounted.composable
     return api!
   }
@@ -321,8 +321,8 @@ describe('useJobList', () => {
     await flush()
     expect(vi.getTimerCount()).toBeGreaterThan(0)
 
-    wrapper?.unmount()
-    wrapper = null
+    unmount?.()
+    unmount = null
     await flush()
     expect(vi.getTimerCount()).toBe(0)
   })
diff --git a/src/composables/queue/useQueueNotificationBanners.test.ts b/src/composables/queue/useQueueNotificationBanners.test.ts
index 6b51e1e575..179fc5df01 100644
--- a/src/composables/queue/useQueueNotificationBanners.test.ts
+++ b/src/composables/queue/useQueueNotificationBanners.test.ts
@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils'
+import { render } from '@testing-library/vue'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick, reactive } from 'vue'
 
@@ -45,14 +45,14 @@ vi.mock('@/stores/executionStore', () => {
 
 const mountComposable = () => {
   let composable: ReturnType<typeof useQueueNotificationBanners>
-  const wrapper = mount({
+  const result = render({
     template: '<div />',
     setup() {
       composable = useQueueNotificationBanners()
       return {}
     }
   })
-  return { wrapper, composable: composable! }
+  return { ...result, composable: composable! }
 }
 
 describe(useQueueNotificationBanners, () => {
@@ -131,7 +131,7 @@ describe(useQueueNotificationBanners, () => {
   })
 
   it('shows queued notifications from promptQueued events', async () => {
-    const { wrapper, composable } = mountComposable()
+    const { unmount, composable } = mountComposable()
 
     try {
       mockApi.dispatchEvent(
@@ -148,12 +148,12 @@ describe(useQueueNotificationBanners, () => {
       await nextTick()
       expect(composable.currentNotification.value).toBeNull()
     } finally {
-      wrapper.unmount()
+      unmount()
     }
   })
 
   it('shows queued pending then queued confirmation', async () => {
-    const { wrapper, composable } = mountComposable()
+    const { unmount, composable } = mountComposable()
 
     try {
       mockApi.dispatchEvent(
@@ -182,12 +182,12 @@ describe(useQueueNotificationBanners, () => {
         requestId: 1
       })
     } finally {
-      wrapper.unmount()
+      unmount()
     }
   })
 
   it('falls back to 1 when queued batch count is invalid', async () => {
-    const { wrapper, composable } = mountComposable()
+    const { unmount, composable } = mountComposable()
 
     try {
       mockApi.dispatchEvent(
@@ -200,12 +200,12 @@ describe(useQueueNotificationBanners, () => {
         count: 1
       })
     } finally {
-      wrapper.unmount()
+      unmount()
     }
   })
 
   it('shows a completed notification from a finished batch', async () => {
-    const { wrapper, composable } = mountComposable()
+    const { unmount, composable } = mountComposable()
 
     try {
       await runBatch({
@@ -225,12 +225,12 @@ describe(useQueueNotificationBanners, () => {
         thumbnailUrls: ['https://example.com/preview.png']
       })
     } finally {
-      wrapper.unmount()
+      unmount()
     }
   })
 
   it('shows one completion notification when history updates after queue becomes idle', async () => {
-    const { wrapper, composable } = mountComposable()
+    const { unmount, composable } = mountComposable()
 
     try {
       vi.setSystemTime(4_000)
@@ -266,12 +266,12 @@ describe(useQueueNotificationBanners, () => {
       await nextTick()
       expect(composable.currentNotification.value).toBeNull()
     } finally {
-      wrapper.unmount()
+      unmount()
     }
   })
 
   it('queues both completed and failed notifications for mixed batches', async () => {
-    const { wrapper, composable } = mountComposable()
+    const { unmount, composable } = mountComposable()
 
     try {
       await runBatch({
@@ -302,12 +302,12 @@ describe(useQueueNotificationBanners, () => {
         count: 1
       })
     } finally {
-      wrapper.unmount()
+      unmount()
     }
   })
 
   it('uses up to two completion thumbnails for notification icon previews', async () => {
-    const { wrapper, composable } = mountComposable()
+    const { unmount, composable } = mountComposable()
 
     try {
       await runBatch({
@@ -342,7 +342,7 @@ describe(useQueueNotificationBanners, () => {
         ]
       })
     } finally {
-      wrapper.unmount()
+      unmount()
     }
   })
 })
diff --git a/src/composables/queue/useQueueProgress.test.ts b/src/composables/queue/useQueueProgress.test.ts
index 2f9c194ade..a0d7231828 100644
--- a/src/composables/queue/useQueueProgress.test.ts
+++ b/src/composables/queue/useQueueProgress.test.ts
@@ -1,8 +1,7 @@
-import { mount } from '@vue/test-utils'
-import type { VueWrapper } from '@vue/test-utils'
+import { render } from '@testing-library/vue'
 import { nextTick, ref } from 'vue'
 import type { Ref } from 'vue'
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { describe, it, expect, beforeEach, vi } from 'vitest'
 
 import { useQueueProgress } from '@/composables/queue/useQueueProgress'
 import { formatPercent0 } from '@/utils/numberUtil'
@@ -32,19 +31,16 @@ vi.mock('@/stores/executionStore', () => ({
   useExecutionStore: () => createExecutionStoreMock()
 }))
 
-const mountedWrappers: VueWrapper[] = []
-
 const mountUseQueueProgress = () => {
   let composable: ReturnType<typeof useQueueProgress>
-  const wrapper = mount({
+  render({
     template: '<div />',
     setup() {
       composable = useQueueProgress()
       return {}
     }
   })
-  mountedWrappers.push(wrapper)
-  return { wrapper, composable: composable! }
+  return { composable: composable! }
 }
 
 const setExecutionProgress = (value?: number | null) => {
@@ -62,10 +58,6 @@ describe('useQueueProgress', () => {
     setExecutingNodeProgress(null)
   })
 
-  afterEach(() => {
-    mountedWrappers.splice(0).forEach((wrapper) => wrapper.unmount())
-  })
-
   it.each([
     {
       description: 'defaults to 0% when execution store values are missing',
diff --git a/src/composables/useAppMode.ts b/src/composables/useAppMode.ts
index 8f9ff0d9c3..e589e7c4ef 100644
--- a/src/composables/useAppMode.ts
+++ b/src/composables/useAppMode.ts
@@ -37,8 +37,6 @@ export function useAppMode() {
   )
 
   function setMode(newMode: AppMode) {
-    if (newMode === mode.value) return
-
     const workflow = workflowStore.activeWorkflow
     if (workflow) workflow.activeMode = newMode
   }
diff --git a/src/composables/useBrowserTabTitle.test.ts b/src/composables/useBrowserTabTitle.test.ts
index ec0ce59d57..0332923629 100644
--- a/src/composables/useBrowserTabTitle.test.ts
+++ b/src/composables/useBrowserTabTitle.test.ts
@@ -1,6 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { effectScope, nextTick, reactive } from 'vue'
-import type { EffectScope } from 'vue'
 
 import { useBrowserTabTitle } from '@/composables/useBrowserTabTitle'
 
@@ -88,7 +87,7 @@ describe('useBrowserTabTitle', () => {
   })
 
   it('sets default title when idle and no workflow', () => {
-    const scope: EffectScope = effectScope()
+    const scope = effectScope()
     scope.run(() => useBrowserTabTitle())
     expect(document.title).toBe('ComfyUI')
     scope.stop()
@@ -101,7 +100,7 @@ describe('useBrowserTabTitle', () => {
       isModified: false,
       isPersisted: true
     }
-    const scope: EffectScope = effectScope()
+    const scope = effectScope()
     scope.run(() => useBrowserTabTitle())
     await nextTick()
     expect(document.title).toBe('myFlow - ComfyUI')
@@ -115,7 +114,7 @@ describe('useBrowserTabTitle', () => {
       isModified: true,
       isPersisted: true
     }
-    const scope: EffectScope = effectScope()
+    const scope = effectScope()
     scope.run(() => useBrowserTabTitle())
     await nextTick()
     expect(document.title).toBe('*myFlow - ComfyUI')
@@ -133,9 +132,11 @@ describe('useBrowserTabTitle', () => {
       isModified: true,
       isPersisted: true
     }
-    useBrowserTabTitle()
+    const scope = effectScope()
+    scope.run(() => useBrowserTabTitle())
     await nextTick()
     expect(document.title).toBe('myFlow - ComfyUI')
+    scope.stop()
   })
 
   it('hides asterisk while Shift key is held', async () => {
@@ -150,21 +151,21 @@ describe('useBrowserTabTitle', () => {
       isModified: true,
       isPersisted: true
     }
-    useBrowserTabTitle()
+    const scope = effectScope()
+    scope.run(() => useBrowserTabTitle())
     await nextTick()
     expect(document.title).toBe('myFlow - ComfyUI')
+    scope.stop()
   })
 
-  // Fails when run together with other tests. Suspect to be caused by leaked
-  // state from previous tests.
-  it.skip('disables workflow title when menu disabled', async () => {
+  it('disables workflow title when menu disabled', async () => {
     vi.mocked(settingStore.get).mockReturnValue('Disabled')
     workflowStore.activeWorkflow = {
       filename: 'myFlow',
       isModified: false,
       isPersisted: true
     }
-    const scope: EffectScope = effectScope()
+    const scope = effectScope()
     scope.run(() => useBrowserTabTitle())
     await nextTick()
     expect(document.title).toBe('ComfyUI')
@@ -174,7 +175,7 @@ describe('useBrowserTabTitle', () => {
   it('shows execution progress when not idle without workflow', async () => {
     executionStore.isIdle = false
     executionStore.executionProgress = 0.3
-    const scope: EffectScope = effectScope()
+    const scope = effectScope()
     scope.run(() => useBrowserTabTitle())
     await nextTick()
     expect(document.title).toBe('[30%]ComfyUI')
@@ -196,7 +197,7 @@ describe('useBrowserTabTitle', () => {
         }
       }
     }
-    const scope: EffectScope = effectScope()
+    const scope = effectScope()
     scope.run(() => useBrowserTabTitle())
     await nextTick()
     expect(document.title).toBe('[40%][50%] Foo')
@@ -216,7 +217,7 @@ describe('useBrowserTabTitle', () => {
       },
       '2': { state: 'running', value: 8, max: 10, node: '2', prompt_id: 'test' }
     }
-    const scope: EffectScope = effectScope()
+    const scope = effectScope()
     scope.run(() => useBrowserTabTitle())
     await nextTick()
     expect(document.title).toBe('[40%][2 nodes running]')
diff --git a/src/composables/useContextMenuTranslation.ts b/src/composables/useContextMenuTranslation.ts
index 0c69343f55..7b031d7ee2 100644
--- a/src/composables/useContextMenuTranslation.ts
+++ b/src/composables/useContextMenuTranslation.ts
@@ -123,7 +123,8 @@ export const useContextMenuTranslation = () => {
       }
 
       // for capture translation text of input and widget
-      const extraInfo = (options.extra || options.parentMenu?.options?.extra) as
+      const extraInfo = (options.extra ||
+        options.parentMenu?.options?.extra) as
         | { inputs?: INodeInputSlot[]; widgets?: IWidget[] }
         | undefined
       // widgets and inputs
diff --git a/src/composables/useCoreCommands.test.ts b/src/composables/useCoreCommands.test.ts
index 84127747ad..0f8589cc59 100644
--- a/src/composables/useCoreCommands.test.ts
+++ b/src/composables/useCoreCommands.test.ts
@@ -94,7 +94,7 @@ vi.mock('@/stores/toastStore', () => ({
 }))
 
 const mockChangeTracker = vi.hoisted(() => ({
-  checkState: vi.fn()
+  captureCanvasState: vi.fn()
 }))
 const mockWorkflowStore = vi.hoisted(() => ({
   activeWorkflow: {
@@ -382,7 +382,7 @@ describe('useCoreCommands', () => {
 
         expect(mockDialogService.prompt).toHaveBeenCalled()
         expect(mockSubgraph.extra.BlueprintDescription).toBe('Test description')
-        expect(mockChangeTracker.checkState).toHaveBeenCalled()
+        expect(mockChangeTracker.captureCanvasState).toHaveBeenCalled()
       })
 
       it('should not set description when user cancels', async () => {
@@ -397,7 +397,7 @@ describe('useCoreCommands', () => {
         await setDescCommand.function()
 
         expect(mockSubgraph.extra.BlueprintDescription).toBeUndefined()
-        expect(mockChangeTracker.checkState).not.toHaveBeenCalled()
+        expect(mockChangeTracker.captureCanvasState).not.toHaveBeenCalled()
       })
     })
 
@@ -432,7 +432,7 @@ describe('useCoreCommands', () => {
           'alias2',
           'alias3'
         ])
-        expect(mockChangeTracker.checkState).toHaveBeenCalled()
+        expect(mockChangeTracker.captureCanvasState).toHaveBeenCalled()
       })
 
       it('should trim whitespace and filter empty strings', async () => {
@@ -478,7 +478,7 @@ describe('useCoreCommands', () => {
         await setAliasesCommand.function()
 
         expect(mockSubgraph.extra.BlueprintSearchAliases).toBeUndefined()
-        expect(mockChangeTracker.checkState).not.toHaveBeenCalled()
+        expect(mockChangeTracker.captureCanvasState).not.toHaveBeenCalled()
       })
     })
   })
diff --git a/src/composables/useCoreCommands.ts b/src/composables/useCoreCommands.ts
index 1f13d65522..9eb5b9a3ac 100644
--- a/src/composables/useCoreCommands.ts
+++ b/src/composables/useCoreCommands.ts
@@ -1164,7 +1164,7 @@ export function useCoreCommands(): ComfyCommand[] {
         if (description === null) return
 
         extra.BlueprintDescription = description.trim() || undefined
-        workflowStore.activeWorkflow?.changeTracker?.checkState()
+        workflowStore.activeWorkflow?.changeTracker?.captureCanvasState()
       }
     },
     {
@@ -1201,7 +1201,7 @@ export function useCoreCommands(): ComfyCommand[] {
         }
 
         extra.BlueprintSearchAliases = aliases.length > 0 ? aliases : undefined
-        workflowStore.activeWorkflow?.changeTracker?.checkState()
+        workflowStore.activeWorkflow?.changeTracker?.captureCanvasState()
       }
     },
     {
diff --git a/src/composables/useLoad3d.test.ts b/src/composables/useLoad3d.test.ts
index 48de0a2347..153ec60a98 100644
--- a/src/composables/useLoad3d.test.ts
+++ b/src/composables/useLoad3d.test.ts
@@ -23,7 +23,17 @@ vi.mock('@/extensions/core/load3d/Load3dUtils', () => ({
   default: {
     splitFilePath: vi.fn(),
     getResourceURL: vi.fn(),
-    uploadFile: vi.fn()
+    uploadFile: vi.fn(),
+    mapSceneLightIntensityToHdri: vi.fn(
+      (scene: number, min: number, max: number) => {
+        const span = max - min
+        const t = span > 0 ? (scene - min) / span : 0
+        const clampedT = Math.min(1, Math.max(0, t))
+        const mapped = clampedT * 5
+        const minHdri = 0.25
+        return Math.min(5, Math.max(minHdri, mapped))
+      }
+    )
   }
 }))
 
@@ -72,7 +82,13 @@ describe('useLoad3d', () => {
           state: null
         },
         'Light Config': {
-          intensity: 5
+          intensity: 5,
+          hdri: {
+            enabled: false,
+            hdriPath: '',
+            showAsBackground: false,
+            intensity: 1
+          }
         },
         'Resource Folder': ''
       },
@@ -122,6 +138,11 @@ describe('useLoad3d', () => {
       isPlyModel: vi.fn().mockReturnValue(false),
       hasSkeleton: vi.fn().mockReturnValue(false),
       setShowSkeleton: vi.fn(),
+      loadHDRI: vi.fn().mockResolvedValue(undefined),
+      setHDRIEnabled: vi.fn(),
+      setHDRIAsBackground: vi.fn(),
+      setHDRIIntensity: vi.fn(),
+      clearHDRI: vi.fn(),
       addEventListener: vi.fn(),
       removeEventListener: vi.fn(),
       remove: vi.fn(),
@@ -167,7 +188,13 @@ describe('useLoad3d', () => {
         fov: 75
       })
       expect(composable.lightConfig.value).toEqual({
-        intensity: 5
+        intensity: 5,
+        hdri: {
+          enabled: false,
+          hdriPath: '',
+          showAsBackground: false,
+          intensity: 1
+        }
       })
       expect(composable.isRecording.value).toBe(false)
       expect(composable.hasRecording.value).toBe(false)
@@ -476,7 +503,7 @@ describe('useLoad3d', () => {
       await nextTick()
 
       expect(mockLoad3d.setLightIntensity).toHaveBeenCalledWith(10)
-      expect(mockNode.properties['Light Config']).toEqual({
+      expect(mockNode.properties['Light Config']).toMatchObject({
         intensity: 10
       })
     })
@@ -912,6 +939,97 @@ describe('useLoad3d', () => {
     })
   })
 
+  describe('hdri controls', () => {
+    it('should call setHDRIEnabled when hdriConfig.enabled changes', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+      await composable.initializeLoad3d(containerRef)
+
+      composable.lightConfig.value = {
+        ...composable.lightConfig.value,
+        hdri: { ...composable.lightConfig.value.hdri!, enabled: true }
+      }
+      await nextTick()
+
+      expect(mockLoad3d.setHDRIEnabled).toHaveBeenCalledWith(true)
+    })
+
+    it('should call setHDRIAsBackground when hdriConfig.showAsBackground changes', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+      await composable.initializeLoad3d(containerRef)
+
+      composable.lightConfig.value = {
+        ...composable.lightConfig.value,
+        hdri: { ...composable.lightConfig.value.hdri!, showAsBackground: true }
+      }
+      await nextTick()
+
+      expect(mockLoad3d.setHDRIAsBackground).toHaveBeenCalledWith(true)
+    })
+
+    it('should call setHDRIIntensity when hdriConfig.intensity changes', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+      await composable.initializeLoad3d(containerRef)
+
+      composable.lightConfig.value = {
+        ...composable.lightConfig.value,
+        hdri: { ...composable.lightConfig.value.hdri!, intensity: 2.5 }
+      }
+      await nextTick()
+
+      expect(mockLoad3d.setHDRIIntensity).toHaveBeenCalledWith(2.5)
+    })
+
+    it('should upload file, load HDRI and update hdriConfig', async () => {
+      vi.mocked(Load3dUtils.uploadFile).mockResolvedValue('3d/env.hdr')
+      vi.mocked(Load3dUtils.splitFilePath).mockReturnValue(['3d', 'env.hdr'])
+      vi.mocked(Load3dUtils.getResourceURL).mockReturnValue(
+        '/view?filename=env.hdr'
+      )
+      vi.mocked(api.apiURL).mockReturnValue(
+        'http://localhost/view?filename=env.hdr'
+      )
+
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+      await composable.initializeLoad3d(containerRef)
+
+      const file = new File([''], 'env.hdr', { type: 'image/x-hdr' })
+      await composable.handleHDRIFileUpdate(file)
+
+      expect(Load3dUtils.uploadFile).toHaveBeenCalledWith(file, '3d')
+      expect(mockLoad3d.loadHDRI).toHaveBeenCalledWith(
+        'http://localhost/view?filename=env.hdr'
+      )
+      expect(composable.lightConfig.value.hdri!.hdriPath).toBe('3d/env.hdr')
+      expect(composable.lightConfig.value.hdri!.enabled).toBe(true)
+    })
+
+    it('should clear HDRI when file is null', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+      await composable.initializeLoad3d(containerRef)
+
+      composable.lightConfig.value = {
+        ...composable.lightConfig.value,
+        hdri: {
+          enabled: true,
+          hdriPath: '3d/env.hdr',
+          showAsBackground: true,
+          intensity: 1
+        }
+      }
+
+      await composable.handleHDRIFileUpdate(null)
+
+      expect(mockLoad3d.clearHDRI).toHaveBeenCalled()
+      expect(composable.lightConfig.value.hdri!.hdriPath).toBe('')
+      expect(composable.lightConfig.value.hdri!.enabled).toBe(false)
+    })
+  })
+
   describe('edge cases', () => {
     it('should handle null node ref', () => {
       const nodeRef = ref(null)
diff --git a/src/composables/useLoad3d.ts b/src/composables/useLoad3d.ts
index 8c325f0189..23ffafcdb2 100644
--- a/src/composables/useLoad3d.ts
+++ b/src/composables/useLoad3d.ts
@@ -1,6 +1,7 @@
 import type { MaybeRef } from 'vue'
 
 import { toRef } from '@vueuse/core'
+import { getActivePinia } from 'pinia'
 import { nextTick, ref, toRaw, watch } from 'vue'
 
 import Load3d from '@/extensions/core/load3d/Load3d'
@@ -24,6 +25,7 @@ import type {
 import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
@@ -58,8 +60,15 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
   })
 
   const lightConfig = ref<LightConfig>({
-    intensity: 5
+    intensity: 5,
+    hdri: {
+      enabled: false,
+      hdriPath: '',
+      showAsBackground: false,
+      intensity: 1
+    }
   })
+  const lastNonHdriLightIntensity = ref(lightConfig.value.intensity)
 
   const isRecording = ref(false)
   const hasRecording = ref(false)
@@ -185,8 +194,45 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
     }
 
     const savedLightConfig = node.properties['Light Config'] as LightConfig
+    const savedHdriEnabled = savedLightConfig?.hdri?.enabled ?? false
     if (savedLightConfig) {
-      lightConfig.value = savedLightConfig
+      lightConfig.value = {
+        intensity: savedLightConfig.intensity ?? lightConfig.value.intensity,
+        hdri: {
+          ...lightConfig.value.hdri!,
+          ...savedLightConfig.hdri,
+          enabled: false
+        }
+      }
+      lastNonHdriLightIntensity.value = lightConfig.value.intensity
+    }
+
+    const hdri = lightConfig.value.hdri
+    let hdriLoaded = false
+    if (hdri?.hdriPath) {
+      const hdriUrl = api.apiURL(
+        Load3dUtils.getResourceURL(
+          ...Load3dUtils.splitFilePath(hdri.hdriPath),
+          'input'
+        )
+      )
+      try {
+        await load3d.loadHDRI(hdriUrl)
+        hdriLoaded = true
+      } catch (error) {
+        console.warn('Failed to restore HDRI:', error)
+        lightConfig.value = {
+          ...lightConfig.value,
+          hdri: { ...lightConfig.value.hdri!, hdriPath: '', enabled: false }
+        }
+      }
+    }
+
+    if (hdriLoaded && savedHdriEnabled) {
+      lightConfig.value = {
+        ...lightConfig.value,
+        hdri: { ...lightConfig.value.hdri!, enabled: true }
+      }
     }
 
     const modelWidget = node.widgets?.find((w) => w.name === 'model_file')
@@ -213,6 +259,39 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
     } else if (cameraStateToRestore) {
       load3d.setCameraState(cameraStateToRestore)
     }
+
+    applySceneConfigToLoad3d()
+    applyLightConfigToLoad3d()
+  }
+
+  const applySceneConfigToLoad3d = () => {
+    if (!load3d) return
+    const cfg = sceneConfig.value
+    load3d.toggleGrid(cfg.showGrid)
+    if (!lightConfig.value.hdri?.enabled) {
+      load3d.setBackgroundColor(cfg.backgroundColor)
+    }
+    if (cfg.backgroundRenderMode) {
+      load3d.setBackgroundRenderMode(cfg.backgroundRenderMode)
+    }
+  }
+
+  const applyLightConfigToLoad3d = () => {
+    if (!load3d) return
+    const cfg = lightConfig.value
+    load3d.setLightIntensity(cfg.intensity)
+    const hdri = cfg.hdri
+    if (!hdri) return
+    load3d.setHDRIIntensity(hdri.intensity)
+    load3d.setHDRIAsBackground(hdri.showAsBackground)
+    load3d.setHDRIEnabled(hdri.enabled)
+  }
+
+  const persistLightConfigToNode = () => {
+    const n = nodeRef.value
+    if (n) {
+      n.properties['Light Config'] = lightConfig.value
+    }
   }
 
   const getModelUrl = (modelPath: string): string | null => {
@@ -260,22 +339,44 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
 
   watch(
     sceneConfig,
-    async (newValue) => {
-      if (load3d && nodeRef.value) {
+    (newValue) => {
+      if (nodeRef.value) {
         nodeRef.value.properties['Scene Config'] = newValue
-        load3d.toggleGrid(newValue.showGrid)
-        load3d.setBackgroundColor(newValue.backgroundColor)
-
-        await load3d.setBackgroundImage(newValue.backgroundImage || '')
-
-        if (newValue.backgroundRenderMode) {
-          load3d.setBackgroundRenderMode(newValue.backgroundRenderMode)
-        }
       }
     },
     { deep: true }
   )
 
+  watch(
+    () => sceneConfig.value.showGrid,
+    (showGrid) => {
+      load3d?.toggleGrid(showGrid)
+    }
+  )
+
+  watch(
+    () => sceneConfig.value.backgroundColor,
+    (color) => {
+      if (!load3d || lightConfig.value.hdri?.enabled) return
+      load3d.setBackgroundColor(color)
+    }
+  )
+
+  watch(
+    () => sceneConfig.value.backgroundImage,
+    async (image) => {
+      if (!load3d) return
+      await load3d.setBackgroundImage(image || '')
+    }
+  )
+
+  watch(
+    () => sceneConfig.value.backgroundRenderMode,
+    (mode) => {
+      if (mode) load3d?.setBackgroundRenderMode(mode)
+    }
+  )
+
   watch(
     modelConfig,
     (newValue) => {
@@ -302,14 +403,54 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
   )
 
   watch(
-    lightConfig,
-    (newValue) => {
-      if (load3d && nodeRef.value) {
-        nodeRef.value.properties['Light Config'] = newValue
-        load3d.setLightIntensity(newValue.intensity)
+    () => lightConfig.value.intensity,
+    (intensity) => {
+      if (!load3d || !nodeRef.value) return
+      if (!lightConfig.value.hdri?.enabled) {
+        lastNonHdriLightIntensity.value = intensity
       }
-    },
-    { deep: true }
+      persistLightConfigToNode()
+      load3d.setLightIntensity(intensity)
+    }
+  )
+
+  watch(
+    () => lightConfig.value.hdri?.intensity,
+    (intensity) => {
+      if (!load3d || !nodeRef.value) return
+      if (intensity === undefined) return
+      persistLightConfigToNode()
+      load3d.setHDRIIntensity(intensity)
+    }
+  )
+
+  watch(
+    () => lightConfig.value.hdri?.showAsBackground,
+    (show) => {
+      if (!load3d || !nodeRef.value) return
+      if (show === undefined) return
+      persistLightConfigToNode()
+      load3d.setHDRIAsBackground(show)
+    }
+  )
+
+  watch(
+    () => lightConfig.value.hdri?.enabled,
+    (enabled, prevEnabled) => {
+      if (!load3d || !nodeRef.value) return
+      if (enabled === undefined) return
+      if (enabled && prevEnabled === false) {
+        lastNonHdriLightIntensity.value = lightConfig.value.intensity
+      }
+      if (!enabled && prevEnabled === true) {
+        lightConfig.value = {
+          ...lightConfig.value,
+          intensity: lastNonHdriLightIntensity.value
+        }
+      }
+      persistLightConfigToNode()
+      load3d.setHDRIEnabled(enabled)
+    }
   )
 
   watch(playing, (newValue) => {
@@ -377,6 +518,98 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
     }
   }
 
+  const handleHDRIFileUpdate = async (file: File | null) => {
+    const capturedLoad3d = load3d
+    if (!capturedLoad3d) return
+
+    if (!file) {
+      lightConfig.value = {
+        ...lightConfig.value,
+        hdri: {
+          ...lightConfig.value.hdri!,
+          hdriPath: '',
+          enabled: false,
+          showAsBackground: false
+        }
+      }
+      capturedLoad3d.clearHDRI()
+      return
+    }
+
+    const resourceFolder =
+      (nodeRef.value?.properties['Resource Folder'] as string) || ''
+
+    const subfolder = resourceFolder.trim()
+      ? `3d/${resourceFolder.trim()}`
+      : '3d'
+
+    const uploadedPath = await Load3dUtils.uploadFile(file, subfolder)
+    if (!uploadedPath) {
+      return
+    }
+
+    // Re-validate: node may have been removed during upload
+    if (load3d !== capturedLoad3d) return
+
+    const hdriUrl = api.apiURL(
+      Load3dUtils.getResourceURL(
+        ...Load3dUtils.splitFilePath(uploadedPath),
+        'input'
+      )
+    )
+
+    try {
+      loading.value = true
+      loadingMessage.value = t('load3d.loadingHDRI')
+      await capturedLoad3d.loadHDRI(hdriUrl)
+
+      if (load3d !== capturedLoad3d) return
+
+      let sceneMin = 1
+      let sceneMax = 10
+      if (getActivePinia() != null) {
+        const settingStore = useSettingStore()
+        sceneMin = settingStore.get(
+          'Comfy.Load3D.LightIntensityMinimum'
+        ) as number
+        sceneMax = settingStore.get(
+          'Comfy.Load3D.LightIntensityMaximum'
+        ) as number
+      }
+      const mappedHdriIntensity = Load3dUtils.mapSceneLightIntensityToHdri(
+        lightConfig.value.intensity,
+        sceneMin,
+        sceneMax
+      )
+      lightConfig.value = {
+        ...lightConfig.value,
+        hdri: {
+          ...lightConfig.value.hdri!,
+          hdriPath: uploadedPath,
+          enabled: true,
+          showAsBackground: true,
+          intensity: mappedHdriIntensity
+        }
+      }
+    } catch (error) {
+      console.error('Failed to load HDRI:', error)
+      capturedLoad3d.clearHDRI()
+      lightConfig.value = {
+        ...lightConfig.value,
+        hdri: {
+          ...lightConfig.value.hdri!,
+          hdriPath: '',
+          enabled: false,
+          showAsBackground: false
+        }
+      }
+      useToastStore().addAlert(t('toastMessages.failedToLoadHDRI'))
+    } finally {
+      loading.value = false
+      loadingMessage.value = ''
+    }
+  }
+
   const handleBackgroundImageUpdate = async (file: File | null) => {
     if (!file) {
       sceneConfig.value.backgroundImage = ''
@@ -642,6 +875,7 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
     handleClearRecording,
     handleSeek,
     handleBackgroundImageUpdate,
+    handleHDRIFileUpdate,
     handleExportModel,
     handleModelDrop,
     cleanup
diff --git a/src/composables/useLoad3dViewer.test.ts b/src/composables/useLoad3dViewer.test.ts
index 131d267fdd..5b8f424300 100644
--- a/src/composables/useLoad3dViewer.test.ts
+++ b/src/composables/useLoad3dViewer.test.ts
@@ -430,6 +430,17 @@ describe('useLoad3dViewer', () => {
 
       expect(mockLoad3d.updateStatusMouseOnViewer).toHaveBeenCalledWith(false)
     })
+
+    it('should sync hover state when mouseenter fires before init', async () => {
+      const viewer = useLoad3dViewer(mockNode)
+      const containerRef = document.createElement('div')
+
+      viewer.handleMouseEnter()
+
+      await viewer.initializeViewer(containerRef, mockSourceLoad3d as Load3d)
+
+      expect(mockLoad3d.updateStatusMouseOnViewer).toHaveBeenCalledWith(true)
+    })
   })
 
   describe('restoreInitialState', () => {
diff --git a/src/composables/useLoad3dViewer.ts b/src/composables/useLoad3dViewer.ts
index aed54c4895..301b0bd2a9 100644
--- a/src/composables/useLoad3dViewer.ts
+++ b/src/composables/useLoad3dViewer.ts
@@ -86,6 +86,7 @@ export const useLoad3dViewer = (node?: LGraphNode) => {
   let load3d: Load3d | null = null
   let sourceLoad3d: Load3d | null = null
   let currentModelUrl: string | null = null
+  let mouseOnViewer = false
 
   const initialState = ref<Load3dViewerState>({
     backgroundColor: '#282828',
@@ -304,6 +305,10 @@ export const useLoad3dViewer = (node?: LGraphNode) => {
         isViewerMode: hasTargetDimensions
       })
 
+      if (mouseOnViewer) {
+        load3d.updateStatusMouseOnViewer(true)
+      }
+
       await useLoad3dService().copyLoad3dState(source, load3d)
 
       const sourceCameraState = source.getCameraState()
@@ -416,6 +421,10 @@ export const useLoad3dViewer = (node?: LGraphNode) => {
         isViewerMode: true
       })
 
+      if (mouseOnViewer) {
+        load3d.updateStatusMouseOnViewer(true)
+      }
+
       await load3d.loadModel(modelUrl)
       currentModelUrl = modelUrl
       restoreStandaloneConfig(modelUrl)
@@ -522,6 +531,7 @@ export const useLoad3dViewer = (node?: LGraphNode) => {
    * Notifies the viewer that the mouse has entered the viewer area.
    */
   const handleMouseEnter = () => {
+    mouseOnViewer = true
     load3d?.updateStatusMouseOnViewer(true)
   }
 
@@ -529,6 +539,7 @@ export const useLoad3dViewer = (node?: LGraphNode) => {
    * Notifies the viewer that the mouse has left the viewer area.
    */
   const handleMouseLeave = () => {
+    mouseOnViewer = false
     load3d?.updateStatusMouseOnViewer(false)
   }
 
@@ -727,6 +738,7 @@ export const useLoad3dViewer = (node?: LGraphNode) => {
     if (isStandaloneMode.value) {
       saveStandaloneConfig()
     }
+    mouseOnViewer = false
     load3d?.remove()
     load3d = null
     sourceLoad3d = null
diff --git a/src/composables/useNodeHelpContent.test.ts b/src/composables/useNodeHelpContent.test.ts
index 02b3d102f9..2ce7559da0 100644
--- a/src/composables/useNodeHelpContent.test.ts
+++ b/src/composables/useNodeHelpContent.test.ts
@@ -1,10 +1,13 @@
-import { flushPromises } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick, ref } from 'vue'
 
 import { useNodeHelpContent } from '@/composables/useNodeHelpContent'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 
+async function flushPromises() {
+  await new Promise((r) => setTimeout(r, 0))
+}
+
 function createMockNode(
   overrides: Partial<ComfyNodeDefImpl>
 ): ComfyNodeDefImpl {
diff --git a/src/composables/useRangeEditor.ts b/src/composables/useRangeEditor.ts
new file mode 100644
index 0000000000..6ee483ad8a
--- /dev/null
+++ b/src/composables/useRangeEditor.ts
@@ -0,0 +1,113 @@
+import { onBeforeUnmount, ref } from 'vue'
+import type { Ref } from 'vue'
+
+import { clamp } from 'es-toolkit'
+
+import { denormalize, normalize } from '@/utils/mathUtil'
+import type { RangeValue } from '@/lib/litegraph/src/types/widgets'
+
+type HandleType = 'min' | 'max' | 'midpoint'
+
+interface UseRangeEditorOptions {
+  trackRef: Ref<HTMLElement | null>
+  modelValue: Ref<RangeValue>
+  valueMin: Ref<number>
+  valueMax: Ref<number>
+  showMidpoint: Ref<boolean>
+}
+
+export function useRangeEditor({
+  trackRef,
+  modelValue,
+  valueMin,
+  valueMax,
+  showMidpoint
+}: UseRangeEditorOptions) {
+  const activeHandle = ref<HandleType | null>(null)
+  let cleanupDrag: (() => void) | null = null
+
+  function pointerToValue(e: PointerEvent): number {
+    const el = trackRef.value
+    if (!el) return valueMin.value
+    const rect = el.getBoundingClientRect()
+    const normalized = clamp((e.clientX - rect.left) / rect.width, 0, 1)
+    return denormalize(normalized, valueMin.value, valueMax.value)
+  }
+
+  function nearestHandle(value: number): HandleType {
+    const { min, max, midpoint } = modelValue.value
+    const dMin = Math.abs(value - min)
+    const dMax = Math.abs(value - max)
+    let best: HandleType = dMin <= dMax ? 'min' : 'max'
+    const bestDist = Math.min(dMin, dMax)
+    if (midpoint !== undefined && showMidpoint.value) {
+      const midAbs = min + midpoint * (max - min)
+      if (Math.abs(value - midAbs) < bestDist) {
+        best = 'midpoint'
+      }
+    }
+    return best
+  }
+
+  function updateValue(handle: HandleType, value: number) {
+    const current = modelValue.value
+    const clamped = clamp(value, valueMin.value, valueMax.value)
+
+    if (handle === 'min') {
+      modelValue.value = { ...current, min: Math.min(clamped, current.max) }
+    } else if (handle === 'max') {
+      modelValue.value = { ...current, max: Math.max(clamped, current.min) }
+    } else {
+      const range = current.max - current.min
+      const midNorm =
+        range > 0 ? normalize(clamped, current.min, current.max) : 0
+      const midpoint = clamp(midNorm, 0, 1)
+      modelValue.value = { ...current, midpoint }
+    }
+  }
+
+  function handleTrackPointerDown(e: PointerEvent) {
+    if (e.button !== 0) return
+    startDrag(nearestHandle(pointerToValue(e)), e)
+  }
+
+  function startDrag(handle: HandleType, e: PointerEvent) {
+    if (e.button !== 0) return
+    cleanupDrag?.()
+
+    activeHandle.value = handle
+    const el = trackRef.value
+    if (!el) return
+
+    el.setPointerCapture(e.pointerId)
+
+    const onMove = (ev: PointerEvent) => {
+      if (!activeHandle.value) return
+      updateValue(activeHandle.value, pointerToValue(ev))
+    }
+
+    const endDrag = () => {
+      if (!activeHandle.value) return
+      activeHandle.value = null
+      el.removeEventListener('pointermove', onMove)
+      el.removeEventListener('pointerup', endDrag)
+      el.removeEventListener('lostpointercapture', endDrag)
+      cleanupDrag = null
+    }
+
+    cleanupDrag = endDrag
+
+    el.addEventListener('pointermove', onMove)
+    el.addEventListener('pointerup', endDrag)
+    el.addEventListener('lostpointercapture', endDrag)
+  }
+
+  onBeforeUnmount(() => {
+    cleanupDrag?.()
+  })
+
+  return {
+    handleTrackPointerDown,
+    startDrag
+  }
+}
diff --git a/src/composables/useReconnectingNotification.test.ts b/src/composables/useReconnectingNotification.test.ts
new file mode 100644
index 0000000000..d8485231a2
--- /dev/null
+++ b/src/composables/useReconnectingNotification.test.ts
@@ -0,0 +1,138 @@
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useReconnectingNotification } from '@/composables/useReconnectingNotification'
+
+const mockToastAdd = vi.fn()
+const mockToastRemove = vi.fn()
+
+vi.mock('primevue/usetoast', () => ({
+  useToast: () => ({
+    add: mockToastAdd,
+    remove: mockToastRemove
+  })
+}))
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key: string) => key
+  })
+}))
+
+const settingMocks = vi.hoisted(() => ({
+  disableToast: false
+}))
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: vi.fn(() => ({
+    get: vi.fn((key: string) => {
+      if (key === 'Comfy.Toast.DisableReconnectingToast')
+        return settingMocks.disableToast
+      return undefined
+    })
+  }))
+}))
+
+describe('useReconnectingNotification', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    vi.useFakeTimers()
+    vi.clearAllMocks()
+    settingMocks.disableToast = false
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('does not show toast immediately on reconnecting', () => {
+    const { onReconnecting } = useReconnectingNotification()
+
+    onReconnecting()
+
+    expect(mockToastAdd).not.toHaveBeenCalled()
+  })
+
+  it('shows error toast after delay', () => {
+    const { onReconnecting } = useReconnectingNotification()
+
+    onReconnecting()
+    vi.advanceTimersByTime(1500)
+
+    expect(mockToastAdd).toHaveBeenCalledWith(
+      expect.objectContaining({
+        severity: 'error',
+        summary: 'g.reconnecting'
+      })
+    )
+  })
+
+  it('suppresses toast when reconnected before delay expires', () => {
+    const { onReconnecting, onReconnected } = useReconnectingNotification()
+
+    onReconnecting()
+    vi.advanceTimersByTime(500)
+    onReconnected()
+    vi.advanceTimersByTime(1500)
+
+    expect(mockToastAdd).not.toHaveBeenCalled()
+    expect(mockToastRemove).not.toHaveBeenCalled()
+  })
+
+  it('removes toast and shows success when reconnected after delay', () => {
+    const { onReconnecting, onReconnected } = useReconnectingNotification()
+
+    onReconnecting()
+    vi.advanceTimersByTime(1500)
+    mockToastAdd.mockClear()
+
+    onReconnected()
+
+    expect(mockToastRemove).toHaveBeenCalledWith(
+      expect.objectContaining({
+        severity: 'error',
+        summary: 'g.reconnecting'
+      })
+    )
+    expect(mockToastAdd).toHaveBeenCalledWith(
+      expect.objectContaining({
+        severity: 'success',
+        summary: 'g.reconnected',
+        life: 2000
+      })
+    )
+  })
+
+  it('does nothing when toast is disabled via setting', () => {
+    settingMocks.disableToast = true
+    const { onReconnecting, onReconnected } = useReconnectingNotification()
+
+    onReconnecting()
+    vi.advanceTimersByTime(1500)
+    onReconnected()
+
+    expect(mockToastAdd).not.toHaveBeenCalled()
+    expect(mockToastRemove).not.toHaveBeenCalled()
+  })
+
+  it('does nothing when onReconnected is called without prior onReconnecting', () => {
+    const { onReconnected } = useReconnectingNotification()
+
+    onReconnected()
+
+    expect(mockToastAdd).not.toHaveBeenCalled()
+    expect(mockToastRemove).not.toHaveBeenCalled()
+  })
+
+  it('handles multiple reconnecting events without duplicating toasts', () => {
+    const { onReconnecting } = useReconnectingNotification()
+
+    onReconnecting()
+    vi.advanceTimersByTime(1500) // first toast fires
+    onReconnecting() // second reconnecting event
+    vi.advanceTimersByTime(1500) // second toast fires
+
+    expect(mockToastAdd).toHaveBeenCalledTimes(2)
+  })
+})
diff --git a/src/composables/useReconnectingNotification.ts b/src/composables/useReconnectingNotification.ts
new file mode 100644
index 0000000000..605bf3bf1c
--- /dev/null
+++ b/src/composables/useReconnectingNotification.ts
@@ -0,0 +1,52 @@
+import { useTimeoutFn } from '@vueuse/core'
+import type { ToastMessageOptions } from 'primevue/toast'
+import { useToast } from 'primevue/usetoast'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useSettingStore } from '@/platform/settings/settingStore'
+
+const RECONNECT_TOAST_DELAY_MS = 1500
+
+export function useReconnectingNotification() {
+  const { t } = useI18n()
+  const toast = useToast()
+  const settingStore = useSettingStore()
+
+  const reconnectingMessage: ToastMessageOptions = {
+    severity: 'error',
+    summary: t('g.reconnecting')
+  }
+
+  const reconnectingToastShown = ref(false)
+
+  const { start, stop } = useTimeoutFn(
+    () => {
+      toast.add(reconnectingMessage)
+      reconnectingToastShown.value = true
+    },
+    RECONNECT_TOAST_DELAY_MS,
+    { immediate: false }
+  )
+
+  function onReconnecting() {
+    if (settingStore.get('Comfy.Toast.DisableReconnectingToast')) return
+    start()
+  }
+
+  function onReconnected() {
+    stop()
+
+    if (reconnectingToastShown.value) {
+      toast.remove(reconnectingMessage)
+      toast.add({
+        severity: 'success',
+        summary: t('g.reconnected'),
+        life: 2000
+      })
+      reconnectingToastShown.value = false
+    }
+  }
+
+  return { onReconnecting, onReconnected }
+}
diff --git a/src/composables/useServerLogs.test.ts b/src/composables/useServerLogs.test.ts
index c056b6f3a0..afa347a1c3 100644
--- a/src/composables/useServerLogs.test.ts
+++ b/src/composables/useServerLogs.test.ts
@@ -1,3 +1,4 @@
+import { fromAny } from '@total-typescript/shoehorn'
 import { useEventListener } from '@vueuse/core'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
@@ -79,10 +80,10 @@ describe('useServerLogs', () => {
 
     // Simulate receiving a log event
     const mockEvent = new CustomEvent('logs', {
-      detail: {
+      detail: fromAny<LogsWsMessage, unknown>({
         type: 'logs',
         entries: [{ m: 'Log message 1' }, { m: 'Log message 2' }]
-      } as unknown as LogsWsMessage
+      })
     }) as CustomEvent<LogsWsMessage>
 
     eventCallback(mockEvent)
@@ -103,14 +104,14 @@ describe('useServerLogs', () => {
     ) => void
 
     const mockEvent = new CustomEvent('logs', {
-      detail: {
+      detail: fromAny<LogsWsMessage, unknown>({
         type: 'logs',
         entries: [
           { m: 'Log message 1 dont remove me' },
           { m: 'remove me' },
           { m: '' }
         ]
-      } as unknown as LogsWsMessage
+      })
     }) as CustomEvent<LogsWsMessage>
 
     eventCallback(mockEvent)
diff --git a/src/composables/useWaveAudioPlayer.test.ts b/src/composables/useWaveAudioPlayer.test.ts
index e84b73b774..f77e8dc440 100644
--- a/src/composables/useWaveAudioPlayer.test.ts
+++ b/src/composables/useWaveAudioPlayer.test.ts
@@ -1,3 +1,4 @@
+import { fromAny } from '@total-typescript/shoehorn'
 import { ref } from 'vue'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 
@@ -80,10 +81,12 @@ describe('useWaveAudioPlayer', () => {
 
     const mockDecodeAudioData = vi.fn(() => Promise.resolve(mockAudioBuffer))
     const mockClose = vi.fn().mockResolvedValue(undefined)
-    globalThis.AudioContext = class {
-      decodeAudioData = mockDecodeAudioData
-      close = mockClose
-    } as unknown as typeof AudioContext
+    globalThis.AudioContext = fromAny<typeof AudioContext, unknown>(
+      class {
+        decodeAudioData = mockDecodeAudioData
+        close = mockClose
+      }
+    )
 
     mockFetchApi.mockResolvedValue({
       ok: true,
diff --git a/src/core/graph/subgraph/matchPromotedInput.test.ts b/src/core/graph/subgraph/matchPromotedInput.test.ts
index 82787f4057..612c47cf86 100644
--- a/src/core/graph/subgraph/matchPromotedInput.test.ts
+++ b/src/core/graph/subgraph/matchPromotedInput.test.ts
@@ -1,7 +1,7 @@
+import { fromPartial } from '@total-typescript/shoehorn'
 import { describe, expect, it } from 'vitest'
 
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
-
 import { matchPromotedInput } from './matchPromotedInput'
 
 type MockInput = {
@@ -31,10 +31,12 @@ describe(matchPromotedInput, () => {
     }
 
     const matched = matchPromotedInput(
-      [aliasInput, exactInput] as unknown as Array<{
-        name: string
-        _widget?: IBaseWidget
-      }>,
+      fromPartial<
+        Array<{
+          name: string
+          _widget?: IBaseWidget
+        }>
+      >([aliasInput, exactInput]),
       targetWidget
     )
 
@@ -48,7 +50,7 @@ describe(matchPromotedInput, () => {
     }
 
     const matched = matchPromotedInput(
-      [aliasInput] as unknown as Array<{ name: string; _widget?: IBaseWidget }>,
+      fromPartial<Array<{ name: string; _widget?: IBaseWidget }>>([aliasInput]),
       targetWidget
     )
 
@@ -65,10 +67,12 @@ describe(matchPromotedInput, () => {
     }
 
     const matched = matchPromotedInput(
-      [firstAliasInput, secondAliasInput] as unknown as Array<{
-        name: string
-        _widget?: IBaseWidget
-      }>,
+      fromPartial<
+        Array<{
+          name: string
+          _widget?: IBaseWidget
+        }>
+      >([firstAliasInput, secondAliasInput]),
       targetWidget
     )
 
diff --git a/src/core/graph/subgraph/promotedWidgetTypes.ts b/src/core/graph/subgraph/promotedWidgetTypes.ts
index 69f28879d9..a1e52f6a5e 100644
--- a/src/core/graph/subgraph/promotedWidgetTypes.ts
+++ b/src/core/graph/subgraph/promotedWidgetTypes.ts
@@ -24,6 +24,8 @@ export interface PromotedWidgetView extends IBaseWidget {
    * origin.
    */
   readonly disambiguatingSourceNodeId?: string
+  /** Whether the resolved source widget is workflow-persistent. */
+  readonly sourceSerialize: boolean
 }
 
 export function isPromotedWidgetView(
diff --git a/src/core/graph/subgraph/promotedWidgetView.test.ts b/src/core/graph/subgraph/promotedWidgetView.test.ts
index 75d471ab67..d80ebeeb3d 100644
--- a/src/core/graph/subgraph/promotedWidgetView.test.ts
+++ b/src/core/graph/subgraph/promotedWidgetView.test.ts
@@ -1,6 +1,7 @@
 import { createTestingPinia } from '@pinia/testing'
 import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, test, vi } from 'vitest'
+import { fromAny, fromPartial } from '@total-typescript/shoehorn'
 
 // Barrel import must come first to avoid circular dependency
 // (promotedWidgetView → widgetMap → BaseWidget → LegacyWidget → barrel)
@@ -97,11 +98,12 @@ function promotedWidgets(node: SubgraphNode): PromotedWidgetView[] {
 }
 
 function callSyncPromotions(node: SubgraphNode) {
-  ;(
-    node as unknown as {
+  fromAny<
+    {
       _syncPromotions: () => void
-    }
-  )._syncPromotions()
+    },
+    unknown
+  >(node)._syncPromotions()
 }
 
 describe(createPromotedWidgetView, () => {
@@ -156,7 +158,9 @@ describe(createPromotedWidgetView, () => {
     const [subgraphNode] = setupSubgraph()
     const view = createPromotedWidgetView(subgraphNode, '1', 'myWidget')
     // node is defined via Object.defineProperty at runtime but not on the TS interface
-    expect((view as unknown as Record<string, unknown>).node).toBe(subgraphNode)
+    expect(fromAny<Record<string, unknown>, unknown>(view).node).toBe(
+      subgraphNode
+    )
   })
 
   test('serialize is false', () => {
@@ -289,7 +293,7 @@ describe(createPromotedWidgetView, () => {
       value: 'initial',
       options: {}
     } satisfies Pick<IBaseWidget, 'name' | 'type' | 'value' | 'options'>
-    const fallbackWidget = fallbackWidgetShape as unknown as IBaseWidget
+    const fallbackWidget = fromPartial<IBaseWidget>(fallbackWidgetShape)
     innerNode.widgets = [fallbackWidget]
 
     const widgetValueStore = useWidgetValueStore()
@@ -398,13 +402,13 @@ describe(createPromotedWidgetView, () => {
     subgraphNode.pos = [10, 20]
     const innerNode = firstInnerNode(innerNodes)
     const mouse = vi.fn(() => true)
-    const legacyWidget = {
+    const legacyWidget = fromAny<IBaseWidget, unknown>({
       name: 'legacyMouse',
       type: 'mystery-legacy',
       value: 'val',
       options: {},
       mouse
-    } as unknown as IBaseWidget
+    })
     innerNode.widgets = [legacyWidget]
 
     const view = createPromotedWidgetView(
@@ -1448,17 +1452,20 @@ describe('widgets getter caching', () => {
     subgraphNode.rootGraph.primaryCanvas = fakeCanvas as LGraphCanvas
 
     const reconcileSpy = vi.spyOn(
-      subgraphNode as unknown as {
-        _buildPromotionReconcileState: (
-          entries: Array<{ sourceNodeId: string; sourceWidgetName: string }>,
-          linkedEntries: Array<{
-            inputName: string
-            inputKey: string
-            sourceNodeId: string
-            sourceWidgetName: string
-          }>
-        ) => unknown
-      },
+      fromAny<
+        {
+          _buildPromotionReconcileState: (
+            entries: Array<{ sourceNodeId: string; sourceWidgetName: string }>,
+            linkedEntries: Array<{
+              inputName: string
+              inputKey: string
+              sourceNodeId: string
+              sourceWidgetName: string
+            }>
+          ) => unknown
+        },
+        unknown
+      >(subgraphNode),
       '_buildPromotionReconcileState'
     )
 
@@ -1478,17 +1485,20 @@ describe('widgets getter caching', () => {
     subgraphNode.rootGraph.primaryCanvas = fakeCanvas as LGraphCanvas
 
     const reconcileSpy = vi.spyOn(
-      subgraphNode as unknown as {
-        _buildPromotionReconcileState: (
-          entries: Array<{ sourceNodeId: string; sourceWidgetName: string }>,
-          linkedEntries: Array<{
-            inputName: string
-            inputKey: string
-            sourceNodeId: string
-            sourceWidgetName: string
-          }>
-        ) => unknown
-      },
+      fromAny<
+        {
+          _buildPromotionReconcileState: (
+            entries: Array<{ sourceNodeId: string; sourceWidgetName: string }>,
+            linkedEntries: Array<{
+              inputName: string
+              inputKey: string
+              sourceNodeId: string
+              sourceWidgetName: string
+            }>
+          ) => unknown
+        },
+        unknown
+      >(subgraphNode),
       '_buildPromotionReconcileState'
     )
 
@@ -1522,9 +1532,14 @@ describe('widgets getter caching', () => {
     subgraph.inputNode.slots[0].connect(linkedInputB, linkedNodeB)
 
     const resolveSpy = vi.spyOn(
-      subgraphNode as unknown as {
-        _resolveLinkedPromotionBySubgraphInput: (...args: unknown[]) => unknown
-      },
+      fromAny<
+        {
+          _resolveLinkedPromotionBySubgraphInput: (
+            ...args: unknown[]
+          ) => unknown
+        },
+        unknown
+      >(subgraphNode),
       '_resolveLinkedPromotionBySubgraphInput'
     )
 
@@ -1923,32 +1938,34 @@ function createFakeCanvasContext() {
 
 function createInspectableCanvasContext(fillText = vi.fn()) {
   const fallback = vi.fn()
-  return new Proxy(
-    {
-      fillText,
-      beginPath: vi.fn(),
-      roundRect: vi.fn(),
-      rect: vi.fn(),
-      fill: vi.fn(),
-      stroke: vi.fn(),
-      moveTo: vi.fn(),
-      lineTo: vi.fn(),
-      arc: vi.fn(),
-      measureText: (text: string) => ({ width: text.length * 8 }),
-      fillStyle: '#fff',
-      strokeStyle: '#fff',
-      textAlign: 'left',
-      globalAlpha: 1,
-      lineWidth: 1
-    } as Record<string, unknown>,
-    {
-      get(target, key) {
-        if (typeof key === 'string' && key in target)
-          return target[key as keyof typeof target]
-        return fallback
+  return fromAny<CanvasRenderingContext2D, unknown>(
+    new Proxy(
+      {
+        fillText,
+        beginPath: vi.fn(),
+        roundRect: vi.fn(),
+        rect: vi.fn(),
+        fill: vi.fn(),
+        stroke: vi.fn(),
+        moveTo: vi.fn(),
+        lineTo: vi.fn(),
+        arc: vi.fn(),
+        measureText: (text: string) => ({ width: text.length * 8 }),
+        fillStyle: '#fff',
+        strokeStyle: '#fff',
+        textAlign: 'left',
+        globalAlpha: 1,
+        lineWidth: 1
+      } as Record<string, unknown>,
+      {
+        get(target, key) {
+          if (typeof key === 'string' && key in target)
+            return target[key as keyof typeof target]
+          return fallback
+        }
       }
-    }
-  ) as unknown as CanvasRenderingContext2D
+    )
+  )
 }
 
 function createTwoLevelNestedSubgraph() {
diff --git a/src/core/graph/subgraph/promotedWidgetView.ts b/src/core/graph/subgraph/promotedWidgetView.ts
index 610ba4cbec..f7e5ee1789 100644
--- a/src/core/graph/subgraph/promotedWidgetView.ts
+++ b/src/core/graph/subgraph/promotedWidgetView.ts
@@ -1,3 +1,6 @@
+import { isEqual } from 'es-toolkit'
+
+import type { LGraph } from '@/lib/litegraph/src/LGraph'
 import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode'
 import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
 import type { CanvasPointer } from '@/lib/litegraph/src/CanvasPointer'
@@ -50,6 +53,43 @@ function hasLegacyMouse(widget: IBaseWidget): widget is LegacyMouseWidget {
 }
 
 const designTokenCache = new Map<string, string>()
+const promotedSourceWriteMetaByGraph = new WeakMap<
+  LGraph,
+  Map<string, PromotedSourceWriteMeta>
+>()
+
+interface PromotedSourceWriteMeta {
+  value: IBaseWidget['value']
+  writerInstanceId: string
+}
+
+function cloneWidgetValue<TValue extends IBaseWidget['value']>(
+  value: TValue
+): TValue {
+  return value != null && typeof value === 'object'
+    ? (JSON.parse(JSON.stringify(value)) as TValue)
+    : value
+}
+
+function getPromotedSourceWriteMeta(
+  graph: LGraph,
+  sourceKey: string
+): PromotedSourceWriteMeta | undefined {
+  return promotedSourceWriteMetaByGraph.get(graph)?.get(sourceKey)
+}
+
+function setPromotedSourceWriteMeta(
+  graph: LGraph,
+  sourceKey: string,
+  meta: PromotedSourceWriteMeta
+): void {
+  let metaBySource = promotedSourceWriteMetaByGraph.get(graph)
+  if (!metaBySource) {
+    metaBySource = new Map<string, PromotedSourceWriteMeta>()
+    promotedSourceWriteMetaByGraph.set(graph, metaBySource)
+  }
+  metaBySource.set(sourceKey, meta)
+}
 
 export function createPromotedWidgetView(
   subgraphNode: SubgraphNode,
@@ -77,6 +117,15 @@ class PromotedWidgetView implements IPromotedWidgetView {
 
   readonly serialize = false
 
+  /**
+   * Whether the resolved source widget is workflow-persistent.
+   * Used by SubgraphNode.serialize to skip preview/audio/video widgets
+   * whose source sets serialize = false.
+   */
+  get sourceSerialize(): boolean {
+    return this.resolveDeepest()?.widget.serialize !== false
+  }
+
   last_y?: number
   computedHeight?: number
 
@@ -149,13 +198,52 @@ class PromotedWidgetView implements IPromotedWidgetView {
     return this.resolveDeepest()?.widget.linkedWidgets
   }
 
+  private get _instanceKey(): string {
+    return this.disambiguatingSourceNodeId
+      ? `${this.sourceNodeId}:${this.sourceWidgetName}:${this.disambiguatingSourceNodeId}`
+      : `${this.sourceNodeId}:${this.sourceWidgetName}`
+  }
+
+  private get _sharedSourceKey(): string {
+    return this.disambiguatingSourceNodeId
+      ? `${this.subgraphNode.subgraph.id}:${this.sourceNodeId}:${this.sourceWidgetName}:${this.disambiguatingSourceNodeId}`
+      : `${this.subgraphNode.subgraph.id}:${this.sourceNodeId}:${this.sourceWidgetName}`
+  }
+
   get value(): IBaseWidget['value'] {
-    const state = this.getWidgetState()
-    if (state && isWidgetValue(state.value)) return state.value
-    return this.resolveAtHost()?.widget.value
+    return this.getTrackedValue()
+  }
+
+  /**
+   * Execution-time serialization — returns the per-instance value stored
+   * during configure, falling back to the regular value getter.
+   *
+   * The widget state store is shared across instances (keyed by inner node
+   * ID), so the regular getter returns the last-configured value for all
+   * instances.  graphToPrompt already prefers serializeValue over .value,
+   * so this is the hook that makes multi-instance execution correct.
+   */
+  serializeValue(): IBaseWidget['value'] {
+    return this.getTrackedValue()
   }
 
   set value(value: IBaseWidget['value']) {
+    this.captureSiblingFallbackValues()
+
+    // Keep per-instance map in sync for execution (graphToPrompt)
+    this.subgraphNode._instanceWidgetValues.set(
+      this._instanceKey,
+      cloneWidgetValue(value)
+    )
+    setPromotedSourceWriteMeta(
+      this.subgraphNode.rootGraph,
+      this._sharedSourceKey,
+      {
+        value: cloneWidgetValue(value),
+        writerInstanceId: String(this.subgraphNode.id)
+      }
+    )
+
     const linkedWidgets = this.getLinkedInputWidgets()
     if (linkedWidgets.length > 0) {
       const widgetStore = useWidgetValueStore()
@@ -385,6 +473,39 @@ class PromotedWidgetView implements IPromotedWidgetView {
     return resolved
   }
 
+  private getTrackedValue(): IBaseWidget['value'] {
+    const instanceValue = this.subgraphNode._instanceWidgetValues.get(
+      this._instanceKey
+    )
+    const sharedValue = this.getSharedValue()
+
+    if (instanceValue === undefined) return sharedValue
+
+    const sourceWriteMeta = getPromotedSourceWriteMeta(
+      this.subgraphNode.rootGraph,
+      this._sharedSourceKey
+    )
+    if (
+      sharedValue !== undefined &&
+      sourceWriteMeta &&
+      !isEqual(sharedValue, sourceWriteMeta.value)
+    ) {
+      this.subgraphNode._instanceWidgetValues.set(
+        this._instanceKey,
+        cloneWidgetValue(sharedValue)
+      )
+      return sharedValue
+    }
+
+    return instanceValue as IBaseWidget['value']
+  }
+
+  private getSharedValue(): IBaseWidget['value'] {
+    const state = this.getWidgetState()
+    if (state && isWidgetValue(state.value)) return state.value
+    return this.resolveAtHost()?.widget.value
+  }
+
   private getWidgetState() {
     const linkedState = this.getLinkedInputWidgetStates()[0]
     if (linkedState) return linkedState
@@ -451,6 +572,30 @@ class PromotedWidgetView implements IPromotedWidgetView {
       .filter((state): state is WidgetState => state !== undefined)
   }
 
+  private captureSiblingFallbackValues(): void {
+    const { rootGraph } = this.subgraphNode
+
+    for (const node of rootGraph.nodes) {
+      if (node === this.subgraphNode || !node.isSubgraphNode()) continue
+      if (node.subgraph.id !== this.subgraphNode.subgraph.id) continue
+      if (node._instanceWidgetValues.has(this._instanceKey)) continue
+
+      const siblingView = node.widgets.find(
+        (widget): widget is IPromotedWidgetView =>
+          isPromotedWidgetView(widget) &&
+          widget.sourceNodeId === this.sourceNodeId &&
+          widget.sourceWidgetName === this.sourceWidgetName &&
+          widget.disambiguatingSourceNodeId === this.disambiguatingSourceNodeId
+      )
+      if (!siblingView) continue
+
+      node._instanceWidgetValues.set(
+        this._instanceKey,
+        cloneWidgetValue(siblingView.value)
+      )
+    }
+  }
+
   private getProjectedWidget(resolved: {
     node: LGraphNode
     widget: IBaseWidget
diff --git a/src/core/graph/subgraph/promotionUtils.test.ts b/src/core/graph/subgraph/promotionUtils.test.ts
index 43da1db058..b5f4d949c7 100644
--- a/src/core/graph/subgraph/promotionUtils.test.ts
+++ b/src/core/graph/subgraph/promotionUtils.test.ts
@@ -1,13 +1,14 @@
 import { createTestingPinia } from '@pinia/testing'
+import { fromPartial } from '@total-typescript/shoehorn'
 import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import {
   createTestSubgraph,
   createTestSubgraphNode
 } from '@/lib/litegraph/src/subgraph/__fixtures__/subgraphHelpers'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { usePromotionStore } from '@/stores/promotionStore'
 
 const updatePreviewsMock = vi.hoisted(() => vi.fn())
@@ -19,6 +20,7 @@ import {
   CANVAS_IMAGE_PREVIEW_WIDGET,
   getPromotableWidgets,
   hasUnpromotedWidgets,
+  isLinkedPromotion,
   isPreviewPseudoWidget,
   promoteRecommendedWidgets,
   pruneDisconnected
@@ -29,7 +31,7 @@ function widget(
     Pick<IBaseWidget, 'name' | 'serialize' | 'type' | 'options'>
   >
 ): IBaseWidget {
-  return { name: 'widget', ...overrides } as unknown as IBaseWidget
+  return fromPartial<IBaseWidget>({ name: 'widget', ...overrides })
 }
 
 describe('isPreviewPseudoWidget', () => {
@@ -333,3 +335,84 @@ describe('hasUnpromotedWidgets', () => {
     expect(hasUnpromotedWidgets(subgraphNode)).toBe(false)
   })
 })
+
+describe('isLinkedPromotion', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+  })
+
+  function linkedWidget(
+    sourceNodeId: string,
+    sourceWidgetName: string,
+    extra: Record<string, unknown> = {}
+  ): IBaseWidget {
+    return {
+      sourceNodeId,
+      sourceWidgetName,
+      name: 'value',
+      type: 'text',
+      value: '',
+      options: {},
+      y: 0,
+      ...extra
+    } as unknown as IBaseWidget
+  }
+
+  function createSubgraphWithInputs(count = 1) {
+    const subgraph = createTestSubgraph({
+      inputs: Array.from({ length: count }, (_, i) => ({
+        name: `input_${i}`,
+        type: 'STRING' as const
+      }))
+    })
+    return createTestSubgraphNode(subgraph)
+  }
+
+  it('returns true when an input has a matching _widget', () => {
+    const subgraphNode = createSubgraphWithInputs()
+    subgraphNode.inputs[0]._widget = linkedWidget('3', 'text')
+
+    expect(isLinkedPromotion(subgraphNode, '3', 'text')).toBe(true)
+  })
+
+  it('returns false when no inputs exist or none match', () => {
+    const subgraph = createTestSubgraph()
+    const subgraphNode = createTestSubgraphNode(subgraph)
+
+    expect(isLinkedPromotion(subgraphNode, '999', 'nonexistent')).toBe(false)
+  })
+
+  it('returns false when sourceNodeId matches but sourceWidgetName does not', () => {
+    const subgraphNode = createSubgraphWithInputs()
+    subgraphNode.inputs[0]._widget = linkedWidget('3', 'text')
+
+    expect(isLinkedPromotion(subgraphNode, '3', 'wrong_name')).toBe(false)
+  })
+
+  it('returns false when _widget is undefined on input', () => {
+    const subgraphNode = createSubgraphWithInputs()
+
+    expect(isLinkedPromotion(subgraphNode, '3', 'text')).toBe(false)
+  })
+
+  it('matches by sourceNodeId even when disambiguatingSourceNodeId is present', () => {
+    const subgraphNode = createSubgraphWithInputs()
+    subgraphNode.inputs[0]._widget = linkedWidget('6', 'text', {
+      disambiguatingSourceNodeId: '1'
+    })
+
+    expect(isLinkedPromotion(subgraphNode, '6', 'text')).toBe(true)
+    expect(isLinkedPromotion(subgraphNode, '1', 'text')).toBe(false)
+  })
+
+  it('identifies multiple linked widgets across different inputs', () => {
+    const subgraphNode = createSubgraphWithInputs(2)
+    subgraphNode.inputs[0]._widget = linkedWidget('3', 'string_a')
+    subgraphNode.inputs[1]._widget = linkedWidget('4', 'value')
+
+    expect(isLinkedPromotion(subgraphNode, '3', 'string_a')).toBe(true)
+    expect(isLinkedPromotion(subgraphNode, '4', 'value')).toBe(true)
+    expect(isLinkedPromotion(subgraphNode, '3', 'value')).toBe(false)
+    expect(isLinkedPromotion(subgraphNode, '5', 'string_a')).toBe(false)
+  })
+})
diff --git a/src/core/graph/subgraph/promotionUtils.ts b/src/core/graph/subgraph/promotionUtils.ts
index de1e53dae2..09fe1b7546 100644
--- a/src/core/graph/subgraph/promotionUtils.ts
+++ b/src/core/graph/subgraph/promotionUtils.ts
@@ -27,6 +27,27 @@ export function getWidgetName(w: IBaseWidget): string {
   return isPromotedWidgetView(w) ? w.sourceWidgetName : w.name
 }
 
+/**
+ * Returns true if the given promotion entry corresponds to a linked promotion
+ * on the subgraph node. Linked promotions are driven by subgraph input
+ * connections and cannot be independently hidden or shown.
+ */
+export function isLinkedPromotion(
+  subgraphNode: SubgraphNode,
+  sourceNodeId: string,
+  sourceWidgetName: string
+): boolean {
+  return subgraphNode.inputs.some((input) => {
+    const w = input._widget
+    return (
+      w &&
+      isPromotedWidgetView(w) &&
+      w.sourceNodeId === sourceNodeId &&
+      w.sourceWidgetName === sourceWidgetName
+    )
+  })
+}
+
 export function getSourceNodeId(w: IBaseWidget): string | undefined {
   if (!isPromotedWidgetView(w)) return undefined
   return w.disambiguatingSourceNodeId ?? w.sourceNodeId
@@ -39,7 +60,9 @@ function toPromotionSource(
   return {
     sourceNodeId: String(node.id),
     sourceWidgetName: getWidgetName(widget),
-    disambiguatingSourceNodeId: getSourceNodeId(widget)
+    disambiguatingSourceNodeId: isPromotedWidgetView(widget)
+      ? widget.disambiguatingSourceNodeId
+      : undefined
   }
 }
 
diff --git a/src/core/graph/subgraph/resolveConcretePromotedWidget.test.ts b/src/core/graph/subgraph/resolveConcretePromotedWidget.test.ts
index eb56e6ae90..f9cd77a661 100644
--- a/src/core/graph/subgraph/resolveConcretePromotedWidget.test.ts
+++ b/src/core/graph/subgraph/resolveConcretePromotedWidget.test.ts
@@ -115,7 +115,7 @@ describe('resolvePromotedWidgetAtHost', () => {
 
     expect(resolved).toBeDefined()
     expect(
-      (resolved?.widget as PromotedWidgetStub).disambiguatingSourceNodeId
+      (resolved!.widget as PromotedWidgetStub).disambiguatingSourceNodeId
     ).toBe('2')
   })
 })
diff --git a/src/core/graph/subgraph/resolveSubgraphInputLink.test.ts b/src/core/graph/subgraph/resolveSubgraphInputLink.test.ts
index b4c01047c5..c68d262e9e 100644
--- a/src/core/graph/subgraph/resolveSubgraphInputLink.test.ts
+++ b/src/core/graph/subgraph/resolveSubgraphInputLink.test.ts
@@ -1,4 +1,5 @@
 import { createTestingPinia } from '@pinia/testing'
+import { fromPartial } from '@total-typescript/shoehorn'
 import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, test, vi } from 'vitest'
 
@@ -101,14 +102,14 @@ describe('resolveSubgraphInputLink', () => {
     vi.spyOn(subgraph, 'getLink').mockImplementation((linkId) => {
       if (typeof linkId !== 'number') return originalGetLink(linkId)
       if (linkId === stale.linkId) {
-        return {
+        return fromPartial<ReturnType<typeof subgraph.getLink>>({
           resolve: () => ({
             inputNode: {
               inputs: undefined,
               getWidgetFromSlot: () => ({ name: 'ignored' })
             }
           })
-        } as unknown as ReturnType<typeof subgraph.getLink>
+        })
       }
 
       return originalGetLink(linkId)
diff --git a/src/core/graph/subgraph/subgraphNodePromotion.test.ts b/src/core/graph/subgraph/subgraphNodePromotion.test.ts
index b0203fe4b7..a6aaba7f58 100644
--- a/src/core/graph/subgraph/subgraphNodePromotion.test.ts
+++ b/src/core/graph/subgraph/subgraphNodePromotion.test.ts
@@ -253,7 +253,7 @@ describe('Subgraph proxyWidgets', () => {
     expect(subgraphNode.widgets).toHaveLength(0)
   })
 
-  test('serialize does not produce widgets_values for promoted views', () => {
+  test('serialize stores widgets_values for promoted views', () => {
     const [subgraphNode, innerNodes, innerIds] = setupSubgraph(1)
     innerNodes[0].addWidget('text', 'stringWidget', 'value', () => {})
     usePromotionStore().setPromotions(
@@ -265,9 +265,7 @@ describe('Subgraph proxyWidgets', () => {
 
     const serialized = subgraphNode.serialize()
 
-    // SubgraphNode doesn't set serialize_widgets, so widgets_values is absent.
-    // Even if it were set, views have serialize: false and would be skipped.
-    expect(serialized.widgets_values).toBeUndefined()
+    expect(serialized.widgets_values).toEqual(['value'])
   })
 
   test('serialize preserves proxyWidgets in properties', () => {
diff --git a/src/core/graph/widgets/dynamicWidgets.test.ts b/src/core/graph/widgets/dynamicWidgets.test.ts
index 41b34b4fa9..6033b8701c 100644
--- a/src/core/graph/widgets/dynamicWidgets.test.ts
+++ b/src/core/graph/widgets/dynamicWidgets.test.ts
@@ -143,14 +143,14 @@ describe('Autogrow', () => {
   test('Can add autogrow with min input count', () => {
     const node = testNode()
     addAutogrow(node, { min: 4, input: inputsSpec })
-    expect(node.inputs.length).toBe(4)
+    expect(node.inputs.length).toBe(5)
   })
   test('Adding connections will cause growth up to max', () => {
     const graph = new LGraph()
     const node = testNode()
     graph.add(node)
     addAutogrow(node, { min: 1, input: inputsSpec, prefix: 'test', max: 3 })
-    expect(node.inputs.length).toBe(1)
+    expect(node.inputs.length).toBe(2)
 
     connectInput(node, 0, graph)
     expect(node.inputs.length).toBe(2)
@@ -159,7 +159,7 @@ describe('Autogrow', () => {
     connectInput(node, 2, graph)
     expect(node.inputs.length).toBe(3)
   })
-  test('Removing connections decreases to min', async () => {
+  test('Removing connections decreases to min + 1', async () => {
     const graph = new LGraph()
     const node = testNode()
     graph.add(node)
@@ -204,9 +204,9 @@ describe('Autogrow', () => {
       '0.a0',
       '0.a1',
       '0.a2',
-      '1.b0',
-      '1.b1',
-      '1.b2',
+      '2.b0',
+      '2.b1',
+      '2.b2',
       'aa'
     ])
   })
diff --git a/src/core/graph/widgets/dynamicWidgets.ts b/src/core/graph/widgets/dynamicWidgets.ts
index 6d90c2f56c..2b2e189c24 100644
--- a/src/core/graph/widgets/dynamicWidgets.ts
+++ b/src/core/graph/widgets/dynamicWidgets.ts
@@ -511,7 +511,7 @@ function autogrowInputDisconnected(index: number, node: AutogrowNode) {
       lastInput
     )
   }
-  const removalChecks = groupInputs.slice((min - 1) * stride)
+  const removalChecks = groupInputs.slice(min * stride)
   let i
   for (i = removalChecks.length - stride; i >= 0; i -= stride) {
     if (removalChecks.slice(i, i + stride).some((inp) => inp.link)) break
@@ -597,6 +597,6 @@ function applyAutogrow(node: LGraphNode, inputSpecV2: InputSpecV2) {
     prefix,
     inputSpecs: inputsV2
   }
-  for (let i = 0; i === 0 || i < min; i++)
+  for (let i = 0; i === 0 || i < min + 1; i++)
     addAutogrowGroup(i, inputSpecV2.name, node)
 }
diff --git a/src/core/graph/widgets/matchTypeConfiguring.test.ts b/src/core/graph/widgets/matchTypeConfiguring.test.ts
index 45179b0f52..ac5e4ba15f 100644
--- a/src/core/graph/widgets/matchTypeConfiguring.test.ts
+++ b/src/core/graph/widgets/matchTypeConfiguring.test.ts
@@ -1,4 +1,5 @@
 import { createTestingPinia } from '@pinia/testing'
+import { fromAny } from '@total-typescript/shoehorn'
 import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, test, vi } from 'vitest'
 
@@ -72,8 +73,8 @@ describe('MatchType during configure', () => {
     const link2Id = switchNode.inputs[1].link!
 
     const outputTypeBefore = switchNode.outputs[0].type
-    ;(
-      app as unknown as { configuringGraphLevel: number }
+    fromAny<{ configuringGraphLevel: number }, unknown>(
+      app
     ).configuringGraphLevel = 1
 
     try {
@@ -92,8 +93,8 @@ describe('MatchType during configure', () => {
       expect(graph.links[link2Id]).toBeDefined()
       expect(switchNode.outputs[0].type).toBe(outputTypeBefore)
     } finally {
-      ;(
-        app as unknown as { configuringGraphLevel: number }
+      fromAny<{ configuringGraphLevel: number }, unknown>(
+        app
       ).configuringGraphLevel = 0
     }
   })
diff --git a/src/extensions/core/cloudFeedbackTopbarButton.ts b/src/extensions/core/cloudFeedbackTopbarButton.ts
index c90e76ad8f..f435946b5d 100644
--- a/src/extensions/core/cloudFeedbackTopbarButton.ts
+++ b/src/extensions/core/cloudFeedbackTopbarButton.ts
@@ -1,10 +1,9 @@
 import { t } from '@/i18n'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { buildFeedbackUrl } from '@/platform/support/config'
 import { useExtensionService } from '@/services/extensionService'
 import type { ActionBarButton } from '@/types/comfy'
 
-const feedbackUrl = buildFeedbackUrl()
+const TYPEFORM_SURVEY_URL = 'https://form.typeform.com/to/q7azbWPi'
 
 const buttons: ActionBarButton[] = [
   {
@@ -12,7 +11,7 @@ const buttons: ActionBarButton[] = [
     label: t('actionbar.feedback'),
     tooltip: t('actionbar.feedbackTooltip'),
     onClick: () => {
-      window.open(feedbackUrl, '_blank', 'noopener,noreferrer')
+      window.open(TYPEFORM_SURVEY_URL, '_blank', 'noopener,noreferrer')
     }
   }
 ]
diff --git a/src/extensions/core/customWidgets.clone.test.ts b/src/extensions/core/customWidgets.clone.test.ts
new file mode 100644
index 0000000000..681c8db418
--- /dev/null
+++ b/src/extensions/core/customWidgets.clone.test.ts
@@ -0,0 +1,103 @@
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { afterAll, beforeAll, describe, expect, it } from 'vitest'
+
+import { LGraph, LGraphNode, LiteGraph } from '@/lib/litegraph/src/litegraph'
+import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
+import { app } from '@/scripts/app'
+import { useExtensionStore } from '@/stores/extensionStore'
+import type { ComfyExtension } from '@/types/comfy'
+
+const TEST_CUSTOM_COMBO_TYPE = 'test/CustomComboCopyPaste'
+
+class TestCustomComboNode extends LGraphNode {
+  static override title = 'CustomCombo'
+
+  constructor() {
+    super('CustomCombo')
+    this.serialize_widgets = true
+    this.addOutput('value', '*')
+    this.addWidget('combo', 'value', '', () => {}, {
+      values: [] as string[]
+    })
+  }
+}
+
+function findWidget(node: LGraphNode, name: string) {
+  return node.widgets?.find((widget) => widget.name === name)
+}
+
+function getCustomWidgetsExtension(): ComfyExtension {
+  const extension = useExtensionStore().extensions.find(
+    (candidate) => candidate.name === 'Comfy.CustomWidgets'
+  )
+
+  if (!extension) {
+    throw new Error('Comfy.CustomWidgets extension was not registered')
+  }
+
+  return extension
+}
+
+describe('CustomCombo copy/paste', () => {
+  beforeAll(async () => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    await import('./customWidgets')
+
+    const extension = getCustomWidgetsExtension()
+    await extension.beforeRegisterNodeDef?.(
+      TestCustomComboNode,
+      { name: 'CustomCombo' } as ComfyNodeDef,
+      app
+    )
+
+    if (LiteGraph.registered_node_types[TEST_CUSTOM_COMBO_TYPE]) {
+      LiteGraph.unregisterNodeType(TEST_CUSTOM_COMBO_TYPE)
+    }
+    LiteGraph.registerNodeType(TEST_CUSTOM_COMBO_TYPE, TestCustomComboNode)
+  })
+
+  afterAll(() => {
+    if (LiteGraph.registered_node_types[TEST_CUSTOM_COMBO_TYPE]) {
+      LiteGraph.unregisterNodeType(TEST_CUSTOM_COMBO_TYPE)
+    }
+  })
+
+  it('preserves combo options and selected value through clone and paste', () => {
+    const graph = new LGraph()
+    type AppWithRootGraph = { rootGraphInternal?: LGraph }
+    const appWithRootGraph = app as unknown as AppWithRootGraph
+    const previousRootGraph = appWithRootGraph.rootGraphInternal
+    appWithRootGraph.rootGraphInternal = graph
+
+    try {
+      const original = LiteGraph.createNode(TEST_CUSTOM_COMBO_TYPE)!
+      graph.add(original)
+
+      findWidget(original, 'option1')!.value = 'alpha'
+      findWidget(original, 'option2')!.value = 'beta'
+      findWidget(original, 'option3')!.value = 'gamma'
+      findWidget(original, 'value')!.value = 'beta'
+
+      const clonedSerialised = original.clone()?.serialize()
+
+      expect(clonedSerialised).toBeDefined()
+
+      const pasted = LiteGraph.createNode(TEST_CUSTOM_COMBO_TYPE)!
+      pasted.configure(clonedSerialised!)
+      graph.add(pasted)
+
+      expect(findWidget(pasted, 'value')!.value).toBe('beta')
+      expect(findWidget(pasted, 'option1')!.value).toBe('alpha')
+      expect(findWidget(pasted, 'option2')!.value).toBe('beta')
+      expect(findWidget(pasted, 'option3')!.value).toBe('gamma')
+      expect(findWidget(pasted, 'value')!.options.values).toEqual([
+        'alpha',
+        'beta',
+        'gamma'
+      ])
+    } finally {
+      appWithRootGraph.rootGraphInternal = previousRootGraph
+    }
+  })
+})
diff --git a/src/extensions/core/customWidgets.ts b/src/extensions/core/customWidgets.ts
index d0e08c6743..9db84f61fd 100644
--- a/src/extensions/core/customWidgets.ts
+++ b/src/extensions/core/customWidgets.ts
@@ -63,7 +63,7 @@ function onCustomComboCreated(this: LGraphNode) {
         (w) => w.name.startsWith('option') && w.value
       ).map((w) => `${w.value}`)
     )
-    if (app.configuringGraph) return
+    if (app.configuringGraph || !this.graph) return
     if (values.includes(`${comboWidget.value}`)) return
     comboWidget.value = values[0] ?? ''
     comboWidget.callback?.(comboWidget.value)
@@ -71,6 +71,9 @@ function onCustomComboCreated(this: LGraphNode) {
   comboWidget.callback = useChainCallback(comboWidget.callback, () =>
     this.applyToGraph!()
   )
+  this.onAdded = useChainCallback(this.onAdded, function () {
+    updateCombo()
+  })
 
   function addOption(node: LGraphNode) {
     if (!node.widgets) return
@@ -78,16 +81,17 @@ function onCustomComboCreated(this: LGraphNode) {
     const widgetName = `option${newCount}`
     const widget = node.addWidget('string', widgetName, '', () => {})
     if (!widget) return
+    let localValue = `${widget.value ?? ''}`
 
     Object.defineProperty(widget, 'value', {
       get() {
-        return useWidgetValueStore().getWidget(
-          app.rootGraph.id,
-          node.id,
-          widgetName
-        )?.value
+        return (
+          useWidgetValueStore().getWidget(app.rootGraph.id, node.id, widgetName)
+            ?.value ?? localValue
+        )
       },
       set(v: string) {
+        localValue = v
         const state = useWidgetValueStore().getWidget(
           app.rootGraph.id,
           node.id,
diff --git a/src/extensions/core/load3d/HDRIManager.test.ts b/src/extensions/core/load3d/HDRIManager.test.ts
new file mode 100644
index 0000000000..39b0fd1f71
--- /dev/null
+++ b/src/extensions/core/load3d/HDRIManager.test.ts
@@ -0,0 +1,223 @@
+import * as THREE from 'three'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { HDRIManager } from './HDRIManager'
+import Load3dUtils from './Load3dUtils'
+
+const { mockFromEquirectangular, mockDisposePMREM } = vi.hoisted(() => ({
+  mockFromEquirectangular: vi.fn(),
+  mockDisposePMREM: vi.fn()
+}))
+
+vi.mock('./Load3dUtils', () => ({
+  default: {
+    getFilenameExtension: vi.fn()
+  }
+}))
+
+vi.mock('three', async (importOriginal) => {
+  const actual = await importOriginal<typeof THREE>()
+  class MockPMREMGenerator {
+    compileEquirectangularShader = vi.fn()
+    fromEquirectangular = mockFromEquirectangular
+    dispose = mockDisposePMREM
+  }
+  return { ...actual, PMREMGenerator: MockPMREMGenerator }
+})
+
+vi.mock('three/examples/jsm/loaders/EXRLoader', () => {
+  class EXRLoader {
+    load(
+      _url: string,
+      resolve: (t: THREE.Texture) => void,
+      _onProgress: undefined,
+      _reject: (e: unknown) => void
+    ) {
+      resolve(new THREE.DataTexture(new Uint8Array(4), 1, 1))
+    }
+  }
+  return { EXRLoader }
+})
+
+vi.mock('three/examples/jsm/loaders/RGBELoader', () => {
+  class RGBELoader {
+    load(
+      _url: string,
+      resolve: (t: THREE.Texture) => void,
+      _onProgress: undefined,
+      _reject: (e: unknown) => void
+    ) {
+      resolve(new THREE.DataTexture(new Uint8Array(4), 1, 1))
+    }
+  }
+  return { RGBELoader }
+})
+
+function makeMockEventManager() {
+  return {
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    emitEvent: vi.fn()
+  }
+}
+
+describe('HDRIManager', () => {
+  let scene: THREE.Scene
+  let eventManager: ReturnType<typeof makeMockEventManager>
+  let manager: HDRIManager
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    scene = new THREE.Scene()
+    eventManager = makeMockEventManager()
+
+    mockFromEquirectangular.mockReturnValue({
+      texture: new THREE.Texture(),
+      dispose: vi.fn()
+    })
+
+    manager = new HDRIManager(scene, {} as THREE.WebGLRenderer, eventManager)
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  describe('initial state', () => {
+    it('starts disabled with default intensity', () => {
+      expect(manager.isEnabled).toBe(false)
+      expect(manager.showAsBackground).toBe(false)
+      expect(manager.intensity).toBe(1)
+    })
+  })
+
+  describe('loadHDRI', () => {
+    it('loads .exr files without error', async () => {
+      vi.mocked(Load3dUtils.getFilenameExtension).mockReturnValue('exr')
+
+      await expect(
+        manager.loadHDRI('http://example.com/env.exr')
+      ).resolves.toBeUndefined()
+    })
+
+    it('loads .hdr files without error', async () => {
+      vi.mocked(Load3dUtils.getFilenameExtension).mockReturnValue('hdr')
+
+      await expect(
+        manager.loadHDRI('http://example.com/env.hdr')
+      ).resolves.toBeUndefined()
+    })
+
+    it('applies to scene immediately when already enabled', async () => {
+      vi.mocked(Load3dUtils.getFilenameExtension).mockReturnValue('hdr')
+      manager.setEnabled(true)
+      // No texture loaded yet so scene.environment stays null
+      expect(scene.environment).toBeNull()
+
+      await manager.loadHDRI('http://example.com/env.hdr')
+
+      expect(scene.environment).not.toBeNull()
+    })
+
+    it('does not apply to scene when disabled', async () => {
+      vi.mocked(Load3dUtils.getFilenameExtension).mockReturnValue('hdr')
+
+      await manager.loadHDRI('http://example.com/env.hdr')
+
+      expect(scene.environment).toBeNull()
+    })
+  })
+
+  describe('setEnabled', () => {
+    it('applies environment map to scene when enabled after loading', async () => {
+      vi.mocked(Load3dUtils.getFilenameExtension).mockReturnValue('hdr')
+      await manager.loadHDRI('http://example.com/env.hdr')
+
+      manager.setEnabled(true)
+
+      expect(scene.environment).not.toBeNull()
+      expect(eventManager.emitEvent).toHaveBeenCalledWith('hdriChange', {
+        enabled: true,
+        showAsBackground: false
+      })
+    })
+
+    it('removes environment map from scene when disabled', async () => {
+      vi.mocked(Load3dUtils.getFilenameExtension).mockReturnValue('hdr')
+      await manager.loadHDRI('http://example.com/env.hdr')
+      manager.setEnabled(true)
+
+      manager.setEnabled(false)
+
+      expect(scene.environment).toBeNull()
+      expect(eventManager.emitEvent).toHaveBeenLastCalledWith('hdriChange', {
+        enabled: false,
+        showAsBackground: false
+      })
+    })
+  })
+
+  describe('setIntensity', () => {
+    it('updates scene intensity when enabled', async () => {
+      vi.mocked(Load3dUtils.getFilenameExtension).mockReturnValue('hdr')
+      await manager.loadHDRI('http://example.com/env.hdr')
+      manager.setEnabled(true)
+
+      manager.setIntensity(2.5)
+
+      expect(scene.environmentIntensity).toBe(2.5)
+      expect(manager.intensity).toBe(2.5)
+    })
+
+    it('stores intensity without applying when disabled', () => {
+      manager.setIntensity(3)
+
+      expect(manager.intensity).toBe(3)
+      expect(scene.environmentIntensity).not.toBe(3)
+    })
+  })
+
+  describe('setShowAsBackground', () => {
+    it('sets scene background texture when enabled and showing as background', async () => {
+      vi.mocked(Load3dUtils.getFilenameExtension).mockReturnValue('hdr')
+      await manager.loadHDRI('http://example.com/env.hdr')
+      manager.setEnabled(true)
+
+      manager.setShowAsBackground(true)
+
+      expect(scene.background).not.toBeNull()
+    })
+
+    it('clears scene background when showAsBackground is false', async () => {
+      vi.mocked(Load3dUtils.getFilenameExtension).mockReturnValue('hdr')
+      await manager.loadHDRI('http://example.com/env.hdr')
+      manager.setEnabled(true)
+      manager.setShowAsBackground(true)
+
+      manager.setShowAsBackground(false)
+
+      expect(scene.background).toBeNull()
+    })
+  })
+
+  describe('clear', () => {
+    it('removes HDRI from scene and resets state', async () => {
+      vi.mocked(Load3dUtils.getFilenameExtension).mockReturnValue('hdr')
+      await manager.loadHDRI('http://example.com/env.hdr')
+      manager.setEnabled(true)
+
+      manager.clear()
+
+      expect(manager.isEnabled).toBe(false)
+      expect(scene.environment).toBeNull()
+    })
+  })
+
+  describe('dispose', () => {
+    it('disposes PMREMGenerator', () => {
+      manager.dispose()
+
+      expect(mockDisposePMREM).toHaveBeenCalled()
+    })
+  })
+})
diff --git a/src/extensions/core/load3d/HDRIManager.ts b/src/extensions/core/load3d/HDRIManager.ts
new file mode 100644
index 0000000000..7e27fbce32
--- /dev/null
+++ b/src/extensions/core/load3d/HDRIManager.ts
@@ -0,0 +1,142 @@
+import * as THREE from 'three'
+import { EXRLoader } from 'three/examples/jsm/loaders/EXRLoader'
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'
+
+import Load3dUtils from './Load3dUtils'
+import type { EventManagerInterface } from './interfaces'
+
+export class HDRIManager {
+  private scene: THREE.Scene
+  private renderer: THREE.WebGLRenderer
+  private pmremGenerator: THREE.PMREMGenerator
+  private eventManager: EventManagerInterface
+
+  private hdriTexture: THREE.Texture | null = null
+  private envMapTarget: THREE.WebGLRenderTarget | null = null
+
+  private _isEnabled: boolean = false
+  private _showAsBackground: boolean = false
+  private _intensity: number = 1
+
+  get isEnabled() {
+    return this._isEnabled
+  }
+
+  get showAsBackground() {
+    return this._showAsBackground
+  }
+
+  get intensity() {
+    return this._intensity
+  }
+
+  constructor(
+    scene: THREE.Scene,
+    renderer: THREE.WebGLRenderer,
+    eventManager: EventManagerInterface
+  ) {
+    this.scene = scene
+    this.renderer = renderer
+    this.pmremGenerator = new THREE.PMREMGenerator(renderer)
+    this.pmremGenerator.compileEquirectangularShader()
+    this.eventManager = eventManager
+  }
+
+  async loadHDRI(url: string): Promise<void> {
+    const ext = Load3dUtils.getFilenameExtension(url)
+
+    let newTexture: THREE.Texture
+    if (ext === 'exr') {
+      newTexture = await new Promise<THREE.Texture>((resolve, reject) => {
+        new EXRLoader().load(url, resolve, undefined, reject)
+      })
+    } else {
+      newTexture = await new Promise<THREE.Texture>((resolve, reject) => {
+        new RGBELoader().load(url, resolve, undefined, reject)
+      })
+    }
+
+    newTexture.mapping = THREE.EquirectangularReflectionMapping
+    const newEnvMapTarget = this.pmremGenerator.fromEquirectangular(newTexture)
+
+    // Dispose old resources only after the new one is ready
+    this.hdriTexture?.dispose()
+    this.envMapTarget?.dispose()
+    this.hdriTexture = newTexture
+    this.envMapTarget = newEnvMapTarget
+
+    if (this._isEnabled) {
+      this.applyToScene()
+    }
+  }
+
+  setEnabled(enabled: boolean): void {
+    this._isEnabled = enabled
+    if (enabled) {
+      if (this.envMapTarget) {
+        this.applyToScene()
+      }
+    } else {
+      this.removeFromScene()
+    }
+  }
+
+  setShowAsBackground(show: boolean): void {
+    this._showAsBackground = show
+    if (this._isEnabled && this.envMapTarget) {
+      this.applyToScene()
+    }
+  }
+
+  setIntensity(intensity: number): void {
+    this._intensity = intensity
+    if (this._isEnabled) {
+      this.scene.environmentIntensity = intensity
+    }
+  }
+
+  private applyToScene(): void {
+    const envMap = this.envMapTarget?.texture
+    if (!envMap) return
+    this.scene.environment = envMap
+    this.scene.environmentIntensity = this._intensity
+    this.scene.background = this._showAsBackground ? this.hdriTexture : null
+    this.renderer.toneMapping = THREE.ACESFilmicToneMapping
+    this.renderer.toneMappingExposure = 1.0
+    this.eventManager.emitEvent('hdriChange', {
+      enabled: this._isEnabled,
+      showAsBackground: this._showAsBackground
+    })
+  }
+
+  private removeFromScene(): void {
+    this.scene.environment = null
+    if (this.scene.background === this.hdriTexture) {
+      this.scene.background = null
+    }
+    this.renderer.toneMapping = THREE.NoToneMapping
+    this.renderer.toneMappingExposure = 1.0
+    this.eventManager.emitEvent('hdriChange', {
+      enabled: false,
+      showAsBackground: this._showAsBackground
+    })
+  }
+
+  private clearResources(): void {
+    this.removeFromScene()
+    this.hdriTexture?.dispose()
+    this.envMapTarget?.dispose()
+    this.hdriTexture = null
+    this.envMapTarget = null
+  }
+
+  clear(): void {
+    this.clearResources()
+    this._isEnabled = false
+  }
+
+  dispose(): void {
+    this.clearResources()
+    this.pmremGenerator.dispose()
+  }
+}
diff --git a/src/extensions/core/load3d/LightingManager.ts b/src/extensions/core/load3d/LightingManager.ts
index 198edf59de..fc65e34ee3 100644
--- a/src/extensions/core/load3d/LightingManager.ts
+++ b/src/extensions/core/load3d/LightingManager.ts
@@ -10,6 +10,7 @@ export class LightingManager implements LightingManagerInterface {
   currentIntensity: number = 3
   private scene: THREE.Scene
   private eventManager: EventManagerInterface
+  private lightMultipliers = new Map<THREE.Light, number>()
 
   constructor(scene: THREE.Scene, eventManager: EventManagerInterface) {
     this.scene = scene
@@ -25,59 +26,53 @@ export class LightingManager implements LightingManagerInterface {
       this.scene.remove(light)
     })
     this.lights = []
+    this.lightMultipliers.clear()
   }
 
   setupLights(): void {
-    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
-    this.scene.add(ambientLight)
-    this.lights.push(ambientLight)
+    const addLight = (light: THREE.Light, multiplier: number) => {
+      this.scene.add(light)
+      this.lights.push(light)
+      this.lightMultipliers.set(light, multiplier)
+    }
+
+    addLight(new THREE.AmbientLight(0xffffff, 0.5), 0.5)
 
     const mainLight = new THREE.DirectionalLight(0xffffff, 0.8)
     mainLight.position.set(0, 10, 10)
-    this.scene.add(mainLight)
-    this.lights.push(mainLight)
+    addLight(mainLight, 0.8)
 
     const backLight = new THREE.DirectionalLight(0xffffff, 0.5)
     backLight.position.set(0, 10, -10)
-    this.scene.add(backLight)
-    this.lights.push(backLight)
+    addLight(backLight, 0.5)
 
     const leftFillLight = new THREE.DirectionalLight(0xffffff, 0.3)
     leftFillLight.position.set(-10, 0, 0)
-    this.scene.add(leftFillLight)
-    this.lights.push(leftFillLight)
+    addLight(leftFillLight, 0.3)
 
     const rightFillLight = new THREE.DirectionalLight(0xffffff, 0.3)
     rightFillLight.position.set(10, 0, 0)
-    this.scene.add(rightFillLight)
-    this.lights.push(rightFillLight)
+    addLight(rightFillLight, 0.3)
 
     const bottomLight = new THREE.DirectionalLight(0xffffff, 0.2)
     bottomLight.position.set(0, -10, 0)
-    this.scene.add(bottomLight)
-    this.lights.push(bottomLight)
+    addLight(bottomLight, 0.2)
   }
 
   setLightIntensity(intensity: number): void {
     this.currentIntensity = intensity
     this.lights.forEach((light) => {
-      if (light instanceof THREE.DirectionalLight) {
-        if (light === this.lights[1]) {
-          light.intensity = intensity * 0.8
-        } else if (light === this.lights[2]) {
-          light.intensity = intensity * 0.5
-        } else if (light === this.lights[5]) {
-          light.intensity = intensity * 0.2
-        } else {
-          light.intensity = intensity * 0.3
-        }
-      } else if (light instanceof THREE.AmbientLight) {
-        light.intensity = intensity * 0.5
-      }
+      light.intensity = intensity * (this.lightMultipliers.get(light) ?? 1)
     })
 
     this.eventManager.emitEvent('lightIntensityChange', intensity)
   }
 
+  setHDRIMode(hdriActive: boolean): void {
+    this.lights.forEach((light) => {
+      light.visible = !hdriActive
+    })
+  }
+
   reset(): void {}
 }
diff --git a/src/extensions/core/load3d/Load3DConfiguration.ts b/src/extensions/core/load3d/Load3DConfiguration.ts
index d3e6351fd1..816a94b488 100644
--- a/src/extensions/core/load3d/Load3DConfiguration.ts
+++ b/src/extensions/core/load3d/Load3DConfiguration.ts
@@ -3,6 +3,7 @@ import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
 import type {
   CameraConfig,
   CameraState,
+  HDRIConfig,
   LightConfig,
   ModelConfig,
   SceneConfig
@@ -113,6 +114,7 @@ class Load3DConfiguration {
 
     const lightConfig = this.loadLightConfig()
     this.applyLightConfig(lightConfig)
+    if (lightConfig.hdri) this.applyHDRISettings(lightConfig.hdri)
   }
 
   private loadSceneConfig(): SceneConfig {
@@ -140,13 +142,27 @@ class Load3DConfiguration {
   }
 
   private loadLightConfig(): LightConfig {
+    const hdriDefaults: HDRIConfig = {
+      enabled: false,
+      hdriPath: '',
+      showAsBackground: false,
+      intensity: 1
+    }
+
     if (this.properties && 'Light Config' in this.properties) {
-      return this.properties['Light Config'] as LightConfig
+      const saved = this.properties['Light Config'] as Partial<LightConfig>
+      return {
+        intensity:
+          saved.intensity ??
+          (useSettingStore().get('Comfy.Load3D.LightIntensity') as number),
+        hdri: { ...hdriDefaults, ...(saved.hdri ?? {}) }
+      }
     }
 
     return {
-      intensity: useSettingStore().get('Comfy.Load3D.LightIntensity')
-    } as LightConfig
+      intensity: useSettingStore().get('Comfy.Load3D.LightIntensity') as number,
+      hdri: hdriDefaults
+    }
   }
 
   private loadModelConfig(): ModelConfig {
@@ -190,6 +206,15 @@ class Load3DConfiguration {
     this.load3d.setLightIntensity(config.intensity)
   }
 
+  private applyHDRISettings(config: HDRIConfig) {
+    if (!config.hdriPath) return
+    this.load3d.setHDRIIntensity(config.intensity)
+    this.load3d.setHDRIAsBackground(config.showAsBackground)
+    if (config.enabled) {
+      this.load3d.setHDRIEnabled(true)
+    }
+  }
+
   private applyModelConfig(config: ModelConfig) {
     this.load3d.setUpDirection(config.upDirection)
     this.load3d.setMaterialMode(config.materialMode)
diff --git a/src/extensions/core/load3d/Load3d.ts b/src/extensions/core/load3d/Load3d.ts
index 7eeba28a59..5d629cbe58 100644
--- a/src/extensions/core/load3d/Load3d.ts
+++ b/src/extensions/core/load3d/Load3d.ts
@@ -6,6 +6,7 @@ import { AnimationManager } from './AnimationManager'
 import { CameraManager } from './CameraManager'
 import { ControlsManager } from './ControlsManager'
 import { EventManager } from './EventManager'
+import { HDRIManager } from './HDRIManager'
 import { LightingManager } from './LightingManager'
 import { LoaderManager } from './LoaderManager'
 import { ModelExporter } from './ModelExporter'
@@ -54,6 +55,7 @@ class Load3d {
   cameraManager: CameraManager
   controlsManager: ControlsManager
   lightingManager: LightingManager
+  hdriManager: HDRIManager
   viewHelperManager: ViewHelperManager
   loaderManager: LoaderManager
   modelManager: SceneModelManager
@@ -126,6 +128,12 @@ class Load3d {
       this.eventManager
     )
 
+    this.hdriManager = new HDRIManager(
+      this.sceneManager.scene,
+      this.renderer,
+      this.eventManager
+    )
+
     this.viewHelperManager = new ViewHelperManager(
       this.renderer,
       this.getActiveCamera.bind(this),
@@ -635,6 +643,33 @@ class Load3d {
     this.forceRender()
   }
 
+  async loadHDRI(url: string): Promise<void> {
+    await this.hdriManager.loadHDRI(url)
+    this.forceRender()
+  }
+
+  setHDRIEnabled(enabled: boolean): void {
+    this.hdriManager.setEnabled(enabled)
+    this.lightingManager.setHDRIMode(enabled)
+    this.forceRender()
+  }
+
+  setHDRIAsBackground(show: boolean): void {
+    this.hdriManager.setShowAsBackground(show)
+    this.forceRender()
+  }
+
+  setHDRIIntensity(intensity: number): void {
+    this.hdriManager.setIntensity(intensity)
+    this.forceRender()
+  }
+
+  clearHDRI(): void {
+    this.hdriManager.clear()
+    this.lightingManager.setHDRIMode(false)
+    this.forceRender()
+  }
+
   setTargetSize(width: number, height: number): void {
     this.targetWidth = width
     this.targetHeight = height
@@ -858,6 +893,7 @@ class Load3d {
     this.cameraManager.dispose()
     this.controlsManager.dispose()
     this.lightingManager.dispose()
+    this.hdriManager.dispose()
     this.viewHelperManager.dispose()
     this.loaderManager.dispose()
     this.modelManager.dispose()
diff --git a/src/extensions/core/load3d/Load3dUtils.test.ts b/src/extensions/core/load3d/Load3dUtils.test.ts
new file mode 100644
index 0000000000..d1c0507a0b
--- /dev/null
+++ b/src/extensions/core/load3d/Load3dUtils.test.ts
@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest'
+
+import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
+
+describe('Load3dUtils.mapSceneLightIntensityToHdri', () => {
+  it('maps scene slider low end to a small positive HDRI intensity', () => {
+    expect(Load3dUtils.mapSceneLightIntensityToHdri(1, 1, 10)).toBe(0.25)
+    expect(Load3dUtils.mapSceneLightIntensityToHdri(10, 1, 10)).toBe(5)
+  })
+
+  it('maps midpoint proportionally', () => {
+    expect(Load3dUtils.mapSceneLightIntensityToHdri(5.5, 1, 10)).toBeCloseTo(
+      2.5
+    )
+  })
+
+  it('clamps scene ratio and HDRI ceiling', () => {
+    expect(Load3dUtils.mapSceneLightIntensityToHdri(-10, 1, 10)).toBe(0.25)
+    expect(Load3dUtils.mapSceneLightIntensityToHdri(100, 1, 10)).toBe(5)
+  })
+
+  it('uses minimum HDRI when span is zero', () => {
+    expect(Load3dUtils.mapSceneLightIntensityToHdri(3, 5, 5)).toBe(0.25)
+  })
+})
diff --git a/src/extensions/core/load3d/Load3dUtils.ts b/src/extensions/core/load3d/Load3dUtils.ts
index 13095ac96b..6e5e5c9cfd 100644
--- a/src/extensions/core/load3d/Load3dUtils.ts
+++ b/src/extensions/core/load3d/Load3dUtils.ts
@@ -89,6 +89,15 @@ class Load3dUtils {
     return uploadPath
   }
 
+  static getFilenameExtension(url: string): string | undefined {
+    const queryString = url.split('?')[1]
+    if (queryString) {
+      const filename = new URLSearchParams(queryString).get('filename')
+      if (filename) return filename.split('.').pop()?.toLowerCase()
+    }
+    return url.split('?')[0].split('.').pop()?.toLowerCase()
+  }
+
   static splitFilePath(path: string): [string, string] {
     const folder_separator = path.lastIndexOf('/')
     if (folder_separator === -1) {
@@ -122,6 +131,19 @@ class Load3dUtils {
 
     await Promise.all(uploadPromises)
   }
+
+  static mapSceneLightIntensityToHdri(
+    sceneIntensity: number,
+    sceneMin: number,
+    sceneMax: number
+  ): number {
+    const span = sceneMax - sceneMin
+    const t = span > 0 ? (sceneIntensity - sceneMin) / span : 0
+    const clampedT = Math.min(1, Math.max(0, t))
+    const mapped = clampedT * 5
+    const minHdri = 0.25
+    return Math.min(5, Math.max(minHdri, mapped))
+  }
 }
 
 export default Load3dUtils
diff --git a/src/extensions/core/load3d/constants.ts b/src/extensions/core/load3d/constants.ts
index b142da44a9..fb9cc0d985 100644
--- a/src/extensions/core/load3d/constants.ts
+++ b/src/extensions/core/load3d/constants.ts
@@ -16,3 +16,9 @@ export const SUPPORTED_EXTENSIONS = new Set([
 ])
 
 export const SUPPORTED_EXTENSIONS_ACCEPT = [...SUPPORTED_EXTENSIONS].join(',')
+
+export const SUPPORTED_HDRI_EXTENSIONS = new Set(['.hdr', '.exr'])
+
+export const SUPPORTED_HDRI_EXTENSIONS_ACCEPT = [
+  ...SUPPORTED_HDRI_EXTENSIONS
+].join(',')
diff --git a/src/extensions/core/load3d/interfaces.ts b/src/extensions/core/load3d/interfaces.ts
index 6563eaa2d7..d78fd239dc 100644
--- a/src/extensions/core/load3d/interfaces.ts
+++ b/src/extensions/core/load3d/interfaces.ts
@@ -47,6 +47,14 @@ export interface CameraConfig {
 
 export interface LightConfig {
   intensity: number
+  hdri?: HDRIConfig
+}
+
+export interface HDRIConfig {
+  enabled: boolean
+  hdriPath: string
+  showAsBackground: boolean
+  intensity: number
 }
 
 export interface EventCallback<T = unknown> {
diff --git a/src/extensions/core/webcamCapture.ts b/src/extensions/core/webcamCapture.ts
index af41466e74..1350d06a77 100644
--- a/src/extensions/core/webcamCapture.ts
+++ b/src/extensions/core/webcamCapture.ts
@@ -143,9 +143,10 @@ app.registerExtension({
         throw new Error(err)
       }
       const data = await resp.json()
-      const serverName = data.name ?? name
-      const subfolder = data.subfolder ?? 'webcam'
-      return `${subfolder}/${serverName} [temp]`
+      const serverName = data.name || name
+      const subfolder = data.subfolder || 'webcam'
+      const type = data.type || 'temp'
+      return `${subfolder}/${serverName} [${type}]`
     }
 
     // @ts-expect-error fixme ts strict error
diff --git a/src/lib/litegraph/src/LGraph.configure.test.ts b/src/lib/litegraph/src/LGraph.configure.test.ts
deleted file mode 100644
index 2401dfe302..0000000000
--- a/src/lib/litegraph/src/LGraph.configure.test.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// TODO: Fix these tests after migration
-import { describe } from 'vitest'
-
-import { LGraph } from '@/lib/litegraph/src/litegraph'
-
-import { dirtyTest } from './__fixtures__/testExtensions'
-
-describe.skip('LGraph configure()', () => {
-  dirtyTest(
-    'LGraph matches previous snapshot (normal configure() usage)',
-    ({ expect, minimalSerialisableGraph, basicSerialisableGraph }) => {
-      const configuredMinGraph = new LGraph()
-      configuredMinGraph.configure(minimalSerialisableGraph)
-      expect(configuredMinGraph).toMatchSnapshot('configuredMinGraph')
-
-      const configuredBasicGraph = new LGraph()
-      configuredBasicGraph.configure(basicSerialisableGraph)
-      expect(configuredBasicGraph).toMatchSnapshot('configuredBasicGraph')
-    }
-  )
-})
diff --git a/src/lib/litegraph/src/LGraph.constructor.test.ts b/src/lib/litegraph/src/LGraph.constructor.test.ts
deleted file mode 100644
index 4e214cae57..0000000000
--- a/src/lib/litegraph/src/LGraph.constructor.test.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// TODO: Fix these tests after migration
-import { describe } from 'vitest'
-
-import { LGraph } from '@/lib/litegraph/src/litegraph'
-
-import { dirtyTest } from './__fixtures__/testExtensions'
-
-describe.skip('LGraph (constructor only)', () => {
-  dirtyTest(
-    'Matches previous snapshot',
-    ({ expect, minimalSerialisableGraph, basicSerialisableGraph }) => {
-      const minLGraph = new LGraph(minimalSerialisableGraph)
-      expect(minLGraph).toMatchSnapshot('minLGraph')
-
-      const basicLGraph = new LGraph(basicSerialisableGraph)
-      expect(basicLGraph).toMatchSnapshot('basicLGraph')
-    }
-  )
-})
diff --git a/src/lib/litegraph/src/LGraph.test.ts b/src/lib/litegraph/src/LGraph.test.ts
index 3517e035a5..668e109a1e 100644
--- a/src/lib/litegraph/src/LGraph.test.ts
+++ b/src/lib/litegraph/src/LGraph.test.ts
@@ -12,6 +12,7 @@ import {
 } from '@/lib/litegraph/src/litegraph'
 import type { SerialisableGraph } from '@/lib/litegraph/src/types/serialisation'
 import type { UUID } from '@/lib/litegraph/src/utils/uuid'
+import { zeroUuid } from '@/lib/litegraph/src/utils/uuid'
 import { usePromotionStore } from '@/stores/promotionStore'
 import { useWidgetValueStore } from '@/stores/widgetValueStore'
 import {
@@ -1005,3 +1006,25 @@ describe('deduplicateSubgraphNodeIds (via configure)', () => {
     expect(nodeIdSet(graph, SUBGRAPH_B)).toEqual(new Set([20, 21, 22]))
   })
 })
+
+describe('Zero UUID handling in configure', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia())
+  })
+
+  it('rejects zeroUuid for root graphs and assigns a new ID', () => {
+    const graph = new LGraph()
+    const data = graph.serialize()
+    data.id = zeroUuid
+    graph.configure(data)
+    expect(graph.id).not.toBe(zeroUuid)
+  })
+
+  it('preserves zeroUuid for subgraphs', () => {
+    const graph = new LGraph()
+    const subgraphData = { ...createTestSubgraphData(), id: zeroUuid }
+    const subgraph = graph.createSubgraph(subgraphData)
+    subgraph.configure(subgraphData)
+    expect(subgraph.id).toBe(zeroUuid)
+  })
+})
diff --git a/src/lib/litegraph/src/LGraph.ts b/src/lib/litegraph/src/LGraph.ts
index ea16441665..9699e5f453 100644
--- a/src/lib/litegraph/src/LGraph.ts
+++ b/src/lib/litegraph/src/LGraph.ts
@@ -2480,8 +2480,8 @@ export class LGraph
   protected _configureBase(data: ISerialisedGraph | SerialisableGraph): void {
     const { id, extra } = data
 
-    // Create a new graph ID if none is provided
-    if (id) {
+    // Create a new graph ID if none is provided or the zero UUID is used on the root graph
+    if (id && !(this.isRootGraph && id === zeroUuid)) {
       this.id = id
     } else if (this.id === zeroUuid) {
       this.id = createUuidv4()
diff --git a/src/lib/litegraph/src/LGraphCanvas.cloneZIndex.test.ts b/src/lib/litegraph/src/LGraphCanvas.cloneZIndex.test.ts
new file mode 100644
index 0000000000..7cd5c7c36b
--- /dev/null
+++ b/src/lib/litegraph/src/LGraphCanvas.cloneZIndex.test.ts
@@ -0,0 +1,198 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+import { LayoutSource } from '@/renderer/core/layout/types'
+import type { NodeLayout } from '@/renderer/core/layout/types'
+
+import {
+  LGraph,
+  LGraphCanvas,
+  LGraphNode,
+  LiteGraph
+} from '@/lib/litegraph/src/litegraph'
+
+const TEST_NODE_TYPE = 'test/CloneZIndex' as const
+
+class TestNode extends LGraphNode {
+  static override type = TEST_NODE_TYPE
+
+  constructor(title?: string) {
+    super(title ?? TEST_NODE_TYPE)
+    this.type = TEST_NODE_TYPE
+  }
+}
+
+function createCanvas(graph: LGraph): LGraphCanvas {
+  const el = document.createElement('canvas')
+  el.width = 800
+  el.height = 600
+
+  const ctx = {
+    save: vi.fn(),
+    restore: vi.fn(),
+    translate: vi.fn(),
+    scale: vi.fn(),
+    fillRect: vi.fn(),
+    strokeRect: vi.fn(),
+    fillText: vi.fn(),
+    measureText: vi.fn().mockReturnValue({ width: 50 }),
+    beginPath: vi.fn(),
+    moveTo: vi.fn(),
+    lineTo: vi.fn(),
+    stroke: vi.fn(),
+    fill: vi.fn(),
+    closePath: vi.fn(),
+    arc: vi.fn(),
+    rect: vi.fn(),
+    clip: vi.fn(),
+    clearRect: vi.fn(),
+    setTransform: vi.fn(),
+    roundRect: vi.fn(),
+    getTransform: vi
+      .fn()
+      .mockReturnValue({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 }),
+    font: '',
+    fillStyle: '',
+    strokeStyle: '',
+    lineWidth: 1,
+    globalAlpha: 1,
+    textAlign: 'left' as CanvasTextAlign,
+    textBaseline: 'alphabetic' as CanvasTextBaseline
+  } satisfies Partial<CanvasRenderingContext2D>
+
+  el.getContext = vi
+    .fn()
+    .mockReturnValue(ctx as unknown as CanvasRenderingContext2D)
+  el.getBoundingClientRect = vi.fn().mockReturnValue({
+    left: 0,
+    top: 0,
+    width: 800,
+    height: 600
+  })
+
+  return new LGraphCanvas(el, graph, { skip_render: true })
+}
+
+function createLayoutEntry(node: LGraphNode, zIndex: number) {
+  const nodeId = String(node.id)
+  const layout: NodeLayout = {
+    id: nodeId,
+    position: { x: node.pos[0], y: node.pos[1] },
+    size: { width: node.size[0], height: node.size[1] },
+    zIndex,
+    visible: true,
+    bounds: {
+      x: node.pos[0],
+      y: node.pos[1],
+      width: node.size[0],
+      height: node.size[1]
+    }
+  }
+  layoutStore.applyOperation({
+    type: 'createNode',
+    entity: 'node',
+    nodeId,
+    layout,
+    timestamp: Date.now(),
+    source: LayoutSource.Canvas,
+    actor: 'test'
+  })
+}
+
+function setZIndex(nodeId: string, zIndex: number, previousZIndex: number) {
+  layoutStore.applyOperation({
+    type: 'setNodeZIndex',
+    entity: 'node',
+    nodeId,
+    zIndex,
+    previousZIndex,
+    timestamp: Date.now(),
+    source: LayoutSource.Canvas,
+    actor: 'test'
+  })
+}
+
+describe('cloned node z-index in Vue renderer', () => {
+  let graph: LGraph
+  let canvas: LGraphCanvas
+  let previousVueNodesMode: boolean
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    previousVueNodesMode = LiteGraph.vueNodesMode
+    LiteGraph.vueNodesMode = true
+    LiteGraph.registerNodeType(TEST_NODE_TYPE, TestNode)
+
+    graph = new LGraph()
+    canvas = createCanvas(graph)
+    LGraphCanvas.active_canvas = canvas
+
+    layoutStore.initializeFromLiteGraph([])
+
+    // Simulate Vue runtime: create layout entries when nodes are added
+    graph.onNodeAdded = (node: LGraphNode) => {
+      createLayoutEntry(node, 0)
+    }
+  })
+
+  afterEach(() => {
+    LiteGraph.vueNodesMode = previousVueNodesMode
+  })
+
+  it('places cloned nodes above the original node z-index', () => {
+    const originalNode = new TestNode()
+    originalNode.pos = [100, 100]
+    originalNode.size = [200, 100]
+    graph.add(originalNode)
+
+    const originalNodeId = String(originalNode.id)
+
+    setZIndex(originalNodeId, 5, 0)
+
+    const originalLayout = layoutStore.getNodeLayoutRef(originalNodeId).value
+    expect(originalLayout?.zIndex).toBe(5)
+
+    // Clone the node via cloneNodes (same path as right-click > clone)
+    const result = LGraphCanvas.cloneNodes([originalNode])
+    expect(result).toBeDefined()
+    expect(result!.created.length).toBe(1)
+
+    const clonedNode = result!.created[0] as LGraphNode
+    const clonedNodeId = String(clonedNode.id)
+
+    // The cloned node should have a z-index higher than the original
+    const clonedLayout = layoutStore.getNodeLayoutRef(clonedNodeId).value
+    expect(clonedLayout).toBeDefined()
+    expect(clonedLayout!.zIndex).toBeGreaterThan(originalLayout!.zIndex)
+  })
+
+  it('assigns distinct sequential z-indices when cloning multiple nodes', () => {
+    const nodeA = new TestNode()
+    nodeA.pos = [100, 100]
+    nodeA.size = [200, 100]
+    graph.add(nodeA)
+    setZIndex(String(nodeA.id), 3, 0)
+
+    const nodeB = new TestNode()
+    nodeB.pos = [400, 100]
+    nodeB.size = [200, 100]
+    graph.add(nodeB)
+    setZIndex(String(nodeB.id), 7, 0)
+
+    const result = LGraphCanvas.cloneNodes([nodeA, nodeB])
+    expect(result).toBeDefined()
+    expect(result!.created.length).toBe(2)
+
+    const clonedA = result!.created[0] as LGraphNode
+    const clonedB = result!.created[1] as LGraphNode
+    const layoutA = layoutStore.getNodeLayoutRef(String(clonedA.id)).value!
+    const layoutB = layoutStore.getNodeLayoutRef(String(clonedB.id)).value!
+
+    // Both cloned nodes should be above the highest original (z-index 7)
+    expect(layoutA.zIndex).toBeGreaterThan(7)
+    expect(layoutB.zIndex).toBeGreaterThan(7)
+
+    // Each cloned node should have a distinct z-index
+    expect(layoutA.zIndex).not.toBe(layoutB.zIndex)
+  })
+})
diff --git a/src/lib/litegraph/src/LGraphCanvas.groupSelection.test.ts b/src/lib/litegraph/src/LGraphCanvas.groupSelection.test.ts
index ba7ea88b83..4e42b02e18 100644
--- a/src/lib/litegraph/src/LGraphCanvas.groupSelection.test.ts
+++ b/src/lib/litegraph/src/LGraphCanvas.groupSelection.test.ts
@@ -1,7 +1,7 @@
+import { fromAny } from '@total-typescript/shoehorn'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import type { CanvasPointerEvent } from '@/lib/litegraph/src/types/events'
-
 import {
   LGraph,
   LGraphCanvas,
@@ -60,7 +60,7 @@ function createCanvas(graph: LGraph): LGraphCanvas {
 
   el.getContext = vi
     .fn()
-    .mockReturnValue(ctx as unknown as CanvasRenderingContext2D)
+    .mockReturnValue(fromAny<CanvasRenderingContext2D, unknown>(ctx))
   el.getBoundingClientRect = vi.fn().mockReturnValue({
     left: 0,
     top: 0,
diff --git a/src/lib/litegraph/src/LGraphCanvas.ts b/src/lib/litegraph/src/LGraphCanvas.ts
index d13c646d81..2d5a19ff54 100644
--- a/src/lib/litegraph/src/LGraphCanvas.ts
+++ b/src/lib/litegraph/src/LGraphCanvas.ts
@@ -7,6 +7,7 @@ import { AutoPanController } from '@/renderer/core/canvas/useAutoPan'
 import { LitegraphLinkAdapter } from '@/renderer/core/canvas/litegraph/litegraphLinkAdapter'
 import type { LinkRenderContext } from '@/renderer/core/canvas/litegraph/litegraphLinkAdapter'
 import { getSlotPosition } from '@/renderer/core/canvas/litegraph/slotCalculations'
+import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { LayoutSource } from '@/renderer/core/layout/types'
 import { forEachNode } from '@/utils/graphTraversalUtil'
@@ -4270,6 +4271,17 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
     if (newPositions.length) layoutStore.setSource(LayoutSource.Canvas)
     layoutStore.batchUpdateNodeBounds(newPositions)
 
+    // Bring cloned/pasted nodes to front so they render above the originals
+    const allNodes = layoutStore.getAllNodes().value
+    let maxZIndex = 0
+    for (const [, layout] of allNodes) {
+      if (layout.zIndex > maxZIndex) maxZIndex = layout.zIndex
+    }
+    const { setNodeZIndex } = useLayoutMutations()
+    for (let i = 0; i < newPositions.length; i++) {
+      setNodeZIndex(newPositions[i].nodeId, maxZIndex + i + 1)
+    }
+
     this.selectItems(created)
     forEachNode(graph, (n) => n.onGraphConfigured?.())
     forEachNode(graph, (n) => n.onAfterGraphConfigured?.())
diff --git a/src/lib/litegraph/src/__fixtures__/assets/testGraphs.ts b/src/lib/litegraph/src/__fixtures__/assets/testGraphs.ts
index 03a3a12605..5070524db0 100644
--- a/src/lib/litegraph/src/__fixtures__/assets/testGraphs.ts
+++ b/src/lib/litegraph/src/__fixtures__/assets/testGraphs.ts
@@ -39,29 +39,3 @@ export const minimalSerialisableGraph: SerialisableGraph = {
   links: [],
   groups: []
 }
-
-export const basicSerialisableGraph: SerialisableGraph = {
-  id: 'ca9da7d8-fddd-4707-ad32-67be9be13140',
-  revision: 0,
-  version: 1,
-  config: {},
-  state: {
-    lastNodeId: 0,
-    lastLinkId: 0,
-    lastGroupId: 0,
-    lastRerouteId: 0
-  },
-  groups: [
-    {
-      id: 123,
-      bounding: [20, 20, 1, 3],
-      color: '#6029aa',
-      font_size: 14,
-      title: 'A group to test with'
-    }
-  ],
-  nodes: [
-    { id: 1, type: 'mustBeSet' } as Partial<ISerialisedNode> as ISerialisedNode
-  ],
-  links: []
-}
diff --git a/src/lib/litegraph/src/__fixtures__/testExtensions.ts b/src/lib/litegraph/src/__fixtures__/testExtensions.ts
index 6aff554388..e72aaf55ce 100644
--- a/src/lib/litegraph/src/__fixtures__/testExtensions.ts
+++ b/src/lib/litegraph/src/__fixtures__/testExtensions.ts
@@ -2,7 +2,6 @@
 import { test as baseTest } from 'vitest'
 
 import { LGraph } from '@/lib/litegraph/src/LGraph'
-import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type {
   ISerialisedGraph,
   SerialisableGraph
@@ -12,11 +11,7 @@ import floatingBranch from './assets/floatingBranch.json' with { type: 'json' }
 import floatingLink from './assets/floatingLink.json' with { type: 'json' }
 import linkedNodes from './assets/linkedNodes.json' with { type: 'json' }
 import reroutesComplex from './assets/reroutesComplex.json' with { type: 'json' }
-import {
-  basicSerialisableGraph,
-  minimalSerialisableGraph,
-  oldSchemaGraph
-} from './assets/testGraphs'
+import { minimalSerialisableGraph, oldSchemaGraph } from './assets/testGraphs'
 
 interface LitegraphFixtures {
   minimalGraph: LGraph
@@ -28,11 +23,7 @@ interface LitegraphFixtures {
   reroutesComplexGraph: LGraph
 }
 
-/** These fixtures alter global state, and are difficult to reset. Relies on a single test per-file to reset state. */
-interface DirtyFixtures {
-  basicSerialisableGraph: SerialisableGraph
-}
-
+/** LiteGraph test fixtures. Each creates an LGraph from cloned data; LGraph singletons may still share some global state. */
 export const test = baseTest.extend<LitegraphFixtures>({
   minimalGraph: async ({}, use) => {
     // Before each test function
@@ -65,17 +56,3 @@ export const test = baseTest.extend<LitegraphFixtures>({
     await use(graph)
   }
 })
-
-/** Test that use {@link DirtyFixtures}. One test per file. */
-export const dirtyTest = test.extend<DirtyFixtures>({
-  basicSerialisableGraph: async ({}, use) => {
-    if (!basicSerialisableGraph.nodes) throw new Error('Invalid test object')
-
-    // Register node types
-    for (const node of basicSerialisableGraph.nodes) {
-      LiteGraph.registerNodeType(node.type!, LiteGraph.LGraphNode)
-    }
-
-    await use(structuredClone(basicSerialisableGraph))
-  }
-})
diff --git a/src/lib/litegraph/src/canvas/LinkConnector.test.ts b/src/lib/litegraph/src/canvas/LinkConnector.test.ts
index 9ec8e3dfbc..75a8558cb1 100644
--- a/src/lib/litegraph/src/canvas/LinkConnector.test.ts
+++ b/src/lib/litegraph/src/canvas/LinkConnector.test.ts
@@ -1,9 +1,7 @@
-// TODO: Fix these tests after migration
 import { beforeEach, describe, expect, test, vi } from 'vitest'
 
 import { LinkConnector } from '@/lib/litegraph/src/litegraph'
 import {
-  createMockCanvasPointerEvent,
   createMockLGraphNode,
   createMockLinkNetwork,
   createMockNodeInputSlot,
@@ -42,7 +40,7 @@ function mockRenderLinkImpl(canConnect: boolean): RenderLinkItem {
 const mockNode = createMockLGraphNode()
 const mockInput = createMockNodeInputSlot()
 
-describe.skip('LinkConnector', () => {
+describe('LinkConnector', () => {
   let connector: LinkConnector
 
   beforeEach(() => {
@@ -52,7 +50,7 @@ describe.skip('LinkConnector', () => {
     vi.clearAllMocks()
   })
 
-  describe.skip('isInputValidDrop', () => {
+  describe('isInputValidDrop', () => {
     test('should return false if there are no render links', () => {
       expect(connector.isInputValidDrop(mockNode, mockInput)).toBe(false)
     })
@@ -74,110 +72,5 @@ describe.skip('LinkConnector', () => {
       expect(link1.canConnectToInput).toHaveBeenCalledWith(mockNode, mockInput)
       expect(link2.canConnectToInput).toHaveBeenCalledWith(mockNode, mockInput)
     })
-
-    test('should call canConnectToInput on each render link until one returns true', () => {
-      const link1 = mockRenderLinkImpl(false)
-      const link2 = mockRenderLinkImpl(true) // This one can connect
-      const link3 = mockRenderLinkImpl(false)
-      connector.renderLinks.push(link1, link2, link3)
-
-      expect(connector.isInputValidDrop(mockNode, mockInput)).toBe(true)
-
-      expect(link1.canConnectToInput).toHaveBeenCalledTimes(1)
-      expect(link2.canConnectToInput).toHaveBeenCalledTimes(1) // Stops here
-      expect(link3.canConnectToInput).not.toHaveBeenCalled() // Should not be called
-    })
-  })
-
-  describe.skip('listenUntilReset', () => {
-    test('should add listener for the specified event and for reset', () => {
-      const listener = vi.fn()
-      const addEventListenerSpy = vi.spyOn(connector.events, 'addEventListener')
-
-      connector.listenUntilReset('before-drop-links', listener)
-
-      expect(addEventListenerSpy).toHaveBeenCalledWith(
-        'before-drop-links',
-        listener,
-        undefined
-      )
-      expect(addEventListenerSpy).toHaveBeenCalledWith(
-        'reset',
-        expect.any(Function),
-        { once: true }
-      )
-    })
-
-    test('should call the listener when the event is dispatched before reset', () => {
-      const listener = vi.fn()
-      const eventData = {
-        renderLinks: [],
-        event: createMockCanvasPointerEvent(0, 0)
-      }
-      connector.listenUntilReset('before-drop-links', listener)
-
-      connector.events.dispatch('before-drop-links', eventData)
-
-      expect(listener).toHaveBeenCalledTimes(1)
-      expect(listener).toHaveBeenCalledWith(
-        new CustomEvent('before-drop-links')
-      )
-    })
-
-    test('should remove the listener when reset is dispatched', () => {
-      const listener = vi.fn()
-      const removeEventListenerSpy = vi.spyOn(
-        connector.events,
-        'removeEventListener'
-      )
-
-      connector.listenUntilReset('before-drop-links', listener)
-
-      // Simulate the reset event being dispatched
-      connector.events.dispatch('reset', false)
-
-      // Check if removeEventListener was called correctly for the original listener
-      expect(removeEventListenerSpy).toHaveBeenCalledWith(
-        'before-drop-links',
-        listener
-      )
-    })
-
-    test('should not call the listener after reset is dispatched', () => {
-      const listener = vi.fn()
-      const eventData = {
-        renderLinks: [],
-        event: createMockCanvasPointerEvent(0, 0)
-      }
-      connector.listenUntilReset('before-drop-links', listener)
-
-      // Dispatch reset first
-      connector.events.dispatch('reset', false)
-
-      // Then dispatch the original event
-      connector.events.dispatch('before-drop-links', eventData)
-
-      expect(listener).not.toHaveBeenCalled()
-    })
-
-    test('should pass options to addEventListener', () => {
-      const listener = vi.fn()
-      const options = { once: true }
-      const addEventListenerSpy = vi.spyOn(connector.events, 'addEventListener')
-
-      connector.listenUntilReset('after-drop-links', listener, options)
-
-      expect(addEventListenerSpy).toHaveBeenCalledWith(
-        'after-drop-links',
-        listener,
-        options
-      )
-      // Still adds the reset listener
-      expect(addEventListenerSpy).toHaveBeenCalledWith(
-        'reset',
-        expect.any(Function),
-        { once: true }
-      )
-    })
   })
 })
diff --git a/src/lib/litegraph/src/subgraph/ExecutableNodeDTO.ts b/src/lib/litegraph/src/subgraph/ExecutableNodeDTO.ts
index 1ea33b319d..bacfd609e2 100644
--- a/src/lib/litegraph/src/subgraph/ExecutableNodeDTO.ts
+++ b/src/lib/litegraph/src/subgraph/ExecutableNodeDTO.ts
@@ -186,11 +186,16 @@ export class ExecutableNodeDTO implements ExecutableLGraphNode {
         if (!widget) return
 
         // Special case: SubgraphNode widget.
+        // Prefer serializeValue (per-instance) over the shared .value getter
+        // so multiple SubgraphNode instances return their own configured values.
+        const widgetValue = widget.serializeValue
+          ? widget.serializeValue(subgraphNode, -1)
+          : widget.value
         return {
           node: this,
           origin_id: this.id,
           origin_slot: -1,
-          widgetInfo: { value: widget.value }
+          widgetInfo: { value: widgetValue }
         }
       }
 
diff --git a/src/lib/litegraph/src/subgraph/Subgraph.test.ts b/src/lib/litegraph/src/subgraph/Subgraph.test.ts
index ad01e601bb..5826c4ca94 100644
--- a/src/lib/litegraph/src/subgraph/Subgraph.test.ts
+++ b/src/lib/litegraph/src/subgraph/Subgraph.test.ts
@@ -6,12 +6,12 @@
  * and basic I/O management.
  */
 import { createTestingPinia } from '@pinia/testing'
+import { fromAny } from '@total-typescript/shoehorn'
 import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it } from 'vitest'
 
 import type { LGraph } from '@/lib/litegraph/src/litegraph'
 import { createUuidv4, Subgraph } from '@/lib/litegraph/src/litegraph'
-
 import { subgraphTest } from './__fixtures__/subgraphFixtures'
 import {
   assertSubgraphStructure,
@@ -48,7 +48,7 @@ describe('Subgraph Construction', () => {
   it('should require a root graph', () => {
     const subgraphData = createTestSubgraphData()
     const createWithoutRoot = () =>
-      new Subgraph(null as unknown as LGraph, subgraphData)
+      new Subgraph(fromAny<LGraph, unknown>(null), subgraphData)
 
     expect(createWithoutRoot).toThrow('Root graph is required')
   })
diff --git a/src/lib/litegraph/src/subgraph/SubgraphNode.multiInstance.test.ts b/src/lib/litegraph/src/subgraph/SubgraphNode.multiInstance.test.ts
new file mode 100644
index 0000000000..66f2817cc3
--- /dev/null
+++ b/src/lib/litegraph/src/subgraph/SubgraphNode.multiInstance.test.ts
@@ -0,0 +1,261 @@
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import type { ISlotType } from '@/lib/litegraph/src/litegraph'
+import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+
+import {
+  createTestSubgraph,
+  createTestSubgraphNode,
+  resetSubgraphFixtureState
+} from './__fixtures__/subgraphHelpers'
+
+function createNodeWithWidget(
+  title: string,
+  widgetValue: number = 42,
+  slotType: ISlotType = 'number'
+) {
+  const node = new LGraphNode(title)
+  const input = node.addInput('value', slotType)
+  node.addOutput('out', slotType)
+
+  const widget = node.addWidget('number', 'widget', widgetValue, () => {}, {
+    min: 0,
+    max: 100,
+    step: 1
+  })
+  input.widget = { name: widget.name }
+
+  return { node, widget, input }
+}
+
+beforeEach(() => {
+  setActivePinia(createTestingPinia({ stubActions: false }))
+  resetSubgraphFixtureState()
+})
+
+describe('SubgraphNode multi-instance widget isolation', () => {
+  it('preserves per-instance widget values after configure', () => {
+    const subgraph = createTestSubgraph({
+      inputs: [{ name: 'value', type: 'number' }]
+    })
+
+    const { node } = createNodeWithWidget('TestNode', 0)
+    subgraph.add(node)
+    subgraph.inputNode.slots[0].connect(node.inputs[0], node)
+
+    const instance1 = createTestSubgraphNode(subgraph, { id: 201 })
+    const instance2 = createTestSubgraphNode(subgraph, { id: 202 })
+
+    // Simulate what LGraph.configure does: call configure with different widgets_values
+    instance1.configure({
+      id: 201,
+      type: subgraph.id,
+      pos: [100, 100],
+      size: [200, 100],
+      inputs: [],
+      outputs: [],
+      mode: 0,
+      order: 0,
+      flags: {},
+      properties: { proxyWidgets: [['-1', 'widget']] },
+      widgets_values: [10]
+    })
+
+    instance2.configure({
+      id: 202,
+      type: subgraph.id,
+      pos: [400, 100],
+      size: [200, 100],
+      inputs: [],
+      outputs: [],
+      mode: 0,
+      order: 1,
+      flags: {},
+      properties: { proxyWidgets: [['-1', 'widget']] },
+      widgets_values: [20]
+    })
+
+    const widgets1 = instance1.widgets!
+    const widgets2 = instance2.widgets!
+
+    expect(widgets1.length).toBeGreaterThan(0)
+    expect(widgets2.length).toBeGreaterThan(0)
+    expect(widgets1[0].value).toBe(10)
+    expect(widgets2[0].value).toBe(20)
+    expect(widgets1[0].serializeValue!(instance1, 0)).toBe(10)
+    expect(widgets2[0].serializeValue!(instance2, 0)).toBe(20)
+    expect(instance1.serialize().widgets_values).toEqual([10])
+    expect(instance2.serialize().widgets_values).toEqual([20])
+  })
+
+  it('round-trips per-instance widget values through serialize and configure', () => {
+    const subgraph = createTestSubgraph({
+      inputs: [{ name: 'value', type: 'number' }]
+    })
+
+    const { node } = createNodeWithWidget('TestNode', 0)
+    subgraph.add(node)
+    subgraph.inputNode.slots[0].connect(node.inputs[0], node)
+
+    const originalInstance = createTestSubgraphNode(subgraph, { id: 301 })
+    originalInstance.configure({
+      id: 301,
+      type: subgraph.id,
+      pos: [100, 100],
+      size: [200, 100],
+      inputs: [],
+      outputs: [],
+      mode: 0,
+      order: 0,
+      flags: {},
+      properties: { proxyWidgets: [['-1', 'widget']] },
+      widgets_values: [33]
+    })
+
+    const serialized = originalInstance.serialize()
+
+    const restoredInstance = createTestSubgraphNode(subgraph, { id: 302 })
+    restoredInstance.configure({
+      ...serialized,
+      id: 302,
+      type: subgraph.id
+    })
+
+    const restoredWidget = restoredInstance.widgets?.[0]
+    expect(restoredWidget?.value).toBe(33)
+    expect(restoredWidget?.serializeValue?.(restoredInstance, 0)).toBe(33)
+  })
+
+  it('keeps fresh sibling instances isolated before save or reload', () => {
+    const subgraph = createTestSubgraph({
+      inputs: [{ name: 'value', type: 'number' }]
+    })
+
+    const { node } = createNodeWithWidget('TestNode', 7)
+    subgraph.add(node)
+    subgraph.inputNode.slots[0].connect(node.inputs[0], node)
+
+    const instance1 = createTestSubgraphNode(subgraph, { id: 401 })
+    const instance2 = createTestSubgraphNode(subgraph, { id: 402 })
+    instance1.graph!.add(instance1)
+    instance2.graph!.add(instance2)
+
+    const widget1 = instance1.widgets?.[0]
+    const widget2 = instance2.widgets?.[0]
+
+    expect(widget1?.value).toBe(7)
+    expect(widget2?.value).toBe(7)
+
+    widget1!.value = 10
+
+    expect(widget1?.value).toBe(10)
+    expect(widget2?.value).toBe(7)
+    expect(widget1?.serializeValue?.(instance1, 0)).toBe(10)
+    expect(widget2?.serializeValue?.(instance2, 0)).toBe(7)
+  })
+
+  it('syncs restored promoted widgets when the inner source widget changes directly', () => {
+    const subgraph = createTestSubgraph({
+      inputs: [{ name: 'value', type: 'number' }]
+    })
+
+    const { node, widget } = createNodeWithWidget('TestNode', 0)
+    subgraph.add(node)
+    subgraph.inputNode.slots[0].connect(node.inputs[0], node)
+
+    const originalInstance = createTestSubgraphNode(subgraph, { id: 601 })
+    originalInstance.configure({
+      id: 601,
+      type: subgraph.id,
+      pos: [100, 100],
+      size: [200, 100],
+      inputs: [],
+      outputs: [],
+      mode: 0,
+      order: 0,
+      flags: {},
+      properties: { proxyWidgets: [['-1', 'widget']] },
+      widgets_values: [33]
+    })
+
+    const serialized = originalInstance.serialize()
+
+    const restoredInstance = createTestSubgraphNode(subgraph, { id: 602 })
+    restoredInstance.configure({
+      ...serialized,
+      id: 602,
+      type: subgraph.id
+    })
+
+    expect(restoredInstance.widgets?.[0].value).toBe(33)
+
+    widget.value = 45
+
+    expect(restoredInstance.widgets?.[0].value).toBe(45)
+    expect(
+      restoredInstance.widgets?.[0].serializeValue?.(restoredInstance, 0)
+    ).toBe(45)
+  })
+
+  it('clears stale per-instance values when reconfigured without widgets_values', () => {
+    const subgraph = createTestSubgraph({
+      inputs: [{ name: 'value', type: 'number' }]
+    })
+
+    const { node, widget } = createNodeWithWidget('TestNode', 5)
+    subgraph.add(node)
+    subgraph.inputNode.slots[0].connect(node.inputs[0], node)
+
+    const instance = createTestSubgraphNode(subgraph, { id: 701 })
+    instance.graph!.add(instance)
+
+    const promotedWidget = instance.widgets?.[0]
+    promotedWidget!.value = 11
+    widget.value = 17
+
+    const serialized = instance.serialize()
+    delete serialized.widgets_values
+
+    instance.configure({
+      ...serialized,
+      id: instance.id,
+      type: subgraph.id
+    })
+
+    expect(instance.widgets?.[0].value).toBe(17)
+    expect(instance.widgets?.[0].serializeValue?.(instance, 0)).toBe(17)
+  })
+
+  it('skips non-serializable source widgets during serialize', () => {
+    const subgraph = createTestSubgraph({
+      inputs: [{ name: 'value', type: 'number' }]
+    })
+
+    const { node, widget } = createNodeWithWidget('TestNode', 10)
+    subgraph.add(node)
+    subgraph.inputNode.slots[0].connect(node.inputs[0], node)
+
+    // Mark the source widget as non-persistent (e.g. preview widget)
+    widget.serialize = false
+
+    const instance = createTestSubgraphNode(subgraph, { id: 501 })
+    instance.configure({
+      id: 501,
+      type: subgraph.id,
+      pos: [100, 100],
+      size: [200, 100],
+      inputs: [],
+      outputs: [],
+      mode: 0,
+      order: 0,
+      flags: {},
+      properties: { proxyWidgets: [['-1', 'widget']] },
+      widgets_values: []
+    })
+
+    const serialized = instance.serialize()
+    expect(serialized.widgets_values).toBeUndefined()
+  })
+})
diff --git a/src/lib/litegraph/src/subgraph/SubgraphNode.test.ts b/src/lib/litegraph/src/subgraph/SubgraphNode.test.ts
index d044e5dfc2..8d0d586d60 100644
--- a/src/lib/litegraph/src/subgraph/SubgraphNode.test.ts
+++ b/src/lib/litegraph/src/subgraph/SubgraphNode.test.ts
@@ -4,12 +4,14 @@
  * Tests for SubgraphNode instances including construction,
  * IO synchronization, and edge cases.
  */
-import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createTestingPinia } from '@pinia/testing'
+import { fromAny } from '@total-typescript/shoehorn'
 import { setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import type { ExportedSubgraphInstance } from '@/lib/litegraph/src/types/serialisation'
 import { LGraph, LGraphNode, SubgraphNode } from '@/lib/litegraph/src/litegraph'
+import type { ExportedSubgraphInstance } from '@/lib/litegraph/src/types/serialisation'
+import { NodeSlotType } from '@/lib/litegraph/src/types/globalEnums'
 
 import { subgraphTest } from './__fixtures__/subgraphFixtures'
 import {
@@ -933,14 +935,17 @@ describe('SubgraphNode promotion view keys', () => {
 
     const subgraph = createTestSubgraph()
     const subgraphNode = createTestSubgraphNode(subgraph)
-    const nodeWithKeyBuilder = subgraphNode as unknown as {
-      _makePromotionViewKey: (
-        inputKey: string,
-        interiorNodeId: string,
-        widgetName: string,
-        inputName?: string
-      ) => string
-    }
+    const nodeWithKeyBuilder = fromAny<
+      {
+        _makePromotionViewKey: (
+          inputKey: string,
+          interiorNodeId: string,
+          widgetName: string,
+          inputName?: string
+        ) => string
+      },
+      unknown
+    >(subgraphNode)
 
     const firstKey = nodeWithKeyBuilder._makePromotionViewKey(
       '65',
@@ -985,21 +990,43 @@ describe('SubgraphNode label propagation', () => {
   })
 
   it('should propagate label via renaming-input event', () => {
-    const subgraph = createTestSubgraph()
-    const subgraphNode = createTestSubgraphNode(subgraph)
+    const subgraph = createTestSubgraph({
+      inputs: [{ name: 'steps', type: 'number' }]
+    })
 
-    subgraph.addInput('steps', 'number')
-    expect(subgraphNode.inputs[0].label).toBeUndefined()
+    const interiorNode = new LGraphNode('Interior')
+    const input = interiorNode.addInput('value', 'number')
+    input.widget = { name: 'value' }
+    interiorNode.addOutput('out', 'number')
+    interiorNode.addWidget('number', 'value', 0, () => {})
+    subgraph.add(interiorNode)
+    subgraph.inputNode.slots[0].connect(interiorNode.inputs[0], interiorNode)
+
+    const subgraphNode = createTestSubgraphNode(subgraph)
+    const promotedInput = subgraphNode.inputs[0]
+    const originalWidgetName = promotedInput.widget?.name
+    const labelChangedSpy = vi.spyOn(subgraphNode.graph!, 'trigger')
+
+    expect(promotedInput.label).toBeUndefined()
+    expect(promotedInput._widget).toBeDefined()
 
     subgraph.renameInput(subgraph.inputs[0], 'Steps Count')
 
-    expect(subgraphNode.inputs[0].label).toBe('Steps Count')
-    expect(subgraphNode.inputs[0].name).toBe('steps')
+    expect(promotedInput.label).toBe('Steps Count')
+    expect(promotedInput.name).toBe('steps')
+    expect(promotedInput.widget?.name).toBe(originalWidgetName)
+    expect(promotedInput._widget?.label).toBe('Steps Count')
+    expect(subgraphNode.widgets?.[0].label).toBe('Steps Count')
+    expect(labelChangedSpy).toHaveBeenCalledWith('node:slot-label:changed', {
+      nodeId: subgraphNode.id,
+      slotType: NodeSlotType.INPUT
+    })
   })
 
   it('should propagate label via renaming-output event', () => {
     const subgraph = createTestSubgraph()
     const subgraphNode = createTestSubgraphNode(subgraph)
+    const labelChangedSpy = vi.spyOn(subgraphNode.graph!, 'trigger')
 
     subgraph.addOutput('result', 'number')
     expect(subgraphNode.outputs[0].label).toBeUndefined()
@@ -1008,6 +1035,10 @@ describe('SubgraphNode label propagation', () => {
 
     expect(subgraphNode.outputs[0].label).toBe('Final Result')
     expect(subgraphNode.outputs[0].name).toBe('result')
+    expect(labelChangedSpy).toHaveBeenCalledWith('node:slot-label:changed', {
+      nodeId: subgraphNode.id,
+      slotType: NodeSlotType.OUTPUT
+    })
   })
 
   it('should preserve localized_name from configure path', () => {
diff --git a/src/lib/litegraph/src/subgraph/SubgraphNode.ts b/src/lib/litegraph/src/subgraph/SubgraphNode.ts
index e9ca28f001..880314249e 100644
--- a/src/lib/litegraph/src/subgraph/SubgraphNode.ts
+++ b/src/lib/litegraph/src/subgraph/SubgraphNode.ts
@@ -993,7 +993,21 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
     }
   }
 
+  /** Temporarily stored during configure for use by _internalConfigureAfterSlots */
+  private _pendingWidgetsValues?: unknown[]
+
+  /**
+   * Per-instance promoted widget values.
+   * Multiple SubgraphNode instances share the same inner nodes, so
+   * promoted widget values must be stored per-instance to avoid collisions.
+   * Key: `${sourceNodeId}:${sourceWidgetName}`
+   */
+  readonly _instanceWidgetValues = new Map<string, unknown>()
+
   override configure(info: ExportedSubgraphInstance): void {
+    this._instanceWidgetValues.clear()
+    this._pendingWidgetsValues = info.widgets_values
+
     for (const input of this.inputs) {
       if (
         input._listenerController &&
@@ -1124,6 +1138,21 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
       if (store.isPromoted(this.rootGraph.id, this.id, source)) continue
       store.promote(this.rootGraph.id, this.id, source)
     }
+
+    // Hydrate per-instance promoted widget values from serialized data.
+    // LGraphNode.configure skips promoted widgets (serialize === false on
+    // the view), so they must be applied here after promoted views exist.
+    // Only iterate serializable views to match what serialize() wrote.
+    if (this._pendingWidgetsValues) {
+      const views = this._getPromotedViews()
+      let i = 0
+      for (const view of views) {
+        if (!view.sourceSerialize) continue
+        if (i >= this._pendingWidgetsValues.length) break
+        view.value = this._pendingWidgetsValues[i++] as typeof view.value
+      }
+      this._pendingWidgetsValues = undefined
+    }
   }
 
   /**
@@ -1518,6 +1547,7 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
   override onRemoved(): void {
     this._eventAbortController.abort()
     this._invalidatePromotedViewsCache()
+    this._instanceWidgetValues.clear()
 
     for (const widget of this.widgets) {
       if (isPromotedWidgetView(widget)) {
@@ -1573,28 +1603,7 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
     ctx.restore()
   }
 
-  /**
-   * Synchronizes widget values from this SubgraphNode instance to the
-   * corresponding widgets in the subgraph definition before serialization.
-   * This ensures nested subgraph widget values are preserved when saving.
-   */
   override serialize(): ISerialisedNode {
-    // Sync widget values to subgraph definition before serialization.
-    // Only sync for inputs that are linked to a promoted widget via _widget.
-    for (const input of this.inputs) {
-      if (!input._widget) continue
-
-      const subgraphInput =
-        input._subgraphSlot ??
-        this.subgraph.inputNode.slots.find((slot) => slot.name === input.name)
-      if (!subgraphInput) continue
-
-      const connectedWidgets = subgraphInput.getConnectedWidgets()
-      for (const connectedWidget of connectedWidgets) {
-        connectedWidget.value = input._widget.value
-      }
-    }
-
     // Write promotion store state back to properties for serialization
     const entries = usePromotionStore().getPromotions(
       this.rootGraph.id,
@@ -1602,7 +1611,22 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
     )
     this.properties.proxyWidgets = this._serializeEntries(entries)
 
-    return super.serialize()
+    const serialized = super.serialize()
+    const views = this._getPromotedViews()
+
+    const serializableViews = views.filter((view) => view.sourceSerialize)
+    if (serializableViews.length > 0) {
+      serialized.widgets_values = serializableViews.map((view) => {
+        const value = view.serializeValue
+          ? view.serializeValue(this, -1)
+          : view.value
+        return value != null && typeof value === 'object'
+          ? JSON.parse(JSON.stringify(value))
+          : (value ?? null)
+      })
+    }
+
+    return serialized
   }
   override clone() {
     const clone = super.clone()
diff --git a/src/lib/litegraph/src/subgraph/SubgraphSerialization.test.ts b/src/lib/litegraph/src/subgraph/SubgraphSerialization.test.ts
index 893d39a035..b07f4da1a8 100644
--- a/src/lib/litegraph/src/subgraph/SubgraphSerialization.test.ts
+++ b/src/lib/litegraph/src/subgraph/SubgraphSerialization.test.ts
@@ -4,10 +4,11 @@
  * Tests for saving, loading, and version compatibility of subgraphs.
  * This covers serialization, deserialization, data integrity, and migration scenarios.
  */
-import { beforeEach, describe, expect, it } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import { createTestingPinia } from '@pinia/testing'
 import { setActivePinia } from 'pinia'
 
+import { duplicateSubgraphNodeIds } from '@/lib/litegraph/src/__fixtures__/duplicateSubgraphNodeIds'
 import {
   LGraph,
   LGraphNode,
@@ -22,6 +23,11 @@ import {
   resetSubgraphFixtureState
 } from './__fixtures__/subgraphHelpers'
 
+class DummyNode extends LGraphNode {}
+
+const DUPLICATE_ID_SUBGRAPH_A = '11111111-1111-4111-8111-111111111111'
+const DUPLICATE_ID_SUBGRAPH_B = '22222222-2222-4222-8222-222222222222'
+
 function createRegisteredNode(
   graph: LGraph | Subgraph,
   inputs: ISlotType[] = [],
@@ -50,6 +56,11 @@ function createRegisteredNode(
 beforeEach(() => {
   setActivePinia(createTestingPinia({ stubActions: false }))
   resetSubgraphFixtureState()
+  LiteGraph.registerNodeType('dummy', DummyNode)
+})
+
+afterEach(() => {
+  delete LiteGraph.registered_node_types.dummy
 })
 
 describe('SubgraphSerialization - Basic Serialization', () => {
@@ -475,4 +486,57 @@ describe('SubgraphSerialization - Data Integrity', () => {
       expect(targetNode!.inputs[link.target_slot]).toBeDefined()
     }
   })
+
+  it('deduplicates duplicate subgraph node IDs while keeping root nodes canonical', () => {
+    const graph = new LGraph()
+    graph.configure(structuredClone(duplicateSubgraphNodeIds))
+
+    const rootIds = graph.nodes
+      .map((node) => node.id)
+      .filter((id): id is number => typeof id === 'number')
+      .sort((a, b) => a - b)
+    expect(rootIds).toEqual([102, 103])
+
+    const subgraphAIds = new Set(
+      graph.subgraphs.get(DUPLICATE_ID_SUBGRAPH_A)!.nodes.map((node) => node.id)
+    )
+    const subgraphBIds = new Set(
+      graph.subgraphs.get(DUPLICATE_ID_SUBGRAPH_B)!.nodes.map((node) => node.id)
+    )
+
+    expect(subgraphAIds).toEqual(new Set([3, 8, 37]))
+    for (const id of subgraphAIds) {
+      expect(subgraphBIds.has(id)).toBe(false)
+    }
+  })
+
+  it('patches remapped link and proxyWidget references during duplicate-ID hydration', () => {
+    const graph = new LGraph()
+    graph.configure(structuredClone(duplicateSubgraphNodeIds))
+
+    const subgraphAIds = new Set(
+      graph.subgraphs
+        .get(DUPLICATE_ID_SUBGRAPH_A)!
+        .nodes.map((node) => String(node.id))
+    )
+    const subgraphB = graph.subgraphs.get(DUPLICATE_ID_SUBGRAPH_B)!
+    const subgraphBIds = new Set(subgraphB.nodes.map((node) => String(node.id)))
+
+    const rootProxyWidgetsA = graph.getNodeById(102)?.properties?.proxyWidgets
+    expect(Array.isArray(rootProxyWidgetsA)).toBe(true)
+    for (const entry of rootProxyWidgetsA as string[][]) {
+      expect(subgraphAIds.has(String(entry[0]))).toBe(true)
+    }
+
+    const rootProxyWidgetsB = graph.getNodeById(103)?.properties?.proxyWidgets
+    expect(Array.isArray(rootProxyWidgetsB)).toBe(true)
+    for (const entry of rootProxyWidgetsB as string[][]) {
+      expect(subgraphBIds.has(String(entry[0]))).toBe(true)
+    }
+
+    for (const [, link] of subgraphB.links) {
+      expect(subgraphBIds.has(String(link.origin_id))).toBe(true)
+      expect(subgraphBIds.has(String(link.target_id))).toBe(true)
+    }
+  })
 })
diff --git a/src/lib/litegraph/src/subgraph/SubgraphWidgetPromotion.test.ts b/src/lib/litegraph/src/subgraph/SubgraphWidgetPromotion.test.ts
index d85d0c8750..f54017d54a 100644
--- a/src/lib/litegraph/src/subgraph/SubgraphWidgetPromotion.test.ts
+++ b/src/lib/litegraph/src/subgraph/SubgraphWidgetPromotion.test.ts
@@ -266,6 +266,40 @@ describe('SubgraphWidgetPromotion', () => {
   })
 
   describe('Nested Subgraph Widget Promotion', () => {
+    it('should hydrate legacy -1 proxyWidgets to a concrete promoted widget with preserved options', () => {
+      const subgraph = createTestSubgraph({
+        inputs: [{ name: 'batch_size', type: 'INT' }]
+      })
+
+      const interiorNode = new LGraphNode('EmptyLatentImage')
+      const interiorInput = interiorNode.addInput('batch_size', 'INT')
+      interiorNode.addOutput('LATENT', 'LATENT')
+      interiorNode.addWidget('number', 'batch_size', 1, () => {}, {
+        step: 10,
+        min: 1
+      })
+      interiorInput.widget = { name: 'batch_size' }
+      subgraph.add(interiorNode)
+      subgraph.inputNode.slots[0].connect(interiorNode.inputs[0], interiorNode)
+
+      const hostNode = createTestSubgraphNode(subgraph)
+      const serializedHostNode = hostNode.serialize()
+      serializedHostNode.properties = {
+        ...serializedHostNode.properties,
+        proxyWidgets: [['-1', 'batch_size']]
+      }
+
+      hostNode.configure(serializedHostNode)
+
+      expect(hostNode.properties.proxyWidgets).toStrictEqual([
+        [String(interiorNode.id), 'batch_size']
+      ])
+      expect(hostNode.widgets).toHaveLength(1)
+      expect(hostNode.widgets[0].name).toBe('batch_size')
+      expect(hostNode.widgets[0].value).toBe(1)
+      expect(hostNode.widgets[0].options.step).toBe(10)
+    })
+
     it('should prune proxyWidgets referencing nodes not in subgraph on configure', () => {
       // Reproduces the bug where packing nodes into a nested subgraph leaves
       // stale proxyWidgets on the outer subgraph node referencing grandchild
@@ -378,6 +412,47 @@ describe('SubgraphWidgetPromotion', () => {
         [String(nestedNode.id), 'noise_seed', String(samplerNode.id)]
       ])
     })
+
+    it('should preserve promoted widget entries after cloning', () => {
+      const subgraph = createTestSubgraph({
+        inputs: [{ name: 'text', type: 'STRING' }]
+      })
+
+      const interiorNode = new LGraphNode('CLIPTextEncode')
+      const interiorInput = interiorNode.addInput('text', 'STRING')
+      interiorNode.addOutput('CONDITIONING', 'CONDITIONING')
+      interiorNode.addWidget('text', 'text', '', () => {})
+      interiorInput.widget = { name: 'text' }
+      subgraph.add(interiorNode)
+      subgraph.inputNode.slots[0].connect(interiorNode.inputs[0], interiorNode)
+
+      const hostNode = createTestSubgraphNode(subgraph)
+
+      // serialize() syncs the promotion store into properties.proxyWidgets
+      const serialized = hostNode.serialize()
+      const originalProxyWidgets = serialized.properties!
+        .proxyWidgets as string[][]
+
+      expect(originalProxyWidgets.length).toBeGreaterThan(0)
+      expect(
+        originalProxyWidgets.some(([, widgetName]) => widgetName === 'text')
+      ).toBe(true)
+
+      // Simulate clone: create a second SubgraphNode configured from serialized data
+      const cloneNode = createTestSubgraphNode(subgraph)
+      cloneNode.configure(serialized)
+      const cloneProxyWidgets = cloneNode.properties.proxyWidgets as string[][]
+
+      expect(cloneProxyWidgets.length).toBeGreaterThan(0)
+      expect(
+        cloneProxyWidgets.some(([, widgetName]) => widgetName === 'text')
+      ).toBe(true)
+
+      // Clone's proxyWidgets should reference the same interior node
+      const originalNodeIds = originalProxyWidgets.map(([nodeId]) => nodeId)
+      const cloneNodeIds = cloneProxyWidgets.map(([nodeId]) => nodeId)
+      expect(cloneNodeIds).toStrictEqual(originalNodeIds)
+    })
   })
 
   describe('Tooltip Promotion', () => {
diff --git a/src/lib/litegraph/src/subgraph/svgBitmapCache.test.ts b/src/lib/litegraph/src/subgraph/svgBitmapCache.test.ts
index 15a28f5aa7..1dea0113fa 100644
--- a/src/lib/litegraph/src/subgraph/svgBitmapCache.test.ts
+++ b/src/lib/litegraph/src/subgraph/svgBitmapCache.test.ts
@@ -1,3 +1,4 @@
+import { fromPartial } from '@total-typescript/shoehorn'
 import { describe, expect, it, vi } from 'vitest'
 
 import { createBitmapCache } from './svgBitmapCache'
@@ -25,9 +26,9 @@ describe('createBitmapCache', () => {
       )
   }
 
-  const stubContext = {
+  const stubContext = fromPartial<CanvasRenderingContext2D>({
     drawImage: vi.fn()
-  } as unknown as CanvasRenderingContext2D
+  })
 
   it('returns the SVG when image is not yet complete', () => {
     const svg = mockSvg({ complete: false, naturalWidth: 0 })
diff --git a/src/lib/litegraph/src/types/widgets.ts b/src/lib/litegraph/src/types/widgets.ts
index c7ce79d7a2..f0c2cf8eff 100644
--- a/src/lib/litegraph/src/types/widgets.ts
+++ b/src/lib/litegraph/src/types/widgets.ts
@@ -139,6 +139,7 @@ export type IWidget =
   | IBoundingBoxWidget
   | ICurveWidget
   | IPainterWidget
+  | IRangeWidget
 
 export interface IBooleanWidget extends IBaseWidget<boolean, 'toggle'> {
   type: 'toggle'
@@ -341,6 +342,30 @@ export interface IPainterWidget extends IBaseWidget<string, 'painter'> {
   value: string
 }
 
+export interface RangeValue {
+  min: number
+  max: number
+  midpoint?: number
+}
+
+export interface IWidgetRangeOptions extends IWidgetOptions {
+  display?: 'plain' | 'gradient' | 'histogram'
+  gradient_stops?: ColorStop[]
+  show_midpoint?: boolean
+  midpoint_scale?: 'linear' | 'gamma'
+  value_min?: number
+  value_max?: number
+}
+
+export interface IRangeWidget extends IBaseWidget<
+  RangeValue,
+  'range',
+  IWidgetRangeOptions
+> {
+  type: 'range'
+  value: RangeValue
+}
+
 /**
  * Valid widget types.  TS cannot provide easily extensible type safety for this at present.
  * Override linkedWidgets[]
diff --git a/src/lib/litegraph/src/utils/feedback.ts b/src/lib/litegraph/src/utils/feedback.ts
index 8fbe54e207..8215735a43 100644
--- a/src/lib/litegraph/src/utils/feedback.ts
+++ b/src/lib/litegraph/src/utils/feedback.ts
@@ -25,3 +25,34 @@ export function warnDeprecated(message: string, source?: object): void {
     callback(message, source)
   }
 }
+
+/**
+ * Defines a deprecated property alias that proxies to a current property,
+ * logging a deprecation warning on first access.
+ *
+ * Warning is deduplicated by {@link warnDeprecated} (once per unique message per session).
+ *
+ * @param target The object to define the deprecated property on.
+ * @param deprecatedKey The old property name to deprecate.
+ * @param currentKey The new property name to proxy to.
+ * @param message The deprecation warning message.
+ */
+export function defineDeprecatedProperty<T>(
+  target: T,
+  deprecatedKey: string,
+  currentKey: keyof T & string,
+  message: string
+): void {
+  Object.defineProperty(target, deprecatedKey, {
+    get() {
+      warnDeprecated(message)
+      return this[currentKey]
+    },
+    set(value: unknown) {
+      warnDeprecated(message)
+      this[currentKey] = value
+    },
+    configurable: true,
+    enumerable: false
+  })
+}
diff --git a/src/lib/litegraph/src/utils/textMeasureCache.test.ts b/src/lib/litegraph/src/utils/textMeasureCache.test.ts
index fdb5782dfd..04bdfc7e77 100644
--- a/src/lib/litegraph/src/utils/textMeasureCache.test.ts
+++ b/src/lib/litegraph/src/utils/textMeasureCache.test.ts
@@ -1,12 +1,13 @@
+import { fromPartial } from '@total-typescript/shoehorn'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { cachedMeasureText, clearTextMeasureCache } from './textMeasureCache'
 
 function createMockCtx(font = '12px sans-serif'): CanvasRenderingContext2D {
-  return {
+  return fromPartial<CanvasRenderingContext2D>({
     font,
     measureText: vi.fn((text: string) => ({ width: text.length * 7 }))
-  } as unknown as CanvasRenderingContext2D
+  })
 }
 
 describe('textMeasureCache', () => {
diff --git a/src/lib/litegraph/src/widgets/BaseWidget.test.ts b/src/lib/litegraph/src/widgets/BaseWidget.test.ts
index 0f72dc5e26..8c8c8482cc 100644
--- a/src/lib/litegraph/src/widgets/BaseWidget.test.ts
+++ b/src/lib/litegraph/src/widgets/BaseWidget.test.ts
@@ -1,4 +1,5 @@
 import { createTestingPinia } from '@pinia/testing'
+import { fromAny } from '@total-typescript/shoehorn'
 import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it } from 'vitest'
 
@@ -167,7 +168,7 @@ describe('BaseWidget store integration', () => {
       const defaultValue = 'You are an expert image-generation engine.'
       const widget = createTestWidget(node, {
         name: 'system_prompt',
-        value: undefined as unknown as number
+        value: fromAny<number, unknown>(undefined)
       })
 
       // Simulate what addDOMWidget does: override value with getter/setter
diff --git a/src/lib/litegraph/src/widgets/RangeWidget.ts b/src/lib/litegraph/src/widgets/RangeWidget.ts
new file mode 100644
index 0000000000..4bdc469cb6
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/RangeWidget.ts
@@ -0,0 +1,16 @@
+import type { IRangeWidget } from '../types/widgets'
+import { BaseWidget } from './BaseWidget'
+import type { DrawWidgetOptions, WidgetEventOptions } from './BaseWidget'
+
+export class RangeWidget
+  extends BaseWidget<IRangeWidget>
+  implements IRangeWidget
+{
+  override type = 'range' as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    this.drawVueOnlyWarning(ctx, options, 'Range')
+  }
+
+  onClick(_options: WidgetEventOptions): void {}
+}
diff --git a/src/lib/litegraph/src/widgets/widgetMap.ts b/src/lib/litegraph/src/widgets/widgetMap.ts
index cdd24308d3..86fe73d9e0 100644
--- a/src/lib/litegraph/src/widgets/widgetMap.ts
+++ b/src/lib/litegraph/src/widgets/widgetMap.ts
@@ -22,6 +22,7 @@ import { GalleriaWidget } from './GalleriaWidget'
 import { GradientSliderWidget } from './GradientSliderWidget'
 import { ImageCompareWidget } from './ImageCompareWidget'
 import { PainterWidget } from './PainterWidget'
+import { RangeWidget } from './RangeWidget'
 import { ImageCropWidget } from './ImageCropWidget'
 import { KnobWidget } from './KnobWidget'
 import { LegacyWidget } from './LegacyWidget'
@@ -60,6 +61,7 @@ export type WidgetTypeMap = {
   boundingbox: BoundingBoxWidget
   curve: CurveWidget
   painter: PainterWidget
+  range: RangeWidget
   [key: string]: BaseWidget
 }
 
@@ -140,6 +142,8 @@ export function toConcreteWidget<TWidget extends IWidget | IBaseWidget>(
       return toClass(CurveWidget, narrowedWidget, node)
     case 'painter':
       return toClass(PainterWidget, narrowedWidget, node)
+    case 'range':
+      return toClass(RangeWidget, narrowedWidget, node)
     default: {
       if (wrapLegacyWidgets) return toClass(LegacyWidget, widget, node)
     }
diff --git a/src/locales/ar/main.json b/src/locales/ar/main.json
index 082a2604c4..707f70c745 100644
--- a/src/locales/ar/main.json
+++ b/src/locales/ar/main.json
@@ -1331,6 +1331,7 @@
     "updating": "جارٍ التحديث",
     "upload": "رفع",
     "uploadAlreadyInProgress": "الرفع جارٍ بالفعل",
+    "uploadTimedOut": "انتهت مهلة التحميل. يرجى المحاولة مرة أخرى.",
     "usageHint": "تلميح الاستخدام",
     "use": "استخدم",
     "user": "المستخدم",
@@ -1641,9 +1642,18 @@
     "exportRecording": "تصدير التسجيل",
     "exportingModel": "جارٍ تصدير النموذج...",
     "fov": "مجال الرؤية (FOV)",
+    "hdri": {
+      "changeFile": "تغيير HDRI",
+      "intensity": "الشدة",
+      "label": "بيئة HDRI",
+      "removeFile": "إزالة HDRI",
+      "showAsBackground": "عرض كخلفية",
+      "uploadFile": "رفع HDRI (.hdr, .exr)"
+    },
     "light": "الإضاءة",
     "lightIntensity": "شدة الإضاءة",
     "loadingBackgroundImage": "جارٍ تحميل صورة الخلفية",
+    "loadingHDRI": "جارٍ تحميل HDRI...",
     "loadingModel": "جارٍ تحميل النموذج ثلاثي الأبعاد...",
     "materialMode": "وضع المادة",
     "materialModes": {
@@ -2258,6 +2268,7 @@
     "dataset": "مجموعة بيانات",
     "debug": "تصحيح",
     "deprecated": "مهمل",
+    "detection": "الكشف",
     "edit_models": "تحرير النماذج",
     "flux": "تدفق",
     "gligen": "gligen",
@@ -2526,6 +2537,23 @@
     "inputsNone": "لا توجد مدخلات",
     "inputsNoneTooltip": "العقدة ليس لديها مدخلات",
     "locateNode": "تحديد موقع العقدة على اللوحة",
+    "missingMedia": {
+      "audio": "الصوتيات",
+      "cancelSelection": "إلغاء الاختيار",
+      "collapseNodes": "إخفاء العقد المشار إليها",
+      "confirmSelection": "تأكيد الاختيار",
+      "expandNodes": "عرض العقد المشار إليها",
+      "image": "الصور",
+      "locateNode": "تحديد موقع العقدة",
+      "missingMediaTitle": "المدخلات المفقودة",
+      "or": "أو",
+      "selectedFromLibrary": "تم الاختيار من المكتبة",
+      "uploadFile": "رفع {type}",
+      "uploaded": "تم الرفع",
+      "uploading": "جاري الرفع...",
+      "useFromLibrary": "استخدام من المكتبة",
+      "video": "الفيديوهات"
+    },
     "missingModels": {
       "alreadyExistsInCategory": "هذا النموذج موجود بالفعل في \"{category}\"",
       "assetLoadTimeout": "انتهت مهلة اكتشاف النموذج. حاول إعادة تحميل سير العمل.",
@@ -3239,6 +3267,7 @@
       "termsAgreement": "بالمتابعة، أنت توافق على {terms} و{privacy} الخاصة بـ Comfy Org.",
       "totalDueToday": "الإجمالي المستحق اليوم"
     },
+    "refreshCredits": "تحديث الرصيد",
     "renewsDate": "تجديد في {date}",
     "required": {
       "pollingFailed": "فشل تفعيل الاشتراك",
@@ -3411,6 +3440,7 @@
     "failedToInitiateCreditPurchase": "فشل في بدء شراء الرصيد: {error}",
     "failedToInitiateSubscription": "فشل في بدء الاشتراك: {error}",
     "failedToLoadBackgroundImage": "فشل في تحميل صورة الخلفية",
+    "failedToLoadHDRI": "فشل في تحميل ملف HDRI",
     "failedToLoadModel": "فشل في تحميل النموذج ثلاثي الأبعاد",
     "failedToPurchaseCredits": "فشل في شراء الرصيد: {error}",
     "failedToQueue": "فشل في الإضافة إلى قائمة الانتظار",
@@ -3446,6 +3476,7 @@
     "pleaseSelectOutputNodes": "يرجى اختيار عقد الإخراج",
     "unableToGetModelFilePath": "غير قادر على الحصول على مسار ملف النموذج",
     "unauthorizedDomain": "النطاق الخاص بك {domain} غير مخول لاستخدام هذه الخدمة. يرجى الاتصال بـ {email} لإضافة النطاق إلى القائمة البيضاء.",
+    "unsupportedHDRIFormat": "تنسيق الملف غير مدعوم. يرجى رفع ملف .hdr أو .exr.",
     "updateRequested": "تم طلب التحديث",
     "useApiKeyTip": "نصيحة: لا يمكنك الدخول عبر تسجيل الدخول العادي؟ استخدم خيار مفتاح API الخاص بـ Comfy.",
     "userNotAuthenticated": "المستخدم غير مصدق"
diff --git a/src/locales/ar/nodeDefs.json b/src/locales/ar/nodeDefs.json
index d27555e153..b496eea956 100644
--- a/src/locales/ar/nodeDefs.json
+++ b/src/locales/ar/nodeDefs.json
@@ -2190,6 +2190,10 @@
       "image": {
         "name": "الصورة"
       },
+      "keep_aspect": {
+        "name": "keep_aspect",
+        "tooltip": "ما إذا كان سيتم تمديد الاقتصاص ليتناسب مع حجم الإخراج، أو إضافة حواف سوداء للحفاظ على نسبة العرض إلى الارتفاع."
+      },
       "output_height": {
         "name": "ارتفاع الناتج",
         "tooltip": "الارتفاع الذي يتم تغيير حجم كل قص إليه."
@@ -2313,6 +2317,23 @@
       }
     }
   },
+  "DrawBBoxes": {
+    "display_name": "رسم مربعات الإحاطة",
+    "inputs": {
+      "bboxes": {
+        "name": "bboxes"
+      },
+      "image": {
+        "name": "image"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "out_image",
+        "tooltip": null
+      }
+    }
+  },
   "DualCFGGuider": {
     "display_name": "موجّه CFG مزدوج",
     "inputs": {
@@ -4985,6 +5006,36 @@
       }
     }
   },
+  "ImageHistogram": {
+    "display_name": "مخطط تكراري للصورة",
+    "inputs": {
+      "image": {
+        "name": "صورة"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "RGB",
+        "tooltip": null
+      },
+      "1": {
+        "name": "الإضاءة",
+        "tooltip": null
+      },
+      "2": {
+        "name": "أحمر",
+        "tooltip": null
+      },
+      "3": {
+        "name": "أخضر",
+        "tooltip": null
+      },
+      "4": {
+        "name": "أزرق",
+        "tooltip": null
+      }
+    }
+  },
   "ImageInvert": {
     "display_name": "عكس الصورة",
     "inputs": {
@@ -12226,6 +12277,34 @@
       }
     }
   },
+  "RTDETR_detect": {
+    "display_name": "اكتشاف RT-DETR",
+    "inputs": {
+      "class_name": {
+        "name": "class_name",
+        "tooltip": "تصفية الاكتشافات حسب الفئة. اختر 'all' لتعطيل التصفية."
+      },
+      "image": {
+        "name": "image"
+      },
+      "max_detections": {
+        "name": "max_detections",
+        "tooltip": "الحد الأقصى لعدد الاكتشافات التي سيتم إرجاعها لكل صورة. بالترتيب التنازلي حسب درجة الثقة."
+      },
+      "model": {
+        "name": "model"
+      },
+      "threshold": {
+        "name": "threshold"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "bboxes",
+        "tooltip": null
+      }
+    }
+  },
   "RandomCropImages": {
     "display_name": "قص عشوائي للصور",
     "inputs": {
@@ -15631,6 +15710,10 @@
       "1": {
         "name": "FBX",
         "tooltip": null
+      },
+      "2": {
+        "name": "صورة UV",
+        "tooltip": null
       }
     }
   },
@@ -17898,6 +17981,241 @@
       }
     }
   },
+  "Wan2ImageToVideoApi": {
+    "description": "إنشاء فيديو من صورة الإطار الأول، مع إمكانية إضافة صورة الإطار الأخير وصوت اختياري.",
+    "display_name": "وان 2.7 من صورة إلى فيديو",
+    "inputs": {
+      "audio": {
+        "name": "الصوت",
+        "tooltip": "الصوت المستخدم لتوجيه توليد الفيديو (مثل مزامنة الشفاه أو حركة متوافقة مع الإيقاع). المدة: ۲-۳۰ ثانية. إذا لم يتم توفيره، يقوم النموذج تلقائيًا بإنشاء موسيقى خلفية أو مؤثرات صوتية مناسبة."
+      },
+      "control_after_generate": {
+        "name": "التحكم بعد التوليد"
+      },
+      "first_frame": {
+        "name": "الإطار الأول",
+        "tooltip": "صورة الإطار الأول. يتم اشتقاق نسبة العرض إلى الارتفاع للإخراج من هذه الصورة."
+      },
+      "last_frame": {
+        "name": "الإطار الأخير",
+        "tooltip": "صورة الإطار الأخير. يقوم النموذج بإنشاء فيديو ينتقل من الإطار الأول إلى الأخير."
+      },
+      "model": {
+        "name": "النموذج"
+      },
+      "model_duration": {
+        "name": "المدة"
+      },
+      "model_negative_prompt": {
+        "name": "توجيه سلبي"
+      },
+      "model_prompt": {
+        "name": "توجيه"
+      },
+      "model_resolution": {
+        "name": "الدقة"
+      },
+      "prompt_extend": {
+        "name": "تعزيز التوجيه",
+        "tooltip": "ما إذا كان سيتم تعزيز التوجيه بمساعدة الذكاء الاصطناعي."
+      },
+      "seed": {
+        "name": "البذرة",
+        "tooltip": "البذرة المستخدمة في التوليد."
+      },
+      "watermark": {
+        "name": "علامة مائية",
+        "tooltip": "ما إذا كان سيتم إضافة علامة مائية مولدة بالذكاء الاصطناعي إلى النتيجة."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2ReferenceVideoApi": {
+    "description": "إنشاء فيديو يعرض شخصًا أو كائنًا من مواد مرجعية. يدعم أداء شخصية واحدة وتفاعل عدة شخصيات.",
+    "display_name": "وان 2.7 من مرجع إلى فيديو",
+    "inputs": {
+      "control_after_generate": {
+        "name": "التحكم بعد التوليد"
+      },
+      "model": {
+        "name": "النموذج"
+      },
+      "model_duration": {
+        "name": "المدة"
+      },
+      "model_negative_prompt": {
+        "name": "توجيه سلبي"
+      },
+      "model_prompt": {
+        "name": "توجيه"
+      },
+      "model_ratio": {
+        "name": "النسبة"
+      },
+      "model_resolution": {
+        "name": "الدقة"
+      },
+      "seed": {
+        "name": "البذرة",
+        "tooltip": "البذرة المستخدمة في التوليد."
+      },
+      "watermark": {
+        "name": "علامة مائية",
+        "tooltip": "ما إذا كان سيتم إضافة علامة مائية مولدة بالذكاء الاصطناعي إلى النتيجة."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2TextToVideoApi": {
+    "description": "ينشئ فيديو بناءً على وصف نصي باستخدام نموذج وان 2.7.",
+    "display_name": "وان 2.7 تحويل النص إلى فيديو",
+    "inputs": {
+      "audio": {
+        "name": "الصوت",
+        "tooltip": "الصوت المستخدم لتوجيه توليد الفيديو (مثل مزامنة الشفاه أو الحركة المتوافقة مع الإيقاع). المدة: ٣-٣٠ ثانية. إذا لم يتم توفيره، سيقوم النموذج تلقائيًا بإنشاء موسيقى خلفية أو مؤثرات صوتية مناسبة."
+      },
+      "control_after_generate": {
+        "name": "التحكم بعد التوليد"
+      },
+      "model": {
+        "name": "النموذج"
+      },
+      "model_duration": {
+        "name": "المدة"
+      },
+      "model_negative_prompt": {
+        "name": "الوصف السلبي"
+      },
+      "model_prompt": {
+        "name": "الوصف"
+      },
+      "model_ratio": {
+        "name": "النسبة"
+      },
+      "model_resolution": {
+        "name": "الدقة"
+      },
+      "prompt_extend": {
+        "name": "توسيع الوصف",
+        "tooltip": "ما إذا كان سيتم تعزيز الوصف بمساعدة الذكاء الاصطناعي."
+      },
+      "seed": {
+        "name": "البذرة",
+        "tooltip": "البذرة المستخدمة في التوليد."
+      },
+      "watermark": {
+        "name": "علامة مائية",
+        "tooltip": "ما إذا كان سيتم إضافة علامة مائية مولدة بالذكاء الاصطناعي إلى النتيجة."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2VideoContinuationApi": {
+    "description": "استكمال الفيديو من حيث توقف، مع إمكانية التحكم في الإطار الأخير.",
+    "display_name": "وان 2.7 استكمال الفيديو",
+    "inputs": {
+      "control_after_generate": {
+        "name": "التحكم بعد التوليد"
+      },
+      "first_clip": {
+        "name": "المقطع الأول",
+        "tooltip": "الفيديو المدخل للاستكمال منه. المدة: ٢-١٠ ثوانٍ. يتم اشتقاق نسبة العرض إلى الارتفاع من هذا الفيديو."
+      },
+      "last_frame": {
+        "name": "الإطار الأخير",
+        "tooltip": "صورة الإطار الأخير. سيتم الانتقال في الاستكمال نحو هذا الإطار."
+      },
+      "model": {
+        "name": "النموذج"
+      },
+      "model_duration": {
+        "name": "المدة"
+      },
+      "model_negative_prompt": {
+        "name": "الوصف السلبي"
+      },
+      "model_prompt": {
+        "name": "الوصف"
+      },
+      "model_resolution": {
+        "name": "الدقة"
+      },
+      "prompt_extend": {
+        "name": "توسيع الوصف",
+        "tooltip": "ما إذا كان سيتم تعزيز الوصف بمساعدة الذكاء الاصطناعي."
+      },
+      "seed": {
+        "name": "البذرة",
+        "tooltip": "البذرة المستخدمة في التوليد."
+      },
+      "watermark": {
+        "name": "علامة مائية",
+        "tooltip": "ما إذا كان سيتم إضافة علامة مائية مولدة بالذكاء الاصطناعي إلى النتيجة."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2VideoEditApi": {
+    "description": "تحرير فيديو باستخدام تعليمات نصية أو صور مرجعية أو نقل النمط.",
+    "display_name": "وان 2.7 تحرير الفيديو",
+    "inputs": {
+      "audio_setting": {
+        "name": "إعداد الصوت",
+        "tooltip": "'تلقائي': يقرر النموذج ما إذا كان سيعيد توليد الصوت بناءً على الوصف. 'الأصلي': الحفاظ على الصوت الأصلي من الفيديو المدخل."
+      },
+      "control_after_generate": {
+        "name": "التحكم بعد التوليد"
+      },
+      "model": {
+        "name": "النموذج"
+      },
+      "model_duration": {
+        "name": "المدة"
+      },
+      "model_prompt": {
+        "name": "الوصف"
+      },
+      "model_ratio": {
+        "name": "النسبة"
+      },
+      "model_resolution": {
+        "name": "الدقة"
+      },
+      "seed": {
+        "name": "البذرة",
+        "tooltip": "البذرة المستخدمة في التوليد."
+      },
+      "video": {
+        "name": "الفيديو",
+        "tooltip": "الفيديو المراد تحريره."
+      },
+      "watermark": {
+        "name": "علامة مائية",
+        "tooltip": "ما إذا كان سيتم إضافة علامة مائية مولدة بالذكاء الاصطناعي إلى النتيجة."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "WanAnimateToVideo": {
     "display_name": "WanAnimateToVideo",
     "inputs": {
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index d18724fcc8..6868f54f3c 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -199,6 +199,7 @@
     "control_before_generate": "control before generate",
     "choose_file_to_upload": "choose file to upload",
     "uploadAlreadyInProgress": "Upload already in progress",
+    "uploadTimedOut": "Upload timed out. Please try again.",
     "capture": "capture",
     "nodes": "Nodes",
     "nodesCount": "{count} node | {count} nodes",
@@ -1678,6 +1679,8 @@
     "scheduling": "scheduling",
     "create": "create",
     "deprecated": "deprecated",
+    "detection": "detection",
+    "": "",
     "debug": "debug",
     "model": "model",
     "ElevenLabs": "ElevenLabs",
@@ -1688,7 +1691,6 @@
     "unet": "unet",
     "sigmas": "sigmas",
     "BFL": "BFL",
-    "": "",
     "Gemini": "Gemini",
     "video_models": "video_models",
     "gligen": "gligen",
@@ -1742,8 +1744,8 @@
     "Tripo": "Tripo",
     "Veo": "Veo",
     "Vidu": "Vidu",
-    "camera": "camera",
     "Wan": "Wan",
+    "camera": "camera",
     "WaveSpeed": "WaveSpeed",
     "zimage": "zimage"
   },
@@ -1986,7 +1988,16 @@
     "openIn3DViewer": "Open in 3D Viewer",
     "dropToLoad": "Drop 3D model to load",
     "unsupportedFileType": "Unsupported file type (supports .gltf, .glb, .obj, .fbx, .stl, .ply, .spz, .splat, .ksplat)",
-    "uploadingModel": "Uploading 3D model..."
+    "uploadingModel": "Uploading 3D model...",
+    "loadingHDRI": "Loading HDRI...",
+    "hdri": {
+      "label": "HDRI Environment",
+      "uploadFile": "Upload HDRI (.hdr, .exr)",
+      "changeFile": "Change HDRI",
+      "removeFile": "Remove HDRI",
+      "showAsBackground": "Show as Background",
+      "intensity": "Intensity"
+    }
   },
   "imageCrop": {
     "loading": "Loading...",
@@ -2081,7 +2092,9 @@
     "failedToUpdateMaterialMode": "Failed to update material mode",
     "failedToUpdateEdgeThreshold": "Failed to update edge threshold",
     "failedToUploadBackgroundImage": "Failed to upload background image",
-    "failedToUpdateBackgroundRenderMode": "Failed to update background render mode to {mode}"
+    "failedToUpdateBackgroundRenderMode": "Failed to update background render mode to {mode}",
+    "failedToLoadHDRI": "Failed to load HDRI file",
+    "unsupportedHDRIFormat": "Unsupported file format. Please upload a .hdr or .exr file."
   },
   "nodeErrors": {
     "render": "Node Render Error",
@@ -2358,6 +2371,7 @@
     "tierNameYearly": "{name} Yearly",
     "messageSupport": "Message support",
     "invoiceHistory": "Invoice history",
+    "refreshCredits": "Refresh credits",
     "benefits": {
       "benefit1": "Monthly credits for Partner Nodes — top up when needed",
       "benefit1FreeTier": "More monthly credits, top up anytime",
@@ -3211,7 +3225,9 @@
     "createProfileToPublish": "Create a profile to publish to ComfyHub",
     "createProfileCta": "Create a profile",
     "publishFailedTitle": "Publish failed",
-    "publishFailedDescription": "Something went wrong while publishing your workflow. Please try again."
+    "publishFailedDescription": "Something went wrong while publishing your workflow. Please try again.",
+    "publishSuccessTitle": "Published successfully",
+    "publishSuccessDescription": "Your workflow is now live on ComfyHub."
   },
   "comfyHubProfile": {
     "checkingAccess": "Checking your publishing access...",
@@ -3400,6 +3416,8 @@
   },
   "rightSidePanel": {
     "togglePanel": "Toggle properties panel",
+    "editTitle": "Edit title",
+    "editSubgraph": "Edit subgraph",
     "noSelection": "Select a node to see its properties and info.",
     "workflowOverview": "Workflow Overview",
     "title": "No item(s) selected | 1 item selected | {count} items selected",
@@ -3526,6 +3544,23 @@
       "missingModelsTitle": "Missing Models",
       "assetLoadTimeout": "Model detection timed out. Try reloading the workflow.",
       "downloadAll": "Download all"
+    },
+    "missingMedia": {
+      "missingMediaTitle": "Missing Inputs",
+      "image": "Images",
+      "video": "Videos",
+      "audio": "Audio",
+      "locateNode": "Locate node",
+      "expandNodes": "Show referencing nodes",
+      "collapseNodes": "Hide referencing nodes",
+      "uploadFile": "Upload {type}",
+      "uploading": "Uploading...",
+      "uploaded": "Uploaded",
+      "selectedFromLibrary": "Selected from library",
+      "useFromLibrary": "Use from Library",
+      "confirmSelection": "Confirm selection",
+      "cancelSelection": "Cancel selection",
+      "or": "OR"
     }
   },
   "errorOverlay": {
diff --git a/src/locales/en/nodeDefs.json b/src/locales/en/nodeDefs.json
index a2184df82c..4a59ddd21f 100644
--- a/src/locales/en/nodeDefs.json
+++ b/src/locales/en/nodeDefs.json
@@ -798,7 +798,7 @@
     }
   },
   "CaseConverter": {
-    "display_name": "Case Converter",
+    "display_name": "Text Case Converter",
     "inputs": {
       "string": {
         "name": "string"
@@ -2201,6 +2201,10 @@
       "padding": {
         "name": "padding",
         "tooltip": "Extra padding in pixels added on each side of the bbox before cropping."
+      },
+      "keep_aspect": {
+        "name": "keep_aspect",
+        "tooltip": "Whether to stretch the crop to fit the output size, or pad with black pixels to preserve aspect ratio."
       }
     },
     "outputs": {
@@ -2313,6 +2317,23 @@
       }
     }
   },
+  "DrawBBoxes": {
+    "display_name": "Draw BBoxes",
+    "inputs": {
+      "bboxes": {
+        "name": "bboxes"
+      },
+      "image": {
+        "name": "image"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "out_image",
+        "tooltip": null
+      }
+    }
+  },
   "DualCFGGuider": {
     "display_name": "DualCFGGuider",
     "inputs": {
@@ -4985,6 +5006,36 @@
       }
     }
   },
+  "ImageHistogram": {
+    "display_name": "Image Histogram",
+    "inputs": {
+      "image": {
+        "name": "image"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "rgb",
+        "tooltip": null
+      },
+      "1": {
+        "name": "luminance",
+        "tooltip": null
+      },
+      "2": {
+        "name": "red",
+        "tooltip": null
+      },
+      "3": {
+        "name": "green",
+        "tooltip": null
+      },
+      "4": {
+        "name": "blue",
+        "tooltip": null
+      }
+    }
+  },
   "ImageInvert": {
     "display_name": "Invert Image",
     "inputs": {
@@ -12819,7 +12870,7 @@
     }
   },
   "RegexExtract": {
-    "display_name": "Regex Extract",
+    "display_name": "Text Extract Substring",
     "inputs": {
       "string": {
         "name": "string"
@@ -12850,7 +12901,7 @@
     }
   },
   "RegexMatch": {
-    "display_name": "Regex Match",
+    "display_name": "Text Match",
     "inputs": {
       "string": {
         "name": "string"
@@ -12876,7 +12927,7 @@
     }
   },
   "RegexReplace": {
-    "display_name": "Regex Replace",
+    "display_name": "Text Replace (Regex)",
     "description": "Find and replace text using regex patterns.",
     "inputs": {
       "string": {
@@ -13417,6 +13468,34 @@
       }
     }
   },
+  "RTDETR_detect": {
+    "display_name": "RT-DETR Detect",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "image": {
+        "name": "image"
+      },
+      "threshold": {
+        "name": "threshold"
+      },
+      "class_name": {
+        "name": "class_name",
+        "tooltip": "Filter detections by class. Set to 'all' to disable filtering."
+      },
+      "max_detections": {
+        "name": "max_detections",
+        "tooltip": "Maximum number of detections to return per image. In order of descending confidence score."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "bboxes",
+        "tooltip": null
+      }
+    }
+  },
   "RunwayFirstLastFrameNode": {
     "display_name": "Runway First-Last-Frame to Video",
     "description": "Upload first and last keyframes, draft a prompt, and generate a video. More complex transitions, such as cases where the Last frame is completely different from the First frame, may benefit from the longer 10s duration. This would give the generation more time to smoothly transition between the two inputs. Before diving in, review these best practices to ensure that your input selections will set your generation up for success: https://help.runwayml.com/hc/en-us/articles/34170748696595-Creating-with-Keyframes-on-Gen-3.",
@@ -15171,7 +15250,7 @@
     }
   },
   "StringCompare": {
-    "display_name": "Compare",
+    "display_name": "Text Compare",
     "inputs": {
       "string_a": {
         "name": "string_a"
@@ -15193,7 +15272,7 @@
     }
   },
   "StringConcatenate": {
-    "display_name": "Concatenate",
+    "display_name": "Text Concatenate",
     "inputs": {
       "string_a": {
         "name": "string_a"
@@ -15212,7 +15291,7 @@
     }
   },
   "StringContains": {
-    "display_name": "Contains",
+    "display_name": "Text Contains",
     "inputs": {
       "string": {
         "name": "string"
@@ -15232,7 +15311,7 @@
     }
   },
   "StringLength": {
-    "display_name": "Length",
+    "display_name": "Text Length",
     "inputs": {
       "string": {
         "name": "string"
@@ -15246,7 +15325,7 @@
     }
   },
   "StringReplace": {
-    "display_name": "Replace",
+    "display_name": "Text Replace",
     "inputs": {
       "string": {
         "name": "string"
@@ -15265,7 +15344,7 @@
     }
   },
   "StringSubstring": {
-    "display_name": "Substring",
+    "display_name": "Text Substring",
     "inputs": {
       "string": {
         "name": "string"
@@ -15284,7 +15363,7 @@
     }
   },
   "StringTrim": {
-    "display_name": "Trim",
+    "display_name": "Text Trim",
     "inputs": {
       "string": {
         "name": "string"
@@ -15631,6 +15710,10 @@
       "1": {
         "name": "FBX",
         "tooltip": null
+      },
+      "2": {
+        "name": "uv_image",
+        "tooltip": null
       }
     }
   },
@@ -17923,6 +18006,241 @@
       }
     }
   },
+  "Wan2ImageToVideoApi": {
+    "display_name": "Wan 2.7 Image to Video",
+    "description": "Generate a video from a first-frame image, with optional last-frame image and audio.",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "first_frame": {
+        "name": "first_frame",
+        "tooltip": "First frame image. The output aspect ratio is derived from this image."
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "Seed to use for generation."
+      },
+      "prompt_extend": {
+        "name": "prompt_extend",
+        "tooltip": "Whether to enhance the prompt with AI assistance."
+      },
+      "watermark": {
+        "name": "watermark",
+        "tooltip": "Whether to add an AI-generated watermark to the result."
+      },
+      "last_frame": {
+        "name": "last_frame",
+        "tooltip": "Last frame image. The model generates a video transitioning from first to last frame."
+      },
+      "audio": {
+        "name": "audio",
+        "tooltip": "Audio for driving video generation (e.g., lip sync, beat-matched motion). Duration: 2s-30s. If not provided, the model automatically generates matching background music or sound effects."
+      },
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "model_duration": {
+        "name": "duration"
+      },
+      "model_negative_prompt": {
+        "name": "negative_prompt"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_resolution": {
+        "name": "resolution"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2ReferenceVideoApi": {
+    "display_name": "Wan 2.7 Reference to Video",
+    "description": "Generate a video featuring a person or object from reference materials. Supports single-character performances and multi-character interactions.",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "Seed to use for generation."
+      },
+      "watermark": {
+        "name": "watermark",
+        "tooltip": "Whether to add an AI-generated watermark to the result."
+      },
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "model_duration": {
+        "name": "duration"
+      },
+      "model_negative_prompt": {
+        "name": "negative_prompt"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_ratio": {
+        "name": "ratio"
+      },
+      "model_resolution": {
+        "name": "resolution"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2TextToVideoApi": {
+    "display_name": "Wan 2.7 Text to Video",
+    "description": "Generates a video based on a text prompt using the Wan 2.7 model.",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "Seed to use for generation."
+      },
+      "prompt_extend": {
+        "name": "prompt_extend",
+        "tooltip": "Whether to enhance the prompt with AI assistance."
+      },
+      "watermark": {
+        "name": "watermark",
+        "tooltip": "Whether to add an AI-generated watermark to the result."
+      },
+      "audio": {
+        "name": "audio",
+        "tooltip": "Audio for driving video generation (e.g., lip sync, beat-matched motion). Duration: 3s-30s. If not provided, the model automatically generates matching background music or sound effects."
+      },
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "model_duration": {
+        "name": "duration"
+      },
+      "model_negative_prompt": {
+        "name": "negative_prompt"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_ratio": {
+        "name": "ratio"
+      },
+      "model_resolution": {
+        "name": "resolution"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2VideoContinuationApi": {
+    "display_name": "Wan 2.7 Video Continuation",
+    "description": "Continue a video from where it left off, with optional last-frame control.",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "first_clip": {
+        "name": "first_clip",
+        "tooltip": "Input video to continue from. Duration: 2s-10s. The output aspect ratio is derived from this video."
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "Seed to use for generation."
+      },
+      "prompt_extend": {
+        "name": "prompt_extend",
+        "tooltip": "Whether to enhance the prompt with AI assistance."
+      },
+      "watermark": {
+        "name": "watermark",
+        "tooltip": "Whether to add an AI-generated watermark to the result."
+      },
+      "last_frame": {
+        "name": "last_frame",
+        "tooltip": "Last frame image. The continuation will transition towards this frame."
+      },
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "model_duration": {
+        "name": "duration"
+      },
+      "model_negative_prompt": {
+        "name": "negative_prompt"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_resolution": {
+        "name": "resolution"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2VideoEditApi": {
+    "display_name": "Wan 2.7 Video Edit",
+    "description": "Edit a video using text instructions, reference images, or style transfer.",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "video": {
+        "name": "video",
+        "tooltip": "The video to edit."
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "Seed to use for generation."
+      },
+      "audio_setting": {
+        "name": "audio_setting",
+        "tooltip": "'auto': model decides whether to regenerate audio based on the prompt. 'origin': preserve the original audio from the input video."
+      },
+      "watermark": {
+        "name": "watermark",
+        "tooltip": "Whether to add an AI-generated watermark to the result."
+      },
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "model_duration": {
+        "name": "duration"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_ratio": {
+        "name": "ratio"
+      },
+      "model_resolution": {
+        "name": "resolution"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "WanAnimateToVideo": {
     "display_name": "WanAnimateToVideo",
     "inputs": {
diff --git a/src/locales/es/main.json b/src/locales/es/main.json
index bfe4895ca1..deb630ba5b 100644
--- a/src/locales/es/main.json
+++ b/src/locales/es/main.json
@@ -1331,6 +1331,7 @@
     "updating": "Actualizando",
     "upload": "Subir",
     "uploadAlreadyInProgress": "La carga ya está en curso",
+    "uploadTimedOut": "La carga ha excedido el tiempo de espera. Por favor, inténtalo de nuevo.",
     "usageHint": "Sugerencia de uso",
     "use": "Usar",
     "user": "Usuario",
@@ -1641,9 +1642,18 @@
     "exportRecording": "Exportar grabación",
     "exportingModel": "Exportando modelo...",
     "fov": "FOV",
+    "hdri": {
+      "changeFile": "Cambiar HDRI",
+      "intensity": "Intensidad",
+      "label": "Entorno HDRI",
+      "removeFile": "Eliminar HDRI",
+      "showAsBackground": "Mostrar como fondo",
+      "uploadFile": "Subir HDRI (.hdr, .exr)"
+    },
     "light": "Luz",
     "lightIntensity": "Intensidad de luz",
     "loadingBackgroundImage": "Cargando imagen de fondo",
+    "loadingHDRI": "Cargando HDRI...",
     "loadingModel": "Cargando modelo 3D...",
     "materialMode": "Modo de material",
     "materialModes": {
@@ -2258,6 +2268,7 @@
     "dataset": "conjunto de datos",
     "debug": "depurar",
     "deprecated": "obsoleto",
+    "detection": "detección",
     "edit_models": "editar_modelos",
     "flux": "flux",
     "gligen": "gligen",
@@ -2526,6 +2537,23 @@
     "inputsNone": "SIN ENTRADAS",
     "inputsNoneTooltip": "El nodo no tiene entradas",
     "locateNode": "Localizar nodo en el lienzo",
+    "missingMedia": {
+      "audio": "Audio",
+      "cancelSelection": "Cancelar selección",
+      "collapseNodes": "Ocultar nodos de referencia",
+      "confirmSelection": "Confirmar selección",
+      "expandNodes": "Mostrar nodos de referencia",
+      "image": "Imágenes",
+      "locateNode": "Localizar nodo",
+      "missingMediaTitle": "Entradas faltantes",
+      "or": "O",
+      "selectedFromLibrary": "Seleccionado de la biblioteca",
+      "uploadFile": "Subir {type}",
+      "uploaded": "Subido",
+      "uploading": "Subiendo...",
+      "useFromLibrary": "Usar de la biblioteca",
+      "video": "Videos"
+    },
     "missingModels": {
       "alreadyExistsInCategory": "Este modelo ya existe en \"{category}\"",
       "assetLoadTimeout": "El tiempo de detección del modelo se agotó. Intenta recargar el flujo de trabajo.",
@@ -3239,6 +3267,7 @@
       "termsAgreement": "Al continuar, aceptas los {terms} y la {privacy} de Comfy Org.",
       "totalDueToday": "Total a pagar hoy"
     },
+    "refreshCredits": "Actualizar créditos",
     "renewsDate": "Se renueva el {date}",
     "required": {
       "pollingFailed": "Error al activar la suscripción",
@@ -3411,6 +3440,7 @@
     "failedToInitiateCreditPurchase": "No se pudo iniciar la compra de créditos: {error}",
     "failedToInitiateSubscription": "Error al iniciar la suscripción: {error}",
     "failedToLoadBackgroundImage": "Error al cargar la imagen de fondo",
+    "failedToLoadHDRI": "No se pudo cargar el archivo HDRI",
     "failedToLoadModel": "Error al cargar el modelo 3D",
     "failedToPurchaseCredits": "No se pudo comprar créditos: {error}",
     "failedToQueue": "Error al encolar",
@@ -3446,6 +3476,7 @@
     "pleaseSelectOutputNodes": "Por favor, selecciona los nodos de salida",
     "unableToGetModelFilePath": "No se puede obtener la ruta del archivo del modelo",
     "unauthorizedDomain": "Tu dominio {domain} no está autorizado para usar este servicio. Por favor, contacta a {email} para agregar tu dominio a la lista blanca.",
+    "unsupportedHDRIFormat": "Formato de archivo no compatible. Por favor, sube un archivo .hdr o .exr.",
     "updateRequested": "Actualización solicitada",
     "useApiKeyTip": "Consejo: ¿No puedes acceder al inicio de sesión normal? Usa la opción de clave API de Comfy.",
     "userNotAuthenticated": "Usuario no autenticado"
diff --git a/src/locales/es/nodeDefs.json b/src/locales/es/nodeDefs.json
index 41e98a622d..babb6438f0 100644
--- a/src/locales/es/nodeDefs.json
+++ b/src/locales/es/nodeDefs.json
@@ -2190,6 +2190,10 @@
       "image": {
         "name": "imagen"
       },
+      "keep_aspect": {
+        "name": "mantener_proporción",
+        "tooltip": "Indica si se debe estirar el recorte para ajustarse al tamaño de salida, o rellenar con píxeles negros para preservar la relación de aspecto."
+      },
       "output_height": {
         "name": "alto de salida",
         "tooltip": "Alto al que se redimensiona cada recorte."
@@ -2313,6 +2317,23 @@
       }
     }
   },
+  "DrawBBoxes": {
+    "display_name": "Dibujar BBoxes",
+    "inputs": {
+      "bboxes": {
+        "name": "bboxes"
+      },
+      "image": {
+        "name": "imagen"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "imagen_salida",
+        "tooltip": null
+      }
+    }
+  },
   "DualCFGGuider": {
     "display_name": "Guía Dual CFG",
     "inputs": {
@@ -4985,6 +5006,36 @@
       }
     }
   },
+  "ImageHistogram": {
+    "display_name": "Histograma de imagen",
+    "inputs": {
+      "image": {
+        "name": "imagen"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "rgb",
+        "tooltip": null
+      },
+      "1": {
+        "name": "luminancia",
+        "tooltip": null
+      },
+      "2": {
+        "name": "rojo",
+        "tooltip": null
+      },
+      "3": {
+        "name": "verde",
+        "tooltip": null
+      },
+      "4": {
+        "name": "azul",
+        "tooltip": null
+      }
+    }
+  },
   "ImageInvert": {
     "display_name": "Invertir Imagen",
     "inputs": {
@@ -12226,6 +12277,34 @@
       }
     }
   },
+  "RTDETR_detect": {
+    "display_name": "Detección RT-DETR",
+    "inputs": {
+      "class_name": {
+        "name": "nombre_clase",
+        "tooltip": "Filtrar detecciones por clase. Establecer en 'all' para desactivar el filtrado."
+      },
+      "image": {
+        "name": "imagen"
+      },
+      "max_detections": {
+        "name": "máx_detecciones",
+        "tooltip": "Número máximo de detecciones a devolver por imagen. En orden descendente de puntuación de confianza."
+      },
+      "model": {
+        "name": "modelo"
+      },
+      "threshold": {
+        "name": "umbral"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "bboxes",
+        "tooltip": null
+      }
+    }
+  },
   "RandomCropImages": {
     "display_name": "Recorte Aleatorio de Imágenes",
     "inputs": {
@@ -15631,6 +15710,10 @@
       "1": {
         "name": "FBX",
         "tooltip": null
+      },
+      "2": {
+        "name": "imagen UV",
+        "tooltip": null
       }
     }
   },
@@ -17898,6 +17981,241 @@
       }
     }
   },
+  "Wan2ImageToVideoApi": {
+    "description": "Genera un video a partir de una imagen del primer fotograma, con opción de imagen del último fotograma y audio.",
+    "display_name": "Wan 2.7 Imagen a Video",
+    "inputs": {
+      "audio": {
+        "name": "audio",
+        "tooltip": "Audio para guiar la generación del video (por ejemplo, sincronización labial, movimiento al ritmo). Duración: 2s-30s. Si no se proporciona, el modelo genera automáticamente música de fondo o efectos de sonido acordes."
+      },
+      "control_after_generate": {
+        "name": "controlar después de generar"
+      },
+      "first_frame": {
+        "name": "primer_fotograma",
+        "tooltip": "Imagen del primer fotograma. La relación de aspecto de salida se deriva de esta imagen."
+      },
+      "last_frame": {
+        "name": "último_fotograma",
+        "tooltip": "Imagen del último fotograma. El modelo genera un video que transiciona del primer al último fotograma."
+      },
+      "model": {
+        "name": "modelo"
+      },
+      "model_duration": {
+        "name": "duración"
+      },
+      "model_negative_prompt": {
+        "name": "prompt_negativo"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_resolution": {
+        "name": "resolución"
+      },
+      "prompt_extend": {
+        "name": "extender_prompt",
+        "tooltip": "Si se debe mejorar el prompt con asistencia de IA."
+      },
+      "seed": {
+        "name": "semilla",
+        "tooltip": "Semilla para usar en la generación."
+      },
+      "watermark": {
+        "name": "marca_de_agua",
+        "tooltip": "Si se debe añadir una marca de agua generada por IA al resultado."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2ReferenceVideoApi": {
+    "description": "Genera un video con una persona u objeto a partir de materiales de referencia. Soporta actuaciones de un solo personaje e interacciones entre varios personajes.",
+    "display_name": "Wan 2.7 Referencia a Video",
+    "inputs": {
+      "control_after_generate": {
+        "name": "controlar después de generar"
+      },
+      "model": {
+        "name": "modelo"
+      },
+      "model_duration": {
+        "name": "duración"
+      },
+      "model_negative_prompt": {
+        "name": "prompt_negativo"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_ratio": {
+        "name": "relación"
+      },
+      "model_resolution": {
+        "name": "resolución"
+      },
+      "seed": {
+        "name": "semilla",
+        "tooltip": "Semilla para usar en la generación."
+      },
+      "watermark": {
+        "name": "marca_de_agua",
+        "tooltip": "Si se debe añadir una marca de agua generada por IA al resultado."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2TextToVideoApi": {
+    "description": "Genera un video a partir de un texto usando el modelo Wan 2.7.",
+    "display_name": "Wan 2.7 Texto a Video",
+    "inputs": {
+      "audio": {
+        "name": "audio",
+        "tooltip": "Audio para guiar la generación del video (por ejemplo, sincronización labial, movimiento al ritmo). Duración: 3s-30s. Si no se proporciona, el modelo genera automáticamente música de fondo o efectos de sonido acordes."
+      },
+      "control_after_generate": {
+        "name": "controlar después de generar"
+      },
+      "model": {
+        "name": "modelo"
+      },
+      "model_duration": {
+        "name": "duración"
+      },
+      "model_negative_prompt": {
+        "name": "prompt_negativo"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_ratio": {
+        "name": "relación de aspecto"
+      },
+      "model_resolution": {
+        "name": "resolución"
+      },
+      "prompt_extend": {
+        "name": "extender_prompt",
+        "tooltip": "Si se debe mejorar el prompt con asistencia de IA."
+      },
+      "seed": {
+        "name": "semilla",
+        "tooltip": "Semilla para usar en la generación."
+      },
+      "watermark": {
+        "name": "marca de agua",
+        "tooltip": "Si se debe añadir una marca de agua generada por IA al resultado."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2VideoContinuationApi": {
+    "description": "Continúa un video desde donde terminó, con control opcional del último fotograma.",
+    "display_name": "Wan 2.7 Continuación de Video",
+    "inputs": {
+      "control_after_generate": {
+        "name": "controlar después de generar"
+      },
+      "first_clip": {
+        "name": "primer_clip",
+        "tooltip": "Video de entrada desde el cual continuar. Duración: 2s-10s. La relación de aspecto de salida se deriva de este video."
+      },
+      "last_frame": {
+        "name": "último_fotograma",
+        "tooltip": "Imagen del último fotograma. La continuación hará la transición hacia este fotograma."
+      },
+      "model": {
+        "name": "modelo"
+      },
+      "model_duration": {
+        "name": "duración"
+      },
+      "model_negative_prompt": {
+        "name": "prompt_negativo"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_resolution": {
+        "name": "resolución"
+      },
+      "prompt_extend": {
+        "name": "extender_prompt",
+        "tooltip": "Si se debe mejorar el prompt con asistencia de IA."
+      },
+      "seed": {
+        "name": "semilla",
+        "tooltip": "Semilla para usar en la generación."
+      },
+      "watermark": {
+        "name": "marca de agua",
+        "tooltip": "Si se debe añadir una marca de agua generada por IA al resultado."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2VideoEditApi": {
+    "description": "Edita un video usando instrucciones de texto, imágenes de referencia o transferencia de estilo.",
+    "display_name": "Wan 2.7 Edición de Video",
+    "inputs": {
+      "audio_setting": {
+        "name": "configuración_de_audio",
+        "tooltip": "'auto': el modelo decide si regenerar el audio según el prompt. 'origin': conserva el audio original del video de entrada."
+      },
+      "control_after_generate": {
+        "name": "controlar después de generar"
+      },
+      "model": {
+        "name": "modelo"
+      },
+      "model_duration": {
+        "name": "duración"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_ratio": {
+        "name": "relación de aspecto"
+      },
+      "model_resolution": {
+        "name": "resolución"
+      },
+      "seed": {
+        "name": "semilla",
+        "tooltip": "Semilla para usar en la generación."
+      },
+      "video": {
+        "name": "video",
+        "tooltip": "El video a editar."
+      },
+      "watermark": {
+        "name": "marca de agua",
+        "tooltip": "Si se debe añadir una marca de agua generada por IA al resultado."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "WanAnimateToVideo": {
     "display_name": "WanAnimateToVideo",
     "inputs": {
diff --git a/src/locales/fa/main.json b/src/locales/fa/main.json
index 23ca227b82..b6a265918d 100644
--- a/src/locales/fa/main.json
+++ b/src/locales/fa/main.json
@@ -1331,6 +1331,7 @@
     "updating": "در حال به‌روزرسانی {id}",
     "upload": "بارگذاری",
     "uploadAlreadyInProgress": "بارگذاری در حال انجام است",
+    "uploadTimedOut": "زمان بارگذاری به پایان رسید. لطفاً دوباره تلاش کنید.",
     "usageHint": "راهنمای استفاده",
     "use": "استفاده",
     "user": "کاربر",
@@ -1641,9 +1642,18 @@
     "exportRecording": "خروجی گرفتن ضبط",
     "exportingModel": "در حال خروجی گرفتن مدل...",
     "fov": "زاویه دید (FOV)",
+    "hdri": {
+      "changeFile": "تغییر HDRI",
+      "intensity": "شدت",
+      "label": "محیط HDRI",
+      "removeFile": "حذف HDRI",
+      "showAsBackground": "نمایش به عنوان پس‌زمینه",
+      "uploadFile": "بارگذاری HDRI (‏.hdr، ‏.exr)"
+    },
     "light": "نور",
     "lightIntensity": "شدت نور",
     "loadingBackgroundImage": "در حال بارگذاری تصویر پس‌زمینه",
+    "loadingHDRI": "در حال بارگذاری HDRI...",
     "loadingModel": "در حال بارگذاری مدل سه‌بعدی...",
     "materialMode": "حالت متریال",
     "materialModes": {
@@ -2258,6 +2268,7 @@
     "dataset": "داده‌نما",
     "debug": "اشکال‌زدایی",
     "deprecated": "منسوخ",
+    "detection": "شناسایی",
     "edit_models": "ویرایش مدل‌ها",
     "flux": "flux",
     "gligen": "gligen",
@@ -2526,6 +2537,23 @@
     "inputsNone": "بدون ورودی",
     "inputsNoneTooltip": "این نود ورودی ندارد",
     "locateNode": "یافتن node در canvas",
+    "missingMedia": {
+      "audio": "صدا",
+      "cancelSelection": "لغو انتخاب",
+      "collapseNodes": "پنهان کردن nodeهای ارجاع‌دهنده",
+      "confirmSelection": "تأیید انتخاب",
+      "expandNodes": "نمایش nodeهای ارجاع‌دهنده",
+      "image": "تصاویر",
+      "locateNode": "یافتن node",
+      "missingMediaTitle": "ورودی‌های گمشده",
+      "or": "یا",
+      "selectedFromLibrary": "انتخاب شده از کتابخانه",
+      "uploadFile": "بارگذاری {type}",
+      "uploaded": "بارگذاری شد",
+      "uploading": "در حال بارگذاری...",
+      "useFromLibrary": "استفاده از کتابخانه",
+      "video": "ویدیوها"
+    },
     "missingModels": {
       "alreadyExistsInCategory": "این مدل قبلاً در «{category}» وجود دارد",
       "assetLoadTimeout": "شناسایی مدل زمان‌بر شد. لطفاً workflow را مجدداً بارگذاری کنید.",
@@ -3251,6 +3279,7 @@
       "termsAgreement": "با ادامه، شما با {terms} و {privacy} Comfy Org موافقت می‌کنید.",
       "totalDueToday": "مبلغ قابل پرداخت امروز"
     },
+    "refreshCredits": "به‌روزرسانی اعتبارها",
     "renewsDate": "تمدید در {date}",
     "required": {
       "pollingFailed": "فعال‌سازی اشتراک ناموفق بود",
@@ -3423,6 +3452,7 @@
     "failedToInitiateCreditPurchase": "آغاز خرید اعتبار انجام نشد: {error}",
     "failedToInitiateSubscription": "آغاز اشتراک انجام نشد: {error}",
     "failedToLoadBackgroundImage": "بارگذاری تصویر پس‌زمینه انجام نشد",
+    "failedToLoadHDRI": "بارگذاری فایل HDRI ناموفق بود",
     "failedToLoadModel": "بارگذاری مدل سه‌بعدی انجام نشد",
     "failedToPurchaseCredits": "خرید اعتبار انجام نشد: {error}",
     "failedToQueue": "صف‌بندی انجام نشد",
@@ -3458,6 +3488,7 @@
     "pleaseSelectOutputNodes": "لطفاً nodeهای خروجی را انتخاب کنید",
     "unableToGetModelFilePath": "امکان دریافت مسیر فایل مدل وجود ندارد",
     "unauthorizedDomain": "دامنه شما ({domain}) مجاز به استفاده از این سرویس نیست. لطفاً برای افزودن دامنه خود به لیست سفید با {email} تماس بگیرید.",
+    "unsupportedHDRIFormat": "فرمت فایل پشتیبانی نمی‌شود. لطفاً یک فایل .hdr یا .exr بارگذاری کنید.",
     "updateRequested": "درخواست به‌روزرسانی ثبت شد",
     "useApiKeyTip": "نکته: به ورود عادی دسترسی ندارید؟ از گزینه Comfy API Key استفاده کنید.",
     "userNotAuthenticated": "کاربر احراز هویت نشده است"
diff --git a/src/locales/fa/nodeDefs.json b/src/locales/fa/nodeDefs.json
index 5e892115b1..6e77f19f65 100644
--- a/src/locales/fa/nodeDefs.json
+++ b/src/locales/fa/nodeDefs.json
@@ -2190,6 +2190,10 @@
       "image": {
         "name": "تصویر"
       },
+      "keep_aspect": {
+        "name": "حفظ نسبت تصویر",
+        "tooltip": "آیا برش تصویر برای تطبیق با اندازه خروجی کشیده شود یا با پد سیاه نسبت تصویر حفظ گردد."
+      },
       "output_height": {
         "name": "ارتفاع خروجی",
         "tooltip": "ارتفاعی که هر برش به آن تغییر اندازه داده می‌شود."
@@ -2313,6 +2317,23 @@
       }
     }
   },
+  "DrawBBoxes": {
+    "display_name": "ترسیم BBoxes",
+    "inputs": {
+      "bboxes": {
+        "name": "bboxes"
+      },
+      "image": {
+        "name": "تصویر"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "تصویر خروجی",
+        "tooltip": null
+      }
+    }
+  },
   "DualCFGGuider": {
     "display_name": "راهنمای DualCFG",
     "inputs": {
@@ -4985,6 +5006,36 @@
       }
     }
   },
+  "ImageHistogram": {
+    "display_name": "هیستوگرام تصویر",
+    "inputs": {
+      "image": {
+        "name": "تصویر"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "RGB",
+        "tooltip": null
+      },
+      "1": {
+        "name": "درخشندگی",
+        "tooltip": null
+      },
+      "2": {
+        "name": "قرمز",
+        "tooltip": null
+      },
+      "3": {
+        "name": "سبز",
+        "tooltip": null
+      },
+      "4": {
+        "name": "آبی",
+        "tooltip": null
+      }
+    }
+  },
   "ImageInvert": {
     "display_name": "معکوس‌سازی تصویر",
     "inputs": {
@@ -12226,6 +12277,34 @@
       }
     }
   },
+  "RTDETR_detect": {
+    "display_name": "شناسایی RT-DETR",
+    "inputs": {
+      "class_name": {
+        "name": "نام کلاس",
+        "tooltip": "فیلتر کردن شناسایی‌ها بر اساس کلاس. برای غیرفعال کردن فیلتر، مقدار 'all' را قرار دهید."
+      },
+      "image": {
+        "name": "تصویر"
+      },
+      "max_detections": {
+        "name": "حداکثر شناسایی",
+        "tooltip": "حداکثر تعداد شناسایی برای هر تصویر. به ترتیب امتیاز اطمینان نزولی."
+      },
+      "model": {
+        "name": "مدل"
+      },
+      "threshold": {
+        "name": "آستانه"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "bboxes",
+        "tooltip": null
+      }
+    }
+  },
   "RandomCropImages": {
     "display_name": "برش تصادفی تصاویر",
     "inputs": {
@@ -15631,6 +15710,10 @@
       "1": {
         "name": "FBX",
         "tooltip": null
+      },
+      "2": {
+        "name": "تصویر UV",
+        "tooltip": null
       }
     }
   },
@@ -17898,6 +17981,241 @@
       }
     }
   },
+  "Wan2ImageToVideoApi": {
+    "description": "تولید ویدیو از تصویر فریم اول، با امکان افزودن تصویر فریم آخر و صدا به صورت اختیاری.",
+    "display_name": "وان ۲.۷ تبدیل تصویر به ویدیو",
+    "inputs": {
+      "audio": {
+        "name": "صدا",
+        "tooltip": "صدا برای هدایت تولید ویدیو (مثلاً هماهنگی لب، حرکت هماهنگ با ضرب‌آهنگ). مدت زمان: ۲ تا ۳۰ ثانیه. در صورت عدم ارائه، مدل به طور خودکار موسیقی پس‌زمینه یا افکت صوتی مناسب تولید می‌کند."
+      },
+      "control_after_generate": {
+        "name": "کنترل پس از تولید"
+      },
+      "first_frame": {
+        "name": "فریم اول",
+        "tooltip": "تصویر فریم اول. نسبت ابعاد خروجی از این تصویر استخراج می‌شود."
+      },
+      "last_frame": {
+        "name": "فریم آخر",
+        "tooltip": "تصویر فریم آخر. مدل ویدیویی با انتقال از فریم اول به فریم آخر تولید می‌کند."
+      },
+      "model": {
+        "name": "مدل"
+      },
+      "model_duration": {
+        "name": "مدت زمان"
+      },
+      "model_negative_prompt": {
+        "name": "پرامپت منفی"
+      },
+      "model_prompt": {
+        "name": "پرامپت"
+      },
+      "model_resolution": {
+        "name": "رزولوشن"
+      },
+      "prompt_extend": {
+        "name": "گسترش پرامپت",
+        "tooltip": "آیا پرامپت با کمک هوش مصنوعی بهبود یابد یا خیر."
+      },
+      "seed": {
+        "name": "بذر",
+        "tooltip": "بذر مورد استفاده برای تولید."
+      },
+      "watermark": {
+        "name": "واترمارک",
+        "tooltip": "آیا واترمارک تولیدشده توسط هوش مصنوعی به نتیجه اضافه شود یا خیر."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2ReferenceVideoApi": {
+    "description": "تولید ویدیو با حضور یک شخص یا شیء بر اساس مواد مرجع. پشتیبانی از اجرای تک‌نفره و تعامل چندنفره.",
+    "display_name": "وان ۲.۷ مرجع به ویدیو",
+    "inputs": {
+      "control_after_generate": {
+        "name": "کنترل پس از تولید"
+      },
+      "model": {
+        "name": "مدل"
+      },
+      "model_duration": {
+        "name": "مدت زمان"
+      },
+      "model_negative_prompt": {
+        "name": "پرامپت منفی"
+      },
+      "model_prompt": {
+        "name": "پرامپت"
+      },
+      "model_ratio": {
+        "name": "نسبت تصویر"
+      },
+      "model_resolution": {
+        "name": "رزولوشن"
+      },
+      "seed": {
+        "name": "بذر",
+        "tooltip": "بذر مورد استفاده برای تولید."
+      },
+      "watermark": {
+        "name": "واترمارک",
+        "tooltip": "آیا واترمارک تولیدشده توسط هوش مصنوعی به نتیجه اضافه شود یا خیر."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2TextToVideoApi": {
+    "description": "تولید ویدیو بر اساس یک پرامپت متنی با استفاده از مدل وان ۲.۷.",
+    "display_name": "وان ۲.۷ تبدیل متن به ویدیو",
+    "inputs": {
+      "audio": {
+        "name": "صدا",
+        "tooltip": "صدا برای هدایت تولید ویدیو (مثلاً هماهنگی لب، حرکت مطابق با ضرب). مدت زمان: ۳ تا ۳۰ ثانیه. در صورت عدم ارائه، مدل به طور خودکار موسیقی پس‌زمینه یا افکت صوتی مناسب تولید می‌کند."
+      },
+      "control_after_generate": {
+        "name": "کنترل پس از تولید"
+      },
+      "model": {
+        "name": "مدل"
+      },
+      "model_duration": {
+        "name": "مدت زمان"
+      },
+      "model_negative_prompt": {
+        "name": "پرامپت منفی"
+      },
+      "model_prompt": {
+        "name": "پرامپت"
+      },
+      "model_ratio": {
+        "name": "نسبت تصویر"
+      },
+      "model_resolution": {
+        "name": "وضوح"
+      },
+      "prompt_extend": {
+        "name": "گسترش پرامپت",
+        "tooltip": "آیا پرامپت با کمک هوش مصنوعی بهبود یابد."
+      },
+      "seed": {
+        "name": "بذر",
+        "tooltip": "بذر مورد استفاده برای تولید."
+      },
+      "watermark": {
+        "name": "واترمارک",
+        "tooltip": "آیا واترمارک تولیدشده توسط هوش مصنوعی به نتیجه اضافه شود."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2VideoContinuationApi": {
+    "description": "ادامه دادن یک ویدیو از جایی که متوقف شده است، با امکان کنترل فریم آخر.",
+    "display_name": "وان ۲.۷ ادامه ویدیو",
+    "inputs": {
+      "control_after_generate": {
+        "name": "کنترل پس از تولید"
+      },
+      "first_clip": {
+        "name": "کلیپ اول",
+        "tooltip": "ویدیوی ورودی برای ادامه دادن. مدت زمان: ۲ تا ۱۰ ثانیه. نسبت تصویر خروجی از این ویدیو گرفته می‌شود."
+      },
+      "last_frame": {
+        "name": "فریم آخر",
+        "tooltip": "تصویر فریم آخر. ادامه ویدیو به سمت این فریم انتقال می‌یابد."
+      },
+      "model": {
+        "name": "مدل"
+      },
+      "model_duration": {
+        "name": "مدت زمان"
+      },
+      "model_negative_prompt": {
+        "name": "پرامپت منفی"
+      },
+      "model_prompt": {
+        "name": "پرامپت"
+      },
+      "model_resolution": {
+        "name": "وضوح"
+      },
+      "prompt_extend": {
+        "name": "گسترش پرامپت",
+        "tooltip": "آیا پرامپت با کمک هوش مصنوعی بهبود یابد."
+      },
+      "seed": {
+        "name": "بذر",
+        "tooltip": "بذر مورد استفاده برای تولید."
+      },
+      "watermark": {
+        "name": "واترمارک",
+        "tooltip": "آیا واترمارک تولیدشده توسط هوش مصنوعی به نتیجه اضافه شود."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2VideoEditApi": {
+    "description": "ویرایش ویدیو با استفاده از دستور متنی، تصاویر مرجع یا انتقال سبک.",
+    "display_name": "وان ۲.۷ ویرایش ویدیو",
+    "inputs": {
+      "audio_setting": {
+        "name": "تنظیمات صدا",
+        "tooltip": "'auto': مدل تصمیم می‌گیرد که آیا صدا بر اساس پرامپت بازتولید شود یا نه. 'origin': صدای اصلی ویدیوی ورودی حفظ می‌شود."
+      },
+      "control_after_generate": {
+        "name": "کنترل پس از تولید"
+      },
+      "model": {
+        "name": "مدل"
+      },
+      "model_duration": {
+        "name": "مدت زمان"
+      },
+      "model_prompt": {
+        "name": "پرامپت"
+      },
+      "model_ratio": {
+        "name": "نسبت تصویر"
+      },
+      "model_resolution": {
+        "name": "وضوح"
+      },
+      "seed": {
+        "name": "بذر",
+        "tooltip": "بذر مورد استفاده برای تولید."
+      },
+      "video": {
+        "name": "ویدیو",
+        "tooltip": "ویدیویی که باید ویرایش شود."
+      },
+      "watermark": {
+        "name": "واترمارک",
+        "tooltip": "آیا واترمارک تولیدشده توسط هوش مصنوعی به نتیجه اضافه شود."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "WanAnimateToVideo": {
     "display_name": "WanAnimateToVideo",
     "inputs": {
diff --git a/src/locales/fr/main.json b/src/locales/fr/main.json
index 90c50ad139..32e0bae97a 100644
--- a/src/locales/fr/main.json
+++ b/src/locales/fr/main.json
@@ -1331,6 +1331,7 @@
     "updating": "Mise à jour",
     "upload": "Téléverser",
     "uploadAlreadyInProgress": "Téléversement déjà en cours",
+    "uploadTimedOut": "Le téléchargement a expiré. Veuillez réessayer.",
     "usageHint": "Conseil d'utilisation",
     "use": "Utiliser",
     "user": "Utilisateur",
@@ -1641,9 +1642,18 @@
     "exportRecording": "Exporter l'enregistrement",
     "exportingModel": "Exportation du modèle en cours...",
     "fov": "FOV",
+    "hdri": {
+      "changeFile": "Changer l'HDRI",
+      "intensity": "Intensité",
+      "label": "Environnement HDRI",
+      "removeFile": "Supprimer l'HDRI",
+      "showAsBackground": "Afficher comme arrière-plan",
+      "uploadFile": "Télécharger un HDRI (.hdr, .exr)"
+    },
     "light": "Lumière",
     "lightIntensity": "Intensité de la lumière",
     "loadingBackgroundImage": "Chargement de l’image d’arrière-plan",
+    "loadingHDRI": "Chargement de l'HDRI...",
     "loadingModel": "Chargement du modèle 3D...",
     "materialMode": "Mode Matériel",
     "materialModes": {
@@ -2258,6 +2268,7 @@
     "dataset": "jeu de données",
     "debug": "débogage",
     "deprecated": "déprécié",
+    "detection": "détection",
     "edit_models": "edit_models",
     "flux": "flux",
     "gligen": "gligen",
@@ -2526,6 +2537,23 @@
     "inputsNone": "AUCUNE ENTRÉE",
     "inputsNoneTooltip": "Le nœud n’a pas d’entrées",
     "locateNode": "Localiser le nœud sur le canevas",
+    "missingMedia": {
+      "audio": "Audio",
+      "cancelSelection": "Annuler la sélection",
+      "collapseNodes": "Masquer les nœuds de référence",
+      "confirmSelection": "Confirmer la sélection",
+      "expandNodes": "Afficher les nœuds de référence",
+      "image": "Images",
+      "locateNode": "Localiser le nœud",
+      "missingMediaTitle": "Entrées manquantes",
+      "or": "OU",
+      "selectedFromLibrary": "Sélectionné depuis la bibliothèque",
+      "uploadFile": "Téléverser {type}",
+      "uploaded": "Téléversé",
+      "uploading": "Téléversement en cours...",
+      "useFromLibrary": "Utiliser depuis la bibliothèque",
+      "video": "Vidéos"
+    },
     "missingModels": {
       "alreadyExistsInCategory": "Ce modèle existe déjà dans « {category} »",
       "assetLoadTimeout": "Le délai de détection du modèle est dépassé. Essayez de recharger le workflow.",
@@ -3239,6 +3267,7 @@
       "termsAgreement": "En continuant, vous acceptez les {terms} et la {privacy} de Comfy Org.",
       "totalDueToday": "Total dû aujourd'hui"
     },
+    "refreshCredits": "Actualiser les crédits",
     "renewsDate": "Renouvellement le {date}",
     "required": {
       "pollingFailed": "Échec de l'activation de l'abonnement",
@@ -3411,6 +3440,7 @@
     "failedToInitiateCreditPurchase": "Échec de l'initiation de l'achat de crédits : {error}",
     "failedToInitiateSubscription": "Échec de l'initialisation de l'abonnement : {error}",
     "failedToLoadBackgroundImage": "Échec du chargement de l'image d'arrière-plan",
+    "failedToLoadHDRI": "Échec du chargement du fichier HDRI",
     "failedToLoadModel": "Échec du chargement du modèle 3D",
     "failedToPurchaseCredits": "Échec de l'achat de crédits : {error}",
     "failedToQueue": "Échec de la mise en file d'attente",
@@ -3446,6 +3476,7 @@
     "pleaseSelectOutputNodes": "Veuillez sélectionner les nœuds de sortie",
     "unableToGetModelFilePath": "Impossible d'obtenir le chemin du fichier modèle",
     "unauthorizedDomain": "Votre domaine {domain} n'est pas autorisé à utiliser ce service. Veuillez contacter {email} pour ajouter votre domaine à la liste blanche.",
+    "unsupportedHDRIFormat": "Format de fichier non pris en charge. Veuillez télécharger un fichier .hdr ou .exr.",
     "updateRequested": "Mise à jour demandée",
     "useApiKeyTip": "Astuce : Vous ne pouvez pas accéder à la connexion normale ? Utilisez l’option Clé API Comfy.",
     "userNotAuthenticated": "Utilisateur non authentifié"
diff --git a/src/locales/fr/nodeDefs.json b/src/locales/fr/nodeDefs.json
index 1c41e9993e..3d0e770bc2 100644
--- a/src/locales/fr/nodeDefs.json
+++ b/src/locales/fr/nodeDefs.json
@@ -2190,6 +2190,10 @@
       "image": {
         "name": "image"
       },
+      "keep_aspect": {
+        "name": "keep_aspect",
+        "tooltip": "Déterminer s'il faut étirer le recadrage pour correspondre à la taille de sortie, ou ajouter des pixels noirs pour préserver le ratio d'aspect."
+      },
       "output_height": {
         "name": "output_height",
         "tooltip": "Hauteur à laquelle chaque découpe est redimensionnée."
@@ -2313,6 +2317,23 @@
       }
     }
   },
+  "DrawBBoxes": {
+    "display_name": "Dessiner les BBoxes",
+    "inputs": {
+      "bboxes": {
+        "name": "bboxes"
+      },
+      "image": {
+        "name": "image"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "out_image",
+        "tooltip": null
+      }
+    }
+  },
   "DualCFGGuider": {
     "display_name": "GuideurDualCFG",
     "inputs": {
@@ -4985,6 +5006,36 @@
       }
     }
   },
+  "ImageHistogram": {
+    "display_name": "Histogramme d'image",
+    "inputs": {
+      "image": {
+        "name": "image"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "rvb",
+        "tooltip": null
+      },
+      "1": {
+        "name": "luminance",
+        "tooltip": null
+      },
+      "2": {
+        "name": "rouge",
+        "tooltip": null
+      },
+      "3": {
+        "name": "vert",
+        "tooltip": null
+      },
+      "4": {
+        "name": "bleu",
+        "tooltip": null
+      }
+    }
+  },
   "ImageInvert": {
     "display_name": "Inverser l'image",
     "inputs": {
@@ -12226,6 +12277,34 @@
       }
     }
   },
+  "RTDETR_detect": {
+    "display_name": "Détection RT-DETR",
+    "inputs": {
+      "class_name": {
+        "name": "class_name",
+        "tooltip": "Filtrer les détections par classe. Définir sur 'all' pour désactiver le filtrage."
+      },
+      "image": {
+        "name": "image"
+      },
+      "max_detections": {
+        "name": "max_detections",
+        "tooltip": "Nombre maximal de détections à retourner par image. Par ordre décroissant du score de confiance."
+      },
+      "model": {
+        "name": "model"
+      },
+      "threshold": {
+        "name": "threshold"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "bboxes",
+        "tooltip": null
+      }
+    }
+  },
   "RandomCropImages": {
     "display_name": "Rogner aléatoirement des images",
     "inputs": {
@@ -15631,6 +15710,10 @@
       "1": {
         "name": "FBX",
         "tooltip": null
+      },
+      "2": {
+        "name": "uv_image",
+        "tooltip": null
       }
     }
   },
@@ -17898,6 +17981,241 @@
       }
     }
   },
+  "Wan2ImageToVideoApi": {
+    "description": "Générez une vidéo à partir d'une image de première image, avec une image de dernière image et un audio optionnels.",
+    "display_name": "Wan 2.7 Image vers Vidéo",
+    "inputs": {
+      "audio": {
+        "name": "audio",
+        "tooltip": "Audio pour guider la génération vidéo (ex : synchronisation labiale, mouvement sur le rythme). Durée : 2s-30s. Si non fourni, le modèle génère automatiquement une musique de fond ou des effets sonores adaptés."
+      },
+      "control_after_generate": {
+        "name": "contrôle après génération"
+      },
+      "first_frame": {
+        "name": "première image",
+        "tooltip": "Image de la première image. Le format de sortie est dérivé de cette image."
+      },
+      "last_frame": {
+        "name": "dernière image",
+        "tooltip": "Image de la dernière image. Le modèle génère une vidéo passant de la première à la dernière image."
+      },
+      "model": {
+        "name": "modèle"
+      },
+      "model_duration": {
+        "name": "durée"
+      },
+      "model_negative_prompt": {
+        "name": "prompt négatif"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_resolution": {
+        "name": "résolution"
+      },
+      "prompt_extend": {
+        "name": "extension de prompt",
+        "tooltip": "Permet d'améliorer le prompt avec l'aide de l'IA."
+      },
+      "seed": {
+        "name": "graine",
+        "tooltip": "Graine à utiliser pour la génération."
+      },
+      "watermark": {
+        "name": "filigrane",
+        "tooltip": "Ajouter ou non un filigrane généré par IA au résultat."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2ReferenceVideoApi": {
+    "description": "Générez une vidéo mettant en scène une personne ou un objet à partir de références. Prend en charge les performances à un personnage et les interactions multi-personnages.",
+    "display_name": "Wan 2.7 Référence vers Vidéo",
+    "inputs": {
+      "control_after_generate": {
+        "name": "contrôle après génération"
+      },
+      "model": {
+        "name": "modèle"
+      },
+      "model_duration": {
+        "name": "durée"
+      },
+      "model_negative_prompt": {
+        "name": "prompt négatif"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_ratio": {
+        "name": "ratio"
+      },
+      "model_resolution": {
+        "name": "résolution"
+      },
+      "seed": {
+        "name": "graine",
+        "tooltip": "Graine à utiliser pour la génération."
+      },
+      "watermark": {
+        "name": "filigrane",
+        "tooltip": "Ajouter ou non un filigrane généré par IA au résultat."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2TextToVideoApi": {
+    "description": "Génère une vidéo à partir d'une invite textuelle en utilisant le modèle Wan 2.7.",
+    "display_name": "Wan 2.7 Texte en Vidéo",
+    "inputs": {
+      "audio": {
+        "name": "audio",
+        "tooltip": "Audio pour guider la génération vidéo (ex : synchronisation labiale, mouvement sur le rythme). Durée : 3s-30s. Si non fourni, le modèle génère automatiquement une musique de fond ou des effets sonores adaptés."
+      },
+      "control_after_generate": {
+        "name": "contrôle après génération"
+      },
+      "model": {
+        "name": "modèle"
+      },
+      "model_duration": {
+        "name": "durée"
+      },
+      "model_negative_prompt": {
+        "name": "invite négative"
+      },
+      "model_prompt": {
+        "name": "invite"
+      },
+      "model_ratio": {
+        "name": "ratio"
+      },
+      "model_resolution": {
+        "name": "résolution"
+      },
+      "prompt_extend": {
+        "name": "extension d'invite",
+        "tooltip": "Améliorer l'invite avec l'assistance de l'IA."
+      },
+      "seed": {
+        "name": "graine",
+        "tooltip": "Graine à utiliser pour la génération."
+      },
+      "watermark": {
+        "name": "filigrane",
+        "tooltip": "Ajouter un filigrane généré par IA au résultat."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2VideoContinuationApi": {
+    "description": "Continue une vidéo à partir de l'endroit où elle s'est arrêtée, avec un contrôle optionnel de la dernière image.",
+    "display_name": "Wan 2.7 Continuation Vidéo",
+    "inputs": {
+      "control_after_generate": {
+        "name": "contrôle après génération"
+      },
+      "first_clip": {
+        "name": "premier clip",
+        "tooltip": "Vidéo d'entrée à continuer. Durée : 2s-10s. Le ratio de sortie est dérivé de cette vidéo."
+      },
+      "last_frame": {
+        "name": "dernière image",
+        "tooltip": "Image de la dernière frame. La continuation effectuera une transition vers cette image."
+      },
+      "model": {
+        "name": "modèle"
+      },
+      "model_duration": {
+        "name": "durée"
+      },
+      "model_negative_prompt": {
+        "name": "invite négative"
+      },
+      "model_prompt": {
+        "name": "invite"
+      },
+      "model_resolution": {
+        "name": "résolution"
+      },
+      "prompt_extend": {
+        "name": "extension d'invite",
+        "tooltip": "Améliorer l'invite avec l'assistance de l'IA."
+      },
+      "seed": {
+        "name": "graine",
+        "tooltip": "Graine à utiliser pour la génération."
+      },
+      "watermark": {
+        "name": "filigrane",
+        "tooltip": "Ajouter un filigrane généré par IA au résultat."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2VideoEditApi": {
+    "description": "Éditez une vidéo à l'aide d'instructions textuelles, d'images de référence ou de transfert de style.",
+    "display_name": "Wan 2.7 Édition Vidéo",
+    "inputs": {
+      "audio_setting": {
+        "name": "paramètre audio",
+        "tooltip": "'auto' : le modèle décide de régénérer ou non l'audio selon l'invite. 'origin' : préserve l'audio original de la vidéo d'entrée."
+      },
+      "control_after_generate": {
+        "name": "contrôle après génération"
+      },
+      "model": {
+        "name": "modèle"
+      },
+      "model_duration": {
+        "name": "durée"
+      },
+      "model_prompt": {
+        "name": "invite"
+      },
+      "model_ratio": {
+        "name": "ratio"
+      },
+      "model_resolution": {
+        "name": "résolution"
+      },
+      "seed": {
+        "name": "graine",
+        "tooltip": "Graine à utiliser pour la génération."
+      },
+      "video": {
+        "name": "vidéo",
+        "tooltip": "La vidéo à éditer."
+      },
+      "watermark": {
+        "name": "filigrane",
+        "tooltip": "Ajouter un filigrane généré par IA au résultat."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "WanAnimateToVideo": {
     "display_name": "WanAnimateToVideo",
     "inputs": {
diff --git a/src/locales/ja/main.json b/src/locales/ja/main.json
index 5568940e7f..6f8caaa9f4 100644
--- a/src/locales/ja/main.json
+++ b/src/locales/ja/main.json
@@ -1331,6 +1331,7 @@
     "updating": "更新中",
     "upload": "アップロード",
     "uploadAlreadyInProgress": "アップロードはすでに進行中です",
+    "uploadTimedOut": "アップロードがタイムアウトしました。もう一度お試しください。",
     "usageHint": "使用ヒント",
     "use": "使用",
     "user": "ユーザー",
@@ -1641,9 +1642,18 @@
     "exportRecording": "録画をエクスポート",
     "exportingModel": "モデルをエクスポート中...",
     "fov": "FOV",
+    "hdri": {
+      "changeFile": "HDRIを変更",
+      "intensity": "強度",
+      "label": "HDRI環境",
+      "removeFile": "HDRIを削除",
+      "showAsBackground": "背景として表示",
+      "uploadFile": "HDRIをアップロード（.hdr、.exr）"
+    },
     "light": "ライト",
     "lightIntensity": "光の強度",
     "loadingBackgroundImage": "背景画像を読み込んでいます",
+    "loadingHDRI": "HDRIを読み込み中...",
     "loadingModel": "3Dモデルを読み込んでいます...",
     "materialMode": "マテリアルモード",
     "materialModes": {
@@ -2258,6 +2268,7 @@
     "dataset": "データセット",
     "debug": "デバッグ",
     "deprecated": "非推奨",
+    "detection": "検出",
     "edit_models": "モデル編集",
     "flux": "flux",
     "gligen": "グライジェン",
@@ -2526,6 +2537,23 @@
     "inputsNone": "入力なし",
     "inputsNoneTooltip": "このノードには入力がありません",
     "locateNode": "キャンバス上でノードを探す",
+    "missingMedia": {
+      "audio": "音声",
+      "cancelSelection": "選択をキャンセル",
+      "collapseNodes": "参照ノードを非表示",
+      "confirmSelection": "選択を確定",
+      "expandNodes": "参照ノードを表示",
+      "image": "画像",
+      "locateNode": "ノードを特定",
+      "missingMediaTitle": "入力がありません",
+      "or": "または",
+      "selectedFromLibrary": "ライブラリから選択済み",
+      "uploadFile": "{type}をアップロード",
+      "uploaded": "アップロード完了",
+      "uploading": "アップロード中...",
+      "useFromLibrary": "ライブラリから使用",
+      "video": "動画"
+    },
     "missingModels": {
       "alreadyExistsInCategory": "このモデルはすでに「{category}」に存在します",
       "assetLoadTimeout": "モデルの検出がタイムアウトしました。ワークフローを再読み込みしてください。",
@@ -3239,6 +3267,7 @@
       "termsAgreement": "続行することで、Comfy Orgの{terms}および{privacy}に同意したものとみなされます。",
       "totalDueToday": "本日のお支払い合計"
     },
+    "refreshCredits": "クレジットを更新",
     "renewsDate": "{date} に更新",
     "required": {
       "pollingFailed": "サブスクリプションの有効化に失敗しました",
@@ -3411,6 +3440,7 @@
     "failedToInitiateCreditPurchase": "クレジット購入の開始に失敗しました: {error}",
     "failedToInitiateSubscription": "サブスクリプションの開始に失敗しました: {error}",
     "failedToLoadBackgroundImage": "背景画像の読み込みに失敗しました",
+    "failedToLoadHDRI": "HDRIファイルの読み込みに失敗しました",
     "failedToLoadModel": "3Dモデルの読み込みに失敗しました",
     "failedToPurchaseCredits": "クレジットの購入に失敗しました: {error}",
     "failedToQueue": "キューに追加できませんでした",
@@ -3446,6 +3476,7 @@
     "pleaseSelectOutputNodes": "出力ノードを選択してください",
     "unableToGetModelFilePath": "モデルファイルのパスを取得できません",
     "unauthorizedDomain": "あなたのドメイン {domain} はこのサービスを利用する権限がありません。ご利用のドメインをホワイトリストに追加するには、{email} までご連絡ください。",
+    "unsupportedHDRIFormat": "サポートされていないファイル形式です。.hdrまたは.exrファイルをアップロードしてください。",
     "updateRequested": "更新が要求されました",
     "useApiKeyTip": "ヒント：通常のログインにアクセスできませんか？Comfy APIキーオプションを使用してください。",
     "userNotAuthenticated": "ユーザーが認証されていません"
diff --git a/src/locales/ja/nodeDefs.json b/src/locales/ja/nodeDefs.json
index 33803e4389..2131fb7390 100644
--- a/src/locales/ja/nodeDefs.json
+++ b/src/locales/ja/nodeDefs.json
@@ -2190,6 +2190,10 @@
       "image": {
         "name": "画像"
       },
+      "keep_aspect": {
+        "name": "keep_aspect",
+        "tooltip": "クロップを出力サイズに合わせて引き伸ばすか、アスペクト比を維持するために黒いピクセルでパディングするかを選択します。"
+      },
       "output_height": {
         "name": "出力高さ",
         "tooltip": "各切り抜き画像がリサイズされる高さ。"
@@ -2313,6 +2317,23 @@
       }
     }
   },
+  "DrawBBoxes": {
+    "display_name": "バウンディングボックスを描画",
+    "inputs": {
+      "bboxes": {
+        "name": "bboxes"
+      },
+      "image": {
+        "name": "image"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "out_image",
+        "tooltip": null
+      }
+    }
+  },
   "DualCFGGuider": {
     "display_name": "デュアルCFGガイダー",
     "inputs": {
@@ -4985,6 +5006,36 @@
       }
     }
   },
+  "ImageHistogram": {
+    "display_name": "画像ヒストグラム",
+    "inputs": {
+      "image": {
+        "name": "画像"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "RGB",
+        "tooltip": null
+      },
+      "1": {
+        "name": "輝度",
+        "tooltip": null
+      },
+      "2": {
+        "name": "赤",
+        "tooltip": null
+      },
+      "3": {
+        "name": "緑",
+        "tooltip": null
+      },
+      "4": {
+        "name": "青",
+        "tooltip": null
+      }
+    }
+  },
   "ImageInvert": {
     "display_name": "画像を反転",
     "inputs": {
@@ -12226,6 +12277,34 @@
       }
     }
   },
+  "RTDETR_detect": {
+    "display_name": "RT-DETR 検出",
+    "inputs": {
+      "class_name": {
+        "name": "class_name",
+        "tooltip": "クラスで検出結果をフィルタリングします。「all」に設定するとフィルタリングを無効にします。"
+      },
+      "image": {
+        "name": "image"
+      },
+      "max_detections": {
+        "name": "max_detections",
+        "tooltip": "画像ごとに返す検出の最大数。信頼度スコアの高い順に並びます。"
+      },
+      "model": {
+        "name": "model"
+      },
+      "threshold": {
+        "name": "threshold"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "bboxes",
+        "tooltip": null
+      }
+    }
+  },
   "RandomCropImages": {
     "display_name": "ランダムクロップ画像",
     "inputs": {
@@ -15631,6 +15710,10 @@
       "1": {
         "name": "FBX",
         "tooltip": null
+      },
+      "2": {
+        "name": "uv画像",
+        "tooltip": null
       }
     }
   },
@@ -17898,6 +17981,241 @@
       }
     }
   },
+  "Wan2ImageToVideoApi": {
+    "description": "最初のフレーム画像から動画を生成します。オプションで最後のフレーム画像や音声も指定できます。",
+    "display_name": "Wan 2.7 画像から動画へ",
+    "inputs": {
+      "audio": {
+        "name": "audio",
+        "tooltip": "動画生成を制御する音声（例：リップシンク、ビートに合わせた動き）。長さ：2秒～30秒。指定しない場合は、モデルが自動的に合うBGMや効果音を生成します。"
+      },
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "first_frame": {
+        "name": "first_frame",
+        "tooltip": "最初のフレーム画像。この画像から出力動画のアスペクト比が決まります。"
+      },
+      "last_frame": {
+        "name": "last_frame",
+        "tooltip": "最後のフレーム画像。最初から最後のフレームへと遷移する動画を生成します。"
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "duration"
+      },
+      "model_negative_prompt": {
+        "name": "negative_prompt"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_resolution": {
+        "name": "resolution"
+      },
+      "prompt_extend": {
+        "name": "prompt_extend",
+        "tooltip": "AIによるプロンプトの強化を行うかどうか。"
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "生成に使用するシード値。"
+      },
+      "watermark": {
+        "name": "watermark",
+        "tooltip": "AI生成のウォーターマークを結果に追加するかどうか。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2ReferenceVideoApi": {
+    "description": "リファレンス素材から人物や物体を特徴とする動画を生成します。単一キャラクターの演技や複数キャラクターのインタラクションに対応しています。",
+    "display_name": "Wan 2.7 リファレンスから動画へ",
+    "inputs": {
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "duration"
+      },
+      "model_negative_prompt": {
+        "name": "negative_prompt"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_ratio": {
+        "name": "ratio"
+      },
+      "model_resolution": {
+        "name": "resolution"
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "生成に使用するシード値。"
+      },
+      "watermark": {
+        "name": "watermark",
+        "tooltip": "AI生成のウォーターマークを結果に追加するかどうか。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2TextToVideoApi": {
+    "description": "Wan 2.7モデルを使用してテキストプロンプトに基づいたビデオを生成します。",
+    "display_name": "Wan 2.7 テキストからビデオへ",
+    "inputs": {
+      "audio": {
+        "name": "オーディオ",
+        "tooltip": "ビデオ生成を駆動する音声（例：リップシンク、ビートに合わせた動き）。長さ：3秒～30秒。未指定の場合、モデルが自動的に合うBGMや効果音を生成します。"
+      },
+      "control_after_generate": {
+        "name": "生成後のコントロール"
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "長さ"
+      },
+      "model_negative_prompt": {
+        "name": "ネガティブプロンプト"
+      },
+      "model_prompt": {
+        "name": "プロンプト"
+      },
+      "model_ratio": {
+        "name": "アスペクト比"
+      },
+      "model_resolution": {
+        "name": "解像度"
+      },
+      "prompt_extend": {
+        "name": "プロンプト拡張",
+        "tooltip": "AIアシストでプロンプトを強化するかどうか。"
+      },
+      "seed": {
+        "name": "シード値",
+        "tooltip": "生成に使用するシード値。"
+      },
+      "watermark": {
+        "name": "ウォーターマーク",
+        "tooltip": "AI生成のウォーターマークを結果に追加するかどうか。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2VideoContinuationApi": {
+    "description": "ビデオの続きから生成を行い、オプションでラストフレーム制御も可能です。",
+    "display_name": "Wan 2.7 ビデオ継続生成",
+    "inputs": {
+      "control_after_generate": {
+        "name": "生成後のコントロール"
+      },
+      "first_clip": {
+        "name": "最初のクリップ",
+        "tooltip": "継続元となる入力ビデオ。長さ：2秒～10秒。出力のアスペクト比はこのビデオから取得されます。"
+      },
+      "last_frame": {
+        "name": "ラストフレーム",
+        "tooltip": "ラストフレーム画像。継続生成はこのフレームへと遷移します。"
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "長さ"
+      },
+      "model_negative_prompt": {
+        "name": "ネガティブプロンプト"
+      },
+      "model_prompt": {
+        "name": "プロンプト"
+      },
+      "model_resolution": {
+        "name": "解像度"
+      },
+      "prompt_extend": {
+        "name": "プロンプト拡張",
+        "tooltip": "AIアシストでプロンプトを強化するかどうか。"
+      },
+      "seed": {
+        "name": "シード値",
+        "tooltip": "生成に使用するシード値。"
+      },
+      "watermark": {
+        "name": "ウォーターマーク",
+        "tooltip": "AI生成のウォーターマークを結果に追加するかどうか。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2VideoEditApi": {
+    "description": "テキスト指示、参照画像、またはスタイル転送を使ってビデオを編集します。",
+    "display_name": "Wan 2.7 ビデオ編集",
+    "inputs": {
+      "audio_setting": {
+        "name": "オーディオ設定",
+        "tooltip": "「auto」：プロンプトに基づきモデルが音声再生成の有無を判断。「origin」：入力ビデオの元の音声を保持。"
+      },
+      "control_after_generate": {
+        "name": "生成後のコントロール"
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "長さ"
+      },
+      "model_prompt": {
+        "name": "プロンプト"
+      },
+      "model_ratio": {
+        "name": "アスペクト比"
+      },
+      "model_resolution": {
+        "name": "解像度"
+      },
+      "seed": {
+        "name": "シード値",
+        "tooltip": "生成に使用するシード値。"
+      },
+      "video": {
+        "name": "ビデオ",
+        "tooltip": "編集対象のビデオ。"
+      },
+      "watermark": {
+        "name": "ウォーターマーク",
+        "tooltip": "AI生成のウォーターマークを結果に追加するかどうか。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "WanAnimateToVideo": {
     "display_name": "WanAnimateToVideo",
     "inputs": {
diff --git a/src/locales/ko/main.json b/src/locales/ko/main.json
index 7b5ad9fced..d69456ad05 100644
--- a/src/locales/ko/main.json
+++ b/src/locales/ko/main.json
@@ -1331,6 +1331,7 @@
     "updating": "업데이트 중",
     "upload": "업로드",
     "uploadAlreadyInProgress": "업로드가 이미 진행 중입니다",
+    "uploadTimedOut": "업로드 시간이 초과되었습니다. 다시 시도해 주세요.",
     "usageHint": "사용 힌트",
     "use": "사용",
     "user": "사용자",
@@ -1641,9 +1642,18 @@
     "exportRecording": "녹화 내보내기",
     "exportingModel": "모델 내보내기 중...",
     "fov": "FOV",
+    "hdri": {
+      "changeFile": "HDRI 변경",
+      "intensity": "강도",
+      "label": "HDRI 환경",
+      "removeFile": "HDRI 제거",
+      "showAsBackground": "배경으로 표시",
+      "uploadFile": "HDRI 업로드 (.hdr, .exr)"
+    },
     "light": "빛",
     "lightIntensity": "조명 강도",
     "loadingBackgroundImage": "배경 이미지 불러오는 중",
+    "loadingHDRI": "HDRI 불러오는 중...",
     "loadingModel": "3D 모델 로딩 중...",
     "materialMode": "재질 모드",
     "materialModes": {
@@ -2258,6 +2268,7 @@
     "dataset": "데이터셋",
     "debug": "디버그",
     "deprecated": "지원 중단",
+    "detection": "감지",
     "edit_models": "edit_models",
     "flux": "flux",
     "gligen": "글리젠",
@@ -2526,6 +2537,23 @@
     "inputsNone": "입력 없음",
     "inputsNoneTooltip": "노드에 입력이 없습니다",
     "locateNode": "캔버스에서 노드 찾기",
+    "missingMedia": {
+      "audio": "오디오",
+      "cancelSelection": "선택 취소",
+      "collapseNodes": "참조 노드 숨기기",
+      "confirmSelection": "선택 확인",
+      "expandNodes": "참조 노드 표시",
+      "image": "이미지",
+      "locateNode": "노드 위치 찾기",
+      "missingMediaTitle": "입력 누락",
+      "or": "또는",
+      "selectedFromLibrary": "라이브러리에서 선택됨",
+      "uploadFile": "{type} 업로드",
+      "uploaded": "업로드 완료",
+      "uploading": "업로드 중...",
+      "useFromLibrary": "라이브러리에서 사용",
+      "video": "비디오"
+    },
     "missingModels": {
       "alreadyExistsInCategory": "이 모델은 이미 \"{category}\"에 존재합니다",
       "assetLoadTimeout": "모델 감지 시간이 초과되었습니다. 워크플로우를 다시 불러와 보세요.",
@@ -3239,6 +3267,7 @@
       "termsAgreement": "계속 진행하면 Comfy Org의 {terms} 및 {privacy}에 동의하게 됩니다.",
       "totalDueToday": "오늘 결제 금액 합계"
     },
+    "refreshCredits": "크레딧 새로고침",
     "renewsDate": "{date}에 갱신됨",
     "required": {
       "pollingFailed": "구독 활성화에 실패했습니다",
@@ -3411,6 +3440,7 @@
     "failedToInitiateCreditPurchase": "크레딧 구매를 시작하지 못했습니다: {error}",
     "failedToInitiateSubscription": "구독을 시작하지 못함: {error}",
     "failedToLoadBackgroundImage": "배경 이미지를 로드하지 못함",
+    "failedToLoadHDRI": "HDRI 파일을 불러오지 못했습니다",
     "failedToLoadModel": "3D 모델을 로드하지 못함",
     "failedToPurchaseCredits": "크레딧 구매에 실패했습니다: {error}",
     "failedToQueue": "대기열 추가 실패",
@@ -3446,6 +3476,7 @@
     "pleaseSelectOutputNodes": "출력 노드를 선택해 주세요",
     "unableToGetModelFilePath": "모델 파일 경로를 가져올 수 없습니다",
     "unauthorizedDomain": "귀하의 도메인 {domain}은(는) 이 서비스를 사용할 수 있는 권한이 없습니다. 도메인을 허용 목록에 추가하려면 {email}로 문의해 주세요.",
+    "unsupportedHDRIFormat": "지원되지 않는 파일 형식입니다. .hdr 또는 .exr 파일을 업로드해 주세요.",
     "updateRequested": "업데이트 요청됨",
     "useApiKeyTip": "팁: 일반 로그인을 사용할 수 없나요? Comfy API Key 옵션을 사용하세요.",
     "userNotAuthenticated": "사용자가 인증되지 않았습니다"
diff --git a/src/locales/ko/nodeDefs.json b/src/locales/ko/nodeDefs.json
index 0d2889ca72..f2e1920251 100644
--- a/src/locales/ko/nodeDefs.json
+++ b/src/locales/ko/nodeDefs.json
@@ -2190,6 +2190,10 @@
       "image": {
         "name": "image"
       },
+      "keep_aspect": {
+        "name": "keep_aspect",
+        "tooltip": "출력 크기에 맞게 자르기를 늘릴지, 아니면 종횡비를 유지하기 위해 검은색 픽셀로 채울지 여부입니다."
+      },
       "output_height": {
         "name": "output_height",
         "tooltip": "각 잘라낸 이미지의 높이로 크기가 조정됩니다."
@@ -2313,6 +2317,23 @@
       }
     }
   },
+  "DrawBBoxes": {
+    "display_name": "BBoxes 그리기",
+    "inputs": {
+      "bboxes": {
+        "name": "bboxes"
+      },
+      "image": {
+        "name": "image"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "out_image",
+        "tooltip": null
+      }
+    }
+  },
   "DualCFGGuider": {
     "display_name": "이중 CFG 가이드",
     "inputs": {
@@ -4985,6 +5006,36 @@
       }
     }
   },
+  "ImageHistogram": {
+    "display_name": "이미지 히스토그램",
+    "inputs": {
+      "image": {
+        "name": "이미지"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "RGB",
+        "tooltip": null
+      },
+      "1": {
+        "name": "휘도",
+        "tooltip": null
+      },
+      "2": {
+        "name": "레드",
+        "tooltip": null
+      },
+      "3": {
+        "name": "그린",
+        "tooltip": null
+      },
+      "4": {
+        "name": "블루",
+        "tooltip": null
+      }
+    }
+  },
   "ImageInvert": {
     "display_name": "이미지 반전",
     "inputs": {
@@ -12226,6 +12277,34 @@
       }
     }
   },
+  "RTDETR_detect": {
+    "display_name": "RT-DETR 감지",
+    "inputs": {
+      "class_name": {
+        "name": "class_name",
+        "tooltip": "클래스로 감지 결과를 필터링합니다. 필터링을 비활성화하려면 'all'로 설정하세요."
+      },
+      "image": {
+        "name": "image"
+      },
+      "max_detections": {
+        "name": "max_detections",
+        "tooltip": "이미지당 반환할 최대 감지 개수입니다. 신뢰도 점수 내림차순으로 정렬됩니다."
+      },
+      "model": {
+        "name": "model"
+      },
+      "threshold": {
+        "name": "threshold"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "bboxes",
+        "tooltip": null
+      }
+    }
+  },
   "RandomCropImages": {
     "display_name": "무작위 이미지 자르기",
     "inputs": {
@@ -15631,6 +15710,10 @@
       "1": {
         "name": "FBX",
         "tooltip": null
+      },
+      "2": {
+        "name": "uv_image",
+        "tooltip": null
       }
     }
   },
@@ -17898,6 +17981,241 @@
       }
     }
   },
+  "Wan2ImageToVideoApi": {
+    "description": "첫 프레임 이미지를 기반으로 비디오를 생성합니다. 마지막 프레임 이미지와 오디오를 선택적으로 추가할 수 있습니다.",
+    "display_name": "Wan 2.7 이미지 → 비디오",
+    "inputs": {
+      "audio": {
+        "name": "audio",
+        "tooltip": "비디오 생성에 사용할 오디오입니다(예: 립싱크, 비트에 맞춘 동작). 길이: 2초~30초. 제공하지 않으면 모델이 자동으로 배경 음악 또는 효과음을 생성합니다."
+      },
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "first_frame": {
+        "name": "first_frame",
+        "tooltip": "첫 프레임 이미지입니다. 출력 비율은 이 이미지에서 결정됩니다."
+      },
+      "last_frame": {
+        "name": "last_frame",
+        "tooltip": "마지막 프레임 이미지입니다. 모델이 첫 프레임에서 마지막 프레임으로 전환되는 비디오를 생성합니다."
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "duration"
+      },
+      "model_negative_prompt": {
+        "name": "negative_prompt"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_resolution": {
+        "name": "resolution"
+      },
+      "prompt_extend": {
+        "name": "prompt_extend",
+        "tooltip": "AI의 도움으로 프롬프트를 확장할지 여부입니다."
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "생성에 사용할 시드 값입니다."
+      },
+      "watermark": {
+        "name": "watermark",
+        "tooltip": "AI가 생성한 워터마크를 결과에 추가할지 여부입니다."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2ReferenceVideoApi": {
+    "description": "레퍼런스 자료를 기반으로 인물 또는 오브젝트가 등장하는 비디오를 생성합니다. 단일 캐릭터 연기와 다중 캐릭터 상호작용을 지원합니다.",
+    "display_name": "Wan 2.7 레퍼런스 → 비디오",
+    "inputs": {
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "duration"
+      },
+      "model_negative_prompt": {
+        "name": "negative_prompt"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_ratio": {
+        "name": "ratio"
+      },
+      "model_resolution": {
+        "name": "resolution"
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "생성에 사용할 시드 값입니다."
+      },
+      "watermark": {
+        "name": "watermark",
+        "tooltip": "AI가 생성한 워터마크를 결과에 추가할지 여부입니다."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2TextToVideoApi": {
+    "description": "Wan 2.7 모델을 사용하여 텍스트 프롬프트 기반으로 비디오를 생성합니다.",
+    "display_name": "Wan 2.7 텍스트 투 비디오",
+    "inputs": {
+      "audio": {
+        "name": "audio",
+        "tooltip": "비디오 생성에 사용할 오디오(예: 립싱크, 비트에 맞춘 동작). 길이: 3초~30초. 제공하지 않으면 모델이 자동으로 배경 음악이나 효과음을 생성합니다."
+      },
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "duration"
+      },
+      "model_negative_prompt": {
+        "name": "negative_prompt"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_ratio": {
+        "name": "ratio"
+      },
+      "model_resolution": {
+        "name": "resolution"
+      },
+      "prompt_extend": {
+        "name": "prompt_extend",
+        "tooltip": "AI의 도움으로 프롬프트를 확장할지 여부입니다."
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "생성에 사용할 시드입니다."
+      },
+      "watermark": {
+        "name": "watermark",
+        "tooltip": "AI가 생성한 워터마크를 결과에 추가할지 여부입니다."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2VideoContinuationApi": {
+    "description": "비디오가 끝난 지점부터 이어서 생성하며, 마지막 프레임 제어도 선택적으로 지원합니다.",
+    "display_name": "Wan 2.7 비디오 연속 생성",
+    "inputs": {
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "first_clip": {
+        "name": "first_clip",
+        "tooltip": "이어 생성할 입력 비디오입니다. 길이: 2초~10초. 출력 비율은 이 비디오에서 파생됩니다."
+      },
+      "last_frame": {
+        "name": "last_frame",
+        "tooltip": "마지막 프레임 이미지입니다. 이어지는 비디오는 이 프레임으로 전환됩니다."
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "duration"
+      },
+      "model_negative_prompt": {
+        "name": "negative_prompt"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_resolution": {
+        "name": "resolution"
+      },
+      "prompt_extend": {
+        "name": "prompt_extend",
+        "tooltip": "AI의 도움으로 프롬프트를 확장할지 여부입니다."
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "생성에 사용할 시드입니다."
+      },
+      "watermark": {
+        "name": "watermark",
+        "tooltip": "AI가 생성한 워터마크를 결과에 추가할지 여부입니다."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2VideoEditApi": {
+    "description": "텍스트 지시, 참조 이미지 또는 스타일 전송을 사용하여 비디오를 편집합니다.",
+    "display_name": "Wan 2.7 비디오 편집",
+    "inputs": {
+      "audio_setting": {
+        "name": "audio_setting",
+        "tooltip": "'auto': 프롬프트에 따라 오디오를 재생성할지 모델이 결정합니다. 'origin': 입력 비디오의 원본 오디오를 유지합니다."
+      },
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "duration"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_ratio": {
+        "name": "ratio"
+      },
+      "model_resolution": {
+        "name": "resolution"
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "생성에 사용할 시드입니다."
+      },
+      "video": {
+        "name": "video",
+        "tooltip": "편집할 비디오입니다."
+      },
+      "watermark": {
+        "name": "watermark",
+        "tooltip": "AI가 생성한 워터마크를 결과에 추가할지 여부입니다."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "WanAnimateToVideo": {
     "display_name": "완애니메이트투비디오",
     "inputs": {
diff --git a/src/locales/pt-BR/main.json b/src/locales/pt-BR/main.json
index 131e5e338f..7f0f75be17 100644
--- a/src/locales/pt-BR/main.json
+++ b/src/locales/pt-BR/main.json
@@ -1331,6 +1331,7 @@
     "updating": "Atualizando {id}",
     "upload": "Enviar",
     "uploadAlreadyInProgress": "O upload já está em andamento",
+    "uploadTimedOut": "O envio excedeu o tempo limite. Por favor, tente novamente.",
     "usageHint": "Dica de uso",
     "use": "Usar",
     "user": "Usuário",
@@ -1641,9 +1642,18 @@
     "exportRecording": "Exportar Gravação",
     "exportingModel": "Exportando modelo...",
     "fov": "Campo de Visão (FOV)",
+    "hdri": {
+      "changeFile": "Alterar HDRI",
+      "intensity": "Intensidade",
+      "label": "Ambiente HDRI",
+      "removeFile": "Remover HDRI",
+      "showAsBackground": "Exibir como fundo",
+      "uploadFile": "Enviar HDRI (.hdr, .exr)"
+    },
     "light": "Luz",
     "lightIntensity": "Intensidade da Luz",
     "loadingBackgroundImage": "Carregando Imagem de Fundo",
+    "loadingHDRI": "Carregando HDRI...",
     "loadingModel": "Carregando Modelo 3D...",
     "materialMode": "Modo de Material",
     "materialModes": {
@@ -2258,6 +2268,7 @@
     "dataset": "conjunto_de_dados",
     "debug": "depuração",
     "deprecated": "obsoleto",
+    "detection": "detecção",
     "edit_models": "editar_modelos",
     "flux": "flux",
     "gligen": "gligen",
@@ -2526,6 +2537,23 @@
     "inputsNone": "SEM ENTRADAS",
     "inputsNoneTooltip": "O nó não possui entradas",
     "locateNode": "Localizar nó no canvas",
+    "missingMedia": {
+      "audio": "Áudio",
+      "cancelSelection": "Cancelar seleção",
+      "collapseNodes": "Ocultar nós de referência",
+      "confirmSelection": "Confirmar seleção",
+      "expandNodes": "Mostrar nós de referência",
+      "image": "Imagens",
+      "locateNode": "Localizar nó",
+      "missingMediaTitle": "Entradas Ausentes",
+      "or": "OU",
+      "selectedFromLibrary": "Selecionado da biblioteca",
+      "uploadFile": "Enviar {type}",
+      "uploaded": "Enviado",
+      "uploading": "Enviando...",
+      "useFromLibrary": "Usar da Biblioteca",
+      "video": "Vídeos"
+    },
     "missingModels": {
       "alreadyExistsInCategory": "Este modelo já existe em \"{category}\"",
       "assetLoadTimeout": "Tempo esgotado na detecção do modelo. Tente recarregar o fluxo de trabalho.",
@@ -3251,6 +3279,7 @@
       "termsAgreement": "Ao continuar, você concorda com os {terms} e {privacy} da Comfy Org.",
       "totalDueToday": "Total devido hoje"
     },
+    "refreshCredits": "Atualizar créditos",
     "renewsDate": "Renova em {date}",
     "required": {
       "pollingFailed": "Falha ao ativar a assinatura",
@@ -3423,6 +3452,7 @@
     "failedToInitiateCreditPurchase": "Falha ao iniciar compra de créditos: {error}",
     "failedToInitiateSubscription": "Falha ao iniciar assinatura: {error}",
     "failedToLoadBackgroundImage": "Falha ao carregar imagem de fundo",
+    "failedToLoadHDRI": "Falha ao carregar o arquivo HDRI",
     "failedToLoadModel": "Falha ao carregar modelo 3D",
     "failedToPurchaseCredits": "Falha ao comprar créditos: {error}",
     "failedToQueue": "Falha ao enfileirar",
@@ -3458,6 +3488,7 @@
     "pleaseSelectOutputNodes": "Por favor, selecione os nós de saída",
     "unableToGetModelFilePath": "Não foi possível obter o caminho do arquivo do modelo",
     "unauthorizedDomain": "Seu domínio {domain} não está autorizado a usar este serviço. Por favor, entre em contato com {email} para adicionar seu domínio à lista de permissões.",
+    "unsupportedHDRIFormat": "Formato de arquivo não suportado. Por favor, envie um arquivo .hdr ou .exr.",
     "updateRequested": "Atualização solicitada",
     "useApiKeyTip": "Dica: Não consegue acessar o login normal? Use a opção Comfy API Key.",
     "userNotAuthenticated": "Usuário não autenticado"
diff --git a/src/locales/pt-BR/nodeDefs.json b/src/locales/pt-BR/nodeDefs.json
index c8aa44a526..90e48dfc45 100644
--- a/src/locales/pt-BR/nodeDefs.json
+++ b/src/locales/pt-BR/nodeDefs.json
@@ -2190,6 +2190,10 @@
       "image": {
         "name": "imagem"
       },
+      "keep_aspect": {
+        "name": "keep_aspect",
+        "tooltip": "Escolher entre esticar o recorte para caber no tamanho de saída ou preencher com pixels pretos para preservar a proporção."
+      },
       "output_height": {
         "name": "altura_de_saida",
         "tooltip": "Altura para a qual cada recorte será redimensionado."
@@ -2313,6 +2317,23 @@
       }
     }
   },
+  "DrawBBoxes": {
+    "display_name": "Desenhar BBoxes",
+    "inputs": {
+      "bboxes": {
+        "name": "bboxes"
+      },
+      "image": {
+        "name": "image"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "out_image",
+        "tooltip": null
+      }
+    }
+  },
   "DualCFGGuider": {
     "display_name": "Guia DualCFG",
     "inputs": {
@@ -4985,6 +5006,36 @@
       }
     }
   },
+  "ImageHistogram": {
+    "display_name": "Histograma de Imagem",
+    "inputs": {
+      "image": {
+        "name": "imagem"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "rgb",
+        "tooltip": null
+      },
+      "1": {
+        "name": "luminância",
+        "tooltip": null
+      },
+      "2": {
+        "name": "vermelho",
+        "tooltip": null
+      },
+      "3": {
+        "name": "verde",
+        "tooltip": null
+      },
+      "4": {
+        "name": "azul",
+        "tooltip": null
+      }
+    }
+  },
   "ImageInvert": {
     "display_name": "Inverter Imagem",
     "inputs": {
@@ -12226,6 +12277,34 @@
       }
     }
   },
+  "RTDETR_detect": {
+    "display_name": "RT-DETR Detectar",
+    "inputs": {
+      "class_name": {
+        "name": "class_name",
+        "tooltip": "Filtrar detecções por classe. Defina como 'all' para desabilitar o filtro."
+      },
+      "image": {
+        "name": "image"
+      },
+      "max_detections": {
+        "name": "max_detections",
+        "tooltip": "Número máximo de detecções a retornar por imagem. Em ordem decrescente de confiança."
+      },
+      "model": {
+        "name": "model"
+      },
+      "threshold": {
+        "name": "threshold"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "bboxes",
+        "tooltip": null
+      }
+    }
+  },
   "RandomCropImages": {
     "display_name": "Corte Aleatório de Imagens",
     "inputs": {
@@ -15631,6 +15710,10 @@
       "1": {
         "name": "FBX",
         "tooltip": null
+      },
+      "2": {
+        "name": "imagem UV",
+        "tooltip": null
       }
     }
   },
@@ -17898,6 +17981,241 @@
       }
     }
   },
+  "Wan2ImageToVideoApi": {
+    "description": "Gere um vídeo a partir de uma imagem do primeiro quadro, com opção de imagem do último quadro e áudio.",
+    "display_name": "Wan 2.7 Imagem para Vídeo",
+    "inputs": {
+      "audio": {
+        "name": "audio",
+        "tooltip": "Áudio para direcionar a geração do vídeo (ex: sincronização labial, movimento no ritmo da batida). Duração: 2s-30s. Se não for fornecido, o modelo gera automaticamente música de fundo ou efeitos sonoros correspondentes."
+      },
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "first_frame": {
+        "name": "first_frame",
+        "tooltip": "Imagem do primeiro quadro. A proporção de aspecto de saída é derivada desta imagem."
+      },
+      "last_frame": {
+        "name": "last_frame",
+        "tooltip": "Imagem do último quadro. O modelo gera um vídeo fazendo a transição do primeiro para o último quadro."
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "duration"
+      },
+      "model_negative_prompt": {
+        "name": "negative_prompt"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_resolution": {
+        "name": "resolution"
+      },
+      "prompt_extend": {
+        "name": "prompt_extend",
+        "tooltip": "Se deseja aprimorar o prompt com assistência de IA."
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "Seed para usar na geração."
+      },
+      "watermark": {
+        "name": "watermark",
+        "tooltip": "Se deseja adicionar uma marca d'água gerada por IA ao resultado."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2ReferenceVideoApi": {
+    "description": "Gere um vídeo apresentando uma pessoa ou objeto a partir de materiais de referência. Suporta performances de personagem único e interações entre múltiplos personagens.",
+    "display_name": "Wan 2.7 Referência para Vídeo",
+    "inputs": {
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "duration"
+      },
+      "model_negative_prompt": {
+        "name": "negative_prompt"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_ratio": {
+        "name": "ratio"
+      },
+      "model_resolution": {
+        "name": "resolution"
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "Seed para usar na geração."
+      },
+      "watermark": {
+        "name": "watermark",
+        "tooltip": "Se deseja adicionar uma marca d'água gerada por IA ao resultado."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2TextToVideoApi": {
+    "description": "Gera um vídeo com base em um prompt de texto usando o modelo Wan 2.7.",
+    "display_name": "Wan 2.7 Texto para Vídeo",
+    "inputs": {
+      "audio": {
+        "name": "áudio",
+        "tooltip": "Áudio para direcionar a geração do vídeo (ex: sincronização labial, movimento no ritmo da música). Duração: 3s-30s. Se não fornecido, o modelo gera automaticamente música de fundo ou efeitos sonoros compatíveis."
+      },
+      "control_after_generate": {
+        "name": "controle após gerar"
+      },
+      "model": {
+        "name": "modelo"
+      },
+      "model_duration": {
+        "name": "duração"
+      },
+      "model_negative_prompt": {
+        "name": "prompt_negativo"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_ratio": {
+        "name": "proporção"
+      },
+      "model_resolution": {
+        "name": "resolução"
+      },
+      "prompt_extend": {
+        "name": "estender_prompt",
+        "tooltip": "Se deseja aprimorar o prompt com assistência de IA."
+      },
+      "seed": {
+        "name": "semente",
+        "tooltip": "Semente a ser usada para a geração."
+      },
+      "watermark": {
+        "name": "marca_d'água",
+        "tooltip": "Se deseja adicionar uma marca d'água gerada por IA ao resultado."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2VideoContinuationApi": {
+    "description": "Continue um vídeo de onde parou, com controle opcional do último quadro.",
+    "display_name": "Wan 2.7 Continuação de Vídeo",
+    "inputs": {
+      "control_after_generate": {
+        "name": "controle após gerar"
+      },
+      "first_clip": {
+        "name": "primeiro_clip",
+        "tooltip": "Vídeo de entrada para continuar. Duração: 2s-10s. A proporção de aspecto de saída é derivada deste vídeo."
+      },
+      "last_frame": {
+        "name": "último_quadro",
+        "tooltip": "Imagem do último quadro. A continuação fará a transição para este quadro."
+      },
+      "model": {
+        "name": "modelo"
+      },
+      "model_duration": {
+        "name": "duração"
+      },
+      "model_negative_prompt": {
+        "name": "prompt_negativo"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_resolution": {
+        "name": "resolução"
+      },
+      "prompt_extend": {
+        "name": "estender_prompt",
+        "tooltip": "Se deseja aprimorar o prompt com assistência de IA."
+      },
+      "seed": {
+        "name": "semente",
+        "tooltip": "Semente a ser usada para a geração."
+      },
+      "watermark": {
+        "name": "marca_d'água",
+        "tooltip": "Se deseja adicionar uma marca d'água gerada por IA ao resultado."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2VideoEditApi": {
+    "description": "Edite um vídeo usando instruções de texto, imagens de referência ou transferência de estilo.",
+    "display_name": "Wan 2.7 Edição de Vídeo",
+    "inputs": {
+      "audio_setting": {
+        "name": "configuração_de_áudio",
+        "tooltip": "'auto': o modelo decide se deve regenerar o áudio com base no prompt. 'origin': preserva o áudio original do vídeo de entrada."
+      },
+      "control_after_generate": {
+        "name": "controle após gerar"
+      },
+      "model": {
+        "name": "modelo"
+      },
+      "model_duration": {
+        "name": "duração"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_ratio": {
+        "name": "proporção"
+      },
+      "model_resolution": {
+        "name": "resolução"
+      },
+      "seed": {
+        "name": "semente",
+        "tooltip": "Semente a ser usada para a geração."
+      },
+      "video": {
+        "name": "vídeo",
+        "tooltip": "O vídeo a ser editado."
+      },
+      "watermark": {
+        "name": "marca_d'água",
+        "tooltip": "Se deseja adicionar uma marca d'água gerada por IA ao resultado."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "WanAnimateToVideo": {
     "display_name": "WanAnimateToVideo",
     "inputs": {
diff --git a/src/locales/ru/main.json b/src/locales/ru/main.json
index 0a6b1c7ba4..750898e8f5 100644
--- a/src/locales/ru/main.json
+++ b/src/locales/ru/main.json
@@ -1331,6 +1331,7 @@
     "updating": "Обновление",
     "upload": "Загрузить",
     "uploadAlreadyInProgress": "Загрузка уже выполняется",
+    "uploadTimedOut": "Время загрузки истекло. Пожалуйста, попробуйте еще раз.",
     "usageHint": "Подсказка по использованию",
     "use": "Использовать",
     "user": "Пользователь",
@@ -1641,9 +1642,18 @@
     "exportRecording": "Экспортировать запись",
     "exportingModel": "Экспорт модели...",
     "fov": "Угол обзора",
+    "hdri": {
+      "changeFile": "Сменить HDRI",
+      "intensity": "Интенсивность",
+      "label": "HDRI-окружение",
+      "removeFile": "Удалить HDRI",
+      "showAsBackground": "Показать как фон",
+      "uploadFile": "Загрузить HDRI (.hdr, .exr)"
+    },
     "light": "Свет",
     "lightIntensity": "Интенсивность света",
     "loadingBackgroundImage": "Загрузка фонового изображения",
+    "loadingHDRI": "Загрузка HDRI...",
     "loadingModel": "Загрузка 3D модели...",
     "materialMode": "Режим Материала",
     "materialModes": {
@@ -2258,6 +2268,7 @@
     "dataset": "dataset",
     "debug": "отладка",
     "deprecated": "устаревший",
+    "detection": "детекция",
     "edit_models": "редактировать_модели",
     "flux": "flux",
     "gligen": "gligen",
@@ -2526,6 +2537,23 @@
     "inputsNone": "НЕТ ВХОДОВ",
     "inputsNoneTooltip": "Узел не имеет входов",
     "locateNode": "Найти узел на холсте",
+    "missingMedia": {
+      "audio": "Аудио",
+      "cancelSelection": "Отменить выбор",
+      "collapseNodes": "Скрыть ссылающиеся узлы",
+      "confirmSelection": "Подтвердить выбор",
+      "expandNodes": "Показать ссылающиеся узлы",
+      "image": "Изображения",
+      "locateNode": "Найти узел",
+      "missingMediaTitle": "Отсутствующие входные данные",
+      "or": "ИЛИ",
+      "selectedFromLibrary": "Выбрано из библиотеки",
+      "uploadFile": "Загрузить {type}",
+      "uploaded": "Загружено",
+      "uploading": "Загрузка...",
+      "useFromLibrary": "Использовать из библиотеки",
+      "video": "Видео"
+    },
     "missingModels": {
       "alreadyExistsInCategory": "Эта модель уже существует в «{category}»",
       "assetLoadTimeout": "Время ожидания обнаружения модели истекло. Попробуйте перезагрузить рабочий процесс.",
@@ -3239,6 +3267,7 @@
       "termsAgreement": "Продолжая, вы соглашаетесь с {terms} и {privacy} Comfy Org.",
       "totalDueToday": "Итого к оплате сегодня"
     },
+    "refreshCredits": "Обновить кредиты",
     "renewsDate": "Обновляется {date}",
     "required": {
       "pollingFailed": "Не удалось активировать подписку",
@@ -3411,6 +3440,7 @@
     "failedToInitiateCreditPurchase": "Не удалось начать покупку кредитов: {error}",
     "failedToInitiateSubscription": "Не удалось инициировать подписку: {error}",
     "failedToLoadBackgroundImage": "Не удалось загрузить фоновое изображение",
+    "failedToLoadHDRI": "Не удалось загрузить файл HDRI",
     "failedToLoadModel": "Не удалось загрузить 3D-модель",
     "failedToPurchaseCredits": "Не удалось купить кредиты: {error}",
     "failedToQueue": "Не удалось поставить в очередь",
@@ -3446,6 +3476,7 @@
     "pleaseSelectOutputNodes": "Пожалуйста, выберите выходные узлы",
     "unableToGetModelFilePath": "Не удалось получить путь к файлу модели",
     "unauthorizedDomain": "Ваш домен {domain} не авторизован для использования этого сервиса. Пожалуйста, свяжитесь с {email}, чтобы добавить ваш домен в белый список.",
+    "unsupportedHDRIFormat": "Неподдерживаемый формат файла. Пожалуйста, загрузите файл .hdr или .exr.",
     "updateRequested": "Запрошено обновление",
     "useApiKeyTip": "Совет: Нет доступа к обычному входу? Используйте опцию Comfy API Key.",
     "userNotAuthenticated": "Пользователь не аутентифицирован"
diff --git a/src/locales/ru/nodeDefs.json b/src/locales/ru/nodeDefs.json
index 3725445952..ed14451dfe 100644
--- a/src/locales/ru/nodeDefs.json
+++ b/src/locales/ru/nodeDefs.json
@@ -2190,6 +2190,10 @@
       "image": {
         "name": "image"
       },
+      "keep_aspect": {
+        "name": "keep_aspect",
+        "tooltip": "Растягивать ли обрезку до нужного размера или добавлять чёрные поля для сохранения соотношения сторон."
+      },
       "output_height": {
         "name": "output_height",
         "tooltip": "Высота, до которой изменяется каждый обрезанный фрагмент."
@@ -2313,6 +2317,23 @@
       }
     }
   },
+  "DrawBBoxes": {
+    "display_name": "Нарисовать BBoxes",
+    "inputs": {
+      "bboxes": {
+        "name": "bboxes"
+      },
+      "image": {
+        "name": "image"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "out_image",
+        "tooltip": null
+      }
+    }
+  },
   "DualCFGGuider": {
     "display_name": "Двойной CFG Гид",
     "inputs": {
@@ -4985,6 +5006,36 @@
       }
     }
   },
+  "ImageHistogram": {
+    "display_name": "Гистограмма изображения",
+    "inputs": {
+      "image": {
+        "name": "изображение"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "rgb",
+        "tooltip": null
+      },
+      "1": {
+        "name": "яркость",
+        "tooltip": null
+      },
+      "2": {
+        "name": "красный",
+        "tooltip": null
+      },
+      "3": {
+        "name": "зелёный",
+        "tooltip": null
+      },
+      "4": {
+        "name": "синий",
+        "tooltip": null
+      }
+    }
+  },
   "ImageInvert": {
     "display_name": "Инвертировать изображение",
     "inputs": {
@@ -12226,6 +12277,34 @@
       }
     }
   },
+  "RTDETR_detect": {
+    "display_name": "RT-DETR Обнаружение",
+    "inputs": {
+      "class_name": {
+        "name": "class_name",
+        "tooltip": "Фильтровать обнаружения по классу. Установите 'all', чтобы отключить фильтрацию."
+      },
+      "image": {
+        "name": "image"
+      },
+      "max_detections": {
+        "name": "max_detections",
+        "tooltip": "Максимальное количество обнаружений на изображение. В порядке убывания оценки уверенности."
+      },
+      "model": {
+        "name": "model"
+      },
+      "threshold": {
+        "name": "threshold"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "bboxes",
+        "tooltip": null
+      }
+    }
+  },
   "RandomCropImages": {
     "display_name": "Случайное кадрирование изображений",
     "inputs": {
@@ -15631,6 +15710,10 @@
       "1": {
         "name": "FBX",
         "tooltip": null
+      },
+      "2": {
+        "name": "uv_image",
+        "tooltip": null
       }
     }
   },
@@ -17898,6 +17981,241 @@
       }
     }
   },
+  "Wan2ImageToVideoApi": {
+    "description": "Создайте видео из изображения первого кадра с возможностью добавить изображение последнего кадра и аудио.",
+    "display_name": "Wan 2.7 Изображение в Видео",
+    "inputs": {
+      "audio": {
+        "name": "audio",
+        "tooltip": "Аудио для управления генерацией видео (например, синхронизация губ, движение в ритм музыки). Длительность: 2–30 сек. Если не указано, модель автоматически сгенерирует подходящую фоновую музыку или звуковые эффекты."
+      },
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "first_frame": {
+        "name": "first_frame",
+        "tooltip": "Изображение первого кадра. Соотношение сторон результата определяется этим изображением."
+      },
+      "last_frame": {
+        "name": "last_frame",
+        "tooltip": "Изображение последнего кадра. Модель создаёт видео с переходом от первого к последнему кадру."
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "duration"
+      },
+      "model_negative_prompt": {
+        "name": "negative_prompt"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_resolution": {
+        "name": "resolution"
+      },
+      "prompt_extend": {
+        "name": "prompt_extend",
+        "tooltip": "Улучшить ли промпт с помощью AI."
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "Сид для генерации."
+      },
+      "watermark": {
+        "name": "watermark",
+        "tooltip": "Добавлять ли AI-водяной знак к результату."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2ReferenceVideoApi": {
+    "description": "Создайте видео с участием человека или объекта на основе референсных материалов. Поддерживает выступления одного персонажа и взаимодействие нескольких персонажей.",
+    "display_name": "Wan 2.7 Референс в Видео",
+    "inputs": {
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "duration"
+      },
+      "model_negative_prompt": {
+        "name": "negative_prompt"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_ratio": {
+        "name": "ratio"
+      },
+      "model_resolution": {
+        "name": "resolution"
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "Сид для генерации."
+      },
+      "watermark": {
+        "name": "watermark",
+        "tooltip": "Добавлять ли AI-водяной знак к результату."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2TextToVideoApi": {
+    "description": "Генерирует видео на основе текстового запроса с использованием модели Wan 2.7.",
+    "display_name": "Wan 2.7 Текст в видео",
+    "inputs": {
+      "audio": {
+        "name": "audio",
+        "tooltip": "Аудио для управления генерацией видео (например, синхронизация губ, движение в ритм музыки). Длительность: 3–30 сек. Если не указано, модель автоматически сгенерирует подходящую фоновую музыку или звуковые эффекты."
+      },
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "duration"
+      },
+      "model_negative_prompt": {
+        "name": "negative_prompt"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_ratio": {
+        "name": "ratio"
+      },
+      "model_resolution": {
+        "name": "resolution"
+      },
+      "prompt_extend": {
+        "name": "prompt_extend",
+        "tooltip": "Улучшать ли запрос с помощью ИИ."
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "Зерно для генерации."
+      },
+      "watermark": {
+        "name": "watermark",
+        "tooltip": "Добавлять ли водяной знак, сгенерированный ИИ, к результату."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2VideoContinuationApi": {
+    "description": "Продолжает видео с того места, где оно закончилось, с возможностью контроля последнего кадра.",
+    "display_name": "Wan 2.7 Продолжение видео",
+    "inputs": {
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "first_clip": {
+        "name": "first_clip",
+        "tooltip": "Входное видео для продолжения. Длительность: 2–10 сек. Соотношение сторон результата определяется этим видео."
+      },
+      "last_frame": {
+        "name": "last_frame",
+        "tooltip": "Изображение последнего кадра. Продолжение будет переходить к этому кадру."
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "duration"
+      },
+      "model_negative_prompt": {
+        "name": "negative_prompt"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_resolution": {
+        "name": "resolution"
+      },
+      "prompt_extend": {
+        "name": "prompt_extend",
+        "tooltip": "Улучшать ли запрос с помощью ИИ."
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "Зерно для генерации."
+      },
+      "watermark": {
+        "name": "watermark",
+        "tooltip": "Добавлять ли водяной знак, сгенерированный ИИ, к результату."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2VideoEditApi": {
+    "description": "Редактируйте видео с помощью текстовых инструкций, референсных изображений или переноса стиля.",
+    "display_name": "Wan 2.7 Редактирование видео",
+    "inputs": {
+      "audio_setting": {
+        "name": "audio_setting",
+        "tooltip": "'auto': модель решает, нужно ли перегенерировать аудио на основе запроса. 'origin': сохранить оригинальное аудио из входного видео."
+      },
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "duration"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_ratio": {
+        "name": "ratio"
+      },
+      "model_resolution": {
+        "name": "resolution"
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "Зерно для генерации."
+      },
+      "video": {
+        "name": "video",
+        "tooltip": "Видео для редактирования."
+      },
+      "watermark": {
+        "name": "watermark",
+        "tooltip": "Добавлять ли водяной знак, сгенерированный ИИ, к результату."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "WanAnimateToVideo": {
     "display_name": "WanAnimateToVideo",
     "inputs": {
diff --git a/src/locales/tr/main.json b/src/locales/tr/main.json
index 5ddf18f986..f8f70857af 100644
--- a/src/locales/tr/main.json
+++ b/src/locales/tr/main.json
@@ -1331,6 +1331,7 @@
     "updating": "{id} güncelleniyor",
     "upload": "Yükle",
     "uploadAlreadyInProgress": "Yükleme zaten devam ediyor",
+    "uploadTimedOut": "Yükleme zaman aşımına uğradı. Lütfen tekrar deneyin.",
     "usageHint": "Kullanım ipucu",
     "use": "Kullan",
     "user": "Kullanıcı",
@@ -1641,9 +1642,18 @@
     "exportRecording": "Kaydı Dışa Aktar",
     "exportingModel": "Model dışa aktarılıyor...",
     "fov": "FOV",
+    "hdri": {
+      "changeFile": "HDRI Değiştir",
+      "intensity": "Yoğunluk",
+      "label": "HDRI Ortamı",
+      "removeFile": "HDRI Kaldır",
+      "showAsBackground": "Arka Plan Olarak Göster",
+      "uploadFile": "HDRI Yükle (.hdr, .exr)"
+    },
     "light": "Işık",
     "lightIntensity": "Işık Yoğunluğu",
     "loadingBackgroundImage": "Arka Plan Resmi Yükleniyor",
+    "loadingHDRI": "HDRI Yükleniyor...",
     "loadingModel": "3D Model Yükleniyor...",
     "materialMode": "Malzeme Modu",
     "materialModes": {
@@ -2258,6 +2268,7 @@
     "dataset": "veri seti",
     "debug": "hata ayıklama",
     "deprecated": "kullanımdan kaldırılmış",
+    "detection": "tespit",
     "edit_models": "modelleri_düzenle",
     "flux": "flux",
     "gligen": "gligen",
@@ -2526,6 +2537,23 @@
     "inputsNone": "GİRİŞ YOK",
     "inputsNoneTooltip": "Düğümün girişi yok",
     "locateNode": "Düğümü tuvalde bul",
+    "missingMedia": {
+      "audio": "Ses",
+      "cancelSelection": "Seçimi iptal et",
+      "collapseNodes": "Referans veren düğümleri gizle",
+      "confirmSelection": "Seçimi onayla",
+      "expandNodes": "Referans veren düğümleri göster",
+      "image": "Görseller",
+      "locateNode": "Düğümü bul",
+      "missingMediaTitle": "Eksik Girdiler",
+      "or": "VEYA",
+      "selectedFromLibrary": "Kütüphaneden seçildi",
+      "uploadFile": "{type} Yükle",
+      "uploaded": "Yüklendi",
+      "uploading": "Yükleniyor...",
+      "useFromLibrary": "Kütüphaneden Kullan",
+      "video": "Videolar"
+    },
     "missingModels": {
       "alreadyExistsInCategory": "Bu model zaten \"{category}\" içinde mevcut",
       "assetLoadTimeout": "Model algılama zaman aşımına uğradı. Lütfen iş akışını yeniden yüklemeyi deneyin.",
@@ -3239,6 +3267,7 @@
       "termsAgreement": "Devam ederek Comfy Org'un {terms} ve {privacy} politikasını kabul etmiş olursunuz.",
       "totalDueToday": "Bugün ödenecek toplam tutar"
     },
+    "refreshCredits": "Kredileri yenile",
     "renewsDate": "{date} tarihinde yenilenir",
     "required": {
       "pollingFailed": "Abonelik etkinleştirme başarısız oldu",
@@ -3411,6 +3440,7 @@
     "failedToInitiateCreditPurchase": "Kredi satın alma başlatılamadı: {error}",
     "failedToInitiateSubscription": "Abonelik başlatılamadı: {error}",
     "failedToLoadBackgroundImage": "Arka plan görseli yüklenemedi",
+    "failedToLoadHDRI": "HDRI dosyası yüklenemedi",
     "failedToLoadModel": "3B model yüklenemedi",
     "failedToPurchaseCredits": "Kredi satın alınamadı: {error}",
     "failedToQueue": "Kuyruğa alınamadı",
@@ -3446,6 +3476,7 @@
     "pleaseSelectOutputNodes": "Lütfen çıktı düğümlerini seçin",
     "unableToGetModelFilePath": "Model dosyası yolu alınamıyor",
     "unauthorizedDomain": "{domain} alan adınız bu hizmeti kullanma yetkisine sahip değil. Alan adınızı beyaz listeye eklemek için lütfen {email} ile iletişime geçin.",
+    "unsupportedHDRIFormat": "Desteklenmeyen dosya formatı. Lütfen .hdr veya .exr dosyası yükleyin.",
     "updateRequested": "Güncelleme istendi",
     "useApiKeyTip": "İpucu: Normal girişe erişemiyor musunuz? Comfy API Anahtarı seçeneğini kullanın.",
     "userNotAuthenticated": "Kullanıcı doğrulanmadı"
diff --git a/src/locales/tr/nodeDefs.json b/src/locales/tr/nodeDefs.json
index 52e6435c35..01b1f5efe5 100644
--- a/src/locales/tr/nodeDefs.json
+++ b/src/locales/tr/nodeDefs.json
@@ -2190,6 +2190,10 @@
       "image": {
         "name": "görüntü"
       },
+      "keep_aspect": {
+        "name": "oranı_koru",
+        "tooltip": "Kırpmanın çıktı boyutuna sığması için esnetilip esnetilmeyeceği veya en-boy oranını korumak için siyah piksellerle doldurulup doldurulmayacağı."
+      },
       "output_height": {
         "name": "çıktı_yüksekliği",
         "tooltip": "Her kırpmanın yeniden boyutlandırılacağı yükseklik."
@@ -2313,6 +2317,23 @@
       }
     }
   },
+  "DrawBBoxes": {
+    "display_name": "BBox'ları Çiz",
+    "inputs": {
+      "bboxes": {
+        "name": "bboxlar"
+      },
+      "image": {
+        "name": "görsel"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "çıktı_görseli",
+        "tooltip": null
+      }
+    }
+  },
   "DualCFGGuider": {
     "display_name": "İkili CFG Rehberi",
     "inputs": {
@@ -4985,6 +5006,36 @@
       }
     }
   },
+  "ImageHistogram": {
+    "display_name": "Görüntü Histogramı",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "rgb",
+        "tooltip": null
+      },
+      "1": {
+        "name": "parlaklık",
+        "tooltip": null
+      },
+      "2": {
+        "name": "kırmızı",
+        "tooltip": null
+      },
+      "3": {
+        "name": "yeşil",
+        "tooltip": null
+      },
+      "4": {
+        "name": "mavi",
+        "tooltip": null
+      }
+    }
+  },
   "ImageInvert": {
     "display_name": "Görüntüyü Ters Çevir",
     "inputs": {
@@ -12226,6 +12277,34 @@
       }
     }
   },
+  "RTDETR_detect": {
+    "display_name": "RT-DETR Tespit",
+    "inputs": {
+      "class_name": {
+        "name": "sınıf_adı",
+        "tooltip": "Tespitleri sınıfa göre filtrele. Filtrelemeyi devre dışı bırakmak için 'all' olarak ayarlayın."
+      },
+      "image": {
+        "name": "görsel"
+      },
+      "max_detections": {
+        "name": "maksimum_tespit",
+        "tooltip": "Görsel başına döndürülecek en fazla tespit sayısı. Güven puanına göre azalan sırada."
+      },
+      "model": {
+        "name": "model"
+      },
+      "threshold": {
+        "name": "eşik"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "bboxlar",
+        "tooltip": null
+      }
+    }
+  },
   "RandomCropImages": {
     "display_name": "Rastgele Kırpılmış Görseller",
     "inputs": {
@@ -15631,6 +15710,10 @@
       "1": {
         "name": "FBX",
         "tooltip": null
+      },
+      "2": {
+        "name": "uv_görüntüsü",
+        "tooltip": null
       }
     }
   },
@@ -17898,6 +17981,241 @@
       }
     }
   },
+  "Wan2ImageToVideoApi": {
+    "description": "İlk kare görüntüsünden bir video oluşturun, isteğe bağlı olarak son kare görüntüsü ve ses ekleyin.",
+    "display_name": "Wan 2.7 Görüntüden Videoya",
+    "inputs": {
+      "audio": {
+        "name": "audio",
+        "tooltip": "Video oluşturmayı yönlendiren ses (ör. dudak senkronizasyonu, ritme uygun hareket). Süre: 2-30 saniye. Sağlanmazsa, model otomatik olarak uyumlu arka plan müziği veya ses efektleri üretir."
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      },
+      "first_frame": {
+        "name": "first_frame",
+        "tooltip": "İlk kare görüntüsü. Çıktı en-boy oranı bu görüntüden alınır."
+      },
+      "last_frame": {
+        "name": "last_frame",
+        "tooltip": "Son kare görüntüsü. Model, ilk kareden son kareye geçiş yapan bir video oluşturur."
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "süre"
+      },
+      "model_negative_prompt": {
+        "name": "negatif_istek"
+      },
+      "model_prompt": {
+        "name": "istek"
+      },
+      "model_resolution": {
+        "name": "çözünürlük"
+      },
+      "prompt_extend": {
+        "name": "prompt_extend",
+        "tooltip": "İsteğin yapay zeka yardımıyla geliştirilip geliştirilmeyeceği."
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "Oluşturma için kullanılacak tohum."
+      },
+      "watermark": {
+        "name": "watermark",
+        "tooltip": "Sonuca yapay zeka tarafından oluşturulan bir filigran eklenip eklenmeyeceği."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2ReferenceVideoApi": {
+    "description": "Referans materyallerden bir kişi veya nesne içeren video oluşturun. Tek karakterli performansları ve çok karakterli etkileşimleri destekler.",
+    "display_name": "Wan 2.7 Referanstan Videoya",
+    "inputs": {
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "süre"
+      },
+      "model_negative_prompt": {
+        "name": "negatif_istek"
+      },
+      "model_prompt": {
+        "name": "istek"
+      },
+      "model_ratio": {
+        "name": "oran"
+      },
+      "model_resolution": {
+        "name": "çözünürlük"
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "Oluşturma için kullanılacak tohum."
+      },
+      "watermark": {
+        "name": "watermark",
+        "tooltip": "Sonuca yapay zeka tarafından oluşturulan bir filigran eklenip eklenmeyeceği."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2TextToVideoApi": {
+    "description": "Wan 2.7 modeli kullanılarak bir metin istemine dayalı video oluşturur.",
+    "display_name": "Wan 2.7 Metinden Videoya",
+    "inputs": {
+      "audio": {
+        "name": "ses",
+        "tooltip": "Video oluşturmayı yönlendirmek için ses (ör. dudak senkronizasyonu, ritme uygun hareket). Süre: 3-30 sn. Sağlanmazsa, model otomatik olarak uygun arka plan müziği veya ses efektleri üretir."
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol"
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "süre"
+      },
+      "model_negative_prompt": {
+        "name": "negatif_istem"
+      },
+      "model_prompt": {
+        "name": "istem"
+      },
+      "model_ratio": {
+        "name": "oran"
+      },
+      "model_resolution": {
+        "name": "çözünürlük"
+      },
+      "prompt_extend": {
+        "name": "istem_genişlet",
+        "tooltip": "İstemin yapay zeka yardımıyla geliştirilip geliştirilmeyeceği."
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "Oluşturma için kullanılacak tohum."
+      },
+      "watermark": {
+        "name": "filigran",
+        "tooltip": "Sonuca yapay zeka tarafından oluşturulan bir filigran eklenip eklenmeyeceği."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2VideoContinuationApi": {
+    "description": "Bir videoyu kaldığı yerden devam ettirin, isteğe bağlı olarak son kare kontrolüyle.",
+    "display_name": "Wan 2.7 Video Devamı",
+    "inputs": {
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol"
+      },
+      "first_clip": {
+        "name": "ilk_klip",
+        "tooltip": "Devam edilecek giriş videosu. Süre: 2-10 sn. Çıktı en-boy oranı bu videodan alınır."
+      },
+      "last_frame": {
+        "name": "son_kare",
+        "tooltip": "Son kare görseli. Devam bu kareye doğru geçiş yapacaktır."
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "süre"
+      },
+      "model_negative_prompt": {
+        "name": "negatif_istem"
+      },
+      "model_prompt": {
+        "name": "istem"
+      },
+      "model_resolution": {
+        "name": "çözünürlük"
+      },
+      "prompt_extend": {
+        "name": "istem_genişlet",
+        "tooltip": "İstemin yapay zeka yardımıyla geliştirilip geliştirilmeyeceği."
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "Oluşturma için kullanılacak tohum."
+      },
+      "watermark": {
+        "name": "filigran",
+        "tooltip": "Sonuca yapay zeka tarafından oluşturulan bir filigran eklenip eklenmeyeceği."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2VideoEditApi": {
+    "description": "Bir videoyu metin talimatları, referans görseller veya stil transferi ile düzenleyin.",
+    "display_name": "Wan 2.7 Video Düzenleme",
+    "inputs": {
+      "audio_setting": {
+        "name": "ses_ayarı",
+        "tooltip": "'auto': model, isteme göre sesi yeniden oluşturup oluşturmayacağına karar verir. 'origin': giriş videosundaki orijinal sesi korur."
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol"
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "süre"
+      },
+      "model_prompt": {
+        "name": "istem"
+      },
+      "model_ratio": {
+        "name": "oran"
+      },
+      "model_resolution": {
+        "name": "çözünürlük"
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "Oluşturma için kullanılacak tohum."
+      },
+      "video": {
+        "name": "video",
+        "tooltip": "Düzenlenecek video."
+      },
+      "watermark": {
+        "name": "filigran",
+        "tooltip": "Sonuca yapay zeka tarafından oluşturulan bir filigran eklenip eklenmeyeceği."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "WanAnimateToVideo": {
     "display_name": "WanAnimateToVideo",
     "inputs": {
diff --git a/src/locales/zh-TW/main.json b/src/locales/zh-TW/main.json
index a752e35a13..8755f6c83a 100644
--- a/src/locales/zh-TW/main.json
+++ b/src/locales/zh-TW/main.json
@@ -1331,6 +1331,7 @@
     "updating": "更新中",
     "upload": "上傳",
     "uploadAlreadyInProgress": "上傳已在進行中",
+    "uploadTimedOut": "上傳逾時。請再試一次。",
     "usageHint": "使用提示",
     "use": "使用",
     "user": "使用者",
@@ -1641,9 +1642,18 @@
     "exportRecording": "匯出錄影",
     "exportingModel": "正在匯出模型...",
     "fov": "視野角度",
+    "hdri": {
+      "changeFile": "更換 HDRI",
+      "intensity": "強度",
+      "label": "HDRI 環境",
+      "removeFile": "移除 HDRI",
+      "showAsBackground": "作為背景顯示",
+      "uploadFile": "上傳 HDRI（.hdr, .exr）"
+    },
     "light": "光源",
     "lightIntensity": "光源強度",
     "loadingBackgroundImage": "正在載入背景圖片",
+    "loadingHDRI": "正在載入 HDRI...",
     "loadingModel": "正在載入 3D 模型...",
     "materialMode": "材質模式",
     "materialModes": {
@@ -2258,6 +2268,7 @@
     "dataset": "資料集",
     "debug": "除錯",
     "deprecated": "已棄用",
+    "detection": "偵測",
     "edit_models": "編輯模型",
     "flux": "Flux",
     "gligen": "GLIGEN",
@@ -2526,6 +2537,23 @@
     "inputsNone": "無輸入",
     "inputsNoneTooltip": "此節點沒有輸入",
     "locateNode": "在畫布上定位節點",
+    "missingMedia": {
+      "audio": "音訊",
+      "cancelSelection": "取消選取",
+      "collapseNodes": "隱藏引用節點",
+      "confirmSelection": "確認選取",
+      "expandNodes": "顯示引用節點",
+      "image": "影像",
+      "locateNode": "定位節點",
+      "missingMediaTitle": "缺少輸入",
+      "or": "或",
+      "selectedFromLibrary": "已從媒體庫選取",
+      "uploadFile": "上傳{type}",
+      "uploaded": "已上傳",
+      "uploading": "正在上傳...",
+      "useFromLibrary": "從媒體庫使用",
+      "video": "影片"
+    },
     "missingModels": {
       "alreadyExistsInCategory": "此模型已存在於「{category}」中",
       "assetLoadTimeout": "模型偵測逾時。請嘗試重新載入工作流程。",
@@ -3239,6 +3267,7 @@
       "termsAgreement": "繼續即表示您同意 Comfy Org 的{terms}與{privacy}。",
       "totalDueToday": "今日應付總額"
     },
+    "refreshCredits": "刷新點數",
     "renewsDate": "將於 {date} 續訂",
     "required": {
       "pollingFailed": "訂閱啟用失敗",
@@ -3411,6 +3440,7 @@
     "failedToInitiateCreditPurchase": "啟動點數購買失敗：{error}",
     "failedToInitiateSubscription": "無法啟用訂閱：{error}",
     "failedToLoadBackgroundImage": "無法載入背景圖片",
+    "failedToLoadHDRI": "載入 HDRI 檔案失敗",
     "failedToLoadModel": "無法載入 3D 模型",
     "failedToPurchaseCredits": "購買點數失敗：{error}",
     "failedToQueue": "加入佇列失敗",
@@ -3446,6 +3476,7 @@
     "pleaseSelectOutputNodes": "請選擇輸出節點",
     "unableToGetModelFilePath": "無法取得模型檔案路徑",
     "unauthorizedDomain": "您的網域 {domain} 未被授權使用此服務。請聯絡 {email} 以將您的網域加入白名單。",
+    "unsupportedHDRIFormat": "不支援的檔案格式。請上傳 .hdr 或 .exr 檔案。",
     "updateRequested": "已請求更新",
     "useApiKeyTip": "提示：無法正常登入？請使用 Comfy API 金鑰選項。",
     "userNotAuthenticated": "使用者未驗證"
diff --git a/src/locales/zh-TW/nodeDefs.json b/src/locales/zh-TW/nodeDefs.json
index 839f60360f..b93cfb6ae8 100644
--- a/src/locales/zh-TW/nodeDefs.json
+++ b/src/locales/zh-TW/nodeDefs.json
@@ -2190,6 +2190,10 @@
       "image": {
         "name": "image"
       },
+      "keep_aspect": {
+        "name": "保持比例",
+        "tooltip": "選擇是否將裁剪內容拉伸以符合輸出尺寸，或以黑色像素填充以保留長寬比。"
+      },
       "output_height": {
         "name": "output_height",
         "tooltip": "每個裁切區域調整後的高度。"
@@ -2313,6 +2317,23 @@
       }
     }
   },
+  "DrawBBoxes": {
+    "display_name": "繪製 BBoxes",
+    "inputs": {
+      "bboxes": {
+        "name": "bboxes"
+      },
+      "image": {
+        "name": "圖像"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "輸出圖像",
+        "tooltip": null
+      }
+    }
+  },
   "DualCFGGuider": {
     "display_name": "雙 CFG 引導器",
     "inputs": {
@@ -4985,6 +5006,36 @@
       }
     }
   },
+  "ImageHistogram": {
+    "display_name": "影像直方圖",
+    "inputs": {
+      "image": {
+        "name": "影像"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "RGB",
+        "tooltip": null
+      },
+      "1": {
+        "name": "亮度",
+        "tooltip": null
+      },
+      "2": {
+        "name": "紅色",
+        "tooltip": null
+      },
+      "3": {
+        "name": "綠色",
+        "tooltip": null
+      },
+      "4": {
+        "name": "藍色",
+        "tooltip": null
+      }
+    }
+  },
   "ImageInvert": {
     "display_name": "反轉影像",
     "inputs": {
@@ -12226,6 +12277,34 @@
       }
     }
   },
+  "RTDETR_detect": {
+    "display_name": "RT-DETR 偵測",
+    "inputs": {
+      "class_name": {
+        "name": "類別名稱",
+        "tooltip": "依類別篩選偵測結果。設為 'all' 以停用篩選。"
+      },
+      "image": {
+        "name": "圖像"
+      },
+      "max_detections": {
+        "name": "最大偵測數",
+        "tooltip": "每張圖像最多回傳的偵測數量，依信心分數由高至低排序。"
+      },
+      "model": {
+        "name": "模型"
+      },
+      "threshold": {
+        "name": "閾值"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "bboxes",
+        "tooltip": null
+      }
+    }
+  },
   "RandomCropImages": {
     "display_name": "隨機裁切影像",
     "inputs": {
@@ -15631,6 +15710,10 @@
       "1": {
         "name": "FBX",
         "tooltip": null
+      },
+      "2": {
+        "name": "uv_image",
+        "tooltip": null
       }
     }
   },
@@ -17898,6 +17981,241 @@
       }
     }
   },
+  "Wan2ImageToVideoApi": {
+    "description": "從首幀圖像產生影片，可選擇加入末幀圖像與音訊。",
+    "display_name": "Wan 2.7 圖像轉影片",
+    "inputs": {
+      "audio": {
+        "name": "audio",
+        "tooltip": "用於驅動影片生成的音訊（如對嘴、節奏動作）。時長：2秒至30秒。若未提供，模型會自動產生相符的背景音樂或音效。"
+      },
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "first_frame": {
+        "name": "first_frame",
+        "tooltip": "首幀圖像。輸出長寬比將依此圖像決定。"
+      },
+      "last_frame": {
+        "name": "last_frame",
+        "tooltip": "末幀圖像。模型將產生從首幀到末幀的過渡影片。"
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "duration"
+      },
+      "model_negative_prompt": {
+        "name": "negative_prompt"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_resolution": {
+        "name": "resolution"
+      },
+      "prompt_extend": {
+        "name": "prompt_extend",
+        "tooltip": "是否使用 AI 協助增強提示詞。"
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "用於生成的隨機種子。"
+      },
+      "watermark": {
+        "name": "watermark",
+        "tooltip": "是否在結果中加入 AI 產生的浮水印。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2ReferenceVideoApi": {
+    "description": "根據參考素材生成包含人物或物件的影片。支援單一角色表演與多角色互動。",
+    "display_name": "Wan 2.7 參考生成影片",
+    "inputs": {
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "duration"
+      },
+      "model_negative_prompt": {
+        "name": "negative_prompt"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_ratio": {
+        "name": "ratio"
+      },
+      "model_resolution": {
+        "name": "resolution"
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "用於生成的隨機種子。"
+      },
+      "watermark": {
+        "name": "watermark",
+        "tooltip": "是否在結果中加入 AI 產生的浮水印。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2TextToVideoApi": {
+    "description": "使用 Wan 2.7 模型根據文字提示生成影片。",
+    "display_name": "Wan 2.7 文字轉影片",
+    "inputs": {
+      "audio": {
+        "name": "audio",
+        "tooltip": "用於驅動影片生成的音訊（如對嘴、節奏同步動作）。時長：3秒至30秒。若未提供，模型會自動生成匹配的背景音樂或音效。"
+      },
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "duration"
+      },
+      "model_negative_prompt": {
+        "name": "negative_prompt"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_ratio": {
+        "name": "ratio"
+      },
+      "model_resolution": {
+        "name": "resolution"
+      },
+      "prompt_extend": {
+        "name": "prompt_extend",
+        "tooltip": "是否使用 AI 協助增強提示詞。"
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "用於生成的種子值。"
+      },
+      "watermark": {
+        "name": "watermark",
+        "tooltip": "是否在結果中加入 AI 生成的浮水印。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2VideoContinuationApi": {
+    "description": "從影片結束處繼續生成影片，可選擇最後一幀控制。",
+    "display_name": "Wan 2.7 影片續接",
+    "inputs": {
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "first_clip": {
+        "name": "first_clip",
+        "tooltip": "要續接的輸入影片。時長：2秒至10秒。輸出長寬比將依此影片決定。"
+      },
+      "last_frame": {
+        "name": "last_frame",
+        "tooltip": "最後一幀圖像。續接內容將朝此幀過渡。"
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "duration"
+      },
+      "model_negative_prompt": {
+        "name": "negative_prompt"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_resolution": {
+        "name": "resolution"
+      },
+      "prompt_extend": {
+        "name": "prompt_extend",
+        "tooltip": "是否使用 AI 協助增強提示詞。"
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "用於生成的種子值。"
+      },
+      "watermark": {
+        "name": "watermark",
+        "tooltip": "是否在結果中加入 AI 生成的浮水印。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2VideoEditApi": {
+    "description": "使用文字指令、參考圖像或風格轉換編輯影片。",
+    "display_name": "Wan 2.7 影片編輯",
+    "inputs": {
+      "audio_setting": {
+        "name": "audio_setting",
+        "tooltip": "「auto」：模型根據提示詞決定是否重新生成音訊。「origin」：保留輸入影片的原始音訊。"
+      },
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "duration"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_ratio": {
+        "name": "ratio"
+      },
+      "model_resolution": {
+        "name": "resolution"
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "用於生成的種子值。"
+      },
+      "video": {
+        "name": "video",
+        "tooltip": "要編輯的影片。"
+      },
+      "watermark": {
+        "name": "watermark",
+        "tooltip": "是否在結果中加入 AI 生成的浮水印。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "WanAnimateToVideo": {
     "display_name": "WanAnimateToVideo",
     "inputs": {
diff --git a/src/locales/zh/main.json b/src/locales/zh/main.json
index a89d039b64..b7dc2c7d85 100644
--- a/src/locales/zh/main.json
+++ b/src/locales/zh/main.json
@@ -1331,6 +1331,7 @@
     "updating": "更新中",
     "upload": "上传",
     "uploadAlreadyInProgress": "上传已在进行中",
+    "uploadTimedOut": "上传超时。请重试。",
     "usageHint": "使用提示",
     "use": "使用",
     "user": "用户",
@@ -1641,9 +1642,18 @@
     "exportRecording": "导出录制",
     "exportingModel": "正在导出模型...",
     "fov": "视场",
+    "hdri": {
+      "changeFile": "更换HDRI",
+      "intensity": "强度",
+      "label": "HDRI环境",
+      "removeFile": "移除HDRI",
+      "showAsBackground": "作为背景显示",
+      "uploadFile": "上传HDRI（.hdr, .exr）"
+    },
     "light": "灯光",
     "lightIntensity": "光照强度",
     "loadingBackgroundImage": "正在加载背景图像",
+    "loadingHDRI": "正在加载HDRI...",
     "loadingModel": "正在加载3D模型...",
     "materialMode": "材质模式",
     "materialModes": {
@@ -2258,6 +2268,7 @@
     "dataset": "dataset",
     "debug": "调试",
     "deprecated": "已弃用",
+    "detection": "检测",
     "edit_models": "编辑模型",
     "flux": "Flux",
     "gligen": "GLIGEN",
@@ -2526,6 +2537,23 @@
     "inputsNone": "无输入",
     "inputsNoneTooltip": "节点没有输入",
     "locateNode": "在画布上定位节点",
+    "missingMedia": {
+      "audio": "音频",
+      "cancelSelection": "取消选择",
+      "collapseNodes": "隐藏引用节点",
+      "confirmSelection": "确认选择",
+      "expandNodes": "显示引用节点",
+      "image": "图像",
+      "locateNode": "定位节点",
+      "missingMediaTitle": "缺少输入",
+      "or": "或",
+      "selectedFromLibrary": "已从素材库选择",
+      "uploadFile": "上传{type}",
+      "uploaded": "已上传",
+      "uploading": "正在上传...",
+      "useFromLibrary": "从素材库选择",
+      "video": "视频"
+    },
     "missingModels": {
       "alreadyExistsInCategory": "该模型已存在于“{category}”中",
       "assetLoadTimeout": "模型检测超时。请尝试重新加载工作流。",
@@ -3251,6 +3279,7 @@
       "termsAgreement": "继续操作即表示您同意 Comfy Org 的{terms}和{privacy}。",
       "totalDueToday": "今日应付总额"
     },
+    "refreshCredits": "刷新额度",
     "renewsDate": "将于 {date} 续订",
     "required": {
       "pollingFailed": "订阅激活失败",
@@ -3423,6 +3452,7 @@
     "failedToInitiateCreditPurchase": "发起积分购买失败：{error}",
     "failedToInitiateSubscription": "订阅启动失败：{error}",
     "failedToLoadBackgroundImage": "无法加载背景图片",
+    "failedToLoadHDRI": "HDRI文件加载失败",
     "failedToLoadModel": "无法加载3D模型",
     "failedToPurchaseCredits": "购买积分失败：{error}",
     "failedToQueue": "排队失败",
@@ -3458,6 +3488,7 @@
     "pleaseSelectOutputNodes": "请选择输出节点",
     "unableToGetModelFilePath": "无法获取模型文件路径",
     "unauthorizedDomain": "您的域名 {domain} 未被授权使用此服务。请联系 {email} 将您的域名添加到白名单。",
+    "unsupportedHDRIFormat": "不支持的文件格式。请上传.hdr或.exr文件。",
     "updateRequested": "已请求更新",
     "useApiKeyTip": "提示：无法正常登录？请使用 Comfy API Key 选项。",
     "userNotAuthenticated": "用户未认证"
diff --git a/src/locales/zh/nodeDefs.json b/src/locales/zh/nodeDefs.json
index beb8155431..f29ed73a12 100644
--- a/src/locales/zh/nodeDefs.json
+++ b/src/locales/zh/nodeDefs.json
@@ -2190,6 +2190,10 @@
       "image": {
         "name": "image"
       },
+      "keep_aspect": {
+        "name": "保持宽高比",
+        "tooltip": "选择是否拉伸裁剪区域以适应输出尺寸，或用黑色像素填充以保持宽高比。"
+      },
       "output_height": {
         "name": "output_height",
         "tooltip": "每个裁剪区域调整后的高度。"
@@ -2313,6 +2317,23 @@
       }
     }
   },
+  "DrawBBoxes": {
+    "display_name": "绘制边界框",
+    "inputs": {
+      "bboxes": {
+        "name": "边界框"
+      },
+      "image": {
+        "name": "图像"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "输出图像",
+        "tooltip": null
+      }
+    }
+  },
   "DualCFGGuider": {
     "display_name": "双CFG引导器",
     "inputs": {
@@ -4985,6 +5006,36 @@
       }
     }
   },
+  "ImageHistogram": {
+    "display_name": "图像直方图",
+    "inputs": {
+      "image": {
+        "name": "图像"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "RGB",
+        "tooltip": null
+      },
+      "1": {
+        "name": "亮度",
+        "tooltip": null
+      },
+      "2": {
+        "name": "红色",
+        "tooltip": null
+      },
+      "3": {
+        "name": "绿色",
+        "tooltip": null
+      },
+      "4": {
+        "name": "蓝色",
+        "tooltip": null
+      }
+    }
+  },
   "ImageInvert": {
     "display_name": "反转图像",
     "inputs": {
@@ -12226,6 +12277,34 @@
       }
     }
   },
+  "RTDETR_detect": {
+    "display_name": "RT-DETR 检测",
+    "inputs": {
+      "class_name": {
+        "name": "类别名称",
+        "tooltip": "按类别筛选检测结果。设置为 'all' 可禁用筛选。"
+      },
+      "image": {
+        "name": "图像"
+      },
+      "max_detections": {
+        "name": "最大检测数",
+        "tooltip": "每张图像返回的最大检测数量，按置信度从高到低排序。"
+      },
+      "model": {
+        "name": "模型"
+      },
+      "threshold": {
+        "name": "阈值"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "边界框",
+        "tooltip": null
+      }
+    }
+  },
   "RandomCropImages": {
     "display_name": "裁剪图像（随机）",
     "inputs": {
@@ -15631,6 +15710,10 @@
       "1": {
         "name": "FBX",
         "tooltip": null
+      },
+      "2": {
+        "name": "uv_image",
+        "tooltip": null
       }
     }
   },
@@ -17898,6 +17981,241 @@
       }
     }
   },
+  "Wan2ImageToVideoApi": {
+    "description": "根据首帧图像生成视频，可选末帧图像和音频。",
+    "display_name": "Wan 2.7 图像转视频",
+    "inputs": {
+      "audio": {
+        "name": "audio",
+        "tooltip": "用于驱动视频生成的音频（如对口型、节奏匹配动作）。时长：2秒-30秒。如未提供，模型会自动生成匹配的背景音乐或音效。"
+      },
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "first_frame": {
+        "name": "first_frame",
+        "tooltip": "首帧图像。输出的宽高比由该图像决定。"
+      },
+      "last_frame": {
+        "name": "last_frame",
+        "tooltip": "末帧图像。模型将生成从首帧到末帧的过渡视频。"
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "duration"
+      },
+      "model_negative_prompt": {
+        "name": "negative_prompt"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_resolution": {
+        "name": "resolution"
+      },
+      "prompt_extend": {
+        "name": "prompt_extend",
+        "tooltip": "是否使用 AI 辅助增强提示词。"
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "用于生成的种子。"
+      },
+      "watermark": {
+        "name": "watermark",
+        "tooltip": "是否为结果添加 AI 生成的水印。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2ReferenceVideoApi": {
+    "description": "根据参考素材生成包含人物或物体的视频。支持单角色表演和多角色互动。",
+    "display_name": "Wan 2.7 参考生成视频",
+    "inputs": {
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "duration"
+      },
+      "model_negative_prompt": {
+        "name": "negative_prompt"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_ratio": {
+        "name": "ratio"
+      },
+      "model_resolution": {
+        "name": "resolution"
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "用于生成的种子。"
+      },
+      "watermark": {
+        "name": "watermark",
+        "tooltip": "是否为结果添加 AI 生成的水印。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2TextToVideoApi": {
+    "description": "使用 Wan 2.7 模型根据文本提示生成视频。",
+    "display_name": "Wan 2.7 文本转视频",
+    "inputs": {
+      "audio": {
+        "name": "audio",
+        "tooltip": "用于驱动视频生成的音频（如对口型、节奏匹配动作）。时长：3秒-30秒。如未提供，模型会自动生成匹配的背景音乐或音效。"
+      },
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "duration"
+      },
+      "model_negative_prompt": {
+        "name": "negative_prompt"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_ratio": {
+        "name": "ratio"
+      },
+      "model_resolution": {
+        "name": "resolution"
+      },
+      "prompt_extend": {
+        "name": "prompt_extend",
+        "tooltip": "是否使用 AI 辅助增强提示词。"
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "用于生成的种子。"
+      },
+      "watermark": {
+        "name": "watermark",
+        "tooltip": "是否为结果添加 AI 生成的水印。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2VideoContinuationApi": {
+    "description": "从视频结束处继续生成视频，可选用最后一帧进行控制。",
+    "display_name": "Wan 2.7 视频续写",
+    "inputs": {
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "first_clip": {
+        "name": "first_clip",
+        "tooltip": "要续写的视频。时长：2秒-10秒。输出宽高比将根据该视频确定。"
+      },
+      "last_frame": {
+        "name": "last_frame",
+        "tooltip": "最后一帧图像。续写内容将过渡到该帧。"
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "duration"
+      },
+      "model_negative_prompt": {
+        "name": "negative_prompt"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_resolution": {
+        "name": "resolution"
+      },
+      "prompt_extend": {
+        "name": "prompt_extend",
+        "tooltip": "是否使用 AI 辅助增强提示词。"
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "用于生成的种子。"
+      },
+      "watermark": {
+        "name": "watermark",
+        "tooltip": "是否为结果添加 AI 生成的水印。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "Wan2VideoEditApi": {
+    "description": "通过文本指令、参考图像或风格迁移编辑视频。",
+    "display_name": "Wan 2.7 视频编辑",
+    "inputs": {
+      "audio_setting": {
+        "name": "audio_setting",
+        "tooltip": "“auto”：模型根据提示词决定是否重新生成音频。“origin”：保留输入视频的原始音频。"
+      },
+      "control_after_generate": {
+        "name": "control after generate"
+      },
+      "model": {
+        "name": "model"
+      },
+      "model_duration": {
+        "name": "duration"
+      },
+      "model_prompt": {
+        "name": "prompt"
+      },
+      "model_ratio": {
+        "name": "ratio"
+      },
+      "model_resolution": {
+        "name": "resolution"
+      },
+      "seed": {
+        "name": "seed",
+        "tooltip": "用于生成的种子。"
+      },
+      "video": {
+        "name": "video",
+        "tooltip": "要编辑的视频。"
+      },
+      "watermark": {
+        "name": "watermark",
+        "tooltip": "是否为结果添加 AI 生成的水印。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "WanAnimateToVideo": {
     "display_name": "Wan动画转视频",
     "inputs": {
diff --git a/src/platform/assets/components/ActiveMediaAssetCard.test.ts b/src/platform/assets/components/ActiveMediaAssetCard.test.ts
index 1ad0849cd1..3094499b1d 100644
--- a/src/platform/assets/components/ActiveMediaAssetCard.test.ts
+++ b/src/platform/assets/components/ActiveMediaAssetCard.test.ts
@@ -1,4 +1,5 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { ref } from 'vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
@@ -61,13 +62,16 @@ const createJob = (overrides: Partial<JobListItem> = {}): JobListItem => ({
   ...overrides
 })
 
-const mountComponent = (job: JobListItem) =>
-  mount(ActiveJobCard, {
+function renderComponent(job: JobListItem) {
+  const user = userEvent.setup()
+  const { container } = render(ActiveJobCard, {
     props: { job },
     global: {
       plugins: [i18n]
     }
   })
+  return { container, user }
+}
 
 describe('ActiveJobCard', () => {
   beforeEach(() => {
@@ -78,18 +82,19 @@ describe('ActiveJobCard', () => {
   })
 
   it('displays percentage and progress bar when job is running', () => {
-    const wrapper = mountComponent(
+    const { container } = renderComponent(
       createJob({ state: 'running', progressTotalPercent: 65 })
     )
 
-    expect(wrapper.text()).toContain('65%')
-    const progressBar = wrapper.find('.bg-blue-500')
-    expect(progressBar.exists()).toBe(true)
-    expect(progressBar.attributes('style')).toContain('width: 65%')
+    expect(container.textContent).toContain('65%')
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- progress bar has no ARIA role in happy-dom
+    const progressBar = container.querySelector('.bg-blue-500')
+    expect(progressBar).not.toBeNull()
+    expect(progressBar).toHaveStyle({ width: '65%' })
   })
 
   it('displays status text when job is pending', () => {
-    const wrapper = mountComponent(
+    const { container } = renderComponent(
       createJob({
         state: 'pending',
         title: 'In queue...',
@@ -97,116 +102,114 @@ describe('ActiveJobCard', () => {
       })
     )
 
-    expect(wrapper.text()).toContain('In queue...')
-    const progressBar = wrapper.find('.bg-blue-500')
-    expect(progressBar.exists()).toBe(false)
+    expect(container.textContent).toContain('In queue...')
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- progress bar has no ARIA role in happy-dom
+    expect(container.querySelector('.bg-blue-500')).toBeNull()
   })
 
   it('shows spinner for pending state', () => {
-    const wrapper = mountComponent(createJob({ state: 'pending' }))
+    const { container } = renderComponent(createJob({ state: 'pending' }))
 
-    const spinner = wrapper.find('.icon-\\[lucide--loader-circle\\]')
-    expect(spinner.exists()).toBe(true)
-    expect(spinner.classes()).toContain('animate-spin')
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- spinner icon has no ARIA role in happy-dom
+    const spinner = container.querySelector('[class*="lucide--loader-circle"]')
+    expect(spinner).not.toBeNull()
+    expect(spinner).toHaveClass('animate-spin')
   })
 
   it('shows error icon for failed state', () => {
-    const wrapper = mountComponent(
+    const { container } = renderComponent(
       createJob({ state: 'failed', title: 'Failed' })
     )
 
-    const errorIcon = wrapper.find('.icon-\\[lucide--circle-alert\\]')
-    expect(errorIcon.exists()).toBe(true)
-    expect(wrapper.text()).toContain('Failed')
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- error icon has no ARIA role in happy-dom
+    const errorIcon = container.querySelector('[class*="lucide--circle-alert"]')
+    expect(errorIcon).not.toBeNull()
+    expect(container.textContent).toContain('Failed')
   })
 
   it('shows preview image when running with iconImageUrl', () => {
-    const wrapper = mountComponent(
+    renderComponent(
       createJob({
         state: 'running',
         iconImageUrl: 'https://example.com/preview.jpg'
       })
     )
 
-    const img = wrapper.find('img')
-    expect(img.exists()).toBe(true)
-    expect(img.attributes('src')).toBe('https://example.com/preview.jpg')
+    const img = screen.getByRole('img')
+    expect(img).toHaveAttribute('src', 'https://example.com/preview.jpg')
   })
 
   it('has proper accessibility attributes', () => {
-    const wrapper = mountComponent(createJob({ title: 'Generating...' }))
+    renderComponent(createJob({ title: 'Generating...' }))
 
-    const container = wrapper.find('[role="status"]')
-    expect(container.exists()).toBe(true)
-    expect(container.attributes('aria-label')).toBe('Active job: Generating...')
+    const status = screen.getByRole('status', {
+      name: 'Active job: Generating...'
+    })
+    expect(status).toBeInTheDocument()
   })
 
   it('shows delete button on hover for failed jobs', async () => {
     mockCanDeleteJob.value = true
 
-    const wrapper = mountComponent(
+    const { user } = renderComponent(
       createJob({ state: 'failed', title: 'Failed' })
     )
 
-    expect(wrapper.findComponent({ name: 'Button' }).exists()).toBe(false)
+    expect(
+      screen.queryByRole('button', { name: 'Remove job' })
+    ).not.toBeInTheDocument()
 
-    await wrapper.find('[role="status"]').trigger('mouseenter')
+    await user.hover(screen.getByRole('status'))
 
-    const button = wrapper.findComponent({ name: 'Button' })
-    expect(button.exists()).toBe(true)
-    expect(button.attributes('aria-label')).toBe('Remove job')
+    expect(
+      screen.getByRole('button', { name: 'Remove job' })
+    ).toBeInTheDocument()
   })
 
   it('calls runDeleteJob when delete button is clicked on a failed job', async () => {
     mockCanDeleteJob.value = true
 
-    const wrapper = mountComponent(
+    const { user } = renderComponent(
       createJob({ state: 'failed', title: 'Failed' })
     )
 
-    await wrapper.find('[role="status"]').trigger('mouseenter')
-
-    const button = wrapper.findComponent({ name: 'Button' })
-    await button.trigger('click')
+    await user.hover(screen.getByRole('status'))
+    await user.click(screen.getByRole('button', { name: 'Remove job' }))
 
     expect(mockRunDeleteJob).toHaveBeenCalledOnce()
   })
 
   it('does not show action button when job cannot be cancelled or deleted', async () => {
-    const wrapper = mountComponent(
+    const { user } = renderComponent(
       createJob({ state: 'running', progressTotalPercent: 50 })
     )
 
-    await wrapper.find('[role="status"]').trigger('mouseenter')
+    await user.hover(screen.getByRole('status', { name: /Active job/ }))
 
-    expect(wrapper.findComponent({ name: 'Button' }).exists()).toBe(false)
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
   })
 
   it('shows cancel button on hover for cancellable jobs', async () => {
     mockCanCancelJob.value = true
 
-    const wrapper = mountComponent(
+    const { user } = renderComponent(
       createJob({ state: 'running', progressTotalPercent: 50 })
     )
 
-    await wrapper.find('[role="status"]').trigger('mouseenter')
+    await user.hover(screen.getByRole('status', { name: /Active job/ }))
 
-    const button = wrapper.findComponent({ name: 'Button' })
-    expect(button.exists()).toBe(true)
-    expect(button.attributes('aria-label')).toBe('Cancel')
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument()
   })
 
   it('calls runCancelJob when cancel button is clicked', async () => {
     mockCanCancelJob.value = true
 
-    const wrapper = mountComponent(
+    const { user } = renderComponent(
       createJob({ state: 'running', progressTotalPercent: 50 })
     )
 
-    await wrapper.find('[role="status"]').trigger('mouseenter')
-
-    const button = wrapper.findComponent({ name: 'Button' })
-    await button.trigger('click')
+    await user.hover(screen.getByRole('status', { name: /Active job/ }))
+    await user.click(screen.getByRole('button', { name: 'Cancel' }))
 
     expect(mockRunCancelJob).toHaveBeenCalledOnce()
   })
diff --git a/src/platform/assets/components/AssetBrowserModal.test.ts b/src/platform/assets/components/AssetBrowserModal.test.ts
index 6fb0275198..e2d6ed7da7 100644
--- a/src/platform/assets/components/AssetBrowserModal.test.ts
+++ b/src/platform/assets/components/AssetBrowserModal.test.ts
@@ -1,4 +1,5 @@
-import { flushPromises, mount } from '@vue/test-utils'
+import { render, screen, waitFor } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -60,6 +61,7 @@ vi.mock('@/components/widget/layout/BaseModalLayout.vue', () => ({
     emits: ['close'],
     template: `
       <div data-testid="base-modal-layout">
+        <span data-testid="modal-title">{{ contentTitle }}</span>
         <div v-if="$slots.leftPanel" data-testid="left-panel">
           <slot name="leftPanel" />
         </div>
@@ -87,15 +89,27 @@ vi.mock('@/components/widget/panel/LeftSidePanel.vue', () => ({
         <div v-if="$slots['header-title']" data-testid="header-title">
           <slot name="header-title" />
         </div>
-        <button
-          v-for="item in navItems"
-          :key="item.id"
-          @click="$emit('update:modelValue', item.id)"
-          :data-testid="'nav-item-' + item.id"
-          :class="{ active: modelValue === item.id }"
-        >
-          {{ item.label }}
-        </button>
+        <template v-for="item in navItems" :key="item.id || item.title">
+          <button
+            v-if="item.id"
+            @click="$emit('update:modelValue', item.id)"
+            :data-testid="'nav-item-' + item.id"
+            :class="{ active: modelValue === item.id }"
+          >
+            {{ item.label }}
+          </button>
+          <template v-else-if="item.items">
+            <button
+              v-for="child in item.items"
+              :key="child.id"
+              @click="$emit('update:modelValue', child.id)"
+              :data-testid="'nav-item-' + child.id"
+              :class="{ active: modelValue === child.id }"
+            >
+              {{ child.label }}
+            </button>
+          </template>
+        </template>
       </div>
     `
   }
@@ -151,6 +165,9 @@ vi.mock('vue-i18n', () => ({
   })
 }))
 
+const flushPromises = () =>
+  new Promise<void>((resolve) => setTimeout(resolve, 0))
+
 describe('AssetBrowserModal', () => {
   const createTestAsset = (
     id: string,
@@ -173,11 +190,11 @@ describe('AssetBrowserModal', () => {
     }
   })
 
-  const createWrapper = (props: Record<string, unknown>) => {
+  function renderModal(props: Record<string, unknown>) {
     const pinia = createPinia()
     setActivePinia(pinia)
 
-    return mount(AssetBrowserModal, {
+    return render(AssetBrowserModal, {
       props,
       global: {
         plugins: [pinia],
@@ -207,14 +224,16 @@ describe('AssetBrowserModal', () => {
       ]
       mockAssetsByKey.set('CheckpointLoaderSimple', assets)
 
-      const wrapper = createWrapper({ nodeType: 'CheckpointLoaderSimple' })
+      renderModal({ nodeType: 'CheckpointLoaderSimple' })
       await flushPromises()
 
-      const assetGrid = wrapper.findComponent({ name: 'AssetGrid' })
-      const gridAssets = assetGrid.props('assets') as AssetItem[]
-
-      expect(gridAssets).toHaveLength(2)
-      expect(gridAssets[0].id).toBe('asset1')
+      expect(screen.getByTestId('asset-asset1')).toBeDefined()
+      expect(screen.getByTestId('asset-asset2')).toBeDefined()
+      /* eslint-disable testing-library/no-node-access */
+      expect(
+        screen.getByTestId('asset-grid').querySelectorAll('.asset-card')
+      ).toHaveLength(2)
+      /* eslint-enable testing-library/no-node-access */
     })
 
     it('passes category-filtered assets to AssetFilterBar', async () => {
@@ -224,23 +243,22 @@ describe('AssetBrowserModal', () => {
       ]
       mockAssetsByKey.set('CheckpointLoaderSimple', assets)
 
-      const wrapper = createWrapper({
+      renderModal({
         nodeType: 'CheckpointLoaderSimple',
         showLeftPanel: true
       })
       await flushPromises()
 
-      const filterBar = wrapper.findComponent({ name: 'AssetFilterBar' })
-      const filterBarAssets = filterBar.props('assets') as AssetItem[]
-
-      expect(filterBarAssets).toHaveLength(2)
+      expect(screen.getByTestId('asset-filter-bar').textContent).toContain(
+        '2 assets'
+      )
     })
   })
 
   describe('Data fetching', () => {
     it('triggers store refresh for node type on mount', async () => {
       const store = useAssetsStore()
-      createWrapper({ nodeType: 'CheckpointLoaderSimple' })
+      renderModal({ nodeType: 'CheckpointLoaderSimple' })
       await flushPromises()
 
       expect(store.updateModelsForNodeType).toHaveBeenCalledWith(
@@ -252,18 +270,17 @@ describe('AssetBrowserModal', () => {
       const assets = [createTestAsset('asset1', 'Cached Model', 'checkpoints')]
       mockAssetsByKey.set('CheckpointLoaderSimple', assets)
 
-      const wrapper = createWrapper({ nodeType: 'CheckpointLoaderSimple' })
+      renderModal({ nodeType: 'CheckpointLoaderSimple' })
 
-      const assetGrid = wrapper.findComponent({ name: 'AssetGrid' })
-      const gridAssets = assetGrid.props('assets') as AssetItem[]
-
-      expect(gridAssets).toHaveLength(1)
-      expect(gridAssets[0].name).toBe('Cached Model')
+      expect(screen.getByTestId('asset-asset1')).toBeDefined()
+      expect(screen.getByTestId('asset-asset1').textContent).toContain(
+        'Cached Model'
+      )
     })
 
     it('triggers store refresh for asset type (tag) on mount', async () => {
       const store = useAssetsStore()
-      createWrapper({ assetType: 'models' })
+      renderModal({ assetType: 'models' })
       await flushPromises()
 
       expect(store.updateModelsForTag).toHaveBeenCalledWith('models')
@@ -273,116 +290,133 @@ describe('AssetBrowserModal', () => {
       const assets = [createTestAsset('asset1', 'Tagged Model', 'models')]
       mockAssetsByKey.set('tag:models', assets)
 
-      const wrapper = createWrapper({ assetType: 'models' })
+      renderModal({ assetType: 'models' })
       await flushPromises()
 
-      const assetGrid = wrapper.findComponent({ name: 'AssetGrid' })
-      const gridAssets = assetGrid.props('assets') as AssetItem[]
-
-      expect(gridAssets).toHaveLength(1)
-      expect(gridAssets[0].name).toBe('Tagged Model')
+      expect(screen.getByTestId('asset-asset1')).toBeDefined()
+      expect(screen.getByTestId('asset-asset1').textContent).toContain(
+        'Tagged Model'
+      )
     })
   })
 
   describe('Asset Selection', () => {
     it('emits asset-select event when asset is selected', async () => {
+      const user = userEvent.setup()
       const assets = [createTestAsset('asset1', 'Model A', 'checkpoints')]
       mockAssetsByKey.set('CheckpointLoaderSimple', assets)
 
-      const wrapper = createWrapper({ nodeType: 'CheckpointLoaderSimple' })
+      const onAssetSelect = vi.fn()
+      renderModal({
+        nodeType: 'CheckpointLoaderSimple',
+        'onAsset-select': onAssetSelect
+      })
       await flushPromises()
 
-      const assetGrid = wrapper.findComponent({ name: 'AssetGrid' })
-      await assetGrid.vm.$emit('asset-select', assets[0])
+      await user.click(screen.getByTestId('asset-asset1'))
 
-      expect(wrapper.emitted('asset-select')).toEqual([[assets[0]]])
+      expect(onAssetSelect).toHaveBeenCalledWith(
+        expect.objectContaining({ id: assets[0].id, name: assets[0].name })
+      )
     })
 
     it('executes onSelect callback when provided', async () => {
+      const user = userEvent.setup()
       const assets = [createTestAsset('asset1', 'Model A', 'checkpoints')]
       mockAssetsByKey.set('CheckpointLoaderSimple', assets)
 
       const onSelect = vi.fn()
-      const wrapper = createWrapper({
+      renderModal({
         nodeType: 'CheckpointLoaderSimple',
         onSelect
       })
       await flushPromises()
 
-      const assetGrid = wrapper.findComponent({ name: 'AssetGrid' })
-      await assetGrid.vm.$emit('asset-select', assets[0])
+      await user.click(screen.getByTestId('asset-asset1'))
 
-      expect(onSelect).toHaveBeenCalledWith(assets[0])
+      expect(onSelect).toHaveBeenCalledWith(
+        expect.objectContaining({ id: assets[0].id, name: assets[0].name })
+      )
     })
   })
 
   describe('Left Panel Conditional Logic', () => {
     it('hides left panel by default when showLeftPanel is undefined', async () => {
-      const wrapper = createWrapper({ nodeType: 'CheckpointLoaderSimple' })
+      renderModal({ nodeType: 'CheckpointLoaderSimple' })
       await flushPromises()
 
-      const leftPanel = wrapper.find('[data-testid="left-panel"]')
-      expect(leftPanel.exists()).toBe(false)
+      expect(screen.queryByTestId('left-panel')).toBeNull()
     })
 
     it('shows left panel when showLeftPanel prop is explicitly true', async () => {
-      const wrapper = createWrapper({
+      renderModal({
         nodeType: 'CheckpointLoaderSimple',
         showLeftPanel: true
       })
       await flushPromises()
 
-      const leftPanel = wrapper.find('[data-testid="left-panel"]')
-      expect(leftPanel.exists()).toBe(true)
+      expect(screen.getByTestId('left-panel')).toBeDefined()
+    })
+
+    it('hides left panel when showLeftPanel is false', async () => {
+      renderModal({
+        nodeType: 'CheckpointLoaderSimple',
+        showLeftPanel: false
+      })
+      await flushPromises()
+
+      expect(screen.queryByTestId('left-panel')).toBeNull()
     })
   })
 
   describe('Filter Options Reactivity', () => {
     it('updates filter options when category changes', async () => {
+      const user = userEvent.setup()
       const assets = [
         createTestAsset('asset1', 'Model A', 'checkpoints'),
         createTestAsset('asset2', 'Model B', 'loras')
       ]
       mockAssetsByKey.set('CheckpointLoaderSimple', assets)
 
-      const wrapper = createWrapper({
+      renderModal({
         nodeType: 'CheckpointLoaderSimple',
         showLeftPanel: true
       })
       await flushPromises()
 
-      const filterBar = wrapper.findComponent({ name: 'AssetFilterBar' })
-      expect(filterBar.props('assets')).toHaveLength(2)
+      expect(screen.getByTestId('asset-filter-bar').textContent).toContain(
+        '2 assets'
+      )
 
-      const leftPanel = wrapper.findComponent({ name: 'LeftSidePanel' })
-      await leftPanel.vm.$emit('update:modelValue', 'loras')
-      await wrapper.vm.$nextTick()
+      await user.click(screen.getByTestId('nav-item-loras'))
 
-      expect(filterBar.props('assets')).toHaveLength(1)
+      await waitFor(() => {
+        expect(screen.getByTestId('asset-filter-bar').textContent).toContain(
+          '1 assets'
+        )
+      })
     })
   })
 
   describe('Title Management', () => {
     it('passes custom title to BaseModalLayout when title prop provided', async () => {
-      const wrapper = createWrapper({
+      renderModal({
         nodeType: 'CheckpointLoaderSimple',
         title: 'Custom Title'
       })
       await flushPromises()
 
-      const layout = wrapper.findComponent({ name: 'BaseModalLayout' })
-      expect(layout.props('contentTitle')).toBe('Custom Title')
+      expect(screen.getByTestId('modal-title').textContent).toBe('Custom Title')
     })
 
     it('passes computed contentTitle to BaseModalLayout when no title prop', async () => {
       const assets = [createTestAsset('asset1', 'Model A', 'checkpoints')]
       mockAssetsByKey.set('CheckpointLoaderSimple', assets)
 
-      const wrapper = createWrapper({ nodeType: 'CheckpointLoaderSimple' })
+      renderModal({ nodeType: 'CheckpointLoaderSimple' })
       await flushPromises()
 
-      const layout = wrapper.findComponent({ name: 'BaseModalLayout' })
-      expect(layout.props('contentTitle')).toBe(
+      expect(screen.getByTestId('modal-title').textContent).toBe(
         'assetBrowser.allCategory:{"category":"Checkpoints"}'
       )
     })
diff --git a/src/platform/assets/components/AssetFilterBar.test.ts b/src/platform/assets/components/AssetFilterBar.test.ts
index 5b19500fff..a1862a4b54 100644
--- a/src/platform/assets/components/AssetFilterBar.test.ts
+++ b/src/platform/assets/components/AssetFilterBar.test.ts
@@ -1,16 +1,19 @@
-import { mount } from '@vue/test-utils'
+/* eslint-disable testing-library/no-container */
+/* eslint-disable testing-library/no-node-access */
+/* eslint-disable testing-library/prefer-user-event */
+import { fireEvent, render } from '@testing-library/vue'
 import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
+import { createI18n } from 'vue-i18n'
 
 import AssetFilterBar from '@/platform/assets/components/AssetFilterBar.vue'
-import type { AssetFilterState } from '@/platform/assets/types/filterTypes'
 import {
   createAssetWithSpecificBaseModel,
   createAssetWithSpecificExtension,
   createAssetWithoutBaseModel
 } from '@/platform/assets/fixtures/ui-mock-assets'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-import { createI18n } from 'vue-i18n'
+import type { AssetFilterState } from '@/platform/assets/types/filterTypes'
 
 const i18n = createI18n({
   legacy: false,
@@ -67,29 +70,31 @@ vi.mock('@/components/input/SingleSelect.vue', () => ({
 
 // Test factory functions
 function mountAssetFilterBar(props = {}) {
-  return mount(AssetFilterBar, {
-    props,
+  const onFilterChange = vi.fn()
+  const { container } = render(AssetFilterBar, {
+    props: { ...props, onFilterChange },
     global: {
       plugins: [i18n]
     }
   })
+  return { container, onFilterChange }
 }
 
 // Helper functions to find filters by user-facing attributes
-function findFileFormatsFilter(
-  wrapper: ReturnType<typeof mountAssetFilterBar>
-) {
-  return wrapper.findComponent(
+function findFileFormatsFilter(container: Element) {
+  return container.querySelector(
     '[data-component-id="asset-filter-file-formats"]'
   )
 }
 
-function findBaseModelsFilter(wrapper: ReturnType<typeof mountAssetFilterBar>) {
-  return wrapper.findComponent('[data-component-id="asset-filter-base-models"]')
+function findBaseModelsFilter(container: Element) {
+  return container.querySelector(
+    '[data-component-id="asset-filter-base-models"]'
+  )
 }
 
-function findSortFilter(wrapper: ReturnType<typeof mountAssetFilterBar>) {
-  return wrapper.findComponent('[data-component-id="asset-filter-sort"]')
+function findSortFilter(container: Element) {
+  return container.querySelector('[data-component-id="asset-filter-sort"]')
 }
 
 describe('AssetFilterBar', () => {
@@ -102,49 +107,55 @@ describe('AssetFilterBar', () => {
         createAssetWithSpecificBaseModel('sd15'),
         createAssetWithSpecificBaseModel('sdxl')
       ]
-      const wrapper = mountAssetFilterBar({ assets })
+      const { container, onFilterChange } = mountAssetFilterBar({ assets })
 
       // Update file formats
-      const fileFormatSelect = findFileFormatsFilter(wrapper)
-      const fileFormatSelectElement = fileFormatSelect.find('select')
-      const options = fileFormatSelectElement.findAll('option')
-      const ckptOption = options.find((o) => o.element.value === 'ckpt')!
-      const safetensorsOption = options.find(
-        (o) => o.element.value === 'safetensors'
-      )!
-      ckptOption.element.selected = true
-      safetensorsOption.element.selected = true
-      await fileFormatSelectElement.trigger('change')
+      const fileFormatEl = findFileFormatsFilter(container)!
+      const fileFormatSelectEl = fileFormatEl.querySelector(
+        'select'
+      ) as HTMLSelectElement
+      const fileFormatOptions = fileFormatEl.querySelectorAll('option')
+      const ckptOption = Array.from(fileFormatOptions).find(
+        (o) => (o as HTMLOptionElement).value === 'ckpt'
+      ) as HTMLOptionElement
+      const safetensorsOption = Array.from(fileFormatOptions).find(
+        (o) => (o as HTMLOptionElement).value === 'safetensors'
+      ) as HTMLOptionElement
+      ckptOption.selected = true
+      safetensorsOption.selected = true
+      await fireEvent.change(fileFormatSelectEl)
 
       await nextTick()
 
       // Update base models
-      const baseModelSelect = findBaseModelsFilter(wrapper)
-      const baseModelSelectElement = baseModelSelect.find('select')
-      const sdxlOption = baseModelSelectElement
-        .findAll('option')
-        .find((o) => o.element.value === 'sdxl')
-      sdxlOption!.element.selected = true
-      await baseModelSelectElement.trigger('change')
+      const baseModelEl = findBaseModelsFilter(container)!
+      const baseModelSelectEl = baseModelEl.querySelector(
+        'select'
+      ) as HTMLSelectElement
+      const baseModelOptions = baseModelEl.querySelectorAll('option')
+      const sdxlOption = Array.from(baseModelOptions).find(
+        (o) => (o as HTMLOptionElement).value === 'sdxl'
+      ) as HTMLOptionElement
+      sdxlOption.selected = true
+      await fireEvent.change(baseModelSelectEl)
 
       await nextTick()
 
       // Update sort
-      const sortSelect = findSortFilter(wrapper)
-      const sortSelectElement = sortSelect.find('select')
-      sortSelectElement.element.value = 'name-desc'
-      await sortSelectElement.trigger('change')
+      const sortEl = findSortFilter(container)!
+      const sortSelectEl = sortEl.querySelector('select') as HTMLSelectElement
+      sortSelectEl.value = 'name-desc'
+      await fireEvent.change(sortSelectEl)
 
       await nextTick()
 
-      const emitted = wrapper.emitted('filterChange')
-      expect(emitted).toBeTruthy()
-      expect(emitted!.length).toBeGreaterThanOrEqual(3)
+      expect(onFilterChange).toHaveBeenCalled()
+      expect(onFilterChange.mock.calls.length).toBeGreaterThanOrEqual(3)
 
       // Check final state
-      const finalState: AssetFilterState = emitted![
-        emitted!.length - 1
-      ][0] as AssetFilterState
+      const lastCall =
+        onFilterChange.mock.calls[onFilterChange.mock.calls.length - 1]
+      const finalState: AssetFilterState = lastCall[0]
       expect(finalState.fileFormats).toEqual(['ckpt', 'safetensors'])
       expect(finalState.baseModels).toEqual(['sdxl'])
       expect(finalState.sortBy).toBe('name-desc')
@@ -157,18 +168,22 @@ describe('AssetFilterBar', () => {
         createAssetWithSpecificExtension('safetensors'),
         createAssetWithSpecificBaseModel('sd15')
       ]
-      const wrapper = mountAssetFilterBar({ assets })
+      const { container, onFilterChange } = mountAssetFilterBar({ assets })
 
-      const fileFormatSelect = findFileFormatsFilter(wrapper)
-      const fileFormatSelectElement = fileFormatSelect.find('select')
-      const ckptOption = fileFormatSelectElement.findAll('option')[0]
-      ckptOption.element.selected = true
-      await fileFormatSelectElement.trigger('change')
+      const fileFormatEl = findFileFormatsFilter(container)!
+      const fileFormatSelectEl = fileFormatEl.querySelector(
+        'select'
+      ) as HTMLSelectElement
+      const firstOption = fileFormatEl.querySelector(
+        'option'
+      ) as HTMLOptionElement
+      firstOption.selected = true
+      await fireEvent.change(fileFormatSelectEl)
 
       await nextTick()
 
-      const emitted = wrapper.emitted('filterChange')
-      const filterState = emitted![0][0] as AssetFilterState
+      expect(onFilterChange).toHaveBeenCalled()
+      const filterState: AssetFilterState = onFilterChange.mock.calls[0][0]
 
       // Type and structure assertions
       expect(Array.isArray(filterState.fileFormats)).toBe(true)
@@ -193,12 +208,15 @@ describe('AssetFilterBar', () => {
         createAssetWithSpecificExtension('pt')
       ]
 
-      const wrapper = mountAssetFilterBar({ assets })
+      const { container } = mountAssetFilterBar({ assets })
 
-      const fileFormatSelect = findFileFormatsFilter(wrapper)
-      const options = fileFormatSelect.findAll('option')
+      const fileFormatEl = findFileFormatsFilter(container)!
+      const options = fileFormatEl.querySelectorAll('option')
       expect(
-        options.map((o) => ({ name: o.text(), value: o.element.value }))
+        Array.from(options).map((o) => ({
+          name: o.textContent?.trim(),
+          value: (o as HTMLOptionElement).value
+        }))
       ).toEqual([
         { name: '.ckpt', value: 'ckpt' },
         { name: '.pt', value: 'pt' },
@@ -213,12 +231,15 @@ describe('AssetFilterBar', () => {
         createAssetWithSpecificBaseModel('sd35')
       ]
 
-      const wrapper = mountAssetFilterBar({ assets })
+      const { container } = mountAssetFilterBar({ assets })
 
-      const baseModelSelect = findBaseModelsFilter(wrapper)
-      const options = baseModelSelect.findAll('option')
+      const baseModelEl = findBaseModelsFilter(container)!
+      const options = baseModelEl.querySelectorAll('option')
       expect(
-        options.map((o) => ({ name: o.text(), value: o.element.value }))
+        Array.from(options).map((o) => ({
+          name: o.textContent?.trim(),
+          value: (o as HTMLOptionElement).value
+        }))
       ).toEqual([
         { name: 'sd15', value: 'sd15' },
         { name: 'sd35', value: 'sd35' },
@@ -230,18 +251,16 @@ describe('AssetFilterBar', () => {
   describe('Conditional Filter Visibility', () => {
     it('hides file format filter when no options available', () => {
       const assets: AssetItem[] = [] // No assets = no file format options
-      const wrapper = mountAssetFilterBar({ assets })
+      const { container } = mountAssetFilterBar({ assets })
 
-      const fileFormatSelect = findFileFormatsFilter(wrapper)
-      expect(fileFormatSelect.exists()).toBe(false)
+      expect(findFileFormatsFilter(container)).toBeNull()
     })
 
     it('hides base model filter when no options available', () => {
       const assets = [createAssetWithoutBaseModel()] // Asset without base model = no base model options
-      const wrapper = mountAssetFilterBar({ assets })
+      const { container } = mountAssetFilterBar({ assets })
 
-      const baseModelSelect = findBaseModelsFilter(wrapper)
-      expect(baseModelSelect.exists()).toBe(false)
+      expect(findBaseModelsFilter(container)).toBeNull()
     })
 
     it('shows both filters when options are available', () => {
@@ -249,23 +268,17 @@ describe('AssetFilterBar', () => {
         createAssetWithSpecificExtension('safetensors'),
         createAssetWithSpecificBaseModel('sd15')
       ]
-      const wrapper = mountAssetFilterBar({ assets })
+      const { container } = mountAssetFilterBar({ assets })
 
-      const fileFormatSelect = findFileFormatsFilter(wrapper)
-      const baseModelSelect = findBaseModelsFilter(wrapper)
-
-      expect(fileFormatSelect.exists()).toBe(true)
-      expect(baseModelSelect.exists()).toBe(true)
+      expect(findFileFormatsFilter(container)).not.toBeNull()
+      expect(findBaseModelsFilter(container)).not.toBeNull()
     })
 
     it('hides both filters when no assets provided', () => {
-      const wrapper = mountAssetFilterBar()
+      const { container } = mountAssetFilterBar()
 
-      const fileFormatSelect = findFileFormatsFilter(wrapper)
-      const baseModelSelect = findBaseModelsFilter(wrapper)
-
-      expect(fileFormatSelect.exists()).toBe(false)
-      expect(baseModelSelect.exists()).toBe(false)
+      expect(findFileFormatsFilter(container)).toBeNull()
+      expect(findBaseModelsFilter(container)).toBeNull()
     })
   })
 })
diff --git a/src/platform/assets/components/AssetsListItem.test.ts b/src/platform/assets/components/AssetsListItem.test.ts
index f274c997eb..ebb469d7df 100644
--- a/src/platform/assets/components/AssetsListItem.test.ts
+++ b/src/platform/assets/components/AssetsListItem.test.ts
@@ -1,11 +1,13 @@
-import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+
 import AssetsListItem from './AssetsListItem.vue'
 
 describe('AssetsListItem', () => {
   it('renders video element with play overlay for video previews', () => {
-    const wrapper = mount(AssetsListItem, {
+    const { container } = render(AssetsListItem, {
       props: {
         previewUrl: 'https://example.com/preview.mp4',
         previewAlt: 'clip.mp4',
@@ -13,17 +15,22 @@ describe('AssetsListItem', () => {
       }
     })
 
-    const video = wrapper.find('video')
-    expect(video.exists()).toBe(true)
-    expect(video.attributes('src')).toBe('https://example.com/preview.mp4')
-    expect(video.attributes('preload')).toBe('metadata')
-    expect(wrapper.find('img').exists()).toBe(false)
-    expect(wrapper.find('.bg-black\\/15').exists()).toBe(true)
-    expect(wrapper.find('.icon-\\[lucide--play\\]').exists()).toBe(true)
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- no ARIA role for <video> in happy-dom
+    const video = container.querySelector('video')
+    expect(video).toBeInTheDocument()
+    expect(video).toHaveAttribute('src', 'https://example.com/preview.mp4')
+    expect(video).toHaveAttribute('preload', 'metadata')
+    expect(screen.queryByRole('img')).not.toBeInTheDocument()
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- CSS class query for play overlay styling
+    expect(container.querySelector('.bg-black\\/15')).toBeInTheDocument()
+    expect(
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- CSS class query for play icon styling
+      container.querySelector('.icon-\\[lucide--play\\]')
+    ).toBeInTheDocument()
   })
 
   it('does not show play overlay for non-video previews', () => {
-    const wrapper = mount(AssetsListItem, {
+    const { container } = render(AssetsListItem, {
       props: {
         previewUrl: 'https://example.com/preview.jpg',
         previewAlt: 'image.png',
@@ -31,33 +38,41 @@ describe('AssetsListItem', () => {
       }
     })
 
-    expect(wrapper.find('img').exists()).toBe(true)
-    expect(wrapper.find('video').exists()).toBe(false)
-    expect(wrapper.find('.icon-\\[lucide--play\\]').exists()).toBe(false)
+    expect(screen.getByRole('img')).toBeInTheDocument()
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- no ARIA role for <video> in happy-dom
+    expect(container.querySelector('video')).not.toBeInTheDocument()
+    expect(
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- CSS class query for play icon styling
+      container.querySelector('.icon-\\[lucide--play\\]')
+    ).not.toBeInTheDocument()
   })
 
   it('emits preview-click when preview is clicked', async () => {
-    const wrapper = mount(AssetsListItem, {
+    const user = userEvent.setup()
+    const { emitted } = render(AssetsListItem, {
       props: {
         previewUrl: 'https://example.com/preview.jpg',
         previewAlt: 'image.png'
       }
     })
 
-    await wrapper.find('img').trigger('click')
+    await user.click(screen.getByRole('img'))
 
-    expect(wrapper.emitted('preview-click')).toHaveLength(1)
+    expect(emitted()['preview-click']).toHaveLength(1)
   })
 
   it('emits preview-click when fallback icon is clicked', async () => {
-    const wrapper = mount(AssetsListItem, {
+    const user = userEvent.setup()
+    const { container, emitted } = render(AssetsListItem, {
       props: {
         iconName: 'icon-[lucide--box]'
       }
     })
 
-    await wrapper.find('i').trigger('click')
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- aria-hidden icon, no semantic query available
+    const icon = container.querySelector('i')!
+    await user.click(icon)
 
-    expect(wrapper.emitted('preview-click')).toHaveLength(1)
+    expect(emitted()['preview-click']).toHaveLength(1)
   })
 })
diff --git a/src/platform/assets/components/MediaAssetContextMenu.test.ts b/src/platform/assets/components/MediaAssetContextMenu.test.ts
index 7af8954f63..84c477be1a 100644
--- a/src/platform/assets/components/MediaAssetContextMenu.test.ts
+++ b/src/platform/assets/components/MediaAssetContextMenu.test.ts
@@ -1,7 +1,7 @@
-import { mount } from '@vue/test-utils'
+/* eslint-disable vue/one-component-per-file */
+import { render } from '@testing-library/vue'
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import { defineComponent, nextTick } from 'vue'
-import type { ComponentPublicInstance } from 'vue'
+import { defineComponent, nextTick, onMounted, ref } from 'vue'
 
 import MediaAssetContextMenu from '@/platform/assets/components/MediaAssetContextMenu.vue'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
@@ -84,60 +84,73 @@ const buttonStub = {
   template: '<div class="button-stub"><slot /></div>'
 }
 
-type MediaAssetContextMenuExposed = ComponentPublicInstance & {
+interface MediaAssetContextMenuExposed {
   show: (event: MouseEvent) => void
 }
 
-const mountComponent = () =>
-  mount(MediaAssetContextMenu, {
-    attachTo: document.body,
-    props: {
-      asset,
-      assetType: 'output',
-      fileKind: 'image'
-    },
-    global: {
-      stubs: {
-        ContextMenu: contextMenuStub,
-        Button: buttonStub
+let capturedRef: MediaAssetContextMenuExposed | null = null
+
+function mountComponent() {
+  const onHide = vi.fn()
+  const { container, unmount } = render(
+    defineComponent({
+      components: { MediaAssetContextMenu },
+      setup() {
+        const menuRef = ref<MediaAssetContextMenuExposed | null>(null)
+        onMounted(() => {
+          capturedRef = menuRef.value
+        })
+        return { menuRef, asset, onHide }
+      },
+      template:
+        '<MediaAssetContextMenu ref="menuRef" :asset="asset" asset-type="output" file-kind="image" @hide="onHide" />'
+    }),
+    {
+      global: {
+        stubs: {
+          ContextMenu: contextMenuStub,
+          Button: buttonStub
+        }
       }
     }
-  })
+  )
+  return { container, unmount, onHide }
+}
 
-async function showMenu(
-  wrapper: ReturnType<typeof mountComponent>
-): Promise<HTMLElement> {
-  const exposed = wrapper.vm as MediaAssetContextMenuExposed
+async function showMenu(container: Element): Promise<HTMLElement> {
   const event = new MouseEvent('contextmenu', { bubbles: true })
-  exposed.show(event)
+  capturedRef!.show(event)
   await nextTick()
-
-  return wrapper.get('.context-menu-stub').element as HTMLElement
+  // eslint-disable-next-line testing-library/no-container
+  return container.querySelector('.context-menu-stub') as HTMLElement
 }
 
 afterEach(() => {
   vi.clearAllMocks()
+  capturedRef = null
   document.body.innerHTML = ''
 })
 
 describe('MediaAssetContextMenu', () => {
   it('dismisses outside pointerdown using the rendered root id', async () => {
-    const wrapper = mountComponent()
+    const { container, unmount, onHide } = mountComponent()
     const outside = document.createElement('div')
     document.body.append(outside)
 
-    const menu = await showMenu(wrapper)
+    const menu = await showMenu(container)
     const menuId = menu.id
 
     expect(menuId).not.toBe('')
+    // eslint-disable-next-line testing-library/no-node-access
     expect(document.getElementById(menuId)).toBe(menu)
 
     outside.dispatchEvent(new Event('pointerdown', { bubbles: true }))
     await nextTick()
 
-    expect(wrapper.find('.context-menu-stub').exists()).toBe(false)
-    expect(wrapper.emitted('hide')).toEqual([[]])
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    expect(container.querySelector('.context-menu-stub')).toBeNull()
+    expect(onHide).toHaveBeenCalledOnce()
 
-    wrapper.unmount()
+    unmount()
   })
 })
diff --git a/src/platform/assets/components/MediaVideoTop.test.ts b/src/platform/assets/components/MediaVideoTop.test.ts
index d871145bb0..f166c025ce 100644
--- a/src/platform/assets/components/MediaVideoTop.test.ts
+++ b/src/platform/assets/components/MediaVideoTop.test.ts
@@ -1,6 +1,8 @@
-import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
 
+import { fireEvent, render } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+
 import type { AssetMeta } from '../schemas/mediaAssetSchema'
 import MediaVideoTop from './MediaVideoTop.vue'
 
@@ -21,80 +23,83 @@ function createVideoAsset(
 
 describe('MediaVideoTop', () => {
   it('renders playable video with darkened paused overlay and play icon', () => {
-    const wrapper = mount(MediaVideoTop, {
+    const { container } = render(MediaVideoTop, {
       props: {
         asset: createVideoAsset('https://example.com/thumb.jpg')
       }
     })
 
-    const video = wrapper.find('video')
-    const videoElement = video.element as HTMLVideoElement
-    expect(video.exists()).toBe(true)
-    expect(videoElement.controls).toBe(false)
-    expect(wrapper.find('source').attributes('src')).toBe(
-      'https://example.com/thumb.jpg'
-    )
-    expect(wrapper.find('source').attributes('type')).toBe('video/mp4')
-    expect(wrapper.find('.bg-black\\/15').exists()).toBe(true)
-    expect(wrapper.find('.icon-\\[lucide--play\\]').exists()).toBe(true)
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- <video> has no ARIA role in happy-dom
+    const video = container.querySelector('video')!
+    expect(video).toBeInTheDocument()
+    expect(video.controls).toBe(false)
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- <source> has no ARIA role in happy-dom
+    const source = container.querySelector('source')!
+    expect(source).toHaveAttribute('src', 'https://example.com/thumb.jpg')
+    expect(source).toHaveAttribute('type', 'video/mp4')
   })
 
   it('does not render source element when src is empty', () => {
-    const wrapper = mount(MediaVideoTop, {
+    const { container } = render(MediaVideoTop, {
       props: {
         asset: createVideoAsset('')
       }
     })
 
-    expect(wrapper.find('video').exists()).toBe(true)
-    expect(wrapper.find('source').exists()).toBe(false)
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- <video> has no ARIA role in happy-dom
+    expect(container.querySelector('video')).toBeInTheDocument()
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- <source> has no ARIA role in happy-dom
+    expect(container.querySelector('source')).not.toBeInTheDocument()
   })
+
   it('emits playback events and hides paused overlay while playing', async () => {
-    const wrapper = mount(MediaVideoTop, {
+    const user = userEvent.setup()
+    const { container, emitted } = render(MediaVideoTop, {
       props: {
         asset: createVideoAsset('https://example.com/thumb.jpg')
       }
     })
 
-    const video = wrapper.find('video')
-    const videoElement = video.element as HTMLVideoElement
-    expect(video.exists()).toBe(true)
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- <video> has no ARIA role in happy-dom
+    const video = container.querySelector('video')!
+    expect(video).toBeInTheDocument()
 
-    await video.trigger('play')
-    expect(wrapper.emitted('videoPlayingStateChanged')?.at(-1)).toEqual([true])
-    expect(wrapper.find('.bg-black\\/15').exists()).toBe(false)
+    await fireEvent.play(video)
+    expect(emitted()['videoPlayingStateChanged']?.at(-1)).toEqual([true])
 
-    await wrapper.trigger('mouseenter')
-    expect(videoElement.controls).toBe(true)
+    // eslint-disable-next-line testing-library/no-node-access -- root wrapper has no role
+    await user.hover(container.firstElementChild!)
+    expect(video.controls).toBe(true)
 
-    await wrapper.trigger('mouseleave')
-    expect(videoElement.controls).toBe(false)
+    // eslint-disable-next-line testing-library/no-node-access -- root wrapper has no role
+    await user.unhover(container.firstElementChild!)
+    expect(video.controls).toBe(false)
 
-    await video.trigger('pause')
-    expect(wrapper.emitted('videoPlayingStateChanged')?.at(-1)).toEqual([false])
-    expect(wrapper.find('.bg-black\\/15').exists()).toBe(true)
-    expect(videoElement.controls).toBe(false)
+    await fireEvent.pause(video)
+    expect(emitted()['videoPlayingStateChanged']?.at(-1)).toEqual([false])
+    expect(video.controls).toBe(false)
   })
 
   it('starts playback from click when controls are hidden', async () => {
-    const wrapper = mount(MediaVideoTop, {
+    const user = userEvent.setup()
+    const { container } = render(MediaVideoTop, {
       props: {
         asset: createVideoAsset('https://example.com/thumb.jpg')
       }
     })
 
-    const video = wrapper.find('video')
-    const videoElement = video.element as HTMLVideoElement
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- <video> has no ARIA role in happy-dom
+    const video = container.querySelector('video')!
     const playSpy = vi
-      .spyOn(videoElement, 'play')
+      .spyOn(video, 'play')
       .mockImplementation(() => Promise.resolve())
 
-    Object.defineProperty(videoElement, 'paused', {
+    Object.defineProperty(video, 'paused', {
       value: true,
       configurable: true
     })
 
-    await video.trigger('click')
+    await user.click(video)
 
     expect(playSpy).toHaveBeenCalledTimes(1)
   })
diff --git a/src/platform/assets/components/modelInfo/ModelInfoPanel.test.ts b/src/platform/assets/components/modelInfo/ModelInfoPanel.test.ts
index 272d66b25e..afa672ec09 100644
--- a/src/platform/assets/components/modelInfo/ModelInfoPanel.test.ts
+++ b/src/platform/assets/components/modelInfo/ModelInfoPanel.test.ts
@@ -1,8 +1,9 @@
-import { mount } from '@vue/test-utils'
 import { createTestingPinia } from '@pinia/testing'
 import { describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
+import { render, screen } from '@testing-library/vue'
+
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
 
 import ModelInfoPanel from './ModelInfoPanel.vue'
@@ -40,8 +41,8 @@ describe('ModelInfoPanel', () => {
     ...overrides
   })
 
-  const mountPanel = (asset: AssetDisplayItem) => {
-    return mount(ModelInfoPanel, {
+  function renderPanel(asset: AssetDisplayItem) {
+    return render(ModelInfoPanel, {
       props: { asset },
       global: {
         plugins: [createTestingPinia({ stubActions: false }), i18n]
@@ -51,84 +52,107 @@ describe('ModelInfoPanel', () => {
 
   describe('Basic Info Section', () => {
     it('renders basic info section', () => {
-      const wrapper = mountPanel(createMockAsset())
-      expect(wrapper.text()).toContain('assetBrowser.modelInfo.basicInfo')
+      renderPanel(createMockAsset())
+      expect(
+        screen.getByText('assetBrowser.modelInfo.basicInfo')
+      ).toBeInTheDocument()
     })
 
     it('displays asset filename', () => {
       const asset = createMockAsset({ name: 'my-model.safetensors' })
-      const wrapper = mountPanel(asset)
-      expect(wrapper.text()).toContain('my-model.safetensors')
+      renderPanel(asset)
+      expect(
+        screen.getAllByText('my-model.safetensors').length
+      ).toBeGreaterThanOrEqual(1)
+    })
+
+    it('prefers user_metadata.filename over asset.name for filename field', () => {
+      const asset = createMockAsset({
+        name: 'registry-display-name',
+        user_metadata: { filename: 'checkpoints/real-file.safetensors' }
+      })
+      renderPanel(asset)
+      expect(
+        screen.getByText('checkpoints/real-file.safetensors')
+      ).toBeInTheDocument()
     })
 
     it('displays name from user_metadata when present', () => {
       const asset = createMockAsset({
         user_metadata: { name: 'My Custom Model' }
       })
-      const wrapper = mountPanel(asset)
-      expect(wrapper.text()).toContain('My Custom Model')
+      renderPanel(asset)
+      expect(screen.getByText('My Custom Model')).toBeInTheDocument()
     })
 
     it('falls back to asset name when user_metadata.name not present', () => {
       const asset = createMockAsset({ name: 'fallback-model.safetensors' })
-      const wrapper = mountPanel(asset)
-      expect(wrapper.text()).toContain('fallback-model.safetensors')
+      renderPanel(asset)
+      expect(
+        screen.getAllByText('fallback-model.safetensors').length
+      ).toBeGreaterThanOrEqual(1)
     })
 
     it('renders source link when source_arn is present', () => {
       const asset = createMockAsset({
         user_metadata: { source_arn: 'civitai:model:123:version:456' }
       })
-      const wrapper = mountPanel(asset)
-      const link = wrapper.find(
-        'a[href="https://civitai.com/models/123?modelVersionId=456"]'
+      renderPanel(asset)
+      const link = screen.getByRole('link')
+      expect(link).toHaveAttribute(
+        'href',
+        'https://civitai.com/models/123?modelVersionId=456'
       )
-      expect(link.exists()).toBe(true)
-      expect(link.attributes('target')).toBe('_blank')
+      expect(link).toHaveAttribute('target', '_blank')
     })
 
     it('displays Civitai icon for Civitai source', () => {
       const asset = createMockAsset({
         user_metadata: { source_arn: 'civitai:model:123:version:456' }
       })
-      const wrapper = mountPanel(asset)
-      expect(
-        wrapper.find('img[src="/assets/images/civitai.svg"]').exists()
-      ).toBe(true)
+      renderPanel(asset)
+      expect(screen.getByRole('img')).toHaveAttribute(
+        'src',
+        '/assets/images/civitai.svg'
+      )
     })
 
     it('does not render source field when source_arn is absent', () => {
-      const asset = createMockAsset()
-      const wrapper = mountPanel(asset)
-      const links = wrapper.findAll('a')
-      expect(links).toHaveLength(0)
+      renderPanel(createMockAsset())
+      expect(screen.queryAllByRole('link')).toHaveLength(0)
     })
   })
 
   describe('Model Tagging Section', () => {
     it('renders model tagging section', () => {
-      const wrapper = mountPanel(createMockAsset())
-      expect(wrapper.text()).toContain('assetBrowser.modelInfo.modelTagging')
+      renderPanel(createMockAsset())
+      expect(
+        screen.getByText('assetBrowser.modelInfo.modelTagging')
+      ).toBeInTheDocument()
     })
 
     it('renders model type field', () => {
-      const wrapper = mountPanel(createMockAsset())
-      expect(wrapper.text()).toContain('assetBrowser.modelInfo.modelType')
+      renderPanel(createMockAsset())
+      expect(
+        screen.getByText('assetBrowser.modelInfo.modelType')
+      ).toBeInTheDocument()
     })
 
     it('renders base models field', () => {
       const asset = createMockAsset({
         user_metadata: { base_model: ['SDXL'] }
       })
-      const wrapper = mountPanel(asset)
-      expect(wrapper.text()).toContain(
-        'assetBrowser.modelInfo.compatibleBaseModels'
-      )
+      renderPanel(asset)
+      expect(
+        screen.getByText('assetBrowser.modelInfo.compatibleBaseModels')
+      ).toBeInTheDocument()
     })
 
     it('renders additional tags field', () => {
-      const wrapper = mountPanel(createMockAsset())
-      expect(wrapper.text()).toContain('assetBrowser.modelInfo.additionalTags')
+      renderPanel(createMockAsset())
+      expect(
+        screen.getByText('assetBrowser.modelInfo.additionalTags')
+      ).toBeInTheDocument()
     })
   })
 
@@ -137,35 +161,38 @@ describe('ModelInfoPanel', () => {
       const asset = createMockAsset({
         user_metadata: { trained_words: ['trigger1', 'trigger2'] }
       })
-      const wrapper = mountPanel(asset)
-      expect(wrapper.text()).toContain('trigger1')
-      expect(wrapper.text()).toContain('trigger2')
+      renderPanel(asset)
+      expect(screen.getByText('trigger1')).toBeInTheDocument()
+      expect(screen.getByText('trigger2')).toBeInTheDocument()
     })
 
     it('renders description section', () => {
-      const wrapper = mountPanel(createMockAsset())
-      expect(wrapper.text()).toContain(
-        'assetBrowser.modelInfo.modelDescription'
-      )
+      renderPanel(createMockAsset())
+      expect(
+        screen.getByText('assetBrowser.modelInfo.modelDescription')
+      ).toBeInTheDocument()
     })
 
     it('does not render trigger phrases field when empty', () => {
-      const asset = createMockAsset()
-      const wrapper = mountPanel(asset)
-      expect(wrapper.text()).not.toContain(
-        'assetBrowser.modelInfo.triggerPhrases'
-      )
+      renderPanel(createMockAsset())
+      expect(
+        screen.queryByText('assetBrowser.modelInfo.triggerPhrases')
+      ).not.toBeInTheDocument()
     })
   })
 
   describe('Accordion Structure', () => {
     it('renders all three section labels', () => {
-      const wrapper = mountPanel(createMockAsset())
-      expect(wrapper.text()).toContain('assetBrowser.modelInfo.basicInfo')
-      expect(wrapper.text()).toContain('assetBrowser.modelInfo.modelTagging')
-      expect(wrapper.text()).toContain(
-        'assetBrowser.modelInfo.modelDescription'
-      )
+      renderPanel(createMockAsset())
+      expect(
+        screen.getByText('assetBrowser.modelInfo.basicInfo')
+      ).toBeInTheDocument()
+      expect(
+        screen.getByText('assetBrowser.modelInfo.modelTagging')
+      ).toBeInTheDocument()
+      expect(
+        screen.getByText('assetBrowser.modelInfo.modelDescription')
+      ).toBeInTheDocument()
     })
   })
 })
diff --git a/src/platform/assets/components/modelInfo/ModelInfoPanel.vue b/src/platform/assets/components/modelInfo/ModelInfoPanel.vue
index 75076cca0e..a70d055e84 100644
--- a/src/platform/assets/components/modelInfo/ModelInfoPanel.vue
+++ b/src/platform/assets/components/modelInfo/ModelInfoPanel.vue
@@ -32,7 +32,9 @@
         </div>
       </ModelInfoField>
       <ModelInfoField :label="t('assetBrowser.modelInfo.fileName')">
-        <span class="break-all text-muted-foreground">{{ asset.name }}</span>
+        <span class="break-all text-muted-foreground">{{
+          getAssetFilename(asset)
+        }}</span>
       </ModelInfoField>
       <ModelInfoField
         v-if="sourceUrl"
@@ -232,6 +234,7 @@ import {
   getAssetBaseModels,
   getAssetDescription,
   getAssetDisplayName,
+  getAssetFilename,
   getAssetModelType,
   getAssetSourceUrl,
   getAssetTriggerPhrases,
diff --git a/src/platform/assets/composables/useMediaAssetActions.test.ts b/src/platform/assets/composables/useMediaAssetActions.test.ts
index e5cced26e1..f849cc6def 100644
--- a/src/platform/assets/composables/useMediaAssetActions.test.ts
+++ b/src/platform/assets/composables/useMediaAssetActions.test.ts
@@ -1,10 +1,10 @@
 import { createTestingPinia } from '@pinia/testing'
+import { fromAny } from '@total-typescript/shoehorn'
 import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-
 import { useMediaAssetActions } from './useMediaAssetActions'
 
 // Use vi.hoisted to create a mutable reference for isCloud
@@ -77,10 +77,12 @@ vi.mock('@/platform/workflow/core/services/workflowActionsService', () => ({
 
 vi.mock('@/services/litegraphService', () => ({
   useLitegraphService: () => ({
-    addNodeOnGraph: vi.fn().mockReturnValue({
-      widgets: [{ name: 'image', value: '', callback: vi.fn() }],
-      graph: { setDirtyCanvas: vi.fn() }
-    } as unknown as LGraphNode),
+    addNodeOnGraph: vi.fn().mockReturnValue(
+      fromAny<LGraphNode, unknown>({
+        widgets: [{ name: 'image', value: '', callback: vi.fn() }],
+        graph: { setDirtyCanvas: vi.fn() }
+      })
+    ),
     getCanvasCenter: vi.fn().mockReturnValue([100, 100])
   })
 }))
diff --git a/src/platform/assets/composables/useUploadModelWizard.test.ts b/src/platform/assets/composables/useUploadModelWizard.test.ts
new file mode 100644
index 0000000000..3250b466b9
--- /dev/null
+++ b/src/platform/assets/composables/useUploadModelWizard.test.ts
@@ -0,0 +1,157 @@
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick, ref } from 'vue'
+
+import type { AsyncUploadResponse } from '@/platform/assets/schemas/assetSchema'
+
+import { useUploadModelWizard } from './useUploadModelWizard'
+
+vi.mock('@/platform/assets/services/assetService', () => ({
+  assetService: {
+    uploadAssetAsync: vi.fn(),
+    uploadAssetPreviewImage: vi.fn()
+  }
+}))
+
+vi.mock('@/platform/assets/importSources/civitaiImportSource', () => ({
+  civitaiImportSource: {
+    name: 'Civitai',
+    hostnames: ['civitai.com'],
+    fetchMetadata: vi.fn()
+  }
+}))
+
+vi.mock('@/platform/assets/importSources/huggingfaceImportSource', () => ({
+  huggingfaceImportSource: {
+    name: 'HuggingFace',
+    hostnames: ['huggingface.co'],
+    fetchMetadata: vi.fn()
+  }
+}))
+
+vi.mock('@/scripts/api', () => ({
+  api: {
+    fetchApi: vi.fn(),
+    addEventListener: vi.fn(),
+    apiURL: vi.fn((path: string) => path)
+  }
+}))
+
+vi.mock('@/i18n', () => ({
+  st: (_key: string, fallback: string) => fallback,
+  t: (key: string) => key,
+  te: () => false,
+  d: (date: Date) => date.toISOString()
+}))
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({ t: (key: string) => key })
+}))
+
+describe('useUploadModelWizard', () => {
+  const modelTypes = ref([{ name: 'Checkpoint', value: 'checkpoints' }])
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    setActivePinia(createTestingPinia({ stubActions: false }))
+  })
+
+  it('updates uploadStatus to success when async download completes', async () => {
+    const { assetService } =
+      await import('@/platform/assets/services/assetService')
+
+    const asyncResponse: AsyncUploadResponse = {
+      type: 'async',
+      task: {
+        task_id: 'task-123',
+        status: 'created',
+        message: 'Download queued'
+      }
+    }
+    vi.mocked(assetService.uploadAssetAsync).mockResolvedValue(asyncResponse)
+
+    const wizard = useUploadModelWizard(modelTypes)
+    wizard.wizardData.value.url = 'https://civitai.com/models/12345'
+    wizard.selectedModelType.value = 'checkpoints'
+
+    await wizard.uploadModel()
+
+    expect(wizard.uploadStatus.value).toBe('processing')
+
+    // Simulate WebSocket: download completes
+    const detail = {
+      task_id: 'task-123',
+      asset_id: 'asset-456',
+      asset_name: 'model.safetensors',
+      bytes_total: 1000,
+      bytes_downloaded: 1000,
+      progress: 100,
+      status: 'completed' as const
+    }
+    const event = new CustomEvent('asset_download', { detail })
+    const { api } = await import('@/scripts/api')
+    const handler = vi
+      .mocked(api.addEventListener)
+      .mock.calls.find((c) => c[0] === 'asset_download')?.[1] as
+      | ((e: CustomEvent) => void)
+      | undefined
+    expect(handler).toBeDefined()
+    handler!(event)
+
+    await nextTick()
+
+    expect(wizard.uploadStatus.value).toBe('success')
+  })
+
+  it('updates uploadStatus to error when async download fails', async () => {
+    const { assetService } =
+      await import('@/platform/assets/services/assetService')
+
+    const asyncResponse: AsyncUploadResponse = {
+      type: 'async',
+      task: {
+        task_id: 'task-fail',
+        status: 'created',
+        message: 'Download queued'
+      }
+    }
+    vi.mocked(assetService.uploadAssetAsync).mockResolvedValue(asyncResponse)
+
+    const wizard = useUploadModelWizard(modelTypes)
+    wizard.wizardData.value.url = 'https://civitai.com/models/99999'
+    wizard.selectedModelType.value = 'checkpoints'
+
+    await wizard.uploadModel()
+    expect(wizard.uploadStatus.value).toBe('processing')
+
+    // Simulate WebSocket: download fails
+    const { api } = await import('@/scripts/api')
+    const handler = vi
+      .mocked(api.addEventListener)
+      .mock.calls.find((c) => c[0] === 'asset_download')?.[1] as
+      | ((e: CustomEvent) => void)
+      | undefined
+
+    const failEvent = new CustomEvent('asset_download', {
+      detail: {
+        task_id: 'task-fail',
+        asset_id: '',
+        asset_name: 'model.safetensors',
+        bytes_total: 1000,
+        bytes_downloaded: 500,
+        progress: 50,
+        status: 'failed' as const,
+        error: 'Network error'
+      }
+    })
+
+    expect(handler).toBeDefined()
+    handler!(failEvent)
+
+    await nextTick()
+
+    expect(wizard.uploadStatus.value).toBe('error')
+    expect(wizard.uploadError.value).toBe('Network error')
+  })
+})
diff --git a/src/platform/assets/composables/useUploadModelWizard.ts b/src/platform/assets/composables/useUploadModelWizard.ts
index b82b4b8142..e6dcb2aa98 100644
--- a/src/platform/assets/composables/useUploadModelWizard.ts
+++ b/src/platform/assets/composables/useUploadModelWizard.ts
@@ -36,6 +36,7 @@ export function useUploadModelWizard(modelTypes: Ref<ModelTypeOption[]>) {
   const isUploading = ref(false)
   const uploadStatus = ref<'processing' | 'success' | 'error'>()
   const uploadError = ref('')
+  let stopAsyncWatch: (() => void) | undefined
 
   const wizardData = ref<WizardData>({
     url: '',
@@ -203,6 +204,7 @@ export function useUploadModelWizard(modelTypes: Ref<ModelTypeOption[]>) {
   }
 
   async function uploadModel(): Promise<boolean> {
+    if (isUploading.value) return false
     if (!canUploadModel.value) {
       return false
     }
@@ -247,6 +249,44 @@ export function useUploadModelWizard(modelTypes: Ref<ModelTypeOption[]>) {
           )
         }
         uploadStatus.value = 'processing'
+
+        stopAsyncWatch?.()
+        let resolved = false
+        const stop = watch(
+          () =>
+            assetDownloadStore.downloadList.find(
+              (d) => d.taskId === result.task.task_id
+            )?.status,
+          async (status) => {
+            if (status === 'completed') {
+              resolved = true
+              uploadStatus.value = 'success'
+              await refreshModelCaches()
+              stopAsyncWatch?.()
+              stopAsyncWatch = undefined
+            } else if (status === 'failed') {
+              resolved = true
+              const download = assetDownloadStore.downloadList.find(
+                (d) => d.taskId === result.task.task_id
+              )
+              uploadStatus.value = 'error'
+              uploadError.value =
+                download?.error ||
+                t('assetBrowser.downloadFailed', {
+                  name: download?.assetName || ''
+                })
+              stopAsyncWatch?.()
+              stopAsyncWatch = undefined
+            }
+          },
+          { immediate: true }
+        )
+        if (resolved) {
+          stop()
+          stopAsyncWatch = undefined
+        } else {
+          stopAsyncWatch = stop
+        }
       } else {
         uploadStatus.value = 'success'
         await refreshModelCaches()
@@ -271,6 +311,8 @@ export function useUploadModelWizard(modelTypes: Ref<ModelTypeOption[]>) {
   }
 
   function resetWizard() {
+    stopAsyncWatch?.()
+    stopAsyncWatch = undefined
     currentStep.value = 1
     isFetchingMetadata.value = false
     isUploading.value = false
diff --git a/src/platform/cloud/notification/components/CloudNotificationContent.vue b/src/platform/cloud/notification/components/CloudNotificationContent.vue
index 2e3a5ead0f..7f6750708b 100644
--- a/src/platform/cloud/notification/components/CloudNotificationContent.vue
+++ b/src/platform/cloud/notification/components/CloudNotificationContent.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="relative grid h-full grid-cols-5">
+  <div
+    data-testid="cloud-notification-dialog"
+    class="relative grid h-full grid-cols-5"
+  >
     <Button
       size="unset"
       variant="muted-textonly"
diff --git a/src/platform/cloud/notification/components/DesktopCloudNotificationController.test.ts b/src/platform/cloud/notification/components/DesktopCloudNotificationController.test.ts
index 757cc96b4d..b75c1fd888 100644
--- a/src/platform/cloud/notification/components/DesktopCloudNotificationController.test.ts
+++ b/src/platform/cloud/notification/components/DesktopCloudNotificationController.test.ts
@@ -1,4 +1,4 @@
-import { flushPromises, mount } from '@vue/test-utils'
+import { render } from '@testing-library/vue'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 
@@ -77,31 +77,31 @@ describe('DesktopCloudNotificationController', () => {
     const loadSettings = createDeferred()
     settingStore.load.mockImplementation(() => loadSettings.promise)
 
-    const wrapper = mount(DesktopCloudNotificationController)
+    const { unmount } = render(DesktopCloudNotificationController)
     await nextTick()
 
     settingState.shown = true
     loadSettings.resolve()
 
-    await flushPromises()
+    await vi.advanceTimersByTimeAsync(0)
     await vi.advanceTimersByTimeAsync(2000)
 
     expect(dialogService.showCloudNotification).not.toHaveBeenCalled()
 
-    wrapper.unmount()
+    unmount()
   })
 
   it('does not schedule or show the notification after unmounting before settings load resolves', async () => {
     const loadSettings = createDeferred()
     settingStore.load.mockImplementation(() => loadSettings.promise)
 
-    const wrapper = mount(DesktopCloudNotificationController)
+    const { unmount } = render(DesktopCloudNotificationController)
     await nextTick()
 
-    wrapper.unmount()
+    unmount()
     loadSettings.resolve()
 
-    await flushPromises()
+    await vi.advanceTimersByTimeAsync(0)
     await vi.advanceTimersByTimeAsync(2000)
 
     expect(settingStore.set).not.toHaveBeenCalled()
@@ -114,9 +114,9 @@ describe('DesktopCloudNotificationController', () => {
       () => dialogOpen.promise
     )
 
-    const wrapper = mount(DesktopCloudNotificationController)
+    const { unmount } = render(DesktopCloudNotificationController)
 
-    await flushPromises()
+    await vi.advanceTimersByTimeAsync(0)
     await vi.advanceTimersByTimeAsync(2000)
 
     expect(settingStore.set).toHaveBeenCalledWith(
@@ -128,8 +128,8 @@ describe('DesktopCloudNotificationController', () => {
     )
 
     dialogOpen.resolve()
-    await flushPromises()
+    await vi.advanceTimersByTimeAsync(0)
 
-    wrapper.unmount()
+    unmount()
   })
 })
diff --git a/src/platform/cloud/onboarding/CloudSubscriptionRedirectView.test.ts b/src/platform/cloud/onboarding/CloudSubscriptionRedirectView.test.ts
index d6091f39b7..c7e2d23161 100644
--- a/src/platform/cloud/onboarding/CloudSubscriptionRedirectView.test.ts
+++ b/src/platform/cloud/onboarding/CloudSubscriptionRedirectView.test.ts
@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
 import { beforeEach, describe, expect, test, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
@@ -86,7 +86,7 @@ const createI18nInstance = () =>
 const mountView = async (query: Record<string, unknown>) => {
   mockQuery = query
 
-  const wrapper = mount(CloudSubscriptionRedirectView, {
+  const { container } = render(CloudSubscriptionRedirectView, {
     global: {
       plugins: [createI18nInstance()]
     }
@@ -94,7 +94,7 @@ const mountView = async (query: Record<string, unknown>) => {
 
   await flushPromises()
 
-  return { wrapper }
+  return { container }
 }
 
 describe('CloudSubscriptionRedirectView', () => {
@@ -118,13 +118,13 @@ describe('CloudSubscriptionRedirectView', () => {
   })
 
   test('shows subscription copy when subscriptionType is valid', async () => {
-    const { wrapper } = await mountView({ tier: 'creator' })
+    await mountView({ tier: 'creator' })
 
     // Should not redirect to home
     expect(mockRouterPush).not.toHaveBeenCalledWith('/')
 
     // Shows copy under logo
-    expect(wrapper.text()).toContain('Subscribe to Creator')
+    expect(screen.getByText('Subscribe to Creator')).toBeInTheDocument()
 
     // Triggers checkout flow
     expect(mockPerformSubscriptionCheckout).toHaveBeenCalledWith(
@@ -134,11 +134,9 @@ describe('CloudSubscriptionRedirectView', () => {
     )
 
     // Shows loading affordances
-    expect(wrapper.findComponent({ name: 'ProgressSpinner' }).exists()).toBe(
-      true
-    )
-    const skipLink = wrapper.get('a[href="/"]')
-    expect(skipLink.text()).toContain('Skip to the cloud app')
+    expect(
+      screen.getByRole('link', { name: /skip to the cloud app/i })
+    ).toBeInTheDocument()
   })
 
   test('opens billing portal when subscription is already active', async () => {
@@ -152,12 +150,12 @@ describe('CloudSubscriptionRedirectView', () => {
   })
 
   test('uses first value when subscriptionType is an array', async () => {
-    const { wrapper } = await mountView({
+    await mountView({
       tier: ['creator', 'pro']
     })
 
     expect(mockRouterPush).not.toHaveBeenCalledWith('/')
-    expect(wrapper.text()).toContain('Subscribe to Creator')
+    expect(screen.getByText('Subscribe to Creator')).toBeInTheDocument()
     expect(mockPerformSubscriptionCheckout).toHaveBeenCalledWith(
       'creator',
       'monthly',
diff --git a/src/platform/cloud/subscription/components/PricingTable.test.ts b/src/platform/cloud/subscription/components/PricingTable.test.ts
index 2338c2b9f9..0e5f037f37 100644
--- a/src/platform/cloud/subscription/components/PricingTable.test.ts
+++ b/src/platform/cloud/subscription/components/PricingTable.test.ts
@@ -1,5 +1,6 @@
 import { createTestingPinia } from '@pinia/testing'
-import { flushPromises, mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { computed, reactive, ref } from 'vue'
 import { createI18n } from 'vue-i18n'
@@ -7,6 +8,10 @@ import { createI18n } from 'vue-i18n'
 import PricingTable from '@/platform/cloud/subscription/components/PricingTable.vue'
 import Button from '@/components/ui/button/Button.vue'
 
+async function flushPromises() {
+  await new Promise((r) => setTimeout(r, 0))
+}
+
 const mockIsActiveSubscription = ref(false)
 const mockSubscriptionTier = ref<
   'STANDARD' | 'CREATOR' | 'PRO' | 'FOUNDERS_EDITION' | null
@@ -131,8 +136,11 @@ const i18n = createI18n({
   }
 })
 
-function createWrapper() {
-  return mount(PricingTable, {
+function renderComponent() {
+  return render(PricingTable, {
+    props: {
+      onChooseTeamWorkspace: onChooseTeamWorkspace
+    },
     global: {
       plugins: [createTestingPinia({ createSpy: vi.fn }), i18n],
       components: {
@@ -150,6 +158,8 @@ function createWrapper() {
   })
 }
 
+const onChooseTeamWorkspace = vi.fn()
+
 describe('PricingTable', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -169,15 +179,15 @@ describe('PricingTable', () => {
       mockIsActiveSubscription.value = true
       mockSubscriptionTier.value = 'STANDARD'
 
-      const wrapper = createWrapper()
+      renderComponent()
       await flushPromises()
 
-      const creatorButton = wrapper
-        .findAll('button')
-        .find((btn) => btn.text().includes('Creator'))
+      const creatorButton = screen
+        .getAllByRole('button')
+        .find((b) => b.textContent?.includes('Creator'))
 
       expect(creatorButton).toBeDefined()
-      await creatorButton?.trigger('click')
+      await userEvent.click(creatorButton!)
       await flushPromises()
 
       expect(mockTrackBeginCheckout).toHaveBeenCalledWith({
@@ -194,14 +204,14 @@ describe('PricingTable', () => {
       mockIsActiveSubscription.value = true
       mockSubscriptionTier.value = 'STANDARD'
 
-      const wrapper = createWrapper()
+      renderComponent()
       await flushPromises()
 
-      const proButton = wrapper
-        .findAll('button')
-        .find((btn) => btn.text().includes('Pro'))
+      const proButton = screen
+        .getAllByRole('button')
+        .find((b) => b.textContent?.includes('Pro'))
 
-      await proButton?.trigger('click')
+      await userEvent.click(proButton!)
       await flushPromises()
 
       expect(mockAccessBillingPortal).toHaveBeenCalledWith('pro-yearly')
@@ -212,16 +222,16 @@ describe('PricingTable', () => {
       mockSubscriptionTier.value = 'STANDARD'
       mockUserId.value = 'user-early'
 
-      const wrapper = createWrapper()
+      renderComponent()
       await flushPromises()
 
       mockUserId.value = 'user-late'
 
-      const creatorButton = wrapper
-        .findAll('button')
-        .find((btn) => btn.text().includes('Creator'))
+      const creatorButton = screen
+        .getAllByRole('button')
+        .find((b) => b.textContent?.includes('Creator'))
 
-      await creatorButton?.trigger('click')
+      await userEvent.click(creatorButton!)
       await flushPromises()
 
       expect(mockTrackBeginCheckout).toHaveBeenCalledTimes(1)
@@ -238,14 +248,14 @@ describe('PricingTable', () => {
       mockIsActiveSubscription.value = true
       mockSubscriptionTier.value = 'CREATOR'
 
-      const wrapper = createWrapper()
+      renderComponent()
       await flushPromises()
 
-      const currentPlanButton = wrapper
-        .findAll('button')
-        .find((btn) => btn.text().includes('Current Plan'))
+      const currentPlanButton = screen
+        .getAllByRole('button')
+        .find((b) => b.textContent?.includes('Current Plan'))
 
-      await currentPlanButton?.trigger('click')
+      await userEvent.click(currentPlanButton!)
       await flushPromises()
 
       expect(mockAccessBillingPortal).not.toHaveBeenCalled()
@@ -258,14 +268,14 @@ describe('PricingTable', () => {
         .spyOn(window, 'open')
         .mockImplementation(() => null)
 
-      const wrapper = createWrapper()
+      renderComponent()
       await flushPromises()
 
-      const subscribeButton = wrapper
-        .findAll('button')
-        .find((btn) => btn.text().includes('Subscribe'))
+      const subscribeButton = screen
+        .getAllByRole('button')
+        .find((b) => b.textContent?.includes('Subscribe'))
 
-      await subscribeButton?.trigger('click')
+      await userEvent.click(subscribeButton!)
       await flushPromises()
 
       expect(mockAccessBillingPortal).not.toHaveBeenCalled()
@@ -285,14 +295,14 @@ describe('PricingTable', () => {
       mockIsActiveSubscription.value = true
       mockSubscriptionTier.value = 'PRO'
 
-      const wrapper = createWrapper()
+      renderComponent()
       await flushPromises()
 
-      const standardButton = wrapper
-        .findAll('button')
-        .find((btn) => btn.text().includes('Standard'))
+      const standardButton = screen
+        .getAllByRole('button')
+        .find((b) => b.textContent?.includes('Standard'))
 
-      await standardButton?.trigger('click')
+      await userEvent.click(standardButton!)
       await flushPromises()
 
       expect(mockAccessBillingPortal).toHaveBeenCalledWith('standard-yearly')
@@ -301,17 +311,17 @@ describe('PricingTable', () => {
 
   describe('team workspace link', () => {
     it('should emit chooseTeamWorkspace when clicking "Need team workspace?" link', async () => {
-      const wrapper = createWrapper()
+      renderComponent()
       await flushPromises()
 
-      const teamLink = wrapper
-        .findAll('button')
-        .find((btn) => btn.text().includes('Need team workspace?'))
+      const teamLink = screen
+        .getAllByRole('button')
+        .find((b) => b.textContent?.includes('Need team workspace?'))
 
       expect(teamLink).toBeDefined()
-      await teamLink?.trigger('click')
+      await userEvent.click(teamLink!)
 
-      expect(wrapper.emitted('chooseTeamWorkspace')).toHaveLength(1)
+      expect(onChooseTeamWorkspace).toHaveBeenCalledOnce()
     })
   })
 })
diff --git a/src/platform/cloud/subscription/components/PricingTable.vue b/src/platform/cloud/subscription/components/PricingTable.vue
index 6d918e9a38..6436c17148 100644
--- a/src/platform/cloud/subscription/components/PricingTable.vue
+++ b/src/platform/cloud/subscription/components/PricingTable.vue
@@ -270,6 +270,7 @@ import {
   TIER_TO_KEY
 } from '@/platform/cloud/subscription/constants/tierPricing'
 import type {
+  SubscriptionTier,
   TierKey,
   TierPricing
 } from '@/platform/cloud/subscription/constants/tierPricing'
@@ -280,9 +281,7 @@ import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 import type { CheckoutAttributionMetadata } from '@/platform/telemetry/types'
 import { useAuthStore } from '@/stores/authStore'
-import type { components } from '@/types/comfyRegistryTypes'
 
-type SubscriptionTier = components['schemas']['SubscriptionTier']
 type CheckoutTierKey = Exclude<TierKey, 'free' | 'founder'>
 type CheckoutTier = CheckoutTierKey | `${CheckoutTierKey}-yearly`
 
diff --git a/src/platform/cloud/subscription/components/SubscriptionPanel.test.ts b/src/platform/cloud/subscription/components/SubscriptionPanel.test.ts
index af927ee7b7..e7b77c09d8 100644
--- a/src/platform/cloud/subscription/components/SubscriptionPanel.test.ts
+++ b/src/platform/cloud/subscription/components/SubscriptionPanel.test.ts
@@ -1,5 +1,6 @@
 import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { computed, ref } from 'vue'
 import { createI18n } from 'vue-i18n'
@@ -126,6 +127,7 @@ const i18n = createI18n({
         viewMoreDetailsPlans: 'View more details about plans & pricing',
         learnMore: 'Learn More',
         messageSupport: 'Message Support',
+        refreshCredits: 'Refresh credits',
         invoiceHistory: 'Invoice History',
         partnerNodesCredits: 'Partner nodes pricing',
         renewsDate: 'Renews {date}',
@@ -189,8 +191,8 @@ const i18n = createI18n({
   }
 })
 
-function createWrapper(overrides = {}) {
-  return mount(SubscriptionPanel, {
+function createComponent(overrides = {}) {
+  return render(SubscriptionPanel, {
     global: {
       plugins: [createTestingPinia({ createSpy: vi.fn }), i18n],
 
@@ -200,12 +202,12 @@ function createWrapper(overrides = {}) {
         SubscriptionBenefits: true,
         Button: {
           template:
-            '<button @click="$emit(\'click\')" :disabled="loading" :data-testid="label" :data-icon="icon"><slot/></button>',
-          props: ['variant', 'size'],
+            '<button v-bind="$attrs" @click="$emit(\'click\')" :disabled="loading" :data-testid="label" :data-icon="icon"><slot/></button>',
+          props: ['variant', 'size', 'loading', 'label', 'icon'],
           emits: ['click']
         },
         Skeleton: {
-          template: '<div class="skeleton"></div>'
+          template: '<div role="status" aria-label="Loading"></div>'
         }
       }
     },
@@ -213,6 +215,14 @@ function createWrapper(overrides = {}) {
   })
 }
 
+function findButtonByText(text: string) {
+  const button = screen
+    .getAllByRole('button')
+    .find((b) => b.textContent?.includes(text))
+  if (!button) throw new Error(`Button with text "${text}" not found`)
+  return button
+}
+
 describe('SubscriptionPanel', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -221,126 +231,136 @@ describe('SubscriptionPanel', () => {
     mockIsCancelled.value = false
     mockSubscriptionTier.value = 'CREATOR'
     mockIsYearlySubscription.value = false
+    mockCreditsData.isLoadingBalance = false
+    mockActionsData.isLoadingSupport = false
   })
 
   describe('subscription state functionality', () => {
     it('shows correct UI for active subscription', () => {
       mockIsActiveSubscription.value = true
-      const wrapper = createWrapper()
-      expect(wrapper.text()).toContain('Manage Subscription')
-      expect(wrapper.text()).toContain('Add Credits')
+      const { container } = createComponent()
+      expect(container.textContent).toContain('Manage Subscription')
+      expect(container.textContent).toContain('Add Credits')
     })
 
     it('shows correct UI for inactive subscription', () => {
       mockIsActiveSubscription.value = false
-      const wrapper = createWrapper()
-      expect(wrapper.findComponent({ name: 'SubscribeButton' }).exists()).toBe(
-        true
-      )
-      expect(wrapper.text()).not.toContain('Manage Subscription')
-      expect(wrapper.text()).not.toContain('Add Credits')
+      const { container } = createComponent()
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      expect(container.querySelector('subscribe-button-stub')).not.toBeNull()
+      expect(container.textContent).not.toContain('Manage Subscription')
+      expect(container.textContent).not.toContain('Add Credits')
     })
 
     it('shows renewal date for active non-cancelled subscription', () => {
       mockIsActiveSubscription.value = true
       mockIsCancelled.value = false
-      const wrapper = createWrapper()
-      expect(wrapper.text()).toContain('Renews 2024-12-31')
+      const { container } = createComponent()
+      expect(container.textContent).toContain('Renews 2024-12-31')
     })
 
     it('shows expiry date for cancelled subscription', () => {
       mockIsActiveSubscription.value = true
       mockIsCancelled.value = true
-      const wrapper = createWrapper()
-      expect(wrapper.text()).toContain('Expires 2024-12-31')
+      const { container } = createComponent()
+      expect(container.textContent).toContain('Expires 2024-12-31')
     })
 
     it('displays FOUNDERS_EDITION tier correctly', () => {
       mockSubscriptionTier.value = 'FOUNDERS_EDITION'
-      const wrapper = createWrapper()
-      expect(wrapper.text()).toContain("Founder's Edition")
-      expect(wrapper.text()).toContain('5,460')
+      const { container } = createComponent()
+      expect(container.textContent).toContain("Founder's Edition")
+      expect(container.textContent).toContain('5,460')
     })
 
     it('displays CREATOR tier correctly', () => {
       mockSubscriptionTier.value = 'CREATOR'
-      const wrapper = createWrapper()
-      expect(wrapper.text()).toContain('Creator')
-      expect(wrapper.text()).toContain('7,400')
+      const { container } = createComponent()
+      expect(container.textContent).toContain('Creator')
+      expect(container.textContent).toContain('7,400')
     })
   })
 
   describe('credit display functionality', () => {
     it('displays dynamic credit values correctly', () => {
-      const wrapper = createWrapper()
-      expect(wrapper.text()).toContain('10.00 Credits')
-      expect(wrapper.text()).toContain('5.00 Credits')
+      const { container } = createComponent()
+      expect(container.textContent).toContain('10.00 Credits')
+      expect(container.textContent).toContain('5.00 Credits')
     })
 
     it('shows loading skeleton when fetching balance', () => {
       mockCreditsData.isLoadingBalance = true
-      const wrapper = createWrapper()
-      expect(wrapper.findAll('.skeleton').length).toBeGreaterThan(0)
+      createComponent()
+      expect(
+        screen.getAllByRole('status', { name: 'Loading' }).length
+      ).toBeGreaterThan(0)
     })
 
     it('hides skeleton when balance loaded', () => {
       mockCreditsData.isLoadingBalance = false
-      const wrapper = createWrapper()
-      expect(wrapper.findAll('.skeleton').length).toBe(0)
+      createComponent()
+      expect(screen.queryAllByRole('status', { name: 'Loading' })).toHaveLength(
+        0
+      )
     })
 
     it('renders refill date with literal slashes', () => {
       vi.useFakeTimers()
       vi.stubEnv('TZ', 'UTC')
-
-      mockIsActiveSubscription.value = true
-      const wrapper = createWrapper()
-      expect(wrapper.text()).toContain('Included (Refills 12/31/24)')
-      expect(wrapper.text()).not.toContain('&#x2F;')
-
-      vi.useRealTimers()
-      vi.unstubAllEnvs()
+      try {
+        mockIsActiveSubscription.value = true
+        const { container } = createComponent()
+        expect(container.textContent).toMatch(
+          /Included \(Refills \d{2}\/\d{2}\/\d{2}\)/
+        )
+        expect(container.textContent).not.toContain('&#x2F;')
+      } finally {
+        vi.useRealTimers()
+        vi.unstubAllEnvs()
+      }
     })
   })
 
-  // TODO: Re-enable when migrating to VTL so we can find by user visible content.
-  describe.skip('action buttons', () => {
+  describe('action buttons', () => {
     it('should call handleLearnMoreClick when learn more is clicked', async () => {
-      const wrapper = createWrapper()
-      const learnMoreButton = wrapper.find('[data-testid="Learn More"]')
-      await learnMoreButton.trigger('click')
+      createComponent()
+      const learnMoreButton = findButtonByText('Learn More')
+      await userEvent.click(learnMoreButton)
       expect(mockActionsData.handleLearnMoreClick).toHaveBeenCalledOnce()
     })
 
     it('should call handleMessageSupport when message support is clicked', async () => {
-      const wrapper = createWrapper()
-      const supportButton = wrapper.find('[data-testid="Message Support"]')
-      await supportButton.trigger('click')
+      createComponent()
+      const supportButton = findButtonByText('Message Support')
+      await userEvent.click(supportButton)
       expect(mockActionsData.handleMessageSupport).toHaveBeenCalledOnce()
     })
 
     it('should call handleRefresh when refresh button is clicked', async () => {
-      const wrapper = createWrapper()
-      // Find the refresh button by icon
-      const refreshButton = wrapper.find('[data-icon="pi pi-sync"]')
-      await refreshButton.trigger('click')
+      createComponent()
+      const refreshButton = screen.getByRole('button', {
+        name: 'Refresh credits'
+      })
+      await userEvent.click(refreshButton)
       expect(mockActionsData.handleRefresh).toHaveBeenCalledOnce()
     })
   })
 
-  describe.skip('loading states', () => {
+  describe('loading states', () => {
     it('should show loading state on support button when loading', () => {
       mockActionsData.isLoadingSupport = true
-      const wrapper = createWrapper()
-      const supportButton = wrapper.find('[data-testid="Message Support"]')
-      expect(supportButton.attributes('disabled')).toBeDefined()
+      createComponent()
+      const supportButton = findButtonByText('Message Support')
+      expect(supportButton).toBeDisabled()
     })
 
     it('should show loading state on refresh button when loading balance', () => {
       mockCreditsData.isLoadingBalance = true
-      const wrapper = createWrapper()
-      const refreshButton = wrapper.find('[data-icon="pi pi-sync"]')
-      expect(refreshButton.attributes('disabled')).toBeDefined()
+      createComponent()
+      const refreshButton = screen.getByRole('button', {
+        name: 'Refresh credits'
+      })
+      expect(refreshButton).toBeDisabled()
     })
   })
 })
diff --git a/src/platform/cloud/subscription/components/SubscriptionPanelContentLegacy.vue b/src/platform/cloud/subscription/components/SubscriptionPanelContentLegacy.vue
index acc7cecf1b..d735ef3eb7 100644
--- a/src/platform/cloud/subscription/components/SubscriptionPanelContentLegacy.vue
+++ b/src/platform/cloud/subscription/components/SubscriptionPanelContentLegacy.vue
@@ -80,6 +80,7 @@
                 size="icon-sm"
                 class="absolute top-4 right-4"
                 :loading="isLoadingBalance"
+                :aria-label="$t('subscription.refreshCredits')"
                 @click="handleRefresh"
               >
                 <i class="pi pi-sync text-sm text-text-secondary" />
diff --git a/src/platform/cloud/subscription/constants/tierPricing.ts b/src/platform/cloud/subscription/constants/tierPricing.ts
index 8d8f4c77a6..f9ab9ec0c4 100644
--- a/src/platform/cloud/subscription/constants/tierPricing.ts
+++ b/src/platform/cloud/subscription/constants/tierPricing.ts
@@ -1,7 +1,7 @@
 import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
 import type { components } from '@/types/comfyRegistryTypes'
 
-type SubscriptionTier = components['schemas']['SubscriptionTier']
+export type SubscriptionTier = components['schemas']['SubscriptionTier']
 
 export type TierKey = 'free' | 'standard' | 'creator' | 'pro' | 'founder'
 
diff --git a/src/platform/distribution/cloudPreviewUtil.ts b/src/platform/distribution/cloudPreviewUtil.ts
index 28a32858cc..0421eea196 100644
--- a/src/platform/distribution/cloudPreviewUtil.ts
+++ b/src/platform/distribution/cloudPreviewUtil.ts
@@ -14,6 +14,11 @@ export function appendCloudResParam(
   filename?: string
 ): void {
   if (!isCloud) return
-  if (filename && getMediaTypeFromFilename(filename) !== 'image') return
+  if (
+    filename &&
+    (getMediaTypeFromFilename(filename) !== 'image' ||
+      filename.toLowerCase().endsWith('.svg'))
+  )
+    return
   params.set('res', '512')
 }
diff --git a/src/platform/missingMedia/components/MissingMediaCard.vue b/src/platform/missingMedia/components/MissingMediaCard.vue
new file mode 100644
index 0000000000..1ec2a86319
--- /dev/null
+++ b/src/platform/missingMedia/components/MissingMediaCard.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="px-4 pb-2">
+    <div
+      v-for="group in missingMediaGroups"
+      :key="group.mediaType"
+      class="flex w-full flex-col border-t border-interface-stroke py-2 first:border-t-0 first:pt-0"
+    >
+      <!-- Media type header -->
+      <div class="flex h-8 w-full items-center">
+        <p
+          class="min-w-0 flex-1 truncate text-sm font-medium text-destructive-background-hover"
+        >
+          <i
+            aria-hidden="true"
+            :class="MEDIA_TYPE_ICONS[group.mediaType]"
+            class="mr-1 size-3.5 align-text-bottom"
+          />
+          {{ t(`rightSidePanel.missingMedia.${group.mediaType}`) }}
+          ({{ group.items.length }})
+        </p>
+      </div>
+
+      <!-- Media file rows -->
+      <div class="flex flex-col gap-1 overflow-hidden pl-2">
+        <MissingMediaRow
+          v-for="item in group.items"
+          :key="item.name"
+          :item="item"
+          :show-node-id-badge="showNodeIdBadge"
+          @locate-node="emit('locateNode', $event)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import type {
+  MissingMediaGroup,
+  MediaType
+} from '@/platform/missingMedia/types'
+import MissingMediaRow from '@/platform/missingMedia/components/MissingMediaRow.vue'
+
+const { missingMediaGroups } = defineProps<{
+  missingMediaGroups: MissingMediaGroup[]
+  showNodeIdBadge: boolean
+}>()
+
+const emit = defineEmits<{
+  locateNode: [nodeId: string]
+}>()
+
+const { t } = useI18n()
+
+const MEDIA_TYPE_ICONS: Record<MediaType, string> = {
+  image: 'icon-[lucide--image]',
+  video: 'icon-[lucide--video]',
+  audio: 'icon-[lucide--music]'
+}
+</script>
diff --git a/src/platform/missingMedia/components/MissingMediaLibrarySelect.vue b/src/platform/missingMedia/components/MissingMediaLibrarySelect.vue
new file mode 100644
index 0000000000..d1959c9c86
--- /dev/null
+++ b/src/platform/missingMedia/components/MissingMediaLibrarySelect.vue
@@ -0,0 +1,147 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <div v-if="showDivider" class="flex items-center justify-center py-0.5">
+      <span class="text-xs font-bold text-muted-foreground">
+        {{ t('rightSidePanel.missingMedia.or') }}
+      </span>
+    </div>
+
+    <Select
+      :model-value="modelValue"
+      :disabled="options.length === 0"
+      @update:model-value="handleSelect"
+    >
+      <SelectTrigger
+        size="md"
+        class="border-transparent bg-secondary-background text-xs hover:border-interface-stroke"
+      >
+        <SelectValue
+          :placeholder="t('rightSidePanel.missingMedia.useFromLibrary')"
+        />
+      </SelectTrigger>
+
+      <SelectContent class="max-h-72">
+        <template v-if="options.length > SEARCH_THRESHOLD" #prepend>
+          <div class="px-1 pb-1.5">
+            <div
+              class="flex items-center gap-1.5 rounded-md border border-border-default px-2"
+            >
+              <i
+                aria-hidden="true"
+                class="icon-[lucide--search] size-3.5 shrink-0 text-muted-foreground"
+              />
+              <input
+                v-model="filterQuery"
+                type="text"
+                :aria-label="t('g.searchPlaceholder', { subject: '' })"
+                class="h-7 w-full border-none bg-transparent text-xs outline-none placeholder:text-muted-foreground"
+                :placeholder="t('g.searchPlaceholder', { subject: '' })"
+                @keydown.stop
+              />
+            </div>
+          </div>
+        </template>
+
+        <SelectItem
+          v-for="option in filteredOptions"
+          :key="option.value"
+          :value="option.value"
+          class="text-xs"
+        >
+          <div class="flex items-center gap-2">
+            <img
+              v-if="mediaType === 'image'"
+              :src="getPreviewUrl(option.value)"
+              alt=""
+              class="size-8 shrink-0 rounded-sm object-cover"
+              loading="lazy"
+            />
+            <video
+              v-else-if="mediaType === 'video'"
+              aria-hidden="true"
+              :src="getPreviewUrl(option.value)"
+              class="size-8 shrink-0 rounded-sm object-cover"
+              preload="metadata"
+              muted
+            />
+            <i
+              v-else
+              aria-hidden="true"
+              class="icon-[lucide--music] size-5 shrink-0 text-muted-foreground"
+            />
+            <span class="min-w-0 truncate">{{ option.name }}</span>
+          </div>
+        </SelectItem>
+        <div
+          v-if="filteredOptions.length === 0"
+          role="status"
+          class="px-3 py-2 text-xs text-muted-foreground"
+        >
+          {{ t('g.noResultsFound') }}
+        </div>
+      </SelectContent>
+    </Select>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useFuse } from '@vueuse/integrations/useFuse'
+import Select from '@/components/ui/select/Select.vue'
+import SelectContent from '@/components/ui/select/SelectContent.vue'
+import SelectTrigger from '@/components/ui/select/SelectTrigger.vue'
+import SelectValue from '@/components/ui/select/SelectValue.vue'
+import SelectItem from '@/components/ui/select/SelectItem.vue'
+import type { MediaType } from '@/platform/missingMedia/types'
+import { api } from '@/scripts/api'
+
+const {
+  options,
+  showDivider = false,
+  mediaType
+} = defineProps<{
+  modelValue: string | undefined
+  options: { name: string; value: string }[]
+  showDivider?: boolean
+  mediaType: MediaType
+}>()
+
+const emit = defineEmits<{
+  select: [value: string]
+}>()
+
+const { t } = useI18n()
+
+const SEARCH_THRESHOLD = 4
+const filterQuery = ref('')
+
+watch(
+  () => options.length,
+  (len) => {
+    if (len <= SEARCH_THRESHOLD) filterQuery.value = ''
+  }
+)
+
+const { results: fuseResults } = useFuse(filterQuery, () => options, {
+  fuseOptions: {
+    keys: ['name'],
+    threshold: 0.4,
+    ignoreLocation: true
+  },
+  matchAllWhenSearchEmpty: true
+})
+
+const filteredOptions = computed(() => fuseResults.value.map((r) => r.item))
+
+function getPreviewUrl(filename: string): string {
+  return api.apiURL(`/view?filename=${encodeURIComponent(filename)}&type=input`)
+}
+
+function handleSelect(value: unknown) {
+  if (typeof value === 'string') {
+    filterQuery.value = ''
+    emit('select', value)
+  }
+}
+</script>
diff --git a/src/platform/missingMedia/components/MissingMediaRow.vue b/src/platform/missingMedia/components/MissingMediaRow.vue
new file mode 100644
index 0000000000..d9e2800cca
--- /dev/null
+++ b/src/platform/missingMedia/components/MissingMediaRow.vue
@@ -0,0 +1,318 @@
+<template>
+  <div data-testid="missing-media-row" class="flex w-full flex-col pb-3">
+    <!-- File header -->
+    <div class="flex h-8 w-full items-center gap-2">
+      <i
+        aria-hidden="true"
+        class="text-foreground icon-[lucide--file] size-4 shrink-0"
+      />
+
+      <!-- Single node: show node display name instead of filename -->
+      <template v-if="isSingleNode">
+        <span
+          v-if="showNodeIdBadge"
+          class="shrink-0 rounded-md bg-secondary-background-selected px-2 py-0.5 font-mono text-xs font-bold text-muted-foreground"
+        >
+          #{{ item.referencingNodes[0].nodeId }}
+        </span>
+        <p
+          class="text-foreground min-w-0 flex-1 truncate text-sm font-medium"
+          :title="singleNodeLabel"
+        >
+          {{ singleNodeLabel }}
+        </p>
+      </template>
+
+      <!-- Multiple nodes: show filename with count -->
+      <p
+        v-else
+        class="text-foreground min-w-0 flex-1 truncate text-sm font-medium"
+        :title="displayName"
+      >
+        {{ displayName }}
+        ({{ item.referencingNodes.length }})
+      </p>
+
+      <!-- Confirm button (visible when pending selection exists) -->
+      <Button
+        data-testid="missing-media-confirm-button"
+        variant="textonly"
+        size="icon-sm"
+        :aria-label="t('rightSidePanel.missingMedia.confirmSelection')"
+        :disabled="!isPending"
+        :class="
+          cn(
+            'size-8 shrink-0 rounded-lg transition-colors',
+            isPending ? 'bg-primary/10 hover:bg-primary/15' : 'opacity-20'
+          )
+        "
+        @click="confirmSelection(item.name)"
+      >
+        <i
+          aria-hidden="true"
+          class="icon-[lucide--check] size-4"
+          :class="isPending ? 'text-primary' : 'text-foreground'"
+        />
+      </Button>
+
+      <!-- Locate button (single node only) -->
+      <Button
+        v-if="isSingleNode"
+        data-testid="missing-media-locate-button"
+        variant="textonly"
+        size="icon-sm"
+        :aria-label="t('rightSidePanel.missingMedia.locateNode')"
+        class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
+        @click="emit('locateNode', String(item.referencingNodes[0].nodeId))"
+      >
+        <i aria-hidden="true" class="icon-[lucide--locate] size-3" />
+      </Button>
+
+      <!-- Expand button (multiple nodes only) -->
+      <Button
+        v-if="!isSingleNode"
+        variant="textonly"
+        size="icon-sm"
+        :aria-label="
+          expanded
+            ? t('rightSidePanel.missingMedia.collapseNodes')
+            : t('rightSidePanel.missingMedia.expandNodes')
+        "
+        :aria-expanded="expanded"
+        :class="
+          cn(
+            'size-8 shrink-0 transition-transform duration-200 hover:bg-transparent',
+            expanded && 'rotate-180'
+          )
+        "
+        @click="toggleExpand(item.name)"
+      >
+        <i
+          aria-hidden="true"
+          class="icon-[lucide--chevron-down] size-4 text-muted-foreground"
+        />
+      </Button>
+    </div>
+
+    <!-- Referencing nodes (expandable) -->
+    <TransitionCollapse>
+      <div
+        v-if="expanded && item.referencingNodes.length > 1"
+        class="mb-1 flex flex-col gap-0.5 overflow-hidden pl-6"
+      >
+        <div
+          v-for="nodeRef in item.referencingNodes"
+          :key="`${String(nodeRef.nodeId)}::${nodeRef.widgetName}`"
+          class="flex h-7 items-center"
+        >
+          <span
+            v-if="showNodeIdBadge"
+            class="mr-1 shrink-0 rounded-md bg-secondary-background-selected px-2 py-0.5 font-mono text-xs font-bold text-muted-foreground"
+          >
+            #{{ nodeRef.nodeId }}
+          </span>
+          <p class="min-w-0 flex-1 truncate text-xs text-muted-foreground">
+            {{ getNodeDisplayLabel(String(nodeRef.nodeId), item.name) }}
+          </p>
+          <Button
+            variant="textonly"
+            size="icon-sm"
+            :aria-label="t('rightSidePanel.missingMedia.locateNode')"
+            class="mr-1 size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
+            @click="emit('locateNode', String(nodeRef.nodeId))"
+          >
+            <i aria-hidden="true" class="icon-[lucide--locate] size-3" />
+          </Button>
+        </div>
+      </div>
+    </TransitionCollapse>
+
+    <!-- Status card (uploading, uploaded, or library select) -->
+    <TransitionCollapse>
+      <div
+        v-if="isPending || isUploading"
+        data-testid="missing-media-status-card"
+        role="status"
+        aria-live="polite"
+        class="bg-foreground/5 relative mt-1 overflow-hidden rounded-lg border border-interface-stroke p-2"
+      >
+        <div class="relative z-10 flex items-center gap-2">
+          <div class="flex size-8 shrink-0 items-center justify-center">
+            <i
+              v-if="currentUpload?.status === 'uploading'"
+              aria-hidden="true"
+              class="icon-[lucide--loader-circle] size-5 animate-spin text-muted-foreground"
+            />
+            <i
+              v-else
+              aria-hidden="true"
+              class="icon-[lucide--file-check] size-5 text-muted-foreground"
+            />
+          </div>
+
+          <div class="flex min-w-0 flex-1 flex-col justify-center">
+            <span class="text-foreground truncate text-xs/tight font-medium">
+              {{ pendingDisplayName }}
+            </span>
+            <span class="mt-0.5 text-xs/tight text-muted-foreground">
+              <template v-if="currentUpload?.status === 'uploading'">
+                {{ t('rightSidePanel.missingMedia.uploading') }}
+              </template>
+              <template v-else-if="currentUpload?.status === 'uploaded'">
+                {{ t('rightSidePanel.missingMedia.uploaded') }}
+              </template>
+              <template v-else>
+                {{ t('rightSidePanel.missingMedia.selectedFromLibrary') }}
+              </template>
+            </span>
+          </div>
+
+          <Button
+            data-testid="missing-media-cancel-button"
+            variant="textonly"
+            size="icon-sm"
+            :aria-label="t('rightSidePanel.missingMedia.cancelSelection')"
+            class="relative z-10 size-6 shrink-0 text-muted-foreground hover:text-base-foreground"
+            @click="cancelSelection(item.name)"
+          >
+            <i aria-hidden="true" class="icon-[lucide--circle-x] size-4" />
+          </Button>
+        </div>
+      </div>
+    </TransitionCollapse>
+
+    <!-- Upload + Library (when no pending selection) -->
+    <TransitionCollapse>
+      <div v-if="!isPending && !isUploading" class="mt-1 flex flex-col gap-1">
+        <!-- Upload dropzone -->
+        <div ref="dropZoneRef" class="flex w-full flex-col py-1">
+          <button
+            data-testid="missing-media-upload-dropzone"
+            type="button"
+            :class="
+              cn(
+                'flex w-full cursor-pointer items-center justify-center rounded-lg border border-dashed border-component-node-border bg-transparent px-3 py-2 text-xs text-muted-foreground transition-colors hover:border-base-foreground hover:text-base-foreground',
+                isOverDropZone && 'border-primary text-primary'
+              )
+            "
+            @click="openFilePicker()"
+          >
+            {{
+              t('rightSidePanel.missingMedia.uploadFile', {
+                type: extensionHint
+              })
+            }}
+          </button>
+        </div>
+
+        <!-- OR separator + Use from Library -->
+        <MissingMediaLibrarySelect
+          data-testid="missing-media-library-select"
+          :model-value="undefined"
+          :options="libraryOptions"
+          :show-divider="true"
+          :media-type="item.mediaType"
+          @select="handleLibrarySelect(item.name, $event)"
+        />
+      </div>
+    </TransitionCollapse>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useDropZone, useFileDialog } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
+import { useI18n } from 'vue-i18n'
+import { cn } from '@/utils/tailwindUtil'
+import Button from '@/components/ui/button/Button.vue'
+import TransitionCollapse from '@/components/rightSidePanel/layout/TransitionCollapse.vue'
+import MissingMediaLibrarySelect from '@/platform/missingMedia/components/MissingMediaLibrarySelect.vue'
+import type { MissingMediaViewModel } from '@/platform/missingMedia/types'
+import { useMissingMediaStore } from '@/platform/missingMedia/missingMediaStore'
+import {
+  useMissingMediaInteractions,
+  getNodeDisplayLabel,
+  getMediaDisplayName
+} from '@/platform/missingMedia/composables/useMissingMediaInteractions'
+
+const { item, showNodeIdBadge } = defineProps<{
+  item: MissingMediaViewModel
+  showNodeIdBadge: boolean
+}>()
+
+const emit = defineEmits<{
+  locateNode: [nodeId: string]
+}>()
+
+const { t } = useI18n()
+
+const store = useMissingMediaStore()
+const { uploadState, pendingSelection } = storeToRefs(store)
+
+const {
+  isExpanded,
+  toggleExpand,
+  getAcceptType,
+  getExtensionHint,
+  getLibraryOptions,
+  handleLibrarySelect,
+  handleUpload,
+  confirmSelection,
+  cancelSelection,
+  hasPendingSelection
+} = useMissingMediaInteractions()
+
+const displayName = getMediaDisplayName(item.name)
+const isSingleNode = item.referencingNodes.length === 1
+const singleNodeLabel = isSingleNode
+  ? getNodeDisplayLabel(String(item.referencingNodes[0].nodeId), item.name)
+  : ''
+const acceptType = getAcceptType(item.mediaType)
+const extensionHint = getExtensionHint(item.mediaType)
+
+const expanded = computed(() => isExpanded(item.name))
+const matchingCandidate = computed(() => {
+  const candidates = store.missingMediaCandidates
+  if (!candidates?.length) return null
+  return candidates.find((c) => c.name === item.name) ?? null
+})
+const libraryOptions = computed(() => {
+  const candidate = matchingCandidate.value
+  if (!candidate) return []
+  return getLibraryOptions(candidate)
+})
+
+const isPending = computed(() => hasPendingSelection(item.name))
+const isUploading = computed(
+  () => uploadState.value[item.name]?.status === 'uploading'
+)
+const currentUpload = computed(() => uploadState.value[item.name])
+const pendingDisplayName = computed(() => {
+  if (currentUpload.value) return currentUpload.value.fileName
+  const pending = pendingSelection.value[item.name]
+  return pending ? getMediaDisplayName(pending) : ''
+})
+
+const dropZoneRef = ref<HTMLElement | null>(null)
+const { isOverDropZone } = useDropZone(dropZoneRef, {
+  onDrop: (_files, event) => {
+    event?.stopPropagation()
+    const file = _files?.[0]
+    if (file) {
+      handleUpload(file, item.name, item.mediaType)
+    }
+  }
+})
+
+const { open: openFilePicker, onChange: onFileSelected } = useFileDialog({
+  accept: acceptType,
+  multiple: false
+})
+onFileSelected((files) => {
+  const file = files?.[0]
+  if (file) {
+    handleUpload(file, item.name, item.mediaType)
+  }
+})
+</script>
diff --git a/src/platform/missingMedia/composables/useMissingMediaInteractions.ts b/src/platform/missingMedia/composables/useMissingMediaInteractions.ts
new file mode 100644
index 0000000000..9382cd4f85
--- /dev/null
+++ b/src/platform/missingMedia/composables/useMissingMediaInteractions.ts
@@ -0,0 +1,224 @@
+import { app } from '@/scripts/app'
+import { api } from '@/scripts/api'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import { useAssetsStore } from '@/stores/assetsStore'
+import { useMissingMediaStore } from '@/platform/missingMedia/missingMediaStore'
+import type {
+  MissingMediaCandidate,
+  MediaType
+} from '@/platform/missingMedia/types'
+import { getNodeByExecutionId } from '@/utils/graphTraversalUtil'
+import { isCloud } from '@/platform/distribution/types'
+import { addToComboValues, resolveComboValues } from '@/utils/litegraphUtil'
+import { resolveNodeDisplayName } from '@/utils/nodeTitleUtil'
+import { st } from '@/i18n'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { IComboWidget } from '@/lib/litegraph/src/types/widgets'
+import {
+  ACCEPTED_IMAGE_TYPES,
+  ACCEPTED_VIDEO_TYPES
+} from '@/utils/mediaUploadUtil'
+
+const MEDIA_ACCEPT_MAP: Record<MediaType, string> = {
+  image: ACCEPTED_IMAGE_TYPES,
+  video: ACCEPTED_VIDEO_TYPES,
+  audio: 'audio/*'
+}
+
+function getMediaComboWidget(
+  candidate: MissingMediaCandidate
+): { node: LGraphNode; widget: IComboWidget } | null {
+  const graph = app.rootGraph
+  if (!graph || candidate.nodeId == null) return null
+
+  const node = getNodeByExecutionId(graph, String(candidate.nodeId))
+  if (!node) return null
+
+  const widget = node.widgets?.find(
+    (w) => w.name === candidate.widgetName && w.type === 'combo'
+  ) as IComboWidget | undefined
+  if (!widget) return null
+
+  return { node, widget }
+}
+
+function resolveLibraryOptions(
+  candidate: MissingMediaCandidate
+): { name: string; value: string }[] {
+  const result = getMediaComboWidget(candidate)
+  if (!result) return []
+
+  return resolveComboValues(result.widget)
+    .filter((v) => v !== candidate.name)
+    .map((v) => ({ name: getMediaDisplayName(v), value: v }))
+}
+
+function applyValueToNodes(
+  candidates: MissingMediaCandidate[],
+  name: string,
+  newValue: string
+) {
+  const matching = candidates.filter((c) => c.name === name)
+  for (const c of matching) {
+    const result = getMediaComboWidget(c)
+    if (!result) continue
+
+    addToComboValues(result.widget, newValue)
+    result.widget.value = newValue
+    result.widget.callback?.(newValue)
+    result.node.graph?.setDirtyCanvas(true, true)
+  }
+}
+
+export function getNodeDisplayLabel(
+  nodeId: string | number,
+  fallback: string
+): string {
+  const graph = app.rootGraph
+  if (!graph) return fallback
+  const node = getNodeByExecutionId(graph, String(nodeId))
+  return resolveNodeDisplayName(node, {
+    emptyLabel: fallback,
+    untitledLabel: fallback,
+    st
+  })
+}
+
+/**
+ * Resolve display name for a media file.
+ * Cloud widgets store asset hashes as values; this resolves them to
+ * human-readable names via assetsStore.getInputName().
+ */
+export function getMediaDisplayName(name: string): string {
+  if (!isCloud) return name
+  return useAssetsStore().getInputName(name)
+}
+
+export function useMissingMediaInteractions() {
+  const store = useMissingMediaStore()
+  const assetsStore = useAssetsStore()
+
+  function isExpanded(key: string): boolean {
+    return store.expandState[key] ?? false
+  }
+
+  function toggleExpand(key: string) {
+    store.expandState[key] = !isExpanded(key)
+  }
+
+  function getAcceptType(mediaType: MediaType): string {
+    return MEDIA_ACCEPT_MAP[mediaType]
+  }
+
+  function getExtensionHint(mediaType: MediaType): string {
+    if (mediaType === 'audio') return 'audio'
+    const exts = MEDIA_ACCEPT_MAP[mediaType]
+      .split(',')
+      .map((mime) => mime.split('/')[1])
+      .join(', ')
+    return `${exts}, ...`
+  }
+
+  function getLibraryOptions(
+    candidate: MissingMediaCandidate
+  ): { name: string; value: string }[] {
+    return resolveLibraryOptions(candidate)
+  }
+
+  /** Step 1: Store selection from library (does not apply yet). */
+  function handleLibrarySelect(name: string, value: string) {
+    store.pendingSelection[name] = value
+  }
+
+  /** Step 1: Upload file and store result as pending (does not apply yet). */
+  async function handleUpload(file: File, name: string, mediaType: MediaType) {
+    if (!file.type || !file.type.startsWith(`${mediaType}/`)) {
+      useToastStore().addAlert(
+        st(
+          'toastMessages.unsupportedFileType',
+          'Unsupported file type. Please select a valid file.'
+        )
+      )
+      return
+    }
+
+    store.uploadState[name] = { fileName: file.name, status: 'uploading' }
+
+    try {
+      const body = new FormData()
+      body.append('image', file)
+
+      const resp = await api.fetchApi('/upload/image', {
+        method: 'POST',
+        body
+      })
+
+      if (resp.status !== 200) {
+        useToastStore().addAlert(
+          st(
+            'toastMessages.uploadFailed',
+            'Failed to upload file. Please try again.'
+          )
+        )
+        delete store.uploadState[name]
+        return
+      }
+
+      const data = await resp.json()
+      const uploadedPath: string = data.subfolder
+        ? `${data.subfolder}/${data.name}`
+        : data.name
+
+      store.uploadState[name] = { fileName: file.name, status: 'uploaded' }
+      store.pendingSelection[name] = uploadedPath
+
+      // Refresh assets store (non-critical — upload already succeeded)
+      try {
+        await assetsStore.updateInputs()
+      } catch {
+        // Asset list refresh failed but upload is valid; selection can proceed
+      }
+    } catch {
+      useToastStore().addAlert(
+        st(
+          'toastMessages.uploadFailed',
+          'Failed to upload file. Please try again.'
+        )
+      )
+      delete store.uploadState[name]
+    }
+  }
+
+  /** Step 2: Apply pending selection to widgets and remove from missing list. */
+  function confirmSelection(name: string) {
+    const value = store.pendingSelection[name]
+    if (!value || !store.missingMediaCandidates) return
+
+    applyValueToNodes(store.missingMediaCandidates, name, value)
+    store.removeMissingMediaByName(name)
+    delete store.pendingSelection[name]
+    delete store.uploadState[name]
+  }
+
+  function cancelSelection(name: string) {
+    delete store.pendingSelection[name]
+    delete store.uploadState[name]
+  }
+
+  function hasPendingSelection(name: string): boolean {
+    return name in store.pendingSelection
+  }
+
+  return {
+    isExpanded,
+    toggleExpand,
+    getAcceptType,
+    getExtensionHint,
+    getLibraryOptions,
+    handleLibrarySelect,
+    handleUpload,
+    confirmSelection,
+    cancelSelection,
+    hasPendingSelection
+  }
+}
diff --git a/src/platform/missingMedia/missingMediaScan.test.ts b/src/platform/missingMedia/missingMediaScan.test.ts
new file mode 100644
index 0000000000..867bb4d3f7
--- /dev/null
+++ b/src/platform/missingMedia/missingMediaScan.test.ts
@@ -0,0 +1,338 @@
+import { fromAny } from '@total-typescript/shoehorn'
+import { describe, expect, it, vi } from 'vitest'
+
+import type { LGraph } from '@/lib/litegraph/src/LGraph'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { IComboWidget } from '@/lib/litegraph/src/types/widgets'
+import {
+  scanAllMediaCandidates,
+  scanNodeMediaCandidates,
+  verifyCloudMediaCandidates,
+  groupCandidatesByName,
+  groupCandidatesByMediaType
+} from './missingMediaScan'
+import type { MissingMediaCandidate } from './types'
+
+vi.mock('@/utils/graphTraversalUtil', () => ({
+  collectAllNodes: (graph: { _testNodes: LGraphNode[] }) => graph._testNodes,
+  getExecutionIdByNode: (
+    _graph: unknown,
+    node: { _testExecutionId?: string; id: number }
+  ) => node._testExecutionId ?? String(node.id)
+}))
+
+function makeCandidate(
+  nodeId: string,
+  name: string,
+  overrides: Partial<MissingMediaCandidate> = {}
+): MissingMediaCandidate {
+  return {
+    nodeId,
+    nodeType: 'LoadImage',
+    widgetName: 'image',
+    mediaType: 'image',
+    name,
+    isMissing: true,
+    ...overrides
+  }
+}
+
+function makeMediaCombo(
+  name: string,
+  value: string,
+  options: string[] = []
+): IComboWidget {
+  return fromAny<IComboWidget, unknown>({
+    type: 'combo',
+    name,
+    value,
+    options: { values: options }
+  })
+}
+
+function makeMediaNode(
+  id: number,
+  type: string,
+  widgets: IComboWidget[],
+  mode: number = 0,
+  executionId?: string
+): LGraphNode {
+  return fromAny<LGraphNode, unknown>({
+    id,
+    type,
+    widgets,
+    mode,
+    _testExecutionId: executionId ?? String(id)
+  })
+}
+
+function makeGraph(nodes: LGraphNode[]): LGraph {
+  return fromAny<LGraph, unknown>({ _testNodes: nodes })
+}
+
+describe('scanNodeMediaCandidates', () => {
+  it('returns candidate for a LoadImage node with missing image', () => {
+    const graph = makeGraph([])
+    const node = makeMediaNode(
+      1,
+      'LoadImage',
+      [makeMediaCombo('image', 'photo.png', ['other.png'])],
+      0
+    )
+
+    const result = scanNodeMediaCandidates(graph, node, false)
+
+    expect(result).toHaveLength(1)
+    expect(result[0]).toEqual({
+      nodeId: '1',
+      nodeType: 'LoadImage',
+      widgetName: 'image',
+      mediaType: 'image',
+      name: 'photo.png',
+      isMissing: true
+    })
+  })
+
+  it('returns empty for non-media node types', () => {
+    const graph = makeGraph([])
+    const node = makeMediaNode(
+      1,
+      'KSampler',
+      [makeMediaCombo('sampler', 'euler', ['euler', 'dpm'])],
+      0
+    )
+
+    const result = scanNodeMediaCandidates(graph, node, false)
+
+    expect(result).toEqual([])
+  })
+
+  it('returns empty for node with no widgets', () => {
+    const graph = makeGraph([])
+    const node = makeMediaNode(1, 'LoadImage', [], 0)
+
+    const result = scanNodeMediaCandidates(graph, node, false)
+
+    expect(result).toEqual([])
+  })
+})
+
+describe('scanAllMediaCandidates', () => {
+  it('skips muted nodes (mode === NEVER)', () => {
+    const node = makeMediaNode(
+      1,
+      'LoadImage',
+      [makeMediaCombo('image', 'photo.png', ['other.png'])],
+      2 // NEVER
+    )
+    const result = scanAllMediaCandidates(makeGraph([node]), false)
+    expect(result).toHaveLength(0)
+  })
+
+  it('skips bypassed nodes (mode === BYPASS)', () => {
+    const node = makeMediaNode(
+      2,
+      'LoadImage',
+      [makeMediaCombo('image', 'photo.png', ['other.png'])],
+      4 // BYPASS
+    )
+    const result = scanAllMediaCandidates(makeGraph([node]), false)
+    expect(result).toHaveLength(0)
+  })
+
+  it('includes active nodes (mode === ALWAYS)', () => {
+    const node = makeMediaNode(
+      3,
+      'LoadImage',
+      [makeMediaCombo('image', 'photo.png', ['other.png'])],
+      0 // ALWAYS
+    )
+    const result = scanAllMediaCandidates(makeGraph([node]), false)
+    expect(result).toHaveLength(1)
+    expect(result[0].isMissing).toBe(true)
+  })
+})
+
+describe('groupCandidatesByName', () => {
+  it('groups candidates with the same name', () => {
+    const candidates = [
+      makeCandidate('1', 'photo.png'),
+      makeCandidate('2', 'photo.png'),
+      makeCandidate('3', 'other.png')
+    ]
+
+    const result = groupCandidatesByName(candidates)
+    expect(result).toHaveLength(2)
+
+    const photoGroup = result.find((g) => g.name === 'photo.png')
+    expect(photoGroup?.referencingNodes).toHaveLength(2)
+    expect(photoGroup?.mediaType).toBe('image')
+
+    const otherGroup = result.find((g) => g.name === 'other.png')
+    expect(otherGroup?.referencingNodes).toHaveLength(1)
+  })
+
+  it('returns empty array for empty input', () => {
+    expect(groupCandidatesByName([])).toEqual([])
+  })
+})
+
+describe('groupCandidatesByMediaType', () => {
+  it('groups by media type in order: image, video, audio', () => {
+    const candidates = [
+      makeCandidate('1', 'sound.mp3', {
+        nodeType: 'LoadAudio',
+        widgetName: 'audio',
+        mediaType: 'audio'
+      }),
+      makeCandidate('2', 'photo.png'),
+      makeCandidate('3', 'clip.mp4', {
+        nodeType: 'LoadVideo',
+        widgetName: 'file',
+        mediaType: 'video'
+      })
+    ]
+
+    const result = groupCandidatesByMediaType(candidates)
+    expect(result).toHaveLength(3)
+    expect(result[0].mediaType).toBe('image')
+    expect(result[1].mediaType).toBe('video')
+    expect(result[2].mediaType).toBe('audio')
+  })
+
+  it('omits media types with no candidates', () => {
+    const candidates = [
+      makeCandidate('1', 'clip.mp4', {
+        nodeType: 'LoadVideo',
+        widgetName: 'file',
+        mediaType: 'video'
+      })
+    ]
+
+    const result = groupCandidatesByMediaType(candidates)
+    expect(result).toHaveLength(1)
+    expect(result[0].mediaType).toBe('video')
+  })
+
+  it('groups multiple names within the same media type', () => {
+    const candidates = [
+      makeCandidate('1', 'a.png'),
+      makeCandidate('2', 'b.png'),
+      makeCandidate('3', 'a.png')
+    ]
+
+    const result = groupCandidatesByMediaType(candidates)
+    expect(result).toHaveLength(1)
+    expect(result[0].mediaType).toBe('image')
+    expect(result[0].items).toHaveLength(2)
+    expect(
+      result[0].items.find((i) => i.name === 'a.png')?.referencingNodes
+    ).toHaveLength(2)
+  })
+})
+
+describe('verifyCloudMediaCandidates', () => {
+  it('marks candidates missing when not in input assets', async () => {
+    const candidates = [
+      makeCandidate('1', 'abc123.png', { isMissing: undefined }),
+      makeCandidate('2', 'def456.png', { isMissing: undefined })
+    ]
+
+    const mockStore = {
+      updateInputs: async () => {},
+      inputAssets: [{ asset_hash: 'def456.png', name: 'my-photo.png' }]
+    }
+
+    await verifyCloudMediaCandidates(candidates, undefined, mockStore)
+
+    expect(candidates[0].isMissing).toBe(true)
+    expect(candidates[1].isMissing).toBe(false)
+  })
+
+  it('calls updateInputs before checking assets', async () => {
+    let updateCalled = false
+    const candidates = [makeCandidate('1', 'abc.png', { isMissing: undefined })]
+
+    const mockStore = {
+      updateInputs: async () => {
+        updateCalled = true
+      },
+      inputAssets: []
+    }
+
+    await verifyCloudMediaCandidates(candidates, undefined, mockStore)
+
+    expect(updateCalled).toBe(true)
+  })
+
+  it('respects abort signal before execution', async () => {
+    const controller = new AbortController()
+    controller.abort()
+
+    const candidates = [
+      makeCandidate('1', 'abc123.png', { isMissing: undefined })
+    ]
+
+    await verifyCloudMediaCandidates(candidates, controller.signal)
+
+    expect(candidates[0].isMissing).toBeUndefined()
+  })
+
+  it('respects abort signal after updateInputs', async () => {
+    const controller = new AbortController()
+    const candidates = [makeCandidate('1', 'abc.png', { isMissing: undefined })]
+
+    const mockStore = {
+      updateInputs: async () => {
+        controller.abort()
+      },
+      inputAssets: [{ asset_hash: 'abc.png', name: 'photo.png' }]
+    }
+
+    await verifyCloudMediaCandidates(candidates, controller.signal, mockStore)
+
+    expect(candidates[0].isMissing).toBeUndefined()
+  })
+
+  it('skips candidates already resolved as true', async () => {
+    const candidates = [makeCandidate('1', 'abc.png', { isMissing: true })]
+
+    const mockStore = {
+      updateInputs: async () => {},
+      inputAssets: []
+    }
+
+    await verifyCloudMediaCandidates(candidates, undefined, mockStore)
+
+    expect(candidates[0].isMissing).toBe(true)
+  })
+
+  it('skips candidates already resolved as false', async () => {
+    const candidates = [makeCandidate('1', 'abc.png', { isMissing: false })]
+
+    const mockStore = {
+      updateInputs: async () => {},
+      inputAssets: []
+    }
+
+    await verifyCloudMediaCandidates(candidates, undefined, mockStore)
+
+    expect(candidates[0].isMissing).toBe(false)
+  })
+
+  it('skips entirely when no pending candidates', async () => {
+    let updateCalled = false
+    const candidates = [makeCandidate('1', 'abc.png', { isMissing: true })]
+
+    const mockStore = {
+      updateInputs: async () => {
+        updateCalled = true
+      },
+      inputAssets: []
+    }
+
+    await verifyCloudMediaCandidates(candidates, undefined, mockStore)
+
+    expect(updateCalled).toBe(false)
+  })
+})
diff --git a/src/platform/missingMedia/missingMediaScan.ts b/src/platform/missingMedia/missingMediaScan.ts
new file mode 100644
index 0000000000..7b4592768b
--- /dev/null
+++ b/src/platform/missingMedia/missingMediaScan.ts
@@ -0,0 +1,179 @@
+import { groupBy } from 'es-toolkit'
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
+import type {
+  MissingMediaCandidate,
+  MissingMediaViewModel,
+  MissingMediaGroup,
+  MediaType
+} from './types'
+import type { LGraph } from '@/lib/litegraph/src/LGraph'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type {
+  IBaseWidget,
+  IComboWidget
+} from '@/lib/litegraph/src/types/widgets'
+import {
+  collectAllNodes,
+  getExecutionIdByNode
+} from '@/utils/graphTraversalUtil'
+import { LGraphEventMode } from '@/lib/litegraph/src/types/globalEnums'
+import { resolveComboValues } from '@/utils/litegraphUtil'
+
+/** Map of node types to their media widget name and media type. */
+const MEDIA_NODE_WIDGETS: Record<
+  string,
+  { widgetName: string; mediaType: MediaType }
+> = {
+  LoadImage: { widgetName: 'image', mediaType: 'image' },
+  LoadVideo: { widgetName: 'file', mediaType: 'video' },
+  LoadAudio: { widgetName: 'audio', mediaType: 'audio' }
+}
+
+function isComboWidget(widget: IBaseWidget): widget is IComboWidget {
+  return widget.type === 'combo'
+}
+
+/**
+ * Scan combo widgets on media nodes for file values that may be missing.
+ *
+ * OSS: `isMissing` resolved immediately via widget options.
+ * Cloud: `isMissing` left `undefined` for async verification.
+ */
+export function scanAllMediaCandidates(
+  rootGraph: LGraph,
+  isCloud: boolean
+): MissingMediaCandidate[] {
+  if (!rootGraph) return []
+
+  const allNodes = collectAllNodes(rootGraph)
+  const candidates: MissingMediaCandidate[] = []
+
+  for (const node of allNodes) {
+    if (!node.widgets?.length) continue
+    if (node.isSubgraphNode?.()) continue
+    if (
+      node.mode === LGraphEventMode.NEVER ||
+      node.mode === LGraphEventMode.BYPASS
+    )
+      continue
+
+    candidates.push(...scanNodeMediaCandidates(rootGraph, node, isCloud))
+  }
+
+  return candidates
+}
+
+/** Scan a single node for missing media candidates (OSS immediate resolution). */
+export function scanNodeMediaCandidates(
+  rootGraph: LGraph,
+  node: LGraphNode,
+  isCloud: boolean
+): MissingMediaCandidate[] {
+  if (!node.widgets?.length) return []
+
+  const mediaInfo = MEDIA_NODE_WIDGETS[node.type]
+  if (!mediaInfo) return []
+
+  const executionId = getExecutionIdByNode(rootGraph, node)
+  if (!executionId) return []
+
+  const candidates: MissingMediaCandidate[] = []
+  for (const widget of node.widgets) {
+    if (!isComboWidget(widget)) continue
+    if (widget.name !== mediaInfo.widgetName) continue
+
+    const value = widget.value
+    if (typeof value !== 'string' || !value.trim()) continue
+
+    let isMissing: boolean | undefined
+    if (isCloud) {
+      isMissing = undefined
+    } else {
+      const options = resolveComboValues(widget)
+      isMissing = !options.includes(value)
+    }
+
+    candidates.push({
+      nodeId: executionId as NodeId,
+      nodeType: node.type,
+      widgetName: widget.name,
+      mediaType: mediaInfo.mediaType,
+      name: value,
+      isMissing
+    })
+  }
+
+  return candidates
+}
+
+interface InputVerifier {
+  updateInputs: () => Promise<unknown>
+  inputAssets: Array<{ asset_hash?: string | null; name: string }>
+}
+
+/**
+ * Verify cloud media candidates against the input assets fetched from the
+ * assets store. Mutates candidates' `isMissing` in place.
+ */
+export async function verifyCloudMediaCandidates(
+  candidates: MissingMediaCandidate[],
+  signal?: AbortSignal,
+  assetsStore?: InputVerifier
+): Promise<void> {
+  if (signal?.aborted) return
+
+  const pending = candidates.filter((c) => c.isMissing === undefined)
+  if (pending.length === 0) return
+
+  const store =
+    assetsStore ?? (await import('@/stores/assetsStore')).useAssetsStore()
+
+  await store.updateInputs()
+
+  if (signal?.aborted) return
+
+  const assetHashes = new Set(
+    store.inputAssets.map((a) => a.asset_hash).filter((h): h is string => !!h)
+  )
+
+  for (const c of pending) {
+    c.isMissing = !assetHashes.has(c.name)
+  }
+}
+
+/** Group confirmed-missing candidates by file name into view models. */
+export function groupCandidatesByName(
+  candidates: MissingMediaCandidate[]
+): MissingMediaViewModel[] {
+  const map = new Map<string, MissingMediaViewModel>()
+  for (const c of candidates) {
+    const existing = map.get(c.name)
+    if (existing) {
+      existing.referencingNodes.push({
+        nodeId: c.nodeId,
+        widgetName: c.widgetName
+      })
+    } else {
+      map.set(c.name, {
+        name: c.name,
+        mediaType: c.mediaType,
+        referencingNodes: [{ nodeId: c.nodeId, widgetName: c.widgetName }]
+      })
+    }
+  }
+  return Array.from(map.values())
+}
+
+/** Group confirmed-missing candidates by media type. */
+export function groupCandidatesByMediaType(
+  candidates: MissingMediaCandidate[]
+): MissingMediaGroup[] {
+  const grouped = groupBy(candidates, (c) => c.mediaType)
+  const order: MediaType[] = ['image', 'video', 'audio']
+  return order
+    .filter((t) => t in grouped)
+    .map((mediaType) => ({
+      mediaType,
+      items: groupCandidatesByName(grouped[mediaType])
+    }))
+}
diff --git a/src/platform/missingMedia/missingMediaStore.test.ts b/src/platform/missingMedia/missingMediaStore.test.ts
new file mode 100644
index 0000000000..1908f106ac
--- /dev/null
+++ b/src/platform/missingMedia/missingMediaStore.test.ts
@@ -0,0 +1,417 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { useMissingMediaStore } from './missingMediaStore'
+import type { MissingMediaCandidate } from './types'
+
+// Mock dependencies
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
+  useCanvasStore: () => ({
+    currentGraph: null
+  })
+}))
+
+vi.mock('@/scripts/app', () => ({
+  app: {
+    rootGraph: null
+  }
+}))
+
+vi.mock('@/utils/graphTraversalUtil', () => ({
+  getActiveGraphNodeIds: () => new Set<string>()
+}))
+
+function makeCandidate(
+  nodeId: string,
+  name: string,
+  mediaType: 'image' | 'video' | 'audio' = 'image'
+): MissingMediaCandidate {
+  return {
+    nodeId,
+    nodeType: 'LoadImage',
+    widgetName: 'image',
+    mediaType,
+    name,
+    isMissing: true
+  }
+}
+
+describe('useMissingMediaStore', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  it('starts with no missing media', () => {
+    const store = useMissingMediaStore()
+    expect(store.missingMediaCandidates).toBeNull()
+    expect(store.hasMissingMedia).toBe(false)
+    expect(store.missingMediaCount).toBe(0)
+  })
+
+  it('setMissingMedia populates candidates', () => {
+    const store = useMissingMediaStore()
+    const candidates = [makeCandidate('1', 'photo.png')]
+
+    store.setMissingMedia(candidates)
+
+    expect(store.missingMediaCandidates).toHaveLength(1)
+    expect(store.hasMissingMedia).toBe(true)
+    expect(store.missingMediaCount).toBe(1)
+  })
+
+  it('setMissingMedia with empty array clears state', () => {
+    const store = useMissingMediaStore()
+    store.setMissingMedia([makeCandidate('1', 'photo.png')])
+    store.setMissingMedia([])
+
+    expect(store.missingMediaCandidates).toBeNull()
+    expect(store.hasMissingMedia).toBe(false)
+  })
+
+  it('clearMissingMedia resets all state including interaction state', () => {
+    const store = useMissingMediaStore()
+    store.setMissingMedia([
+      makeCandidate('1', 'photo.png'),
+      makeCandidate('2', 'clip.mp4', 'video')
+    ])
+    store.expandState['photo.png'] = true
+    store.uploadState['photo.png'] = {
+      fileName: 'photo.png',
+      status: 'uploaded'
+    }
+    store.pendingSelection['photo.png'] = 'uploaded/photo.png'
+    const controller = store.createVerificationAbortController()
+
+    store.clearMissingMedia()
+
+    expect(store.missingMediaCandidates).toBeNull()
+    expect(store.hasMissingMedia).toBe(false)
+    expect(store.missingMediaCount).toBe(0)
+    expect(controller.signal.aborted).toBe(true)
+    expect(store.expandState).toEqual({})
+    expect(store.uploadState).toEqual({})
+    expect(store.pendingSelection).toEqual({})
+  })
+
+  it('missingMediaNodeIds tracks unique node IDs', () => {
+    const store = useMissingMediaStore()
+    store.setMissingMedia([
+      makeCandidate('1', 'photo.png'),
+      makeCandidate('1', 'other.png'),
+      makeCandidate('2', 'clip.mp4', 'video')
+    ])
+
+    expect(store.missingMediaNodeIds.size).toBe(2)
+    expect(store.missingMediaNodeIds.has('1')).toBe(true)
+    expect(store.missingMediaNodeIds.has('2')).toBe(true)
+  })
+
+  it('hasMissingMediaOnNode checks node presence', () => {
+    const store = useMissingMediaStore()
+    store.setMissingMedia([makeCandidate('42', 'photo.png')])
+
+    expect(store.hasMissingMediaOnNode('42')).toBe(true)
+    expect(store.hasMissingMediaOnNode('99')).toBe(false)
+  })
+
+  it('removeMissingMediaByWidget removes matching node+widget entry', () => {
+    const store = useMissingMediaStore()
+    store.setMissingMedia([
+      makeCandidate('1', 'photo.png'),
+      makeCandidate('2', 'clip.mp4', 'video')
+    ])
+
+    store.removeMissingMediaByWidget('1', 'image')
+
+    expect(store.missingMediaCandidates).toHaveLength(1)
+    expect(store.missingMediaCandidates![0].name).toBe('clip.mp4')
+  })
+
+  it('removeMissingMediaByWidget nulls candidates when last entry removed', () => {
+    const store = useMissingMediaStore()
+    store.setMissingMedia([makeCandidate('1', 'photo.png')])
+
+    store.removeMissingMediaByWidget('1', 'image')
+
+    expect(store.missingMediaCandidates).toBeNull()
+    expect(store.hasMissingMedia).toBe(false)
+  })
+
+  it('removeMissingMediaByWidget ignores non-matching entries', () => {
+    const store = useMissingMediaStore()
+    store.setMissingMedia([makeCandidate('1', 'photo.png')])
+
+    store.removeMissingMediaByWidget('99', 'image')
+
+    expect(store.missingMediaCandidates).toHaveLength(1)
+  })
+
+  it('removeMissingMediaByName clears interaction state for removed name', () => {
+    const store = useMissingMediaStore()
+    store.setMissingMedia([makeCandidate('1', 'photo.png')])
+    store.expandState['photo.png'] = true
+    store.uploadState['photo.png'] = {
+      fileName: 'photo.png',
+      status: 'uploaded'
+    }
+    store.pendingSelection['photo.png'] = 'uploaded/photo.png'
+
+    store.removeMissingMediaByName('photo.png')
+
+    expect(store.expandState['photo.png']).toBeUndefined()
+    expect(store.uploadState['photo.png']).toBeUndefined()
+    expect(store.pendingSelection['photo.png']).toBeUndefined()
+  })
+
+  it('removeMissingMediaByWidget clears interaction state for removed name', () => {
+    const store = useMissingMediaStore()
+    store.setMissingMedia([makeCandidate('1', 'photo.png')])
+    store.pendingSelection['photo.png'] = 'library/photo.png'
+
+    store.removeMissingMediaByWidget('1', 'image')
+
+    expect(store.pendingSelection['photo.png']).toBeUndefined()
+  })
+
+  it('removeMissingMediaByWidget preserves interaction state when other candidates share the name', () => {
+    const store = useMissingMediaStore()
+    store.setMissingMedia([
+      makeCandidate('1', 'photo.png'),
+      makeCandidate('2', 'photo.png')
+    ])
+    store.pendingSelection['photo.png'] = 'library/photo.png'
+
+    store.removeMissingMediaByWidget('1', 'image')
+
+    expect(store.missingMediaCandidates).toHaveLength(1)
+    expect(store.pendingSelection['photo.png']).toBe('library/photo.png')
+  })
+
+  it('createVerificationAbortController aborts previous controller', () => {
+    const store = useMissingMediaStore()
+    const first = store.createVerificationAbortController()
+    expect(first.signal.aborted).toBe(false)
+
+    store.createVerificationAbortController()
+    expect(first.signal.aborted).toBe(true)
+  })
+
+  describe('addMissingMedia', () => {
+    it('appends to existing candidates', () => {
+      const store = useMissingMediaStore()
+      store.setMissingMedia([makeCandidate('1', 'photo.png')])
+
+      store.addMissingMedia([makeCandidate('2', 'clip.mp4', 'video')])
+
+      expect(store.missingMediaCandidates).toHaveLength(2)
+      expect(store.missingMediaCandidates![0].name).toBe('photo.png')
+      expect(store.missingMediaCandidates![1].name).toBe('clip.mp4')
+    })
+
+    it('works when store is empty (candidates are null)', () => {
+      const store = useMissingMediaStore()
+      expect(store.missingMediaCandidates).toBeNull()
+
+      store.addMissingMedia([makeCandidate('1', 'photo.png')])
+
+      expect(store.missingMediaCandidates).toHaveLength(1)
+      expect(store.hasMissingMedia).toBe(true)
+    })
+
+    it('does nothing when given empty array', () => {
+      const store = useMissingMediaStore()
+      store.setMissingMedia([makeCandidate('1', 'photo.png')])
+
+      store.addMissingMedia([])
+
+      expect(store.missingMediaCandidates).toHaveLength(1)
+    })
+  })
+
+  describe('removeMissingMediaByNodeId', () => {
+    it('removes all candidates matching the nodeId', () => {
+      const store = useMissingMediaStore()
+      store.setMissingMedia([
+        makeCandidate('1', 'photo.png'),
+        makeCandidate('1', 'other.png'),
+        makeCandidate('2', 'clip.mp4', 'video')
+      ])
+
+      store.removeMissingMediaByNodeId('1')
+
+      expect(store.missingMediaCandidates).toHaveLength(1)
+      expect(store.missingMediaCandidates![0].name).toBe('clip.mp4')
+    })
+
+    it('keeps candidates with non-matching nodeId', () => {
+      const store = useMissingMediaStore()
+      store.setMissingMedia([makeCandidate('1', 'photo.png')])
+
+      store.removeMissingMediaByNodeId('99')
+
+      expect(store.missingMediaCandidates).toHaveLength(1)
+    })
+
+    it('sets candidates to null when all are removed', () => {
+      const store = useMissingMediaStore()
+      store.setMissingMedia([
+        makeCandidate('1', 'photo.png'),
+        makeCandidate('1', 'other.png')
+      ])
+
+      store.removeMissingMediaByNodeId('1')
+
+      expect(store.missingMediaCandidates).toBeNull()
+      expect(store.hasMissingMedia).toBe(false)
+    })
+
+    it('cleans interaction state for removed names', () => {
+      const store = useMissingMediaStore()
+      store.setMissingMedia([
+        makeCandidate('1', 'photo.png'),
+        makeCandidate('2', 'clip.mp4', 'video')
+      ])
+      store.expandState['photo.png'] = true
+      store.uploadState['photo.png'] = {
+        fileName: 'photo.png',
+        status: 'uploaded'
+      }
+      store.pendingSelection['photo.png'] = 'uploaded/photo.png'
+
+      store.removeMissingMediaByNodeId('1')
+
+      expect(store.expandState['photo.png']).toBeUndefined()
+      expect(store.uploadState['photo.png']).toBeUndefined()
+      expect(store.pendingSelection['photo.png']).toBeUndefined()
+    })
+
+    it('preserves interaction state when other candidates share the name', () => {
+      const store = useMissingMediaStore()
+      store.setMissingMedia([
+        makeCandidate('1', 'photo.png'),
+        makeCandidate('2', 'photo.png')
+      ])
+      store.pendingSelection['photo.png'] = 'library/photo.png'
+
+      store.removeMissingMediaByNodeId('1')
+
+      expect(store.missingMediaCandidates).toHaveLength(1)
+      expect(store.pendingSelection['photo.png']).toBe('library/photo.png')
+    })
+
+    it('does nothing when candidates are null', () => {
+      const store = useMissingMediaStore()
+      store.removeMissingMediaByNodeId('1')
+      expect(store.missingMediaCandidates).toBeNull()
+    })
+  })
+
+  describe('removeMissingMediaByPrefix', () => {
+    it('removes all candidates whose nodeId starts with the prefix', () => {
+      const store = useMissingMediaStore()
+      store.setMissingMedia([
+        makeCandidate('65:70:63', 'a.png'),
+        makeCandidate('65:70:64', 'b.png'),
+        makeCandidate('65:80:5', 'c.png')
+      ])
+
+      store.removeMissingMediaByPrefix('65:70:')
+
+      expect(store.missingMediaCandidates).toHaveLength(1)
+      expect(store.missingMediaCandidates![0].nodeId).toBe('65:80:5')
+    })
+
+    it('removes deeply nested interior nodes under the container', () => {
+      const store = useMissingMediaStore()
+      store.setMissingMedia([
+        makeCandidate('65:70:63', 'a.png'),
+        makeCandidate('65:70:80:5', 'b.png'),
+        makeCandidate('65:71:63', 'c.png')
+      ])
+
+      store.removeMissingMediaByPrefix('65:70:')
+
+      expect(store.missingMediaCandidates).toHaveLength(1)
+      expect(store.missingMediaCandidates![0].nodeId).toBe('65:71:63')
+    })
+
+    it('does not match siblings that share a numeric prefix (trailing colon)', () => {
+      const store = useMissingMediaStore()
+      store.setMissingMedia([
+        makeCandidate('65:70:1', 'a.png'),
+        makeCandidate('65:705:1', 'b.png'),
+        makeCandidate('65:70', 'c.png')
+      ])
+
+      store.removeMissingMediaByPrefix('65:70:')
+
+      expect(store.missingMediaCandidates).toHaveLength(2)
+      const remainingIds = store.missingMediaCandidates!.map((m) =>
+        String(m.nodeId)
+      )
+      expect(remainingIds).toContain('65:705:1')
+      expect(remainingIds).toContain('65:70')
+    })
+
+    it('sets candidates to null when all are removed', () => {
+      const store = useMissingMediaStore()
+      store.setMissingMedia([
+        makeCandidate('65:70:63', 'a.png'),
+        makeCandidate('65:70:64', 'b.png')
+      ])
+
+      store.removeMissingMediaByPrefix('65:70:')
+
+      expect(store.missingMediaCandidates).toBeNull()
+      expect(store.hasMissingMedia).toBe(false)
+    })
+
+    it('does nothing when no candidates match', () => {
+      const store = useMissingMediaStore()
+      store.setMissingMedia([makeCandidate('65:71:1', 'a.png')])
+
+      store.removeMissingMediaByPrefix('65:70:')
+
+      expect(store.missingMediaCandidates).toHaveLength(1)
+    })
+
+    it('does nothing when candidates are null', () => {
+      const store = useMissingMediaStore()
+      store.removeMissingMediaByPrefix('65:70:')
+      expect(store.missingMediaCandidates).toBeNull()
+    })
+
+    it('preserves candidates with a nullish nodeId (defensive)', () => {
+      const store = useMissingMediaStore()
+      const orphan = {
+        nodeId: undefined as unknown as string,
+        nodeType: 'LoadImage',
+        widgetName: 'image',
+        mediaType: 'image' as const,
+        name: 'orphan.png',
+        isMissing: true
+      }
+      store.setMissingMedia([makeCandidate('65:70:63', 'a.png'), orphan])
+
+      store.removeMissingMediaByPrefix('65:70:')
+
+      expect(store.missingMediaCandidates).toHaveLength(1)
+      expect(store.missingMediaCandidates![0].name).toBe('orphan.png')
+    })
+
+    it('clears interaction state for removed names not used elsewhere', () => {
+      const store = useMissingMediaStore()
+      store.setMissingMedia([
+        makeCandidate('65:70:63', 'shared.png'),
+        makeCandidate('65:80:5', 'shared.png'),
+        makeCandidate('65:70:64', 'only-interior.png')
+      ])
+      store.pendingSelection['shared.png'] = 'library/shared.png'
+      store.pendingSelection['only-interior.png'] = 'library/interior.png'
+
+      store.removeMissingMediaByPrefix('65:70:')
+
+      expect(store.pendingSelection['only-interior.png']).toBeUndefined()
+      expect(store.pendingSelection['shared.png']).toBe('library/shared.png')
+    })
+  })
+})
diff --git a/src/platform/missingMedia/missingMediaStore.ts b/src/platform/missingMedia/missingMediaStore.ts
new file mode 100644
index 0000000000..191651f022
--- /dev/null
+++ b/src/platform/missingMedia/missingMediaStore.ts
@@ -0,0 +1,225 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+
+// eslint-disable-next-line import-x/no-restricted-paths
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { app } from '@/scripts/app'
+import type { MissingMediaCandidate } from '@/platform/missingMedia/types'
+import { getAncestorExecutionIds } from '@/types/nodeIdentification'
+import type { NodeExecutionId } from '@/types/nodeIdentification'
+import { getActiveGraphNodeIds } from '@/utils/graphTraversalUtil'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+
+/**
+ * Missing media error state.
+ * Separated from executionErrorStore to keep domain boundaries clean.
+ * The executionErrorStore composes from this store for aggregate error flags.
+ */
+export const useMissingMediaStore = defineStore('missingMedia', () => {
+  const canvasStore = useCanvasStore()
+
+  const missingMediaCandidates = ref<MissingMediaCandidate[] | null>(null)
+
+  const hasMissingMedia = computed(() => !!missingMediaCandidates.value?.length)
+
+  const missingMediaCount = computed(
+    () => missingMediaCandidates.value?.length ?? 0
+  )
+
+  const missingMediaNodeIds = computed(
+    () =>
+      new Set(missingMediaCandidates.value?.map((m) => String(m.nodeId)) ?? [])
+  )
+
+  /**
+   * Set of all execution ID prefixes derived from missing media node IDs,
+   * including the missing media nodes themselves.
+   */
+  const missingMediaAncestorExecutionIds = computed<Set<NodeExecutionId>>(
+    () => {
+      const ids = new Set<NodeExecutionId>()
+      for (const nodeId of missingMediaNodeIds.value) {
+        for (const id of getAncestorExecutionIds(nodeId)) {
+          ids.add(id)
+        }
+      }
+      return ids
+    }
+  )
+
+  const activeMissingMediaGraphIds = computed<Set<string>>(() => {
+    if (!app.rootGraph) return new Set()
+    return getActiveGraphNodeIds(
+      app.rootGraph,
+      canvasStore.currentGraph ?? app.rootGraph,
+      missingMediaAncestorExecutionIds.value
+    )
+  })
+
+  // Interaction state — persists across component re-mounts
+  const expandState = ref<Record<string, boolean>>({})
+  const uploadState = ref<
+    Record<string, { fileName: string; status: 'uploading' | 'uploaded' }>
+  >({})
+  /** Pending selection: value to apply on confirm. */
+  const pendingSelection = ref<Record<string, string>>({})
+
+  let _verificationAbortController: AbortController | null = null
+
+  function createVerificationAbortController(): AbortController {
+    _verificationAbortController?.abort()
+    _verificationAbortController = new AbortController()
+    return _verificationAbortController
+  }
+
+  function setMissingMedia(media: MissingMediaCandidate[]) {
+    missingMediaCandidates.value = media.length ? media : null
+  }
+
+  function hasMissingMediaOnNode(nodeLocatorId: string): boolean {
+    return missingMediaNodeIds.value.has(nodeLocatorId)
+  }
+
+  function isContainerWithMissingMedia(node: LGraphNode): boolean {
+    return activeMissingMediaGraphIds.value.has(String(node.id))
+  }
+
+  function clearInteractionStateForName(name: string) {
+    delete expandState.value[name]
+    delete uploadState.value[name]
+    delete pendingSelection.value[name]
+  }
+
+  function removeMissingMediaByName(name: string) {
+    if (!missingMediaCandidates.value) return
+    missingMediaCandidates.value = missingMediaCandidates.value.filter(
+      (m) => m.name !== name
+    )
+    clearInteractionStateForName(name)
+    if (!missingMediaCandidates.value.length)
+      missingMediaCandidates.value = null
+  }
+
+  function removeMissingMediaByWidget(nodeId: string, widgetName: string) {
+    if (!missingMediaCandidates.value) return
+    const removedNames = new Set(
+      missingMediaCandidates.value
+        .filter(
+          (m) => String(m.nodeId) === nodeId && m.widgetName === widgetName
+        )
+        .map((m) => m.name)
+    )
+    missingMediaCandidates.value = missingMediaCandidates.value.filter(
+      (m) => !(String(m.nodeId) === nodeId && m.widgetName === widgetName)
+    )
+    for (const name of removedNames) {
+      if (!missingMediaCandidates.value.some((m) => m.name === name)) {
+        clearInteractionStateForName(name)
+      }
+    }
+    if (!missingMediaCandidates.value.length)
+      missingMediaCandidates.value = null
+  }
+
+  function removeMissingMediaByNodeId(nodeId: string) {
+    if (!missingMediaCandidates.value) return
+    const removedNames = new Set(
+      missingMediaCandidates.value
+        .filter((m) => String(m.nodeId) === nodeId)
+        .map((m) => m.name)
+    )
+    missingMediaCandidates.value = missingMediaCandidates.value.filter(
+      (m) => String(m.nodeId) !== nodeId
+    )
+    for (const name of removedNames) {
+      if (!missingMediaCandidates.value.some((m) => m.name === name)) {
+        clearInteractionStateForName(name)
+      }
+    }
+    if (!missingMediaCandidates.value.length)
+      missingMediaCandidates.value = null
+  }
+
+  /**
+   * Remove all candidates whose nodeId starts with `prefix`.
+   *
+   * Intended for clearing all interior errors when a subgraph container is
+   * removed. Callers are expected to pass `${execId}:` (with trailing
+   * colon) so that sibling IDs sharing a numeric prefix (e.g. `"705"` vs
+   * `"70"`) are not matched.
+   */
+  function removeMissingMediaByPrefix(prefix: string) {
+    if (!missingMediaCandidates.value) return
+    const removedNames = new Set<string>()
+    const remaining: MissingMediaCandidate[] = []
+    for (const m of missingMediaCandidates.value) {
+      // Preserve candidates without a nodeId; they cannot belong to any
+      // subgraph scope. The type marks nodeId as required, but defensive
+      // handling matches the rest of the missing-media code.
+      if (m.nodeId == null) {
+        remaining.push(m)
+        continue
+      }
+      if (String(m.nodeId).startsWith(prefix)) {
+        removedNames.add(m.name)
+      } else {
+        remaining.push(m)
+      }
+    }
+    if (removedNames.size === 0) return
+    missingMediaCandidates.value = remaining.length ? remaining : null
+    for (const name of removedNames) {
+      if (!remaining.some((m) => m.name === name)) {
+        clearInteractionStateForName(name)
+      }
+    }
+  }
+
+  function addMissingMedia(media: MissingMediaCandidate[]) {
+    if (!media.length) return
+    const existing = missingMediaCandidates.value ?? []
+    const existingKeys = new Set(
+      existing.map((m) => `${String(m.nodeId)}::${m.widgetName}::${m.name}`)
+    )
+    const newMedia = media.filter(
+      (m) =>
+        !existingKeys.has(`${String(m.nodeId)}::${m.widgetName}::${m.name}`)
+    )
+    if (!newMedia.length) return
+    missingMediaCandidates.value = [...existing, ...newMedia]
+  }
+
+  function clearMissingMedia() {
+    _verificationAbortController?.abort()
+    _verificationAbortController = null
+    missingMediaCandidates.value = null
+    expandState.value = {}
+    uploadState.value = {}
+    pendingSelection.value = {}
+  }
+
+  return {
+    missingMediaCandidates,
+    hasMissingMedia,
+    missingMediaCount,
+    missingMediaNodeIds,
+    missingMediaAncestorExecutionIds,
+    activeMissingMediaGraphIds,
+
+    setMissingMedia,
+    addMissingMedia,
+    removeMissingMediaByName,
+    removeMissingMediaByWidget,
+    removeMissingMediaByNodeId,
+    removeMissingMediaByPrefix,
+    clearMissingMedia,
+    createVerificationAbortController,
+
+    hasMissingMediaOnNode,
+    isContainerWithMissingMedia,
+
+    expandState,
+    uploadState,
+    pendingSelection
+  }
+})
diff --git a/src/platform/missingMedia/types.ts b/src/platform/missingMedia/types.ts
new file mode 100644
index 0000000000..a07433dc34
--- /dev/null
+++ b/src/platform/missingMedia/types.ts
@@ -0,0 +1,38 @@
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
+
+export type MediaType = 'image' | 'video' | 'audio'
+
+/**
+ * A single (node, widget, media file) binding detected by the missing media pipeline.
+ * The same file name may appear multiple times across different nodes.
+ */
+export interface MissingMediaCandidate {
+  nodeId: NodeId
+  nodeType: string
+  widgetName: string
+  mediaType: MediaType
+  /** Display name (plain filename for OSS, asset hash for cloud). */
+  name: string
+  /**
+   * - `true`  — confirmed missing
+   * - `false` — confirmed present
+   * - `undefined` — pending async verification (cloud only)
+   */
+  isMissing: boolean | undefined
+}
+
+/** View model grouping multiple candidate references under a single file name. */
+export interface MissingMediaViewModel {
+  name: string
+  mediaType: MediaType
+  referencingNodes: Array<{
+    nodeId: NodeId
+    widgetName: string
+  }>
+}
+
+/** A group of missing media items sharing the same media type. */
+export interface MissingMediaGroup {
+  mediaType: MediaType
+  items: MissingMediaViewModel[]
+}
diff --git a/src/platform/missingModel/__fixtures__/activeSubgraphUnmatchedModel.json b/src/platform/missingModel/__fixtures__/activeSubgraphUnmatchedModel.json
new file mode 100644
index 0000000000..6be16a28d6
--- /dev/null
+++ b/src/platform/missingModel/__fixtures__/activeSubgraphUnmatchedModel.json
@@ -0,0 +1,83 @@
+{
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "KSampler",
+      "pos": [0, 0],
+      "size": [100, 100],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "properties": {},
+      "widgets_values": [0, "randomize", 20]
+    },
+    {
+      "id": 2,
+      "type": "subgraph-x",
+      "pos": [300, 0],
+      "size": [100, 100],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "properties": {},
+      "widgets_values": []
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {},
+  "version": 0.4,
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "subgraph-x",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 1,
+          "lastLinkId": 0,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "x",
+        "nodes": [
+          {
+            "id": 1,
+            "type": "CheckpointLoaderSimple",
+            "pos": [0, 0],
+            "size": [100, 100],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "properties": {
+              "models": [
+                {
+                  "name": "rare_model.safetensors",
+                  "directory": "checkpoints"
+                }
+              ]
+            },
+            "widgets_values": ["some_other_model.safetensors"]
+          }
+        ],
+        "links": [],
+        "inputNode": { "id": -10, "bounding": [0, 0, 0, 0] },
+        "outputNode": { "id": -20, "bounding": [0, 0, 0, 0] },
+        "inputs": [],
+        "outputs": [],
+        "widgets": []
+      }
+    ]
+  },
+  "models": [
+    {
+      "name": "rare_model.safetensors",
+      "url": "https://example.com/rare",
+      "directory": "checkpoints"
+    }
+  ]
+}
diff --git a/src/platform/missingModel/__fixtures__/bypassedSubgraphUnmatchedModel.json b/src/platform/missingModel/__fixtures__/bypassedSubgraphUnmatchedModel.json
new file mode 100644
index 0000000000..959b1034ee
--- /dev/null
+++ b/src/platform/missingModel/__fixtures__/bypassedSubgraphUnmatchedModel.json
@@ -0,0 +1,83 @@
+{
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "KSampler",
+      "pos": [0, 0],
+      "size": [100, 100],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "properties": {},
+      "widgets_values": [0, "randomize", 20]
+    },
+    {
+      "id": 2,
+      "type": "subgraph-x",
+      "pos": [300, 0],
+      "size": [100, 100],
+      "flags": {},
+      "order": 0,
+      "mode": 4,
+      "properties": {},
+      "widgets_values": []
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {},
+  "version": 0.4,
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "subgraph-x",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 1,
+          "lastLinkId": 0,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "x",
+        "nodes": [
+          {
+            "id": 1,
+            "type": "CheckpointLoaderSimple",
+            "pos": [0, 0],
+            "size": [100, 100],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "properties": {
+              "models": [
+                {
+                  "name": "rare_model.safetensors",
+                  "directory": "checkpoints"
+                }
+              ]
+            },
+            "widgets_values": ["some_other_model.safetensors"]
+          }
+        ],
+        "links": [],
+        "inputNode": { "id": -10, "bounding": [0, 0, 0, 0] },
+        "outputNode": { "id": -20, "bounding": [0, 0, 0, 0] },
+        "inputs": [],
+        "outputs": [],
+        "widgets": []
+      }
+    ]
+  },
+  "models": [
+    {
+      "name": "rare_model.safetensors",
+      "url": "https://example.com/rare",
+      "directory": "checkpoints"
+    }
+  ]
+}
diff --git a/src/platform/missingModel/components/MissingModelCard.test.ts b/src/platform/missingModel/components/MissingModelCard.test.ts
index 80522a6b19..eec98899c0 100644
--- a/src/platform/missingModel/components/MissingModelCard.test.ts
+++ b/src/platform/missingModel/components/MissingModelCard.test.ts
@@ -1,4 +1,5 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import PrimeVue from 'primevue/config'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -12,7 +13,8 @@ import type {
 vi.mock('./MissingModelRow.vue', () => ({
   default: {
     name: 'MissingModelRow',
-    template: '<div class="model-row" />',
+    template:
+      '<div class="model-row" :data-show-node-id-badge="showNodeIdBadge" :data-is-asset-supported="isAssetSupported" :data-directory="directory"><button class="locate-trigger" @click="$emit(\'locate-model\', model?.representative?.nodeId)">Locate</button></div>',
     props: ['model', 'directory', 'showNodeIdBadge', 'isAssetSupported'],
     emits: ['locate-model']
   }
@@ -83,13 +85,15 @@ function mountCard(
   props: Partial<{
     missingModelGroups: MissingModelGroup[]
     showNodeIdBadge: boolean
-  }> = {}
+  }> = {},
+  onLocateModel?: (nodeId: string) => void
 ) {
-  return mount(MissingModelCard, {
+  return render(MissingModelCard, {
     props: {
       missingModelGroups: [makeGroup()],
       showNodeIdBadge: false,
-      ...props
+      ...props,
+      ...(onLocateModel ? { onLocateModel } : {})
     },
     global: {
       plugins: [PrimeVue, i18n]
@@ -104,90 +108,90 @@ describe('MissingModelCard', () => {
 
   describe('Rendering & Props', () => {
     it('renders directory name in category header', () => {
-      const wrapper = mountCard({
+      const { container } = mountCard({
         missingModelGroups: [makeGroup({ directory: 'loras' })]
       })
-      expect(wrapper.text()).toContain('loras')
+      expect(container.textContent).toContain('loras')
     })
 
     it('renders translated unknown category when directory is null', () => {
-      const wrapper = mountCard({
+      const { container } = mountCard({
         missingModelGroups: [makeGroup({ directory: null })]
       })
-      expect(wrapper.text()).toContain('Unknown Category')
+      expect(container.textContent).toContain('Unknown Category')
     })
 
     it('renders model count in category header', () => {
-      const wrapper = mountCard({
+      const { container } = mountCard({
         missingModelGroups: [
           makeGroup({ modelNames: ['a.safetensors', 'b.safetensors'] })
         ]
       })
-      expect(wrapper.text()).toContain('(2)')
+      expect(container.textContent).toContain('(2)')
     })
 
     it('renders correct number of MissingModelRow components', () => {
-      const wrapper = mountCard({
+      const { container } = mountCard({
         missingModelGroups: [
           makeGroup({
             modelNames: ['a.safetensors', 'b.safetensors', 'c.safetensors']
           })
         ]
       })
-      expect(
-        wrapper.findAllComponents({ name: 'MissingModelRow' })
-      ).toHaveLength(3)
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      expect(container.querySelectorAll('.model-row')).toHaveLength(3)
     })
 
     it('renders multiple groups', () => {
-      const wrapper = mountCard({
+      const { container } = mountCard({
         missingModelGroups: [
           makeGroup({ directory: 'checkpoints' }),
           makeGroup({ directory: 'loras' })
         ]
       })
-      expect(wrapper.text()).toContain('checkpoints')
-      expect(wrapper.text()).toContain('loras')
+      expect(container.textContent).toContain('checkpoints')
+      expect(container.textContent).toContain('loras')
     })
 
     it('renders zero rows when missingModelGroups is empty', () => {
-      const wrapper = mountCard({ missingModelGroups: [] })
-      expect(
-        wrapper.findAllComponents({ name: 'MissingModelRow' })
-      ).toHaveLength(0)
+      const { container } = mountCard({ missingModelGroups: [] })
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      expect(container.querySelectorAll('.model-row')).toHaveLength(0)
     })
 
     it('passes props correctly to MissingModelRow children', () => {
-      const wrapper = mountCard({ showNodeIdBadge: true })
-      const row = wrapper.findComponent({ name: 'MissingModelRow' })
-      expect(row.props('showNodeIdBadge')).toBe(true)
-      expect(row.props('isAssetSupported')).toBe(true)
-      expect(row.props('directory')).toBe('checkpoints')
+      const { container } = mountCard({ showNodeIdBadge: true })
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      const row = container.querySelector('.model-row')
+      expect(row).not.toBeNull()
+      expect(row!.getAttribute('data-show-node-id-badge')).toBe('true')
+      expect(row!.getAttribute('data-is-asset-supported')).toBe('true')
+      expect(row!.getAttribute('data-directory')).toBe('checkpoints')
     })
   })
 
   describe('Asset Unsupported Group', () => {
     it('shows "Import Not Supported" header for unsupported groups', () => {
-      const wrapper = mountCard({
+      const { container } = mountCard({
         missingModelGroups: [makeGroup({ isAssetSupported: false })]
       })
-      expect(wrapper.text()).toContain('Import Not Supported')
+      expect(container.textContent).toContain('Import Not Supported')
     })
 
     it('shows info notice for unsupported groups', () => {
-      const wrapper = mountCard({
+      const { container } = mountCard({
         missingModelGroups: [makeGroup({ isAssetSupported: false })]
       })
-      expect(wrapper.text()).toContain(
+      expect(container.textContent).toContain(
         'Cloud environment does not support model imports'
       )
     })
 
     it('hides info notice for supported groups', () => {
-      const wrapper = mountCard({
+      const { container } = mountCard({
         missingModelGroups: [makeGroup({ isAssetSupported: true })]
       })
-      expect(wrapper.text()).not.toContain(
+      expect(container.textContent).not.toContain(
         'Cloud environment does not support model imports'
       )
     })
@@ -195,11 +199,11 @@ describe('MissingModelCard', () => {
 
   describe('Event Handling', () => {
     it('emits locateModel when child emits locate-model', async () => {
-      const wrapper = mountCard()
-      const row = wrapper.findComponent({ name: 'MissingModelRow' })
-      await row.vm.$emit('locate-model', '42')
-      expect(wrapper.emitted('locateModel')).toBeTruthy()
-      expect(wrapper.emitted('locateModel')?.[0]).toEqual(['42'])
+      const onLocateModel = vi.fn()
+      mountCard({}, onLocateModel)
+      const locateButton = screen.getByRole('button', { name: 'Locate' })
+      await userEvent.click(locateButton)
+      expect(onLocateModel).toHaveBeenCalledWith('1')
     })
   })
 })
@@ -214,31 +218,31 @@ describe('MissingModelCard (OSS)', () => {
   })
 
   it('shows directory name instead of "Import Not Supported" for unsupported groups', () => {
-    const wrapper = mountCard({
+    const { container } = mountCard({
       missingModelGroups: [
         makeGroup({ directory: 'checkpoints', isAssetSupported: false })
       ]
     })
-    expect(wrapper.text()).toContain('checkpoints')
-    expect(wrapper.text()).not.toContain('Import Not Supported')
+    expect(container.textContent).toContain('checkpoints')
+    expect(container.textContent).not.toContain('Import Not Supported')
   })
 
   it('hides info notice for unsupported groups', () => {
-    const wrapper = mountCard({
+    const { container } = mountCard({
       missingModelGroups: [makeGroup({ isAssetSupported: false })]
     })
-    expect(wrapper.text()).not.toContain(
+    expect(container.textContent).not.toContain(
       'Cloud environment does not support model imports'
     )
   })
 
   it('renders unknown category for null directory in OSS', () => {
-    const wrapper = mountCard({
+    const { container } = mountCard({
       missingModelGroups: [
         makeGroup({ directory: null, isAssetSupported: false })
       ]
     })
-    expect(wrapper.text()).toContain('Unknown Category')
-    expect(wrapper.text()).not.toContain('Import Not Supported')
+    expect(container.textContent).toContain('Unknown Category')
+    expect(container.textContent).not.toContain('Import Not Supported')
   })
 })
diff --git a/src/platform/missingModel/components/MissingModelCard.vue b/src/platform/missingModel/components/MissingModelCard.vue
index 1176f0cb0f..4f27090e83 100644
--- a/src/platform/missingModel/components/MissingModelCard.vue
+++ b/src/platform/missingModel/components/MissingModelCard.vue
@@ -38,6 +38,7 @@
       <!-- Asset unsupported group notice -->
       <div
         v-if="isCloud && !group.isAssetSupported"
+        data-testid="missing-model-import-unsupported"
         class="flex items-start gap-1.5 px-0.5 py-1 pl-2"
       >
         <i
diff --git a/src/platform/missingModel/components/MissingModelRow.vue b/src/platform/missingModel/components/MissingModelRow.vue
index 511252057b..b6269c7924 100644
--- a/src/platform/missingModel/components/MissingModelRow.vue
+++ b/src/platform/missingModel/components/MissingModelRow.vue
@@ -16,6 +16,7 @@
         </p>
 
         <Button
+          data-testid="missing-model-copy-name"
           variant="textonly"
           size="icon-sm"
           class="size-8 shrink-0 hover:bg-transparent"
@@ -32,6 +33,7 @@
 
       <Button
         v-if="!isCloud && model.representative.url && !isAssetSupported"
+        data-testid="missing-model-copy-url"
         variant="secondary"
         size="sm"
         class="h-8 shrink-0 rounded-lg text-sm"
@@ -62,6 +64,7 @@
 
       <Button
         v-if="model.referencingNodes.length > 0"
+        data-testid="missing-model-expand"
         variant="textonly"
         size="icon-sm"
         :aria-label="
@@ -106,6 +109,7 @@
             {{ getNodeDisplayLabel(ref.nodeId, model.representative.nodeType) }}
           </p>
           <Button
+            data-testid="missing-model-locate"
             variant="textonly"
             size="icon-sm"
             :aria-label="t('rightSidePanel.missingModels.locateNode')"
@@ -148,6 +152,7 @@
           class="flex w-full items-start py-1"
         >
           <Button
+            data-testid="missing-model-download"
             variant="secondary"
             size="md"
             class="flex w-full flex-1"
@@ -179,7 +184,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onMounted } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 import { cn } from '@/utils/tailwindUtil'
@@ -201,6 +206,7 @@ import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { isCloud } from '@/platform/distribution/types'
 import {
   downloadModel,
+  fetchModelMetadata,
   isModelDownloadable,
   toBrowsableUrl
 } from '@/platform/missingModel/missingModelDownload'
@@ -239,6 +245,24 @@ const store = useMissingModelStore()
 const { selectedLibraryModel, importCategoryMismatch, urlInputs } =
   storeToRefs(store)
 
+onMounted(() => {
+  const url = model.representative.url
+  if (url && !store.fileSizes[url]) {
+    fetchModelMetadata(url)
+      .then((metadata) => {
+        if (metadata.fileSize !== null) {
+          store.setFileSize(url, metadata.fileSize)
+        }
+      })
+      .catch((error: unknown) => {
+        console.warn(
+          `[MissingModelRow] Failed to fetch metadata for ${url}:`,
+          error
+        )
+      })
+  }
+})
+
 const downloadable = computed(() => {
   const rep = model.representative
   return !!(
diff --git a/src/platform/missingModel/components/MissingModelUrlInput.test.ts b/src/platform/missingModel/components/MissingModelUrlInput.test.ts
index 563b134197..5f792a3dc1 100644
--- a/src/platform/missingModel/components/MissingModelUrlInput.test.ts
+++ b/src/platform/missingModel/components/MissingModelUrlInput.test.ts
@@ -1,4 +1,5 @@
-import { mount } from '@vue/test-utils'
+import { render, screen, fireEvent } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
@@ -72,14 +73,14 @@ const i18n = createI18n({
 
 const MODEL_KEY = 'supported::checkpoints::model.safetensors'
 
-function mountComponent(
+function renderComponent(
   props: Partial<{
     modelKey: string
     directory: string | null
     typeMismatch: string | null
   }> = {}
 ) {
-  return mount(MissingModelUrlInput, {
+  return render(MissingModelUrlInput, {
     props: {
       modelKey: MODEL_KEY,
       directory: 'checkpoints',
@@ -104,24 +105,25 @@ describe('MissingModelUrlInput', () => {
   describe('URL input is always editable', () => {
     it('input is editable when privateModelsEnabled is true', () => {
       mockPrivateModelsEnabled.value = true
-      const wrapper = mountComponent()
-      const input = wrapper.find('input')
-      expect(input.attributes('readonly')).toBeUndefined()
+      renderComponent()
+      const input = screen.getByRole('textbox')
+      expect(input).not.toHaveAttribute('readonly')
     })
 
     it('input is editable when privateModelsEnabled is false (free tier)', () => {
       mockPrivateModelsEnabled.value = false
-      const wrapper = mountComponent()
-      const input = wrapper.find('input')
-      expect(input.attributes('readonly')).toBeUndefined()
+      renderComponent()
+      const input = screen.getByRole('textbox')
+      expect(input).not.toHaveAttribute('readonly')
     })
 
     it('input accepts user typing when privateModelsEnabled is false', async () => {
       mockPrivateModelsEnabled.value = false
-      const wrapper = mountComponent()
-      const input = wrapper.find('input')
-      input.element.value = 'https://example.com/model.safetensors'
-      await input.trigger('input')
+      renderComponent()
+      const input = screen.getByRole('textbox') as HTMLInputElement
+      input.value = 'https://example.com/model.safetensors'
+      // eslint-disable-next-line testing-library/prefer-user-event
+      await fireEvent.input(input)
       expect(mockHandleUrlInput).toHaveBeenCalledWith(
         MODEL_KEY,
         'https://example.com/model.safetensors'
@@ -132,6 +134,7 @@ describe('MissingModelUrlInput', () => {
   describe('Import button gates on subscription', () => {
     it('calls handleImport when privateModelsEnabled is true', async () => {
       mockPrivateModelsEnabled.value = true
+      const user = userEvent.setup()
       const store = useMissingModelStore()
       store.urlMetadata[MODEL_KEY] = {
         filename: 'model.safetensors',
@@ -139,12 +142,10 @@ describe('MissingModelUrlInput', () => {
         final_url: 'https://example.com/model.safetensors'
       }
 
-      const wrapper = mountComponent()
-      const importBtn = wrapper
-        .findAll('button')
-        .find((b) => b.text().includes('Import'))
-      expect(importBtn).toBeTruthy()
-      await importBtn!.trigger('click')
+      renderComponent()
+      const importBtn = screen.getByRole('button', { name: /Import/ })
+      expect(importBtn).toBeInTheDocument()
+      await user.click(importBtn)
 
       expect(mockHandleImport).toHaveBeenCalledWith(MODEL_KEY, 'checkpoints')
       expect(mockShowUploadDialog).not.toHaveBeenCalled()
@@ -152,6 +153,7 @@ describe('MissingModelUrlInput', () => {
 
     it('calls showUploadDialog when privateModelsEnabled is false (free tier)', async () => {
       mockPrivateModelsEnabled.value = false
+      const user = userEvent.setup()
       const store = useMissingModelStore()
       store.urlMetadata[MODEL_KEY] = {
         filename: 'model.safetensors',
@@ -159,12 +161,10 @@ describe('MissingModelUrlInput', () => {
         final_url: 'https://example.com/model.safetensors'
       }
 
-      const wrapper = mountComponent()
-      const importBtn = wrapper
-        .findAll('button')
-        .find((b) => b.text().includes('Import'))
-      expect(importBtn).toBeTruthy()
-      await importBtn!.trigger('click')
+      renderComponent()
+      const importBtn = screen.getByRole('button', { name: /Import/ })
+      expect(importBtn).toBeInTheDocument()
+      await user.click(importBtn)
 
       expect(mockShowUploadDialog).toHaveBeenCalled()
       expect(mockHandleImport).not.toHaveBeenCalled()
@@ -172,11 +172,12 @@ describe('MissingModelUrlInput', () => {
 
     it('clear button works for free-tier users', async () => {
       mockPrivateModelsEnabled.value = false
+      const user = userEvent.setup()
       const store = useMissingModelStore()
       store.urlInputs[MODEL_KEY] = 'https://example.com/model.safetensors'
-      const wrapper = mountComponent()
-      const clearBtn = wrapper.find('button[aria-label="Clear URL"]')
-      await clearBtn.trigger('click')
+      renderComponent()
+      const clearBtn = screen.getByRole('button', { name: 'Clear URL' })
+      await user.click(clearBtn)
       expect(mockHandleUrlInput).toHaveBeenCalledWith(MODEL_KEY, '')
     })
   })
diff --git a/src/platform/missingModel/missingModelScan.test.ts b/src/platform/missingModel/missingModelScan.test.ts
index 4c098d8619..cc26dbc609 100644
--- a/src/platform/missingModel/missingModelScan.test.ts
+++ b/src/platform/missingModel/missingModelScan.test.ts
@@ -1,20 +1,24 @@
+import { fromAny, fromPartial } from '@total-typescript/shoehorn'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import {
-  scanAllModelCandidates,
-  isModelFileName,
-  enrichWithEmbeddedMetadata,
-  verifyAssetSupportedCandidates,
-  MODEL_FILE_EXTENSIONS
-} from '@/platform/missingModel/missingModelScan'
-import type { MissingModelCandidate } from '@/platform/missingModel/types'
-import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type { LGraph } from '@/lib/litegraph/src/LGraph'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import type {
   IBaseWidget,
   IComboWidget
 } from '@/lib/litegraph/src/types/widgets'
+import {
+  scanAllModelCandidates,
+  scanNodeModelCandidates,
+  isModelFileName,
+  enrichWithEmbeddedMetadata,
+  verifyAssetSupportedCandidates,
+  MODEL_FILE_EXTENSIONS
+} from '@/platform/missingModel/missingModelScan'
+import activeSubgraphUnmatchedModel from '@/platform/missingModel/__fixtures__/activeSubgraphUnmatchedModel.json' with { type: 'json' }
+import bypassedSubgraphUnmatchedModel from '@/platform/missingModel/__fixtures__/bypassedSubgraphUnmatchedModel.json' with { type: 'json' }
+import type { MissingModelCandidate } from '@/platform/missingModel/types'
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 
 vi.mock('@/utils/graphTraversalUtil', () => ({
   collectAllNodes: (graph: { _testNodes: LGraphNode[] }) => graph._testNodes,
@@ -30,32 +34,32 @@ function makeComboWidget(
   value: string | number,
   options: string[] = []
 ): IComboWidget {
-  return {
+  return fromAny<IComboWidget, unknown>({
     type: 'combo',
     name,
     value,
     options: { values: options }
-  } as unknown as IComboWidget
+  })
 }
 
 /** Helper: create an asset widget mock (Cloud combo replacement) */
 function makeAssetWidget(name: string, value: string): IBaseWidget {
-  return {
+  return fromAny<IBaseWidget, unknown>({
     type: 'asset',
     name,
     value,
     options: {}
-  } as unknown as IBaseWidget
+  })
 }
 
 /** Helper: create a non-combo widget mock */
 function makeOtherWidget(name: string, value: unknown): IBaseWidget {
-  return {
+  return fromAny<IBaseWidget, unknown>({
     type: 'number',
     name,
     value,
     options: {}
-  } as unknown as IBaseWidget
+  })
 }
 
 /** Helper: create a mock LGraphNode with configured widgets */
@@ -65,17 +69,17 @@ function makeNode(
   widgets: IBaseWidget[] = [],
   executionId?: string
 ): LGraphNode {
-  return {
+  return fromAny<LGraphNode, unknown>({
     id,
     type,
     widgets,
     _testExecutionId: executionId
-  } as unknown as LGraphNode
+  })
 }
 
 /** Helper: create a mock LGraph containing given nodes */
 function makeGraph(nodes: LGraphNode[]): LGraph {
-  return { _testNodes: nodes } as unknown as LGraph
+  return fromAny<LGraph, unknown>({ _testNodes: nodes })
 }
 
 const noAssetSupport = () => false
@@ -110,6 +114,180 @@ describe('MODEL_FILE_EXTENSIONS', () => {
   })
 })
 
+describe('scanNodeModelCandidates', () => {
+  it('returns candidates for a node with a missing model combo widget', () => {
+    const graph = makeGraph([])
+    const node = makeNode(1, 'CheckpointLoaderSimple', [
+      makeComboWidget('ckpt_name', 'missing_model.safetensors', [
+        'existing_model.safetensors'
+      ])
+    ])
+
+    const result = scanNodeModelCandidates(graph, node, noAssetSupport)
+
+    expect(result).toHaveLength(1)
+    expect(result[0]).toEqual({
+      nodeId: '1',
+      nodeType: 'CheckpointLoaderSimple',
+      widgetName: 'ckpt_name',
+      isAssetSupported: false,
+      name: 'missing_model.safetensors',
+      isMissing: true
+    })
+  })
+
+  it('returns empty array for node with no widgets', () => {
+    const graph = makeGraph([])
+    const node = makeNode(1, 'EmptyNode', [])
+
+    const result = scanNodeModelCandidates(graph, node, noAssetSupport)
+
+    expect(result).toEqual([])
+  })
+
+  it('returns empty array when executionId is null', () => {
+    const graph = makeGraph([])
+    const node = makeNode(
+      1,
+      'CheckpointLoaderSimple',
+      [makeComboWidget('ckpt_name', 'model.safetensors', [])],
+      ''
+    )
+
+    const result = scanNodeModelCandidates(graph, node, noAssetSupport)
+
+    expect(result).toEqual([])
+  })
+
+  it('enriches candidates with url/hash/directory from node.properties.models', () => {
+    // Regression: bypass/un-bypass cycle previously lost url metadata
+    // because realtime scan only reads widget values. Per-node embedded
+    // metadata in `properties.models` persists across mode toggles, so
+    // the scan now enriches candidates from that source.
+    const graph = makeGraph([])
+    const node = fromAny<LGraphNode, unknown>({
+      id: 1,
+      type: 'CheckpointLoaderSimple',
+      widgets: [
+        makeComboWidget('ckpt_name', 'missing_model.safetensors', [
+          'other_model.safetensors'
+        ])
+      ],
+      properties: {
+        models: [
+          {
+            name: 'missing_model.safetensors',
+            url: 'https://example.com/missing_model',
+            directory: 'checkpoints',
+            hash: 'abc123',
+            hash_type: 'sha256'
+          }
+        ]
+      }
+    })
+
+    const result = scanNodeModelCandidates(graph, node, noAssetSupport)
+
+    expect(result).toHaveLength(1)
+    expect(result[0].url).toBe('https://example.com/missing_model')
+    expect(result[0].directory).toBe('checkpoints')
+    expect(result[0].hash).toBe('abc123')
+    expect(result[0].hashType).toBe('sha256')
+  })
+
+  it('preserves existing candidate fields when enriching (no overwrite)', () => {
+    const graph = makeGraph([])
+    const node = fromAny<LGraphNode, unknown>({
+      id: 1,
+      type: 'CheckpointLoaderSimple',
+      widgets: [makeComboWidget('ckpt_name', 'missing_model.safetensors', [])],
+      properties: {
+        models: [
+          {
+            name: 'missing_model.safetensors',
+            url: 'https://example.com/new_url',
+            directory: 'checkpoints'
+          }
+        ]
+      }
+    })
+
+    const result = scanNodeModelCandidates(
+      graph,
+      node,
+      noAssetSupport,
+      () => 'checkpoints'
+    )
+
+    expect(result).toHaveLength(1)
+    // scanComboWidget already sets directory via getDirectory; enrichment
+    // does not overwrite it.
+    expect(result[0].directory).toBe('checkpoints')
+    // url was not set by scan, so enrichment fills it in.
+    expect(result[0].url).toBe('https://example.com/new_url')
+  })
+
+  it('skips enrichment when candidate and embedded model directories differ', () => {
+    // A node can list the same model name under multiple directories
+    // (e.g. a LoRA present in both `loras` and `loras/subdir`). Name-only
+    // matching would stamp the wrong url/hash onto the candidate, so
+    // enrichment must agree on directory when the candidate already has
+    // one.
+    const graph = makeGraph([])
+    const node = fromAny<LGraphNode, unknown>({
+      id: 1,
+      type: 'CheckpointLoaderSimple',
+      widgets: [
+        makeComboWidget('ckpt_name', 'collision_model.safetensors', [])
+      ],
+      properties: {
+        models: [
+          {
+            name: 'collision_model.safetensors',
+            url: 'https://example.com/wrong_dir_url',
+            directory: 'wrong_dir'
+          }
+        ]
+      }
+    })
+
+    const result = scanNodeModelCandidates(
+      graph,
+      node,
+      noAssetSupport,
+      () => 'checkpoints'
+    )
+
+    expect(result).toHaveLength(1)
+    expect(result[0].directory).toBe('checkpoints')
+    // Directory mismatch — enrichment should not stamp the wrong url.
+    expect(result[0].url).toBeUndefined()
+  })
+
+  it('does not enrich candidates with mismatched model names', () => {
+    const graph = makeGraph([])
+    const node = fromAny<LGraphNode, unknown>({
+      id: 1,
+      type: 'CheckpointLoaderSimple',
+      widgets: [makeComboWidget('ckpt_name', 'missing_model.safetensors', [])],
+      properties: {
+        models: [
+          {
+            name: 'different_model.safetensors',
+            url: 'https://example.com/different',
+            directory: 'checkpoints'
+          }
+        ]
+      }
+    })
+
+    const result = scanNodeModelCandidates(graph, node, noAssetSupport)
+
+    expect(result).toHaveLength(1)
+    expect(result[0].url).toBeUndefined()
+  })
+})
+
 describe('scanAllModelCandidates', () => {
   it('should detect a missing model from a combo widget', () => {
     const graph = makeGraph([
@@ -389,14 +567,66 @@ describe('scanAllModelCandidates', () => {
     expect(result[1].widgetName).toBe('vae_name')
   })
 
+  it('skips muted nodes (mode === NEVER)', () => {
+    const mutedNode = fromAny<LGraphNode, unknown>({
+      id: 10,
+      type: 'CheckpointLoaderSimple',
+      widgets: [
+        makeComboWidget('ckpt_name', 'model.safetensors', ['other.safetensors'])
+      ],
+      mode: 2, // LGraphEventMode.NEVER
+      _testExecutionId: '10'
+    })
+
+    const graph = makeGraph([mutedNode])
+    const result = scanAllModelCandidates(graph, noAssetSupport)
+
+    expect(result).toHaveLength(0)
+  })
+
+  it('skips bypassed nodes (mode === BYPASS)', () => {
+    const bypassedNode = fromAny<LGraphNode, unknown>({
+      id: 11,
+      type: 'CheckpointLoaderSimple',
+      widgets: [
+        makeComboWidget('ckpt_name', 'model.safetensors', ['other.safetensors'])
+      ],
+      mode: 4, // LGraphEventMode.BYPASS
+      _testExecutionId: '11'
+    })
+
+    const graph = makeGraph([bypassedNode])
+    const result = scanAllModelCandidates(graph, noAssetSupport)
+
+    expect(result).toHaveLength(0)
+  })
+
+  it('includes active nodes (mode === ALWAYS)', () => {
+    const activeNode = fromAny<LGraphNode, unknown>({
+      id: 12,
+      type: 'CheckpointLoaderSimple',
+      widgets: [
+        makeComboWidget('ckpt_name', 'model.safetensors', ['other.safetensors'])
+      ],
+      mode: 0, // LGraphEventMode.ALWAYS
+      _testExecutionId: '12'
+    })
+
+    const graph = makeGraph([activeNode])
+    const result = scanAllModelCandidates(graph, noAssetSupport)
+
+    expect(result).toHaveLength(1)
+    expect(result[0].isMissing).toBe(true)
+  })
+
   it('skips subgraph container nodes whose promoted widgets are already scanned via interior nodes', () => {
-    const containerNode = {
+    const containerNode = fromAny<LGraphNode, unknown>({
       id: 65,
       type: 'abc-def-uuid',
       widgets: [makeComboWidget('ckpt_name', 'model.safetensors', [])],
       isSubgraphNode: () => true,
       _testExecutionId: '65'
-    } as unknown as LGraphNode
+    })
 
     const interiorNode = makeNode(
       42,
@@ -437,7 +667,7 @@ const alwaysInstalled = async () => true
 describe('enrichWithEmbeddedMetadata', () => {
   it('enriches existing candidate with url and directory from embedded metadata', async () => {
     const candidates = [makeCandidate('model_a.safetensors')]
-    const graphData = {
+    const graphData = fromPartial<ComfyWorkflowJSON>({
       last_node_id: 1,
       last_link_id: 0,
       nodes: [
@@ -467,7 +697,7 @@ describe('enrichWithEmbeddedMetadata', () => {
           hash_type: 'sha256'
         }
       ]
-    } as unknown as ComfyWorkflowJSON
+    })
 
     const result = await enrichWithEmbeddedMetadata(
       candidates,
@@ -487,7 +717,7 @@ describe('enrichWithEmbeddedMetadata', () => {
         url: 'https://existing.com'
       })
     ]
-    const graphData = {
+    const graphData = fromPartial<ComfyWorkflowJSON>({
       last_node_id: 1,
       last_link_id: 0,
       nodes: [
@@ -515,7 +745,7 @@ describe('enrichWithEmbeddedMetadata', () => {
           directory: 'new_dir'
         }
       ]
-    } as unknown as ComfyWorkflowJSON
+    })
 
     const result = await enrichWithEmbeddedMetadata(
       candidates,
@@ -530,7 +760,7 @@ describe('enrichWithEmbeddedMetadata', () => {
 
   it('does not mutate the original candidates array', async () => {
     const candidates = [makeCandidate('model_a.safetensors')]
-    const graphData = {
+    const graphData = fromPartial<ComfyWorkflowJSON>({
       last_node_id: 1,
       last_link_id: 0,
       nodes: [
@@ -558,7 +788,7 @@ describe('enrichWithEmbeddedMetadata', () => {
           directory: 'checkpoints'
         }
       ]
-    } as unknown as ComfyWorkflowJSON
+    })
 
     const originalUrl = candidates[0].url
     await enrichWithEmbeddedMetadata(candidates, graphData, alwaysMissing)
@@ -568,7 +798,7 @@ describe('enrichWithEmbeddedMetadata', () => {
 
   it('adds new candidate for embedded model not found by COMBO scan', async () => {
     const candidates: MissingModelCandidate[] = []
-    const graphData = {
+    const graphData = fromPartial<ComfyWorkflowJSON>({
       last_node_id: 1,
       last_link_id: 0,
       nodes: [
@@ -596,7 +826,7 @@ describe('enrichWithEmbeddedMetadata', () => {
           directory: 'checkpoints'
         }
       ]
-    } as unknown as ComfyWorkflowJSON
+    })
 
     const result = await enrichWithEmbeddedMetadata(
       candidates,
@@ -611,7 +841,7 @@ describe('enrichWithEmbeddedMetadata', () => {
 
   it('does not add candidate when model is already installed', async () => {
     const candidates: MissingModelCandidate[] = []
-    const graphData = {
+    const graphData = fromPartial<ComfyWorkflowJSON>({
       last_node_id: 0,
       last_link_id: 0,
       nodes: [],
@@ -627,7 +857,7 @@ describe('enrichWithEmbeddedMetadata', () => {
           directory: 'checkpoints'
         }
       ]
-    } as unknown as ComfyWorkflowJSON
+    })
 
     const result = await enrichWithEmbeddedMetadata(
       candidates,
@@ -637,6 +867,274 @@ describe('enrichWithEmbeddedMetadata', () => {
 
     expect(result).toHaveLength(0)
   })
+
+  it('skips embedded models from muted nodes', async () => {
+    const candidates: MissingModelCandidate[] = []
+    const graphData = fromPartial<ComfyWorkflowJSON>({
+      last_node_id: 1,
+      last_link_id: 0,
+      nodes: [
+        {
+          id: 1,
+          type: 'CheckpointLoaderSimple',
+          pos: [0, 0],
+          size: [100, 100],
+          flags: {},
+          order: 0,
+          mode: 2, // NEVER (muted)
+          properties: {},
+          widgets_values: { ckpt_name: 'model.safetensors' }
+        }
+      ],
+      links: [],
+      groups: [],
+      config: {},
+      extra: {},
+      version: 0.4,
+      models: [
+        {
+          name: 'model.safetensors',
+          url: 'https://example.com/model',
+          directory: 'checkpoints'
+        }
+      ]
+    })
+
+    const result = await enrichWithEmbeddedMetadata(
+      candidates,
+      graphData,
+      alwaysMissing
+    )
+
+    expect(result).toHaveLength(0)
+  })
+
+  it('drops workflow-level model entries when only referencing nodes are bypassed (other active nodes present)', async () => {
+    // Regression: a previous `hasActiveNodes` check kept workflow-level
+    // models in a mixed graph if ANY active node existed, even when every
+    // node that actually referenced the model was bypassed. The correct
+    // check drops unmatched workflow-level entries since candidates are
+    // derived from active-node widgets.
+    const candidates: MissingModelCandidate[] = []
+    const graphData = fromPartial<ComfyWorkflowJSON>({
+      last_node_id: 2,
+      last_link_id: 0,
+      nodes: [
+        {
+          id: 1,
+          type: 'CheckpointLoaderSimple',
+          pos: [0, 0],
+          size: [100, 100],
+          flags: {},
+          order: 0,
+          mode: 4, // BYPASS — only node referencing the model
+          properties: {},
+          widgets_values: { ckpt_name: 'model.safetensors' }
+        },
+        {
+          id: 2,
+          type: 'KSampler',
+          pos: [200, 0],
+          size: [100, 100],
+          flags: {},
+          order: 1,
+          mode: 0, // ALWAYS — unrelated active node
+          properties: {},
+          widgets_values: {}
+        }
+      ],
+      links: [],
+      groups: [],
+      config: {},
+      extra: {},
+      version: 0.4,
+      models: [
+        {
+          name: 'model.safetensors',
+          url: 'https://example.com/model',
+          directory: 'checkpoints'
+        }
+      ]
+    })
+
+    const result = await enrichWithEmbeddedMetadata(
+      candidates,
+      graphData,
+      alwaysMissing
+    )
+
+    expect(result).toHaveLength(0)
+  })
+
+  it('keeps unmatched node-sourced entries in a mixed graph', async () => {
+    // A node-sourced unmatched entry (sourceNodeType !== '') must survive
+    // the workflow-level filter. This ensures the simplification does not
+    // over-filter legitimate per-node missing models.
+    const candidates = [
+      makeCandidate('node_model.safetensors', { nodeId: '1' })
+    ]
+    const graphData = fromPartial<ComfyWorkflowJSON>({
+      last_node_id: 1,
+      last_link_id: 0,
+      nodes: [
+        {
+          id: 1,
+          type: 'CheckpointLoaderSimple',
+          pos: [0, 0],
+          size: [100, 100],
+          flags: {},
+          order: 0,
+          mode: 0,
+          properties: {
+            models: [
+              {
+                name: 'node_model.safetensors',
+                url: 'https://example.com/node_model',
+                directory: 'checkpoints'
+              }
+            ]
+          },
+          widgets_values: { ckpt_name: 'node_model.safetensors' }
+        }
+      ],
+      links: [],
+      groups: [],
+      config: {},
+      extra: {},
+      version: 0.4,
+      models: []
+    })
+
+    const result = await enrichWithEmbeddedMetadata(
+      candidates,
+      graphData,
+      alwaysMissing
+    )
+
+    expect(result).toHaveLength(1)
+    expect(result[0].name).toBe('node_model.safetensors')
+  })
+
+  it('skips embedded models from bypassed nodes', async () => {
+    const candidates: MissingModelCandidate[] = []
+    const graphData = fromPartial<ComfyWorkflowJSON>({
+      last_node_id: 1,
+      last_link_id: 0,
+      nodes: [
+        {
+          id: 1,
+          type: 'CheckpointLoaderSimple',
+          pos: [0, 0],
+          size: [100, 100],
+          flags: {},
+          order: 0,
+          mode: 4, // BYPASS
+          properties: {},
+          widgets_values: { ckpt_name: 'model.safetensors' }
+        }
+      ],
+      links: [],
+      groups: [],
+      config: {},
+      extra: {},
+      version: 0.4,
+      models: [
+        {
+          name: 'model.safetensors',
+          url: 'https://example.com/model',
+          directory: 'checkpoints'
+        }
+      ]
+    })
+
+    const result = await enrichWithEmbeddedMetadata(
+      candidates,
+      graphData,
+      alwaysMissing
+    )
+
+    expect(result).toHaveLength(0)
+  })
+
+  it('drops workflow-level entries when only reference is in a bypassed subgraph interior', async () => {
+    // Interior properties.models references the workflow-level model
+    // but its widget value does not — forcing the workflow-level entry
+    // down the unmatched path where isModelReferencedByActiveNode
+    // decides. Previously the helper ignored the bypassed container.
+    const result = await enrichWithEmbeddedMetadata(
+      [],
+      fromAny<ComfyWorkflowJSON, unknown>(bypassedSubgraphUnmatchedModel),
+      alwaysMissing
+    )
+
+    expect(result).toHaveLength(0)
+  })
+
+  it('keeps workflow-level entries when reference is in an active subgraph interior', async () => {
+    // Positive control for the bypassed case above: identical fixture
+    // with container mode=0 must still surface the unmatched workflow-
+    // level model. Guards against a regression where the ancestor gate
+    // drops every workflow-level entry regardless of context.
+    const result = await enrichWithEmbeddedMetadata(
+      [],
+      fromAny<ComfyWorkflowJSON, unknown>(activeSubgraphUnmatchedModel),
+      alwaysMissing
+    )
+
+    expect(result).toHaveLength(1)
+    expect(result[0].name).toBe('rare_model.safetensors')
+  })
+
+  it('drops workflow-level entries when interior reference is under a different directory', async () => {
+    // Same name, different directory: the interior's properties.models
+    // entry is not the same asset as the workflow-level entry, so the
+    // fallback helper must not treat it as a reference that keeps the
+    // workflow-level model alive.
+    const graphData = fromPartial<ComfyWorkflowJSON>({
+      last_node_id: 1,
+      last_link_id: 0,
+      nodes: [
+        {
+          id: 1,
+          type: 'CheckpointLoaderSimple',
+          pos: [0, 0],
+          size: [100, 100],
+          flags: {},
+          order: 0,
+          mode: 0,
+          properties: {
+            models: [
+              {
+                name: 'collide_model.safetensors',
+                directory: 'loras'
+              }
+            ]
+          },
+          widgets_values: ['unrelated_widget.safetensors']
+        }
+      ],
+      links: [],
+      groups: [],
+      config: {},
+      extra: {},
+      version: 0.4,
+      models: [
+        {
+          name: 'collide_model.safetensors',
+          url: 'https://example.com/collide',
+          directory: 'checkpoints'
+        }
+      ]
+    })
+
+    const result = await enrichWithEmbeddedMetadata(
+      [],
+      graphData,
+      alwaysMissing
+    )
+
+    expect(result).toHaveLength(0)
+  })
 })
 
 describe('OSS missing model detection (non-Cloud path)', () => {
@@ -662,7 +1160,7 @@ describe('OSS missing model detection (non-Cloud path)', () => {
     // OSS path: candidates start empty, enrichWithEmbeddedMetadata adds
     // missing embedded models so the dialog can show them.
     const candidates: MissingModelCandidate[] = []
-    const graphData = {
+    const graphData = fromPartial<ComfyWorkflowJSON>({
       last_node_id: 2,
       last_link_id: 0,
       nodes: [
@@ -706,7 +1204,7 @@ describe('OSS missing model detection (non-Cloud path)', () => {
           directory: 'loras'
         }
       ]
-    } as unknown as ComfyWorkflowJSON
+    })
 
     const result = await enrichWithEmbeddedMetadata(
       candidates,
@@ -726,7 +1224,7 @@ describe('OSS missing model detection (non-Cloud path)', () => {
     // When isAssetSupported is omitted (OSS), unmatched embedded models
     // should have isMissing=true (not undefined), enabling the dialog.
     const candidates: MissingModelCandidate[] = []
-    const graphData = {
+    const graphData = fromPartial<ComfyWorkflowJSON>({
       last_node_id: 1,
       last_link_id: 0,
       nodes: [
@@ -754,7 +1252,7 @@ describe('OSS missing model detection (non-Cloud path)', () => {
           directory: 'checkpoints'
         }
       ]
-    } as unknown as ComfyWorkflowJSON
+    })
 
     const result = await enrichWithEmbeddedMetadata(
       candidates,
@@ -769,7 +1267,7 @@ describe('OSS missing model detection (non-Cloud path)', () => {
 
   it('enrichWithEmbeddedMetadata correctly filters for dialog: only isMissing=true with url', async () => {
     const candidates: MissingModelCandidate[] = []
-    const graphData = {
+    const graphData = fromPartial<ComfyWorkflowJSON>({
       last_node_id: 1,
       last_link_id: 0,
       nodes: [
@@ -802,7 +1300,7 @@ describe('OSS missing model detection (non-Cloud path)', () => {
           directory: 'checkpoints'
         }
       ]
-    } as unknown as ComfyWorkflowJSON
+    })
 
     const selectiveInstallCheck = async (name: string) =>
       name === 'installed_model.safetensors'
@@ -821,7 +1319,7 @@ describe('OSS missing model detection (non-Cloud path)', () => {
 
   it('enrichWithEmbeddedMetadata with isAssetSupported leaves isMissing undefined for asset-supported models (Cloud path)', async () => {
     const candidates: MissingModelCandidate[] = []
-    const graphData = {
+    const graphData = fromPartial<ComfyWorkflowJSON>({
       last_node_id: 1,
       last_link_id: 0,
       nodes: [
@@ -849,7 +1347,7 @@ describe('OSS missing model detection (non-Cloud path)', () => {
           directory: 'checkpoints'
         }
       ]
-    } as unknown as ComfyWorkflowJSON
+    })
 
     const result = await enrichWithEmbeddedMetadata(
       candidates,
diff --git a/src/platform/missingModel/missingModelScan.ts b/src/platform/missingModel/missingModelScan.ts
index 07d3568ded..54d64f4c83 100644
--- a/src/platform/missingModel/missingModelScan.ts
+++ b/src/platform/missingModel/missingModelScan.ts
@@ -1,5 +1,6 @@
 import type {
   ComfyWorkflowJSON,
+  ModelFile,
   NodeId
 } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { flattenWorkflowNodes } from '@/platform/workflow/validation/schemas/workflowSchema'
@@ -13,20 +14,57 @@ import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 // eslint-disable-next-line import-x/no-restricted-paths
 import { getSelectedModelsMetadata } from '@/workbench/utils/modelMetadataUtil'
 import type { LGraph } from '@/lib/litegraph/src/LGraph'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import type {
   IAssetWidget,
   IBaseWidget,
   IComboWidget
 } from '@/lib/litegraph/src/types/widgets'
+import { getParentExecutionIds } from '@/types/nodeIdentification'
 import {
   collectAllNodes,
   getExecutionIdByNode
 } from '@/utils/graphTraversalUtil'
+import { LGraphEventMode } from '@/lib/litegraph/src/types/globalEnums'
+import { resolveComboValues } from '@/utils/litegraphUtil'
 
 function isComboWidget(widget: IBaseWidget): widget is IComboWidget {
   return widget.type === 'combo'
 }
 
+/**
+ * Fills url/hash/directory onto a candidate from the node's embedded
+ * `properties.models` metadata when the names match. The full pipeline
+ * does this via enrichWithEmbeddedMetadata + graphData.models, but the
+ * realtime single-node scan (paste, un-bypass) otherwise loses these
+ * fields — making the Missing Model row's download/copy-url buttons
+ * disappear after a bypass/un-bypass cycle.
+ */
+function enrichCandidateFromNodeProperties(
+  candidate: MissingModelCandidate,
+  embeddedModels: readonly ModelFile[] | undefined
+): MissingModelCandidate {
+  if (!embeddedModels?.length) return candidate
+  // Require directory agreement when the candidate already has one —
+  // a single node can reference two models with the same name under
+  // different directories (e.g. a LoRA present in multiple folders);
+  // name-only matching would stamp the wrong url/hash onto the
+  // candidate. Mirrors the directory check in enrichWithEmbeddedMetadata.
+  const match = embeddedModels.find(
+    (m) =>
+      m.name === candidate.name &&
+      (!candidate.directory || candidate.directory === m.directory)
+  )
+  if (!match) return candidate
+  return {
+    ...candidate,
+    directory: candidate.directory ?? match.directory,
+    url: candidate.url ?? match.url,
+    hash: candidate.hash ?? match.hash,
+    hashType: candidate.hashType ?? match.hash_type
+  }
+}
+
 function isAssetWidget(widget: IBaseWidget): widget is IAssetWidget {
   return widget.type === 'asset'
 }
@@ -50,14 +88,6 @@ export function isModelFileName(name: string): boolean {
   return Array.from(MODEL_FILE_EXTENSIONS).some((ext) => lower.endsWith(ext))
 }
 
-function resolveComboOptions(widget: IComboWidget): string[] {
-  const values = widget.options.values
-  if (!values) return []
-  if (typeof values === 'function') return values(widget)
-  if (Array.isArray(values)) return values
-  return Object.keys(values)
-}
-
 /**
  * Scan COMBO and asset widgets on configured graph nodes for model-like values.
  * Must be called after `graph.configure()` so widget name/value mappings are accurate.
@@ -80,26 +110,59 @@ export function scanAllModelCandidates(
     // Skip subgraph container nodes: their promoted widgets are synthetic
     // views of interior widgets, which are already scanned via recursion.
     if (node.isSubgraphNode?.()) continue
+    if (
+      node.mode === LGraphEventMode.NEVER ||
+      node.mode === LGraphEventMode.BYPASS
+    )
+      continue
 
-    const executionId = getExecutionIdByNode(rootGraph, node)
-    if (!executionId) continue
+    candidates.push(
+      ...scanNodeModelCandidates(
+        rootGraph,
+        node,
+        isAssetSupported,
+        getDirectory
+      )
+    )
+  }
 
-    for (const widget of node.widgets) {
-      let candidate: MissingModelCandidate | null = null
+  return candidates
+}
 
-      if (isAssetWidget(widget)) {
-        candidate = scanAssetWidget(node, widget, executionId, getDirectory)
-      } else if (isComboWidget(widget)) {
-        candidate = scanComboWidget(
-          node,
-          widget,
-          executionId,
-          isAssetSupported,
-          getDirectory
-        )
-      }
+/** Scan a single node's widgets for missing model candidates (OSS immediate resolution). */
+export function scanNodeModelCandidates(
+  rootGraph: LGraph,
+  node: LGraphNode,
+  isAssetSupported: (nodeType: string, widgetName: string) => boolean,
+  getDirectory?: (nodeType: string) => string | undefined
+): MissingModelCandidate[] {
+  if (!node.widgets?.length) return []
 
-      if (candidate) candidates.push(candidate)
+  const executionId = getExecutionIdByNode(rootGraph, node)
+  if (!executionId) return []
+
+  const candidates: MissingModelCandidate[] = []
+  const embeddedModels = (node as { properties?: { models?: ModelFile[] } })
+    .properties?.models
+  for (const widget of node.widgets) {
+    let candidate: MissingModelCandidate | null = null
+
+    if (isAssetWidget(widget)) {
+      candidate = scanAssetWidget(node, widget, executionId, getDirectory)
+    } else if (isComboWidget(widget)) {
+      candidate = scanComboWidget(
+        node,
+        widget,
+        executionId,
+        isAssetSupported,
+        getDirectory
+      )
+    }
+
+    if (candidate) {
+      candidates.push(
+        enrichCandidateFromNodeProperties(candidate, embeddedModels)
+      )
     }
   }
 
@@ -139,7 +202,7 @@ function scanComboWidget(
   if (!isModelFileName(value)) return null
 
   const nodeIsAssetSupported = isAssetSupported(node.type, widget.name)
-  const options = resolveComboOptions(widget)
+  const options = resolveComboValues(widget)
   const inOptions = options.includes(value)
 
   return {
@@ -204,8 +267,27 @@ export async function enrichWithEmbeddedMetadata(
     }
   }
 
+  // Workflow-level entries (sourceNodeType === '') survive only when
+  // some active (non-muted, non-bypassed) node actually references the
+  // model — not merely because any unrelated active node exists. A
+  // reference is any widget value (or node.properties.models entry)
+  // that matches the model name on an active node.
+  // Hoist the id→node map once; isModelReferencedByActiveNode would
+  // otherwise rebuild it on every unmatched entry.
+  const flattenedNodeById = new Map(allNodes.map((n) => [String(n.id), n]))
+  const activeUnmatched = unmatched.filter(
+    (m) =>
+      m.sourceNodeType !== '' ||
+      isModelReferencedByActiveNode(
+        m.name,
+        m.directory,
+        allNodes,
+        flattenedNodeById
+      )
+  )
+
   const settled = await Promise.allSettled(
-    unmatched.map(async (model) => {
+    activeUnmatched.map(async (model) => {
       const installed = await checkModelInstalled(model.name, model.directory)
       if (installed) return null
 
@@ -242,6 +324,68 @@ export async function enrichWithEmbeddedMetadata(
   return enriched
 }
 
+function isModelReferencedByActiveNode(
+  modelName: string,
+  modelDirectory: string | undefined,
+  allNodes: ReturnType<typeof flattenWorkflowNodes>,
+  nodeById: Map<string, ReturnType<typeof flattenWorkflowNodes>[number]>
+): boolean {
+  for (const node of allNodes) {
+    if (
+      node.mode === LGraphEventMode.NEVER ||
+      node.mode === LGraphEventMode.BYPASS
+    )
+      continue
+    if (!isAncestorPathActiveInFlattened(String(node.id), nodeById)) continue
+
+    // Require directory agreement when both sides specify one, so a
+    // same-name entry under a different folder does not keep an
+    // unrelated workflow-level model alive as missing.
+    const embeddedModels = (
+      node.properties as
+        | { models?: Array<{ name: string; directory?: string }> }
+        | undefined
+    )?.models
+    if (
+      embeddedModels?.some(
+        (m) =>
+          m.name === modelName &&
+          (modelDirectory === undefined ||
+            m.directory === undefined ||
+            m.directory === modelDirectory)
+      )
+    ) {
+      return true
+    }
+
+    // widgets_values carries only the name, so directory cannot be
+    // checked here — fall back to filename matching.
+    const values = node.widgets_values
+    if (!values) continue
+    const valueArray = Array.isArray(values) ? values : Object.values(values)
+    for (const v of valueArray) {
+      if (typeof v === 'string' && v === modelName) return true
+    }
+  }
+  return false
+}
+
+function isAncestorPathActiveInFlattened(
+  executionId: string,
+  nodeById: Map<string, ReturnType<typeof flattenWorkflowNodes>[number]>
+): boolean {
+  for (const ancestorId of getParentExecutionIds(executionId)) {
+    const ancestor = nodeById.get(ancestorId)
+    if (!ancestor) continue
+    if (
+      ancestor.mode === LGraphEventMode.NEVER ||
+      ancestor.mode === LGraphEventMode.BYPASS
+    )
+      return false
+  }
+  return true
+}
+
 function collectEmbeddedModelsWithSource(
   allNodes: ReturnType<typeof flattenWorkflowNodes>,
   graphData: ComfyWorkflowJSON
@@ -249,6 +393,12 @@ function collectEmbeddedModelsWithSource(
   const result: EmbeddedModelWithSource[] = []
 
   for (const node of allNodes) {
+    if (
+      node.mode === LGraphEventMode.NEVER ||
+      node.mode === LGraphEventMode.BYPASS
+    )
+      continue
+
     const selected = getSelectedModelsMetadata(
       node as Parameters<typeof getSelectedModelsMetadata>[0]
     )
diff --git a/src/platform/missingModel/missingModelStore.test.ts b/src/platform/missingModel/missingModelStore.test.ts
index 3d5e9aba74..4c20708164 100644
--- a/src/platform/missingModel/missingModelStore.test.ts
+++ b/src/platform/missingModel/missingModelStore.test.ts
@@ -244,4 +244,218 @@ describe('missingModelStore', () => {
       expect(store.missingModelCandidates).toHaveLength(1)
     })
   })
+
+  describe('addMissingModels', () => {
+    it('appends to existing candidates', () => {
+      const store = useMissingModelStore()
+      store.setMissingModels([
+        makeModelCandidate('model_a.safetensors', { nodeId: '1' })
+      ])
+
+      store.addMissingModels([
+        makeModelCandidate('model_b.safetensors', { nodeId: '2' })
+      ])
+
+      expect(store.missingModelCandidates).toHaveLength(2)
+      expect(store.missingModelCandidates![0].name).toBe('model_a.safetensors')
+      expect(store.missingModelCandidates![1].name).toBe('model_b.safetensors')
+    })
+
+    it('works when store is empty (candidates are null)', () => {
+      const store = useMissingModelStore()
+      expect(store.missingModelCandidates).toBeNull()
+
+      store.addMissingModels([
+        makeModelCandidate('model_a.safetensors', { nodeId: '1' })
+      ])
+
+      expect(store.missingModelCandidates).toHaveLength(1)
+      expect(store.hasMissingModels).toBe(true)
+    })
+
+    it('does nothing when given empty array', () => {
+      const store = useMissingModelStore()
+      store.setMissingModels([
+        makeModelCandidate('model_a.safetensors', { nodeId: '1' })
+      ])
+
+      store.addMissingModels([])
+
+      expect(store.missingModelCandidates).toHaveLength(1)
+    })
+  })
+
+  describe('removeMissingModelsByNodeId', () => {
+    it('removes all candidates matching the nodeId', () => {
+      const store = useMissingModelStore()
+      store.setMissingModels([
+        makeModelCandidate('model_a.safetensors', {
+          nodeId: '1',
+          widgetName: 'ckpt_name'
+        }),
+        makeModelCandidate('model_b.safetensors', {
+          nodeId: '1',
+          widgetName: 'vae_name'
+        }),
+        makeModelCandidate('model_c.safetensors', { nodeId: '2' })
+      ])
+
+      store.removeMissingModelsByNodeId('1')
+
+      expect(store.missingModelCandidates).toHaveLength(1)
+      expect(store.missingModelCandidates![0].name).toBe('model_c.safetensors')
+    })
+
+    it('keeps candidates with non-matching nodeId', () => {
+      const store = useMissingModelStore()
+      store.setMissingModels([
+        makeModelCandidate('model_a.safetensors', { nodeId: '1' }),
+        makeModelCandidate('model_b.safetensors', { nodeId: '2' })
+      ])
+
+      store.removeMissingModelsByNodeId('99')
+
+      expect(store.missingModelCandidates).toHaveLength(2)
+    })
+
+    it('sets candidates to null when all are removed', () => {
+      const store = useMissingModelStore()
+      store.setMissingModels([
+        makeModelCandidate('model_a.safetensors', { nodeId: '1' }),
+        makeModelCandidate('model_b.safetensors', { nodeId: '1' })
+      ])
+
+      store.removeMissingModelsByNodeId('1')
+
+      expect(store.missingModelCandidates).toBeNull()
+      expect(store.hasMissingModels).toBe(false)
+    })
+
+    it('does nothing when candidates are null', () => {
+      const store = useMissingModelStore()
+      store.removeMissingModelsByNodeId('1')
+      expect(store.missingModelCandidates).toBeNull()
+    })
+  })
+
+  describe('removeMissingModelsByPrefix', () => {
+    it('removes all candidates whose nodeId starts with the prefix', () => {
+      const store = useMissingModelStore()
+      store.setMissingModels([
+        makeModelCandidate('a.safetensors', { nodeId: '65:70:63' }),
+        makeModelCandidate('b.safetensors', { nodeId: '65:70:64' }),
+        makeModelCandidate('c.safetensors', { nodeId: '65:80:5' })
+      ])
+
+      store.removeMissingModelsByPrefix('65:70:')
+
+      expect(store.missingModelCandidates).toHaveLength(1)
+      expect(store.missingModelCandidates![0].nodeId).toBe('65:80:5')
+    })
+
+    it('removes deeply nested interior nodes under the container', () => {
+      const store = useMissingModelStore()
+      store.setMissingModels([
+        makeModelCandidate('a.safetensors', { nodeId: '65:70:63' }),
+        makeModelCandidate('b.safetensors', { nodeId: '65:70:80:5' }),
+        makeModelCandidate('c.safetensors', { nodeId: '65:71:63' })
+      ])
+
+      store.removeMissingModelsByPrefix('65:70:')
+
+      expect(store.missingModelCandidates).toHaveLength(1)
+      expect(store.missingModelCandidates![0].nodeId).toBe('65:71:63')
+    })
+
+    it('does not match siblings that share a numeric prefix (trailing colon)', () => {
+      const store = useMissingModelStore()
+      store.setMissingModels([
+        makeModelCandidate('a.safetensors', { nodeId: '65:70:1' }),
+        makeModelCandidate('b.safetensors', { nodeId: '65:705:1' }),
+        makeModelCandidate('c.safetensors', { nodeId: '65:70' })
+      ])
+
+      store.removeMissingModelsByPrefix('65:70:')
+
+      expect(store.missingModelCandidates).toHaveLength(2)
+      const remainingIds = store.missingModelCandidates!.map((m) =>
+        String(m.nodeId)
+      )
+      expect(remainingIds).toContain('65:705:1')
+      expect(remainingIds).toContain('65:70')
+    })
+
+    it('sets candidates to null when all are removed', () => {
+      const store = useMissingModelStore()
+      store.setMissingModels([
+        makeModelCandidate('a.safetensors', { nodeId: '65:70:63' }),
+        makeModelCandidate('b.safetensors', { nodeId: '65:70:64' })
+      ])
+
+      store.removeMissingModelsByPrefix('65:70:')
+
+      expect(store.missingModelCandidates).toBeNull()
+      expect(store.hasMissingModels).toBe(false)
+    })
+
+    it('does nothing when no candidates match', () => {
+      const store = useMissingModelStore()
+      store.setMissingModels([
+        makeModelCandidate('a.safetensors', { nodeId: '65:71:1' })
+      ])
+
+      store.removeMissingModelsByPrefix('65:70:')
+
+      expect(store.missingModelCandidates).toHaveLength(1)
+    })
+
+    it('does nothing when candidates are null', () => {
+      const store = useMissingModelStore()
+      store.removeMissingModelsByPrefix('65:70:')
+      expect(store.missingModelCandidates).toBeNull()
+    })
+
+    it('preserves workflow-level candidates without a nodeId', () => {
+      const store = useMissingModelStore()
+      const workflowLevel: MissingModelCandidate = {
+        name: 'workflow-level.safetensors',
+        nodeType: 'CheckpointLoaderSimple',
+        widgetName: 'ckpt_name',
+        isAssetSupported: false,
+        isMissing: true
+      }
+      store.setMissingModels([
+        makeModelCandidate('a.safetensors', { nodeId: '65:70:63' }),
+        workflowLevel
+      ])
+
+      store.removeMissingModelsByPrefix('65:70:')
+
+      expect(store.missingModelCandidates).toHaveLength(1)
+      expect(store.missingModelCandidates![0].name).toBe(
+        'workflow-level.safetensors'
+      )
+    })
+
+    it('clears interaction state for removed names not used elsewhere', () => {
+      const store = useMissingModelStore()
+      store.setMissingModels([
+        makeModelCandidate('shared.safetensors', { nodeId: '65:70:63' }),
+        makeModelCandidate('shared.safetensors', { nodeId: '65:80:5' }),
+        makeModelCandidate('only-interior.safetensors', { nodeId: '65:70:64' })
+      ])
+      store.urlInputs['shared.safetensors'] = 'https://example.com/shared'
+      store.urlInputs['only-interior.safetensors'] =
+        'https://example.com/interior'
+
+      store.removeMissingModelsByPrefix('65:70:')
+
+      // 'only-interior' fully removed → interaction state cleared.
+      // 'shared' still referenced by 65:80:5 → interaction state preserved.
+      expect(store.urlInputs['only-interior.safetensors']).toBeUndefined()
+      expect(store.urlInputs['shared.safetensors']).toBe(
+        'https://example.com/shared'
+      )
+    })
+  })
 })
diff --git a/src/platform/missingModel/missingModelStore.ts b/src/platform/missingModel/missingModelStore.ts
index ff096658ab..fbd8eefb60 100644
--- a/src/platform/missingModel/missingModelStore.ts
+++ b/src/platform/missingModel/missingModelStore.ts
@@ -128,6 +128,85 @@ export const useMissingModelStore = defineStore('missingModel', () => {
       missingModelCandidates.value = null
   }
 
+  function clearInteractionStateForName(name: string) {
+    delete modelExpandState.value[name]
+    delete selectedLibraryModel.value[name]
+    delete importCategoryMismatch.value[name]
+    delete importTaskIds.value[name]
+    delete urlInputs.value[name]
+    delete urlMetadata.value[name]
+    delete urlFetching.value[name]
+    delete urlErrors.value[name]
+    delete urlImporting.value[name]
+  }
+
+  function removeMissingModelsByNodeId(nodeId: string) {
+    if (!missingModelCandidates.value) return
+    const removedNames = new Set(
+      missingModelCandidates.value
+        .filter((m) => String(m.nodeId) === nodeId)
+        .map((m) => m.name)
+    )
+    missingModelCandidates.value = missingModelCandidates.value.filter(
+      (m) => String(m.nodeId) !== nodeId
+    )
+    for (const name of removedNames) {
+      if (!missingModelCandidates.value.some((m) => m.name === name)) {
+        clearInteractionStateForName(name)
+      }
+    }
+    if (!missingModelCandidates.value.length)
+      missingModelCandidates.value = null
+  }
+
+  /**
+   * Remove all candidates whose nodeId starts with `prefix`.
+   *
+   * Intended for clearing all interior errors when a subgraph container is
+   * removed. Callers are expected to pass `${execId}:` (with trailing
+   * colon) so that sibling IDs sharing a numeric prefix (e.g. `"705"` vs
+   * `"70"`) are not matched.
+   */
+  function removeMissingModelsByPrefix(prefix: string) {
+    if (!missingModelCandidates.value) return
+    const removedNames = new Set<string>()
+    const remaining: MissingModelCandidate[] = []
+    for (const m of missingModelCandidates.value) {
+      // Preserve workflow-level candidates with no nodeId; they are not
+      // tied to any subgraph scope and should never be matched by prefix.
+      if (m.nodeId == null) {
+        remaining.push(m)
+        continue
+      }
+      if (String(m.nodeId).startsWith(prefix)) {
+        removedNames.add(m.name)
+      } else {
+        remaining.push(m)
+      }
+    }
+    if (removedNames.size === 0) return
+    missingModelCandidates.value = remaining.length ? remaining : null
+    for (const name of removedNames) {
+      if (!remaining.some((m) => m.name === name)) {
+        clearInteractionStateForName(name)
+      }
+    }
+  }
+
+  function addMissingModels(models: MissingModelCandidate[]) {
+    if (!models.length) return
+    const existing = missingModelCandidates.value ?? []
+    const existingKeys = new Set(
+      existing.map((m) => `${String(m.nodeId)}::${m.widgetName}::${m.name}`)
+    )
+    const newModels = models.filter(
+      (m) =>
+        !existingKeys.has(`${String(m.nodeId)}::${m.widgetName}::${m.name}`)
+    )
+    if (!newModels.length) return
+    missingModelCandidates.value = [...existing, ...newModels]
+  }
+
   function hasMissingModelOnNode(nodeLocatorId: string): boolean {
     return missingModelNodeIds.value.has(nodeLocatorId)
   }
@@ -200,8 +279,11 @@ export const useMissingModelStore = defineStore('missingModel', () => {
     missingModelAncestorExecutionIds,
 
     setMissingModels,
+    addMissingModels,
     removeMissingModelByNameOnNodes,
     removeMissingModelByWidget,
+    removeMissingModelsByNodeId,
+    removeMissingModelsByPrefix,
     clearMissingModels,
     createVerificationAbortController,
 
diff --git a/src/platform/nodeReplacement/cnrIdUtil.test.ts b/src/platform/nodeReplacement/cnrIdUtil.test.ts
index 01a29ace68..7e244c4693 100644
--- a/src/platform/nodeReplacement/cnrIdUtil.test.ts
+++ b/src/platform/nodeReplacement/cnrIdUtil.test.ts
@@ -1,7 +1,7 @@
+import { fromAny } from '@total-typescript/shoehorn'
 import { describe, expect, it } from 'vitest'
 
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-
 import { getCnrIdFromNode, getCnrIdFromProperties } from './cnrIdUtil'
 
 describe('getCnrIdFromProperties', () => {
@@ -40,28 +40,28 @@ describe('getCnrIdFromProperties', () => {
 
 describe('getCnrIdFromNode', () => {
   it('returns cnr_id from node properties', () => {
-    const node = {
+    const node = fromAny<LGraphNode, unknown>({
       properties: { cnr_id: 'node-pack' }
-    } as unknown as LGraphNode
+    })
     expect(getCnrIdFromNode(node)).toBe('node-pack')
   })
 
   it('returns aux_id when cnr_id is absent', () => {
-    const node = {
+    const node = fromAny<LGraphNode, unknown>({
       properties: { aux_id: 'node-aux-pack' }
-    } as unknown as LGraphNode
+    })
     expect(getCnrIdFromNode(node)).toBe('node-aux-pack')
   })
 
   it('prefers cnr_id over aux_id in node properties', () => {
-    const node = {
+    const node = fromAny<LGraphNode, unknown>({
       properties: { cnr_id: 'primary', aux_id: 'secondary' }
-    } as unknown as LGraphNode
+    })
     expect(getCnrIdFromNode(node)).toBe('primary')
   })
 
   it('returns undefined when node has no cnr_id or aux_id', () => {
-    const node = { properties: {} } as unknown as LGraphNode
+    const node = fromAny<LGraphNode, unknown>({ properties: {} })
     expect(getCnrIdFromNode(node)).toBeUndefined()
   })
 })
diff --git a/src/platform/nodeReplacement/components/SwapNodeGroupRow.test.ts b/src/platform/nodeReplacement/components/SwapNodeGroupRow.test.ts
index 4c199ca9bf..80306636bd 100644
--- a/src/platform/nodeReplacement/components/SwapNodeGroupRow.test.ts
+++ b/src/platform/nodeReplacement/components/SwapNodeGroupRow.test.ts
@@ -1,5 +1,7 @@
-import { mount } from '@vue/test-utils'
 import { createTestingPinia } from '@pinia/testing'
+import { fromAny } from '@total-typescript/shoehorn'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import PrimeVue from 'primevue/config'
 import { describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
@@ -43,13 +45,15 @@ function makeGroup(overrides: Partial<SwapNodeGroup> = {}): SwapNodeGroup {
   }
 }
 
-function mountRow(
+function renderRow(
   props: Partial<{
     group: SwapNodeGroup
     showNodeIdBadge: boolean
+    'onLocate-node': (nodeId: string) => void
+    onReplace: (group: SwapNodeGroup) => void
   }> = {}
 ) {
-  return mount(SwapNodeGroupRow, {
+  return render(SwapNodeGroupRow, {
     props: {
       group: makeGroup(),
       showNodeIdBadge: false,
@@ -67,17 +71,17 @@ function mountRow(
 describe('SwapNodeGroupRow', () => {
   describe('Basic Rendering', () => {
     it('renders the group type name', () => {
-      const wrapper = mountRow()
-      expect(wrapper.text()).toContain('OldNodeType')
+      const { container } = renderRow()
+      expect(container.textContent).toContain('OldNodeType')
     })
 
     it('renders node count in parentheses', () => {
-      const wrapper = mountRow()
-      expect(wrapper.text()).toContain('(2)')
+      const { container } = renderRow()
+      expect(container.textContent).toContain('(2)')
     })
 
     it('renders node count of 5 for 5 nodeTypes', () => {
-      const wrapper = mountRow({
+      const { container } = renderRow({
         group: makeGroup({
           nodeTypes: Array.from({ length: 5 }, (_, i) => ({
             type: 'OldNodeType',
@@ -86,63 +90,71 @@ describe('SwapNodeGroupRow', () => {
           }))
         })
       })
-      expect(wrapper.text()).toContain('(5)')
+      expect(container.textContent).toContain('(5)')
     })
 
     it('renders the replacement target name', () => {
-      const wrapper = mountRow()
-      expect(wrapper.text()).toContain('NewNodeType')
+      const { container } = renderRow()
+      expect(container.textContent).toContain('NewNodeType')
     })
 
     it('shows "Unknown" when newNodeId is undefined', () => {
-      const wrapper = mountRow({
+      const { container } = renderRow({
         group: makeGroup({ newNodeId: undefined })
       })
-      expect(wrapper.text()).toContain('Unknown')
+      expect(container.textContent).toContain('Unknown')
     })
 
     it('renders "Replace Node" button', () => {
-      const wrapper = mountRow()
-      expect(wrapper.text()).toContain('Replace Node')
+      renderRow()
+      expect(
+        screen.getByRole('button', { name: /Replace Node/ })
+      ).toBeInTheDocument()
     })
   })
 
   describe('Expand / Collapse', () => {
     it('starts collapsed — node list not visible', () => {
-      const wrapper = mountRow({ showNodeIdBadge: true })
-      expect(wrapper.text()).not.toContain('#1')
+      const { container } = renderRow({ showNodeIdBadge: true })
+      expect(container.textContent).not.toContain('#1')
     })
 
     it('expands when chevron is clicked', async () => {
-      const wrapper = mountRow({ showNodeIdBadge: true })
-      await wrapper.get('button[aria-label="Expand"]').trigger('click')
-      expect(wrapper.text()).toContain('#1')
-      expect(wrapper.text()).toContain('#2')
+      const user = userEvent.setup()
+      const { container } = renderRow({ showNodeIdBadge: true })
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
+      expect(container.textContent).toContain('#1')
+      expect(container.textContent).toContain('#2')
     })
 
     it('collapses when chevron is clicked again', async () => {
-      const wrapper = mountRow({ showNodeIdBadge: true })
-      await wrapper.get('button[aria-label="Expand"]').trigger('click')
-      expect(wrapper.text()).toContain('#1')
-      await wrapper.get('button[aria-label="Collapse"]').trigger('click')
-      expect(wrapper.text()).not.toContain('#1')
+      const user = userEvent.setup()
+      const { container } = renderRow({ showNodeIdBadge: true })
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
+      expect(container.textContent).toContain('#1')
+      await user.click(screen.getByRole('button', { name: 'Collapse' }))
+      expect(container.textContent).not.toContain('#1')
     })
 
     it('updates the toggle control state when expanded', async () => {
-      const wrapper = mountRow()
-      expect(wrapper.find('button[aria-label="Expand"]').exists()).toBe(true)
-      await wrapper.get('button[aria-label="Expand"]').trigger('click')
-      expect(wrapper.find('button[aria-label="Collapse"]').exists()).toBe(true)
+      const user = userEvent.setup()
+      renderRow()
+      expect(screen.getByRole('button', { name: 'Expand' })).toBeInTheDocument()
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
+      expect(
+        screen.getByRole('button', { name: 'Collapse' })
+      ).toBeInTheDocument()
     })
   })
 
   describe('Node Type List (Expanded)', () => {
-    async function expand(wrapper: ReturnType<typeof mountRow>) {
-      await wrapper.get('button[aria-label="Expand"]').trigger('click')
+    async function expand() {
+      const user = userEvent.setup()
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
     }
 
     it('renders all nodeTypes when expanded', async () => {
-      const wrapper = mountRow({
+      const { container } = renderRow({
         group: makeGroup({
           nodeTypes: [
             { type: 'OldNodeType', nodeId: '10', isReplaceable: true },
@@ -152,93 +164,93 @@ describe('SwapNodeGroupRow', () => {
         }),
         showNodeIdBadge: true
       })
-      await expand(wrapper)
-      expect(wrapper.text()).toContain('#10')
-      expect(wrapper.text()).toContain('#20')
-      expect(wrapper.text()).toContain('#30')
+      await expand()
+      expect(container.textContent).toContain('#10')
+      expect(container.textContent).toContain('#20')
+      expect(container.textContent).toContain('#30')
     })
 
     it('shows nodeId badge when showNodeIdBadge is true', async () => {
-      const wrapper = mountRow({ showNodeIdBadge: true })
-      await expand(wrapper)
-      expect(wrapper.text()).toContain('#1')
-      expect(wrapper.text()).toContain('#2')
+      const { container } = renderRow({ showNodeIdBadge: true })
+      await expand()
+      expect(container.textContent).toContain('#1')
+      expect(container.textContent).toContain('#2')
     })
 
     it('hides nodeId badge when showNodeIdBadge is false', async () => {
-      const wrapper = mountRow({ showNodeIdBadge: false })
-      await expand(wrapper)
-      expect(wrapper.text()).not.toContain('#1')
-      expect(wrapper.text()).not.toContain('#2')
+      const { container } = renderRow({ showNodeIdBadge: false })
+      await expand()
+      expect(container.textContent).not.toContain('#1')
+      expect(container.textContent).not.toContain('#2')
     })
 
     it('renders Locate button for each nodeType with nodeId', async () => {
-      const wrapper = mountRow({ showNodeIdBadge: true })
-      await expand(wrapper)
-      expect(wrapper.findAll('button[aria-label="Locate Node"]')).toHaveLength(
-        2
-      )
+      renderRow({ showNodeIdBadge: true })
+      await expand()
+      expect(
+        screen.getAllByRole('button', { name: 'Locate Node' })
+      ).toHaveLength(2)
     })
 
     it('does not render Locate button for nodeTypes without nodeId', async () => {
-      const wrapper = mountRow({
+      renderRow({
         group: makeGroup({
           // Intentionally omits nodeId to test graceful handling of incomplete node data
-          nodeTypes: [
+          nodeTypes: fromAny<MissingNodeType[], unknown>([
             { type: 'NoIdNode', isReplaceable: true }
-          ] as unknown as MissingNodeType[]
+          ])
         })
       })
-      await expand(wrapper)
-      expect(wrapper.find('button[aria-label="Locate Node"]').exists()).toBe(
-        false
-      )
+      await expand()
+      expect(
+        screen.queryByRole('button', { name: 'Locate Node' })
+      ).not.toBeInTheDocument()
     })
   })
 
   describe('Events', () => {
     it('emits locate-node with correct nodeId', async () => {
-      const wrapper = mountRow({ showNodeIdBadge: true })
-      await wrapper.get('button[aria-label="Expand"]').trigger('click')
-      const locateBtns = wrapper.findAll('button[aria-label="Locate Node"]')
-      await locateBtns[0].trigger('click')
-      expect(wrapper.emitted('locate-node')).toBeTruthy()
-      expect(wrapper.emitted('locate-node')?.[0]).toEqual(['1'])
+      const onLocateNode = vi.fn()
+      const user = userEvent.setup()
+      renderRow({ showNodeIdBadge: true, 'onLocate-node': onLocateNode })
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
+      const locateBtns = screen.getAllByRole('button', { name: 'Locate Node' })
+      await user.click(locateBtns[0])
+      expect(onLocateNode).toHaveBeenCalledWith('1')
 
-      await locateBtns[1].trigger('click')
-      expect(wrapper.emitted('locate-node')?.[1]).toEqual(['2'])
+      await user.click(locateBtns[1])
+      expect(onLocateNode).toHaveBeenCalledWith('2')
     })
 
     it('emits replace with group when Replace button is clicked', async () => {
       const group = makeGroup()
-      const wrapper = mountRow({ group })
-      const replaceBtn = wrapper
-        .findAll('button')
-        .find((b) => b.text().includes('Replace Node'))
-      if (!replaceBtn) throw new Error('Replace button not found')
-      await replaceBtn.trigger('click')
-      expect(wrapper.emitted('replace')).toBeTruthy()
-      expect(wrapper.emitted('replace')?.[0][0]).toEqual(group)
+      const onReplace = vi.fn()
+      const user = userEvent.setup()
+      renderRow({ group, onReplace })
+      const replaceBtn = screen.getByRole('button', { name: /Replace Node/ })
+      await user.click(replaceBtn)
+      expect(onReplace).toHaveBeenCalledWith(group)
     })
   })
 
   describe('Edge Cases', () => {
     it('handles empty nodeTypes array', () => {
-      const wrapper = mountRow({
+      const { container } = renderRow({
         group: makeGroup({ nodeTypes: [] })
       })
-      expect(wrapper.text()).toContain('(0)')
+      expect(container.textContent).toContain('(0)')
     })
 
     it('handles string nodeType entries', async () => {
-      const wrapper = mountRow({
+      const user = userEvent.setup()
+      const { container } = renderRow({
         group: makeGroup({
           // Intentionally uses a plain string entry to test legacy node type handling
-          nodeTypes: ['StringType'] as unknown as MissingNodeType[]
+          nodeTypes: fromAny<MissingNodeType[], unknown>(['StringType'])
         })
       })
-      await wrapper.get('button[aria-label="Expand"]').trigger('click')
-      expect(wrapper.text()).toContain('StringType')
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
+      expect(container.textContent).toContain('StringType')
     })
   })
 })
diff --git a/src/platform/nodeReplacement/components/SwapNodesCard.test.ts b/src/platform/nodeReplacement/components/SwapNodesCard.test.ts
index 79453804db..0dea4245a0 100644
--- a/src/platform/nodeReplacement/components/SwapNodesCard.test.ts
+++ b/src/platform/nodeReplacement/components/SwapNodesCard.test.ts
@@ -1,4 +1,5 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { createTestingPinia } from '@pinia/testing'
 import PrimeVue from 'primevue/config'
 import { describe, expect, it, vi } from 'vitest'
@@ -9,7 +10,8 @@ import type { SwapNodeGroup } from '@/components/rightSidePanel/errors/useErrorG
 vi.mock('./SwapNodeGroupRow.vue', () => ({
   default: {
     name: 'SwapNodeGroupRow',
-    template: '<div class="swap-row" />',
+    template:
+      '<div class="swap-row" :data-show-node-id-badge="showNodeIdBadge" :data-group-type="group?.type"><button class="locate-trigger" @click="$emit(\'locate-node\', group?.nodeTypes?.[0]?.nodeId)">Locate</button><button class="replace-trigger" @click="$emit(\'replace\', group)">Replace</button></div>',
     props: ['group', 'showNodeIdBadge'],
     emits: ['locate-node', 'replace']
   }
@@ -37,13 +39,21 @@ function mountCard(
   props: Partial<{
     swapNodeGroups: SwapNodeGroup[]
     showNodeIdBadge: boolean
-  }> = {}
+  }> = {},
+  callbacks?: {
+    onLocateNode?: (nodeId: string) => void
+    onReplace?: (group: SwapNodeGroup) => void
+  }
 ) {
-  return mount(SwapNodesCard, {
+  return render(SwapNodesCard, {
     props: {
       swapNodeGroups: makeGroups(),
       showNodeIdBadge: false,
-      ...props
+      ...props,
+      ...(callbacks?.onLocateNode
+        ? { 'onLocate-node': callbacks.onLocateNode }
+        : {}),
+      ...(callbacks?.onReplace ? { onReplace: callbacks.onReplace } : {})
     },
     global: {
       plugins: [createTestingPinia({ createSpy: vi.fn }), PrimeVue, i18n]
@@ -54,76 +64,81 @@ function mountCard(
 describe('SwapNodesCard', () => {
   describe('Rendering', () => {
     it('renders guidance message', () => {
-      const wrapper = mountCard()
-      expect(wrapper.find('p').exists()).toBe(true)
+      const { container } = mountCard()
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      expect(container.querySelector('p')).not.toBeNull()
     })
 
     it('renders correct number of SwapNodeGroupRow components', () => {
-      const wrapper = mountCard({ swapNodeGroups: makeGroups(3) })
-      expect(
-        wrapper.findAllComponents({ name: 'SwapNodeGroupRow' })
-      ).toHaveLength(3)
+      const { container } = mountCard({ swapNodeGroups: makeGroups(3) })
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      expect(container.querySelectorAll('.swap-row')).toHaveLength(3)
     })
 
     it('renders zero rows when swapNodeGroups is empty', () => {
-      const wrapper = mountCard({ swapNodeGroups: [] })
-      expect(
-        wrapper.findAllComponents({ name: 'SwapNodeGroupRow' })
-      ).toHaveLength(0)
+      const { container } = mountCard({ swapNodeGroups: [] })
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      expect(container.querySelectorAll('.swap-row')).toHaveLength(0)
     })
 
     it('renders one row when swapNodeGroups has one entry', () => {
-      const wrapper = mountCard({ swapNodeGroups: makeGroups(1) })
-      expect(
-        wrapper.findAllComponents({ name: 'SwapNodeGroupRow' })
-      ).toHaveLength(1)
+      const { container } = mountCard({ swapNodeGroups: makeGroups(1) })
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      expect(container.querySelectorAll('.swap-row')).toHaveLength(1)
     })
 
     it('passes showNodeIdBadge to children', () => {
-      const wrapper = mountCard({
+      const { container } = mountCard({
         swapNodeGroups: makeGroups(1),
         showNodeIdBadge: true
       })
-      const row = wrapper.findComponent({ name: 'SwapNodeGroupRow' })
-      expect(row.props('showNodeIdBadge')).toBe(true)
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      const row = container.querySelector('.swap-row')
+      expect(row!.getAttribute('data-show-node-id-badge')).toBe('true')
     })
 
     it('passes group prop to children', () => {
       const groups = makeGroups(1)
-      const wrapper = mountCard({ swapNodeGroups: groups })
-      const row = wrapper.findComponent({ name: 'SwapNodeGroupRow' })
-      expect(row.props('group')).toEqual(groups[0])
+      const { container } = mountCard({ swapNodeGroups: groups })
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      const row = container.querySelector('.swap-row')
+      expect(row!.getAttribute('data-group-type')).toBe(groups[0].type)
     })
   })
 
   describe('Events', () => {
     it('bubbles locate-node event from child', async () => {
-      const wrapper = mountCard()
-      const row = wrapper.findComponent({ name: 'SwapNodeGroupRow' })
-      await row.vm.$emit('locate-node', '42')
-      expect(wrapper.emitted('locate-node')).toBeTruthy()
-      expect(wrapper.emitted('locate-node')?.[0]).toEqual(['42'])
+      const onLocateNode = vi.fn()
+      mountCard({}, { onLocateNode })
+      const locateButtons = screen.getAllByRole('button', { name: 'Locate' })
+      await userEvent.click(locateButtons[0])
+      expect(onLocateNode).toHaveBeenCalledWith('0')
     })
 
     it('bubbles replace event from child', async () => {
       const groups = makeGroups(1)
-      const wrapper = mountCard({ swapNodeGroups: groups })
-      const row = wrapper.findComponent({ name: 'SwapNodeGroupRow' })
-      await row.vm.$emit('replace', groups[0])
-      expect(wrapper.emitted('replace')).toBeTruthy()
-      expect(wrapper.emitted('replace')?.[0][0]).toEqual(groups[0])
+      const onReplace = vi.fn()
+      mountCard({ swapNodeGroups: groups }, { onReplace })
+      const replaceButton = screen.getByRole('button', { name: 'Replace' })
+      await userEvent.click(replaceButton)
+      expect(onReplace).toHaveBeenCalledWith(groups[0])
     })
 
     it('bubbles events from correct child when multiple rows', async () => {
       const groups = makeGroups(3)
-      const wrapper = mountCard({ swapNodeGroups: groups })
-      const rows = wrapper.findAllComponents({ name: 'SwapNodeGroupRow' })
+      const onLocateNode = vi.fn()
+      const onReplace = vi.fn()
+      mountCard({ swapNodeGroups: groups }, { onLocateNode, onReplace })
 
-      await rows[2].vm.$emit('locate-node', '99')
-      expect(wrapper.emitted('locate-node')?.[0]).toEqual(['99'])
+      const locateButtons = screen.getAllByRole('button', { name: 'Locate' })
+      await userEvent.click(locateButtons[2])
+      expect(onLocateNode).toHaveBeenCalledWith('2')
 
-      await rows[1].vm.$emit('replace', groups[1])
-      expect(wrapper.emitted('replace')?.[0][0]).toEqual(groups[1])
+      const replaceButtons = screen.getAllByRole('button', {
+        name: 'Replace'
+      })
+      await userEvent.click(replaceButtons[1])
+      expect(onReplace).toHaveBeenCalledWith(groups[1])
     })
   })
 })
diff --git a/src/platform/nodeReplacement/missingNodeScan.test.ts b/src/platform/nodeReplacement/missingNodeScan.test.ts
index 0652a0a785..5ba66059e7 100644
--- a/src/platform/nodeReplacement/missingNodeScan.test.ts
+++ b/src/platform/nodeReplacement/missingNodeScan.test.ts
@@ -1,3 +1,4 @@
+import { fromAny, fromPartial } from '@total-typescript/shoehorn'
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -56,18 +57,18 @@ import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNod
 function mockNode(
   id: number,
   type: string,
-  overrides: Partial<LGraphNode> = {}
+  overrides: Record<string, unknown> = {}
 ): LGraphNode {
-  return {
+  return fromAny<LGraphNode, unknown>({
     id,
     type,
     last_serialization: { type },
     ...overrides
-  } as unknown as LGraphNode
+  })
 }
 
 function mockGraph(): LGraph {
-  return {} as unknown as LGraph
+  return fromAny<LGraph, unknown>({})
 }
 
 function getMissingNodesError(
@@ -214,11 +215,52 @@ describe('scanMissingNodes (via rescanAndSurfaceMissingNodes)', () => {
     expect(typeof missing !== 'string' && missing.isReplaceable).toBe(false)
   })
 
+  it('skips muted nodes (mode NEVER = 2)', () => {
+    vi.mocked(collectAllNodes).mockReturnValue([
+      mockNode(1, 'MutedNode', { mode: 2 })
+    ])
+    vi.mocked(getExecutionIdByNode).mockReturnValue(null)
+
+    rescanAndSurfaceMissingNodes(mockGraph())
+
+    const store = useMissingNodesErrorStore()
+    expect(store.missingNodesError).toBeNull()
+  })
+
+  it('skips bypassed nodes (mode BYPASS = 4)', () => {
+    vi.mocked(collectAllNodes).mockReturnValue([
+      mockNode(1, 'BypassedNode', { mode: 4 })
+    ])
+    vi.mocked(getExecutionIdByNode).mockReturnValue(null)
+
+    rescanAndSurfaceMissingNodes(mockGraph())
+
+    const store = useMissingNodesErrorStore()
+    expect(store.missingNodesError).toBeNull()
+  })
+
+  it('detects active nodes (mode ALWAYS = 0) as missing', () => {
+    vi.mocked(collectAllNodes).mockReturnValue([
+      mockNode(1, 'ActiveMissingNode', { mode: 0 })
+    ])
+    vi.mocked(getExecutionIdByNode).mockReturnValue(null)
+
+    rescanAndSurfaceMissingNodes(mockGraph())
+
+    const store = useMissingNodesErrorStore()
+    const error = getMissingNodesError(store)
+    expect(error.nodeTypes).toHaveLength(1)
+    const missing = error.nodeTypes[0]
+    expect(typeof missing !== 'string' && missing.type).toBe(
+      'ActiveMissingNode'
+    )
+  })
+
   it('uses last_serialization.type over node.type', () => {
     const node = mockNode(1, 'LiveType')
-    node.last_serialization = {
+    node.last_serialization = fromPartial<LGraphNode['last_serialization']>({
       type: 'OriginalType'
-    } as unknown as LGraphNode['last_serialization']
+    })
     vi.mocked(collectAllNodes).mockReturnValue([node])
     vi.mocked(getExecutionIdByNode).mockReturnValue(null)
 
diff --git a/src/platform/nodeReplacement/missingNodeScan.ts b/src/platform/nodeReplacement/missingNodeScan.ts
index 002f992acf..d52145f662 100644
--- a/src/platform/nodeReplacement/missingNodeScan.ts
+++ b/src/platform/nodeReplacement/missingNodeScan.ts
@@ -1,5 +1,6 @@
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type { LGraph } from '@/lib/litegraph/src/litegraph'
+import { LGraphEventMode } from '@/lib/litegraph/src/types/globalEnums'
 import { useNodeReplacementStore } from '@/platform/nodeReplacement/nodeReplacementStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
@@ -18,6 +19,12 @@ function scanMissingNodes(rootGraph: LGraph): MissingNodeType[] {
   const allNodes = collectAllNodes(rootGraph)
 
   for (const node of allNodes) {
+    if (
+      node.mode === LGraphEventMode.NEVER ||
+      node.mode === LGraphEventMode.BYPASS
+    )
+      continue
+
     const originalType = node.last_serialization?.type ?? node.type ?? 'Unknown'
 
     if (originalType in LiteGraph.registered_node_types) continue
diff --git a/src/platform/nodeReplacement/missingNodesErrorStore.test.ts b/src/platform/nodeReplacement/missingNodesErrorStore.test.ts
index 6d051f3527..871acdf98f 100644
--- a/src/platform/nodeReplacement/missingNodesErrorStore.test.ts
+++ b/src/platform/nodeReplacement/missingNodesErrorStore.test.ts
@@ -212,4 +212,146 @@ describe('missingNodesErrorStore', () => {
       expect(store.missingNodesError?.nodeTypes).toHaveLength(1)
     })
   })
+
+  describe('removeMissingNodesByNodeId', () => {
+    it('removes entries matching the nodeId', () => {
+      const store = useMissingNodesErrorStore()
+      store.setMissingNodeTypes([
+        { type: 'NodeA', nodeId: '1', isReplaceable: false },
+        { type: 'NodeB', nodeId: '2', isReplaceable: false }
+      ])
+
+      store.removeMissingNodesByNodeId('1')
+
+      expect(store.missingNodesError?.nodeTypes).toHaveLength(1)
+      const remaining = store.missingNodesError?.nodeTypes[0]
+      expect(typeof remaining !== 'string' && remaining?.nodeId).toBe('2')
+    })
+
+    it('keeps string entries (they have no nodeId)', () => {
+      const store = useMissingNodesErrorStore()
+      store.setMissingNodeTypes([
+        'StringNode',
+        { type: 'NodeA', nodeId: '1', isReplaceable: false }
+      ] as MissingNodeType[])
+
+      store.removeMissingNodesByNodeId('1')
+
+      expect(store.missingNodesError?.nodeTypes).toHaveLength(1)
+      expect(store.missingNodesError?.nodeTypes[0]).toBe('StringNode')
+    })
+
+    it('keeps entries with different nodeIds', () => {
+      const store = useMissingNodesErrorStore()
+      store.setMissingNodeTypes([
+        { type: 'NodeA', nodeId: '1', isReplaceable: false },
+        { type: 'NodeB', nodeId: '2', isReplaceable: false },
+        { type: 'NodeC', nodeId: '3', isReplaceable: false }
+      ])
+
+      store.removeMissingNodesByNodeId('2')
+
+      expect(store.missingNodesError?.nodeTypes).toHaveLength(2)
+    })
+
+    it('clears missingNodesError when all object entries are removed', () => {
+      const store = useMissingNodesErrorStore()
+      store.setMissingNodeTypes([
+        { type: 'NodeA', nodeId: '1', isReplaceable: false }
+      ])
+
+      store.removeMissingNodesByNodeId('1')
+
+      expect(store.missingNodesError).toBeNull()
+      expect(store.hasMissingNodes).toBe(false)
+    })
+
+    it('does nothing when missingNodesError is null', () => {
+      const store = useMissingNodesErrorStore()
+      store.removeMissingNodesByNodeId('1')
+      expect(store.missingNodesError).toBeNull()
+    })
+  })
+
+  describe('removeMissingNodesByPrefix', () => {
+    it('removes object entries whose nodeId starts with the prefix', () => {
+      const store = useMissingNodesErrorStore()
+      store.setMissingNodeTypes([
+        { type: 'A', nodeId: '65:70:63', isReplaceable: false },
+        { type: 'B', nodeId: '65:70:64', isReplaceable: false },
+        { type: 'C', nodeId: '65:80:5', isReplaceable: false }
+      ])
+
+      store.removeMissingNodesByPrefix('65:70:')
+
+      const remaining = store.missingNodesError?.nodeTypes ?? []
+      expect(remaining).toHaveLength(1)
+      const first = remaining[0]
+      expect(typeof first !== 'string' && first.nodeId).toBe('65:80:5')
+    })
+
+    it('removes deeply nested interior entries', () => {
+      const store = useMissingNodesErrorStore()
+      store.setMissingNodeTypes([
+        { type: 'A', nodeId: '65:70:63', isReplaceable: false },
+        { type: 'B', nodeId: '65:70:80:5', isReplaceable: false },
+        { type: 'C', nodeId: '65:71:63', isReplaceable: false }
+      ])
+
+      store.removeMissingNodesByPrefix('65:70:')
+
+      expect(store.missingNodesError?.nodeTypes).toHaveLength(1)
+    })
+
+    it('does not match siblings sharing a numeric prefix (trailing colon)', () => {
+      const store = useMissingNodesErrorStore()
+      store.setMissingNodeTypes([
+        { type: 'A', nodeId: '65:70:1', isReplaceable: false },
+        { type: 'B', nodeId: '65:705:1', isReplaceable: false },
+        { type: 'C', nodeId: '65:70', isReplaceable: false }
+      ])
+
+      store.removeMissingNodesByPrefix('65:70:')
+
+      const remaining = store.missingNodesError?.nodeTypes ?? []
+      expect(remaining).toHaveLength(2)
+      const remainingIds = remaining.map((n) =>
+        typeof n === 'string' ? n : String(n.nodeId)
+      )
+      expect(remainingIds).toContain('65:705:1')
+      expect(remainingIds).toContain('65:70')
+    })
+
+    it('preserves string entries (no nodeId)', () => {
+      const store = useMissingNodesErrorStore()
+      store.setMissingNodeTypes([
+        'StringNode',
+        { type: 'A', nodeId: '65:70:1', isReplaceable: false }
+      ] as MissingNodeType[])
+
+      store.removeMissingNodesByPrefix('65:70:')
+
+      expect(store.missingNodesError?.nodeTypes).toHaveLength(1)
+      expect(store.missingNodesError?.nodeTypes[0]).toBe('StringNode')
+    })
+
+    it('clears missingNodesError when all matching entries are removed and none remain', () => {
+      const store = useMissingNodesErrorStore()
+      store.setMissingNodeTypes([
+        { type: 'A', nodeId: '65:70:63', isReplaceable: false },
+        { type: 'B', nodeId: '65:70:64', isReplaceable: false }
+      ])
+
+      store.removeMissingNodesByPrefix('65:70:')
+
+      expect(store.missingNodesError).toBeNull()
+      expect(store.hasMissingNodes).toBe(false)
+    })
+
+    it('does nothing when missingNodesError is null', () => {
+      const store = useMissingNodesErrorStore()
+      store.removeMissingNodesByPrefix('65:70:')
+      expect(store.missingNodesError).toBeNull()
+    })
+  })
 })
diff --git a/src/platform/nodeReplacement/missingNodesErrorStore.ts b/src/platform/nodeReplacement/missingNodesErrorStore.ts
index a71c98d112..eede4be6e7 100644
--- a/src/platform/nodeReplacement/missingNodesErrorStore.ts
+++ b/src/platform/nodeReplacement/missingNodesErrorStore.ts
@@ -64,6 +64,33 @@ export const useMissingNodesErrorStore = defineStore(
       )
     }
 
+    function removeMissingNodesByNodeId(nodeId: string) {
+      if (!missingNodesError.value) return
+      const remaining = missingNodesError.value.nodeTypes.filter((node) => {
+        if (typeof node === 'string') return true
+        return node.nodeId !== nodeId
+      })
+      setMissingNodeTypes(remaining)
+    }
+
+    /**
+     * Remove all object-type entries whose nodeId starts with `prefix`.
+     * String entries (group nodes) have no nodeId and are preserved.
+     *
+     * Intended for clearing all interior errors when a subgraph container
+     * is removed. Callers are expected to pass `${execId}:` (with trailing
+     * colon) so that sibling IDs sharing a numeric prefix are not matched.
+     */
+    function removeMissingNodesByPrefix(prefix: string) {
+      if (!missingNodesError.value) return
+      const remaining = missingNodesError.value.nodeTypes.filter((node) => {
+        if (typeof node === 'string') return true
+        if (node.nodeId == null) return true
+        return !String(node.nodeId).startsWith(prefix)
+      })
+      setMissingNodeTypes(remaining)
+    }
+
     /** Remove specific node types from the missing nodes list (e.g. after replacement). */
     function removeMissingNodesByType(typesToRemove: string[]) {
       if (!missingNodesError.value) return
@@ -115,6 +142,8 @@ export const useMissingNodesErrorStore = defineStore(
       missingNodesError,
       setMissingNodeTypes,
       surfaceMissingNodes,
+      removeMissingNodesByNodeId,
+      removeMissingNodesByPrefix,
       removeMissingNodesByType,
       hasMissingNodes,
       missingNodeCount,
diff --git a/src/platform/nodeReplacement/useNodeReplacement.test.ts b/src/platform/nodeReplacement/useNodeReplacement.test.ts
index f3a60f2778..d6be1879e7 100644
--- a/src/platform/nodeReplacement/useNodeReplacement.test.ts
+++ b/src/platform/nodeReplacement/useNodeReplacement.test.ts
@@ -1,10 +1,11 @@
+import { fromAny } from '@total-typescript/shoehorn'
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
-import type { NodeReplacement } from './types'
 import type { MissingNodeType } from '@/types/comfy'
+import type { NodeReplacement } from './types'
 
 vi.mock('@/lib/litegraph/src/litegraph', () => ({
   LiteGraph: {
@@ -79,13 +80,13 @@ function createMockGraph(
   links: ReturnType<typeof createMockLink>[] = []
 ): LGraph {
   const linksMap = new Map(links.map((l) => [l.id, l]))
-  return {
+  return fromAny<LGraph, unknown>({
     _nodes: nodes,
     _nodes_by_id: Object.fromEntries(nodes.map((n) => [n.id, n])),
     links: linksMap,
     updateExecutionOrder: vi.fn(),
     setDirtyCanvas: vi.fn()
-  } as unknown as LGraph
+  })
 }
 
 function createPlaceholderNode(
@@ -95,7 +96,7 @@ function createPlaceholderNode(
   outputs: { name: string; links: number[] | null }[] = [],
   graph?: LGraph
 ): LGraphNode {
-  return {
+  return fromAny<LGraphNode, unknown>({
     id,
     type,
     pos: [100, 200],
@@ -131,7 +132,7 @@ function createPlaceholderNode(
       outputs: outputs.map((o) => ({ ...o, type: 'IMAGE' })),
       widgets_values: []
     }))
-  } as unknown as LGraphNode
+  })
 }
 
 function createNewNode(
@@ -139,7 +140,7 @@ function createNewNode(
   outputs: { name: string; links: number[] | null }[] = [],
   widgets: { name: string; value: unknown }[] = []
 ): LGraphNode {
-  return {
+  return fromAny<LGraphNode, unknown>({
     id: 0,
     type: '',
     pos: [0, 0],
@@ -153,7 +154,7 @@ function createNewNode(
     widgets: widgets.map((w) => ({ ...w, type: 'combo', options: {} })),
     configure: vi.fn(),
     serialize: vi.fn()
-  } as unknown as LGraphNode
+  })
 }
 
 function makeMissingNodeType(
@@ -756,8 +757,10 @@ describe('useNodeReplacement', () => {
 
     it('should exclude nodes without last_serialization', () => {
       const freshNode = createPlaceholderNode(1, 'OldNode')
-      freshNode.last_serialization =
-        undefined as unknown as LGraphNode['last_serialization']
+      freshNode.last_serialization = fromAny<
+        LGraphNode['last_serialization'],
+        unknown
+      >(undefined)
       const graph = createMockGraph([freshNode])
       Object.assign(app, { rootGraph: graph })
 
@@ -780,7 +783,7 @@ describe('useNodeReplacement', () => {
 
     it('should fall back to node.type when last_serialization.type is undefined', () => {
       const node = createPlaceholderNode(1, 'FallbackType')
-      node.last_serialization!.type = undefined as unknown as string
+      node.last_serialization!.type = fromAny<string, unknown>(undefined)
       node.type = 'FallbackType'
       const graph = createMockGraph([node])
       Object.assign(app, { rootGraph: graph })
@@ -809,7 +812,7 @@ describe('useNodeReplacement', () => {
       // targetTypes still holds the original unsanitized name "OldNode&Special",
       // so the predicate must fall back to checking sanitizeNodeName(originalType).
       const node = createPlaceholderNode(1, 'OldNodeSpecial')
-      node.last_serialization!.type = undefined as unknown as string
+      node.last_serialization!.type = fromAny<string, unknown>(undefined)
       // Simulate what sanitizeNodeName does to '&' in the live type
       node.type = 'OldNodeSpecial' // '&' already stripped by sanitizeNodeName
       const graph = createMockGraph([node])
diff --git a/src/platform/remote/comfyui/useQueuePolling.test.ts b/src/platform/remote/comfyui/useQueuePolling.test.ts
index c27c8f9565..79a3c4b613 100644
--- a/src/platform/remote/comfyui/useQueuePolling.test.ts
+++ b/src/platform/remote/comfyui/useQueuePolling.test.ts
@@ -1,5 +1,4 @@
-import { mount } from '@vue/test-utils'
-import type { VueWrapper } from '@vue/test-utils'
+import { render } from '@testing-library/vue'
 import { nextTick, reactive } from 'vue'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -21,7 +20,7 @@ vi.mock('@/stores/queueStore', () => {
 import { useQueueStore } from '@/stores/queueStore'
 
 function mountUseQueuePolling() {
-  return mount({
+  render({
     template: '<div />',
     setup() {
       useQueuePolling()
@@ -31,7 +30,6 @@ function mountUseQueuePolling() {
 }
 
 describe('useQueuePolling', () => {
-  let wrapper: VueWrapper
   const store = useQueueStore() as Partial<
     ReturnType<typeof useQueueStore>
   > as {
@@ -48,17 +46,16 @@ describe('useQueuePolling', () => {
   })
 
   afterEach(() => {
-    wrapper?.unmount()
     vi.useRealTimers()
   })
 
   it('does not call update on creation', () => {
-    wrapper = mountUseQueuePolling()
+    mountUseQueuePolling()
     expect(store.update).not.toHaveBeenCalled()
   })
 
   it('polls when activeJobsCount is exactly 1', async () => {
-    wrapper = mountUseQueuePolling()
+    mountUseQueuePolling()
 
     store.activeJobsCount = 1
     await vi.advanceTimersByTimeAsync(8_000)
@@ -67,7 +64,7 @@ describe('useQueuePolling', () => {
   })
 
   it('does not poll when activeJobsCount > 1', async () => {
-    wrapper = mountUseQueuePolling()
+    mountUseQueuePolling()
 
     store.activeJobsCount = 2
     await vi.advanceTimersByTimeAsync(16_000)
@@ -77,7 +74,7 @@ describe('useQueuePolling', () => {
 
   it('stops polling when activeJobsCount drops to 0', async () => {
     store.activeJobsCount = 1
-    wrapper = mountUseQueuePolling()
+    mountUseQueuePolling()
 
     store.activeJobsCount = 0
     await vi.advanceTimersByTimeAsync(16_000)
@@ -87,7 +84,7 @@ describe('useQueuePolling', () => {
 
   it('resets timer when loading completes', async () => {
     store.activeJobsCount = 1
-    wrapper = mountUseQueuePolling()
+    mountUseQueuePolling()
 
     // Advance 5s toward the 8s timeout
     await vi.advanceTimersByTimeAsync(5_000)
@@ -110,7 +107,7 @@ describe('useQueuePolling', () => {
 
   it('applies exponential backoff on successive polls', async () => {
     store.activeJobsCount = 1
-    wrapper = mountUseQueuePolling()
+    mountUseQueuePolling()
 
     // First poll at 8s
     await vi.advanceTimersByTimeAsync(8_000)
@@ -131,7 +128,7 @@ describe('useQueuePolling', () => {
 
   it('skips poll when an update is already in-flight', async () => {
     store.activeJobsCount = 1
-    wrapper = mountUseQueuePolling()
+    mountUseQueuePolling()
 
     // Simulate an external update starting before the timer fires
     store.isLoading = true
@@ -148,7 +145,7 @@ describe('useQueuePolling', () => {
 
   it('resets backoff when activeJobsCount changes', async () => {
     store.activeJobsCount = 1
-    wrapper = mountUseQueuePolling()
+    mountUseQueuePolling()
 
     // First poll at 8s (backs off delay to 12s)
     await vi.advanceTimersByTimeAsync(8_000)
diff --git a/src/platform/secrets/components/SecretListItem.test.ts b/src/platform/secrets/components/SecretListItem.test.ts
index 6d7907ef73..3b0338810d 100644
--- a/src/platform/secrets/components/SecretListItem.test.ts
+++ b/src/platform/secrets/components/SecretListItem.test.ts
@@ -1,6 +1,8 @@
-import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
 
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+
 import type { SecretMetadata } from '../types'
 import SecretListItem from './SecretListItem.vue'
 
@@ -26,12 +28,12 @@ function createMockSecret(
   }
 }
 
-function mountComponent(props: {
+function renderComponent(props: {
   secret: SecretMetadata
   loading?: boolean
   disabled?: boolean
 }) {
-  return mount(SecretListItem, {
+  return render(SecretListItem, {
     props,
     global: {
       stubs: {
@@ -56,123 +58,134 @@ describe('SecretListItem', () => {
   describe('rendering', () => {
     it('displays secret name', () => {
       const secret = createMockSecret({ name: 'My API Key' })
-      const wrapper = mountComponent({ secret })
+      renderComponent({ secret })
 
-      expect(wrapper.text()).toContain('My API Key')
+      expect(screen.getByText('My API Key')).toBeInTheDocument()
     })
 
     it('displays provider label when provider exists', () => {
       const secret = createMockSecret({ provider: 'huggingface' })
-      const wrapper = mountComponent({ secret })
+      renderComponent({ secret })
 
-      expect(wrapper.text()).toContain('HuggingFace')
+      expect(screen.getByText('HuggingFace')).toBeInTheDocument()
     })
 
     it('displays Civitai provider label', () => {
       const secret = createMockSecret({ provider: 'civitai' })
-      const wrapper = mountComponent({ secret })
+      renderComponent({ secret })
 
-      expect(wrapper.text()).toContain('Civitai')
+      expect(screen.getByText('Civitai')).toBeInTheDocument()
     })
 
     it('hides provider badge when no provider', () => {
       const secret = createMockSecret({ provider: undefined })
-      const wrapper = mountComponent({ secret })
+      renderComponent({ secret })
 
-      expect(wrapper.text()).not.toContain('HuggingFace')
-      expect(wrapper.text()).not.toContain('Civitai')
+      expect(screen.queryByText('HuggingFace')).not.toBeInTheDocument()
+      expect(screen.queryByText('Civitai')).not.toBeInTheDocument()
     })
 
     it('displays created date', () => {
       const secret = createMockSecret({ created_at: '2024-01-15T10:00:00Z' })
-      const wrapper = mountComponent({ secret })
+      renderComponent({ secret })
 
-      expect(wrapper.text()).toContain('secrets.createdAt')
+      expect(screen.getByText(/secrets\.createdAt/)).toBeInTheDocument()
     })
 
     it('displays last used date when available', () => {
       const secret = createMockSecret({ last_used_at: '2024-01-20T10:00:00Z' })
-      const wrapper = mountComponent({ secret })
+      renderComponent({ secret })
 
-      expect(wrapper.text()).toContain('secrets.lastUsed')
+      expect(screen.getByText(/secrets\.lastUsed/)).toBeInTheDocument()
     })
 
     it('hides last used when not available', () => {
       const secret = createMockSecret({ last_used_at: undefined })
-      const wrapper = mountComponent({ secret })
+      renderComponent({ secret })
 
-      expect(wrapper.text()).not.toContain('secrets.lastUsed')
+      expect(screen.queryByText(/secrets\.lastUsed/)).not.toBeInTheDocument()
     })
   })
 
   describe('loading state', () => {
     it('shows spinner when loading', () => {
       const secret = createMockSecret()
-      const wrapper = mountComponent({ secret, loading: true })
+      const { container } = renderComponent({ secret, loading: true })
 
-      expect(wrapper.find('.pi-spinner').exists()).toBe(true)
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- PrimeIcon has no ARIA role
+      expect(container.querySelector('.pi-spinner')).toBeInTheDocument()
     })
 
     it('hides action buttons when loading', () => {
       const secret = createMockSecret()
-      const wrapper = mountComponent({ secret, loading: true })
+      const { container } = renderComponent({ secret, loading: true })
 
-      expect(wrapper.find('.pi-pen-to-square').exists()).toBe(false)
-      expect(wrapper.find('.pi-trash').exists()).toBe(false)
+      expect(
+        // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- PrimeIcon has no ARIA role
+        container.querySelector('.pi-pen-to-square')
+      ).not.toBeInTheDocument()
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- PrimeIcon has no ARIA role
+      expect(container.querySelector('.pi-trash')).not.toBeInTheDocument()
     })
 
     it('shows action buttons when not loading', () => {
       const secret = createMockSecret()
-      const wrapper = mountComponent({ secret, loading: false })
+      const { container } = renderComponent({ secret, loading: false })
 
-      expect(wrapper.find('.pi-pen-to-square').exists()).toBe(true)
-      expect(wrapper.find('.pi-trash').exists()).toBe(true)
+      expect(
+        // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- PrimeIcon has no ARIA role
+        container.querySelector('.pi-pen-to-square')
+      ).toBeInTheDocument()
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- PrimeIcon has no ARIA role
+      expect(container.querySelector('.pi-trash')).toBeInTheDocument()
     })
   })
 
   describe('disabled state', () => {
     it('disables buttons when disabled prop is true', () => {
       const secret = createMockSecret()
-      const wrapper = mountComponent({ secret, disabled: true })
+      renderComponent({ secret, disabled: true })
 
-      const buttons = wrapper.findAll('button')
+      const buttons = screen.getAllByRole('button')
       buttons.forEach((button) => {
-        expect(button.attributes('disabled')).toBeDefined()
+        expect(button).toBeDisabled()
       })
     })
 
     it('enables buttons when disabled prop is false', () => {
       const secret = createMockSecret()
-      const wrapper = mountComponent({ secret, disabled: false })
+      renderComponent({ secret, disabled: false })
 
-      const buttons = wrapper.findAll('button')
+      const buttons = screen.getAllByRole('button')
       buttons.forEach((button) => {
-        expect(button.attributes('disabled')).toBeUndefined()
+        expect(button).toBeEnabled()
       })
     })
   })
 
   describe('events', () => {
     it('emits edit event when edit button clicked', async () => {
+      const user = userEvent.setup()
       const secret = createMockSecret()
-      const wrapper = mountComponent({ secret })
+      const { emitted } = renderComponent({ secret })
 
-      const editButton = wrapper.findAll('button')[0]
-      await editButton.trigger('click')
+      const buttons = screen.getAllByRole('button')
+      await user.click(buttons[0])
 
-      expect(wrapper.emitted('edit')).toBeDefined()
-      expect(wrapper.emitted('edit')!.length).toBeGreaterThanOrEqual(1)
+      expect(emitted()['edit']).toBeDefined()
+      expect(emitted()['edit']!.length).toBeGreaterThanOrEqual(1)
     })
 
     it('emits delete event when delete button clicked', async () => {
+      const user = userEvent.setup()
       const secret = createMockSecret()
-      const wrapper = mountComponent({ secret })
+      const { emitted } = renderComponent({ secret })
 
-      const deleteButton = wrapper.findAll('button')[1]
-      await deleteButton.trigger('click')
+      const buttons = screen.getAllByRole('button')
+      await user.click(buttons[1])
 
-      expect(wrapper.emitted('delete')).toBeDefined()
-      expect(wrapper.emitted('delete')!.length).toBeGreaterThanOrEqual(1)
+      expect(emitted()['delete']).toBeDefined()
+      expect(emitted()['delete']!.length).toBeGreaterThanOrEqual(1)
     })
   })
 })
diff --git a/src/platform/settings/components/SettingItem.test.ts b/src/platform/settings/components/SettingItem.test.ts
index c32548f838..ca1f4eae4c 100644
--- a/src/platform/settings/components/SettingItem.test.ts
+++ b/src/platform/settings/components/SettingItem.test.ts
@@ -1,14 +1,14 @@
-import { flushPromises, shallowMount } from '@vue/test-utils'
-import { describe, expect, it, vi, beforeEach } from 'vitest'
+import { render } from '@testing-library/vue'
+import { defineComponent } from 'vue'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import SettingItem from '@/platform/settings/components/SettingItem.vue'
 import type { SettingParams } from '@/platform/settings/types'
 import { i18n } from '@/i18n'
 
-/**
- * Verifies that SettingItem emits telemetry when its value changes
- * and suppresses telemetry when the value remains the same.
- */
+const flushPromises = () =>
+  new Promise<void>((resolve) => setTimeout(resolve, 0))
+
 const trackSettingChanged = vi.fn()
 vi.mock('@/platform/telemetry', () => ({
   useTelemetry: vi.fn(() => ({
@@ -25,22 +25,29 @@ vi.mock('@/platform/settings/settingStore', () => ({
   })
 }))
 
-/**
- * Minimal stub for FormItem that allows emitting `update:form-value`.
- */
-const FormItemUpdateStub = {
-  template: '<div />',
-  emits: ['update:form-value'],
-  props: ['id', 'item', 'formValue']
-}
+let emitFormValue: ((value: unknown) => void) | null = null
+
+const FormItemUpdateStub = defineComponent({
+  props: {
+    id: { type: String, default: '' },
+    item: { type: Object, default: undefined },
+    formValue: { type: [String, Number, Boolean, Object], default: undefined }
+  },
+  setup(_, { emit }) {
+    emitFormValue = (value: unknown) => emit('update:form-value', value)
+    return {}
+  },
+  template: '<div data-testid="form-item-stub" />'
+})
 
 describe('SettingItem (telemetry UI tracking)', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    emitFormValue = null
   })
 
-  const mountComponent = (setting: SettingParams) => {
-    return shallowMount(SettingItem, {
+  function renderComponent(setting: SettingParams) {
+    return render(SettingItem, {
       global: {
         plugins: [i18n],
         stubs: {
@@ -65,11 +72,9 @@ describe('SettingItem (telemetry UI tracking)', () => {
     mockGet.mockReturnValueOnce('default').mockReturnValueOnce('normalized')
     mockSet.mockResolvedValue(undefined)
 
-    const wrapper = mountComponent(settingParams)
+    renderComponent(settingParams)
 
-    const newValue = 'newvalue'
-    const formItem = wrapper.findComponent(FormItemUpdateStub)
-    formItem.vm.$emit('update:form-value', newValue)
+    emitFormValue!('newvalue')
 
     await flushPromises()
 
@@ -94,11 +99,9 @@ describe('SettingItem (telemetry UI tracking)', () => {
     mockGet.mockReturnValueOnce('same').mockReturnValueOnce('same')
     mockSet.mockResolvedValue(undefined)
 
-    const wrapper = mountComponent(settingParams)
+    renderComponent(settingParams)
 
-    const unchangedValue = 'same'
-    const formItem = wrapper.findComponent(FormItemUpdateStub)
-    formItem.vm.$emit('update:form-value', unchangedValue)
+    emitFormValue!('same')
 
     await flushPromises()
 
diff --git a/src/platform/surveys/NightlySurveyPopover.test.ts b/src/platform/surveys/NightlySurveyPopover.test.ts
index b6d8505e6c..8afd0102e7 100644
--- a/src/platform/surveys/NightlySurveyPopover.test.ts
+++ b/src/platform/surveys/NightlySurveyPopover.test.ts
@@ -1,9 +1,9 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 
 const FEATURE_USAGE_KEY = 'Comfy.FeatureUsage'
-const POPOVER_SELECTOR = '[data-testid="nightly-survey-popover"]'
 
 const mockIsNightly = vi.hoisted(() => ({ value: true }))
 const mockIsCloud = vi.hoisted(() => ({ value: false }))
@@ -60,20 +60,24 @@ describe('NightlySurveyPopover', () => {
   afterEach(() => {
     localStorage.clear()
     vi.useRealTimers()
-    document.body.innerHTML = ''
   })
 
-  async function mountComponent(config = defaultConfig) {
+  async function renderComponent(
+    config = defaultConfig,
+    eventHandlers: Record<string, ReturnType<typeof vi.fn>> = {}
+  ) {
     const { default: NightlySurveyPopover } =
       await import('./NightlySurveyPopover.vue')
-    return mount(NightlySurveyPopover, {
-      props: { config },
+    return render(NightlySurveyPopover, {
+      props: {
+        config,
+        ...eventHandlers
+      },
       global: {
         stubs: {
           Teleport: true
         }
-      },
-      attachTo: document.body
+      }
     })
   }
 
@@ -81,80 +85,89 @@ describe('NightlySurveyPopover', () => {
     it('shows popover after delay when eligible', async () => {
       setFeatureUsage('test-feature', 5)
 
-      const wrapper = await mountComponent()
+      await renderComponent()
       await nextTick()
 
-      expect(wrapper.find(POPOVER_SELECTOR).exists()).toBe(false)
+      expect(
+        screen.queryByTestId('nightly-survey-popover')
+      ).not.toBeInTheDocument()
 
       await vi.advanceTimersByTimeAsync(100)
       await nextTick()
 
-      expect(wrapper.find(POPOVER_SELECTOR).exists()).toBe(true)
+      expect(screen.getByTestId('nightly-survey-popover')).toBeInTheDocument()
     })
 
     it('does not show when not eligible', async () => {
       setFeatureUsage('test-feature', 1)
 
-      const wrapper = await mountComponent()
+      await renderComponent()
       await nextTick()
       await vi.advanceTimersByTimeAsync(1000)
       await nextTick()
 
-      expect(wrapper.find(POPOVER_SELECTOR).exists()).toBe(false)
+      expect(
+        screen.queryByTestId('nightly-survey-popover')
+      ).not.toBeInTheDocument()
     })
 
     it('does not show on cloud', async () => {
       mockIsCloud.value = true
       setFeatureUsage('test-feature', 5)
 
-      const wrapper = await mountComponent()
+      await renderComponent()
       await nextTick()
       await vi.advanceTimersByTimeAsync(1000)
       await nextTick()
 
-      expect(wrapper.find(POPOVER_SELECTOR).exists()).toBe(false)
+      expect(
+        screen.queryByTestId('nightly-survey-popover')
+      ).not.toBeInTheDocument()
     })
   })
 
   describe('user actions', () => {
     it('emits shown event when displayed', async () => {
       setFeatureUsage('test-feature', 5)
+      const onShown = vi.fn()
 
-      const wrapper = await mountComponent()
+      await renderComponent(defaultConfig, { onShown })
       await vi.advanceTimersByTimeAsync(100)
       await nextTick()
 
-      expect(wrapper.emitted('shown')).toHaveLength(1)
+      expect(onShown).toHaveBeenCalledTimes(1)
     })
 
     it('emits dismissed when close button clicked', async () => {
       setFeatureUsage('test-feature', 5)
+      const onDismissed = vi.fn()
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime })
 
-      const wrapper = await mountComponent()
+      await renderComponent(defaultConfig, { onDismissed })
       await vi.advanceTimersByTimeAsync(100)
       await nextTick()
 
-      const closeButton = wrapper.find('[aria-label="g.close"]')
-      await closeButton.trigger('click')
+      const closeButton = screen.getByRole('button', { name: 'g.close' })
+      await user.click(closeButton)
 
-      expect(wrapper.emitted('dismissed')).toHaveLength(1)
+      expect(onDismissed).toHaveBeenCalledTimes(1)
     })
 
     it('emits optedOut when opt out button clicked', async () => {
       setFeatureUsage('test-feature', 5)
+      const onOptedOut = vi.fn()
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime })
 
-      const wrapper = await mountComponent()
+      await renderComponent(defaultConfig, { onOptedOut })
       await vi.advanceTimersByTimeAsync(100)
       await nextTick()
 
-      const buttons = wrapper.findAll('button')
-      const optOutButton = buttons.find((b) =>
-        b.text().includes('nightlySurvey.dontAskAgain')
-      )
-      expect(optOutButton).toBeDefined()
-      await optOutButton!.trigger('click')
+      const optOutButton = screen.getByRole('button', {
+        name: /nightlySurvey.dontAskAgain/
+      })
+      await user.click(optOutButton)
 
-      expect(wrapper.emitted('optedOut')).toHaveLength(1)
+      expect(onOptedOut).toHaveBeenCalledTimes(1)
     })
   })
 
@@ -162,7 +175,7 @@ describe('NightlySurveyPopover', () => {
     it('uses custom delay from config', async () => {
       setFeatureUsage('test-feature', 5)
 
-      const wrapper = await mountComponent({
+      await renderComponent({
         ...defaultConfig,
         delayMs: 500
       })
@@ -170,17 +183,19 @@ describe('NightlySurveyPopover', () => {
 
       await vi.advanceTimersByTimeAsync(400)
       await nextTick()
-      expect(wrapper.find(POPOVER_SELECTOR).exists()).toBe(false)
+      expect(
+        screen.queryByTestId('nightly-survey-popover')
+      ).not.toBeInTheDocument()
 
       await vi.advanceTimersByTimeAsync(100)
       await nextTick()
-      expect(wrapper.find(POPOVER_SELECTOR).exists()).toBe(true)
+      expect(screen.getByTestId('nightly-survey-popover')).toBeInTheDocument()
     })
 
     it('does not show when config is disabled', async () => {
       setFeatureUsage('test-feature', 5)
 
-      const wrapper = await mountComponent({
+      await renderComponent({
         ...defaultConfig,
         enabled: false
       })
@@ -188,7 +203,9 @@ describe('NightlySurveyPopover', () => {
       await vi.advanceTimersByTimeAsync(1000)
       await nextTick()
 
-      expect(wrapper.find(POPOVER_SELECTOR).exists()).toBe(false)
+      expect(
+        screen.queryByTestId('nightly-survey-popover')
+      ).not.toBeInTheDocument()
     })
   })
 })
diff --git a/src/platform/telemetry/providers/cloud/GtmTelemetryProvider.test.ts b/src/platform/telemetry/providers/cloud/GtmTelemetryProvider.test.ts
index 2bbd00e097..ad7d76d0fd 100644
--- a/src/platform/telemetry/providers/cloud/GtmTelemetryProvider.test.ts
+++ b/src/platform/telemetry/providers/cloud/GtmTelemetryProvider.test.ts
@@ -121,7 +121,7 @@ describe('GtmTelemetryProvider', () => {
         event: 'execution_error',
         node_type: 'KSampler'
       })
-      expect((entry?.error as string).length).toBe(100)
+      expect(entry!.error as string).toHaveLength(100)
     })
 
     it('pushes select_content for template events', () => {
@@ -230,7 +230,7 @@ describe('GtmTelemetryProvider', () => {
       })
     })
 
-    it('pushes normalized email as user_data before auth event', () => {
+    it('pushes normalized email inside the auth event payload', () => {
       const provider = createInitializedProvider()
 
       provider.trackAuth({
@@ -241,20 +241,21 @@ describe('GtmTelemetryProvider', () => {
       })
 
       const dl = window.dataLayer as Record<string, unknown>[]
-      const userData = dl.find((entry) => 'user_data' in entry)
-      expect(userData).toMatchObject({
-        user_data: { email: 'test@example.com' }
+      const authEvent = dl.find((entry) => entry.event === 'sign_up')
+      expect(authEvent).toMatchObject({
+        event: 'sign_up',
+        method: 'email',
+        user_id: 'uid-123',
+        user_data: {
+          email: 'test@example.com'
+        }
       })
-
-      // Verify user_data is pushed before the sign_up event
-      const userDataIndex = dl.findIndex((entry) => 'user_data' in entry)
-      const signUpIndex = dl.findIndex(
-        (entry) => (entry as Record<string, unknown>).event === 'sign_up'
-      )
-      expect(userDataIndex).toBeLessThan(signUpIndex)
+      expect(
+        dl.some((entry) => 'user_data' in entry && !('event' in entry))
+      ).toBe(false)
     })
 
-    it('does not push user_data when email is absent', () => {
+    it('omits user_data when email is absent', () => {
       const provider = createInitializedProvider()
 
       provider.trackAuth({
@@ -263,9 +264,12 @@ describe('GtmTelemetryProvider', () => {
         user_id: 'uid-456'
       })
 
-      const dl = window.dataLayer as Record<string, unknown>[]
-      const userData = dl.find((entry) => 'user_data' in entry)
-      expect(userData).toBeUndefined()
+      expect(lastDataLayerEntry()).toMatchObject({
+        event: 'login',
+        method: 'google',
+        user_id: 'uid-456'
+      })
+      expect(lastDataLayerEntry()).not.toHaveProperty('user_data')
     })
 
     it('does not push events when not initialized', () => {
diff --git a/src/platform/telemetry/providers/cloud/GtmTelemetryProvider.ts b/src/platform/telemetry/providers/cloud/GtmTelemetryProvider.ts
index 2430f297a8..d3b3f381b6 100644
--- a/src/platform/telemetry/providers/cloud/GtmTelemetryProvider.ts
+++ b/src/platform/telemetry/providers/cloud/GtmTelemetryProvider.ts
@@ -135,23 +135,19 @@ export class GtmTelemetryProvider implements TelemetryProvider {
   }
 
   trackAuth(metadata: AuthMetadata): void {
-    const basePayload = {
+    const payload = {
       method: metadata.method,
-      ...(metadata.user_id ? { user_id: metadata.user_id } : {})
+      ...(metadata.user_id ? { user_id: metadata.user_id } : {}),
+      ...(metadata.email
+        ? {
+            user_data: {
+              email: metadata.email.trim().toLowerCase()
+            }
+          }
+        : {})
     }
 
-    if (metadata.email) {
-      window.dataLayer?.push({
-        user_data: { email: metadata.email.trim().toLowerCase() }
-      })
-    }
-
-    if (metadata.is_new_user) {
-      this.pushEvent('sign_up', basePayload)
-      return
-    }
-
-    this.pushEvent('login', basePayload)
+    this.pushEvent(metadata.is_new_user ? 'sign_up' : 'login', payload)
   }
 
   trackBeginCheckout(metadata: BeginCheckoutMetadata): void {
diff --git a/src/platform/updates/components/ReleaseNotificationToast.test.ts b/src/platform/updates/components/ReleaseNotificationToast.test.ts
index cf52efd9c9..df7c51078d 100644
--- a/src/platform/updates/components/ReleaseNotificationToast.test.ts
+++ b/src/platform/updates/components/ReleaseNotificationToast.test.ts
@@ -1,6 +1,7 @@
-import type { VueWrapper } from '@vue/test-utils'
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
 
 import type { ReleaseNote } from '../common/releaseService'
 import ReleaseNotificationToast from './ReleaseNotificationToast.vue'
@@ -66,6 +67,14 @@ vi.mock('@/stores/commandStore', () => ({
   }))
 }))
 
+vi.mock('@/composables/useExternalLink', () => ({
+  useExternalLink: vi.fn(() => ({
+    buildDocsUrl: vi.fn((path: string) => `https://docs.comfy.org${path}`),
+    staticUrls: {},
+    docsPaths: {}
+  }))
+}))
+
 // Mock release store
 const mockReleaseStore = {
   recentRelease: null as ReleaseNote | null,
@@ -81,10 +90,8 @@ vi.mock('../common/releaseStore', () => ({
 }))
 
 describe('ReleaseNotificationToast', () => {
-  let wrapper: VueWrapper<InstanceType<typeof ReleaseNotificationToast>>
-
-  const mountComponent = (props = {}) => {
-    return mount(ReleaseNotificationToast, {
+  const renderComponent = (props = {}) => {
+    return render(ReleaseNotificationToast, {
       global: {
         mocks: {
           $t: (key: string) => {
@@ -100,7 +107,6 @@ describe('ReleaseNotificationToast', () => {
           }
         },
         stubs: {
-          // Stub Lucide icons
           'i-lucide-rocket': true,
           'i-lucide-external-link': true
         }
@@ -112,9 +118,8 @@ describe('ReleaseNotificationToast', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     mockData.isDesktop = false
-    // Reset store state
     mockReleaseStore.recentRelease = null
-    mockReleaseStore.shouldShowToast = true // Force show for testing
+    mockReleaseStore.shouldShowToast = true
   })
 
   it('renders correctly when shouldShow is true', () => {
@@ -123,8 +128,8 @@ describe('ReleaseNotificationToast', () => {
       content: '# Test Release\n\nSome content'
     } as ReleaseNote
 
-    wrapper = mountComponent()
-    expect(wrapper.find('.release-toast-popup').exists()).toBe(true)
+    renderComponent()
+    expect(screen.getByText('New update is out!')).toBeInTheDocument()
   })
 
   it('displays rocket icon', () => {
@@ -133,8 +138,12 @@ describe('ReleaseNotificationToast', () => {
       content: '# Test Release'
     } as ReleaseNote
 
-    wrapper = mountComponent()
-    expect(wrapper.find('.release-toast-popup').exists()).toBe(true)
+    const { container } = renderComponent()
+    /* eslint-disable testing-library/no-container, testing-library/no-node-access */
+    expect(
+      container.querySelector('.icon-\\[lucide--rocket\\]')
+    ).toBeInTheDocument()
+    /* eslint-enable testing-library/no-container, testing-library/no-node-access */
   })
 
   it('displays release version', () => {
@@ -143,8 +152,8 @@ describe('ReleaseNotificationToast', () => {
       content: '# Test Release'
     } as ReleaseNote
 
-    wrapper = mountComponent()
-    expect(wrapper.text()).toContain('1.2.3')
+    renderComponent()
+    expect(screen.getByText('1.2.3')).toBeInTheDocument()
   })
 
   it('calls handleSkipRelease when skip button is clicked', async () => {
@@ -153,15 +162,10 @@ describe('ReleaseNotificationToast', () => {
       content: '# Test Release'
     } as ReleaseNote
 
-    wrapper = mountComponent()
+    renderComponent()
+    const user = userEvent.setup()
 
-    const buttons = wrapper.findAll('button')
-    const skipButton = buttons.find(
-      (btn) =>
-        btn.text().includes('Skip') || btn.element.innerHTML.includes('skip')
-    )
-    expect(skipButton).toBeDefined()
-    await skipButton!.trigger('click')
+    await user.click(screen.getByRole('button', { name: /skip/i }))
 
     expect(mockReleaseStore.handleSkipRelease).toHaveBeenCalledWith('1.2.3')
   })
@@ -172,17 +176,16 @@ describe('ReleaseNotificationToast', () => {
       content: '# Test Release'
     } as ReleaseNote
 
-    // Mock window.open
     const mockWindowOpen = vi.fn()
     Object.defineProperty(window, 'open', {
       value: mockWindowOpen,
       writable: true
     })
 
-    wrapper = mountComponent()
+    renderComponent()
+    const user = userEvent.setup()
 
-    // Call the handler directly instead of triggering DOM event
-    await wrapper.vm.handleUpdate()
+    await user.click(screen.getByRole('button', { name: /update/i }))
 
     expect(mockWindowOpen).toHaveBeenCalledWith(
       'https://docs.comfy.org/installation/update_comfyui',
@@ -205,8 +208,10 @@ describe('ReleaseNotificationToast', () => {
       writable: true
     })
 
-    wrapper = mountComponent()
-    await wrapper.vm.handleUpdate()
+    renderComponent()
+    const user = userEvent.setup()
+
+    await user.click(screen.getByRole('button', { name: /update/i }))
 
     expect(commandExecuteMock).toHaveBeenCalledWith(
       'Comfy-Desktop.CheckForUpdates'
@@ -231,8 +236,10 @@ describe('ReleaseNotificationToast', () => {
       writable: true
     })
 
-    wrapper = mountComponent()
-    await wrapper.vm.handleUpdate()
+    renderComponent()
+    const user = userEvent.setup()
+
+    await user.click(screen.getByRole('button', { name: /update/i }))
 
     expect(toastErrorHandlerMock).toHaveBeenCalledWith(error)
     expect(mockWindowOpen).not.toHaveBeenCalled()
@@ -244,10 +251,10 @@ describe('ReleaseNotificationToast', () => {
       content: '# Test Release'
     } as ReleaseNote
 
-    wrapper = mountComponent()
+    renderComponent()
+    const user = userEvent.setup()
 
-    // Call the handler directly instead of triggering DOM event
-    await wrapper.vm.handleLearnMore()
+    await user.click(screen.getByRole('link', { name: /what's new/i }))
 
     expect(mockReleaseStore.handleShowChangelog).toHaveBeenCalledWith('1.2.3')
   })
@@ -258,12 +265,12 @@ describe('ReleaseNotificationToast', () => {
       content: '# Test Release'
     } as ReleaseNote
 
-    wrapper = mountComponent()
+    renderComponent()
 
-    const learnMoreLink = wrapper.find('a[target="_blank"]')
-    expect(learnMoreLink.exists()).toBe(true)
-    expect(learnMoreLink.attributes('href')).toContain(
-      'docs.comfy.org/changelog'
+    const learnMoreLink = screen.getByRole('link', { name: /what's new/i })
+    expect(learnMoreLink).toHaveAttribute(
+      'href',
+      expect.stringContaining('docs.comfy.org/changelog')
     )
   })
 
@@ -281,16 +288,15 @@ describe('ReleaseNotificationToast', () => {
       content: '# Test Release Title\n\nSome content'
     } as ReleaseNote
 
-    wrapper = mountComponent()
+    renderComponent()
 
-    // Should call markdown renderer with title removed
     expect(mockMarkdownRenderer).toHaveBeenCalledWith('\n\nSome content')
   })
 
-  it('fetches releases on mount when not already loaded', async () => {
-    mockReleaseStore.releases = [] // Empty releases array
+  it('fetches releases on mount when not already loaded', () => {
+    mockReleaseStore.releases = []
 
-    wrapper = mountComponent()
+    renderComponent()
 
     expect(mockReleaseStore.fetchReleases).toHaveBeenCalled()
   })
@@ -302,61 +308,52 @@ describe('ReleaseNotificationToast', () => {
       content: ''
     } as ReleaseNote
 
-    wrapper = mountComponent()
+    renderComponent()
 
-    // Should render fallback content
-    const descriptionElement = wrapper.find('.pl-14')
-    expect(descriptionElement.exists()).toBe(true)
-    expect(descriptionElement.text()).toContain('Check out the latest')
+    expect(screen.getByText(/Check out the latest/)).toBeInTheDocument()
   })
 
   it('auto-hides after timeout', async () => {
     vi.useFakeTimers()
+    try {
+      mockReleaseStore.recentRelease = {
+        version: '1.2.3',
+        content: '# Test Release'
+      } as ReleaseNote
 
-    mockReleaseStore.recentRelease = {
-      version: '1.2.3',
-      content: '# Test Release'
-    } as ReleaseNote
+      renderComponent()
 
-    wrapper = mountComponent()
+      expect(screen.getByText('New update is out!')).toBeInTheDocument()
 
-    // Initially visible
-    expect(wrapper.find('.release-toast-popup').exists()).toBe(true)
+      vi.advanceTimersByTime(8000)
+      await nextTick()
 
-    // Fast-forward time to trigger auto-hide
-    vi.advanceTimersByTime(8000)
-    await wrapper.vm.$nextTick()
-
-    // Component should call dismissToast internally which hides it
-    // We can't test DOM visibility change because the component uses local state
-    // But we can verify the timer was set and would have triggered
-    expect(vi.getTimerCount()).toBe(0) // Timer should be cleared after auto-hide
-
-    vi.useRealTimers()
+      expect(vi.getTimerCount()).toBe(0)
+    } finally {
+      vi.useRealTimers()
+    }
   })
 
   it('clears auto-hide timer when manually dismissed', async () => {
     vi.useFakeTimers()
+    try {
+      mockReleaseStore.recentRelease = {
+        version: '1.2.3',
+        content: '# Test Release'
+      } as ReleaseNote
 
-    mockReleaseStore.recentRelease = {
-      version: '1.2.3',
-      content: '# Test Release'
-    } as ReleaseNote
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime })
 
-    wrapper = mountComponent()
+      renderComponent()
 
-    // Start the timer
-    vi.advanceTimersByTime(1000)
+      vi.advanceTimersByTime(1000)
 
-    // Manually dismiss by calling handler directly
-    await wrapper.vm.handleSkip()
+      await user.click(screen.getByRole('button', { name: /skip/i }))
 
-    // Timer should be cleared
-    expect(vi.getTimerCount()).toBe(0)
-
-    // Verify the store method was called (manual dismissal)
-    expect(mockReleaseStore.handleSkipRelease).toHaveBeenCalled()
-
-    vi.useRealTimers()
+      expect(vi.getTimerCount()).toBe(0)
+      expect(mockReleaseStore.handleSkipRelease).toHaveBeenCalled()
+    } finally {
+      vi.useRealTimers()
+    }
   })
 })
diff --git a/src/platform/updates/components/WhatsNewPopup.test.ts b/src/platform/updates/components/WhatsNewPopup.test.ts
index 41a0008eb6..eed018aab6 100644
--- a/src/platform/updates/components/WhatsNewPopup.test.ts
+++ b/src/platform/updates/components/WhatsNewPopup.test.ts
@@ -1,5 +1,5 @@
-import type { VueWrapper } from '@vue/test-utils'
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import Button from '@/components/ui/button/Button.vue'
 import PrimeVue from 'primevue/config'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -62,10 +62,8 @@ vi.mock('../common/releaseStore', () => ({
 }))
 
 describe('WhatsNewPopup', () => {
-  let wrapper: VueWrapper
-
-  const mountComponent = (props = {}) => {
-    return mount(WhatsNewPopup, {
+  const renderComponent = (props = {}) => {
+    return render(WhatsNewPopup, {
       global: {
         plugins: [PrimeVue],
         components: { Button },
@@ -75,7 +73,6 @@ describe('WhatsNewPopup', () => {
           }
         },
         stubs: {
-          // Stub Lucide icons
           'i-lucide-x': true,
           'i-lucide-external-link': true
         }
@@ -86,7 +83,6 @@ describe('WhatsNewPopup', () => {
 
   beforeEach(() => {
     vi.clearAllMocks()
-    // Reset store state
     mockReleaseStore.recentRelease = null
     mockReleaseStore.shouldShowPopup = false
     mockReleaseStore.releases = []
@@ -101,14 +97,16 @@ describe('WhatsNewPopup', () => {
       content: '# Test Release\n\nSome content'
     } as ReleaseNote
 
-    wrapper = mountComponent()
-    expect(wrapper.find('.whats-new-popup').exists()).toBe(true)
+    const { container } = renderComponent()
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    expect(container.querySelector('.whats-new-popup')).not.toBeNull()
   })
 
   it('does not render when shouldShow is false', () => {
     mockReleaseStore.shouldShowPopup = false
-    wrapper = mountComponent()
-    expect(wrapper.find('.whats-new-popup').exists()).toBe(false)
+    const { container } = renderComponent()
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    expect(container.querySelector('.whats-new-popup')).toBeNull()
   })
 
   it('calls handleWhatsNewSeen when close button is clicked', async () => {
@@ -118,10 +116,10 @@ describe('WhatsNewPopup', () => {
       content: '# Test Release'
     } as ReleaseNote
 
-    wrapper = mountComponent()
+    const user = userEvent.setup()
+    renderComponent()
 
-    const closeButton = wrapper.findComponent(Button)
-    await closeButton.trigger('click')
+    await user.click(screen.getByRole('button', { name: /close/i }))
 
     expect(mockReleaseStore.handleWhatsNewSeen).toHaveBeenCalledWith('1.2.3')
   })
@@ -133,10 +131,10 @@ describe('WhatsNewPopup', () => {
       content: '# Test Release'
     } as ReleaseNote
 
-    wrapper = mountComponent()
+    renderComponent()
 
-    const learnMoreLink = wrapper.find('.learn-more-link')
-    expect(learnMoreLink.attributes('href')).toContain(
+    const learnMoreLink = screen.getByRole('link')
+    expect(learnMoreLink.getAttribute('href')).toContain(
       'docs.comfy.org/changelog'
     )
   })
@@ -148,11 +146,10 @@ describe('WhatsNewPopup', () => {
       content: ''
     } as ReleaseNote
 
-    wrapper = mountComponent()
+    const { container } = renderComponent()
 
-    // Should render fallback content
-    const contentElement = wrapper.find('.content-text')
-    expect(contentElement.exists()).toBe(true)
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    expect(container.querySelector('.content-text')).not.toBeNull()
   })
 
   it('emits whats-new-dismissed event when popup is closed', async () => {
@@ -162,30 +159,29 @@ describe('WhatsNewPopup', () => {
       content: '# Test Release'
     } as ReleaseNote
 
-    wrapper = mountComponent()
+    const onDismissed = vi.fn()
+    const user = userEvent.setup()
+    renderComponent({ 'onWhats-new-dismissed': onDismissed })
 
-    // Call the close method directly instead of triggering DOM event
-    await (
-      wrapper.vm as typeof wrapper.vm & { closePopup: () => Promise<void> }
-    ).closePopup()
+    await user.click(screen.getByRole('button', { name: /close/i }))
 
-    expect(wrapper.emitted('whats-new-dismissed')).toBeTruthy()
+    expect(onDismissed).toHaveBeenCalled()
   })
 
   it('fetches releases on mount when not already loaded', async () => {
     mockReleaseStore.shouldShowPopup = true
-    mockReleaseStore.releases = [] // Empty releases array
+    mockReleaseStore.releases = []
 
-    wrapper = mountComponent()
+    renderComponent()
 
     expect(mockReleaseStore.fetchReleases).toHaveBeenCalled()
   })
 
   it('does not fetch releases when already loaded', async () => {
     mockReleaseStore.shouldShowPopup = true
-    mockReleaseStore.releases = [{ version: '1.0.0' } as ReleaseNote] // Non-empty releases array
+    mockReleaseStore.releases = [{ version: '1.0.0' } as ReleaseNote]
 
-    wrapper = mountComponent()
+    renderComponent()
 
     expect(mockReleaseStore.fetchReleases).not.toHaveBeenCalled()
   })
@@ -205,9 +201,8 @@ describe('WhatsNewPopup', () => {
       content: '# Original Title\n\nContent'
     } as ReleaseNote
 
-    wrapper = mountComponent()
+    renderComponent()
 
-    // Should call markdown renderer with original content (no modification)
     expect(mockMarkdownRenderer).toHaveBeenCalledWith(
       '# Original Title\n\nContent'
     )
diff --git a/src/platform/workflow/core/services/workflowService.test.ts b/src/platform/workflow/core/services/workflowService.test.ts
index 7e0f2f5131..708d9ba803 100644
--- a/src/platform/workflow/core/services/workflowService.test.ts
+++ b/src/platform/workflow/core/services/workflowService.test.ts
@@ -13,6 +13,9 @@ import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workfl
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
+import { useMissingMediaStore } from '@/platform/missingMedia/missingMediaStore'
 import { app } from '@/scripts/app'
 import { useAppMode } from '@/composables/useAppMode'
 import type { AppMode } from '@/composables/useAppMode'
@@ -71,7 +74,7 @@ vi.mock('@/services/dialogService', () => ({
 vi.mock('@/scripts/app', () => ({
   app: {
     canvas: { ds: { offset: [0, 0], scale: 1 } },
-    rootGraph: { serialize: vi.fn(() => ({})) },
+    rootGraph: { serialize: vi.fn(() => ({})), extra: {} },
     loadGraphData: vi.fn()
   }
 }))
@@ -93,7 +96,11 @@ vi.mock('@/renderer/core/thumbnail/useWorkflowThumbnail', () => ({
 }))
 
 vi.mock('@/platform/telemetry', () => ({
-  useTelemetry: () => null
+  useTelemetry: () => ({
+    trackDefaultViewSet: vi.fn(),
+    trackWorkflowSaved: vi.fn(),
+    trackEnterLinear: vi.fn()
+  })
 }))
 
 vi.mock('@/platform/workflow/persistence/stores/workflowDraftStore', () => ({
@@ -111,6 +118,12 @@ vi.mock('@/stores/domWidgetStore', () => ({
   })
 }))
 
+vi.mock('@/stores/subgraphNavigationStore', () => ({
+  useSubgraphNavigationStore: () => ({
+    saveCurrentViewport: vi.fn()
+  })
+}))
+
 vi.mock('@/stores/workspaceStore', () => ({
   useWorkspaceStore: () => ({
     get workflow() {
@@ -155,16 +168,16 @@ describe('useWorkflowService', () => {
       enableWarningSettings()
     })
 
-    it('should do nothing when workflow has no pending warnings', () => {
+    it('should clear missing nodes when workflow has no pending warnings', () => {
       const workflow = createWorkflow(null)
       useWorkflowService().showPendingWarnings(workflow)
 
       expect(
         useMissingNodesErrorStore().surfaceMissingNodes
-      ).not.toHaveBeenCalled()
+      ).toHaveBeenCalledWith([])
     })
 
-    it('should surface missing nodes and clear warnings', () => {
+    it('should surface missing nodes and cache warnings', () => {
       const missingNodeTypes = ['CustomNode1', 'CustomNode2']
       const workflow = createWorkflow({ missingNodeTypes })
 
@@ -173,7 +186,11 @@ describe('useWorkflowService', () => {
       expect(
         useMissingNodesErrorStore().surfaceMissingNodes
       ).toHaveBeenCalledWith(missingNodeTypes)
-      expect(workflow.pendingWarnings).toBeNull()
+      expect(workflow.pendingWarnings).toEqual({
+        missingNodeTypes,
+        missingModelCandidates: undefined,
+        missingMediaCandidates: undefined
+      })
     })
 
     it('should always surface missing nodes regardless of settings', () => {
@@ -188,10 +205,10 @@ describe('useWorkflowService', () => {
       expect(
         useMissingNodesErrorStore().surfaceMissingNodes
       ).toHaveBeenCalledWith(['CustomNode1'])
-      expect(workflow.pendingWarnings).toBeNull()
+      expect(workflow.pendingWarnings).not.toBeNull()
     })
 
-    it('should only show warnings once across multiple calls', () => {
+    it('should restore cached warnings on repeated calls', () => {
       const workflow = createWorkflow({
         missingNodeTypes: ['CustomNode1']
       })
@@ -202,7 +219,96 @@ describe('useWorkflowService', () => {
 
       expect(
         useMissingNodesErrorStore().surfaceMissingNodes
-      ).toHaveBeenCalledTimes(1)
+      ).toHaveBeenCalledTimes(2)
+    })
+
+    it('should NOT call showErrorOverlay when silent is true even with missing nodes', () => {
+      vi.spyOn(useSettingStore(), 'get').mockImplementation(
+        (key: string): boolean => {
+          if (key === 'Comfy.Workflow.ShowMissingModelsWarning') return true
+          if (key === 'Comfy.RightSidePanel.ShowErrorsTab') return true
+          return false
+        }
+      )
+      const workflow = createWorkflow({
+        missingNodeTypes: ['CustomNode1']
+      })
+
+      useWorkflowService().showPendingWarnings(workflow, { silent: true })
+
+      expect(
+        useMissingNodesErrorStore().surfaceMissingNodes
+      ).toHaveBeenCalledWith(['CustomNode1'])
+      expect(useExecutionErrorStore().showErrorOverlay).not.toHaveBeenCalled()
+    })
+
+    it('should call showErrorOverlay when silent is false and missing nodes exist', () => {
+      vi.spyOn(useSettingStore(), 'get').mockImplementation(
+        (key: string): boolean => {
+          if (key === 'Comfy.Workflow.ShowMissingModelsWarning') return true
+          if (key === 'Comfy.RightSidePanel.ShowErrorsTab') return true
+          return false
+        }
+      )
+      const workflow = createWorkflow({
+        missingNodeTypes: ['CustomNode1']
+      })
+
+      useWorkflowService().showPendingWarnings(workflow)
+
+      expect(
+        useMissingNodesErrorStore().surfaceMissingNodes
+      ).toHaveBeenCalledWith(['CustomNode1'])
+      expect(useExecutionErrorStore().showErrorOverlay).toHaveBeenCalled()
+    })
+  })
+
+  describe('beforeLoadNewGraph', () => {
+    let workflowStore: ReturnType<typeof useWorkflowStore>
+
+    beforeEach(() => {
+      enableWarningSettings()
+      workflowStore = useWorkflowStore()
+    })
+
+    it('should cache missingModelCandidates and missingMediaCandidates to activeWorkflow.pendingWarnings', () => {
+      const activeWorkflow = createModeTestWorkflow({
+        path: 'workflows/test.json'
+      })
+      workflowStore.activeWorkflow = activeWorkflow
+
+      const modelCandidates = [
+        {
+          nodeId: '1',
+          nodeType: 'CheckpointLoaderSimple',
+          widgetName: 'ckpt_name',
+          isAssetSupported: false,
+          name: 'missing.safetensors',
+          isMissing: true
+        }
+      ]
+      const mediaCandidates = [
+        {
+          nodeId: '2',
+          nodeType: 'LoadImage',
+          widgetName: 'image',
+          mediaType: 'image' as const,
+          name: 'photo.png',
+          isMissing: true
+        }
+      ]
+
+      useMissingModelStore().missingModelCandidates = modelCandidates as never
+      useMissingMediaStore().missingMediaCandidates = mediaCandidates as never
+
+      useWorkflowService().beforeLoadNewGraph()
+
+      expect(activeWorkflow.pendingWarnings).toEqual(
+        expect.objectContaining({
+          missingModelCandidates: modelCandidates,
+          missingMediaCandidates: mediaCandidates
+        })
+      )
     })
   })
 
@@ -241,7 +347,7 @@ describe('useWorkflowService', () => {
       expect(
         useMissingNodesErrorStore().surfaceMissingNodes
       ).toHaveBeenCalledWith(['CustomNode1'])
-      expect(workflow.pendingWarnings).toBeNull()
+      expect(workflow.pendingWarnings).not.toBeNull()
     })
 
     it('should show each workflow warnings only when that tab is focused', async () => {
@@ -263,7 +369,7 @@ describe('useWorkflowService', () => {
       expect(
         useMissingNodesErrorStore().surfaceMissingNodes
       ).toHaveBeenCalledWith(['MissingNodeA'])
-      expect(workflow1.pendingWarnings).toBeNull()
+      expect(workflow1.pendingWarnings).not.toBeNull()
       expect(workflow2.pendingWarnings).not.toBeNull()
 
       await service.openWorkflow(workflow2)
@@ -273,10 +379,10 @@ describe('useWorkflowService', () => {
       expect(
         useMissingNodesErrorStore().surfaceMissingNodes
       ).toHaveBeenLastCalledWith(['MissingNodeB'])
-      expect(workflow2.pendingWarnings).toBeNull()
+      expect(workflow2.pendingWarnings).not.toBeNull()
     })
 
-    it('should not show warnings when refocusing a cleared tab', async () => {
+    it('should restore cached warnings silently when refocusing a tab', async () => {
       const workflow = createWorkflow(
         { missingNodeTypes: ['CustomNode1'] },
         { loadable: true }
@@ -290,9 +396,10 @@ describe('useWorkflowService', () => {
       ).toHaveBeenCalledTimes(1)
 
       await service.openWorkflow(workflow, { force: true })
+      // Cached warnings are restored on refocus
       expect(
         useMissingNodesErrorStore().surfaceMissingNodes
-      ).toHaveBeenCalledTimes(1)
+      ).toHaveBeenCalledTimes(2)
     })
   })
 
@@ -328,48 +435,6 @@ describe('useWorkflowService', () => {
     })
   })
 
-  describe('saveWorkflowAs', () => {
-    let workflowStore: ReturnType<typeof useWorkflowStore>
-
-    beforeEach(() => {
-      setActivePinia(createTestingPinia())
-      workflowStore = useWorkflowStore()
-    })
-
-    it('should rename then save when workflow is temporary', async () => {
-      const workflow = createModeTestWorkflow({
-        path: 'workflows/Unsaved Workflow.json'
-      })
-      Object.defineProperty(workflow, 'isTemporary', { get: () => true })
-      vi.mocked(workflowStore.getWorkflowByPath).mockReturnValue(null)
-      vi.mocked(workflowStore.renameWorkflow).mockResolvedValue()
-      vi.mocked(workflowStore.saveWorkflow).mockResolvedValue()
-
-      const result = await useWorkflowService().saveWorkflowAs(workflow, {
-        filename: 'my-workflow'
-      })
-
-      expect(result).toBe(true)
-      expect(workflowStore.renameWorkflow).toHaveBeenCalledWith(
-        workflow,
-        'workflows/my-workflow.json'
-      )
-      expect(workflowStore.saveWorkflow).toHaveBeenCalledWith(workflow)
-    })
-
-    it('should return false when no filename is provided', async () => {
-      const workflow = createModeTestWorkflow({
-        path: 'workflows/test.json'
-      })
-      vi.spyOn(workflow, 'promptSave').mockResolvedValue(null)
-
-      const result = await useWorkflowService().saveWorkflowAs(workflow)
-
-      expect(result).toBe(false)
-      expect(workflowStore.saveWorkflow).not.toHaveBeenCalled()
-    })
-  })
-
   describe('afterLoadNewGraph', () => {
     let workflowStore: ReturnType<typeof useWorkflowStore>
     let existingWorkflow: LoadedComfyWorkflow
@@ -538,6 +603,20 @@ describe('useWorkflowService', () => {
         expect(workflow.initialMode).toBe('graph')
         expect(appMode.mode.value).toBe('builder:arrange')
       })
+
+      it('sets activeMode even when initialMode already matches', () => {
+        const workflow = createModeTestWorkflow({
+          initialMode: 'app',
+          activeMode: null
+        })
+        workflowStore.activeWorkflow = workflow
+
+        // mode.value is 'app' via initialMode fallback, but activeMode
+        // must still be set so the UI transitions to app view
+        appMode.setMode('app')
+
+        expect(workflow.activeMode).toBe('app')
+      })
     })
 
     describe('afterLoadNewGraph initializes initialMode', () => {
@@ -686,6 +765,7 @@ describe('useWorkflowService', () => {
       service = useWorkflowService()
       vi.spyOn(workflowStore, 'saveWorkflow').mockResolvedValue()
       vi.spyOn(workflowStore, 'renameWorkflow').mockResolvedValue()
+      app.rootGraph.extra = {}
     })
 
     function createTemporaryWorkflow(
@@ -703,6 +783,34 @@ describe('useWorkflowService', () => {
       return workflow as LoadedComfyWorkflow
     }
 
+    it('should rename then save when workflow is temporary', async () => {
+      const workflow = createTemporaryWorkflow()
+      vi.mocked(workflowStore.getWorkflowByPath).mockReturnValue(null)
+
+      const result = await service.saveWorkflowAs(workflow, {
+        filename: 'my-workflow'
+      })
+
+      expect(result).toBe(true)
+      expect(workflowStore.renameWorkflow).toHaveBeenCalledWith(
+        workflow,
+        'workflows/my-workflow.json'
+      )
+      expect(workflowStore.saveWorkflow).toHaveBeenCalledWith(workflow)
+    })
+
+    it('should return false when no filename is provided', async () => {
+      const workflow = createModeTestWorkflow({
+        path: 'workflows/test.json'
+      })
+      vi.spyOn(workflow, 'promptSave').mockResolvedValue(null)
+
+      const result = await service.saveWorkflowAs(workflow)
+
+      expect(result).toBe(false)
+      expect(workflowStore.saveWorkflow).not.toHaveBeenCalled()
+    })
+
     it('appends .app.json extension when initialMode is app', async () => {
       const workflow = createTemporaryWorkflow()
       workflow.initialMode = 'app'
@@ -737,6 +845,211 @@ describe('useWorkflowService', () => {
         'workflows/my-workflow.json'
       )
     })
+
+    it('uses isApp option over initialMode when provided (graph -> app)', async () => {
+      const workflow = createTemporaryWorkflow()
+      workflow.initialMode = 'graph'
+
+      await service.saveWorkflowAs(workflow, {
+        filename: 'my-workflow',
+        isApp: true
+      })
+
+      expect(workflowStore.renameWorkflow).toHaveBeenCalledWith(
+        workflow,
+        'workflows/my-workflow.app.json'
+      )
+    })
+
+    it('uses isApp option over initialMode when provided (app -> graph)', async () => {
+      const workflow = createTemporaryWorkflow()
+      workflow.initialMode = 'app'
+
+      await service.saveWorkflowAs(workflow, {
+        filename: 'my-workflow',
+        isApp: false
+      })
+
+      expect(workflowStore.renameWorkflow).toHaveBeenCalledWith(
+        workflow,
+        'workflows/my-workflow.json'
+      )
+    })
+
+    it('creates a copy when saving same name with different mode (not self-overwrite)', async () => {
+      const source = createModeTestWorkflow({
+        path: 'workflows/test.json',
+        initialMode: 'graph'
+      })
+
+      const copy = createModeTestWorkflow({
+        path: 'workflows/test.app.json'
+      })
+      vi.spyOn(workflowStore, 'saveAs').mockReturnValue(copy)
+      vi.spyOn(workflowStore, 'openWorkflow').mockResolvedValue(copy)
+
+      await service.saveWorkflowAs(source, {
+        filename: 'test',
+        isApp: true
+      })
+
+      // Different extension means different path, so it's not a self-overwrite
+      // — a new copy is created instead of modifying the source in place
+      expect(source.initialMode).toBe('graph')
+      expect(workflowStore.saveAs).toHaveBeenCalledWith(
+        source,
+        'workflows/test.app.json'
+      )
+      expect(workflowStore.saveWorkflow).toHaveBeenCalledWith(copy)
+    })
+
+    it('self-overwrites when saving same name with same mode', async () => {
+      const source = createModeTestWorkflow({
+        path: 'workflows/test.app.json',
+        initialMode: 'app'
+      })
+      vi.spyOn(workflowStore, 'getWorkflowByPath').mockReturnValue(source)
+      mockConfirm.mockResolvedValue(true)
+
+      await service.saveWorkflowAs(source, {
+        filename: 'test',
+        isApp: true
+      })
+
+      // Same path → self-overwrite: saves in place via saveWorkflow, no copy
+      expect(workflowStore.saveAs).not.toHaveBeenCalled()
+      expect(workflowStore.saveWorkflow).toHaveBeenCalledWith(source)
+    })
+
+    it('does not modify source workflow mode when saving persisted workflow as different mode', async () => {
+      const source = createModeTestWorkflow({
+        path: 'workflows/original.json',
+        initialMode: 'graph'
+      })
+
+      const copy = createModeTestWorkflow({
+        path: 'workflows/copy.app.json'
+      })
+      vi.spyOn(workflowStore, 'saveAs').mockReturnValue(copy)
+      vi.spyOn(workflowStore, 'openWorkflow').mockResolvedValue(copy)
+
+      await service.saveWorkflowAs(source, {
+        filename: 'copy',
+        isApp: true
+      })
+
+      expect(source.initialMode).toBe('graph')
+      expect(copy.initialMode).toBe('app')
+      expect(workflowStore.saveAs).toHaveBeenCalledWith(
+        source,
+        'workflows/copy.app.json'
+      )
+      expect(workflowStore.saveWorkflow).toHaveBeenCalledWith(copy)
+    })
+
+    it('does not modify source workflow mode when saving app as graph', async () => {
+      const source = createModeTestWorkflow({
+        path: 'workflows/original.app.json',
+        initialMode: 'app'
+      })
+
+      const copy = createModeTestWorkflow({
+        path: 'workflows/copy.json'
+      })
+      vi.spyOn(workflowStore, 'saveAs').mockReturnValue(copy)
+      vi.spyOn(workflowStore, 'openWorkflow').mockResolvedValue(copy)
+
+      await service.saveWorkflowAs(source, {
+        filename: 'copy',
+        isApp: false
+      })
+
+      expect(source.initialMode).toBe('app')
+      expect(copy.initialMode).toBe('graph')
+      expect(workflowStore.saveAs).toHaveBeenCalledWith(
+        source,
+        'workflows/copy.json'
+      )
+      expect(workflowStore.saveWorkflow).toHaveBeenCalledWith(copy)
+    })
+
+    function captureLinearModeAtSaveTime() {
+      let value: boolean | undefined
+      vi.mocked(workflowStore.saveWorkflow).mockImplementation(async () => {
+        value = app.rootGraph.extra?.linearMode as boolean | undefined
+      })
+      return () => value
+    }
+
+    it('sets linearMode in graph data before saving (graph -> app)', async () => {
+      const workflow = createTemporaryWorkflow()
+      workflow.initialMode = 'graph'
+      app.rootGraph.extra = { linearMode: false }
+      const getLinearMode = captureLinearModeAtSaveTime()
+
+      await service.saveWorkflowAs(workflow, {
+        filename: 'my-workflow',
+        isApp: true
+      })
+
+      expect(getLinearMode()).toBe(true)
+    })
+
+    it('sets linearMode in graph data before saving (app -> graph)', async () => {
+      const workflow = createTemporaryWorkflow()
+      workflow.initialMode = 'app'
+      app.rootGraph.extra = { linearMode: true }
+      const getLinearMode = captureLinearModeAtSaveTime()
+
+      await service.saveWorkflowAs(workflow, {
+        filename: 'my-workflow',
+        isApp: false
+      })
+
+      expect(getLinearMode()).toBe(false)
+    })
+
+    it('sets linearMode before saving persisted workflow copy', async () => {
+      const source = createModeTestWorkflow({
+        path: 'workflows/original.json',
+        initialMode: 'graph'
+      })
+      app.rootGraph.extra = { linearMode: false }
+
+      const copy = createModeTestWorkflow({
+        path: 'workflows/original.app.json'
+      })
+      vi.spyOn(workflowStore, 'saveAs').mockReturnValue(copy)
+      vi.spyOn(workflowStore, 'openWorkflow').mockResolvedValue(copy)
+      const getLinearMode = captureLinearModeAtSaveTime()
+
+      await service.saveWorkflowAs(source, {
+        filename: 'original',
+        isApp: true
+      })
+
+      expect(getLinearMode()).toBe(true)
+    })
+
+    it('does not change initialMode when isApp is omitted (persisted copy)', async () => {
+      const source = createModeTestWorkflow({
+        path: 'workflows/original.app.json',
+        initialMode: 'app'
+      })
+
+      // Real saveAs copies initialMode from source; replicate that here
+      const copy = createModeTestWorkflow({
+        path: 'workflows/copy.app.json',
+        initialMode: 'app'
+      })
+      vi.spyOn(workflowStore, 'saveAs').mockReturnValue(copy)
+      vi.spyOn(workflowStore, 'openWorkflow').mockResolvedValue(copy)
+
+      await service.saveWorkflowAs(source, { filename: 'copy' })
+
+      // saveWorkflowAs should not change initialMode when isApp is omitted
+      expect(copy.initialMode).toBe('app')
+    })
   })
 
   describe('saveWorkflow', () => {
diff --git a/src/platform/workflow/core/services/workflowService.ts b/src/platform/workflow/core/services/workflowService.ts
index 28ceb3a69e..9087edf896 100644
--- a/src/platform/workflow/core/services/workflowService.ts
+++ b/src/platform/workflow/core/services/workflowService.ts
@@ -25,6 +25,8 @@ import { useAppModeStore } from '@/stores/appModeStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
+import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
+import { useMissingMediaStore } from '@/platform/missingMedia/missingMediaStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import {
   appendJsonExt,
@@ -44,7 +46,6 @@ export const useWorkflowService = () => {
   const dialogService = useDialogService()
   const workflowThumbnail = useWorkflowThumbnail()
   const domWidgetStore = useDomWidgetStore()
-  const executionErrorStore = useExecutionErrorStore()
   const missingNodesErrorStore = useMissingNodesErrorStore()
   const workflowDraftStore = useWorkflowDraftStore()
 
@@ -116,12 +117,12 @@ export const useWorkflowService = () => {
    */
   const saveWorkflowAs = async (
     workflow: ComfyWorkflow,
-    options: { filename?: string } = {}
+    options: { filename?: string; isApp?: boolean } = {}
   ): Promise<boolean> => {
     const newFilename = options.filename ?? (await workflow.promptSave())
     if (!newFilename) return false
 
-    const isApp = workflow.initialMode === 'app'
+    const isApp = options.isApp ?? workflow.initialMode === 'app'
     const newPath =
       workflow.directory + '/' + appendWorkflowJsonExt(newFilename, isApp)
     const existingWorkflow = workflowStore.getWorkflowByPath(newPath)
@@ -138,17 +139,26 @@ export const useWorkflowService = () => {
       }
     }
 
-    workflow.changeTracker?.checkState()
-
     if (isSelfOverwrite) {
+      workflow.changeTracker?.prepareForSave()
       await saveWorkflow(workflow)
-    } else if (workflow.isTemporary) {
-      await renameWorkflow(workflow, newPath)
-      await workflowStore.saveWorkflow(workflow)
     } else {
-      const tempWorkflow = workflowStore.saveAs(workflow, newPath)
-      await openWorkflow(tempWorkflow)
-      await workflowStore.saveWorkflow(tempWorkflow)
+      let target: ComfyWorkflow
+      if (workflow.isTemporary) {
+        await renameWorkflow(workflow, newPath)
+        target = workflow
+      } else {
+        target = workflowStore.saveAs(workflow, newPath)
+        await openWorkflow(target)
+      }
+
+      if (options.isApp !== undefined) {
+        app.rootGraph.extra ??= {}
+        app.rootGraph.extra.linearMode = isApp
+        target.initialMode = isApp ? 'app' : 'graph'
+      }
+      target.changeTracker?.prepareForSave()
+      await workflowStore.saveWorkflow(target)
     }
 
     useTelemetry()?.trackWorkflowSaved({ is_app: isApp, is_new: true })
@@ -163,8 +173,7 @@ export const useWorkflowService = () => {
     if (workflow.isTemporary) {
       await saveWorkflowAs(workflow)
     } else {
-      workflow.changeTracker?.checkState()
-
+      workflow.changeTracker?.prepareForSave()
       const isApp = workflow.initialMode === 'app'
       const expectedPath =
         workflow.directory +
@@ -243,13 +252,14 @@ export const useWorkflowService = () => {
       /* restore_view=*/ true,
       workflow,
       {
-        showMissingModels: loadFromRemote,
-        showMissingNodes: true,
         checkForRerouteMigration: false,
-        deferWarnings: true
+        deferWarnings: true,
+        skipAssetScans: !loadFromRemote && !options.force
       }
     )
-    showPendingWarnings()
+    showPendingWarnings(undefined, {
+      silent: !loadFromRemote && !options.force
+    })
   }
 
   /**
@@ -358,7 +368,7 @@ export const useWorkflowService = () => {
     const workflowStore = useWorkspaceStore().workflow
     const activeWorkflow = workflowStore.activeWorkflow
     if (activeWorkflow) {
-      activeWorkflow.changeTracker.store()
+      activeWorkflow.changeTracker?.deactivate()
       if (settingStore.get('Comfy.Workflow.Persist') && activeWorkflow.path) {
         const activeState = activeWorkflow.activeState
         if (activeState) {
@@ -379,6 +389,29 @@ export const useWorkflowService = () => {
           }
         }
       }
+      // Cache missing model/media/node state for restore on tab switch.
+      // Always overwrite to reflect the current store state (e.g. after
+      // muting a node cleared its errors).
+      const modelCandidates = useMissingModelStore().missingModelCandidates
+      const mediaCandidates = useMissingMediaStore().missingMediaCandidates
+      const nodeTypes = missingNodesErrorStore.missingNodesError?.nodeTypes
+      activeWorkflow.pendingWarnings = {
+        missingNodeTypes: nodeTypes?.length ? [...nodeTypes] : undefined,
+        missingModelCandidates: modelCandidates?.length
+          ? modelCandidates
+          : undefined,
+        missingMediaCandidates: mediaCandidates?.length
+          ? mediaCandidates
+          : undefined
+      }
+      if (
+        !activeWorkflow.pendingWarnings.missingNodeTypes &&
+        !activeWorkflow.pendingWarnings.missingModelCandidates &&
+        !activeWorkflow.pendingWarnings.missingMediaCandidates
+      ) {
+        activeWorkflow.pendingWarnings = null
+      }
+
       // Capture thumbnail before loading new graph
       void workflowThumbnail.storeThumbnail(activeWorkflow)
       domWidgetStore.clear()
@@ -540,17 +573,43 @@ export const useWorkflowService = () => {
    * active workflow. Called after a workflow becomes visible so dialogs don't
    * overlap with subsequent loads.
    */
-  function showPendingWarnings(workflow?: ComfyWorkflow | null) {
+  function showPendingWarnings(
+    workflow?: ComfyWorkflow | null,
+    options?: { silent?: boolean }
+  ) {
     const wf = workflow ?? workflowStore.activeWorkflow
-    if (!wf?.pendingWarnings) return
+    if (!wf) return
 
-    const { missingNodeTypes } = wf.pendingWarnings
-    wf.pendingWarnings = null
+    const { missingNodeTypes, missingModelCandidates, missingMediaCandidates } =
+      wf.pendingWarnings ?? {}
 
-    if (missingNodeTypes?.length) {
-      if (missingNodesErrorStore.surfaceMissingNodes(missingNodeTypes)) {
-        executionErrorStore.showErrorOverlay()
+    // Always sync missing nodes store (clear when empty).
+    if (
+      missingNodesErrorStore.surfaceMissingNodes(missingNodeTypes ?? []) &&
+      !options?.silent
+    ) {
+      useExecutionErrorStore().showErrorOverlay()
+    }
+    if (missingModelCandidates?.length) {
+      useMissingModelStore().setMissingModels(missingModelCandidates)
+    }
+    if (missingMediaCandidates?.length) {
+      useMissingMediaStore().setMissingMedia(missingMediaCandidates)
+    }
+
+    // Keep cache for future tab switches
+    if (
+      missingNodeTypes?.length ||
+      missingModelCandidates?.length ||
+      missingMediaCandidates?.length
+    ) {
+      wf.pendingWarnings = {
+        missingNodeTypes,
+        missingModelCandidates,
+        missingMediaCandidates
       }
+    } else {
+      wf.pendingWarnings = null
     }
   }
 
diff --git a/src/platform/workflow/management/stores/comfyWorkflow.ts b/src/platform/workflow/management/stores/comfyWorkflow.ts
index 4fa76bfb2b..36a48f717b 100644
--- a/src/platform/workflow/management/stores/comfyWorkflow.ts
+++ b/src/platform/workflow/management/stores/comfyWorkflow.ts
@@ -7,18 +7,24 @@ import type { NodeId } from '@/lib/litegraph/src/LGraphNode'
 import { UserFile } from '@/stores/userFileStore'
 import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type { MissingModelCandidate } from '@/platform/missingModel/types'
+import type { MissingMediaCandidate } from '@/platform/missingMedia/types'
 import type { MissingNodeType } from '@/types/comfy'
 
+export interface InputWidgetConfig {
+  height?: number
+}
+
+export type LinearInput = [NodeId, string, InputWidgetConfig?]
+
 export interface LinearData {
-  inputs: [NodeId, string][]
+  inputs: LinearInput[]
   outputs: NodeId[]
 }
 
 export interface PendingWarnings {
   missingNodeTypes?: MissingNodeType[]
-  // TODO: Currently unused — missing models are surfaced directly on every
-  // graph load. Reserved for future per-workflow missing model state management.
   missingModelCandidates?: MissingModelCandidate[]
+  missingMediaCandidates?: MissingMediaCandidate[]
 }
 
 export class ComfyWorkflow extends UserFile {
diff --git a/src/platform/workflow/persistence/composables/useWorkflowAutoSave.test.ts b/src/platform/workflow/persistence/composables/useWorkflowAutoSave.test.ts
index cd7a3f7617..5a15ddcdf4 100644
--- a/src/platform/workflow/persistence/composables/useWorkflowAutoSave.test.ts
+++ b/src/platform/workflow/persistence/composables/useWorkflowAutoSave.test.ts
@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils'
+import { render } from '@testing-library/vue'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
@@ -54,7 +54,7 @@ describe('useWorkflowAutoSave', () => {
     mockAutoSaveDelay = 1000
     mockActiveWorkflow = { isModified: true, isPersisted: true }
 
-    mount({
+    render({
       template: `<div></div>`,
       setup() {
         useWorkflowAutoSave()
@@ -75,7 +75,7 @@ describe('useWorkflowAutoSave', () => {
     mockAutoSaveDelay = 1000
     mockActiveWorkflow = { isModified: false, isPersisted: true }
 
-    mount({
+    render({
       template: `<div></div>`,
       setup() {
         useWorkflowAutoSave()
@@ -96,7 +96,7 @@ describe('useWorkflowAutoSave', () => {
     mockAutoSaveDelay = 1000
     mockActiveWorkflow = { isModified: true, isPersisted: true }
 
-    mount({
+    render({
       template: `<div></div>`,
       setup() {
         useWorkflowAutoSave()
@@ -115,7 +115,7 @@ describe('useWorkflowAutoSave', () => {
     mockAutoSaveDelay = 2000
     mockActiveWorkflow = { isModified: true, isPersisted: true }
 
-    mount({
+    render({
       template: `<div></div>`,
       setup() {
         useWorkflowAutoSave()
@@ -138,7 +138,7 @@ describe('useWorkflowAutoSave', () => {
     mockAutoSaveDelay = 2000
     mockActiveWorkflow = { isModified: true, isPersisted: true }
 
-    mount({
+    render({
       template: `<div></div>`,
       setup() {
         useWorkflowAutoSave()
@@ -173,7 +173,7 @@ describe('useWorkflowAutoSave', () => {
       .mockImplementation(() => {})
 
     try {
-      mount({
+      render({
         template: `<div></div>`,
         setup() {
           useWorkflowAutoSave()
@@ -202,7 +202,7 @@ describe('useWorkflowAutoSave', () => {
     mockAutoSaveDelay = 1000
     mockActiveWorkflow = { isModified: true, isPersisted: true }
 
-    mount({
+    render({
       template: `<div></div>`,
       setup() {
         useWorkflowAutoSave()
@@ -234,7 +234,7 @@ describe('useWorkflowAutoSave', () => {
   it('should clean up event listeners on component unmount', async () => {
     mockAutoSaveSetting = 'after delay'
 
-    const wrapper = mount({
+    const { unmount } = render({
       template: `<div></div>`,
       setup() {
         useWorkflowAutoSave()
@@ -242,7 +242,7 @@ describe('useWorkflowAutoSave', () => {
       }
     })
 
-    wrapper.unmount()
+    unmount()
 
     expect(api.removeEventListener).toHaveBeenCalled()
   })
@@ -252,7 +252,7 @@ describe('useWorkflowAutoSave', () => {
     mockAutoSaveDelay = 0
     mockActiveWorkflow = { isModified: true, isPersisted: true }
 
-    mount({
+    render({
       template: `<div></div>`,
       setup() {
         useWorkflowAutoSave()
@@ -282,7 +282,7 @@ describe('useWorkflowAutoSave', () => {
     mockAutoSaveDelay = 1000
     mockActiveWorkflow = { isModified: true, isPersisted: false }
 
-    mount({
+    render({
       template: `<div></div>`,
       setup() {
         useWorkflowAutoSave()
diff --git a/src/platform/workflow/sharing/components/OpenSharedWorkflowDialogContent.test.ts b/src/platform/workflow/sharing/components/OpenSharedWorkflowDialogContent.test.ts
index 3765faf409..a6320fe13c 100644
--- a/src/platform/workflow/sharing/components/OpenSharedWorkflowDialogContent.test.ts
+++ b/src/platform/workflow/sharing/components/OpenSharedWorkflowDialogContent.test.ts
@@ -1,9 +1,12 @@
-import { flushPromises, mount } from '@vue/test-utils'
-import { createI18n } from 'vue-i18n'
+/* eslint-disable testing-library/no-container, testing-library/no-node-access */
+import { fromPartial } from '@total-typescript/shoehorn'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
 
-import type { SharedWorkflowPayload } from '@/platform/workflow/sharing/types/shareTypes'
 import OpenSharedWorkflowDialogContent from '@/platform/workflow/sharing/components/OpenSharedWorkflowDialogContent.vue'
+import type { SharedWorkflowPayload } from '@/platform/workflow/sharing/types/shareTypes'
 
 const mockGetSharedWorkflow = vi.fn()
 
@@ -51,16 +54,20 @@ function makePayload(
     name: 'Test Workflow',
     listed: true,
     publishedAt: new Date('2026-02-20T00:00:00Z'),
-    workflowJson: {
+    workflowJson: fromPartial<SharedWorkflowPayload['workflowJson']>({
       nodes: []
-    } as unknown as SharedWorkflowPayload['workflowJson'],
+    }),
     assets: [],
     ...overrides
   }
 }
 
-function mountComponent(props: Record<string, unknown> = {}) {
-  return mount(OpenSharedWorkflowDialogContent, {
+async function flushPromises() {
+  await new Promise((r) => setTimeout(r, 0))
+}
+
+function renderComponent(props: Record<string, unknown> = {}) {
+  return render(OpenSharedWorkflowDialogContent, {
     global: {
       plugins: [i18n],
       stubs: {
@@ -86,52 +93,50 @@ describe('OpenSharedWorkflowDialogContent', () => {
   describe('loading state', () => {
     it('shows skeleton placeholders while loading', () => {
       mockGetSharedWorkflow.mockReturnValue(new Promise(() => {}))
-      const wrapper = mountComponent()
+      renderComponent()
 
-      expect(
-        wrapper.findAllComponents({ name: 'Skeleton' }).length
-      ).toBeGreaterThan(0)
+      expect(screen.getByRole('status')).toBeDefined()
     })
 
     it('shows dialog title in header while loading', () => {
       mockGetSharedWorkflow.mockReturnValue(new Promise(() => {}))
-      const wrapper = mountComponent()
-      const header = wrapper.find('header h2')
-      expect(header.text()).toBe('Open shared workflow')
+      const { container } = renderComponent()
+      const header = container.querySelector('header h2') as HTMLElement
+      expect(header.textContent).toBe('Open shared workflow')
     })
   })
 
   describe('error state', () => {
     it('shows error message when fetch fails', async () => {
       mockGetSharedWorkflow.mockRejectedValue(new Error('Network error'))
-      const wrapper = mountComponent()
+      const { container } = renderComponent()
       await flushPromises()
 
-      expect(wrapper.text()).toContain(
+      expect(container.textContent).toContain(
         'Could not load this shared workflow. Please try again later.'
       )
     })
 
     it('shows close button in error state', async () => {
       mockGetSharedWorkflow.mockRejectedValue(new Error('Network error'))
-      const wrapper = mountComponent()
+      const { container } = renderComponent()
       await flushPromises()
 
-      const footerButtons = wrapper.findAll('footer button')
+      const footerButtons = container.querySelectorAll('footer button')
       expect(footerButtons).toHaveLength(1)
-      expect(footerButtons[0].text()).toBe('Close')
+      expect(footerButtons[0].textContent).toBe('Close')
     })
 
     it('calls onCancel when close is clicked in error state', async () => {
       mockGetSharedWorkflow.mockRejectedValue(new Error('Network error'))
       const onCancel = vi.fn()
-      const wrapper = mountComponent({ onCancel })
+      const { container } = renderComponent({ onCancel })
       await flushPromises()
 
-      const closeButton = wrapper
-        .findAll('footer button')
-        .find((b) => b.text() === 'Close')
-      await closeButton!.trigger('click')
+      const closeButton = Array.from(
+        container.querySelectorAll('footer button')
+      ).find((b) => b.textContent === 'Close') as HTMLElement
+      await userEvent.click(closeButton)
       expect(onCancel).toHaveBeenCalled()
     })
   })
@@ -141,60 +146,62 @@ describe('OpenSharedWorkflowDialogContent', () => {
       mockGetSharedWorkflow.mockResolvedValue(
         makePayload({ name: 'My Workflow' })
       )
-      const wrapper = mountComponent()
+      const { container } = renderComponent()
       await flushPromises()
 
-      expect(wrapper.find('main h2').text()).toBe('My Workflow')
+      expect(
+        (container.querySelector('main h2') as HTMLElement).textContent
+      ).toBe('My Workflow')
     })
 
     it('shows "Open workflow" as primary CTA', async () => {
       mockGetSharedWorkflow.mockResolvedValue(makePayload())
-      const wrapper = mountComponent()
+      const { container } = renderComponent()
       await flushPromises()
 
-      const buttons = wrapper.findAll('footer button')
+      const buttons = container.querySelectorAll('footer button')
       const primaryButton = buttons[buttons.length - 1]
-      expect(primaryButton.text()).toBe('Open workflow')
+      expect(primaryButton.textContent).toBe('Open workflow')
     })
 
     it('does not show "Open without importing" button', async () => {
       mockGetSharedWorkflow.mockResolvedValue(makePayload())
-      const wrapper = mountComponent()
+      const { container } = renderComponent()
       await flushPromises()
 
-      expect(wrapper.text()).not.toContain('Open without importing')
+      expect(container.textContent).not.toContain('Open without importing')
     })
 
     it('does not show warning or asset sections', async () => {
       mockGetSharedWorkflow.mockResolvedValue(makePayload())
-      const wrapper = mountComponent()
+      const { container } = renderComponent()
       await flushPromises()
 
-      expect(wrapper.text()).not.toContain('non-public assets')
+      expect(container.textContent).not.toContain('non-public assets')
     })
 
     it('calls onConfirm with payload when primary button is clicked', async () => {
       const payload = makePayload()
       mockGetSharedWorkflow.mockResolvedValue(payload)
       const onConfirm = vi.fn()
-      const wrapper = mountComponent({ onConfirm })
+      const { container } = renderComponent({ onConfirm })
       await flushPromises()
 
-      const buttons = wrapper.findAll('footer button')
-      await buttons[buttons.length - 1].trigger('click')
+      const buttons = container.querySelectorAll('footer button')
+      await userEvent.click(buttons[buttons.length - 1] as HTMLElement)
       expect(onConfirm).toHaveBeenCalledWith(payload)
     })
 
     it('calls onCancel when cancel button is clicked', async () => {
       mockGetSharedWorkflow.mockResolvedValue(makePayload())
       const onCancel = vi.fn()
-      const wrapper = mountComponent({ onCancel })
+      const { container } = renderComponent({ onCancel })
       await flushPromises()
 
-      const cancelButton = wrapper
-        .findAll('footer button')
-        .find((b) => b.text() === 'Cancel')
-      await cancelButton!.trigger('click')
+      const cancelButton = Array.from(
+        container.querySelectorAll('footer button')
+      ).find((b) => b.textContent === 'Cancel') as HTMLElement
+      await userEvent.click(cancelButton)
       expect(onCancel).toHaveBeenCalled()
     })
   })
@@ -234,54 +241,54 @@ describe('OpenSharedWorkflowDialogContent', () => {
 
     it('shows "Copy assets & open workflow" as primary CTA', async () => {
       mockGetSharedWorkflow.mockResolvedValue(assetsPayload)
-      const wrapper = mountComponent()
+      const { container } = renderComponent()
       await flushPromises()
 
-      const buttons = wrapper.findAll('footer button')
+      const buttons = container.querySelectorAll('footer button')
       const primaryButton = buttons[buttons.length - 1]
-      expect(primaryButton.text()).toBe('Copy assets & open workflow')
+      expect(primaryButton.textContent).toBe('Copy assets & open workflow')
     })
 
     it('shows non-public assets warning', async () => {
       mockGetSharedWorkflow.mockResolvedValue(assetsPayload)
-      const wrapper = mountComponent()
+      const { container } = renderComponent()
       await flushPromises()
 
-      expect(wrapper.text()).toContain('non-public assets')
+      expect(container.textContent).toContain('non-public assets')
     })
 
     it('shows "Open without importing" button', async () => {
       mockGetSharedWorkflow.mockResolvedValue(assetsPayload)
-      const wrapper = mountComponent()
+      renderComponent()
       await flushPromises()
 
-      const openWithoutImporting = wrapper
-        .findAll('button')
-        .find((b) => b.text() === 'Open without importing')
+      const openWithoutImporting = screen
+        .getAllByRole('button')
+        .find((b) => b.textContent === 'Open without importing')
       expect(openWithoutImporting).toBeDefined()
     })
 
     it('calls onOpenWithoutImporting with payload', async () => {
       mockGetSharedWorkflow.mockResolvedValue(assetsPayload)
       const onOpenWithoutImporting = vi.fn()
-      const wrapper = mountComponent({ onOpenWithoutImporting })
+      renderComponent({ onOpenWithoutImporting })
       await flushPromises()
 
-      const button = wrapper
-        .findAll('button')
-        .find((b) => b.text() === 'Open without importing')
-      await button!.trigger('click')
+      const button = screen
+        .getAllByRole('button')
+        .find((b) => b.textContent === 'Open without importing')
+      await userEvent.click(button!)
       expect(onOpenWithoutImporting).toHaveBeenCalledWith(assetsPayload)
     })
 
     it('calls onConfirm with payload when primary button is clicked', async () => {
       mockGetSharedWorkflow.mockResolvedValue(assetsPayload)
       const onConfirm = vi.fn()
-      const wrapper = mountComponent({ onConfirm })
+      const { container } = renderComponent({ onConfirm })
       await flushPromises()
 
-      const buttons = wrapper.findAll('footer button')
-      await buttons[buttons.length - 1].trigger('click')
+      const buttons = container.querySelectorAll('footer button')
+      await userEvent.click(buttons[buttons.length - 1] as HTMLElement)
       expect(onConfirm).toHaveBeenCalledWith(assetsPayload)
     })
 
@@ -309,18 +316,17 @@ describe('OpenSharedWorkflowDialogContent', () => {
         ]
       })
       mockGetSharedWorkflow.mockResolvedValue(mixedPayload)
-      const wrapper = mountComponent()
+      const { container } = renderComponent()
       await flushPromises()
 
-      // Should still show assets panel (has 1 non-owned)
-      expect(wrapper.text()).toContain('non-public assets')
+      expect(container.textContent).toContain('non-public assets')
     })
   })
 
   describe('fetches with correct shareId', () => {
     it('passes shareId to getSharedWorkflow', async () => {
       mockGetSharedWorkflow.mockResolvedValue(makePayload())
-      mountComponent({ shareId: 'my-share-123' })
+      renderComponent({ shareId: 'my-share-123' })
       await flushPromises()
 
       expect(mockGetSharedWorkflow).toHaveBeenCalledWith('my-share-123')
diff --git a/src/platform/workflow/sharing/components/OpenSharedWorkflowDialogContent.vue b/src/platform/workflow/sharing/components/OpenSharedWorkflowDialogContent.vue
index 8b0a5a468c..7e4a8a5113 100644
--- a/src/platform/workflow/sharing/components/OpenSharedWorkflowDialogContent.vue
+++ b/src/platform/workflow/sharing/components/OpenSharedWorkflowDialogContent.vue
@@ -13,7 +13,7 @@
 
     <template v-if="isLoading">
       <main class="flex gap-8 px-8 pt-4 pb-6">
-        <div class="flex min-w-0 flex-1 flex-col gap-12 py-4">
+        <div role="status" class="flex min-w-0 flex-1 flex-col gap-12 py-4">
           <Skeleton class="h-8 w-3/5" />
           <Skeleton class="h-4 w-4/5" />
         </div>
diff --git a/src/platform/workflow/sharing/components/ShareAssetWarningBox.test.ts b/src/platform/workflow/sharing/components/ShareAssetWarningBox.test.ts
index 6efd99d2fa..744cc5fcae 100644
--- a/src/platform/workflow/sharing/components/ShareAssetWarningBox.test.ts
+++ b/src/platform/workflow/sharing/components/ShareAssetWarningBox.test.ts
@@ -1,6 +1,6 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-import { nextTick } from 'vue'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import type { ComponentProps } from 'vue-component-type-helpers'
@@ -24,10 +24,10 @@ const i18n = createI18n({
 })
 
 describe(ShareAssetWarningBox, () => {
-  function createWrapper(
+  function renderComponent(
     props: Partial<ComponentProps<typeof ShareAssetWarningBox>> = {}
   ) {
-    return mount(ShareAssetWarningBox, {
+    return render(ShareAssetWarningBox, {
       props: {
         items: [
           {
@@ -50,6 +50,7 @@ describe(ShareAssetWarningBox, () => {
           }
         ],
         acknowledged: false,
+        'onUpdate:acknowledged': props['onUpdate:acknowledged'],
         ...props
       },
       global: {
@@ -59,73 +60,65 @@ describe(ShareAssetWarningBox, () => {
   }
 
   it('renders warning text', () => {
-    const wrapper = createWrapper()
-    expect(wrapper.text()).toContain(
+    const { container } = renderComponent()
+    expect(container.textContent).toContain(
       'Your workflow contains private models and/or media files'
     )
   })
 
   it('renders media and model collapsible sections', () => {
-    const wrapper = createWrapper()
+    const { container } = renderComponent()
 
-    expect(wrapper.text()).toContain('1 Media File')
-    expect(wrapper.text()).toContain('1 Model')
+    expect(container.textContent).toContain('1 Media File')
+    expect(container.textContent).toContain('1 Model')
   })
 
   it('keeps at most one accordion section open at a time', async () => {
-    const wrapper = createWrapper()
+    const user = userEvent.setup()
+    renderComponent()
 
-    const mediaHeader = wrapper.get('[data-testid="section-header-media"]')
-    const modelsHeader = wrapper.get('[data-testid="section-header-models"]')
-    const mediaChevron = mediaHeader.get('i')
-    const modelsChevron = modelsHeader.get('i')
+    const mediaHeader = screen.getByTestId('section-header-media')
+    const modelsHeader = screen.getByTestId('section-header-models')
 
-    expect(mediaHeader.attributes('aria-expanded')).toBe('true')
-    expect(modelsHeader.attributes('aria-expanded')).toBe('false')
-    expect(mediaHeader.attributes('aria-controls')).toBe(
+    expect(mediaHeader).toHaveAttribute('aria-expanded', 'true')
+    expect(modelsHeader).toHaveAttribute('aria-expanded', 'false')
+    expect(mediaHeader).toHaveAttribute(
+      'aria-controls',
       'section-content-media'
     )
-    expect(modelsHeader.attributes('aria-controls')).toBe(
+    expect(modelsHeader).toHaveAttribute(
+      'aria-controls',
       'section-content-models'
     )
-    expect(mediaChevron.classes()).toContain('rotate-90')
-    expect(modelsChevron.classes()).not.toContain('rotate-90')
 
-    await modelsHeader.trigger('click')
-    await nextTick()
+    await user.click(modelsHeader)
 
-    expect(mediaHeader.attributes('aria-expanded')).toBe('false')
-    expect(modelsHeader.attributes('aria-expanded')).toBe('true')
-    expect(mediaChevron.classes()).not.toContain('rotate-90')
-    expect(modelsChevron.classes()).toContain('rotate-90')
+    expect(mediaHeader).toHaveAttribute('aria-expanded', 'false')
+    expect(modelsHeader).toHaveAttribute('aria-expanded', 'true')
 
-    await mediaHeader.trigger('click')
-    await nextTick()
+    await user.click(mediaHeader)
 
-    expect(mediaHeader.attributes('aria-expanded')).toBe('true')
-    expect(modelsHeader.attributes('aria-expanded')).toBe('false')
-    expect(mediaChevron.classes()).toContain('rotate-90')
-    expect(modelsChevron.classes()).not.toContain('rotate-90')
+    expect(mediaHeader).toHaveAttribute('aria-expanded', 'true')
+    expect(modelsHeader).toHaveAttribute('aria-expanded', 'false')
 
-    await mediaHeader.trigger('click')
-    await nextTick()
+    await user.click(mediaHeader)
 
-    expect(mediaHeader.attributes('aria-expanded')).toBe('false')
-    expect(modelsHeader.attributes('aria-expanded')).toBe('false')
+    expect(mediaHeader).toHaveAttribute('aria-expanded', 'false')
+    expect(modelsHeader).toHaveAttribute('aria-expanded', 'false')
   })
 
   it('defaults to media section when both sections are available', () => {
-    const wrapper = createWrapper()
+    renderComponent()
 
-    const mediaHeader = wrapper.get('[data-testid="section-header-media"]')
-    const modelsHeader = wrapper.get('[data-testid="section-header-models"]')
+    const mediaHeader = screen.getByTestId('section-header-media')
+    const modelsHeader = screen.getByTestId('section-header-models')
 
-    expect(mediaHeader.attributes('aria-expanded')).toBe('true')
-    expect(modelsHeader.attributes('aria-expanded')).toBe('false')
+    expect(mediaHeader).toHaveAttribute('aria-expanded', 'true')
+    expect(modelsHeader).toHaveAttribute('aria-expanded', 'false')
   })
 
   it('defaults to models section when media is unavailable', () => {
-    const wrapper = createWrapper({
+    const { container } = renderComponent({
       items: [
         {
           id: 'model-default',
@@ -139,14 +132,15 @@ describe(ShareAssetWarningBox, () => {
       ]
     })
 
-    expect(wrapper.text()).toContain('1 Model')
-    const modelsHeader = wrapper.get('[data-testid="section-header-models"]')
+    expect(container.textContent).toContain('1 Model')
+    const modelsHeader = screen.getByTestId('section-header-models')
 
-    expect(modelsHeader.attributes('aria-expanded')).toBe('true')
+    expect(modelsHeader).toHaveAttribute('aria-expanded', 'true')
   })
 
   it('allows collapsing the only expanded section when models are unavailable', async () => {
-    const wrapper = createWrapper({
+    const user = userEvent.setup()
+    renderComponent({
       items: [
         {
           id: 'asset-image',
@@ -160,47 +154,43 @@ describe(ShareAssetWarningBox, () => {
       ]
     })
 
-    const mediaHeader = wrapper.get('[data-testid="section-header-media"]')
-    const mediaChevron = mediaHeader.get('i')
+    const mediaHeader = screen.getByTestId('section-header-media')
 
-    expect(mediaHeader.attributes('aria-expanded')).toBe('true')
-    expect(mediaChevron.classes()).toContain('rotate-90')
+    expect(mediaHeader).toHaveAttribute('aria-expanded', 'true')
 
-    await mediaHeader.trigger('click')
-    await nextTick()
+    await user.click(mediaHeader)
 
-    expect(mediaHeader.attributes('aria-expanded')).toBe('false')
-    expect(mediaChevron.classes()).not.toContain('rotate-90')
+    expect(mediaHeader).toHaveAttribute('aria-expanded', 'false')
   })
 
   it('emits acknowledged update when checkbox is toggled', async () => {
-    const wrapper = createWrapper()
+    const onUpdateAcknowledged = vi.fn()
+    const user = userEvent.setup()
+    renderComponent({ 'onUpdate:acknowledged': onUpdateAcknowledged })
 
-    const checkbox = wrapper.find('input[type="checkbox"]')
-    await checkbox.setValue(true)
-    await nextTick()
+    const checkbox = screen.getByRole('checkbox')
+    await user.click(checkbox)
 
-    expect(wrapper.emitted('update:acknowledged')).toBeTruthy()
-    expect(wrapper.emitted('update:acknowledged')![0]).toEqual([true])
+    expect(onUpdateAcknowledged).toHaveBeenCalledWith(true)
   })
 
   it('displays asset names in the assets section', () => {
-    const wrapper = createWrapper()
+    const { container } = renderComponent()
 
-    expect(wrapper.text()).toContain('image.png')
+    expect(container.textContent).toContain('image.png')
   })
 
   it('renders thumbnail previews for assets when URLs are available', () => {
-    const wrapper = createWrapper()
+    renderComponent()
 
-    const images = wrapper.findAll('img')
+    const images = screen.getAllByRole('img')
     expect(images).toHaveLength(1)
-    expect(images[0].attributes('src')).toBe('https://example.com/a.jpg')
-    expect(images[0].attributes('alt')).toBe('image.png')
+    expect(images[0]).toHaveAttribute('src', 'https://example.com/a.jpg')
+    expect(images[0]).toHaveAttribute('alt', 'image.png')
   })
 
   it('renders fallback icon when thumbnail is missing', () => {
-    const wrapper = createWrapper({
+    const { container } = renderComponent({
       items: [
         {
           id: 'asset-image',
@@ -223,15 +213,16 @@ describe(ShareAssetWarningBox, () => {
       ]
     })
 
-    const fallbackIcons = wrapper
-      .findAll('i')
-      .filter((icon) => icon.classes().includes('icon-[lucide--image]'))
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const fallbackIcons = Array.from(container.querySelectorAll('i')).filter(
+      (i) => i.classList.contains('icon-[lucide--image]')
+    )
 
     expect(fallbackIcons).toHaveLength(1)
   })
 
   it('hides assets section when no assets provided', () => {
-    const wrapper = createWrapper({
+    const { container } = renderComponent({
       items: [
         {
           id: 'model-default',
@@ -245,11 +236,11 @@ describe(ShareAssetWarningBox, () => {
       ]
     })
 
-    expect(wrapper.text()).not.toContain('Media File')
+    expect(container.textContent).not.toContain('Media File')
   })
 
   it('hides models section when no models provided', () => {
-    const wrapper = createWrapper({
+    const { container } = renderComponent({
       items: [
         {
           id: 'asset-image',
@@ -263,6 +254,6 @@ describe(ShareAssetWarningBox, () => {
       ]
     })
 
-    expect(wrapper.text()).not.toContain('Model')
+    expect(container.textContent).not.toContain('Model')
   })
 })
diff --git a/src/platform/workflow/sharing/components/ShareWorkflowDialogContent.test.ts b/src/platform/workflow/sharing/components/ShareWorkflowDialogContent.test.ts
index 765035d463..9186621d15 100644
--- a/src/platform/workflow/sharing/components/ShareWorkflowDialogContent.test.ts
+++ b/src/platform/workflow/sharing/components/ShareWorkflowDialogContent.test.ts
@@ -1,4 +1,5 @@
-import { flushPromises, mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick, reactive } from 'vue'
 import { createI18n } from 'vue-i18n'
@@ -131,6 +132,10 @@ const i18n = createI18n({
   }
 })
 
+async function flushPromises() {
+  await new Promise((r) => setTimeout(r, 0))
+}
+
 describe('ShareWorkflowDialogContent', () => {
   const onClose = vi.fn()
 
@@ -181,8 +186,8 @@ describe('ShareWorkflowDialogContent', () => {
     mockGetShareableAssets.mockResolvedValue(mockShareServiceData.items)
   })
 
-  function createWrapper() {
-    return mount(ShareWorkflowDialogContent, {
+  function renderComponent() {
+    return render(ShareWorkflowDialogContent, {
       props: { onClose },
       global: {
         plugins: [i18n],
@@ -215,84 +220,74 @@ describe('ShareWorkflowDialogContent', () => {
       isModified: true,
       lastModified: 1000
     }
-    const wrapper = createWrapper()
+    const { container } = renderComponent()
     await flushPromises()
 
-    expect(wrapper.text()).toContain(
+    expect(container.textContent).toContain(
       'You must save your workflow before sharing.'
     )
-    expect(wrapper.text()).toContain('Save workflow')
+    expect(container.textContent).toContain('Save workflow')
   })
 
   it('renders share-link and publish tabs when comfy hub upload is enabled', async () => {
     mockFlags.comfyHubUploadEnabled = true
-    const wrapper = createWrapper()
+    const { container } = renderComponent()
     await flushPromises()
 
-    expect(wrapper.text()).toContain('Share')
-    expect(wrapper.text()).toContain('Publish')
-    const publishTabPanel = wrapper.find('[data-testid="publish-tab-panel"]')
-    expect(publishTabPanel.exists()).toBe(true)
-    expect(publishTabPanel.attributes('style')).toContain('display: none')
+    expect(container.textContent).toContain('Share')
+    expect(container.textContent).toContain('Publish')
+    const publishTabPanel = screen.getByTestId('publish-tab-panel')
+    expect(publishTabPanel).not.toBeVisible()
   })
 
   it('hides the publish tab when comfy hub upload is disabled', async () => {
-    const wrapper = createWrapper()
+    const { container } = renderComponent()
     await flushPromises()
 
-    expect(wrapper.text()).toContain('Share')
-    expect(wrapper.text()).not.toContain('Publish')
-    expect(wrapper.find('[data-testid="publish-intro"]').exists()).toBe(false)
+    expect(container.textContent).toContain('Share')
+    expect(container.textContent).not.toContain('Publish')
+    expect(screen.queryByTestId('publish-intro')).not.toBeInTheDocument()
   })
 
   it('shows publish intro panel in the share dialog', async () => {
     mockFlags.comfyHubUploadEnabled = true
-    const wrapper = createWrapper()
+    renderComponent()
     await flushPromises()
 
-    const publishTab = wrapper
-      .findAll('button')
-      .find((button) => button.text().includes('Publish'))
+    const publishTab = screen.getByRole('tab', { name: /Publish/ })
 
-    expect(publishTab).toBeDefined()
-    await publishTab!.trigger('click')
+    await userEvent.click(publishTab)
     await flushPromises()
 
-    expect(wrapper.find('[data-testid="publish-intro"]').exists()).toBe(true)
+    expect(screen.getByTestId('publish-intro')).toBeTruthy()
   })
 
   it('shows start publishing CTA in the publish intro panel', async () => {
     mockFlags.comfyHubUploadEnabled = true
-    const wrapper = createWrapper()
+    renderComponent()
     await flushPromises()
 
-    const publishTab = wrapper
-      .findAll('button')
-      .find((button) => button.text().includes('Publish'))
-    expect(publishTab).toBeDefined()
+    const publishTab = screen.getByRole('tab', { name: /Publish/ })
 
-    await publishTab!.trigger('click')
+    await userEvent.click(publishTab)
     await flushPromises()
 
-    expect(wrapper.find('[data-testid="publish-intro-cta"]').text()).toBe(
+    expect(screen.getByTestId('publish-intro-cta').textContent).toBe(
       'Start publishing'
     )
   })
 
   it('opens publish dialog from intro cta and closes share dialog', async () => {
     mockFlags.comfyHubUploadEnabled = true
-    const wrapper = createWrapper()
+    renderComponent()
     await flushPromises()
 
-    const publishTab = wrapper
-      .findAll('button')
-      .find((button) => button.text().includes('Publish'))
+    const publishTab = screen.getByRole('tab', { name: /Publish/ })
 
-    expect(publishTab).toBeDefined()
-    await publishTab!.trigger('click')
+    await userEvent.click(publishTab)
     await flushPromises()
 
-    await wrapper.find('[data-testid="publish-intro-cta"]').trigger('click')
+    await userEvent.click(screen.getByTestId('publish-intro-cta'))
     await nextTick()
 
     expect(onClose).toHaveBeenCalledOnce()
@@ -300,37 +295,37 @@ describe('ShareWorkflowDialogContent', () => {
   })
 
   it('disables publish button when acknowledgment is unchecked', async () => {
-    const wrapper = createWrapper()
+    renderComponent()
     await flushPromises()
 
-    const publishButton = wrapper
-      .findAll('button')
-      .find((button) => button.text().includes('Create link'))
+    const publishButton = screen.getByRole('button', {
+      name: /Create link/i
+    })
 
-    expect(publishButton?.attributes('disabled')).toBeDefined()
+    expect(publishButton).toBeDisabled()
   })
 
   it('enables publish button when acknowledgment is checked', async () => {
-    const wrapper = createWrapper()
+    renderComponent()
     await flushPromises()
 
-    const checkbox = wrapper.find('input[type="checkbox"]')
-    await checkbox.setValue(true)
+    const checkbox = screen.getByRole('checkbox')
+    await userEvent.click(checkbox)
     await nextTick()
 
-    const publishButton = wrapper
-      .findAll('button')
-      .find((button) => button.text().includes('Create link'))
+    const publishButton = screen.getByRole('button', {
+      name: /Create link/i
+    })
 
-    expect(publishButton?.attributes('disabled')).toBeUndefined()
+    expect(publishButton).toBeEnabled()
   })
 
   it('calls onClose when close button is clicked', async () => {
-    const wrapper = createWrapper()
+    renderComponent()
     await flushPromises()
 
-    const closeButton = wrapper.find('[aria-label="Close"]')
-    await closeButton.trigger('click')
+    const closeButton = screen.getByRole('button', { name: 'Close' })
+    await userEvent.click(closeButton)
 
     expect(onClose).toHaveBeenCalled()
   })
@@ -359,19 +354,18 @@ describe('ShareWorkflowDialogContent', () => {
 
     mockGetShareableAssets.mockResolvedValueOnce(initialShareableAssets)
 
-    const wrapper = createWrapper()
+    renderComponent()
     await flushPromises()
 
-    const checkbox = wrapper.find('input[type="checkbox"]')
-    await checkbox.setValue(true)
+    const checkbox = screen.getByRole('checkbox')
+    await userEvent.click(checkbox)
     await nextTick()
 
-    const publishButton = wrapper
-      .findAll('button')
-      .find((button) => button.text().includes('Create link'))
-    expect(publishButton).toBeDefined()
+    const publishButton = screen.getByRole('button', {
+      name: /Create link/i
+    })
 
-    await publishButton!.trigger('click')
+    await userEvent.click(publishButton)
     await flushPromises()
 
     expect(mockGetShareableAssets).toHaveBeenCalledTimes(1)
@@ -400,11 +394,11 @@ describe('ShareWorkflowDialogContent', () => {
       publishedAt
     })
 
-    const wrapper = createWrapper()
+    const { container } = renderComponent()
     await flushPromises()
 
-    expect(wrapper.text()).toContain('You have made changes...')
-    expect(wrapper.text()).toContain('Update link')
+    expect(container.textContent).toContain('You have made changes...')
+    expect(container.textContent).toContain('Update link')
   })
 
   it('shows copy URL when workflow has not changed since publish', async () => {
@@ -426,11 +420,11 @@ describe('ShareWorkflowDialogContent', () => {
       publishedAt
     })
 
-    const wrapper = createWrapper()
+    const { container } = renderComponent()
     await flushPromises()
 
-    expect(wrapper.text()).toContain('Anyone with this link...')
-    expect(wrapper.text()).not.toContain('Update link')
+    expect(container.textContent).toContain('Anyone with this link...')
+    expect(container.textContent).not.toContain('Update link')
   })
 
   describe('error and edge cases', () => {
@@ -443,22 +437,22 @@ describe('ShareWorkflowDialogContent', () => {
         isModified: false,
         lastModified: 1000
       }
-      const wrapper = createWrapper()
+      const { container } = renderComponent()
       await flushPromises()
 
-      expect(wrapper.text()).toContain(
+      expect(container.textContent).toContain(
         'You must save your workflow before sharing.'
       )
-      expect(wrapper.text()).toContain('Workflow name')
+      expect(container.textContent).toContain('Workflow name')
     })
 
     it('shows error toast when getPublishStatus rejects', async () => {
       mockGetPublishStatus.mockRejectedValue(new Error('Server down'))
 
-      const wrapper = createWrapper()
+      const { container } = renderComponent()
       await flushPromises()
 
-      expect(wrapper.text()).toContain('Create link')
+      expect(container.textContent).toContain('Create link')
       expect(mockToast.add).toHaveBeenCalledWith({
         severity: 'error',
         summary: 'Failed to load publish status'
@@ -468,19 +462,18 @@ describe('ShareWorkflowDialogContent', () => {
     it('shows error toast when publishWorkflow rejects', async () => {
       mockGetShareableAssets.mockResolvedValue([])
 
-      const wrapper = createWrapper()
+      const { container } = renderComponent()
       await flushPromises()
 
       mockPublishWorkflow.mockRejectedValue(new Error('Publish failed'))
 
-      const publishButton = wrapper
-        .findAll('button')
-        .find((btn) => btn.text().includes('Create link'))
-      expect(publishButton).toBeDefined()
-      await publishButton!.trigger('click')
+      const publishButton = screen.getByRole('button', {
+        name: /Create link/i
+      })
+      await userEvent.click(publishButton)
       await flushPromises()
 
-      expect(wrapper.text()).not.toContain('Anyone with this link...')
+      expect(container.textContent).not.toContain('Anyone with this link...')
       expect(mockToast.add).toHaveBeenCalledWith({
         severity: 'error',
         summary: 'Error',
@@ -490,10 +483,10 @@ describe('ShareWorkflowDialogContent', () => {
 
     it('renders unsaved state when no active workflow exists', async () => {
       mockWorkflowStore.activeWorkflow = null
-      const wrapper = createWrapper()
+      const { container } = renderComponent()
       await flushPromises()
 
-      expect(wrapper.text()).toContain(
+      expect(container.textContent).toContain(
         'You must save your workflow before sharing.'
       )
     })
@@ -501,31 +494,27 @@ describe('ShareWorkflowDialogContent', () => {
     it('does not call publishWorkflow when workflow is null during publish', async () => {
       mockGetShareableAssets.mockResolvedValue([])
 
-      const wrapper = createWrapper()
+      renderComponent()
       await flushPromises()
 
       mockWorkflowStore.activeWorkflow = null
 
-      const publishButton = wrapper
-        .findAll('button')
-        .find((btn) => btn.text().includes('Create link'))
-      if (publishButton) {
-        await publishButton.trigger('click')
-        await flushPromises()
-      }
+      const publishButton = screen.getByRole('button', {
+        name: /Create link/i
+      })
+      await userEvent.click(publishButton)
+      await flushPromises()
 
       expect(mockPublishWorkflow).not.toHaveBeenCalled()
     })
 
     it('does not switch to publishToHub mode when flag is disabled', async () => {
       mockFlags.comfyHubUploadEnabled = false
-      const wrapper = createWrapper()
+      const { container } = renderComponent()
       await flushPromises()
 
-      expect(wrapper.find('[data-testid="publish-tab-panel"]').exists()).toBe(
-        false
-      )
-      expect(wrapper.text()).not.toContain('Publish')
+      expect(screen.queryByTestId('publish-tab-panel')).not.toBeInTheDocument()
+      expect(container.textContent).not.toContain('Publish')
     })
   })
 })
diff --git a/src/platform/workflow/sharing/components/publish/ComfyHubDescribeStep.test.ts b/src/platform/workflow/sharing/components/publish/ComfyHubDescribeStep.test.ts
index 9835aae656..7b4d84cc43 100644
--- a/src/platform/workflow/sharing/components/publish/ComfyHubDescribeStep.test.ts
+++ b/src/platform/workflow/sharing/components/publish/ComfyHubDescribeStep.test.ts
@@ -1,5 +1,7 @@
-import { flushPromises, mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
 
 import { COMFY_HUB_TAG_OPTIONS } from '@/platform/workflow/sharing/constants/comfyHubTags'
 
@@ -13,15 +15,21 @@ vi.mock('@/platform/workflow/sharing/services/comfyHubService', () => ({
 
 import ComfyHubDescribeStep from './ComfyHubDescribeStep.vue'
 
-function mountStep(
-  props: Partial<InstanceType<typeof ComfyHubDescribeStep>['$props']> = {}
+async function flushPromises() {
+  await new Promise((r) => setTimeout(r, 0))
+}
+
+function renderStep(
+  props: Partial<InstanceType<typeof ComfyHubDescribeStep>['$props']> = {},
+  callbacks: Record<string, ReturnType<typeof vi.fn>> = {}
 ) {
-  return mount(ComfyHubDescribeStep, {
+  return render(ComfyHubDescribeStep, {
     props: {
       name: 'Workflow Name',
       description: 'Workflow description',
       tags: [],
-      ...props
+      ...props,
+      ...callbacks
     },
     global: {
       mocks: {
@@ -75,43 +83,56 @@ function mountStep(
 describe('ComfyHubDescribeStep', () => {
   it('emits name and description updates', async () => {
     mockFetchTagLabels.mockRejectedValue(new Error('offline'))
-    const wrapper = mountStep()
+    const onUpdateName = vi.fn()
+    const onUpdateDescription = vi.fn()
+    renderStep(
+      {},
+      {
+        'onUpdate:name': onUpdateName,
+        'onUpdate:description': onUpdateDescription
+      }
+    )
     await flushPromises()
 
-    await wrapper.find('[data-testid="name-input"]').setValue('New workflow')
-    await wrapper
-      .find('[data-testid="description-input"]')
-      .setValue('New description')
+    const nameInput = screen.getByTestId('name-input')
+    const descInput = screen.getByTestId('description-input')
 
-    expect(wrapper.emitted('update:name')).toEqual([['New workflow']])
-    expect(wrapper.emitted('update:description')).toEqual([['New description']])
+    await userEvent.clear(nameInput)
+    await userEvent.type(nameInput, 'New workflow')
+    await userEvent.clear(descInput)
+    await userEvent.type(descInput, 'New description')
+
+    expect(onUpdateName).toHaveBeenLastCalledWith('New workflow')
+    expect(onUpdateDescription).toHaveBeenLastCalledWith('New description')
   })
 
   it('uses fetched tags from API', async () => {
     const apiTags = ['Alpha', 'Beta', 'Gamma']
     mockFetchTagLabels.mockResolvedValue(apiTags)
-    const wrapper = mountStep()
+    const { container } = renderStep()
     await flushPromises()
 
-    const suggestionValues = wrapper
-      .findAll(
+    const suggestionValues = Array.from(
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      container.querySelectorAll(
         '[data-testid="tags-input"][data-disabled="true"] [data-testid="tag-item"]'
       )
-      .map((button) => button.attributes('data-value'))
+    ).map((el) => el.getAttribute('data-value'))
 
     expect(suggestionValues).toEqual(apiTags)
   })
 
   it('falls back to hardcoded tags when API fails', async () => {
     mockFetchTagLabels.mockRejectedValue(new Error('network error'))
-    const wrapper = mountStep()
+    const { container } = renderStep()
     await flushPromises()
 
-    const suggestionValues = wrapper
-      .findAll(
+    const suggestionValues = Array.from(
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      container.querySelectorAll(
         '[data-testid="tags-input"][data-disabled="true"] [data-testid="tag-item"]'
       )
-      .map((button) => button.attributes('data-value'))
+    ).map((el) => el.getAttribute('data-value'))
 
     expect(suggestionValues).toHaveLength(10)
     expect(suggestionValues[0]).toBe(COMFY_HUB_TAG_OPTIONS[0])
@@ -120,30 +141,32 @@ describe('ComfyHubDescribeStep', () => {
   it('adds a suggested tag when clicked', async () => {
     const apiTags = ['Alpha', 'Beta']
     mockFetchTagLabels.mockResolvedValue(apiTags)
-    const wrapper = mountStep()
+    const onUpdateTags = vi.fn()
+    const { container } = renderStep({}, { 'onUpdate:tags': onUpdateTags })
     await flushPromises()
 
-    const suggestionButtons = wrapper.findAll(
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const suggestionButtons = container.querySelectorAll(
       '[data-testid="tags-input"][data-disabled="true"] [data-testid="tag-item"]'
     )
 
-    await suggestionButtons[0].trigger('click')
+    await userEvent.click(suggestionButtons[0] as HTMLElement)
 
-    const tagUpdates = wrapper.emitted('update:tags')
-    expect(tagUpdates?.at(-1)).toEqual([['Alpha']])
+    expect(onUpdateTags).toHaveBeenLastCalledWith(['Alpha'])
   })
 
   it('hides already-selected tags from suggestions', async () => {
     const apiTags = ['Alpha', 'Beta', 'Gamma']
     mockFetchTagLabels.mockResolvedValue(apiTags)
-    const wrapper = mountStep({ tags: ['Alpha'] })
+    const { container } = renderStep({ tags: ['Alpha'] })
     await flushPromises()
 
-    const suggestionValues = wrapper
-      .findAll(
+    const suggestionValues = Array.from(
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      container.querySelectorAll(
         '[data-testid="tags-input"][data-disabled="true"] [data-testid="tag-item"]'
       )
-      .map((button) => button.attributes('data-value'))
+    ).map((el) => el.getAttribute('data-value'))
 
     expect(suggestionValues).not.toContain('Alpha')
     expect(suggestionValues).toEqual(['Beta', 'Gamma'])
@@ -151,22 +174,24 @@ describe('ComfyHubDescribeStep', () => {
 
   it('toggles between default and full suggestion lists', async () => {
     mockFetchTagLabels.mockRejectedValue(new Error('offline'))
-    const wrapper = mountStep()
+    const { container } = renderStep()
     await flushPromises()
 
-    const defaultSuggestions = wrapper.findAll(
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const defaultSuggestions = container.querySelectorAll(
       '[data-testid="tags-input"][data-disabled="true"] [data-testid="tag-item"]'
     )
     expect(defaultSuggestions).toHaveLength(10)
-    expect(wrapper.text()).toContain('comfyHubPublish.showMoreTags')
+    expect(container.textContent).toContain('comfyHubPublish.showMoreTags')
 
-    await wrapper.find('[data-testid="toggle-suggestions"]').trigger('click')
-    await wrapper.vm.$nextTick()
+    await userEvent.click(screen.getByTestId('toggle-suggestions'))
+    await nextTick()
 
-    const allSuggestions = wrapper.findAll(
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const allSuggestions = container.querySelectorAll(
       '[data-testid="tags-input"][data-disabled="true"] [data-testid="tag-item"]'
     )
     expect(allSuggestions).toHaveLength(COMFY_HUB_TAG_OPTIONS.length)
-    expect(wrapper.text()).toContain('comfyHubPublish.showLessTags')
+    expect(container.textContent).toContain('comfyHubPublish.showLessTags')
   })
 })
diff --git a/src/platform/workflow/sharing/components/publish/ComfyHubExamplesStep.test.ts b/src/platform/workflow/sharing/components/publish/ComfyHubExamplesStep.test.ts
index ffc36ea0b7..2b5fa112a6 100644
--- a/src/platform/workflow/sharing/components/publish/ComfyHubExamplesStep.test.ts
+++ b/src/platform/workflow/sharing/components/publish/ComfyHubExamplesStep.test.ts
@@ -1,4 +1,5 @@
-import { mount } from '@vue/test-utils'
+import { fireEvent, render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import type { ExampleImage } from '@/platform/workflow/sharing/types/comfyHubTypes'
@@ -18,9 +19,12 @@ function createImages(count: number): ExampleImage[] {
   }))
 }
 
-function mountStep(images: ExampleImage[]) {
-  return mount(ComfyHubExamplesStep, {
-    props: { exampleImages: images },
+function renderStep(
+  images: ExampleImage[],
+  callbacks: Record<string, ReturnType<typeof vi.fn>> = {}
+) {
+  return render(ComfyHubExamplesStep, {
+    props: { exampleImages: images, ...callbacks },
     global: {
       mocks: { $t: (key: string) => key }
     }
@@ -33,63 +37,78 @@ describe('ComfyHubExamplesStep', () => {
   })
 
   it('renders all example images', () => {
-    const wrapper = mountStep(createImages(3))
-    expect(wrapper.findAll('[role="listitem"]')).toHaveLength(3)
+    renderStep(createImages(3))
+    expect(screen.getAllByRole('listitem')).toHaveLength(3)
   })
 
   it('emits reordered array when moving image left via keyboard', async () => {
-    const wrapper = mountStep(createImages(3))
+    const onUpdateExampleImages = vi.fn()
+    renderStep(createImages(3), {
+      'onUpdate:exampleImages': onUpdateExampleImages
+    })
 
-    const tiles = wrapper.findAll('[role="listitem"]')
-    await tiles[1].trigger('keydown', { key: 'ArrowLeft', shiftKey: true })
+    const tiles = screen.getAllByRole('listitem')
+    // eslint-disable-next-line testing-library/prefer-user-event
+    await fireEvent.keyDown(tiles[1], { key: 'ArrowLeft', shiftKey: true })
 
-    const emitted = wrapper.emitted('update:exampleImages')
-    expect(emitted).toBeTruthy()
-    const reordered = emitted![0][0] as ExampleImage[]
+    expect(onUpdateExampleImages).toHaveBeenCalled()
+    const reordered = onUpdateExampleImages.mock.calls[0][0] as ExampleImage[]
     expect(reordered.map((img) => img.id)).toEqual(['img-1', 'img-0', 'img-2'])
   })
 
   it('emits reordered array when moving image right via keyboard', async () => {
-    const wrapper = mountStep(createImages(3))
+    const onUpdateExampleImages = vi.fn()
+    renderStep(createImages(3), {
+      'onUpdate:exampleImages': onUpdateExampleImages
+    })
 
-    const tiles = wrapper.findAll('[role="listitem"]')
-    await tiles[1].trigger('keydown', { key: 'ArrowRight', shiftKey: true })
+    const tiles = screen.getAllByRole('listitem')
+    // eslint-disable-next-line testing-library/prefer-user-event
+    await fireEvent.keyDown(tiles[1], { key: 'ArrowRight', shiftKey: true })
 
-    const emitted = wrapper.emitted('update:exampleImages')
-    expect(emitted).toBeTruthy()
-    const reordered = emitted![0][0] as ExampleImage[]
+    expect(onUpdateExampleImages).toHaveBeenCalled()
+    const reordered = onUpdateExampleImages.mock.calls[0][0] as ExampleImage[]
     expect(reordered.map((img) => img.id)).toEqual(['img-0', 'img-2', 'img-1'])
   })
 
   it('does not emit when moving first image left (boundary)', async () => {
-    const wrapper = mountStep(createImages(3))
+    const onUpdateExampleImages = vi.fn()
+    renderStep(createImages(3), {
+      'onUpdate:exampleImages': onUpdateExampleImages
+    })
 
-    const tiles = wrapper.findAll('[role="listitem"]')
-    await tiles[0].trigger('keydown', { key: 'ArrowLeft', shiftKey: true })
+    const tiles = screen.getAllByRole('listitem')
+    // eslint-disable-next-line testing-library/prefer-user-event
+    await fireEvent.keyDown(tiles[0], { key: 'ArrowLeft', shiftKey: true })
 
-    expect(wrapper.emitted('update:exampleImages')).toBeFalsy()
+    expect(onUpdateExampleImages).not.toHaveBeenCalled()
   })
 
   it('does not emit when moving last image right (boundary)', async () => {
-    const wrapper = mountStep(createImages(3))
+    const onUpdateExampleImages = vi.fn()
+    renderStep(createImages(3), {
+      'onUpdate:exampleImages': onUpdateExampleImages
+    })
 
-    const tiles = wrapper.findAll('[role="listitem"]')
-    await tiles[2].trigger('keydown', { key: 'ArrowRight', shiftKey: true })
+    const tiles = screen.getAllByRole('listitem')
+    // eslint-disable-next-line testing-library/prefer-user-event
+    await fireEvent.keyDown(tiles[2], { key: 'ArrowRight', shiftKey: true })
 
-    expect(wrapper.emitted('update:exampleImages')).toBeFalsy()
+    expect(onUpdateExampleImages).not.toHaveBeenCalled()
   })
 
   it('emits filtered array when removing an image', async () => {
-    const wrapper = mountStep(createImages(2))
+    const onUpdateExampleImages = vi.fn()
+    renderStep(createImages(2), {
+      'onUpdate:exampleImages': onUpdateExampleImages
+    })
 
-    const removeBtn = wrapper.find(
-      'button[aria-label="comfyHubPublish.removeExampleImage"]'
-    )
-    expect(removeBtn.exists()).toBe(true)
-    await removeBtn.trigger('click')
+    const removeBtn = screen.getAllByRole('button', {
+      name: 'comfyHubPublish.removeExampleImage'
+    })[0]
+    await userEvent.click(removeBtn)
 
-    const emitted = wrapper.emitted('update:exampleImages')
-    expect(emitted).toBeTruthy()
-    expect(emitted![0][0]).toHaveLength(1)
+    expect(onUpdateExampleImages).toHaveBeenCalled()
+    expect(onUpdateExampleImages.mock.calls[0][0]).toHaveLength(1)
   })
 })
diff --git a/src/platform/workflow/sharing/components/publish/ComfyHubPublishDialog.test.ts b/src/platform/workflow/sharing/components/publish/ComfyHubPublishDialog.test.ts
index 1b24f06311..19b375755f 100644
--- a/src/platform/workflow/sharing/components/publish/ComfyHubPublishDialog.test.ts
+++ b/src/platform/workflow/sharing/components/publish/ComfyHubPublishDialog.test.ts
@@ -1,4 +1,5 @@
-import { flushPromises, mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
 
@@ -10,8 +11,10 @@ vi.mock('vue-i18n', async (importOriginal) => {
   }
 })
 
+const mockToastAdd = vi.hoisted(() => vi.fn())
+
 vi.mock('primevue/usetoast', () => ({
-  useToast: () => ({ add: vi.fn() })
+  useToast: () => ({ add: mockToastAdd })
 }))
 
 import ComfyHubPublishDialog from '@/platform/workflow/sharing/components/publish/ComfyHubPublishDialog.vue'
@@ -105,6 +108,10 @@ vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
   })
 }))
 
+async function flushPromises() {
+  await new Promise((r) => setTimeout(r, 0))
+}
+
 describe('ComfyHubPublishDialog', () => {
   const onClose = vi.fn()
 
@@ -122,8 +129,8 @@ describe('ComfyHubPublishDialog', () => {
     })
   })
 
-  function createWrapper() {
-    return mount(ComfyHubPublishDialog, {
+  function renderComponent() {
+    return render(ComfyHubPublishDialog, {
       props: { onClose },
       global: {
         mocks: {
@@ -165,27 +172,27 @@ describe('ComfyHubPublishDialog', () => {
   }
 
   it('starts in publish wizard mode and prefetches profile asynchronously', async () => {
-    createWrapper()
+    renderComponent()
     await flushPromises()
 
     expect(mockFetchProfile).toHaveBeenCalledWith()
   })
 
   it('switches to profile creation step when final-step publish requires profile', async () => {
-    const wrapper = createWrapper()
+    renderComponent()
     await flushPromises()
 
-    await wrapper.find('[data-testid="require-profile"]').trigger('click')
+    await userEvent.click(screen.getByTestId('require-profile'))
 
     expect(mockOpenProfileCreationStep).toHaveBeenCalledOnce()
   })
 
   it('returns to finish state after gate complete and does not auto-close', async () => {
-    const wrapper = createWrapper()
+    renderComponent()
     await flushPromises()
 
-    await wrapper.find('[data-testid="require-profile"]').trigger('click')
-    await wrapper.find('[data-testid="gate-complete"]').trigger('click')
+    await userEvent.click(screen.getByTestId('require-profile'))
+    await userEvent.click(screen.getByTestId('gate-complete'))
 
     expect(mockOpenProfileCreationStep).toHaveBeenCalledOnce()
     expect(mockCloseProfileCreationStep).toHaveBeenCalledOnce()
@@ -194,11 +201,11 @@ describe('ComfyHubPublishDialog', () => {
   })
 
   it('returns to finish state when profile gate is closed', async () => {
-    const wrapper = createWrapper()
+    renderComponent()
     await flushPromises()
 
-    await wrapper.find('[data-testid="require-profile"]').trigger('click')
-    await wrapper.find('[data-testid="gate-close"]').trigger('click')
+    await userEvent.click(screen.getByTestId('require-profile'))
+    await userEvent.click(screen.getByTestId('gate-close'))
 
     expect(mockOpenProfileCreationStep).toHaveBeenCalledOnce()
     expect(mockCloseProfileCreationStep).toHaveBeenCalledOnce()
@@ -206,13 +213,16 @@ describe('ComfyHubPublishDialog', () => {
   })
 
   it('closes dialog after successful publish', async () => {
-    const wrapper = createWrapper()
+    renderComponent()
     await flushPromises()
 
-    await wrapper.find('[data-testid="publish"]').trigger('click')
+    await userEvent.click(screen.getByTestId('publish'))
     await flushPromises()
 
     expect(mockSubmitToComfyHub).toHaveBeenCalledOnce()
+    expect(mockToastAdd).toHaveBeenCalledWith(
+      expect.objectContaining({ severity: 'success' })
+    )
     expect(onClose).toHaveBeenCalledOnce()
   })
 
@@ -230,7 +240,7 @@ describe('ComfyHubPublishDialog', () => {
       }
     })
 
-    createWrapper()
+    renderComponent()
     await flushPromises()
 
     expect(mockApplyPrefill).toHaveBeenCalledWith({
@@ -242,7 +252,7 @@ describe('ComfyHubPublishDialog', () => {
   })
 
   it('does not apply prefill when workflow is not published', async () => {
-    createWrapper()
+    renderComponent()
     await flushPromises()
 
     expect(mockApplyPrefill).not.toHaveBeenCalled()
@@ -257,7 +267,7 @@ describe('ComfyHubPublishDialog', () => {
       prefill: null
     })
 
-    createWrapper()
+    renderComponent()
     await flushPromises()
 
     expect(mockApplyPrefill).not.toHaveBeenCalled()
@@ -266,7 +276,7 @@ describe('ComfyHubPublishDialog', () => {
   it('silently ignores prefill fetch errors', async () => {
     mockGetPublishStatus.mockRejectedValue(new Error('Network error'))
 
-    createWrapper()
+    renderComponent()
     await flushPromises()
 
     expect(mockApplyPrefill).not.toHaveBeenCalled()
diff --git a/src/platform/workflow/sharing/components/publish/ComfyHubPublishDialog.vue b/src/platform/workflow/sharing/components/publish/ComfyHubPublishDialog.vue
index 0c2f7a5fc3..1a4102f407 100644
--- a/src/platform/workflow/sharing/components/publish/ComfyHubPublishDialog.vue
+++ b/src/platform/workflow/sharing/components/publish/ComfyHubPublishDialog.vue
@@ -213,6 +213,12 @@ async function handlePublish(): Promise<void> {
     if (path) {
       cachePublishPrefill(path, formData.value)
     }
+    toast.add({
+      severity: 'success',
+      summary: t('comfyHubPublish.publishSuccessTitle'),
+      detail: t('comfyHubPublish.publishSuccessDescription'),
+      life: 5000
+    })
     onClose()
   } catch (error) {
     console.error('Failed to publish workflow:', error)
diff --git a/src/platform/workflow/sharing/components/publish/ComfyHubPublishWizardContent.test.ts b/src/platform/workflow/sharing/components/publish/ComfyHubPublishWizardContent.test.ts
index 560088047e..901167d2ef 100644
--- a/src/platform/workflow/sharing/components/publish/ComfyHubPublishWizardContent.test.ts
+++ b/src/platform/workflow/sharing/components/publish/ComfyHubPublishWizardContent.test.ts
@@ -1,4 +1,5 @@
-import { flushPromises, mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
 
@@ -59,6 +60,10 @@ function createDefaultFormData(): ComfyHubPublishFormData {
   }
 }
 
+async function flushPromises() {
+  await new Promise((r) => setTimeout(r, 0))
+}
+
 describe('ComfyHubPublishWizardContent', () => {
   const onPublish = vi.fn()
   const onGoNext = vi.fn()
@@ -78,12 +83,12 @@ describe('ComfyHubPublishWizardContent', () => {
     mockFlags.comfyHubProfileGateEnabled = true
   })
 
-  function createWrapper(
+  function renderComponent(
     overrides: Partial<
       InstanceType<typeof ComfyHubPublishWizardContent>['$props']
     > = {}
   ) {
-    return mount(ComfyHubPublishWizardContent, {
+    return render(ComfyHubPublishWizardContent, {
       props: {
         currentStep: 'finish',
         formData: createDefaultFormData(),
@@ -171,8 +176,8 @@ describe('ComfyHubPublishWizardContent', () => {
     it('calls onPublish when profile exists', async () => {
       mockCheckProfile.mockResolvedValue(true)
 
-      const wrapper = createWrapper()
-      await wrapper.find('[data-testid="publish-btn"]').trigger('click')
+      renderComponent()
+      await userEvent.click(screen.getByTestId('publish-btn'))
       await flushPromises()
 
       expect(mockCheckProfile).toHaveBeenCalledOnce()
@@ -183,8 +188,8 @@ describe('ComfyHubPublishWizardContent', () => {
     it('calls onRequireProfile when no profile exists', async () => {
       mockCheckProfile.mockResolvedValue(false)
 
-      const wrapper = createWrapper()
-      await wrapper.find('[data-testid="publish-btn"]').trigger('click')
+      renderComponent()
+      await userEvent.click(screen.getByTestId('publish-btn'))
       await flushPromises()
 
       expect(onRequireProfile).toHaveBeenCalledOnce()
@@ -195,8 +200,8 @@ describe('ComfyHubPublishWizardContent', () => {
       const error = new Error('Network error')
       mockCheckProfile.mockRejectedValue(error)
 
-      const wrapper = createWrapper()
-      await wrapper.find('[data-testid="publish-btn"]').trigger('click')
+      renderComponent()
+      await userEvent.click(screen.getByTestId('publish-btn'))
       await flushPromises()
 
       expect(mockToastErrorHandler).toHaveBeenCalledWith(error)
@@ -207,8 +212,8 @@ describe('ComfyHubPublishWizardContent', () => {
     it('calls onPublish directly when profile gate is disabled', async () => {
       mockFlags.comfyHubProfileGateEnabled = false
 
-      const wrapper = createWrapper()
-      await wrapper.find('[data-testid="publish-btn"]').trigger('click')
+      renderComponent()
+      await userEvent.click(screen.getByTestId('publish-btn'))
       await flushPromises()
 
       expect(mockCheckProfile).not.toHaveBeenCalled()
@@ -221,11 +226,11 @@ describe('ComfyHubPublishWizardContent', () => {
       const publishDeferred = createDeferred<void>()
       onPublish.mockReturnValue(publishDeferred.promise)
 
-      const wrapper = createWrapper()
-      const publishBtn = wrapper.find('[data-testid="publish-btn"]')
+      renderComponent()
+      const publishBtn = screen.getByTestId('publish-btn')
 
-      await publishBtn.trigger('click')
-      await publishBtn.trigger('click')
+      await userEvent.click(publishBtn)
+      await userEvent.click(publishBtn)
       await flushPromises()
 
       expect(onPublish).toHaveBeenCalledTimes(1)
@@ -238,8 +243,8 @@ describe('ComfyHubPublishWizardContent', () => {
       const publishError = new Error('Publish failed')
       onPublish.mockRejectedValueOnce(publishError)
 
-      const wrapper = createWrapper()
-      await wrapper.find('[data-testid="publish-btn"]').trigger('click')
+      renderComponent()
+      await userEvent.click(screen.getByTestId('publish-btn'))
       await flushPromises()
 
       expect(onPublish).toHaveBeenCalledOnce()
@@ -251,33 +256,33 @@ describe('ComfyHubPublishWizardContent', () => {
       const publishDeferred = createDeferred<void>()
       onPublish.mockReturnValue(publishDeferred.promise)
 
-      const wrapper = createWrapper()
-      const publishBtn = wrapper.find('[data-testid="publish-btn"]')
+      renderComponent()
+      const publishBtn = screen.getByTestId('publish-btn')
 
-      await publishBtn.trigger('click')
+      await userEvent.click(publishBtn)
       await flushPromises()
 
-      const footer = wrapper.find('[data-testid="publish-footer"]')
-      expect(footer.attributes('data-publish-disabled')).toBe('true')
-      expect(footer.attributes('data-is-publishing')).toBe('true')
+      const footer = screen.getByTestId('publish-footer')
+      expect(footer.getAttribute('data-publish-disabled')).toBe('true')
+      expect(footer.getAttribute('data-is-publishing')).toBe('true')
 
       publishDeferred.resolve(undefined)
       await flushPromises()
 
-      expect(footer.attributes('data-is-publishing')).toBe('false')
+      expect(footer.getAttribute('data-is-publishing')).toBe('false')
     })
 
     it('resets guard after publish error so retry is possible', async () => {
       onPublish.mockRejectedValueOnce(new Error('Publish failed'))
 
-      const wrapper = createWrapper()
-      const publishBtn = wrapper.find('[data-testid="publish-btn"]')
+      renderComponent()
+      const publishBtn = screen.getByTestId('publish-btn')
 
-      await publishBtn.trigger('click')
+      await userEvent.click(publishBtn)
       await flushPromises()
 
       onPublish.mockResolvedValueOnce(undefined)
-      await publishBtn.trigger('click')
+      await userEvent.click(publishBtn)
       await flushPromises()
 
       expect(onPublish).toHaveBeenCalledTimes(2)
@@ -287,48 +292,42 @@ describe('ComfyHubPublishWizardContent', () => {
   describe('isPublishDisabled', () => {
     it('disables publish when gate enabled and hasProfile is not true', () => {
       mockHasProfile.value = null
-      const wrapper = createWrapper()
+      renderComponent()
 
-      const footer = wrapper.find('[data-testid="publish-footer"]')
-      expect(footer.attributes('data-publish-disabled')).toBe('true')
+      const footer = screen.getByTestId('publish-footer')
+      expect(footer.getAttribute('data-publish-disabled')).toBe('true')
     })
 
     it('enables publish when gate enabled and hasProfile is true', async () => {
       mockHasProfile.value = true
-      const wrapper = createWrapper()
+      renderComponent()
       await flushPromises()
 
-      const footer = wrapper.find('[data-testid="publish-footer"]')
-      expect(footer.attributes('data-publish-disabled')).toBe('false')
+      const footer = screen.getByTestId('publish-footer')
+      expect(footer.getAttribute('data-publish-disabled')).toBe('false')
     })
 
     it('enables publish when gate is disabled regardless of profile', () => {
       mockFlags.comfyHubProfileGateEnabled = false
       mockHasProfile.value = null
-      const wrapper = createWrapper()
+      renderComponent()
 
-      const footer = wrapper.find('[data-testid="publish-footer"]')
-      expect(footer.attributes('data-publish-disabled')).toBe('false')
+      const footer = screen.getByTestId('publish-footer')
+      expect(footer.getAttribute('data-publish-disabled')).toBe('false')
     })
   })
 
   describe('profileCreation step rendering', () => {
     it('shows profile creation form when on profileCreation step', () => {
-      const wrapper = createWrapper({ currentStep: 'profileCreation' })
-      expect(wrapper.find('[data-testid="publish-gate-flow"]').exists()).toBe(
-        true
-      )
-      expect(wrapper.find('[data-testid="publish-footer"]').exists()).toBe(
-        false
-      )
+      renderComponent({ currentStep: 'profileCreation' })
+      expect(screen.getByTestId('publish-gate-flow')).toBeTruthy()
+      expect(screen.queryByTestId('publish-footer')).not.toBeInTheDocument()
     })
 
     it('shows wizard content when not on profileCreation step', () => {
-      const wrapper = createWrapper({ currentStep: 'finish' })
-      expect(wrapper.find('[data-testid="publish-gate-flow"]').exists()).toBe(
-        false
-      )
-      expect(wrapper.find('[data-testid="publish-footer"]').exists()).toBe(true)
+      renderComponent({ currentStep: 'finish' })
+      expect(screen.queryByTestId('publish-gate-flow')).not.toBeInTheDocument()
+      expect(screen.getByTestId('publish-footer')).toBeTruthy()
     })
   })
 })
diff --git a/src/platform/workflow/sharing/composables/useSharedWorkflowUrlLoader.test.ts b/src/platform/workflow/sharing/composables/useSharedWorkflowUrlLoader.test.ts
index de1afd4ccc..ebaff54b6c 100644
--- a/src/platform/workflow/sharing/composables/useSharedWorkflowUrlLoader.test.ts
+++ b/src/platform/workflow/sharing/composables/useSharedWorkflowUrlLoader.test.ts
@@ -1,7 +1,8 @@
+import { fromPartial } from '@total-typescript/shoehorn'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import type { SharedWorkflowPayload } from '@/platform/workflow/sharing/types/shareTypes'
 import { useSharedWorkflowUrlLoader } from '@/platform/workflow/sharing/composables/useSharedWorkflowUrlLoader'
+import type { SharedWorkflowPayload } from '@/platform/workflow/sharing/types/shareTypes'
 
 const preservedQueryMocks = vi.hoisted(() => ({
   clearPreservedQuery: vi.fn(),
@@ -107,9 +108,9 @@ function makePayload(
     name: 'Test Workflow',
     listed: true,
     publishedAt: new Date('2026-02-20T00:00:00Z'),
-    workflowJson: {
+    workflowJson: fromPartial<SharedWorkflowPayload['workflowJson']>({
       nodes: []
-    } as unknown as SharedWorkflowPayload['workflowJson'],
+    }),
     assets: [],
     ...overrides
   }
diff --git a/src/platform/workflow/templates/composables/useTemplateWorkflows.test.ts b/src/platform/workflow/templates/composables/useTemplateWorkflows.test.ts
index 61c1d59851..4a9c210fd9 100644
--- a/src/platform/workflow/templates/composables/useTemplateWorkflows.test.ts
+++ b/src/platform/workflow/templates/composables/useTemplateWorkflows.test.ts
@@ -1,9 +1,12 @@
-import { flushPromises } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useTemplateWorkflows } from '@/platform/workflow/templates/composables/useTemplateWorkflows'
 import { useWorkflowTemplatesStore } from '@/platform/workflow/templates/repositories/workflowTemplatesStore'
 
+async function flushPromises() {
+  await new Promise((r) => setTimeout(r, 0))
+}
+
 // Mock the store
 vi.mock(
   '@/platform/workflow/templates/repositories/workflowTemplatesStore',
diff --git a/src/platform/workflow/validation/schemas/workflowSchema.test.ts b/src/platform/workflow/validation/schemas/workflowSchema.test.ts
index cdb003a982..cd1af360b0 100644
--- a/src/platform/workflow/validation/schemas/workflowSchema.test.ts
+++ b/src/platform/workflow/validation/schemas/workflowSchema.test.ts
@@ -1,3 +1,4 @@
+import { fromPartial } from '@total-typescript/shoehorn'
 import fs from 'fs'
 import { describe, expect, it } from 'vitest'
 
@@ -66,6 +67,69 @@ describe('parseComfyWorkflow', () => {
     await expect(validateComfyWorkflow(workflow)).resolves.not.toBeNull()
   })
 
+  describe('linearData.inputs schema', () => {
+    it('validates 2-tuple format (legacy)', async () => {
+      const workflow = JSON.parse(JSON.stringify(defaultGraph))
+      workflow.extra = {
+        linearData: { inputs: [[1, 'prompt']], outputs: [1] }
+      }
+      const result = await validateComfyWorkflow(workflow)
+      expect(result).not.toBeNull()
+      expect(result!.extra!.linearData!.inputs).toEqual([[1, 'prompt']])
+    })
+
+    it('validates 3-tuple format with config', async () => {
+      const workflow = JSON.parse(JSON.stringify(defaultGraph))
+      workflow.extra = {
+        linearData: { inputs: [[1, 'prompt', { height: 200 }]], outputs: [] }
+      }
+      const result = await validateComfyWorkflow(workflow)
+      expect(result).not.toBeNull()
+      expect(result!.extra!.linearData!.inputs![0]).toEqual([
+        1,
+        'prompt',
+        { height: 200 }
+      ])
+    })
+
+    it('validates 3-tuple format with empty config', async () => {
+      const workflow = JSON.parse(JSON.stringify(defaultGraph))
+      workflow.extra = {
+        linearData: { inputs: [[1, 'prompt', {}]], outputs: [] }
+      }
+      const result = await validateComfyWorkflow(workflow)
+      expect(result).not.toBeNull()
+    })
+
+    it('validates mixed 2-tuple and 3-tuple entries', async () => {
+      const workflow = JSON.parse(JSON.stringify(defaultGraph))
+      workflow.extra = {
+        linearData: {
+          inputs: [
+            [1, 'prompt'],
+            [2, 'seed', { height: 100 }]
+          ],
+          outputs: []
+        }
+      }
+      const result = await validateComfyWorkflow(workflow)
+      expect(result).not.toBeNull()
+      expect(result!.extra!.linearData!.inputs).toEqual([
+        [1, 'prompt'],
+        [2, 'seed', { height: 100 }]
+      ])
+    })
+
+    it('rejects invalid config shape', async () => {
+      const workflow = JSON.parse(JSON.stringify(defaultGraph))
+      workflow.extra = {
+        linearData: { inputs: [[1, 'prompt', 'invalid']], outputs: [] }
+      }
+      const result = await validateComfyWorkflow(workflow)
+      expect(result).toBeNull()
+    })
+  })
+
   it('workflow.nodes.pos', async () => {
     const workflow = JSON.parse(JSON.stringify(defaultGraph))
     workflow.nodes[0].pos = [1, 2, 3]
@@ -295,29 +359,33 @@ describe('flattenWorkflowNodes', () => {
   })
 
   it('includes subgraph nodes with prefixed IDs', () => {
-    const result = flattenWorkflowNodes({
-      nodes: [node(5, 'def-A')],
-      definitions: {
-        subgraphs: [
-          subgraphDef('def-A', [node(10, 'Inner'), node(20, 'Inner2')])
-        ]
-      }
-    } as unknown as ComfyWorkflowJSON)
+    const result = flattenWorkflowNodes(
+      fromPartial<ComfyWorkflowJSON>({
+        nodes: [node(5, 'def-A')],
+        definitions: {
+          subgraphs: [
+            subgraphDef('def-A', [node(10, 'Inner'), node(20, 'Inner2')])
+          ]
+        }
+      })
+    )
 
     expect(result).toHaveLength(3) // 1 root + 2 subgraph
     expect(result.map((n) => n.id)).toEqual([5, '5:10', '5:20'])
   })
 
   it('prefixes nested subgraph nodes with full execution path', () => {
-    const result = flattenWorkflowNodes({
-      nodes: [node(5, 'def-A')],
-      definitions: {
-        subgraphs: [
-          subgraphDef('def-A', [node(10, 'def-B')]),
-          subgraphDef('def-B', [node(3, 'Leaf')])
-        ]
-      }
-    } as unknown as ComfyWorkflowJSON)
+    const result = flattenWorkflowNodes(
+      fromPartial<ComfyWorkflowJSON>({
+        nodes: [node(5, 'def-A')],
+        definitions: {
+          subgraphs: [
+            subgraphDef('def-A', [node(10, 'def-B')]),
+            subgraphDef('def-B', [node(3, 'Leaf')])
+          ]
+        }
+      })
+    )
 
     // root:5, def-A inner: 5:10, def-B inner: 5:10:3
     expect(result.map((n) => n.id)).toEqual([5, '5:10', '5:10:3'])
diff --git a/src/platform/workflow/validation/schemas/workflowSchema.ts b/src/platform/workflow/validation/schemas/workflowSchema.ts
index 656b278196..aa905155dc 100644
--- a/src/platform/workflow/validation/schemas/workflowSchema.ts
+++ b/src/platform/workflow/validation/schemas/workflowSchema.ts
@@ -282,9 +282,21 @@ const zExtra = z
     workflowRendererVersion: zRendererType.optional(),
     BlueprintDescription: z.string().optional(),
     BlueprintSearchAliases: z.array(z.string()).optional(),
+    linearMode: z.boolean().optional(),
     linearData: z
       .object({
-        inputs: z.array(z.tuple([zNodeId, z.string()])).optional(),
+        inputs: z
+          .array(
+            z.union([
+              z.tuple([
+                zNodeId,
+                z.string(),
+                z.object({ height: z.number().optional() }).passthrough()
+              ]),
+              z.tuple([zNodeId, z.string()])
+            ])
+          )
+          .optional(),
         outputs: z.array(zNodeId).optional()
       })
       .optional()
diff --git a/src/platform/workspace/api/workspaceApi.ts b/src/platform/workspace/api/workspaceApi.ts
index 5b176a16b2..d8fdaa816d 100644
--- a/src/platform/workspace/api/workspaceApi.ts
+++ b/src/platform/workspace/api/workspaceApi.ts
@@ -1,6 +1,6 @@
 import axios from 'axios'
 
-import { t } from '@/i18n'
+import type { SubscriptionTier } from '@/platform/cloud/subscription/constants/tierPricing'
 import { api } from '@/scripts/api'
 import { useAuthStore } from '@/stores/authStore'
 
@@ -77,12 +77,7 @@ interface ListWorkspacesResponse {
   workspaces: WorkspaceWithRole[]
 }
 
-export type SubscriptionTier =
-  | 'FREE'
-  | 'STANDARD'
-  | 'CREATOR'
-  | 'PRO'
-  | 'FOUNDERS_EDITION'
+export type { SubscriptionTier }
 export type SubscriptionDuration = 'MONTHLY' | 'ANNUAL'
 type PlanAvailabilityReason =
   | 'same_plan'
@@ -288,27 +283,7 @@ const workspaceApiClient = axios.create({
 })
 
 async function getAuthHeaderOrThrow() {
-  const authHeader = await useAuthStore().getAuthHeader()
-  if (!authHeader) {
-    throw new WorkspaceApiError(
-      t('toastMessages.userNotAuthenticated'),
-      401,
-      'NOT_AUTHENTICATED'
-    )
-  }
-  return authHeader
-}
-
-async function getFirebaseHeaderOrThrow() {
-  const authHeader = await useAuthStore().getFirebaseAuthHeader()
-  if (!authHeader) {
-    throw new WorkspaceApiError(
-      t('toastMessages.userNotAuthenticated'),
-      401,
-      'NOT_AUTHENTICATED'
-    )
-  }
-  return authHeader
+  return useAuthStore().getAuthHeaderOrThrow()
 }
 
 function handleAxiosError(err: unknown): never {
@@ -500,7 +475,7 @@ export const workspaceApi = {
    * Uses Firebase auth (user identity) since the user isn't yet a workspace member.
    */
   async acceptInvite(token: string): Promise<AcceptInviteResponse> {
-    const headers = await getFirebaseHeaderOrThrow()
+    const headers = await useAuthStore().getFirebaseAuthHeaderOrThrow()
     try {
       const response = await workspaceApiClient.post<AcceptInviteResponse>(
         api.apiURL(`/invites/${token}/accept`),
diff --git a/src/platform/workspace/auth/WorkspaceAuthGate.test.ts b/src/platform/workspace/auth/WorkspaceAuthGate.test.ts
index 42d6a74496..a682dfda83 100644
--- a/src/platform/workspace/auth/WorkspaceAuthGate.test.ts
+++ b/src/platform/workspace/auth/WorkspaceAuthGate.test.ts
@@ -1,10 +1,14 @@
-import { flushPromises, mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import WorkspaceAuthGate from './WorkspaceAuthGate.vue'
 
+async function flushPromises() {
+  await new Promise((r) => setTimeout(r, 0))
+}
+
 const mockIsInitialized = ref(false)
 const mockCurrentUser = ref<object | null>(null)
 
@@ -80,7 +84,7 @@ describe('WorkspaceAuthGate', () => {
   const i18n = createI18n({ legacy: false })
 
   const mountComponent = () =>
-    mount(WorkspaceAuthGate, {
+    render(WorkspaceAuthGate, {
       global: { plugins: [i18n] },
       slots: {
         default: '<div data-testid="slot-content">App Content</div>'
@@ -91,10 +95,10 @@ describe('WorkspaceAuthGate', () => {
     it('renders slot immediately when isCloud is false', async () => {
       mockIsCloud.value = false
 
-      const wrapper = mountComponent()
+      mountComponent()
       await flushPromises()
 
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
+      expect(screen.getByTestId('slot-content')).toBeInTheDocument()
       expect(mockRefreshRemoteConfig).not.toHaveBeenCalled()
     })
   })
@@ -103,22 +107,22 @@ describe('WorkspaceAuthGate', () => {
     it('hides slot while waiting for Firebase auth', () => {
       mockIsInitialized.value = false
 
-      const wrapper = mountComponent()
+      mountComponent()
 
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(false)
+      expect(screen.queryByTestId('slot-content')).not.toBeInTheDocument()
     })
 
     it('renders slot when Firebase initializes with no user', async () => {
       mockIsInitialized.value = false
 
-      const wrapper = mountComponent()
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(false)
+      mountComponent()
+      expect(screen.queryByTestId('slot-content')).not.toBeInTheDocument()
 
       mockIsInitialized.value = true
       mockCurrentUser.value = null
       await flushPromises()
 
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
+      expect(screen.getByTestId('slot-content')).toBeInTheDocument()
       expect(mockRefreshRemoteConfig).not.toHaveBeenCalled()
     })
   })
@@ -139,21 +143,21 @@ describe('WorkspaceAuthGate', () => {
     it('renders slot when teamWorkspacesEnabled is false', async () => {
       mockTeamWorkspacesEnabled.value = false
 
-      const wrapper = mountComponent()
+      mountComponent()
       await flushPromises()
 
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
+      expect(screen.getByTestId('slot-content')).toBeInTheDocument()
       expect(mockWorkspaceStoreInitialize).not.toHaveBeenCalled()
     })
 
     it('initializes workspace store when teamWorkspacesEnabled is true', async () => {
       mockTeamWorkspacesEnabled.value = true
 
-      const wrapper = mountComponent()
+      mountComponent()
       await flushPromises()
 
       expect(mockWorkspaceStoreInitialize).toHaveBeenCalled()
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
+      expect(screen.getByTestId('slot-content')).toBeInTheDocument()
     })
 
     it('calls resumePendingPricingFlow after successful workspace init', async () => {
@@ -170,11 +174,11 @@ describe('WorkspaceAuthGate', () => {
       mockTeamWorkspacesEnabled.value = true
       mockWorkspaceStoreInitState.value = 'ready'
 
-      const wrapper = mountComponent()
+      mountComponent()
       await flushPromises()
 
       expect(mockWorkspaceStoreInitialize).not.toHaveBeenCalled()
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
+      expect(screen.getByTestId('slot-content')).toBeInTheDocument()
     })
   })
 
@@ -187,30 +191,32 @@ describe('WorkspaceAuthGate', () => {
     it('renders slot when remote config refresh fails', async () => {
       mockRefreshRemoteConfig.mockRejectedValue(new Error('Network error'))
 
-      const wrapper = mountComponent()
+      mountComponent()
       await flushPromises()
 
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
+      expect(screen.getByTestId('slot-content')).toBeInTheDocument()
     })
 
     it('renders slot when remote config refresh times out', async () => {
       vi.useFakeTimers()
-      // Never-resolving promise simulates a hanging request
-      mockRefreshRemoteConfig.mockReturnValue(new Promise(() => {}))
+      try {
+        // Never-resolving promise simulates a hanging request
+        mockRefreshRemoteConfig.mockReturnValue(new Promise(() => {}))
 
-      const wrapper = mountComponent()
-      await flushPromises()
+        mountComponent()
+        await vi.advanceTimersByTimeAsync(0)
 
-      // Slot not yet rendered before timeout
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(false)
+        // Slot not yet rendered before timeout
+        expect(screen.queryByTestId('slot-content')).not.toBeInTheDocument()
 
-      // Advance past the 10 second timeout
-      await vi.advanceTimersByTimeAsync(10_001)
-      await flushPromises()
+        // Advance past the 10 second timeout
+        await vi.advanceTimersByTimeAsync(10_001)
 
-      // Should render slot after timeout (graceful degradation)
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
-      vi.useRealTimers()
+        // Should render slot after timeout (graceful degradation)
+        expect(screen.getByTestId('slot-content')).toBeInTheDocument()
+      } finally {
+        vi.useRealTimers()
+      }
     })
 
     it('renders slot when workspace store initialization fails', async () => {
@@ -219,10 +225,10 @@ describe('WorkspaceAuthGate', () => {
         new Error('Workspace init failed')
       )
 
-      const wrapper = mountComponent()
+      mountComponent()
       await flushPromises()
 
-      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
+      expect(screen.getByTestId('slot-content')).toBeInTheDocument()
     })
   })
 })
diff --git a/src/platform/workspace/components/PricingTableWorkspace.vue b/src/platform/workspace/components/PricingTableWorkspace.vue
index fc505eb7b7..56c1f0c2cc 100644
--- a/src/platform/workspace/components/PricingTableWorkspace.vue
+++ b/src/platform/workspace/components/PricingTableWorkspace.vue
@@ -310,14 +310,13 @@ import {
   TIER_TO_KEY
 } from '@/platform/cloud/subscription/constants/tierPricing'
 import type {
+  SubscriptionTier,
   TierKey,
   TierPricing
 } from '@/platform/cloud/subscription/constants/tierPricing'
 import type { BillingCycle } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
 import type { Plan } from '@/platform/workspace/api/workspaceApi'
-import type { components } from '@/types/comfyRegistryTypes'
 
-type SubscriptionTier = components['schemas']['SubscriptionTier']
 type CheckoutTierKey = Exclude<TierKey, 'free' | 'founder'>
 
 interface Props {
diff --git a/src/platform/workspace/components/RoleBadge.test.ts b/src/platform/workspace/components/RoleBadge.test.ts
new file mode 100644
index 0000000000..e07047e656
--- /dev/null
+++ b/src/platform/workspace/components/RoleBadge.test.ts
@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/vue'
+import { createI18n } from 'vue-i18n'
+import { describe, expect, it } from 'vitest'
+
+import RoleBadge from './RoleBadge.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      workspaceSwitcher: {
+        roleOwner: 'Owner',
+        roleMember: 'Member'
+      }
+    }
+  }
+})
+
+function renderRoleBadge(role: 'owner' | 'member') {
+  return render(RoleBadge, {
+    props: { role },
+    global: { plugins: [i18n] }
+  })
+}
+
+describe('RoleBadge', () => {
+  it('renders the owner label', () => {
+    renderRoleBadge('owner')
+    expect(screen.getByText('Owner')).toBeInTheDocument()
+  })
+
+  it('renders the member label', () => {
+    renderRoleBadge('member')
+    expect(screen.getByText('Member')).toBeInTheDocument()
+  })
+})
diff --git a/src/platform/workspace/components/RoleBadge.vue b/src/platform/workspace/components/RoleBadge.vue
new file mode 100644
index 0000000000..6fdf9662b2
--- /dev/null
+++ b/src/platform/workspace/components/RoleBadge.vue
@@ -0,0 +1,24 @@
+<template>
+  <span
+    class="rounded-full bg-base-foreground px-1 py-0.5 text-2xs font-bold text-base-background uppercase"
+  >
+    {{ roleBadgeLabel }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { role } = defineProps<{
+  role: 'owner' | 'member'
+}>()
+
+const { t } = useI18n()
+
+const roleBadgeLabel = computed(() =>
+  role === 'owner'
+    ? t('workspaceSwitcher.roleOwner')
+    : t('workspaceSwitcher.roleMember')
+)
+</script>
diff --git a/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.vue b/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.vue
index 0e9484803c..bbceecd5b4 100644
--- a/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.vue
+++ b/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.vue
@@ -102,6 +102,7 @@ import Button from '@/components/ui/button/Button.vue'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { getComfyPlatformBaseUrl } from '@/config/comfyApi'
 import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
+import { useTelemetry } from '@/platform/telemetry'
 import type { BillingCycle } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
 import type { PreviewSubscribeResponse } from '@/platform/workspace/api/workspaceApi'
 import { workspaceApi } from '@/platform/workspace/api/workspaceApi'
@@ -128,6 +129,7 @@ const { t } = useI18n()
 const toast = useToast()
 const { subscribe, previewSubscribe, plans, fetchStatus, fetchBalance } =
   useBillingContext()
+const telemetry = useTelemetry()
 const billingOperationStore = useBillingOperationStore()
 const isPolling = computed(() => billingOperationStore.hasPendingOperations)
 
@@ -226,6 +228,7 @@ async function handleAddCreditCard() {
     if (!response) return
 
     if (response.status === 'subscribed') {
+      telemetry?.trackMonthlySubscriptionSucceeded()
       toast.add({
         severity: 'success',
         summary: t('subscription.required.pollingSuccess'),
@@ -280,6 +283,7 @@ async function handleConfirmTransition() {
     if (!response) return
 
     if (response.status === 'subscribed') {
+      telemetry?.trackMonthlySubscriptionSucceeded()
       toast.add({
         severity: 'success',
         summary: t('subscription.required.pollingSuccess'),
diff --git a/src/platform/workspace/components/dialogs/TeamWorkspacesDialogContent.test.ts b/src/platform/workspace/components/dialogs/TeamWorkspacesDialogContent.test.ts
index d1ab3ef25e..f242778af7 100644
--- a/src/platform/workspace/components/dialogs/TeamWorkspacesDialogContent.test.ts
+++ b/src/platform/workspace/components/dialogs/TeamWorkspacesDialogContent.test.ts
@@ -1,10 +1,16 @@
-import { flushPromises, mount } from '@vue/test-utils'
+/* eslint-disable testing-library/no-container */
+/* eslint-disable testing-library/no-node-access */
+import { render } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 import { nextTick } from 'vue'
 
 import TeamWorkspacesDialogContent from './TeamWorkspacesDialogContent.vue'
 
+const flushPromises = () =>
+  new Promise<void>((resolve) => setTimeout(resolve, 0))
+
 const mockCloseDialog = vi.fn()
 const mockToastAdd = vi.fn()
 const mockSwitchWorkspace = vi.fn()
@@ -71,14 +77,14 @@ const i18n = createI18n({
 const ButtonStub = {
   name: 'Button',
   template:
-    '<button :disabled="disabled" @click="$emit(\'click\')"><slot /></button>',
+    '<button :disabled="disabled" :data-loading="loading" @click="$emit(\'click\')"><slot /></button>',
   props: ['disabled', 'loading', 'variant', 'size']
 }
 
 function mountComponent(props: Record<string, unknown> = {}) {
-  return mount(TeamWorkspacesDialogContent, {
+  const user = userEvent.setup()
+  const { container } = render(TeamWorkspacesDialogContent, {
     props,
-    shallow: true,
     global: {
       plugins: [i18n],
       stubs: {
@@ -87,10 +93,14 @@ function mountComponent(props: Record<string, unknown> = {}) {
       }
     }
   })
+  return { container, user }
 }
 
-function findCreateButton(wrapper: ReturnType<typeof mountComponent>) {
-  return wrapper.findComponent(ButtonStub)
+function findCreateButton(container: Element): HTMLButtonElement {
+  const buttons = container.querySelectorAll('button')
+  return Array.from(buttons).find(
+    (btn) => !btn.closest('header') && !btn.closest('li')
+  ) as HTMLButtonElement
 }
 
 function setOwnedWorkspaces() {
@@ -123,35 +133,37 @@ describe('TeamWorkspacesDialogContent', () => {
   describe('workspace listing', () => {
     it('displays only owned workspaces', () => {
       setOwnedWorkspaces()
-      const wrapper = mountComponent()
-      const items = wrapper.findAll('li')
+      const { container } = mountComponent()
+      const items = container.querySelectorAll('li')
       expect(items).toHaveLength(1)
-      expect(wrapper.text()).toContain('Team Alpha')
-      expect(wrapper.text()).not.toContain('Team Beta')
+      expect(container.textContent).toContain('Team Alpha')
+      expect(container.textContent).not.toContain('Team Beta')
     })
 
     it('shows tier label for subscribed workspaces', () => {
       setOwnedWorkspaces()
-      const wrapper = mountComponent()
-      expect(wrapper.text()).toContain('Pro')
+      const { container } = mountComponent()
+      expect(container.textContent).toContain('Pro')
     })
 
     it('hides workspace list section when no owned workspaces', () => {
-      const wrapper = mountComponent()
-      expect(wrapper.findAll('li')).toHaveLength(0)
+      const { container } = mountComponent()
+      expect(container.querySelectorAll('li')).toHaveLength(0)
     })
 
     it('shows create-only subtitle when no owned workspaces', () => {
-      const wrapper = mountComponent()
-      const subtitle = wrapper.find('header p')
-      expect(subtitle.text()).toBe('teamWorkspacesDialog.subtitleNoWorkspaces')
+      const { container } = mountComponent()
+      const subtitle = container.querySelector('header p')
+      expect(subtitle?.textContent).toBe(
+        'teamWorkspacesDialog.subtitleNoWorkspaces'
+      )
     })
 
     it('shows switch-or-create subtitle when owned workspaces exist', () => {
       setOwnedWorkspaces()
-      const wrapper = mountComponent()
-      const subtitle = wrapper.find('header p')
-      expect(subtitle.text()).toBe('teamWorkspacesDialog.subtitle')
+      const { container } = mountComponent()
+      const subtitle = container.querySelector('header p')
+      expect(subtitle?.textContent).toBe('teamWorkspacesDialog.subtitle')
     })
   })
 
@@ -159,10 +171,10 @@ describe('TeamWorkspacesDialogContent', () => {
     it('calls switchWorkspace with workspace id and closes dialog on success', async () => {
       mockSwitchWorkspace.mockResolvedValue(true)
       setOwnedWorkspaces()
-      const wrapper = mountComponent()
+      const { container, user } = mountComponent()
 
-      const switchButton = wrapper.find('li button')
-      await switchButton.trigger('click')
+      const switchButton = container.querySelector('li button')!
+      await user.click(switchButton)
       await flushPromises()
 
       expect(mockSwitchWorkspace).toHaveBeenCalledWith('ws-1')
@@ -174,10 +186,10 @@ describe('TeamWorkspacesDialogContent', () => {
     it('shows error toast and keeps dialog open when switch fails', async () => {
       mockSwitchWorkspace.mockRejectedValue(new Error('Network error'))
       setOwnedWorkspaces()
-      const wrapper = mountComponent()
+      const { container, user } = mountComponent()
 
-      const switchButton = wrapper.find('li button')
-      await switchButton.trigger('click')
+      const switchButton = container.querySelector('li button')!
+      await user.click(switchButton)
       await flushPromises()
 
       expect(mockCloseDialog).not.toHaveBeenCalled()
@@ -192,55 +204,68 @@ describe('TeamWorkspacesDialogContent', () => {
 
   describe('name validation', () => {
     it('disables create button for empty name', () => {
-      const wrapper = mountComponent()
-      expect(findCreateButton(wrapper).props('disabled')).toBe(true)
+      const { container } = mountComponent()
+      expect(findCreateButton(container)).toBeDisabled()
     })
 
     it('enables create button for valid name', async () => {
-      const wrapper = mountComponent()
-      const input = wrapper.find('#workspace-name-input')
-      await input.setValue('My Team')
+      const { container, user } = mountComponent()
+      const input = container.querySelector(
+        '#workspace-name-input'
+      ) as HTMLInputElement
+      await user.clear(input)
+      await user.type(input, 'My Team')
       await nextTick()
 
-      expect(findCreateButton(wrapper).props('disabled')).toBe(false)
+      expect(findCreateButton(container)).not.toBeDisabled()
     })
 
     it('disables create button for name with special characters', async () => {
-      const wrapper = mountComponent()
-      const input = wrapper.find('#workspace-name-input')
-      await input.setValue('!@#$%')
+      const { container, user } = mountComponent()
+      const input = container.querySelector(
+        '#workspace-name-input'
+      ) as HTMLInputElement
+      await user.clear(input)
+      await user.type(input, '!@#$%')
       await nextTick()
 
-      expect(findCreateButton(wrapper).props('disabled')).toBe(true)
+      expect(findCreateButton(container)).toBeDisabled()
     })
 
     it('disables create button for name exceeding 50 characters', async () => {
-      const wrapper = mountComponent()
-      const input = wrapper.find('#workspace-name-input')
-      await input.setValue('a'.repeat(51))
+      const { container, user } = mountComponent()
+      const input = container.querySelector(
+        '#workspace-name-input'
+      ) as HTMLInputElement
+      await user.clear(input)
+      await user.type(input, 'a'.repeat(51))
       await nextTick()
 
-      expect(findCreateButton(wrapper).props('disabled')).toBe(true)
+      expect(findCreateButton(container)).toBeDisabled()
     })
   })
 
   describe('workspace creation', () => {
     async function typeAndCreate(
-      wrapper: ReturnType<typeof mountComponent>,
+      container: Element,
+      user: ReturnType<typeof userEvent.setup>,
       name: string
     ) {
-      await wrapper.find('#workspace-name-input').setValue(name)
-      await nextTick()
-      findCreateButton(wrapper).vm.$emit('click')
+      const input = container.querySelector(
+        '#workspace-name-input'
+      ) as HTMLInputElement
+      await user.clear(input)
+      await user.type(input, name)
+      await user.click(findCreateButton(container))
       await flushPromises()
     }
 
     it('calls createWorkspace and onConfirm on success', async () => {
       mockCreateWorkspace.mockResolvedValue({ id: 'new-ws' })
       const onConfirm = vi.fn()
-      const wrapper = mountComponent({ onConfirm })
+      const { container, user } = mountComponent({ onConfirm })
 
-      await typeAndCreate(wrapper, 'New Team')
+      await typeAndCreate(container, user, 'New Team')
 
       expect(mockCreateWorkspace).toHaveBeenCalledWith('New Team')
       expect(onConfirm).toHaveBeenCalledWith('New Team')
@@ -251,9 +276,9 @@ describe('TeamWorkspacesDialogContent', () => {
 
     it('shows error toast when creation fails', async () => {
       mockCreateWorkspace.mockRejectedValue(new Error('Limit reached'))
-      const wrapper = mountComponent()
+      const { container, user } = mountComponent()
 
-      await typeAndCreate(wrapper, 'New Team')
+      await typeAndCreate(container, user, 'New Team')
 
       expect(mockToastAdd).toHaveBeenCalledWith(
         expect.objectContaining({
@@ -267,9 +292,9 @@ describe('TeamWorkspacesDialogContent', () => {
     it('shows separate toast when onConfirm fails but still closes dialog', async () => {
       mockCreateWorkspace.mockResolvedValue({ id: 'new-ws' })
       const onConfirm = vi.fn().mockRejectedValue(new Error('Setup failed'))
-      const wrapper = mountComponent({ onConfirm })
+      const { container, user } = mountComponent({ onConfirm })
 
-      await typeAndCreate(wrapper, 'New Team')
+      await typeAndCreate(container, user, 'New Team')
 
       expect(mockCreateWorkspace).toHaveBeenCalledWith('New Team')
       expect(mockToastAdd).toHaveBeenCalledWith(
@@ -286,16 +311,16 @@ describe('TeamWorkspacesDialogContent', () => {
     it('does not call onConfirm when createWorkspace fails', async () => {
       mockCreateWorkspace.mockRejectedValue(new Error('Limit reached'))
       const onConfirm = vi.fn()
-      const wrapper = mountComponent({ onConfirm })
+      const { container, user } = mountComponent({ onConfirm })
 
-      await typeAndCreate(wrapper, 'New Team')
+      await typeAndCreate(container, user, 'New Team')
 
       expect(onConfirm).not.toHaveBeenCalled()
     })
 
     it('does not call createWorkspace when name is invalid', async () => {
-      const wrapper = mountComponent()
-      findCreateButton(wrapper).vm.$emit('click')
+      const { container, user } = mountComponent()
+      await user.click(findCreateButton(container))
       await nextTick()
 
       expect(mockCreateWorkspace).not.toHaveBeenCalled()
@@ -303,29 +328,29 @@ describe('TeamWorkspacesDialogContent', () => {
 
     it('resets loading state after createWorkspace fails', async () => {
       mockCreateWorkspace.mockRejectedValue(new Error('Limit reached'))
-      const wrapper = mountComponent()
+      const { container, user } = mountComponent()
 
-      await typeAndCreate(wrapper, 'New Team')
+      await typeAndCreate(container, user, 'New Team')
 
-      expect(findCreateButton(wrapper).props('loading')).toBe(false)
+      expect(findCreateButton(container).dataset.loading).toBe('false')
     })
 
     it('resets loading state after onConfirm fails', async () => {
       mockCreateWorkspace.mockResolvedValue({ id: 'new-ws' })
       const onConfirm = vi.fn().mockRejectedValue(new Error('Setup failed'))
-      const wrapper = mountComponent({ onConfirm })
+      const { container, user } = mountComponent({ onConfirm })
 
-      await typeAndCreate(wrapper, 'New Team')
+      await typeAndCreate(container, user, 'New Team')
 
-      expect(findCreateButton(wrapper).props('loading')).toBe(false)
+      expect(findCreateButton(container).dataset.loading).toBe('false')
     })
   })
 
   describe('close button', () => {
     it('closes dialog on close button click', async () => {
-      const wrapper = mountComponent()
-      const closeBtn = wrapper.find('header button')
-      await closeBtn.trigger('click')
+      const { container, user } = mountComponent()
+      const closeBtn = container.querySelector('header button')!
+      await user.click(closeBtn)
 
       expect(mockCloseDialog).toHaveBeenCalledWith({
         key: 'team-workspaces'
diff --git a/src/platform/workspace/components/dialogs/settings/MemberListItem.vue b/src/platform/workspace/components/dialogs/settings/MemberListItem.vue
new file mode 100644
index 0000000000..0f90a81854
--- /dev/null
+++ b/src/platform/workspace/components/dialogs/settings/MemberListItem.vue
@@ -0,0 +1,92 @@
+<template>
+  <div
+    :class="
+      cn(
+        'grid w-full items-center rounded-lg p-2',
+        isSingleSeatPlan ? 'grid-cols-1' : gridCols,
+        striped && 'bg-secondary-background/50'
+      )
+    "
+  >
+    <div class="flex items-center gap-3">
+      <UserAvatar
+        class="size-8"
+        :photo-url="isCurrentUser ? photoUrl : undefined"
+        :pt:icon:class="{ 'text-xl!': !isCurrentUser || !photoUrl }"
+      />
+      <div class="flex min-w-0 flex-1 flex-col gap-1">
+        <div class="flex items-center gap-2">
+          <span class="text-sm text-base-foreground">
+            {{ member.name }}
+            <span v-if="isCurrentUser" class="text-muted-foreground">
+              ({{ $t('g.you') }})
+            </span>
+          </span>
+          <RoleBadge v-if="showRoleBadge" :role="member.role" />
+        </div>
+        <span class="text-sm text-muted-foreground">
+          {{ member.email }}
+        </span>
+      </div>
+    </div>
+    <span
+      v-if="showDateColumn && !isSingleSeatPlan"
+      class="text-right text-sm text-muted-foreground"
+    >
+      {{ formatDate(member.joinDate) }}
+    </span>
+    <div
+      v-if="canRemoveMembers && !isSingleSeatPlan"
+      class="flex items-center justify-end"
+    >
+      <Button
+        v-if="!isCurrentUser"
+        v-tooltip="{ value: $t('g.moreOptions'), showDelay: 300 }"
+        variant="muted-textonly"
+        size="icon"
+        :aria-label="$t('g.moreOptions')"
+        @click="$emit('showMenu', $event)"
+      >
+        <i class="pi pi-ellipsis-h" />
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+import UserAvatar from '@/components/common/UserAvatar.vue'
+import Button from '@/components/ui/button/Button.vue'
+import RoleBadge from '@/platform/workspace/components/RoleBadge.vue'
+import type { WorkspaceMember } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { cn } from '@/utils/tailwindUtil'
+
+const {
+  showRoleBadge = false,
+  showDateColumn = false,
+  canRemoveMembers = false,
+  isSingleSeatPlan = false,
+  striped = false
+} = defineProps<{
+  member: WorkspaceMember
+  isCurrentUser: boolean
+  photoUrl?: string
+  gridCols: string
+  showRoleBadge?: boolean
+  showDateColumn?: boolean
+  canRemoveMembers?: boolean
+  isSingleSeatPlan?: boolean
+  striped?: boolean
+}>()
+
+defineEmits<{
+  showMenu: [event: Event]
+}>()
+
+const { d } = useI18n()
+
+function formatDate(date: Date): string {
+  return d(date, { dateStyle: 'medium' })
+}
+</script>
diff --git a/src/platform/workspace/components/dialogs/settings/MemberUpsellBanner.vue b/src/platform/workspace/components/dialogs/settings/MemberUpsellBanner.vue
new file mode 100644
index 0000000000..24ac789134
--- /dev/null
+++ b/src/platform/workspace/components/dialogs/settings/MemberUpsellBanner.vue
@@ -0,0 +1,32 @@
+<template>
+  <div
+    class="mt-4 flex items-center justify-center gap-2 rounded-xl border border-border-default bg-secondary-background px-4 py-3"
+  >
+    <p class="text-foreground m-0 text-sm">
+      {{
+        isActiveSubscription
+          ? $t('workspacePanel.members.upsellBannerUpgrade')
+          : $t('workspacePanel.members.upsellBannerSubscribe')
+      }}
+    </p>
+    <Button
+      variant="muted-textonly"
+      class="cursor-pointer text-sm underline"
+      @click="$emit('showPlans')"
+    >
+      {{ $t('workspacePanel.members.viewPlans') }}
+    </Button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue'
+
+defineProps<{
+  isActiveSubscription: boolean
+}>()
+
+defineEmits<{
+  showPlans: []
+}>()
+</script>
diff --git a/src/platform/workspace/components/dialogs/settings/MembersPanelContent.vue b/src/platform/workspace/components/dialogs/settings/MembersPanelContent.vue
index f0c8acf422..9f0a97f194 100644
--- a/src/platform/workspace/components/dialogs/settings/MembersPanelContent.vue
+++ b/src/platform/workspace/components/dialogs/settings/MembersPanelContent.vue
@@ -129,116 +129,35 @@
           <template v-if="activeView === 'active'">
             <!-- Personal Workspace: show only current user -->
             <template v-if="isPersonalWorkspace">
-              <div
-                :class="
-                  cn(
-                    'grid w-full items-center rounded-lg p-2',
-                    uiConfig.membersGridCols
-                  )
-                "
-              >
-                <div class="flex items-center gap-3">
-                  <UserAvatar
-                    class="size-8"
-                    :photo-url="userPhotoUrl"
-                    :pt:icon:class="{ 'text-xl!': !userPhotoUrl }"
-                  />
-                  <div class="flex min-w-0 flex-1 flex-col gap-1">
-                    <div class="flex items-center gap-2">
-                      <span class="text-sm text-base-foreground">
-                        {{ userDisplayName }}
-                        <span class="text-muted-foreground">
-                          ({{ $t('g.you') }})
-                        </span>
-                      </span>
-                      <span
-                        v-if="uiConfig.showRoleBadge"
-                        class="rounded-full bg-base-foreground px-1 py-0.5 text-2xs font-bold text-base-background uppercase"
-                      >
-                        {{ $t('workspaceSwitcher.roleOwner') }}
-                      </span>
-                    </div>
-                    <span class="text-sm text-muted-foreground">
-                      {{ userEmail }}
-                    </span>
-                  </div>
-                </div>
-              </div>
+              <MemberListItem
+                :member="personalWorkspaceMember"
+                :is-current-user="true"
+                :photo-url="userPhotoUrl ?? undefined"
+                :grid-cols="uiConfig.membersGridCols"
+                :show-role-badge="uiConfig.showRoleBadge"
+              />
             </template>
 
-            <!-- Team Workspace: sorted list (owner first, current user second, then rest) -->
+            <!-- Team Workspace: sorted list -->
             <template v-else>
-              <div
+              <MemberListItem
                 v-for="(member, index) in filteredMembers"
                 :key="member.id"
-                :class="
-                  cn(
-                    'grid w-full items-center rounded-lg p-2',
-                    isSingleSeatPlan ? 'grid-cols-1' : uiConfig.membersGridCols,
-                    index % 2 === 1 && 'bg-secondary-background/50'
-                  )
+                :member="member"
+                :is-current-user="isCurrentUser(member)"
+                :photo-url="
+                  isCurrentUser(member)
+                    ? (userPhotoUrl ?? undefined)
+                    : undefined
                 "
-              >
-                <div class="flex items-center gap-3">
-                  <UserAvatar
-                    class="size-8"
-                    :photo-url="
-                      isCurrentUser(member) ? userPhotoUrl : undefined
-                    "
-                    :pt:icon:class="{
-                      'text-xl!': !isCurrentUser(member) || !userPhotoUrl
-                    }"
-                  />
-                  <div class="flex min-w-0 flex-1 flex-col gap-1">
-                    <div class="flex items-center gap-2">
-                      <span class="text-sm text-base-foreground">
-                        {{ member.name }}
-                        <span
-                          v-if="isCurrentUser(member)"
-                          class="text-muted-foreground"
-                        >
-                          ({{ $t('g.you') }})
-                        </span>
-                      </span>
-                      <span
-                        v-if="uiConfig.showRoleBadge"
-                        class="rounded-full bg-base-foreground px-1 py-0.5 text-2xs font-bold text-base-background uppercase"
-                      >
-                        {{ getRoleBadgeLabel(member.role) }}
-                      </span>
-                    </div>
-                    <span class="text-sm text-muted-foreground">
-                      {{ member.email }}
-                    </span>
-                  </div>
-                </div>
-                <!-- Join date -->
-                <span
-                  v-if="uiConfig.showDateColumn && !isSingleSeatPlan"
-                  class="text-right text-sm text-muted-foreground"
-                >
-                  {{ formatDate(member.joinDate) }}
-                </span>
-                <!-- Remove member action (OWNER only, can't remove yourself) -->
-                <div
-                  v-if="permissions.canRemoveMembers && !isSingleSeatPlan"
-                  class="flex items-center justify-end"
-                >
-                  <Button
-                    v-if="!isCurrentUser(member)"
-                    v-tooltip="{
-                      value: $t('g.moreOptions'),
-                      showDelay: 300
-                    }"
-                    variant="muted-textonly"
-                    size="icon"
-                    :aria-label="$t('g.moreOptions')"
-                    @click="showMemberMenu($event, member)"
-                  >
-                    <i class="pi pi-ellipsis-h" />
-                  </Button>
-                </div>
-              </div>
+                :grid-cols="uiConfig.membersGridCols"
+                :show-role-badge="uiConfig.showRoleBadge"
+                :show-date-column="uiConfig.showDateColumn"
+                :can-remove-members="permissions.canRemoveMembers"
+                :is-single-seat-plan="isSingleSeatPlan"
+                :striped="index % 2 === 1"
+                @show-menu="showMemberMenu($event, member)"
+              />
 
               <!-- Member actions menu (shared for all members) -->
               <Menu ref="memberMenu" :model="memberMenuItems" :popup="true" />
@@ -246,102 +165,20 @@
           </template>
 
           <!-- Upsell Banner -->
-          <div
+          <MemberUpsellBanner
             v-if="isSingleSeatPlan"
-            class="mt-4 flex items-center justify-center gap-2 rounded-xl border border-border-default bg-secondary-background px-4 py-3"
-          >
-            <p class="text-foreground m-0 text-sm">
-              {{
-                isActiveSubscription
-                  ? $t('workspacePanel.members.upsellBannerUpgrade')
-                  : $t('workspacePanel.members.upsellBannerSubscribe')
-              }}
-            </p>
-            <Button
-              variant="muted-textonly"
-              class="cursor-pointer text-sm underline"
-              @click="showSubscriptionDialog()"
-            >
-              {{ $t('workspacePanel.members.viewPlans') }}
-            </Button>
-          </div>
+            :is-active-subscription="isActiveSubscription"
+            @show-plans="showSubscriptionDialog()"
+          />
 
           <!-- Pending Invites -->
-          <template v-if="activeView === 'pending'">
-            <div
-              v-for="(invite, index) in filteredPendingInvites"
-              :key="invite.id"
-              :class="
-                cn(
-                  'grid w-full items-center rounded-lg p-2',
-                  uiConfig.pendingGridCols,
-                  index % 2 === 1 && 'bg-secondary-background/50'
-                )
-              "
-            >
-              <!-- Invite info -->
-              <div class="flex items-center gap-3">
-                <div
-                  class="flex size-8 shrink-0 items-center justify-center rounded-full bg-secondary-background"
-                >
-                  <span class="text-sm font-bold text-base-foreground">
-                    {{ getInviteInitial(invite.email) }}
-                  </span>
-                </div>
-                <div class="flex min-w-0 flex-1 flex-col gap-1">
-                  <span class="text-sm text-base-foreground">
-                    {{ getInviteDisplayName(invite.email) }}
-                  </span>
-                  <span class="text-sm text-muted-foreground">
-                    {{ invite.email }}
-                  </span>
-                </div>
-              </div>
-              <!-- Invite date -->
-              <span class="text-sm text-muted-foreground">
-                {{ formatDate(invite.inviteDate) }}
-              </span>
-              <!-- Expiry date -->
-              <span class="text-sm text-muted-foreground">
-                {{ formatDate(invite.expiryDate) }}
-              </span>
-              <!-- Actions -->
-              <div class="flex items-center justify-end gap-2">
-                <Button
-                  v-tooltip="{
-                    value: $t('workspacePanel.members.actions.copyLink'),
-                    showDelay: 300
-                  }"
-                  variant="secondary"
-                  size="md"
-                  :aria-label="$t('workspacePanel.members.actions.copyLink')"
-                  @click="handleCopyInviteLink(invite)"
-                >
-                  <i class="icon-[lucide--link] size-4" />
-                </Button>
-                <Button
-                  v-tooltip="{
-                    value: $t('workspacePanel.members.actions.revokeInvite'),
-                    showDelay: 300
-                  }"
-                  variant="secondary"
-                  size="md"
-                  :aria-label="
-                    $t('workspacePanel.members.actions.revokeInvite')
-                  "
-                  @click="handleRevokeInvite(invite)"
-                >
-                  <i class="icon-[lucide--mail-x] size-4" />
-                </Button>
-              </div>
-            </div>
-            <div
-              v-if="filteredPendingInvites.length === 0"
-              class="flex w-full items-center justify-center py-8 text-sm text-muted-foreground"
-            >
-              {{ $t('workspacePanel.members.noInvites') }}
-            </div>
-          </template>
+          <PendingInvitesList
+            v-if="activeView === 'pending'"
+            :invites="filteredPendingInvites"
+            :grid-cols="uiConfig.pendingGridCols"
+            @copy-link="handleCopyInviteLink"
+            @revoke="handleRevokeInvite"
+          />
         </div>
       </div>
     </div>
@@ -368,11 +205,13 @@ import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import SearchInput from '@/components/ui/search-input/SearchInput.vue'
-import UserAvatar from '@/components/common/UserAvatar.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { TIER_TO_KEY } from '@/platform/cloud/subscription/constants/tierPricing'
+import MemberListItem from '@/platform/workspace/components/dialogs/settings/MemberListItem.vue'
+import MemberUpsellBanner from '@/platform/workspace/components/dialogs/settings/MemberUpsellBanner.vue'
+import PendingInvitesList from '@/platform/workspace/components/dialogs/settings/PendingInvitesList.vue'
 import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
 import type {
   PendingInvite,
@@ -382,7 +221,7 @@ import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspace
 import { useDialogService } from '@/services/dialogService'
 import { cn } from '@/utils/tailwindUtil'
 
-const { d, t } = useI18n()
+const { t } = useI18n()
 const toast = useToast()
 const { userPhotoUrl, userEmail, userDisplayName } = useCurrentUser()
 const {
@@ -420,6 +259,14 @@ const isSingleSeatPlan = computed(() => {
   return maxSeats.value <= 1
 })
 
+const personalWorkspaceMember = computed<WorkspaceMember>(() => ({
+  id: 'self',
+  name: userDisplayName.value ?? '',
+  email: userEmail.value ?? '',
+  role: 'owner' as const,
+  joinDate: new Date(0)
+}))
+
 const searchQuery = ref('')
 const activeView = ref<'active' | 'pending'>('active')
 const sortField = ref<'inviteDate' | 'expiryDate' | 'joinDate'>('inviteDate')
@@ -428,14 +275,6 @@ const sortDirection = ref<'asc' | 'desc'>('desc')
 const memberMenu = ref<InstanceType<typeof Menu> | null>(null)
 const selectedMember = ref<WorkspaceMember | null>(null)
 
-function getInviteDisplayName(email: string): string {
-  return email.split('@')[0]
-}
-
-function getInviteInitial(email: string): string {
-  return email.charAt(0).toUpperCase()
-}
-
 const memberMenuItems = computed(() => [
   {
     label: t('workspacePanel.members.actions.removeMember'),
@@ -457,7 +296,6 @@ function isCurrentUser(member: WorkspaceMember): boolean {
   return member.email.toLowerCase() === userEmail.value?.toLowerCase()
 }
 
-// All members sorted: owners first, current user second, then rest by join date
 const filteredMembers = computed(() => {
   let result = [...members.value]
 
@@ -471,17 +309,14 @@ const filteredMembers = computed(() => {
   }
 
   result.sort((a, b) => {
-    // Owners always come first
     if (a.role === 'owner' && b.role !== 'owner') return -1
     if (a.role !== 'owner' && b.role === 'owner') return 1
 
-    // Current user comes second (after owner)
     const aIsCurrentUser = isCurrentUser(a)
     const bIsCurrentUser = isCurrentUser(b)
     if (aIsCurrentUser && !bIsCurrentUser) return -1
     if (!aIsCurrentUser && bIsCurrentUser) return 1
 
-    // Then sort by join date
     const aValue = a.joinDate.getTime()
     const bValue = b.joinDate.getTime()
     return sortDirection.value === 'asc' ? aValue - bValue : bValue - aValue
@@ -490,12 +325,6 @@ const filteredMembers = computed(() => {
   return result
 })
 
-function getRoleBadgeLabel(role: 'owner' | 'member'): string {
-  return role === 'owner'
-    ? t('workspaceSwitcher.roleOwner')
-    : t('workspaceSwitcher.roleMember')
-}
-
 const filteredPendingInvites = computed(() => {
   let result = [...pendingInvites.value]
 
@@ -528,10 +357,6 @@ function toggleSort(field: 'inviteDate' | 'expiryDate' | 'joinDate') {
   }
 }
 
-function formatDate(date: Date): string {
-  return d(date, { dateStyle: 'medium' })
-}
-
 async function handleCopyInviteLink(invite: PendingInvite) {
   try {
     await copyInviteLink(invite.id)
diff --git a/src/platform/workspace/components/dialogs/settings/PendingInvitesList.vue b/src/platform/workspace/components/dialogs/settings/PendingInvitesList.vue
new file mode 100644
index 0000000000..8ad461d6af
--- /dev/null
+++ b/src/platform/workspace/components/dialogs/settings/PendingInvitesList.vue
@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <div
+      v-for="(invite, index) in invites"
+      :key="invite.id"
+      :class="
+        cn(
+          'grid w-full items-center rounded-lg p-2',
+          gridCols,
+          index % 2 === 1 && 'bg-secondary-background/50'
+        )
+      "
+    >
+      <div class="flex items-center gap-3">
+        <div
+          class="flex size-8 shrink-0 items-center justify-center rounded-full bg-secondary-background"
+        >
+          <span class="text-sm font-bold text-base-foreground">
+            {{ getInviteInitial(invite.email) }}
+          </span>
+        </div>
+        <div class="flex min-w-0 flex-1 flex-col gap-1">
+          <span class="text-sm text-base-foreground">
+            {{ getInviteDisplayName(invite.email) }}
+          </span>
+          <span class="text-sm text-muted-foreground">
+            {{ invite.email }}
+          </span>
+        </div>
+      </div>
+      <span class="text-sm text-muted-foreground">
+        {{ formatDate(invite.inviteDate) }}
+      </span>
+      <span class="text-sm text-muted-foreground">
+        {{ formatDate(invite.expiryDate) }}
+      </span>
+      <div class="flex items-center justify-end gap-2">
+        <Button
+          v-tooltip="{
+            value: $t('workspacePanel.members.actions.copyLink'),
+            showDelay: 300
+          }"
+          variant="secondary"
+          size="md"
+          :aria-label="$t('workspacePanel.members.actions.copyLink')"
+          @click="$emit('copyLink', invite)"
+        >
+          <i class="icon-[lucide--link] size-4" />
+        </Button>
+        <Button
+          v-tooltip="{
+            value: $t('workspacePanel.members.actions.revokeInvite'),
+            showDelay: 300
+          }"
+          variant="secondary"
+          size="md"
+          :aria-label="$t('workspacePanel.members.actions.revokeInvite')"
+          @click="$emit('revoke', invite)"
+        >
+          <i class="icon-[lucide--mail-x] size-4" />
+        </Button>
+      </div>
+    </div>
+    <div
+      v-if="invites.length === 0"
+      class="flex w-full items-center justify-center py-8 text-sm text-muted-foreground"
+    >
+      {{ $t('workspacePanel.members.noInvites') }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import type { PendingInvite } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { cn } from '@/utils/tailwindUtil'
+
+defineProps<{
+  invites: PendingInvite[]
+  gridCols: string
+}>()
+
+defineEmits<{
+  copyLink: [invite: PendingInvite]
+  revoke: [invite: PendingInvite]
+}>()
+
+const { d } = useI18n()
+
+function getInviteDisplayName(email: string): string {
+  return email.split('@')[0]
+}
+
+function getInviteInitial(email: string): string {
+  return email.charAt(0).toUpperCase()
+}
+
+function formatDate(date: Date): string {
+  return d(date, { dateStyle: 'medium' })
+}
+</script>
diff --git a/src/platform/workspace/composables/useCreateWorkspaceUrlLoader.test.ts b/src/platform/workspace/composables/useCreateWorkspaceUrlLoader.test.ts
index 573b94e38b..8164fd5dac 100644
--- a/src/platform/workspace/composables/useCreateWorkspaceUrlLoader.test.ts
+++ b/src/platform/workspace/composables/useCreateWorkspaceUrlLoader.test.ts
@@ -1,3 +1,4 @@
+import { fromAny } from '@total-typescript/shoehorn'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useCreateWorkspaceUrlLoader } from './useCreateWorkspaceUrlLoader'
@@ -119,7 +120,7 @@ describe('useCreateWorkspaceUrlLoader', () => {
 
     it('ignores non-string param', async () => {
       mockRouteQuery.value = {
-        create_workspace: ['array'] as unknown as string
+        create_workspace: fromAny<string, unknown>(['array'])
       }
 
       const { loadCreateWorkspaceFromUrl } = useCreateWorkspaceUrlLoader()
diff --git a/src/platform/workspace/composables/useInviteUrlLoader.test.ts b/src/platform/workspace/composables/useInviteUrlLoader.test.ts
index 0144402a1a..4cf45aeb7e 100644
--- a/src/platform/workspace/composables/useInviteUrlLoader.test.ts
+++ b/src/platform/workspace/composables/useInviteUrlLoader.test.ts
@@ -1,3 +1,4 @@
+import { fromAny } from '@total-typescript/shoehorn'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useInviteUrlLoader } from './useInviteUrlLoader'
@@ -224,7 +225,9 @@ describe('useInviteUrlLoader', () => {
     })
 
     it('ignores non-string invite param', async () => {
-      mockRouteQuery.value = { invite: ['array', 'value'] as unknown as string }
+      mockRouteQuery.value = {
+        invite: fromAny<string, unknown>(['array', 'value'])
+      }
 
       const { loadInviteFromUrl } = useInviteUrlLoader()
       await loadInviteFromUrl()
diff --git a/src/platform/workspace/stores/workspaceAuthStore.ts b/src/platform/workspace/stores/workspaceAuthStore.ts
index ef724bf32f..4a0ddb09b4 100644
--- a/src/platform/workspace/stores/workspaceAuthStore.ts
+++ b/src/platform/workspace/stores/workspaceAuthStore.ts
@@ -343,6 +343,10 @@ export const useWorkspaceAuthStore = defineStore('workspaceAuth', () => {
     }
   }
 
+  function getWorkspaceToken(): string | undefined {
+    return workspaceToken.value ?? undefined
+  }
+
   function clearWorkspaceContext(): void {
     // Increment request ID to invalidate any in-flight stale refresh operations
     refreshRequestId++
@@ -370,6 +374,7 @@ export const useWorkspaceAuthStore = defineStore('workspaceAuth', () => {
     switchWorkspace,
     refreshToken,
     getWorkspaceAuthHeader,
+    getWorkspaceToken,
     clearWorkspaceContext
   }
 })
diff --git a/src/renderer/core/canvas/useAutoPan.test.ts b/src/renderer/core/canvas/useAutoPan.test.ts
index f7c2bbccc1..b2d5e4a023 100644
--- a/src/renderer/core/canvas/useAutoPan.test.ts
+++ b/src/renderer/core/canvas/useAutoPan.test.ts
@@ -1,7 +1,7 @@
+import { fromPartial } from '@total-typescript/shoehorn'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import type { DragAndScale } from '@/lib/litegraph/src/DragAndScale'
-
 import {
   AutoPanController,
   calculateEdgePanSpeed
@@ -74,7 +74,7 @@ describe('AutoPanController', () => {
   beforeEach(() => {
     vi.useFakeTimers()
 
-    mockCanvas = {
+    mockCanvas = fromPartial<HTMLCanvasElement>({
       getBoundingClientRect: () => ({
         left: 0,
         top: 0,
@@ -86,12 +86,9 @@ describe('AutoPanController', () => {
         y: 0,
         toJSON: () => {}
       })
-    } as unknown as HTMLCanvasElement
+    })
 
-    mockDs = {
-      offset: [0, 0],
-      scale: 1
-    } as unknown as DragAndScale
+    mockDs = fromPartial<DragAndScale>({ offset: [0, 0], scale: 1 })
 
     onPanMock = vi.fn<(dx: number, dy: number) => void>()
     controller = new AutoPanController({
diff --git a/src/renderer/core/layout/__tests__/TransformPane.test.ts b/src/renderer/core/layout/__tests__/TransformPane.test.ts
index 518024b128..281b1a1766 100644
--- a/src/renderer/core/layout/__tests__/TransformPane.test.ts
+++ b/src/renderer/core/layout/__tests__/TransformPane.test.ts
@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils'
+import { fireEvent, render, screen } from '@testing-library/vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { computed, nextTick } from 'vue'
 
@@ -46,21 +46,18 @@ describe('TransformPane', () => {
   beforeEach(() => {
     vi.useFakeTimers()
     vi.resetAllMocks()
-
-    // Create mock canvas with LiteGraph interface
   })
 
   describe('component mounting', () => {
     it('should mount successfully with minimal props', () => {
       const mockCanvas = createMockLGraphCanvas()
-      const wrapper = mount(TransformPane, {
+      render(TransformPane, {
         props: {
           canvas: mockCanvas
         }
       })
 
-      expect(wrapper.exists()).toBe(true)
-      expect(wrapper.find('[data-testid="transform-pane"]').exists()).toBe(true)
+      expect(screen.getByTestId('transform-pane')).toBeInTheDocument()
     })
 
     it('should apply transform style from composable', async () => {
@@ -70,21 +67,22 @@ describe('TransformPane', () => {
       }
 
       const mockCanvas = createMockLGraphCanvas()
-      const wrapper = mount(TransformPane, {
+      render(TransformPane, {
         props: {
           canvas: mockCanvas
         }
       })
       await nextTick()
 
-      const transformPane = wrapper.find('[data-testid="transform-pane"]')
-      const style = transformPane.attributes('style')
-      expect(style).toContain('transform: scale(2) translate(100px, 50px)')
+      const transformPane = screen.getByTestId('transform-pane')
+      expect(transformPane.getAttribute('style')).toContain(
+        'transform: scale(2) translate(100px, 50px)'
+      )
     })
 
     it('should render slot content', () => {
       const mockCanvas = createMockLGraphCanvas()
-      const wrapper = mount(TransformPane, {
+      render(TransformPane, {
         props: {
           canvas: mockCanvas
         },
@@ -93,15 +91,14 @@ describe('TransformPane', () => {
         }
       })
 
-      expect(wrapper.find('.test-content').exists()).toBe(true)
-      expect(wrapper.find('.test-content').text()).toBe('Test Node')
+      expect(screen.getByText('Test Node')).toBeInTheDocument()
     })
   })
 
   describe('RAF synchronization', () => {
     it('should call syncWithCanvas during RAF updates', async () => {
       const mockCanvas = createMockLGraphCanvas()
-      mount(TransformPane, {
+      render(TransformPane, {
         props: {
           canvas: mockCanvas
         }
@@ -109,7 +106,6 @@ describe('TransformPane', () => {
 
       await nextTick()
 
-      // Allow RAF to execute
       vi.advanceTimersToNextFrame()
 
       const transformState = useTransformState()
@@ -120,7 +116,7 @@ describe('TransformPane', () => {
   describe('canvas event listeners', () => {
     it('should add event listeners to canvas on mount', async () => {
       const mockCanvas = createMockLGraphCanvas()
-      mount(TransformPane, {
+      render(TransformPane, {
         props: {
           canvas: mockCanvas
         }
@@ -137,14 +133,14 @@ describe('TransformPane', () => {
 
     it('should remove event listeners on unmount', async () => {
       const mockCanvas = createMockLGraphCanvas()
-      const wrapper = mount(TransformPane, {
+      const { unmount } = render(TransformPane, {
         props: {
           canvas: mockCanvas
         }
       })
 
       await nextTick()
-      wrapper.unmount()
+      unmount()
 
       expect(mockCanvas.canvas.removeEventListener).toHaveBeenCalledWith(
         'wheel',
@@ -157,36 +153,32 @@ describe('TransformPane', () => {
   describe('interaction state management', () => {
     it('should handle pointer events for node delegation', async () => {
       const mockCanvas = createMockLGraphCanvas()
-      const wrapper = mount(TransformPane, {
+      render(TransformPane, {
         props: {
           canvas: mockCanvas
         }
       })
 
-      const transformPane = wrapper.find('[data-testid="transform-pane"]')
+      const transformPane = screen.getByTestId('transform-pane')
 
-      // Simulate pointer down - we can't test the exact delegation logic
-      // in unit tests due to vue-test-utils limitations, but we can verify
-      // the event handler is set up correctly
-      await transformPane.trigger('pointerdown')
+      /* eslint-disable testing-library/prefer-user-event -- pointerDown for delegation, not a click */
+      await fireEvent.pointerDown(transformPane)
+      /* eslint-enable testing-library/prefer-user-event */
 
-      // The test passes if no errors are thrown during event handling
-      expect(transformPane.exists()).toBe(true)
+      expect(transformPane).toBeInTheDocument()
     })
   })
 
   describe('transform state integration', () => {
     it('should provide transform utilities to child components', () => {
       const mockCanvas = createMockLGraphCanvas()
-      mount(TransformPane, {
+      render(TransformPane, {
         props: {
           canvas: mockCanvas
         }
       })
 
       const transformState = useTransformState()
-      // The component should provide transform state via Vue's provide/inject
-      // This is tested indirectly through the composable integration
       expect(transformState.syncWithCanvas).toBeDefined()
       expect(transformState.canvasToScreen).toBeDefined()
       expect(transformState.screenToCanvas).toBeDefined()
@@ -195,14 +187,13 @@ describe('TransformPane', () => {
 
   describe('error handling', () => {
     it('should handle null canvas gracefully', () => {
-      const wrapper = mount(TransformPane, {
+      render(TransformPane, {
         props: {
           canvas: undefined
         }
       })
 
-      expect(wrapper.exists()).toBe(true)
-      expect(wrapper.find('[data-testid="transform-pane"]').exists()).toBe(true)
+      expect(screen.getByTestId('transform-pane')).toBeInTheDocument()
     })
   })
 })
diff --git a/src/renderer/core/layout/sync/useLayoutSync.test.ts b/src/renderer/core/layout/sync/useLayoutSync.test.ts
index d2041d15d0..dabb5900e6 100644
--- a/src/renderer/core/layout/sync/useLayoutSync.test.ts
+++ b/src/renderer/core/layout/sync/useLayoutSync.test.ts
@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils'
+import { render } from '@testing-library/vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { defineComponent } from 'vue'
 
@@ -41,9 +41,12 @@ vi.mock('@/renderer/core/layout/store/layoutStore', () => ({
 
 import { useLayoutSync } from '@/renderer/core/layout/sync/useLayoutSync'
 
+let syncApi: ReturnType<typeof useLayoutSync>
+
 const LayoutSyncHarness = defineComponent({
   setup() {
-    return useLayoutSync()
+    syncApi = useLayoutSync()
+    return syncApi
   },
   template: '<div />'
 })
@@ -85,9 +88,9 @@ describe('useLayoutSync', () => {
       size: { width: 120, height: 70 }
     })
 
-    const wrapper = mount(LayoutSyncHarness)
+    const { unmount } = render(LayoutSyncHarness)
 
-    wrapper.vm.startSync(canvas as never)
+    syncApi.startSync(canvas as never)
 
     testState.listener?.({ nodeIds: ['1'], source: LayoutSource.External })
     testState.listener?.({ nodeIds: ['1'], source: LayoutSource.External })
@@ -102,7 +105,7 @@ describe('useLayoutSync', () => {
     expect(liteNode.pos).toEqual([10, 15])
     expect(liteNode.size).toEqual([120, 70])
 
-    wrapper.unmount()
+    unmount()
   })
 
   it('flushes interactive updates in a microtask without waiting for raf', () => {
@@ -123,9 +126,9 @@ describe('useLayoutSync', () => {
       size: { width: 120, height: 70 }
     })
 
-    const wrapper = mount(LayoutSyncHarness)
+    const { unmount } = render(LayoutSyncHarness)
 
-    wrapper.vm.startSync(canvas as never)
+    syncApi.startSync(canvas as never)
     testState.listener?.({ nodeIds: ['1'], source: LayoutSource.Vue })
 
     expect(testState.rafCallback).toBeNull()
@@ -136,7 +139,7 @@ describe('useLayoutSync', () => {
     expect(canvas.setDirty).toHaveBeenCalledTimes(1)
     expect(liteNode.pos).toEqual([20, 30])
 
-    wrapper.unmount()
+    unmount()
   })
 
   it('promotes queued raf work to microtask when interactive changes arrive', () => {
@@ -156,9 +159,9 @@ describe('useLayoutSync', () => {
       size: { width: 100, height: 50 }
     })
 
-    const wrapper = mount(LayoutSyncHarness)
+    const { unmount } = render(LayoutSyncHarness)
 
-    wrapper.vm.startSync(canvas as never)
+    syncApi.startSync(canvas as never)
     testState.listener?.({ nodeIds: ['1'], source: LayoutSource.External })
     expect(testState.rafCallback).toBeTruthy()
 
@@ -167,6 +170,6 @@ describe('useLayoutSync', () => {
     expect(testState.cancelAnimationFrame).toHaveBeenCalledWith(1)
     expect(testState.microtaskCallback).toBeTruthy()
 
-    wrapper.unmount()
+    unmount()
   })
 })
diff --git a/src/renderer/core/layout/transform/useTransformSettling.test.ts b/src/renderer/core/layout/transform/useTransformSettling.test.ts
index 599909ccc5..783ab84fe0 100644
--- a/src/renderer/core/layout/transform/useTransformSettling.test.ts
+++ b/src/renderer/core/layout/transform/useTransformSettling.test.ts
@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils'
+import { render } from '@testing-library/vue'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick, ref } from 'vue'
 
@@ -169,11 +169,11 @@ describe('useTransformSettling', () => {
       template: '<div>{{ isTransforming }}</div>'
     }
 
-    const wrapper = mount(TestComponent)
+    const { unmount } = render(TestComponent)
     await nextTick()
 
     // Unmount component
-    wrapper.unmount()
+    unmount()
 
     // Should have removed wheel event listener
     expect(removeEventListenerSpy).toHaveBeenCalledWith(
diff --git a/src/renderer/extensions/linearMode/AppInput.vue b/src/renderer/extensions/linearMode/AppInput.vue
index 7b56dbb6f8..36ebd857c3 100644
--- a/src/renderer/extensions/linearMode/AppInput.vue
+++ b/src/renderer/extensions/linearMode/AppInput.vue
@@ -2,7 +2,7 @@
 import { remove } from 'es-toolkit'
 import { computed } from 'vue'
 
-import type { NodeId } from '@/lib/litegraph/src/LGraphNode'
+import type { LinearInput } from '@/platform/workflow/management/stores/comfyWorkflow'
 import { useAppModeStore } from '@/stores/appModeStore'
 import { cn } from '@/utils/tailwindUtil'
 
@@ -15,7 +15,7 @@ const { id, name } = defineProps<{
 const appModeStore = useAppModeStore()
 const isPromoted = computed(() => appModeStore.selectedInputs.some(matchesThis))
 
-function matchesThis([nodeId, widgetName]: [NodeId, string]) {
+function matchesThis([nodeId, widgetName]: LinearInput) {
   return id == nodeId && name === widgetName
 }
 function togglePromotion() {
diff --git a/src/renderer/extensions/linearMode/LinearArrange.vue b/src/renderer/extensions/linearMode/LinearArrange.vue
index 7a913ff055..7c8b944293 100644
--- a/src/renderer/extensions/linearMode/LinearArrange.vue
+++ b/src/renderer/extensions/linearMode/LinearArrange.vue
@@ -39,7 +39,7 @@ const existingOutput = computed(() => {
   <div
     v-else-if="hasOutputs"
     role="article"
-    data-testid="arrange-preview"
+    data-testid="linear-arrange-preview"
     class="mx-auto flex h-full w-3/4 flex-col items-center justify-center gap-6 p-8"
   >
     <div
@@ -54,7 +54,7 @@ const existingOutput = computed(() => {
   <div
     v-else
     role="article"
-    data-testid="arrange-no-outputs"
+    data-testid="linear-arrange-no-outputs"
     class="mx-auto flex h-full w-lg flex-col items-center justify-center gap-6 p-8 text-center"
   >
     <p class="m-0 text-base-foreground">
@@ -75,7 +75,12 @@ const existingOutput = computed(() => {
       <p class="mt-0 p-0">{{ t('linearMode.arrange.outputExamples') }}</p>
     </div>
     <div class="flex flex-row gap-2">
-      <Button variant="primary" size="lg" @click="setMode('builder:outputs')">
+      <Button
+        variant="primary"
+        size="lg"
+        data-testid="linear-arrange-switch-to-outputs"
+        @click="setMode('builder:outputs')"
+      >
         {{ t('linearMode.arrange.switchToOutputsButton') }}
       </Button>
     </div>
diff --git a/src/renderer/extensions/linearMode/LinearPreview.vue b/src/renderer/extensions/linearMode/LinearPreview.vue
index 9776ecbc44..6950883fd5 100644
--- a/src/renderer/extensions/linearMode/LinearPreview.vue
+++ b/src/renderer/extensions/linearMode/LinearPreview.vue
@@ -103,6 +103,7 @@ async function rerun(e: Event) {
     </Button>
     <Button
       v-if="isWorkflowActive && !selectedItem"
+      data-testid="linear-cancel-run"
       variant="destructive"
       @click="cancelActiveWorkflowJobs()"
     >
diff --git a/src/renderer/extensions/linearMode/LinearProgressBar.vue b/src/renderer/extensions/linearMode/LinearProgressBar.vue
index 23c520560f..6b2ffa3bd5 100644
--- a/src/renderer/extensions/linearMode/LinearProgressBar.vue
+++ b/src/renderer/extensions/linearMode/LinearProgressBar.vue
@@ -3,8 +3,6 @@ import { useQueueProgress } from '@/composables/queue/useQueueProgress'
 import { useExecutionStore } from '@/stores/executionStore'
 import { cn } from '@/utils/tailwindUtil'
 
-defineOptions({ inheritAttrs: false })
-
 const {
   class: className,
   overallOpacity = 1,
@@ -32,11 +30,13 @@ const executionStore = useExecutionStore()
     "
   >
     <div
+      data-testid="linear-progress-overall"
       class="absolute inset-0 h-full bg-interface-panel-job-progress-primary transition-[width]"
       :class="cn(rounded && 'rounded-sm')"
       :style="{ width: `${totalPercent}%`, opacity: overallOpacity }"
     />
     <div
+      data-testid="linear-progress-node"
       class="absolute inset-0 h-full bg-interface-panel-job-progress-secondary transition-[width]"
       :class="cn(rounded && 'rounded-sm')"
       :style="{ width: `${currentNodePercent}%`, opacity: activeOpacity }"
diff --git a/src/renderer/extensions/linearMode/LinearWelcome.test.ts b/src/renderer/extensions/linearMode/LinearWelcome.test.ts
new file mode 100644
index 0000000000..77506aa94e
--- /dev/null
+++ b/src/renderer/extensions/linearMode/LinearWelcome.test.ts
@@ -0,0 +1,83 @@
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import LinearWelcome from './LinearWelcome.vue'
+
+const { hasNodes, hasOutputs, enterBuilder } = vi.hoisted(() => {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  const { ref } = require('vue')
+  return {
+    hasNodes: ref(false),
+    hasOutputs: ref(false),
+    enterBuilder: vi.fn()
+  }
+})
+
+vi.mock('@/composables/useAppMode', () => ({
+  useAppMode: () => ({ setMode: vi.fn() })
+}))
+
+vi.mock('@/composables/useWorkflowTemplateSelectorDialog', () => ({
+  useWorkflowTemplateSelectorDialog: () => ({ show: vi.fn() })
+}))
+
+vi.mock('@/stores/appModeStore', () => ({
+  useAppModeStore: () => ({
+    hasNodes,
+    hasOutputs,
+    enterBuilder
+  })
+}))
+
+vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
+  useWorkflowStore: () => ({
+    activeWorkflow: null
+  })
+}))
+
+const i18n = createI18n({ legacy: false, locale: 'en', missingWarn: false })
+
+function renderComponent(
+  opts: { hasNodes?: boolean; hasOutputs?: boolean } = {}
+) {
+  hasNodes.value = opts.hasNodes ?? false
+  hasOutputs.value = opts.hasOutputs ?? false
+  return render(LinearWelcome, {
+    global: { plugins: [i18n] }
+  })
+}
+
+describe('LinearWelcome', () => {
+  beforeEach(() => {
+    hasNodes.value = false
+    hasOutputs.value = false
+    vi.clearAllMocks()
+  })
+
+  it('shows empty workflow text when there are no nodes', () => {
+    renderComponent({ hasNodes: false })
+    expect(
+      screen.getByTestId('linear-welcome-empty-workflow')
+    ).toBeInTheDocument()
+    expect(
+      screen.queryByTestId('linear-welcome-build-app')
+    ).not.toBeInTheDocument()
+  })
+
+  it('shows build app button when there are nodes but no outputs', () => {
+    renderComponent({ hasNodes: true, hasOutputs: false })
+    expect(
+      screen.queryByTestId('linear-welcome-empty-workflow')
+    ).not.toBeInTheDocument()
+    expect(screen.getByTestId('linear-welcome-build-app')).toBeInTheDocument()
+  })
+
+  it('clicking build app button calls enterBuilder', async () => {
+    const user = userEvent.setup()
+    renderComponent({ hasNodes: true, hasOutputs: false })
+    await user.click(screen.getByTestId('linear-welcome-build-app'))
+    expect(enterBuilder).toHaveBeenCalled()
+  })
+})
diff --git a/src/renderer/extensions/linearMode/LinearWelcome.vue b/src/renderer/extensions/linearMode/LinearWelcome.vue
index 7a1a36dfc3..6fa896862c 100644
--- a/src/renderer/extensions/linearMode/LinearWelcome.vue
+++ b/src/renderer/extensions/linearMode/LinearWelcome.vue
@@ -50,7 +50,11 @@ const templateSelectorDialog = useWorkflowTemplateSelectorDialog()
       </p>
     </div>
     <template v-else>
-      <p v-if="!hasNodes" class="mt-0 max-w-md text-sm text-base-foreground">
+      <p
+        v-if="!hasNodes"
+        data-testid="linear-welcome-empty-workflow"
+        class="mt-0 max-w-md text-sm text-base-foreground"
+      >
         {{ t('linearMode.emptyWorkflowExplanation') }}
       </p>
       <p
@@ -66,11 +70,17 @@ const templateSelectorDialog = useWorkflowTemplateSelectorDialog()
         </i18n-t>
       </p>
       <div class="flex flex-row gap-2">
-        <Button variant="textonly" size="lg" @click="setMode('graph')">
+        <Button
+          data-testid="linear-welcome-back-to-workflow"
+          variant="textonly"
+          size="lg"
+          @click="setMode('graph')"
+        >
           {{ t('linearMode.backToWorkflow') }}
         </Button>
         <Button
           v-if="!hasNodes"
+          data-testid="linear-welcome-load-template"
           variant="secondary"
           size="lg"
           @click="templateSelectorDialog.show('appbuilder')"
@@ -79,6 +89,7 @@ const templateSelectorDialog = useWorkflowTemplateSelectorDialog()
         </Button>
         <Button
           v-else
+          data-testid="linear-welcome-build-app"
           variant="primary"
           size="lg"
           @click="appModeStore.enterBuilder()"
diff --git a/src/renderer/extensions/linearMode/OutputHistory.vue b/src/renderer/extensions/linearMode/OutputHistory.vue
index 622295e8a5..eb7dc9cd35 100644
--- a/src/renderer/extensions/linearMode/OutputHistory.vue
+++ b/src/renderer/extensions/linearMode/OutputHistory.vue
@@ -327,6 +327,7 @@ useEventListener(document.body, 'keydown', (e: KeyboardEvent) => {
         :key="`${item.id}-${item.state}`"
         :ref="selectedRef(`slot:${item.id}`)"
         v-bind="itemAttrs(`slot:${item.id}`)"
+        data-testid="linear-in-progress-item"
         :class="itemClass"
         @click="store.select(`slot:${item.id}`)"
       >
@@ -359,6 +360,7 @@ useEventListener(document.body, 'keydown', (e: KeyboardEvent) => {
             :key
             :ref="selectedRef(`history:${asset.id}:${key}`)"
             v-bind="itemAttrs(`history:${asset.id}:${key}`)"
+            data-testid="linear-history-item"
             :class="itemClass"
             @click="store.select(`history:${asset.id}:${key}`)"
           >
diff --git a/src/renderer/extensions/linearMode/OutputHistoryActiveQueueItem.test.ts b/src/renderer/extensions/linearMode/OutputHistoryActiveQueueItem.test.ts
index 33ab630b69..f96f63395a 100644
--- a/src/renderer/extensions/linearMode/OutputHistoryActiveQueueItem.test.ts
+++ b/src/renderer/extensions/linearMode/OutputHistoryActiveQueueItem.test.ts
@@ -1,9 +1,10 @@
 import { createTestingPinia } from '@pinia/testing'
-import { shallowMount } from '@vue/test-utils'
 import { setActivePinia } from 'pinia'
 import { describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
+import { render, screen } from '@testing-library/vue'
+
 import OutputHistoryActiveQueueItem from './OutputHistoryActiveQueueItem.vue'
 
 const i18n = createI18n({ legacy: false, locale: 'en' })
@@ -15,8 +16,8 @@ vi.mock('@/stores/commandStore', () => ({
   })
 }))
 
-function mountComponent(queueCount: number) {
-  return shallowMount(OutputHistoryActiveQueueItem, {
+function renderComponent(queueCount: number) {
+  return render(OutputHistoryActiveQueueItem, {
     props: { queueCount },
     global: { plugins: [i18n] }
   })
@@ -24,21 +25,17 @@ function mountComponent(queueCount: number) {
 
 describe('OutputHistoryActiveQueueItem', () => {
   it('hides badge when queueCount is 1', () => {
-    const wrapper = mountComponent(1)
-    const badge = wrapper.find('[aria-hidden="true"]')
-    expect(badge.exists()).toBe(false)
+    renderComponent(1)
+    expect(screen.queryByText('1')).not.toBeInTheDocument()
   })
 
   it('shows badge with correct count when queueCount is 3', () => {
-    const wrapper = mountComponent(3)
-    const badge = wrapper.find('[aria-hidden="true"]')
-    expect(badge.exists()).toBe(true)
-    expect(badge.text()).toBe('3')
+    renderComponent(3)
+    expect(screen.getByText('3')).toBeInTheDocument()
   })
 
   it('hides badge when queueCount is 0', () => {
-    const wrapper = mountComponent(0)
-    const badge = wrapper.find('[aria-hidden="true"]')
-    expect(badge.exists()).toBe(false)
+    renderComponent(0)
+    expect(screen.queryByText('0')).not.toBeInTheDocument()
   })
 })
diff --git a/src/renderer/extensions/linearMode/OutputHistoryActiveQueueItem.vue b/src/renderer/extensions/linearMode/OutputHistoryActiveQueueItem.vue
index 95964c1682..557c260af6 100644
--- a/src/renderer/extensions/linearMode/OutputHistoryActiveQueueItem.vue
+++ b/src/renderer/extensions/linearMode/OutputHistoryActiveQueueItem.vue
@@ -58,6 +58,7 @@ function clearQueue(close: () => void) {
     <div
       v-if="queueCount > 1"
       aria-hidden="true"
+      data-testid="linear-job-badge"
       class="absolute top-0 right-0 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary-background text-xs text-text-primary"
       v-text="queueCount"
     />
diff --git a/src/renderer/extensions/linearMode/OutputHistoryItem.vue b/src/renderer/extensions/linearMode/OutputHistoryItem.vue
index 364b74e0eb..798958f5d8 100644
--- a/src/renderer/extensions/linearMode/OutputHistoryItem.vue
+++ b/src/renderer/extensions/linearMode/OutputHistoryItem.vue
@@ -15,6 +15,7 @@ const { output } = defineProps<{
 <template>
   <img
     v-if="getMediaType(output) === 'images'"
+    data-testid="linear-image-output"
     class="block size-10 rounded-sm bg-secondary-background object-cover"
     loading="lazy"
     width="40"
@@ -23,6 +24,7 @@ const { output } = defineProps<{
   />
   <template v-else-if="getMediaType(output) === 'video'">
     <video
+      data-testid="linear-video-output"
       class="pointer-events-none block size-10 rounded-sm bg-secondary-background object-cover"
       preload="metadata"
       width="40"
diff --git a/src/renderer/extensions/linearMode/OutputPreviewItem.vue b/src/renderer/extensions/linearMode/OutputPreviewItem.vue
index 7f252726e5..355b681b73 100644
--- a/src/renderer/extensions/linearMode/OutputPreviewItem.vue
+++ b/src/renderer/extensions/linearMode/OutputPreviewItem.vue
@@ -9,10 +9,19 @@ const { latentPreview } = defineProps<{
   <div class="w-10">
     <img
       v-if="latentPreview"
+      data-testid="linear-latent-preview"
       class="block size-10 rounded-sm object-cover"
       :src="latentPreview"
     />
-    <div v-else class="skeleton-shimmer size-10 rounded-sm" />
-    <LinearProgressBar class="mt-1 h-1 w-10" rounded />
+    <div
+      v-else
+      data-testid="linear-skeleton"
+      class="skeleton-shimmer size-10 rounded-sm"
+    />
+    <LinearProgressBar
+      data-testid="linear-item-progress-bar"
+      class="mt-1 h-1 w-10"
+      rounded
+    />
   </div>
 </template>
diff --git a/src/renderer/extensions/linearMode/Preview3d.test.ts b/src/renderer/extensions/linearMode/Preview3d.test.ts
index ae55db06ea..6629942be6 100644
--- a/src/renderer/extensions/linearMode/Preview3d.test.ts
+++ b/src/renderer/extensions/linearMode/Preview3d.test.ts
@@ -1,7 +1,8 @@
-import { mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 
+import { render } from '@testing-library/vue'
+
 const initializeStandaloneViewer = vi.fn()
 const cleanup = vi.fn()
 
@@ -44,20 +45,20 @@ describe('Preview3d', () => {
     vi.restoreAllMocks()
   })
 
-  async function mountPreview3d(
+  async function renderPreview3d(
     modelUrl = 'http://localhost/view?filename=model.glb'
   ) {
-    const wrapper = mount(
+    const result = render(
       (await import('@/renderer/extensions/linearMode/Preview3d.vue')).default,
       { props: { modelUrl } }
     )
     await nextTick()
     await nextTick()
-    return wrapper
+    return result
   }
 
   it('initializes the viewer on mount', async () => {
-    const wrapper = await mountPreview3d()
+    const { unmount } = await renderPreview3d()
 
     expect(initializeStandaloneViewer).toHaveBeenCalledOnce()
     expect(initializeStandaloneViewer).toHaveBeenCalledWith(
@@ -65,14 +66,14 @@ describe('Preview3d', () => {
       'http://localhost/view?filename=model.glb'
     )
 
-    wrapper.unmount()
+    unmount()
   })
 
   it('cleans up the viewer on unmount', async () => {
-    const wrapper = await mountPreview3d()
+    const { unmount } = await renderPreview3d()
     cleanup.mockClear()
 
-    wrapper.unmount()
+    unmount()
 
     expect(cleanup).toHaveBeenCalledOnce()
   })
@@ -80,16 +81,16 @@ describe('Preview3d', () => {
   it('reinitializes correctly after unmount and remount', async () => {
     const url = 'http://localhost/view?filename=model.glb'
 
-    const wrapper1 = await mountPreview3d(url)
+    const result1 = await renderPreview3d(url)
     expect(initializeStandaloneViewer).toHaveBeenCalledTimes(1)
 
     cleanup.mockClear()
-    wrapper1.unmount()
+    result1.unmount()
     expect(cleanup).toHaveBeenCalledOnce()
 
     vi.clearAllMocks()
 
-    const wrapper2 = await mountPreview3d(url)
+    const result2 = await renderPreview3d(url)
     expect(initializeStandaloneViewer).toHaveBeenCalledTimes(1)
     expect(initializeStandaloneViewer).toHaveBeenCalledWith(
       expect.any(HTMLElement),
@@ -97,19 +98,19 @@ describe('Preview3d', () => {
     )
 
     cleanup.mockClear()
-    wrapper2.unmount()
+    result2.unmount()
     expect(cleanup).toHaveBeenCalledOnce()
   })
 
   it('reinitializes when modelUrl changes on existing instance', async () => {
-    const wrapper = await mountPreview3d(
+    const result = await renderPreview3d(
       'http://localhost/view?filename=model-a.glb'
     )
     expect(initializeStandaloneViewer).toHaveBeenCalledOnce()
 
     vi.clearAllMocks()
 
-    await wrapper.setProps({
+    await result.rerender({
       modelUrl: 'http://localhost/view?filename=model-b.glb'
     })
     await nextTick()
@@ -122,6 +123,6 @@ describe('Preview3d', () => {
       'http://localhost/view?filename=model-b.glb'
     )
 
-    wrapper.unmount()
+    result.unmount()
   })
 })
diff --git a/src/renderer/extensions/linearMode/flattenNodeOutput.test.ts b/src/renderer/extensions/linearMode/flattenNodeOutput.test.ts
index ec10ff2582..dff34b389a 100644
--- a/src/renderer/extensions/linearMode/flattenNodeOutput.test.ts
+++ b/src/renderer/extensions/linearMode/flattenNodeOutput.test.ts
@@ -1,3 +1,4 @@
+import { fromPartial } from '@total-typescript/shoehorn'
 import { describe, expect, it } from 'vitest'
 
 import { flattenNodeOutput } from '@/renderer/extensions/linearMode/flattenNodeOutput'
@@ -84,10 +85,12 @@ describe(flattenNodeOutput, () => {
   })
 
   it('flattens non-standard output keys with ResultItem-like values', () => {
-    const output = makeOutput({
-      a_images: [{ filename: 'before.png', subfolder: '', type: 'output' }],
-      b_images: [{ filename: 'after.png', subfolder: '', type: 'output' }]
-    } as unknown as Partial<NodeExecutionOutput>)
+    const output = makeOutput(
+      fromPartial<NodeExecutionOutput>({
+        a_images: [{ filename: 'before.png', subfolder: '', type: 'output' }],
+        b_images: [{ filename: 'after.png', subfolder: '', type: 'output' }]
+      })
+    )
 
     const result = flattenNodeOutput(['10', output])
 
@@ -109,10 +112,10 @@ describe(flattenNodeOutput, () => {
   })
 
   it('excludes non-ResultItem array items', () => {
-    const output = {
+    const output = fromPartial<NodeExecutionOutput>({
       images: [{ filename: 'img.png', subfolder: '', type: 'output' }],
       custom_data: [{ randomKey: 123 }]
-    } as unknown as NodeExecutionOutput
+    })
 
     const result = flattenNodeOutput(['1', output])
 
@@ -121,12 +124,12 @@ describe(flattenNodeOutput, () => {
   })
 
   it('accepts items with filename but no subfolder', () => {
-    const output = {
+    const output = fromPartial<NodeExecutionOutput>({
       images: [
         { filename: 'valid.png', subfolder: '', type: 'output' },
         { filename: 'no-subfolder.png' }
       ]
-    } as unknown as NodeExecutionOutput
+    })
 
     const result = flattenNodeOutput(['1', output])
 
@@ -137,12 +140,12 @@ describe(flattenNodeOutput, () => {
   })
 
   it('excludes items missing filename', () => {
-    const output = {
+    const output = fromPartial<NodeExecutionOutput>({
       images: [
         { filename: 'valid.png', subfolder: '', type: 'output' },
         { subfolder: '', type: 'output' }
       ]
-    } as unknown as NodeExecutionOutput
+    })
 
     const result = flattenNodeOutput(['1', output])
 
diff --git a/src/renderer/extensions/linearMode/linearOutputStore.ts b/src/renderer/extensions/linearMode/linearOutputStore.ts
index ab532d6cfd..292d5b256e 100644
--- a/src/renderer/extensions/linearMode/linearOutputStore.ts
+++ b/src/renderer/extensions/linearMode/linearOutputStore.ts
@@ -246,7 +246,7 @@ export const useLinearOutputStore = defineStore('linearOutput', () => {
     if (!isJobForActiveWorkflow(jobId)) return
 
     const sel = selectedId.value
-    if (!sel || sel.startsWith('slot:') || isFollowing.value) {
+    if (!sel || isFollowing.value) {
       selectedId.value = slotId
       isFollowing.value = true
       return
diff --git a/src/renderer/extensions/minimap/MiniMap.vue b/src/renderer/extensions/minimap/MiniMap.vue
index 090af13ca3..b9b3755636 100644
--- a/src/renderer/extensions/minimap/MiniMap.vue
+++ b/src/renderer/extensions/minimap/MiniMap.vue
@@ -24,6 +24,7 @@
     <div
       ref="containerRef"
       class="litegraph-minimap relative border border-interface-stroke bg-comfy-menu-bg shadow-interface"
+      data-testid="minimap-container"
       :style="containerStyles"
     >
       <Button
@@ -40,7 +41,7 @@
         size="icon"
         variant="muted-textonly"
         :aria-label="$t('g.close')"
-        data-testid="close-minmap-button"
+        data-testid="close-minimap-button"
         @click.stop="() => commandStore.execute('Comfy.Canvas.ToggleMinimap')"
       >
         <i class="icon-[lucide--x]" />
@@ -58,12 +59,18 @@
         :width="width"
         :height="height"
         class="minimap-canvas"
+        data-testid="minimap-canvas"
       />
 
-      <div class="minimap-viewport" :style="viewportStyles" />
+      <div
+        class="minimap-viewport"
+        :style="viewportStyles"
+        data-testid="minimap-viewport"
+      />
 
       <div
         class="absolute inset-0 touch-none"
+        data-testid="minimap-interaction-overlay"
         @pointerdown="handlePointerDown"
         @pointermove="handlePointerMove"
         @pointerup="handlePointerUp"
diff --git a/src/renderer/extensions/vueNodes/VideoPreview.test.ts b/src/renderer/extensions/vueNodes/VideoPreview.test.ts
index eca76f8a77..aebc406f6f 100644
--- a/src/renderer/extensions/vueNodes/VideoPreview.test.ts
+++ b/src/renderer/extensions/vueNodes/VideoPreview.test.ts
@@ -1,5 +1,6 @@
 import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
+import { fireEvent, render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
@@ -44,10 +45,10 @@ describe('VideoPreview', () => {
     vi.clearAllMocks()
   })
 
-  function mountVideoPreview(
+  function renderVideoPreview(
     props: Partial<ComponentProps<typeof VideoPreview>> = {}
   ) {
-    return mount(VideoPreview, {
+    return render(VideoPreview, {
       props: { ...defaultProps, ...props } as ComponentProps<
         typeof VideoPreview
       >,
@@ -63,44 +64,62 @@ describe('VideoPreview', () => {
   describe('batch cycling with identical URLs', () => {
     it('should not enter persistent loading state when cycling through identical videos', async () => {
       const sameUrl = '/api/view?filename=test.mp4&type=output'
-      const wrapper = mountVideoPreview({
+      const { container } = renderVideoPreview({
         imageUrls: [sameUrl, sameUrl, sameUrl]
       })
+      const user = userEvent.setup()
 
       // Simulate initial video load
-      await wrapper.find('video').trigger('loadeddata')
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      const videoEl = container.querySelector('video')
+      expect(videoEl).not.toBeNull()
+      await fireEvent.loadedData(videoEl!)
       await nextTick()
-      expect(wrapper.find('[aria-busy="true"]').exists()).toBe(false)
+      expect(
+        // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+        container.querySelector('[aria-busy="true"]')
+      ).not.toBeInTheDocument()
 
       // Click second navigation dot to cycle to identical URL
-      const dots = wrapper.findAll('[aria-label^="View video"]')
-      await dots[1].trigger('click')
+      const dots = screen.getAllByRole('button', { name: /^View video/ })
+      await user.click(dots[1])
       await nextTick()
 
       // Should NOT be in loading state since URL didn't change
-      expect(wrapper.find('[aria-busy="true"]').exists()).toBe(false)
+      expect(
+        // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+        container.querySelector('[aria-busy="true"]')
+      ).not.toBeInTheDocument()
     })
 
     it('should show loader when cycling to a different URL', async () => {
-      const wrapper = mountVideoPreview({
+      const { container } = renderVideoPreview({
         imageUrls: [
           '/api/view?filename=a.mp4&type=output',
           '/api/view?filename=b.mp4&type=output'
         ]
       })
+      const user = userEvent.setup()
 
       // Simulate initial video load
-      await wrapper.find('video').trigger('loadeddata')
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      const videoEl = container.querySelector('video')
+      expect(videoEl).not.toBeNull()
+      await fireEvent.loadedData(videoEl!)
       await nextTick()
-      expect(wrapper.find('[aria-busy="true"]').exists()).toBe(false)
+      expect(
+        // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+        container.querySelector('[aria-busy="true"]')
+      ).not.toBeInTheDocument()
 
       // Click second dot — different URL
-      const dots = wrapper.findAll('[aria-label^="View video"]')
-      await dots[1].trigger('click')
+      const dots = screen.getAllByRole('button', { name: /^View video/ })
+      await user.click(dots[1])
       await nextTick()
 
       // Should be in loading state since URL changed
-      expect(wrapper.find('[aria-busy="true"]').exists()).toBe(true)
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      expect(container.querySelector('[aria-busy="true"]')).toBeInTheDocument()
     })
   })
 })
diff --git a/src/renderer/extensions/vueNodes/VideoPreview.vue b/src/renderer/extensions/vueNodes/VideoPreview.vue
index e4ef90e4f0..279f10d720 100644
--- a/src/renderer/extensions/vueNodes/VideoPreview.vue
+++ b/src/renderer/extensions/vueNodes/VideoPreview.vue
@@ -46,6 +46,7 @@
         v-if="!videoError"
         :src="currentVideoUrl"
         :class="cn('block size-full object-contain', showLoader && 'invisible')"
+        preload="metadata"
         controls
         loop
         playsinline
diff --git a/src/renderer/extensions/vueNodes/components/AudioPreview.vue b/src/renderer/extensions/vueNodes/components/AudioPreview.vue
index 8d13b16863..9259a34097 100644
--- a/src/renderer/extensions/vueNodes/components/AudioPreview.vue
+++ b/src/renderer/extensions/vueNodes/components/AudioPreview.vue
@@ -5,6 +5,7 @@
       :key="index"
       :src="url"
       controls
+      preload="metadata"
       class="w-full"
     />
   </div>
diff --git a/src/renderer/extensions/vueNodes/components/ImagePreview.test.ts b/src/renderer/extensions/vueNodes/components/ImagePreview.test.ts
index 47201f979e..b45fce2fe1 100644
--- a/src/renderer/extensions/vueNodes/components/ImagePreview.test.ts
+++ b/src/renderer/extensions/vueNodes/components/ImagePreview.test.ts
@@ -1,7 +1,9 @@
+/* eslint-disable testing-library/no-container, testing-library/no-node-access */
+/* eslint-disable testing-library/prefer-user-event */
 import { createTestingPinia } from '@pinia/testing'
-import type { VueWrapper } from '@vue/test-utils'
-import { mount } from '@vue/test-utils'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
@@ -46,10 +48,9 @@ describe('ImagePreview', () => {
       '/api/view?filename=test2.png&type=output'
     ]
   }
-  const wrapperRegistry = new Set<VueWrapper>()
 
-  const mountImagePreview = (props = {}) => {
-    const wrapper = mount(ImagePreview, {
+  function renderImagePreview(props = {}) {
+    return render(ImagePreview, {
       props: { ...defaultProps, ...props },
       global: {
         plugins: [
@@ -67,14 +68,11 @@ describe('ImagePreview', () => {
         }
       }
     })
-    wrapperRegistry.add(wrapper)
-    return wrapper
   }
 
-  /** Switch a multi-image wrapper from default grid mode to gallery mode */
-  async function switchToGallery(wrapper: VueWrapper) {
-    const thumbnails = wrapper.findAll('button[aria-label^="View image"]')
-    await thumbnails[0].trigger('click')
+  async function switchToGallery(user: ReturnType<typeof userEvent.setup>) {
+    const thumbnails = screen.getAllByRole('button', { name: /^View image/ })
+    await user.click(thumbnails[0])
     await nextTick()
   }
 
@@ -82,318 +80,342 @@ describe('ImagePreview', () => {
     vi.clearAllMocks()
   })
 
-  afterEach(() => {
-    wrapperRegistry.forEach((wrapper) => {
-      wrapper.unmount()
-    })
-    wrapperRegistry.clear()
-  })
-
   it('does not render when no imageUrls provided', () => {
-    const wrapper = mountImagePreview({ imageUrls: [] })
+    const { container } = renderImagePreview({ imageUrls: [] })
 
-    expect(wrapper.find('.image-preview').exists()).toBe(false)
+    expect(container.querySelector('.image-preview')).not.toBeInTheDocument()
   })
 
   it('displays calculating dimensions text in gallery mode', async () => {
-    const wrapper = mountImagePreview({
+    renderImagePreview({
       imageUrls: [defaultProps.imageUrls[0]]
     })
 
-    expect(wrapper.text()).toContain('Calculating dimensions')
+    screen.getByText('Calculating dimensions')
   })
 
   it('shows navigation dots for multiple images in gallery mode', async () => {
-    const wrapper = mountImagePreview()
-    await switchToGallery(wrapper)
+    renderImagePreview()
+    const user = userEvent.setup()
+    await switchToGallery(user)
 
-    const navigationDots = wrapper.findAll('[aria-label*="View image"]')
+    const navigationDots = screen.getAllByRole('button', {
+      name: /View image/
+    })
     expect(navigationDots).toHaveLength(2)
   })
 
   it('does not show navigation dots for single image', () => {
-    const wrapper = mountImagePreview({
+    renderImagePreview({
       imageUrls: [defaultProps.imageUrls[0]]
     })
 
-    const navigationDots = wrapper.findAll('[aria-label*="View image"]')
+    const navigationDots = screen.queryAllByRole('button', {
+      name: /View image/
+    })
     expect(navigationDots).toHaveLength(0)
   })
 
-  it('shows mask/edit button only for single images', async () => {
-    // Multiple images in gallery mode - should not show mask button
-    const multipleImagesWrapper = mountImagePreview()
-    await switchToGallery(multipleImagesWrapper)
+  it('does not show mask/edit button for multiple images in gallery mode', async () => {
+    renderImagePreview()
+    const user = userEvent.setup()
+    await switchToGallery(user)
 
     expect(
-      multipleImagesWrapper.find('[aria-label="Edit or mask image"]').exists()
-    ).toBe(false)
+      screen.queryByRole('button', { name: 'Edit or mask image' })
+    ).not.toBeInTheDocument()
+  })
 
-    // Single image - should show mask button
-    const singleImageWrapper = mountImagePreview({
+  it('shows mask/edit button for single images', () => {
+    renderImagePreview({
       imageUrls: [defaultProps.imageUrls[0]]
     })
 
-    expect(
-      singleImageWrapper.find('[aria-label="Edit or mask image"]').exists()
-    ).toBe(true)
+    screen.getByRole('button', { name: 'Edit or mask image' })
   })
 
   it('handles download button click', async () => {
-    const wrapper = mountImagePreview({
+    renderImagePreview({
       imageUrls: [defaultProps.imageUrls[0]]
     })
+    const user = userEvent.setup()
 
-    const downloadButton = wrapper.find('[aria-label="Download image"]')
-    expect(downloadButton.exists()).toBe(true)
-    await downloadButton.trigger('click')
+    const downloadButton = screen.getByRole('button', {
+      name: 'Download image'
+    })
+    await user.click(downloadButton)
 
     expect(downloadFile).toHaveBeenCalledWith(defaultProps.imageUrls[0])
   })
 
   it('switches images when navigation dots are clicked', async () => {
-    const wrapper = mountImagePreview()
-    await switchToGallery(wrapper)
+    renderImagePreview()
+    const user = userEvent.setup()
+    await switchToGallery(user)
 
     // Initially shows first image
-    expect(wrapper.find('img').attributes('src')).toBe(
+    expect(screen.getByRole('img')).toHaveAttribute(
+      'src',
       defaultProps.imageUrls[0]
     )
 
     // Click second navigation dot
-    const navigationDots = wrapper.findAll('[aria-label*="View image"]')
-    await navigationDots[1].trigger('click')
+    const navigationDots = screen.getAllByRole('button', {
+      name: /View image/
+    })
+    await user.click(navigationDots[1])
     await nextTick()
 
-    expect(wrapper.find('img').attributes('src')).toBe(
+    expect(screen.getByRole('img')).toHaveAttribute(
+      'src',
       defaultProps.imageUrls[1]
     )
   })
 
   it('marks active navigation dot with aria-current', async () => {
-    const wrapper = mountImagePreview()
-    await switchToGallery(wrapper)
+    renderImagePreview()
+    const user = userEvent.setup()
+    await switchToGallery(user)
 
-    const navigationDots = wrapper.findAll('[aria-label*="View image"]')
+    const navigationDots = screen.getAllByRole('button', {
+      name: /View image/
+    })
 
     // First dot should be active
-    expect(navigationDots[0].attributes('aria-current')).toBe('true')
-    expect(navigationDots[1].attributes('aria-current')).toBeUndefined()
+    expect(navigationDots[0]).toHaveAttribute('aria-current', 'true')
+    expect(navigationDots[1]).not.toHaveAttribute('aria-current')
 
-    await navigationDots[1].trigger('click')
+    await user.click(navigationDots[1])
     await nextTick()
 
     // Second dot should now be active
-    expect(navigationDots[0].attributes('aria-current')).toBeUndefined()
-    expect(navigationDots[1].attributes('aria-current')).toBe('true')
+    expect(navigationDots[0]).not.toHaveAttribute('aria-current')
+    expect(navigationDots[1]).toHaveAttribute('aria-current', 'true')
   })
 
   it('has proper accessibility attributes', () => {
-    const wrapper = mountImagePreview({
+    renderImagePreview({
       imageUrls: [defaultProps.imageUrls[0]]
     })
 
-    const img = wrapper.find('img')
-    expect(img.attributes('alt')).toBe('View image 1 of 1')
+    expect(screen.getByRole('img')).toHaveAttribute('alt', 'View image 1 of 1')
   })
 
   it('updates alt text when switching images', async () => {
-    const wrapper = mountImagePreview()
-    await switchToGallery(wrapper)
+    renderImagePreview()
+    const user = userEvent.setup()
+    await switchToGallery(user)
 
-    expect(wrapper.find('img').attributes('alt')).toBe('View image 1 of 2')
+    expect(screen.getByRole('img')).toHaveAttribute('alt', 'View image 1 of 2')
 
     // Switch to second image
-    const navigationDots = wrapper.findAll('[aria-label*="View image"]')
-    await navigationDots[1].trigger('click')
+    const navigationDots = screen.getAllByRole('button', {
+      name: /View image/
+    })
+    await user.click(navigationDots[1])
     await nextTick()
 
-    expect(wrapper.find('img').attributes('alt')).toBe('View image 2 of 2')
+    expect(screen.getByRole('img')).toHaveAttribute('alt', 'View image 2 of 2')
   })
 
   describe('keyboard navigation', () => {
     it('navigates to next image with ArrowRight', async () => {
-      const wrapper = mountImagePreview()
-      await switchToGallery(wrapper)
+      const { container } = renderImagePreview()
+      const user = userEvent.setup()
+      await switchToGallery(user)
 
-      await wrapper
-        .find('.image-preview')
-        .trigger('keydown', { key: 'ArrowRight' })
+      const preview = container.querySelector('.image-preview') as HTMLElement
+      await fireEvent.keyDown(preview, { key: 'ArrowRight' })
       await nextTick()
 
-      expect(wrapper.find('[data-testid="main-image"]').attributes('src')).toBe(
+      expect(screen.getByTestId('main-image')).toHaveAttribute(
+        'src',
         defaultProps.imageUrls[1]
       )
     })
 
     it('navigates to previous image with ArrowLeft', async () => {
-      const wrapper = mountImagePreview()
-      await switchToGallery(wrapper)
+      const { container } = renderImagePreview()
+      const user = userEvent.setup()
+      await switchToGallery(user)
 
-      await wrapper
-        .find('.image-preview')
-        .trigger('keydown', { key: 'ArrowRight' })
+      const preview = container.querySelector('.image-preview') as HTMLElement
+      await fireEvent.keyDown(preview, { key: 'ArrowRight' })
       await nextTick()
 
-      await wrapper
-        .find('.image-preview')
-        .trigger('keydown', { key: 'ArrowLeft' })
+      await fireEvent.keyDown(preview, { key: 'ArrowLeft' })
       await nextTick()
 
-      expect(wrapper.find('[data-testid="main-image"]').attributes('src')).toBe(
+      expect(screen.getByTestId('main-image')).toHaveAttribute(
+        'src',
         defaultProps.imageUrls[0]
       )
     })
 
     it('wraps around from last to first with ArrowRight', async () => {
-      const wrapper = mountImagePreview()
-      await switchToGallery(wrapper)
+      const { container } = renderImagePreview()
+      const user = userEvent.setup()
+      await switchToGallery(user)
 
-      await wrapper
-        .find('.image-preview')
-        .trigger('keydown', { key: 'ArrowRight' })
+      const preview = container.querySelector('.image-preview') as HTMLElement
+      await fireEvent.keyDown(preview, { key: 'ArrowRight' })
       await nextTick()
-      await wrapper
-        .find('.image-preview')
-        .trigger('keydown', { key: 'ArrowRight' })
+      await fireEvent.keyDown(preview, { key: 'ArrowRight' })
       await nextTick()
 
-      expect(wrapper.find('[data-testid="main-image"]').attributes('src')).toBe(
+      expect(screen.getByTestId('main-image')).toHaveAttribute(
+        'src',
         defaultProps.imageUrls[0]
       )
     })
 
     it('wraps around from first to last with ArrowLeft', async () => {
-      const wrapper = mountImagePreview()
-      await switchToGallery(wrapper)
+      const { container } = renderImagePreview()
+      const user = userEvent.setup()
+      await switchToGallery(user)
 
-      await wrapper
-        .find('.image-preview')
-        .trigger('keydown', { key: 'ArrowLeft' })
+      const preview = container.querySelector('.image-preview') as HTMLElement
+      await fireEvent.keyDown(preview, { key: 'ArrowLeft' })
       await nextTick()
 
-      expect(wrapper.find('[data-testid="main-image"]').attributes('src')).toBe(
+      expect(screen.getByTestId('main-image')).toHaveAttribute(
+        'src',
         defaultProps.imageUrls[1]
       )
     })
 
     it('navigates to first image with Home', async () => {
-      const wrapper = mountImagePreview()
-      await switchToGallery(wrapper)
+      const { container } = renderImagePreview()
+      const user = userEvent.setup()
+      await switchToGallery(user)
 
-      await wrapper
-        .find('.image-preview')
-        .trigger('keydown', { key: 'ArrowRight' })
+      const preview = container.querySelector('.image-preview') as HTMLElement
+      await fireEvent.keyDown(preview, { key: 'ArrowRight' })
       await nextTick()
 
-      await wrapper.find('.image-preview').trigger('keydown', { key: 'Home' })
+      await fireEvent.keyDown(preview, { key: 'Home' })
       await nextTick()
 
-      expect(wrapper.find('[data-testid="main-image"]').attributes('src')).toBe(
+      expect(screen.getByTestId('main-image')).toHaveAttribute(
+        'src',
         defaultProps.imageUrls[0]
       )
     })
 
     it('navigates to last image with End', async () => {
-      const wrapper = mountImagePreview()
-      await switchToGallery(wrapper)
+      const { container } = renderImagePreview()
+      const user = userEvent.setup()
+      await switchToGallery(user)
 
-      await wrapper.find('.image-preview').trigger('keydown', { key: 'End' })
+      const preview = container.querySelector('.image-preview') as HTMLElement
+      await fireEvent.keyDown(preview, { key: 'End' })
       await nextTick()
 
-      expect(wrapper.find('[data-testid="main-image"]').attributes('src')).toBe(
+      expect(screen.getByTestId('main-image')).toHaveAttribute(
+        'src',
         defaultProps.imageUrls[1]
       )
     })
 
     it('ignores arrow keys in grid mode', async () => {
-      const wrapper = mountImagePreview()
+      const { container } = renderImagePreview()
 
-      const gridThumbnails = wrapper.findAll('button[aria-label^="View image"]')
+      const gridThumbnails = screen.getAllByRole('button', {
+        name: /^View image/
+      })
       expect(gridThumbnails).toHaveLength(2)
 
-      await wrapper
-        .find('.image-preview')
-        .trigger('keydown', { key: 'ArrowRight' })
+      const preview = container.querySelector('.image-preview') as HTMLElement
+      await fireEvent.keyDown(preview, { key: 'ArrowRight' })
       await nextTick()
 
-      expect(wrapper.find('[role="region"]').exists()).toBe(false)
+      expect(screen.queryByRole('region')).not.toBeInTheDocument()
     })
 
     it('ignores arrow keys for single image', async () => {
-      const wrapper = mountImagePreview({
+      const { container } = renderImagePreview({
         imageUrls: [defaultProps.imageUrls[0]]
       })
 
-      const initialSrc = wrapper.find('img').attributes('src')
-      await wrapper
-        .find('.image-preview')
-        .trigger('keydown', { key: 'ArrowRight' })
+      const initialSrc = screen.getByRole('img').getAttribute('src')
+      const preview = container.querySelector('.image-preview') as HTMLElement
+      await fireEvent.keyDown(preview, { key: 'ArrowRight' })
       await nextTick()
 
-      expect(wrapper.find('img').attributes('src')).toBe(initialSrc)
+      expect(screen.getByRole('img')).toHaveAttribute('src', initialSrc!)
     })
   })
 
   describe('grid view', () => {
     it('defaults to grid mode for multiple images', () => {
-      const wrapper = mountImagePreview()
+      renderImagePreview()
 
-      const gridThumbnails = wrapper.findAll('button[aria-label^="View image"]')
+      const gridThumbnails = screen.getAllByRole('button', {
+        name: /^View image/
+      })
       expect(gridThumbnails).toHaveLength(2)
     })
 
     it('defaults to gallery mode for single image', () => {
-      const wrapper = mountImagePreview({
+      renderImagePreview({
         imageUrls: [defaultProps.imageUrls[0]]
       })
 
-      expect(wrapper.find('[role="region"]').exists()).toBe(true)
-      const gridThumbnails = wrapper.findAll('button[aria-label^="View image"]')
+      screen.getByRole('region')
+      const gridThumbnails = screen.queryAllByRole('button', {
+        name: /^View image/
+      })
       expect(gridThumbnails).toHaveLength(0)
     })
 
     it('switches to gallery mode when grid thumbnail is clicked', async () => {
-      const wrapper = mountImagePreview()
+      renderImagePreview()
+      const user = userEvent.setup()
 
-      const thumbnails = wrapper.findAll('button[aria-label^="View image"]')
-      await thumbnails[1].trigger('click')
+      const thumbnails = screen.getAllByRole('button', {
+        name: /^View image/
+      })
+      await user.click(thumbnails[1])
       await nextTick()
 
-      const mainImg = wrapper.find('[data-testid="main-image"]')
-      expect(mainImg.exists()).toBe(true)
-      expect(mainImg.attributes('src')).toBe(defaultProps.imageUrls[1])
+      const mainImg = screen.getByTestId('main-image')
+      expect(mainImg).toHaveAttribute('src', defaultProps.imageUrls[1])
     })
 
     it('shows back-to-grid button next to navigation dots', async () => {
-      const wrapper = mountImagePreview()
-      await switchToGallery(wrapper)
+      renderImagePreview()
+      const user = userEvent.setup()
+      await switchToGallery(user)
 
-      const gridButton = wrapper.find('[aria-label="Grid view"]')
-      expect(gridButton.exists()).toBe(true)
+      const gridButtons = screen.getAllByRole('button', { name: 'Grid view' })
+      expect(gridButtons.length).toBeGreaterThanOrEqual(1)
     })
 
     it('switches back to grid mode via back-to-grid button', async () => {
-      const wrapper = mountImagePreview()
-      await switchToGallery(wrapper)
+      renderImagePreview()
+      const user = userEvent.setup()
+      await switchToGallery(user)
 
-      const gridButton = wrapper.find('[aria-label="Grid view"]')
-      await gridButton.trigger('click')
+      const gridButtons = screen.getAllByRole('button', { name: 'Grid view' })
+      await user.click(gridButtons[0])
       await nextTick()
 
-      const gridThumbnails = wrapper.findAll('button[aria-label^="View image"]')
+      const gridThumbnails = screen.getAllByRole('button', {
+        name: /^View image/
+      })
       expect(gridThumbnails).toHaveLength(2)
     })
 
     it('resets to grid mode when URLs change to multiple images', async () => {
-      const wrapper = mountImagePreview()
-      await switchToGallery(wrapper)
+      const { rerender } = renderImagePreview()
+      const user = userEvent.setup()
+      await switchToGallery(user)
 
       // Verify we're in gallery mode
-      expect(wrapper.find('[role="region"]').exists()).toBe(true)
+      screen.getByRole('region')
 
       // Change URLs
-      await wrapper.setProps({
+      await rerender({
         imageUrls: [
           '/api/view?filename=new1.png&type=output',
           '/api/view?filename=new2.png&type=output',
@@ -403,7 +425,9 @@ describe('ImagePreview', () => {
       await nextTick()
 
       // Should be back in grid mode
-      const gridThumbnails = wrapper.findAll('button[aria-label^="View image"]')
+      const gridThumbnails = screen.getAllByRole('button', {
+        name: /^View image/
+      })
       expect(gridThumbnails).toHaveLength(3)
     })
   })
@@ -411,21 +435,26 @@ describe('ImagePreview', () => {
   describe('batch cycling with identical URLs', () => {
     it('should not enter persistent loading state when cycling through identical images', async () => {
       vi.useFakeTimers()
+      const user = userEvent.setup({
+        advanceTimers: vi.advanceTimersByTime
+      })
       try {
         const sameUrl = '/api/view?filename=test.png&type=output'
-        const wrapper = mountImagePreview({
+        const { container } = renderImagePreview({
           imageUrls: [sameUrl, sameUrl, sameUrl]
         })
-        await switchToGallery(wrapper)
+        await switchToGallery(user)
 
         // Simulate initial image load
-        await wrapper.find('img').trigger('load')
+        await fireEvent.load(screen.getByRole('img'))
         await nextTick()
-        expect(wrapper.find('[aria-busy="true"]').exists()).toBe(false)
+        expect(
+          container.querySelector('[aria-busy="true"]')
+        ).not.toBeInTheDocument()
 
         // Click second navigation dot to cycle
-        const dots = wrapper.findAll('[aria-label*="View image"]')
-        await dots[1].trigger('click')
+        const dots = screen.getAllByRole('button', { name: /View image/ })
+        await user.click(dots[1])
         await nextTick()
 
         // Advance past the delayed loader timeout
@@ -433,7 +462,9 @@ describe('ImagePreview', () => {
         await nextTick()
 
         // Should NOT be in loading state since URL didn't change
-        expect(wrapper.find('[aria-busy="true"]').exists()).toBe(false)
+        expect(
+          container.querySelector('[aria-busy="true"]')
+        ).not.toBeInTheDocument()
       } finally {
         vi.useRealTimers()
       }
@@ -443,20 +474,27 @@ describe('ImagePreview', () => {
   describe('URL change detection', () => {
     it('should NOT reset loading state when imageUrls prop is reassigned with identical URLs', async () => {
       vi.useFakeTimers()
+      const user = userEvent.setup({
+        advanceTimers: vi.advanceTimersByTime
+      })
       try {
         const urls = ['/api/view?filename=test.png&type=output']
-        const wrapper = mountImagePreview({ imageUrls: urls })
+        const { container, rerender } = renderImagePreview({
+          imageUrls: urls
+        })
+        void user
 
         // Simulate image load completing
-        const img = wrapper.find('img')
-        await img.trigger('load')
+        await fireEvent.load(screen.getByRole('img'))
         await nextTick()
 
         // Verify loader is hidden after load
-        expect(wrapper.find('[aria-busy="true"]').exists()).toBe(false)
+        expect(
+          container.querySelector('[aria-busy="true"]')
+        ).not.toBeInTheDocument()
 
         // Reassign with new array reference but same content
-        await wrapper.setProps({ imageUrls: [...urls] })
+        await rerender({ imageUrls: [...urls] })
         await nextTick()
 
         // Advance past the 250ms delayed loader timeout
@@ -464,7 +502,9 @@ describe('ImagePreview', () => {
         await nextTick()
 
         // Loading state should NOT have been reset
-        expect(wrapper.find('[aria-busy="true"]').exists()).toBe(false)
+        expect(
+          container.querySelector('[aria-busy="true"]')
+        ).not.toBeInTheDocument()
       } finally {
         vi.useRealTimers()
       }
@@ -472,20 +512,27 @@ describe('ImagePreview', () => {
 
     it('should reset loading state when imageUrls prop changes to different URLs', async () => {
       vi.useFakeTimers()
+      const user = userEvent.setup({
+        advanceTimers: vi.advanceTimersByTime
+      })
       try {
         const urls = ['/api/view?filename=test.png&type=output']
-        const wrapper = mountImagePreview({ imageUrls: urls })
+        const { container, rerender } = renderImagePreview({
+          imageUrls: urls
+        })
 
         // Simulate image load completing
-        const img = wrapper.find('img')
-        await img.trigger('load')
+        await fireEvent.load(screen.getByRole('img'))
         await nextTick()
 
         // Verify loader is hidden
-        expect(wrapper.find('[aria-busy="true"]').exists()).toBe(false)
+        expect(
+          container.querySelector('[aria-busy="true"]')
+        ).not.toBeInTheDocument()
 
+        void user
         // Change to different URL
-        await wrapper.setProps({
+        await rerender({
           imageUrls: ['/api/view?filename=different.png&type=output']
         })
         await nextTick()
@@ -494,24 +541,26 @@ describe('ImagePreview', () => {
         await vi.advanceTimersByTimeAsync(300)
         await nextTick()
 
-        expect(wrapper.find('[aria-busy="true"]').exists()).toBe(true)
+        expect(
+          container.querySelector('[aria-busy="true"]')
+        ).toBeInTheDocument()
       } finally {
         vi.useRealTimers()
       }
     })
 
     it('should handle empty to non-empty URL transitions correctly', async () => {
-      const wrapper = mountImagePreview({ imageUrls: [] })
+      const { container, rerender } = renderImagePreview({ imageUrls: [] })
 
-      expect(wrapper.find('.image-preview').exists()).toBe(false)
+      expect(container.querySelector('.image-preview')).not.toBeInTheDocument()
 
-      await wrapper.setProps({
+      await rerender({
         imageUrls: ['/api/view?filename=test.png&type=output']
       })
       await nextTick()
 
-      expect(wrapper.find('.image-preview').exists()).toBe(true)
-      expect(wrapper.find('img').exists()).toBe(true)
+      expect(container.querySelector('.image-preview')).toBeInTheDocument()
+      screen.getByRole('img')
     })
   })
 })
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.subgraph.test.ts b/src/renderer/extensions/vueNodes/components/LGraphNode.subgraph.test.ts
index 12e7c890c5..a5993fd923 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.subgraph.test.ts
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.subgraph.test.ts
@@ -2,8 +2,9 @@
  * Tests for NodeHeader subgraph functionality
  */
 import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
+import { render, screen, fireEvent } from '@testing-library/vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
 
 import type {
   LGraph,
@@ -89,8 +90,8 @@ describe('Vue Node - Subgraph Functionality', () => {
     flags: {}
   })
 
-  const createWrapper = (props: { nodeData: VueNodeData }) => {
-    return mount(LGraphNode, {
+  const renderComponent = (props: { nodeData: VueNodeData }) => {
+    return render(LGraphNode, {
       props,
       global: {
         plugins: [createTestingPinia({ createSpy: vi.fn })],
@@ -105,37 +106,37 @@ describe('Vue Node - Subgraph Functionality', () => {
   it('should show subgraph button for subgraph nodes', async () => {
     await setupMocks(true) // isSubgraph = true
 
-    const wrapper = createWrapper({
+    renderComponent({
       nodeData: createMockNodeData('test-node-1')
     })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
-    const subgraphButton = wrapper.find('[data-testid="subgraph-enter-button"]')
-    expect(subgraphButton.exists()).toBe(true)
+    expect(screen.getByTestId('subgraph-enter-button')).toBeInTheDocument()
   })
 
   it('should not show subgraph button for regular nodes', async () => {
     await setupMocks(false) // isSubgraph = false
 
-    const wrapper = createWrapper({
+    renderComponent({
       nodeData: createMockNodeData('test-node-1')
     })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
-    const subgraphButton = wrapper.find('[data-testid="subgraph-enter-button"]')
-    expect(subgraphButton.exists()).toBe(false)
+    expect(
+      screen.queryByTestId('subgraph-enter-button')
+    ).not.toBeInTheDocument()
   })
 
   it('should handle subgraph context correctly', async () => {
     await setupMocks(true) // isSubgraph = true
 
-    const wrapper = createWrapper({
+    renderComponent({
       nodeData: createMockNodeData('test-node-1', 'subgraph-id')
     })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     // Should call getNodeByLocatorId with correct locator ID
     expect(vi.mocked(getNodeByLocatorId)).toHaveBeenCalledWith(
@@ -143,31 +144,27 @@ describe('Vue Node - Subgraph Functionality', () => {
       'subgraph-id:test-node-1'
     )
 
-    const subgraphButton = wrapper.find('[data-testid="subgraph-enter-button"]')
-    expect(subgraphButton.exists()).toBe(true)
+    expect(screen.getByTestId('subgraph-enter-button')).toBeInTheDocument()
   })
 
-  it('should prevent event propagation on double click', async () => {
+  it('should prevent click event propagation on subgraph button', async () => {
     await setupMocks(true) // isSubgraph = true
 
-    const wrapper = createWrapper({
+    const { container } = renderComponent({
       nodeData: createMockNodeData('test-node-1')
     })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
-    const subgraphButton = wrapper.find('[data-testid="subgraph-enter-button"]')
+    const parentListener = vi.fn()
+    // eslint-disable-next-line testing-library/no-container
+    container.addEventListener('click', parentListener)
 
-    // Mock event object
-    const mockEvent = {
-      stopPropagation: vi.fn()
-    }
+    const subgraphButton = screen.getByTestId('subgraph-enter-button')
 
-    // Trigger dblclick event
-    await subgraphButton.trigger('dblclick', mockEvent)
+    // eslint-disable-next-line testing-library/prefer-user-event
+    await fireEvent.click(subgraphButton)
 
-    // Should prevent propagation (handled by @dblclick.stop directive)
-    // This is tested by ensuring the component doesn't error and renders correctly
-    expect(subgraphButton.exists()).toBe(true)
+    expect(parentListener).not.toHaveBeenCalled()
   })
 })
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.test.ts b/src/renderer/extensions/vueNodes/components/LGraphNode.test.ts
index 47341aad06..173d4e56aa 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.test.ts
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.test.ts
@@ -1,5 +1,5 @@
 import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { computed, toValue } from 'vue'
 import type { ComponentProps } from 'vue-component-type-helpers'
@@ -123,8 +123,12 @@ const pinia = createTestingPinia({
   createSpy: vi.fn
 })
 
-function mountLGraphNode(props: ComponentProps<typeof LGraphNode>) {
-  return mount(LGraphNode, {
+function getNodeRoot(container: Element): HTMLElement {
+  return container.firstElementChild as HTMLElement
+}
+
+function renderLGraphNode(props: ComponentProps<typeof LGraphNode>) {
+  return render(LGraphNode, {
     props,
     global: {
       plugins: [pinia, i18n],
@@ -170,7 +174,7 @@ describe('LGraphNode', () => {
   })
 
   it('should call resize tracking composable with node ID', () => {
-    mountLGraphNode({ nodeData: mockNodeData })
+    renderLGraphNode({ nodeData: mockNodeData })
 
     expect(useVueElementTracking).toHaveBeenCalledWith(
       expect.any(Function),
@@ -182,14 +186,15 @@ describe('LGraphNode', () => {
   })
 
   it('should render with data-node-id attribute', () => {
-    const wrapper = mountLGraphNode({ nodeData: mockNodeData })
+    const { container } = renderLGraphNode({ nodeData: mockNodeData })
 
-    expect(wrapper.attributes('data-node-id')).toBe('test-node-123')
+    expect(getNodeRoot(container).getAttribute('data-node-id')).toBe(
+      'test-node-123'
+    )
   })
 
   it('should render node title', () => {
-    // Don't stub NodeHeader for this test so we can see the title
-    const wrapper = mount(LGraphNode, {
+    const { container } = render(LGraphNode, {
       props: { nodeData: mockNodeData },
       global: {
         plugins: [pinia, i18n],
@@ -202,7 +207,7 @@ describe('LGraphNode', () => {
       }
     })
 
-    expect(wrapper.text()).toContain('Test Node')
+    expect(container.textContent).toContain('Test Node')
   })
 
   it('should apply selected styling when selected prop is true', async () => {
@@ -210,89 +215,99 @@ describe('LGraphNode', () => {
     canvasStore.selectedNodeIds.clear()
     canvasStore.selectedNodeIds.add('test-node-123')
 
-    const wrapper = mountLGraphNode({ nodeData: mockNodeData })
+    const { container } = renderLGraphNode({ nodeData: mockNodeData })
+    const root = getNodeRoot(container)
 
-    // Root div should have the selection class
-    expect(wrapper.classes()).toContain('outline-node-component-outline')
+    expect(root).toHaveClass('outline-node-component-outline')
 
-    // The layered outline overlay should be present
-    const overlay = wrapper.find('[data-testid="node-state-outline-overlay"]')
-    expect(overlay.exists()).toBe(true)
-    expect(overlay.classes()).toContain('border-node-component-outline')
+    const overlay = screen.getByTestId('node-state-outline-overlay')
+    expect(overlay).toHaveClass('border-node-component-outline')
   })
 
   it('should render progress indicator when executing prop is true', () => {
     mockData.mockExecuting = true
 
-    const wrapper = mountLGraphNode({ nodeData: mockNodeData })
+    const { container } = renderLGraphNode({ nodeData: mockNodeData })
+    const root = getNodeRoot(container)
 
-    // Root div should have the executing class
-    expect(wrapper.classes()).toContain('outline-node-stroke-executing')
+    expect(root).toHaveClass('outline-node-stroke-executing')
 
-    // The layered outline overlay should be present
-    const overlay = wrapper.find('[data-testid="node-state-outline-overlay"]')
-    expect(overlay.exists()).toBe(true)
-    expect(overlay.classes()).toContain('border-node-stroke-executing')
+    const overlay = screen.getByTestId('node-state-outline-overlay')
+    expect(overlay).toHaveClass('border-node-stroke-executing')
   })
 
   it('should initialize height CSS vars for collapsed nodes', () => {
-    const wrapper = mountLGraphNode({
+    const { container } = renderLGraphNode({
       nodeData: {
         ...mockNodeData,
         flags: { collapsed: true }
       }
     })
+    const root = getNodeRoot(container)
 
-    expect(wrapper.element.style.getPropertyValue('--node-height')).toBe('')
-    expect(wrapper.element.style.getPropertyValue('--node-height-x')).toBe(
-      '130px'
-    )
+    expect(root.style.getPropertyValue('--node-height')).toBe('')
+    expect(root.style.getPropertyValue('--node-height-x')).toBe('130px')
   })
 
   it('should initialize height CSS vars for expanded nodes', () => {
-    const wrapper = mountLGraphNode({
+    const { container } = renderLGraphNode({
       nodeData: {
         ...mockNodeData,
         flags: { collapsed: false }
       }
     })
+    const root = getNodeRoot(container)
 
-    expect(wrapper.element.style.getPropertyValue('--node-height')).toBe(
-      '130px'
-    )
-    expect(wrapper.element.style.getPropertyValue('--node-height-x')).toBe('')
+    expect(root.style.getPropertyValue('--node-height')).toBe('130px')
+    expect(root.style.getPropertyValue('--node-height-x')).toBe('')
   })
 
   describe('Reroute node sizing', () => {
     it('should not enforce minimum width for reroute nodes', () => {
-      const wrapper = mountLGraphNode({ nodeData: mockRerouteNodeData })
-      const regularWrapper = mountLGraphNode({ nodeData: mockNodeData })
+      const { container: rerouteContainer } = renderLGraphNode({
+        nodeData: mockRerouteNodeData
+      })
+      const { container: regularContainer } = renderLGraphNode({
+        nodeData: mockNodeData
+      })
 
-      const rerouteHasMinWidth = wrapper
-        .classes()
-        .some((c) => c.startsWith('min-w-'))
-      const regularHasMinWidth = regularWrapper
-        .classes()
-        .some((c) => c.startsWith('min-w-'))
+      const rerouteRoot = getNodeRoot(rerouteContainer)
+      const regularRoot = getNodeRoot(regularContainer)
+
+      const rerouteHasMinWidth = [...rerouteRoot.classList].some((c) =>
+        c.startsWith('min-w-')
+      )
+      const regularHasMinWidth = [...regularRoot.classList].some((c) =>
+        c.startsWith('min-w-')
+      )
 
       expect(rerouteHasMinWidth).toBe(false)
       expect(regularHasMinWidth).toBe(true)
     })
 
     it('should use fixed height for reroute nodes', () => {
-      const wrapper = mountLGraphNode({ nodeData: mockRerouteNodeData })
-      const hasFixedHeight = wrapper.classes().some((c) => c.startsWith('h-'))
+      const { container } = renderLGraphNode({
+        nodeData: mockRerouteNodeData
+      })
+      const root = getNodeRoot(container)
+      const hasFixedHeight = [...root.classList].some((c) => c.startsWith('h-'))
       expect(hasFixedHeight).toBe(true)
     })
 
     it('should not render resize handle for reroute nodes', () => {
-      const wrapper = mountLGraphNode({ nodeData: mockRerouteNodeData })
-      expect(wrapper.find('[role="button"][aria-label]').exists()).toBe(false)
+      const { container } = renderLGraphNode({
+        nodeData: mockRerouteNodeData
+      })
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      expect(container.querySelector('[role="button"][aria-label]')).toBeNull()
     })
 
     it('should render resize handle for regular nodes', () => {
-      const wrapper = mountLGraphNode({ nodeData: mockNodeData })
-      expect(wrapper.find('[role="button"][aria-label]').exists()).toBe(true)
+      const { container } = renderLGraphNode({ nodeData: mockNodeData })
+      expect(
+        // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+        container.querySelector('[role="button"][aria-label]')
+      ).not.toBeNull()
     })
   })
 
@@ -305,14 +320,16 @@ describe('LGraphNode', () => {
         isSubgraphNode: () => false
       }
 
-      const wrapper = mountLGraphNode({ nodeData: mockNodeData })
+      const { container } = renderLGraphNode({ nodeData: mockNodeData })
+      const nodeEl = getNodeRoot(container)
+      // eslint-disable-next-line testing-library/no-node-access
+      const parent = nodeEl.parentElement!
 
       const parentListener = vi.fn()
-      const parent = wrapper.element.parentElement
       expect(parent).not.toBeNull()
-      parent!.addEventListener('drop', parentListener)
+      parent.addEventListener('drop', parentListener)
 
-      wrapper.element.dispatchEvent(
+      nodeEl.dispatchEvent(
         new Event('drop', { bubbles: true, cancelable: true })
       )
 
@@ -328,14 +345,16 @@ describe('LGraphNode', () => {
         isSubgraphNode: () => false
       }
 
-      const wrapper = mountLGraphNode({ nodeData: mockNodeData })
+      const { container } = renderLGraphNode({ nodeData: mockNodeData })
+      const nodeEl = getNodeRoot(container)
+      // eslint-disable-next-line testing-library/no-node-access
+      const parent = nodeEl.parentElement!
 
       const parentListener = vi.fn()
-      const parent = wrapper.element.parentElement
       expect(parent).not.toBeNull()
-      parent!.addEventListener('drop', parentListener)
+      parent.addEventListener('drop', parentListener)
 
-      wrapper.element.dispatchEvent(
+      nodeEl.dispatchEvent(
         new Event('drop', { bubbles: true, cancelable: true })
       )
 
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
index 24f22b25aa..e1af588e57 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -33,7 +33,7 @@
     @contextmenu="handleContextMenu"
     @dragover.prevent="handleDragOver"
     @dragleave="handleDragLeave"
-    @drop.prevent="handleDrop"
+    @drop="handleDrop"
   >
     <!-- Selection/Execution Outline Overlay -->
     <AppOutput
@@ -284,6 +284,7 @@ import { useTelemetry } from '@/platform/telemetry'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+import { useGLSLPreview } from '@/renderer/glsl/useGLSLPreview'
 import { usePromotedPreviews } from '@/composables/node/usePromotedPreviews'
 import NodeBadges from '@/renderer/extensions/vueNodes/components/NodeBadges.vue'
 import { LayoutSource } from '@/renderer/core/layout/types'
@@ -730,6 +731,8 @@ const lgraphNode = computed(() => {
 // reaching through lgraphNode for promoted preview resolution.
 const { promotedPreviews } = usePromotedPreviews(lgraphNode)
 
+useGLSLPreview(lgraphNode)
+
 const showAdvancedInputsButton = computed(() => {
   const node = lgraphNode.value
   if (!node) return false
@@ -834,6 +837,9 @@ function handleDrop(event: DragEvent) {
   if (!node?.onDragDrop) return
 
   const handled = node.onDragDrop(event)
-  if (handled === true) event.stopPropagation()
+  if (handled === true) {
+    event.preventDefault()
+    event.stopPropagation()
+  }
 }
 </script>
diff --git a/src/renderer/extensions/vueNodes/components/LivePreview.test.ts b/src/renderer/extensions/vueNodes/components/LivePreview.test.ts
index 9f997f030c..2b57f523be 100644
--- a/src/renderer/extensions/vueNodes/components/LivePreview.test.ts
+++ b/src/renderer/extensions/vueNodes/components/LivePreview.test.ts
@@ -1,5 +1,5 @@
 import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
+import { fireEvent, render, screen } from '@testing-library/vue'
 import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
@@ -26,8 +26,8 @@ describe('LivePreview', () => {
     imageUrl: '/api/view?filename=test_sample.png&type=temp'
   }
 
-  const mountLivePreview = (props = {}) => {
-    return mount(LivePreview, {
+  function renderLivePreview(props = {}) {
+    return render(LivePreview, {
       props: { ...defaultProps, ...props },
       global: {
         plugins: [
@@ -44,91 +44,88 @@ describe('LivePreview', () => {
   }
 
   it('renders preview when imageUrl provided', () => {
-    const wrapper = mountLivePreview()
+    renderLivePreview()
 
-    expect(wrapper.find('img').exists()).toBe(true)
-    expect(wrapper.find('img').attributes('src')).toBe(defaultProps.imageUrl)
+    const img = screen.getByRole('img')
+    expect(img).toHaveAttribute('src', defaultProps.imageUrl)
   })
 
   it('does not render when no imageUrl provided', () => {
-    const wrapper = mountLivePreview({ imageUrl: null })
+    const { container } = renderLivePreview({ imageUrl: null })
 
-    expect(wrapper.find('img').exists()).toBe(false)
-    expect(wrapper.text()).toBe('')
+    expect(screen.queryByRole('img')).not.toBeInTheDocument()
+    expect(container.textContent).toBe('')
   })
 
   it('displays calculating dimensions text initially', () => {
-    const wrapper = mountLivePreview()
+    renderLivePreview()
 
-    expect(wrapper.text()).toContain('Calculating dimensions')
+    screen.getByText('Calculating dimensions')
   })
 
   it('has proper accessibility attributes', () => {
-    const wrapper = mountLivePreview()
+    renderLivePreview()
 
-    const img = wrapper.find('img')
-    expect(img.attributes('alt')).toBe('Live sampling preview')
+    expect(screen.getByRole('img')).toHaveAttribute(
+      'alt',
+      'Live sampling preview'
+    )
   })
 
   it('handles image load event', async () => {
-    const wrapper = mountLivePreview()
-    const img = wrapper.find('img')
+    const { container } = renderLivePreview()
+    const img = screen.getByRole('img')
 
-    // Mock the naturalWidth and naturalHeight properties on the img element
-    Object.defineProperty(img.element, 'naturalWidth', {
+    Object.defineProperty(img, 'naturalWidth', {
       writable: false,
       value: 512
     })
-    Object.defineProperty(img.element, 'naturalHeight', {
+    Object.defineProperty(img, 'naturalHeight', {
       writable: false,
       value: 512
     })
 
-    // Trigger the load event
-    await img.trigger('load')
+    await fireEvent.load(img)
+    await nextTick()
 
-    expect(wrapper.text()).toContain('512 x 512')
+    expect(container.textContent).toContain('512 x 512')
   })
 
   it('handles image error state', async () => {
-    const wrapper = mountLivePreview()
-    const img = wrapper.find('img')
+    renderLivePreview()
+    const img = screen.getByRole('img')
 
-    // Trigger the error event
-    await img.trigger('error')
+    await fireEvent.error(img)
+    await nextTick()
 
-    // Check that the image is hidden and error content is shown
-    expect(wrapper.find('img').exists()).toBe(false)
-    expect(wrapper.text()).toContain('Image failed to load')
+    expect(screen.queryByRole('img')).not.toBeInTheDocument()
+    screen.getByText('Image failed to load')
   })
 
   it('resets state when imageUrl changes', async () => {
-    const wrapper = mountLivePreview()
-    const img = wrapper.find('img')
+    const { container, rerender } = renderLivePreview()
+    const img = screen.getByRole('img')
 
-    // Set error state via event
-    await img.trigger('error')
-    expect(wrapper.text()).toContain('Error loading image')
+    await fireEvent.error(img)
+    await nextTick()
+    expect(container.textContent).toContain('Error loading image')
 
-    // Change imageUrl prop
-    await wrapper.setProps({ imageUrl: '/new-image.png' })
+    await rerender({ imageUrl: '/new-image.png' })
     await nextTick()
 
-    // State should be reset - dimensions text should show calculating
-    expect(wrapper.text()).toContain('Calculating dimensions')
-    expect(wrapper.text()).not.toContain('Error loading image')
+    expect(container.textContent).toContain('Calculating dimensions')
+    expect(container.textContent).not.toContain('Error loading image')
   })
 
   it('shows error state when image fails to load', async () => {
-    const wrapper = mountLivePreview()
-    const img = wrapper.find('img')
+    const { container } = renderLivePreview()
+    const img = screen.getByRole('img')
 
-    // Trigger error event
-    await img.trigger('error')
+    await fireEvent.error(img)
+    await nextTick()
 
-    // Should show error state instead of image
-    expect(wrapper.find('img').exists()).toBe(false)
-    expect(wrapper.text()).toContain('Image failed to load')
-    expect(wrapper.text()).toContain('Error loading image')
+    expect(screen.queryByRole('img')).not.toBeInTheDocument()
+    screen.getByText('Image failed to load')
+    expect(container.textContent).toContain('Error loading image')
   })
 })
diff --git a/src/renderer/extensions/vueNodes/components/NodeContent.vue b/src/renderer/extensions/vueNodes/components/NodeContent.vue
index 7bed771916..f87197682b 100644
--- a/src/renderer/extensions/vueNodes/components/NodeContent.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeContent.vue
@@ -2,7 +2,10 @@
   <div v-if="renderError" class="node-error p-2 text-sm text-red-500">
     {{ st('nodeErrors.content', 'Node Content Error') }}
   </div>
-  <div v-else class="lg-node-content flex flex-auto grow flex-col">
+  <div
+    v-else
+    class="lg-node-content flex flex-auto grow flex-col [content-visibility:auto]"
+  >
     <!-- Default slot for custom content -->
     <slot>
       <VideoPreview
diff --git a/src/renderer/extensions/vueNodes/components/NodeHeader.test.ts b/src/renderer/extensions/vueNodes/components/NodeHeader.test.ts
index e5bb312246..c0912e7a14 100644
--- a/src/renderer/extensions/vueNodes/components/NodeHeader.test.ts
+++ b/src/renderer/extensions/vueNodes/components/NodeHeader.test.ts
@@ -1,9 +1,11 @@
 import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
+import { fireEvent, render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { setActivePinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import InputText from 'primevue/inputtext'
 import { describe, expect, it, vi } from 'vitest'
+import type { ComponentProps } from 'vue-component-type-helpers'
 import { createI18n } from 'vue-i18n'
 
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
@@ -83,7 +85,7 @@ const setupMockStores = () => {
   return { settingStore, nodeDefStore, pinia }
 }
 
-const createMountConfig = () => {
+const createGlobalConfig = () => {
   const i18n = createI18n({
     legacy: false,
     locale: 'en',
@@ -92,154 +94,157 @@ const createMountConfig = () => {
 
   const { pinia } = setupMockStores()
 
+  const tooltipDirective = {
+    mounted: vi.fn(),
+    updated: vi.fn(),
+    unmounted: vi.fn()
+  }
+
   return {
+    tooltipDirective,
     global: {
       plugins: [PrimeVue, i18n, pinia],
       components: { InputText },
       directives: {
-        tooltip: {
-          mounted: vi.fn(),
-          updated: vi.fn(),
-          unmounted: vi.fn()
-        }
+        tooltip: tooltipDirective
       }
     }
   }
 }
 
-const mountHeader = (
-  props?: Partial<InstanceType<typeof NodeHeader>['$props']>
-) => {
-  const config = createMountConfig()
+const renderHeader = (props?: Partial<ComponentProps<typeof NodeHeader>>) => {
+  const { global, tooltipDirective } = createGlobalConfig()
+  const onCollapse = vi.fn()
+  const onUpdateTitle = vi.fn()
+  const user = userEvent.setup()
 
-  return mount(NodeHeader, {
-    ...config,
+  const result = render(NodeHeader, {
+    global,
     props: {
       nodeData: makeNodeData(),
       collapsed: false,
+      onCollapse,
+      'onUpdate:title': onUpdateTitle,
       ...props
     }
   })
+
+  return { ...result, user, onCollapse, onUpdateTitle, tooltipDirective }
 }
 
 describe('NodeHeader.vue', () => {
   it('emits collapse when collapse button is clicked', async () => {
-    const wrapper = mountHeader()
-    const btn = wrapper.get('[data-testid="node-collapse-button"]')
-    await btn.trigger('click')
-    expect(wrapper.emitted('collapse')).toBeTruthy()
+    const { user, onCollapse } = renderHeader()
+    await user.click(screen.getByTestId('node-collapse-button'))
+    expect(onCollapse).toHaveBeenCalled()
   })
 
   it('shows the current node title and updates when prop changes', async () => {
-    const wrapper = mountHeader({
+    const { rerender } = renderHeader({
       nodeData: makeNodeData({ title: 'Original' })
     })
-    // Title visible via EditableText in view mode
-    expect(wrapper.get('[data-testid="node-title"]').text()).toContain(
-      'Original'
-    )
+    expect(screen.getByTestId('node-title').textContent).toContain('Original')
 
-    // Update prop title; should sync displayTitle
-    await wrapper.setProps({ nodeData: makeNodeData({ title: 'Updated' }) })
-    expect(wrapper.get('[data-testid="node-title"]').text()).toContain(
-      'Updated'
-    )
+    await rerender({
+      nodeData: makeNodeData({ title: 'Updated' }),
+      collapsed: false
+    })
+    expect(screen.getByTestId('node-title').textContent).toContain('Updated')
   })
 
   it('allows renaming via double click and emits update:title on confirm', async () => {
-    const wrapper = mountHeader({ nodeData: makeNodeData({ title: 'Start' }) })
+    const { user, onUpdateTitle } = renderHeader({
+      nodeData: makeNodeData({ title: 'Start' })
+    })
 
     // Enter edit mode
-    await wrapper.get('[data-testid="node-header-1"]').trigger('dblclick')
+    // eslint-disable-next-line testing-library/prefer-user-event
+    await fireEvent.dblClick(screen.getByTestId('node-header-1'))
 
-    // Edit and confirm (EditableText uses blur or enter to emit)
-    const input = wrapper.get('[data-testid="node-title-input"]')
-    await input.setValue('My Custom Sampler')
-    await input.trigger('keydown.enter')
-    await input.trigger('blur')
+    // Edit and confirm
+    const input = screen.getByTestId('node-title-input')
+    await user.clear(input)
+    await user.type(input, 'My Custom Sampler')
+    await user.keyboard('{Enter}')
 
-    // NodeHeader should emit update:title with trimmed value
-    const e = wrapper.emitted('update:title')
-    expect(e).toBeTruthy()
-    expect(e?.[0]).toEqual(['My Custom Sampler'])
+    expect(onUpdateTitle).toHaveBeenCalledWith('My Custom Sampler')
   })
 
   it('cancels rename on escape and keeps previous title', async () => {
-    const wrapper = mountHeader({ nodeData: makeNodeData({ title: 'KeepMe' }) })
+    const { user, onUpdateTitle } = renderHeader({
+      nodeData: makeNodeData({ title: 'KeepMe' })
+    })
 
-    await wrapper.get('[data-testid="node-header-1"]').trigger('dblclick')
-    const input = wrapper.get('[data-testid="node-title-input"]')
-    await input.setValue('Should Not Save')
-    await input.trigger('keydown.escape')
+    // eslint-disable-next-line testing-library/prefer-user-event
+    await fireEvent.dblClick(screen.getByTestId('node-header-1'))
+    const input = screen.getByTestId('node-title-input')
+    await user.clear(input)
+    await user.type(input, 'Should Not Save')
+    await user.keyboard('{Escape}')
 
-    // Should not emit update:title
-    expect(wrapper.emitted('update:title')).toBeFalsy()
+    expect(onUpdateTitle).not.toHaveBeenCalled()
 
-    // Title remains the original
-    expect(wrapper.get('[data-testid="node-title"]').text()).toContain('KeepMe')
+    expect(screen.getByTestId('node-title').textContent).toContain('KeepMe')
   })
 
   it('renders correct chevron icon based on collapsed prop', async () => {
-    const wrapper = mountHeader({ collapsed: false })
-    const expandedIcon = wrapper.get('i')
-    expect(expandedIcon.classes()).not.toContain('-rotate-90')
+    const { rerender } = renderHeader({ collapsed: false })
+    const collapseButton = screen.getByTestId('node-collapse-button')
+    // eslint-disable-next-line testing-library/no-node-access
+    const expandedIcon = collapseButton.querySelector('i')!
+    expect(expandedIcon.classList).not.toContain('-rotate-90')
 
-    await wrapper.setProps({ collapsed: true })
-    const collapsedIcon = wrapper.get('i')
-    expect(collapsedIcon.classes()).toContain('-rotate-90')
+    await rerender({
+      nodeData: makeNodeData(),
+      collapsed: true
+    })
+    // eslint-disable-next-line testing-library/no-node-access
+    const collapsedIcon = collapseButton.querySelector('i')!
+    expect(collapsedIcon.classList).toContain('-rotate-90')
   })
 
   describe('Tooltips', () => {
     it('applies tooltip directive to node title with correct configuration', () => {
-      const wrapper = mountHeader({
+      const { tooltipDirective } = renderHeader({
         nodeData: makeNodeData({ type: 'KSampler' })
       })
 
-      const titleElement = wrapper.find('[data-testid="node-title"]')
-      expect(titleElement.exists()).toBe(true)
-
-      // Check that v-tooltip directive was applied
-      const directive = wrapper.vm.$el.querySelector(
-        '[data-testid="node-title"]'
-      )
-      expect(directive).toBeTruthy()
+      expect(screen.getByTestId('node-title')).toBeInTheDocument()
+      expect(tooltipDirective.mounted).toHaveBeenCalled()
     })
 
     it('disables tooltip when editing is active', async () => {
-      const wrapper = mountHeader({
+      const { tooltipDirective } = renderHeader({
         nodeData: makeNodeData({ type: 'KSampler' })
       })
 
-      // Enter edit mode
-      await wrapper.get('[data-testid="node-header-1"]').trigger('dblclick')
+      tooltipDirective.updated.mockClear()
 
-      // Tooltip should be disabled during editing
-      const titleElement = wrapper.find('[data-testid="node-title"]')
-      expect(titleElement.exists()).toBe(true)
+      // eslint-disable-next-line testing-library/prefer-user-event
+      await fireEvent.dblClick(screen.getByTestId('node-header-1'))
+
+      expect(tooltipDirective.updated).toHaveBeenCalled()
     })
 
     it('creates tooltip configuration when component mounts', () => {
-      const wrapper = mountHeader({
+      const { tooltipDirective } = renderHeader({
         nodeData: makeNodeData({ type: 'KSampler' })
       })
 
-      // Verify tooltip directive is applied to the title element
-      const titleElement = wrapper.find('[data-testid="node-title"]')
-      expect(titleElement.exists()).toBe(true)
-
-      // The tooltip composable should be initialized
-      expect(wrapper.vm).toBeDefined()
+      expect(tooltipDirective.mounted).toHaveBeenCalled()
+      const mountedCall = tooltipDirective.mounted.mock.calls[0]
+      const binding = mountedCall[1]
+      expect(binding.value).toBeDefined()
     })
 
     it('uses tooltip container from provide/inject', () => {
-      const wrapper = mountHeader({
+      const { tooltipDirective } = renderHeader({
         nodeData: makeNodeData({ type: 'KSampler' })
       })
 
-      expect(wrapper.exists()).toBe(true)
-      // Container should be provided through inject
-      const titleElement = wrapper.find('[data-testid="node-title"]')
-      expect(titleElement.exists()).toBe(true)
+      expect(tooltipDirective.mounted).toHaveBeenCalled()
+      const mountedEl = tooltipDirective.mounted.mock.calls[0][0]
+      expect(mountedEl).toBe(screen.getByTestId('node-title'))
     })
   })
 })
diff --git a/src/renderer/extensions/vueNodes/components/NodeSlots.test.ts b/src/renderer/extensions/vueNodes/components/NodeSlots.test.ts
index a8991f9f8f..111081f501 100644
--- a/src/renderer/extensions/vueNodes/components/NodeSlots.test.ts
+++ b/src/renderer/extensions/vueNodes/components/NodeSlots.test.ts
@@ -1,6 +1,6 @@
 /* eslint-disable vue/one-component-per-file */
 import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
+import { render } from '@testing-library/vue'
 import { describe, expect, it } from 'vitest'
 import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
@@ -76,13 +76,13 @@ const OutputSlotStub = defineComponent({
   `
 })
 
-const mountSlots = (nodeData: VueNodeData, readonly = false) => {
+const mountSlots = (nodeData: VueNodeData) => {
   const i18n = createI18n({
     legacy: false,
     locale: 'en',
     messages: { en: enMessages }
   })
-  return mount(NodeSlots, {
+  return render(NodeSlots, {
     global: {
       plugins: [i18n, createTestingPinia({ stubActions: false })],
       stubs: {
@@ -90,14 +90,13 @@ const mountSlots = (nodeData: VueNodeData, readonly = false) => {
         OutputSlot: OutputSlotStub
       }
     },
-    props: { nodeData, readonly }
+    props: { nodeData }
   })
 }
 
 describe('NodeSlots.vue', () => {
-  it('filters out inputs with widget property and maps indexes correctly', (context) => {
-    context.skip('Filtering not working as expected, needs diagnosis')
-    // Two inputs without widgets (object and string) and one with widget (filtered)
+  it('filters out inputs with widget property and maps indexes correctly', () => {
+    // Two inputs without widgets and one with widget (filtered out)
     const inputObjNoWidget: INodeInputSlot = {
       name: 'objNoWidget',
       type: 'number',
@@ -111,15 +110,26 @@ describe('NodeSlots.vue', () => {
       widget: { name: 'objWithWidget' },
       link: null
     }
-    const inputs: INodeInputSlot[] = [inputObjNoWidget, inputObjWithWidget]
+    const inputStringNoWidget: INodeInputSlot = {
+      name: 'stringInput',
+      type: 'string',
+      boundingRect: [0, 0, 0, 0],
+      link: null
+    }
+    const inputs: INodeInputSlot[] = [
+      inputObjNoWidget,
+      inputObjWithWidget,
+      inputStringNoWidget
+    ]
 
-    const wrapper = mountSlots(makeNodeData({ inputs }))
+    const { container } = mountSlots(makeNodeData({ inputs }))
 
-    const inputEls = wrapper
-      .findAll('.stub-input-slot')
-      .map((w) => w.element as HTMLElement)
+    const inputEls = Array.from(
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      container.querySelectorAll('.stub-input-slot')
+    ) as HTMLElement[]
     // Should filter out the widget-backed input; expect 2 inputs rendered
-    expect(inputEls.length).toBe(2)
+    expect(inputEls).toHaveLength(2)
 
     // Verify expected tuple of {index, name, nodeId}
     const info = inputEls.map((el) => ({
@@ -137,18 +147,18 @@ describe('NodeSlots.vue', () => {
         type: 'number',
         readonly: false
       },
-      // string input is converted to object with default type 'any'
       {
-        index: 1,
+        index: 2,
         name: 'stringInput',
         nodeId: '123',
-        type: 'any',
+        type: 'string',
         readonly: false
       }
     ])
 
     // Ensure widget-backed input was indeed filtered out
-    expect(wrapper.find('[data-name="objWithWidget"]').exists()).toBe(false)
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    expect(container.querySelector('[data-name="objWithWidget"]')).toBeNull()
   })
 
   it('maps outputs and passes correct indexes', () => {
@@ -166,12 +176,13 @@ describe('NodeSlots.vue', () => {
     }
     const outputs: INodeOutputSlot[] = [outputObj, outputObjB]
 
-    const wrapper = mountSlots(makeNodeData({ outputs }))
-    const outputEls = wrapper
-      .findAll('.stub-output-slot')
-      .map((w) => w.element as HTMLElement)
+    const { container } = mountSlots(makeNodeData({ outputs }))
+    const outputEls = Array.from(
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      container.querySelectorAll('.stub-output-slot')
+    ) as HTMLElement[]
 
-    expect(outputEls.length).toBe(2)
+    expect(outputEls).toHaveLength(2)
     const outInfo = outputEls.map((el) => ({
       index: Number(el.dataset.index),
       name: el.dataset.name ?? '',
@@ -187,8 +198,10 @@ describe('NodeSlots.vue', () => {
   })
 
   it('renders nothing when there are no inputs/outputs', () => {
-    const wrapper = mountSlots(makeNodeData({ inputs: [], outputs: [] }))
-    expect(wrapper.findAll('.stub-input-slot').length).toBe(0)
-    expect(wrapper.findAll('.stub-output-slot').length).toBe(0)
+    const { container } = mountSlots(makeNodeData({ inputs: [], outputs: [] }))
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    expect(container.querySelectorAll('.stub-input-slot')).toHaveLength(0)
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    expect(container.querySelectorAll('.stub-output-slot')).toHaveLength(0)
   })
 })
diff --git a/src/renderer/extensions/vueNodes/components/NodeWidgets.test.ts b/src/renderer/extensions/vueNodes/components/NodeWidgets.test.ts
index 173ee0f3f3..83e912cbc9 100644
--- a/src/renderer/extensions/vueNodes/components/NodeWidgets.test.ts
+++ b/src/renderer/extensions/vueNodes/components/NodeWidgets.test.ts
@@ -1,5 +1,7 @@
+/* eslint-disable testing-library/no-container */
+/* eslint-disable testing-library/no-node-access */
 import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
+import { render } from '@testing-library/vue'
 import { setActivePinia } from 'pinia'
 import { nextTick } from 'vue'
 import { describe, expect, it, vi } from 'vitest'
@@ -8,10 +10,8 @@ import type {
   SafeWidgetData,
   VueNodeData
 } from '@/composables/graph/useGraphNodeManager'
-import { usePromotionStore } from '@/stores/promotionStore'
-import { useWidgetValueStore } from '@/stores/widgetValueStore'
-
 import NodeWidgets from '@/renderer/extensions/vueNodes/components/NodeWidgets.vue'
+import { useWidgetValueStore } from '@/stores/widgetValueStore'
 
 vi.mock('@/renderer/core/canvas/canvasStore', () => ({
   useCanvasStore: () => ({
@@ -25,6 +25,24 @@ vi.mock('@/renderer/core/canvas/canvasStore', () => ({
   })
 }))
 
+const WidgetStub = {
+  name: 'WidgetStub',
+  props: ['widget', 'nodeId', 'nodeType', 'modelValue'],
+  template:
+    '<div class="widget-stub" :data-node-type="nodeType">{{ nodeType }}</div>'
+}
+
+vi.mock(
+  '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry',
+  async (importOriginal) => {
+    const original = await importOriginal()
+    return {
+      ...(original as Record<string, unknown>),
+      getComponent: () => WidgetStub
+    }
+  }
+)
+
 describe('NodeWidgets', () => {
   const createMockWidget = (
     overrides: Partial<SafeWidgetData> = {}
@@ -56,19 +74,18 @@ describe('NodeWidgets', () => {
     outputs: []
   })
 
-  const mountComponent = (nodeData?: VueNodeData, setupStores?: () => void) => {
+  function renderComponent(nodeData?: VueNodeData, setupStores?: () => void) {
     const pinia = createTestingPinia({ stubActions: false })
     setActivePinia(pinia)
     setupStores?.()
 
-    return mount(NodeWidgets, {
+    return render(NodeWidgets, {
       props: {
         nodeData
       },
       global: {
         plugins: [pinia],
         stubs: {
-          // Stub InputSlot to avoid complex slot registration dependencies
           InputSlot: true
         },
         mocks: {
@@ -78,79 +95,34 @@ describe('NodeWidgets', () => {
     })
   }
 
-  const getBorderStyles = (wrapper: ReturnType<typeof mount>) =>
-    (
-      wrapper.vm as unknown as { processedWidgets: unknown[] }
-    ).processedWidgets.map(
-      (entry) =>
-        (
-          entry as {
-            simplified: {
-              borderStyle?: string
-            }
-          }
-        ).simplified.borderStyle
-    )
-
   describe('node-type prop passing', () => {
     it('passes node type to widget components', () => {
       const widget = createMockWidget()
       const nodeData = createMockNodeData('CheckpointLoaderSimple', [widget])
-      const wrapper = mountComponent(nodeData)
+      const { container } = renderComponent(nodeData)
 
-      // Find the dynamically rendered widget component
-      const widgetComponent = wrapper.find('.lg-node-widget')
-      expect(widgetComponent.exists()).toBe(true)
-
-      // Verify node-type prop is passed
-      const component = widgetComponent.findComponent({ name: 'WidgetSelect' })
-      if (component.exists()) {
-        expect(component.props('nodeType')).toBe('CheckpointLoaderSimple')
-      }
+      const stub = container.querySelector('.widget-stub')
+      expect(stub).not.toBeNull()
+      expect(stub!.getAttribute('data-node-type')).toBe(
+        'CheckpointLoaderSimple'
+      )
     })
 
-    it('passes empty string when nodeData is undefined', () => {
-      const wrapper = mountComponent(undefined)
+    it('renders no widgets when nodeData is undefined', () => {
+      const { container } = renderComponent(undefined)
 
-      // No widgets should be rendered
-      const widgetComponents = wrapper.findAll('.lg-node-widget')
-      expect(widgetComponents).toHaveLength(0)
+      expect(container.querySelectorAll('.widget-stub')).toHaveLength(0)
     })
 
-    it('passes empty string when nodeData.type is undefined', () => {
+    it('passes empty string when nodeData.type is empty', () => {
       const widget = createMockWidget()
       const nodeData = createMockNodeData('', [widget])
-      const wrapper = mountComponent(nodeData)
+      const { container } = renderComponent(nodeData)
 
-      const widgetComponent = wrapper.find('.lg-node-widget')
-      if (widgetComponent.exists()) {
-        const component = widgetComponent.findComponent({
-          name: 'WidgetSelect'
-        })
-        if (component.exists()) {
-          expect(component.props('nodeType')).toBe('')
-        }
-      }
+      const stub = container.querySelector('.widget-stub')
+      expect(stub).not.toBeNull()
+      expect(stub!.getAttribute('data-node-type')).toBe('')
     })
-
-    it.for(['CheckpointLoaderSimple', 'LoraLoader', 'VAELoader', 'KSampler'])(
-      'passes correct node type: %s',
-      (nodeType) => {
-        const widget = createMockWidget()
-        const nodeData = createMockNodeData(nodeType, [widget])
-        const wrapper = mountComponent(nodeData)
-
-        const widgetComponent = wrapper.find('.lg-node-widget')
-        expect(widgetComponent.exists()).toBe(true)
-
-        const component = widgetComponent.findComponent({
-          name: 'WidgetSelect'
-        })
-        if (component.exists()) {
-          expect(component.props('nodeType')).toBe(nodeType)
-        }
-      }
-    )
   })
 
   it('deduplicates widgets with identical render identity while keeping distinct promoted sources', () => {
@@ -184,9 +156,9 @@ describe('NodeWidgets', () => {
       distinct
     ])
 
-    const wrapper = mountComponent(nodeData)
+    const { container } = renderComponent(nodeData)
 
-    expect(wrapper.findAll('.lg-node-widget')).toHaveLength(2)
+    expect(container.querySelectorAll('.lg-node-widget')).toHaveLength(2)
   })
 
   it('prefers a visible duplicate over a hidden duplicate when identities collide', () => {
@@ -213,9 +185,9 @@ describe('NodeWidgets', () => {
       visibleDuplicate
     ])
 
-    const wrapper = mountComponent(nodeData)
+    const { container } = renderComponent(nodeData)
 
-    expect(wrapper.findAll('.lg-node-widget')).toHaveLength(1)
+    expect(container.querySelectorAll('.lg-node-widget')).toHaveLength(1)
   })
 
   it('does not deduplicate entries that share names but have different widget types', () => {
@@ -240,9 +212,9 @@ describe('NodeWidgets', () => {
       comboWidget
     ])
 
-    const wrapper = mountComponent(nodeData)
+    const { container } = renderComponent(nodeData)
 
-    expect(wrapper.findAll('.lg-node-widget')).toHaveLength(2)
+    expect(container.querySelectorAll('.lg-node-widget')).toHaveLength(2)
   })
 
   it('keeps unresolved same-name promoted entries distinct by source execution identity', () => {
@@ -269,9 +241,9 @@ describe('NodeWidgets', () => {
       secondTransientEntry
     ])
 
-    const wrapper = mountComponent(nodeData)
+    const { container } = renderComponent(nodeData)
 
-    expect(wrapper.findAll('.lg-node-widget')).toHaveLength(2)
+    expect(container.querySelectorAll('.lg-node-widget')).toHaveLength(2)
   })
 
   it('does not deduplicate promoted duplicates that differ only by disambiguating source identity', () => {
@@ -296,57 +268,9 @@ describe('NodeWidgets', () => {
       firstPromoted,
       secondPromoted
     ])
-    const wrapper = mountComponent(nodeData)
+    const { container } = renderComponent(nodeData)
 
-    expect(wrapper.findAll('.lg-node-widget')).toHaveLength(2)
-  })
-
-  it('applies promoted border styling to intermediate promoted widgets using host node identity', async () => {
-    const promotedWidget = createMockWidget({
-      name: 'text',
-      type: 'combo',
-      nodeId: 'inner-subgraph:1',
-      storeNodeId: 'inner-subgraph:1',
-      storeName: 'text',
-      slotName: 'text'
-    })
-    const nodeData = createMockNodeData('SubgraphNode', [promotedWidget], '3')
-    const wrapper = mountComponent(nodeData, () => {
-      usePromotionStore().promote('graph-test', '4', {
-        sourceNodeId: '3',
-        sourceWidgetName: 'text',
-        disambiguatingSourceNodeId: '1'
-      })
-    })
-    await nextTick()
-    const borderStyles = getBorderStyles(wrapper)
-
-    expect(borderStyles.some((style) => style?.includes('promoted'))).toBe(true)
-  })
-
-  it('does not apply promoted border styling to outermost widgets', async () => {
-    const promotedWidget = createMockWidget({
-      name: 'text',
-      type: 'combo',
-      nodeId: 'inner-subgraph:1',
-      storeNodeId: 'inner-subgraph:1',
-      storeName: 'text',
-      slotName: 'text'
-    })
-    const nodeData = createMockNodeData('SubgraphNode', [promotedWidget], '4')
-    const wrapper = mountComponent(nodeData, () => {
-      usePromotionStore().promote('graph-test', '4', {
-        sourceNodeId: '3',
-        sourceWidgetName: 'text',
-        disambiguatingSourceNodeId: '1'
-      })
-    })
-    await nextTick()
-    const borderStyles = getBorderStyles(wrapper)
-
-    expect(borderStyles.some((style) => style?.includes('promoted'))).toBe(
-      false
-    )
+    expect(container.querySelectorAll('.lg-node-widget')).toHaveLength(2)
   })
 
   it('hides widgets when merged store options mark them hidden', async () => {
@@ -358,7 +282,7 @@ describe('NodeWidgets', () => {
       })
     ])
 
-    const wrapper = mountComponent(nodeData)
+    const { container } = renderComponent(nodeData)
     const widgetValueStore = useWidgetValueStore()
     widgetValueStore.registerWidget('graph-test', {
       nodeId: 'test_node',
@@ -373,7 +297,7 @@ describe('NodeWidgets', () => {
 
     await nextTick()
 
-    expect(wrapper.findAll('.lg-node-widget')).toHaveLength(0)
+    expect(container.querySelectorAll('.lg-node-widget')).toHaveLength(0)
   })
 
   it('keeps AppInput ids mapped to node identity for selection', () => {
@@ -382,9 +306,32 @@ describe('NodeWidgets', () => {
       createMockWidget({ nodeId: 'test_node', name: 'seed_b', type: 'text' })
     ])
 
-    const wrapper = mountComponent(nodeData)
-    const appInputWrappers = wrapper.findAllComponents({ name: 'AppInput' })
-    const ids = appInputWrappers.map((component) => component.props('id'))
+    const { container } = render(NodeWidgets, {
+      props: { nodeData },
+      global: {
+        plugins: [
+          (() => {
+            const pinia = createTestingPinia({ stubActions: false })
+            setActivePinia(pinia)
+            return pinia
+          })()
+        ],
+        stubs: {
+          InputSlot: true,
+          AppInput: {
+            props: ['id', 'name', 'enable'],
+            template: '<div class="app-input-stub" :data-id="id"><slot /></div>'
+          }
+        },
+        mocks: {
+          $t: (key: string) => key
+        }
+      }
+    })
+    const appInputElements = container.querySelectorAll('.app-input-stub')
+    const ids = Array.from(appInputElements).map((el) =>
+      el.getAttribute('data-id')
+    )
 
     expect(ids).toStrictEqual(['test_node', 'test_node'])
   })
diff --git a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
index 753599a3e9..12fa775be4 100644
--- a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
@@ -80,56 +80,16 @@
 </template>
 
 <script setup lang="ts">
-import type { TooltipOptions } from 'primevue'
-import { computed, onErrorCaptured, ref, toValue } from 'vue'
-import type { Component } from 'vue'
+import { onErrorCaptured, ref } from 'vue'
 
-import type {
-  SafeWidgetData,
-  VueNodeData,
-  WidgetSlotMetadata
-} from '@/composables/graph/useGraphNodeManager'
-import { useAppMode } from '@/composables/useAppMode'
-import { showNodeOptions } from '@/composables/graph/useMoreOptionsMenu'
+import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { st } from '@/i18n'
-import type { IWidgetOptions } from '@/lib/litegraph/src/types/widgets'
-import { LGraphEventMode } from '@/lib/litegraph/src/types/globalEnums'
-import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import AppInput from '@/renderer/extensions/linearMode/AppInput.vue'
-import { useNodeTooltips } from '@/renderer/extensions/vueNodes/composables/useNodeTooltips'
-import { useNodeEventHandlers } from '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers'
 import { useNodeZIndex } from '@/renderer/extensions/vueNodes/composables/useNodeZIndex'
-import WidgetDOM from '@/renderer/extensions/vueNodes/widgets/components/WidgetDOM.vue'
-// Import widget components directly
-import WidgetLegacy from '@/renderer/extensions/vueNodes/widgets/components/WidgetLegacy.vue'
-import {
-  getComponent,
-  shouldExpand,
-  shouldRenderAsVue
-} from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
-import { nodeTypeValidForApp } from '@/stores/appModeStore'
-import type { WidgetState } from '@/stores/widgetValueStore'
-import {
-  stripGraphPrefix,
-  useWidgetValueStore
-} from '@/stores/widgetValueStore'
-import { usePromotionStore } from '@/stores/promotionStore'
-import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
-import { useExecutionErrorStore } from '@/stores/executionErrorStore'
-import type {
-  LinkedUpstreamInfo,
-  SimplifiedWidget,
-  WidgetValue
-} from '@/types/simplifiedWidget'
+import { useProcessedWidgets } from '@/renderer/extensions/vueNodes/composables/useProcessedWidgets'
 import { cn } from '@/utils/tailwindUtil'
-import {
-  getExecutionIdFromNodeData,
-  getLocatorIdFromNodeData
-} from '@/utils/graphTraversalUtil'
-import { app } from '@/scripts/app'
 
 import InputSlot from './InputSlot.vue'
 
@@ -141,12 +101,7 @@ const { nodeData } = defineProps<NodeWidgetsProps>()
 
 const { shouldHandleNodePointerEvents, forwardEventToCanvas } =
   useCanvasInteractions()
-const { isSelectInputsMode } = useAppMode()
-const canvasStore = useCanvasStore()
 const { bringNodeToFront } = useNodeZIndex()
-const promotionStore = usePromotionStore()
-const executionErrorStore = useExecutionErrorStore()
-const missingModelStore = useMissingModelStore()
 
 function handleWidgetPointerEvent(event: PointerEvent) {
   if (shouldHandleNodePointerEvents.value) return
@@ -160,8 +115,6 @@ function handleBringToFront() {
   }
 }
 
-const { handleNodeRightClick } = useNodeEventHandlers()
-
 // Error boundary implementation
 const renderError = ref<string | null>(null)
 
@@ -173,314 +126,11 @@ onErrorCaptured((error) => {
   return false
 })
 
-const canSelectInputs = computed(
-  () =>
-    isSelectInputsMode.value &&
-    nodeData?.mode === LGraphEventMode.ALWAYS &&
-    nodeTypeValidForApp(nodeData.type) &&
-    !nodeData.hasErrors
-)
-const nodeType = computed(() => nodeData?.type || '')
-const settingStore = useSettingStore()
-const showAdvanced = computed(
-  () =>
-    nodeData?.showAdvanced ||
-    settingStore.get('Comfy.Node.AlwaysShowAdvancedWidgets')
-)
-const { getWidgetTooltip, createTooltipConfig } = useNodeTooltips(
-  nodeType.value
-)
-const widgetValueStore = useWidgetValueStore()
-
-function createWidgetUpdateHandler(
-  widgetState: WidgetState | undefined,
-  widget: SafeWidgetData,
-  nodeExecId: string,
-  widgetOptions: IWidgetOptions | Record<string, never>
-): (newValue: WidgetValue) => void {
-  return (newValue: WidgetValue) => {
-    if (widgetState) widgetState.value = newValue
-    widget.callback?.(newValue)
-    const effectiveExecId = widget.sourceExecutionId ?? nodeExecId
-    executionErrorStore.clearWidgetRelatedErrors(
-      effectiveExecId,
-      widget.slotName ?? widget.name,
-      widget.name,
-      newValue,
-      { min: widgetOptions?.min, max: widgetOptions?.max }
-    )
-  }
-}
-
-interface ProcessedWidget {
-  advanced: boolean
-  handleContextMenu: (e: PointerEvent) => void
-  hasLayoutSize: boolean
-  hasError: boolean
-  hidden: boolean
-  id: string
-  name: string
-  renderKey: string
-  simplified: SimplifiedWidget
-  tooltipConfig: TooltipOptions
-  type: string
-  updateHandler: (value: WidgetValue) => void
-  value: WidgetValue
-  vueComponent: Component
-  slotMetadata?: WidgetSlotMetadata
-}
-
-function hasWidgetError(
-  widget: SafeWidgetData,
-  nodeExecId: string,
-  nodeErrors: { errors: { extra_info?: { input_name?: string } }[] } | undefined
-): boolean {
-  const errors = widget.sourceExecutionId
-    ? executionErrorStore.lastNodeErrors?.[widget.sourceExecutionId]?.errors
-    : nodeErrors?.errors
-  const inputName = widget.slotName ?? widget.name
-  return (
-    !!errors?.some((e) => e.extra_info?.input_name === inputName) ||
-    missingModelStore.isWidgetMissingModel(
-      widget.sourceExecutionId ?? nodeExecId,
-      widget.name
-    )
-  )
-}
-
-function getWidgetIdentity(
-  widget: SafeWidgetData,
-  nodeId: string | number | undefined,
-  index: number
-): {
-  dedupeIdentity?: string
-  renderKey: string
-} {
-  const rawWidgetId = widget.storeNodeId ?? widget.nodeId
-  const storeWidgetName = widget.storeName ?? widget.name
-  const slotNameForIdentity = widget.slotName ?? widget.name
-  const stableIdentityRoot = rawWidgetId
-    ? `node:${String(stripGraphPrefix(rawWidgetId))}`
-    : widget.sourceExecutionId
-      ? `exec:${widget.sourceExecutionId}`
-      : undefined
-
-  const dedupeIdentity = stableIdentityRoot
-    ? `${stableIdentityRoot}:${storeWidgetName}:${slotNameForIdentity}:${widget.type}`
-    : undefined
-  const renderKey =
-    dedupeIdentity ??
-    `transient:${String(nodeId ?? '')}:${storeWidgetName}:${slotNameForIdentity}:${widget.type}:${index}`
-
-  return {
-    dedupeIdentity,
-    renderKey
-  }
-}
-
-function isWidgetVisible(options: IWidgetOptions): boolean {
-  const hidden = options.hidden ?? false
-  const advanced = options.advanced ?? false
-  return !hidden && (!advanced || showAdvanced.value)
-}
-
-const processedWidgets = computed((): ProcessedWidget[] => {
-  if (!nodeData?.widgets) return []
-
-  // nodeData.id is the local node ID; subgraph nodes need the full execution
-  // path (e.g. "65:63") to match keys in lastNodeErrors.
-  const nodeExecId = app.isGraphReady
-    ? getExecutionIdFromNodeData(app.rootGraph, nodeData)
-    : String(nodeData.id ?? '')
-
-  const nodeErrors = executionErrorStore.lastNodeErrors?.[nodeExecId]
-  const graphId = canvasStore.canvas?.graph?.rootGraph.id
-
-  const nodeId = nodeData.id
-  const { widgets } = nodeData
-  const result: ProcessedWidget[] = []
-  const uniqueWidgets: Array<{
-    widget: SafeWidgetData
-    identity: ReturnType<typeof getWidgetIdentity>
-    mergedOptions: IWidgetOptions
-    widgetState: WidgetState | undefined
-    isVisible: boolean
-  }> = []
-  const dedupeIndexByIdentity = new Map<string, number>()
-
-  for (const [index, widget] of widgets.entries()) {
-    if (!shouldRenderAsVue(widget)) continue
-
-    const identity = getWidgetIdentity(widget, nodeId, index)
-    const storeWidgetName = widget.storeName ?? widget.name
-    const bareWidgetId = String(
-      stripGraphPrefix(widget.storeNodeId ?? widget.nodeId ?? nodeId ?? '')
-    )
-    const widgetState = graphId
-      ? widgetValueStore.getWidget(graphId, bareWidgetId, storeWidgetName)
-      : undefined
-    const mergedOptions: IWidgetOptions = {
-      ...(widget.options ?? {}),
-      ...(widgetState?.options ?? {})
-    }
-    const visible = isWidgetVisible(mergedOptions)
-    if (!identity.dedupeIdentity) {
-      uniqueWidgets.push({
-        widget,
-        identity,
-        mergedOptions,
-        widgetState,
-        isVisible: visible
-      })
-      continue
-    }
-
-    const existingIndex = dedupeIndexByIdentity.get(identity.dedupeIdentity)
-    if (existingIndex === undefined) {
-      dedupeIndexByIdentity.set(identity.dedupeIdentity, uniqueWidgets.length)
-      uniqueWidgets.push({
-        widget,
-        identity,
-        mergedOptions,
-        widgetState,
-        isVisible: visible
-      })
-      continue
-    }
-
-    const existingWidget = uniqueWidgets[existingIndex]
-    if (existingWidget && !existingWidget.isVisible && visible) {
-      uniqueWidgets[existingIndex] = {
-        widget,
-        identity,
-        mergedOptions,
-        widgetState,
-        isVisible: true
-      }
-    }
-  }
-
-  for (const {
-    widget,
-    mergedOptions,
-    widgetState,
-    identity: { renderKey }
-  } of uniqueWidgets) {
-    const hostNodeId = String(nodeId ?? '')
-    const bareWidgetId = String(
-      stripGraphPrefix(widget.storeNodeId ?? widget.nodeId ?? nodeId ?? '')
-    )
-    const promotionSourceNodeId = widget.storeName
-      ? String(bareWidgetId)
-      : undefined
-
-    const vueComponent =
-      getComponent(widget.type) ||
-      (widget.isDOMWidget ? WidgetDOM : WidgetLegacy)
-
-    const { slotMetadata } = widget
-
-    // Get value from store (falls back to undefined if not registered)
-    const value = widgetState?.value as WidgetValue
-
-    // Build options from store state, with disabled override for
-    // slot-linked widgets or widgets with disabled state (e.g. display-only)
-    const isDisabled = slotMetadata?.linked || widgetState?.disabled
-    const widgetOptions = isDisabled
-      ? { ...mergedOptions, disabled: true }
-      : mergedOptions
-
-    const borderStyle =
-      graphId &&
-      promotionStore.isPromotedByAny(graphId, {
-        sourceNodeId: hostNodeId,
-        sourceWidgetName: widget.storeName ?? widget.name,
-        disambiguatingSourceNodeId: promotionSourceNodeId
-      })
-        ? 'ring ring-component-node-widget-promoted'
-        : mergedOptions.advanced
-          ? 'ring ring-component-node-widget-advanced'
-          : undefined
-
-    const linkedUpstream: LinkedUpstreamInfo | undefined =
-      slotMetadata?.linked && slotMetadata.originNodeId
-        ? {
-            nodeId: slotMetadata.originNodeId,
-            outputName: slotMetadata.originOutputName
-          }
-        : undefined
-
-    const nodeLocatorId = widget.nodeId
-      ? widget.nodeId
-      : nodeData
-        ? getLocatorIdFromNodeData(nodeData)
-        : undefined
-
-    const simplified: SimplifiedWidget = {
-      name: widget.name,
-      type: widget.type,
-      value,
-      borderStyle,
-      callback: widget.callback,
-      controlWidget: widget.controlWidget,
-      label: widget.promotedLabel ?? widgetState?.label,
-      linkedUpstream,
-      nodeLocatorId,
-      options: widgetOptions,
-      spec: widget.spec
-    }
-
-    const updateHandler = createWidgetUpdateHandler(
-      widgetState,
-      widget,
-      nodeExecId,
-      widgetOptions
-    )
-
-    const tooltipText = getWidgetTooltip(widget)
-    const tooltipConfig = createTooltipConfig(tooltipText)
-    const handleContextMenu = (e: PointerEvent) => {
-      e.preventDefault()
-      e.stopPropagation()
-      handleNodeRightClick(e, nodeId)
-      showNodeOptions(
-        e,
-        widget.name,
-        widget.nodeId !== undefined
-          ? String(stripGraphPrefix(widget.nodeId))
-          : undefined
-      )
-    }
-
-    result.push({
-      advanced: mergedOptions.advanced ?? false,
-      handleContextMenu,
-      hasLayoutSize: widget.hasLayoutSize ?? false,
-      hasError: hasWidgetError(widget, nodeExecId, nodeErrors),
-      hidden: mergedOptions.hidden ?? false,
-      id: String(bareWidgetId),
-      name: widget.name,
-      renderKey,
-      type: widget.type,
-      vueComponent,
-      simplified,
-      value,
-      updateHandler,
-      tooltipConfig,
-      slotMetadata
-    })
-  }
-
-  return result
-})
-
-const gridTemplateRows = computed((): string => {
-  // Use processedWidgets directly since it already has store-based hidden/advanced
-  return toValue(processedWidgets)
-    .filter((w) => !w.hidden && (!w.advanced || showAdvanced.value))
-    .map((w) =>
-      shouldExpand(w.type) || w.hasLayoutSize ? 'auto' : 'min-content'
-    )
-    .join(' ')
-})
+const {
+  canSelectInputs,
+  gridTemplateRows,
+  nodeType,
+  processedWidgets,
+  showAdvanced
+} = useProcessedWidgets(() => nodeData)
 </script>
diff --git a/src/renderer/extensions/vueNodes/components/OutputSlot.test.ts b/src/renderer/extensions/vueNodes/components/OutputSlot.test.ts
index adc4cd6b36..c57efe5665 100644
--- a/src/renderer/extensions/vueNodes/components/OutputSlot.test.ts
+++ b/src/renderer/extensions/vueNodes/components/OutputSlot.test.ts
@@ -1,8 +1,9 @@
-import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
 import { defineComponent } from 'vue'
 import { createI18n } from 'vue-i18n'
 
+import { render, screen } from '@testing-library/vue'
+
 import type { INodeSlot } from '@/lib/litegraph/src/litegraph'
 import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
@@ -52,8 +53,8 @@ const i18n = createI18n({
   messages: { en: enMessages }
 })
 
-function mountOutputSlot(slotData: Partial<INodeSlot>, index = 0) {
-  return mount(OutputSlot, {
+function renderOutputSlot(slotData: Partial<INodeSlot>, index = 0) {
+  return render(OutputSlot, {
     props: {
       slotData: { type: '*', ...slotData } as INodeSlot,
       index,
@@ -69,36 +70,36 @@ function mountOutputSlot(slotData: Partial<INodeSlot>, index = 0) {
 
 describe('OutputSlot', () => {
   it('renders label when present on slotData', () => {
-    const wrapper = mountOutputSlot({
+    renderOutputSlot({
       name: 'internal_name',
       localized_name: 'Localized Name',
       label: 'My Custom Label'
     })
 
-    expect(wrapper.text()).toContain('My Custom Label')
-    expect(wrapper.text()).not.toContain('internal_name')
-    expect(wrapper.text()).not.toContain('Localized Name')
+    expect(screen.getByText('My Custom Label')).toBeInTheDocument()
+    expect(screen.queryByText('internal_name')).not.toBeInTheDocument()
+    expect(screen.queryByText('Localized Name')).not.toBeInTheDocument()
   })
 
   it('falls back to localized_name when label is absent', () => {
-    const wrapper = mountOutputSlot({
+    renderOutputSlot({
       name: 'internal_name',
       localized_name: 'Localized Name'
     })
 
-    expect(wrapper.text()).toContain('Localized Name')
-    expect(wrapper.text()).not.toContain('internal_name')
+    expect(screen.getByText('Localized Name')).toBeInTheDocument()
+    expect(screen.queryByText('internal_name')).not.toBeInTheDocument()
   })
 
   it('falls back to name when label and localized_name are absent', () => {
-    const wrapper = mountOutputSlot({ name: 'internal_name' })
+    renderOutputSlot({ name: 'internal_name' })
 
-    expect(wrapper.text()).toContain('internal_name')
+    expect(screen.getByText('internal_name')).toBeInTheDocument()
   })
 
   it('falls back to "Output N" when all names are absent', () => {
-    const wrapper = mountOutputSlot({ name: undefined }, 2)
+    renderOutputSlot({ name: undefined }, 2)
 
-    expect(wrapper.text()).toContain('Output 2')
+    expect(screen.getByText('Output 2')).toBeInTheDocument()
   })
 })
diff --git a/src/renderer/extensions/vueNodes/components/SlotConnectionDot.test.ts b/src/renderer/extensions/vueNodes/components/SlotConnectionDot.test.ts
index d0524d2cfe..a7ccf4edd1 100644
--- a/src/renderer/extensions/vueNodes/components/SlotConnectionDot.test.ts
+++ b/src/renderer/extensions/vueNodes/components/SlotConnectionDot.test.ts
@@ -1,6 +1,7 @@
-import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 
+import { render, screen } from '@testing-library/vue'
+
 import type { INodeSlot } from '@/lib/litegraph/src/litegraph'
 import { RenderShape } from '@/lib/litegraph/src/types/globalEnums'
 
@@ -12,30 +13,30 @@ const defaultSlot: INodeSlot = {
   boundingRect: [0, 0, 0, 0]
 }
 
-function mountDot(slotData?: INodeSlot) {
-  return mount(SlotConnectionDot, {
+function renderDot(slotData?: INodeSlot) {
+  return render(SlotConnectionDot, {
     props: { slotData }
   })
 }
 
 describe('SlotConnectionDot', () => {
   it('renders circle shape by default', () => {
-    const wrapper = mountDot(defaultSlot)
+    renderDot(defaultSlot)
 
-    const dot = wrapper.find('.slot-dot')
-    expect(dot.classes()).toContain('rounded-full')
-    expect(dot.element.tagName).toBe('DIV')
+    const dot = screen.getByTestId('slot-dot')
+    expect(dot).toHaveClass('rounded-full')
+    expect(dot.tagName).toBe('DIV')
   })
 
   it('renders rounded square for GRID shape', () => {
-    const wrapper = mountDot({
+    renderDot({
       ...defaultSlot,
       shape: RenderShape.GRID
     })
 
-    const dot = wrapper.find('.slot-dot')
-    expect(dot.classes()).toContain('rounded-[1px]')
-    expect(dot.classes()).not.toContain('rounded-full')
-    expect(dot.element.tagName).toBe('DIV')
+    const dot = screen.getByTestId('slot-dot')
+    expect(dot).toHaveClass('rounded-[1px]')
+    expect(dot).not.toHaveClass('rounded-full')
+    expect(dot.tagName).toBe('DIV')
   })
 })
diff --git a/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue b/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue
index 4f74083f21..2dc591dde5 100644
--- a/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue
+++ b/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue
@@ -71,11 +71,13 @@ const slotClass = computed(() =>
       ref="slot-el"
       :style="{ backgroundColor: types.length === 1 ? types[0] : undefined }"
       :class="slotClass"
+      data-testid="slot-dot"
     />
     <svg
       v-else
       ref="slot-el"
       :class="slotClass"
+      data-testid="slot-dot"
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
     >
diff --git a/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.ts b/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.ts
index c3410051a0..da18cfd0fc 100644
--- a/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.ts
+++ b/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.ts
@@ -157,31 +157,6 @@ describe('useNodePointerInteractions', () => {
     expect(startDrag).toHaveBeenCalledWith(leftClickEvent, 'test-node-123')
   })
 
-  it.skip('should call onNodeSelect on pointer down', async () => {
-    const { handleNodeSelect } = useNodeEventHandlers()
-
-    const { pointerHandlers } = useNodePointerInteractions('test-node-123')
-
-    // Selection should happen on pointer down
-    const downEvent = createPointerEvent('pointerdown', {
-      clientX: 100,
-      clientY: 100
-    })
-    pointerHandlers.onPointerdown(downEvent)
-
-    expect(handleNodeSelect).toHaveBeenCalledWith(downEvent, 'test-node-123')
-
-    vi.mocked(handleNodeSelect).mockClear()
-
-    // Even if we drag, selection already happened on pointer down
-    pointerHandlers.onPointerup(
-      createPointerEvent('pointerup', { clientX: 200, clientY: 200 })
-    )
-
-    // onNodeSelect should not be called again on pointer up
-    expect(handleNodeSelect).not.toHaveBeenCalled()
-  })
-
   it('should handle drag termination via cancel and context menu', async () => {
     const { handleNodeSelect } = useNodeEventHandlers()
 
diff --git a/src/renderer/extensions/vueNodes/composables/useProcessedWidgets.test.ts b/src/renderer/extensions/vueNodes/composables/useProcessedWidgets.test.ts
new file mode 100644
index 0000000000..0716570855
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/composables/useProcessedWidgets.test.ts
@@ -0,0 +1,499 @@
+import type { TooltipOptions } from 'primevue'
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { SafeWidgetData } from '@/composables/graph/useGraphNodeManager'
+import {
+  computeProcessedWidgets,
+  getWidgetIdentity,
+  hasWidgetError,
+  isWidgetVisible
+} from '@/renderer/extensions/vueNodes/composables/useProcessedWidgets'
+import { usePromotionStore } from '@/stores/promotionStore'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
+import { useWidgetValueStore } from '@/stores/widgetValueStore'
+
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
+  useCanvasStore: () => ({
+    canvas: {
+      graph: {
+        rootGraph: {
+          id: 'graph-test'
+        }
+      }
+    }
+  })
+}))
+
+const createMockWidget = (
+  overrides: Partial<SafeWidgetData> = {}
+): SafeWidgetData => ({
+  nodeId: 'test_node',
+  name: 'test_widget',
+  type: 'combo',
+  options: undefined,
+  callback: undefined,
+  spec: undefined,
+  isDOMWidget: false,
+  slotMetadata: undefined,
+  ...overrides
+})
+
+describe('getWidgetIdentity', () => {
+  it('returns stable dedupeIdentity for widgets with storeNodeId', () => {
+    const widget = createMockWidget({
+      storeNodeId: 'subgraph:19',
+      storeName: 'text',
+      slotName: 'text',
+      type: 'text'
+    })
+    const { dedupeIdentity, renderKey } = getWidgetIdentity(widget, '1', 0)
+    expect(dedupeIdentity).toBe('node:19:text:text:text')
+    expect(renderKey).toBe(dedupeIdentity)
+  })
+
+  it('returns transient renderKey for widgets without stable identity', () => {
+    const widget = createMockWidget({
+      nodeId: undefined,
+      storeNodeId: undefined,
+      sourceExecutionId: undefined
+    })
+    const { dedupeIdentity, renderKey } = getWidgetIdentity(widget, '5', 3)
+    expect(dedupeIdentity).toBeUndefined()
+    expect(renderKey).toBe('transient:5:test_widget:test_widget:combo:3')
+  })
+
+  it('uses sourceExecutionId for identity when no nodeId', () => {
+    const widget = createMockWidget({
+      nodeId: undefined,
+      storeNodeId: undefined,
+      sourceExecutionId: '65:18'
+    })
+    const { dedupeIdentity } = getWidgetIdentity(widget, '1', 0)
+    expect(dedupeIdentity).toBe('exec:65:18:test_widget:test_widget:combo')
+  })
+})
+
+describe('isWidgetVisible', () => {
+  it('returns true for normal widgets', () => {
+    expect(isWidgetVisible({}, false)).toBe(true)
+  })
+
+  it('returns false for hidden widgets', () => {
+    expect(isWidgetVisible({ hidden: true }, false)).toBe(false)
+  })
+
+  it('returns false for advanced widgets when showAdvanced is false', () => {
+    expect(isWidgetVisible({ advanced: true }, false)).toBe(false)
+  })
+
+  it('returns true for advanced widgets when showAdvanced is true', () => {
+    expect(isWidgetVisible({ advanced: true }, true)).toBe(true)
+  })
+})
+
+describe('hasWidgetError', () => {
+  let executionErrorStore: ReturnType<typeof useExecutionErrorStore>
+  let missingModelStore: ReturnType<typeof useMissingModelStore>
+
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    executionErrorStore = useExecutionErrorStore()
+    missingModelStore = useMissingModelStore()
+  })
+
+  it('returns false when no errors', () => {
+    const widget = createMockWidget()
+    expect(
+      hasWidgetError(
+        widget,
+        '1',
+        undefined,
+        executionErrorStore,
+        missingModelStore
+      )
+    ).toBe(false)
+  })
+
+  it('returns true when node has matching input error', () => {
+    const widget = createMockWidget({ name: 'seed' })
+    const nodeErrors = {
+      errors: [{ extra_info: { input_name: 'seed' } }]
+    }
+    expect(
+      hasWidgetError(
+        widget,
+        '1',
+        nodeErrors,
+        executionErrorStore,
+        missingModelStore
+      )
+    ).toBe(true)
+  })
+
+  it('returns true via sourceExecutionId when execution store has matching error', () => {
+    const widget = createMockWidget({
+      name: 'seed',
+      sourceExecutionId: '65:18'
+    })
+    executionErrorStore.lastNodeErrors = {
+      '65:18': {
+        errors: [
+          {
+            type: 'required_input_missing',
+            message: 'seed is required',
+            details: '',
+            extra_info: { input_name: 'seed' }
+          }
+        ],
+        class_type: 'TestNode',
+        dependent_outputs: []
+      }
+    }
+    expect(
+      hasWidgetError(
+        widget,
+        '1',
+        undefined,
+        executionErrorStore,
+        missingModelStore
+      )
+    ).toBe(true)
+  })
+
+  it('returns true when widget has missing model', () => {
+    const widget = createMockWidget({ name: 'ckpt_name' })
+    vi.spyOn(missingModelStore, 'isWidgetMissingModel').mockReturnValue(true)
+    expect(
+      hasWidgetError(
+        widget,
+        '1',
+        undefined,
+        executionErrorStore,
+        missingModelStore
+      )
+    ).toBe(true)
+  })
+
+  it('uses slotName for error matching when present', () => {
+    const widget = createMockWidget({
+      name: 'internal_name',
+      slotName: 'display_slot'
+    })
+    const nodeErrors = {
+      errors: [{ extra_info: { input_name: 'display_slot' } }]
+    }
+    expect(
+      hasWidgetError(
+        widget,
+        '1',
+        nodeErrors,
+        executionErrorStore,
+        missingModelStore
+      )
+    ).toBe(true)
+  })
+})
+
+const noopUi = {
+  getTooltipConfig: () => ({}) as TooltipOptions,
+  handleNodeRightClick: () => {}
+}
+
+describe('computeProcessedWidgets borderStyle', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+  })
+
+  it('applies promoted border styling to intermediate promoted widgets', () => {
+    const promotedWidget = createMockWidget({
+      name: 'text',
+      type: 'combo',
+      nodeId: 'inner-subgraph:1',
+      storeNodeId: 'inner-subgraph:1',
+      storeName: 'text',
+      slotName: 'text'
+    })
+
+    usePromotionStore().promote('graph-test', '4', {
+      sourceNodeId: '3',
+      sourceWidgetName: 'text',
+      disambiguatingSourceNodeId: '1'
+    })
+
+    const result = computeProcessedWidgets({
+      nodeData: {
+        id: '3',
+        type: 'SubgraphNode',
+        widgets: [promotedWidget],
+        title: 'Test',
+        mode: 0,
+        selected: false,
+        executing: false,
+        inputs: [],
+        outputs: []
+      },
+      graphId: 'graph-test',
+      showAdvanced: false,
+      isGraphReady: false,
+      rootGraph: null,
+      ui: noopUi
+    })
+
+    expect(
+      result.some((w) => w.simplified.borderStyle?.includes('promoted'))
+    ).toBe(true)
+  })
+
+  it('does not apply promoted border styling to outermost widgets', () => {
+    const promotedWidget = createMockWidget({
+      name: 'text',
+      type: 'combo',
+      nodeId: 'inner-subgraph:1',
+      storeNodeId: 'inner-subgraph:1',
+      storeName: 'text',
+      slotName: 'text'
+    })
+
+    usePromotionStore().promote('graph-test', '4', {
+      sourceNodeId: '3',
+      sourceWidgetName: 'text',
+      disambiguatingSourceNodeId: '1'
+    })
+
+    const result = computeProcessedWidgets({
+      nodeData: {
+        id: '4',
+        type: 'SubgraphNode',
+        widgets: [promotedWidget],
+        title: 'Test',
+        mode: 0,
+        selected: false,
+        executing: false,
+        inputs: [],
+        outputs: []
+      },
+      graphId: 'graph-test',
+      showAdvanced: false,
+      isGraphReady: false,
+      rootGraph: null,
+      ui: noopUi
+    })
+
+    expect(
+      result.some((w) => w.simplified.borderStyle?.includes('promoted'))
+    ).toBe(false)
+  })
+
+  it('applies advanced border styling to advanced widgets', () => {
+    const advancedWidget = createMockWidget({
+      name: 'text',
+      type: 'combo',
+      options: { advanced: true }
+    })
+
+    const result = computeProcessedWidgets({
+      nodeData: {
+        id: '1',
+        type: 'TestNode',
+        widgets: [advancedWidget],
+        title: 'Test',
+        mode: 0,
+        selected: false,
+        executing: false,
+        inputs: [],
+        outputs: []
+      },
+      graphId: 'graph-test',
+      showAdvanced: true,
+      isGraphReady: false,
+      rootGraph: null,
+      ui: noopUi
+    })
+
+    expect(result[0].simplified.borderStyle).toBe(
+      'ring ring-component-node-widget-advanced'
+    )
+  })
+
+  it('deduplication keeps visible widget over hidden duplicate', () => {
+    const hiddenWidget = createMockWidget({
+      name: 'text',
+      type: 'combo',
+      nodeId: '1',
+      storeNodeId: '1',
+      storeName: 'text',
+      slotName: 'text',
+      options: { hidden: true }
+    })
+
+    const visibleWidget = createMockWidget({
+      name: 'text',
+      type: 'combo',
+      nodeId: '1',
+      storeNodeId: '1',
+      storeName: 'text',
+      slotName: 'text'
+    })
+
+    const result = computeProcessedWidgets({
+      nodeData: {
+        id: '1',
+        type: 'TestNode',
+        widgets: [hiddenWidget, visibleWidget],
+        title: 'Test',
+        mode: 0,
+        selected: false,
+        executing: false,
+        inputs: [],
+        outputs: []
+      },
+      graphId: 'graph-test',
+      showAdvanced: false,
+      isGraphReady: false,
+      rootGraph: null,
+      ui: noopUi
+    })
+
+    expect(result).toHaveLength(1)
+    expect(result[0].hidden).toBe(false)
+  })
+})
+
+describe('createWidgetUpdateHandler (via computeProcessedWidgets)', () => {
+  const GRAPH_ID = 'graph-test'
+  const NODE_ID = '1'
+
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+  })
+
+  function processWidgets(widgets: SafeWidgetData[]) {
+    return computeProcessedWidgets({
+      nodeData: {
+        id: NODE_ID,
+        type: 'TestNode',
+        widgets,
+        title: 'Test',
+        mode: 0,
+        selected: false,
+        executing: false,
+        inputs: [],
+        outputs: []
+      },
+      graphId: GRAPH_ID,
+      showAdvanced: false,
+      isGraphReady: false,
+      rootGraph: null,
+      ui: noopUi
+    })
+  }
+
+  it('calls widget.callback with the new value when widgetState exists', () => {
+    const callback = vi.fn()
+    const widget = createMockWidget({
+      name: 'seed',
+      nodeId: NODE_ID,
+      callback
+    })
+
+    useWidgetValueStore().registerWidget(GRAPH_ID, {
+      nodeId: NODE_ID,
+      name: 'seed',
+      type: 'combo',
+      value: 0,
+      options: {}
+    })
+
+    const [processed] = processWidgets([widget])
+    processed.updateHandler(42)
+
+    expect(callback).toHaveBeenCalledWith(42)
+  })
+
+  it('calls widget.callback even when widgetState is undefined (no store entry)', () => {
+    const callback = vi.fn()
+    const widget = createMockWidget({
+      name: 'unregistered_widget',
+      nodeId: NODE_ID,
+      callback
+    })
+
+    const [processed] = processWidgets([widget])
+    processed.updateHandler('new-value')
+
+    expect(callback).toHaveBeenCalledWith('new-value')
+  })
+
+  it('updates widgetState.value when store entry exists', () => {
+    const widget = createMockWidget({
+      name: 'seed',
+      nodeId: NODE_ID
+    })
+
+    useWidgetValueStore().registerWidget(GRAPH_ID, {
+      nodeId: NODE_ID,
+      name: 'seed',
+      type: 'combo',
+      value: 0,
+      options: {}
+    })
+
+    const [processed] = processWidgets([widget])
+    processed.updateHandler(99)
+
+    const state = useWidgetValueStore().getWidget(GRAPH_ID, NODE_ID, 'seed')
+    expect(state?.value).toBe(99)
+  })
+
+  it('clears execution errors on update', () => {
+    const widget = createMockWidget({
+      name: 'seed',
+      nodeId: NODE_ID
+    })
+
+    const executionErrorStore = useExecutionErrorStore()
+    const missingModelStore = useMissingModelStore()
+
+    executionErrorStore.lastNodeErrors = {
+      [NODE_ID]: {
+        errors: [
+          {
+            type: 'required_input_missing',
+            message: 'seed is required',
+            details: '',
+            extra_info: { input_name: 'seed' }
+          }
+        ],
+        class_type: 'TestNode',
+        dependent_outputs: []
+      }
+    }
+
+    const [processed] = processWidgets([widget])
+
+    expect(
+      hasWidgetError(
+        widget,
+        NODE_ID,
+        executionErrorStore.lastNodeErrors[NODE_ID],
+        executionErrorStore,
+        missingModelStore
+      )
+    ).toBe(true)
+
+    processed.updateHandler('fixed-value')
+
+    expect(
+      hasWidgetError(
+        widget,
+        NODE_ID,
+        executionErrorStore.lastNodeErrors?.[NODE_ID],
+        executionErrorStore,
+        missingModelStore
+      )
+    ).toBe(false)
+  })
+})
diff --git a/src/renderer/extensions/vueNodes/composables/useProcessedWidgets.ts b/src/renderer/extensions/vueNodes/composables/useProcessedWidgets.ts
new file mode 100644
index 0000000000..c1b11ed571
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/composables/useProcessedWidgets.ts
@@ -0,0 +1,431 @@
+import type { TooltipOptions } from 'primevue'
+import { computed } from 'vue'
+import type { Component } from 'vue'
+
+import type {
+  SafeWidgetData,
+  VueNodeData,
+  WidgetSlotMetadata
+} from '@/composables/graph/useGraphNodeManager'
+import { useAppMode } from '@/composables/useAppMode'
+import { showNodeOptions } from '@/composables/graph/useMoreOptionsMenu'
+import type { IWidgetOptions } from '@/lib/litegraph/src/types/widgets'
+import { LGraphEventMode } from '@/lib/litegraph/src/types/globalEnums'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { app } from '@/scripts/app'
+import { useNodeTooltips } from '@/renderer/extensions/vueNodes/composables/useNodeTooltips'
+import { useNodeEventHandlers } from '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers'
+import WidgetDOM from '@/renderer/extensions/vueNodes/widgets/components/WidgetDOM.vue'
+import WidgetLegacy from '@/renderer/extensions/vueNodes/widgets/components/WidgetLegacy.vue'
+import {
+  getComponent,
+  shouldExpand,
+  shouldRenderAsVue
+} from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
+import { nodeTypeValidForApp } from '@/stores/appModeStore'
+import type { WidgetState } from '@/stores/widgetValueStore'
+import {
+  stripGraphPrefix,
+  useWidgetValueStore
+} from '@/stores/widgetValueStore'
+import { usePromotionStore } from '@/stores/promotionStore'
+import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import type { LGraph } from '@/lib/litegraph/src/litegraph'
+import type {
+  LinkedUpstreamInfo,
+  SimplifiedWidget,
+  WidgetValue
+} from '@/types/simplifiedWidget'
+import {
+  getExecutionIdFromNodeData,
+  getLocatorIdFromNodeData
+} from '@/utils/graphTraversalUtil'
+
+interface ProcessedWidget {
+  advanced: boolean
+  handleContextMenu: (e: PointerEvent) => void
+  hasLayoutSize: boolean
+  hasError: boolean
+  hidden: boolean
+  id: string
+  name: string
+  renderKey: string
+  simplified: SimplifiedWidget
+  tooltipConfig: TooltipOptions
+  type: string
+  updateHandler: (value: WidgetValue) => void
+  value: WidgetValue
+  vueComponent: Component
+  slotMetadata?: WidgetSlotMetadata
+}
+
+interface WidgetUiCallbacks {
+  getTooltipConfig: (widget: SafeWidgetData) => TooltipOptions
+  handleNodeRightClick: (e: PointerEvent, nodeId: string) => void
+}
+
+interface ComputeProcessedWidgetsOptions {
+  nodeData: VueNodeData | undefined
+  graphId: string | undefined
+  showAdvanced: boolean
+  isGraphReady: boolean
+  rootGraph: LGraph | null
+  ui: WidgetUiCallbacks
+}
+
+function createWidgetUpdateHandler(
+  widgetState: WidgetState | undefined,
+  widget: SafeWidgetData,
+  nodeExecId: string,
+  widgetOptions: IWidgetOptions | Record<string, never>,
+  executionErrorStore: ReturnType<typeof useExecutionErrorStore>
+): (newValue: WidgetValue) => void {
+  return (newValue: WidgetValue) => {
+    if (widgetState) widgetState.value = newValue
+    widget.callback?.(newValue)
+    const effectiveExecId = widget.sourceExecutionId ?? nodeExecId
+    executionErrorStore.clearWidgetRelatedErrors(
+      effectiveExecId,
+      widget.slotName ?? widget.name,
+      widget.name,
+      newValue,
+      { min: widgetOptions?.min, max: widgetOptions?.max }
+    )
+  }
+}
+
+export function hasWidgetError(
+  widget: SafeWidgetData,
+  nodeExecId: string,
+  nodeErrors:
+    | { errors: { extra_info?: { input_name?: string } }[] }
+    | undefined,
+  executionErrorStore: ReturnType<typeof useExecutionErrorStore>,
+  missingModelStore: ReturnType<typeof useMissingModelStore>
+): boolean {
+  const errors = widget.sourceExecutionId
+    ? executionErrorStore.lastNodeErrors?.[widget.sourceExecutionId]?.errors
+    : nodeErrors?.errors
+  const inputName = widget.slotName ?? widget.name
+  return (
+    !!errors?.some((e) => e.extra_info?.input_name === inputName) ||
+    missingModelStore.isWidgetMissingModel(
+      widget.sourceExecutionId ?? nodeExecId,
+      widget.name
+    )
+  )
+}
+
+export function getWidgetIdentity(
+  widget: SafeWidgetData,
+  nodeId: string | number | undefined,
+  index: number
+): {
+  dedupeIdentity?: string
+  renderKey: string
+} {
+  const rawWidgetId = widget.storeNodeId ?? widget.nodeId
+  const storeWidgetName = widget.storeName ?? widget.name
+  const slotNameForIdentity = widget.slotName ?? widget.name
+  const stableIdentityRoot = rawWidgetId
+    ? `node:${String(stripGraphPrefix(rawWidgetId))}`
+    : widget.sourceExecutionId
+      ? `exec:${widget.sourceExecutionId}`
+      : undefined
+
+  const dedupeIdentity = stableIdentityRoot
+    ? `${stableIdentityRoot}:${storeWidgetName}:${slotNameForIdentity}:${widget.type}`
+    : undefined
+  const renderKey =
+    dedupeIdentity ??
+    `transient:${String(nodeId ?? '')}:${storeWidgetName}:${slotNameForIdentity}:${widget.type}:${index}`
+
+  return {
+    dedupeIdentity,
+    renderKey
+  }
+}
+
+export function isWidgetVisible(
+  options: IWidgetOptions,
+  showAdvanced: boolean
+): boolean {
+  const hidden = options.hidden ?? false
+  const advanced = options.advanced ?? false
+  return !hidden && (!advanced || showAdvanced)
+}
+
+export function computeProcessedWidgets({
+  nodeData,
+  graphId,
+  showAdvanced,
+  isGraphReady,
+  rootGraph,
+  ui
+}: ComputeProcessedWidgetsOptions): ProcessedWidget[] {
+  if (!nodeData?.widgets) return []
+
+  const promotionStore = usePromotionStore()
+  const executionErrorStore = useExecutionErrorStore()
+  const missingModelStore = useMissingModelStore()
+  const widgetValueStore = useWidgetValueStore()
+
+  const nodeExecId =
+    isGraphReady && rootGraph
+      ? getExecutionIdFromNodeData(rootGraph, nodeData)
+      : String(nodeData.id ?? '')
+
+  const nodeErrors = executionErrorStore.lastNodeErrors?.[nodeExecId]
+
+  const nodeId = nodeData.id
+  const { widgets } = nodeData
+  const result: ProcessedWidget[] = []
+  const uniqueWidgets: Array<{
+    widget: SafeWidgetData
+    identity: ReturnType<typeof getWidgetIdentity>
+    mergedOptions: IWidgetOptions
+    widgetState: WidgetState | undefined
+    isVisible: boolean
+  }> = []
+  const dedupeIndexByIdentity = new Map<string, number>()
+
+  for (const [index, widget] of widgets.entries()) {
+    if (!shouldRenderAsVue(widget)) continue
+
+    const identity = getWidgetIdentity(widget, nodeId, index)
+    const storeWidgetName = widget.storeName ?? widget.name
+    const bareWidgetId = String(
+      stripGraphPrefix(widget.storeNodeId ?? widget.nodeId ?? nodeId ?? '')
+    )
+    const widgetState = graphId
+      ? widgetValueStore.getWidget(graphId, bareWidgetId, storeWidgetName)
+      : undefined
+    const mergedOptions: IWidgetOptions = {
+      ...(widget.options ?? {}),
+      ...(widgetState?.options ?? {})
+    }
+    const visible = isWidgetVisible(mergedOptions, showAdvanced)
+    if (!identity.dedupeIdentity) {
+      uniqueWidgets.push({
+        widget,
+        identity,
+        mergedOptions,
+        widgetState,
+        isVisible: visible
+      })
+      continue
+    }
+
+    const existingIndex = dedupeIndexByIdentity.get(identity.dedupeIdentity)
+    if (existingIndex === undefined) {
+      dedupeIndexByIdentity.set(identity.dedupeIdentity, uniqueWidgets.length)
+      uniqueWidgets.push({
+        widget,
+        identity,
+        mergedOptions,
+        widgetState,
+        isVisible: visible
+      })
+      continue
+    }
+
+    const existingWidget = uniqueWidgets[existingIndex]
+    if (existingWidget && !existingWidget.isVisible && visible) {
+      uniqueWidgets[existingIndex] = {
+        widget,
+        identity,
+        mergedOptions,
+        widgetState,
+        isVisible: true
+      }
+    }
+  }
+
+  for (const {
+    widget,
+    mergedOptions,
+    widgetState,
+    identity: { renderKey }
+  } of uniqueWidgets) {
+    const hostNodeId = String(nodeId ?? '')
+    const bareWidgetId = String(
+      stripGraphPrefix(widget.storeNodeId ?? widget.nodeId ?? nodeId ?? '')
+    )
+    const promotionSourceNodeId = widget.storeName
+      ? String(bareWidgetId)
+      : undefined
+
+    const vueComponent =
+      getComponent(widget.type) ||
+      (widget.isDOMWidget ? WidgetDOM : WidgetLegacy)
+
+    const { slotMetadata } = widget
+
+    const value = widgetState?.value as WidgetValue
+
+    const isDisabled = slotMetadata?.linked || widgetState?.disabled
+    const widgetOptions = isDisabled
+      ? { ...mergedOptions, disabled: true }
+      : mergedOptions
+
+    const borderStyle =
+      graphId &&
+      promotionStore.isPromotedByAny(graphId, {
+        sourceNodeId: hostNodeId,
+        sourceWidgetName: widget.storeName ?? widget.name,
+        disambiguatingSourceNodeId: promotionSourceNodeId
+      })
+        ? 'ring ring-component-node-widget-promoted'
+        : mergedOptions.advanced
+          ? 'ring ring-component-node-widget-advanced'
+          : undefined
+
+    const linkedUpstream: LinkedUpstreamInfo | undefined =
+      slotMetadata?.linked && slotMetadata.originNodeId
+        ? {
+            nodeId: slotMetadata.originNodeId,
+            outputName: slotMetadata.originOutputName
+          }
+        : undefined
+
+    const nodeLocatorId = widget.nodeId
+      ? widget.nodeId
+      : nodeData
+        ? getLocatorIdFromNodeData(nodeData)
+        : undefined
+
+    const simplified: SimplifiedWidget = {
+      name: widget.name,
+      type: widget.type,
+      value,
+      borderStyle,
+      callback: widget.callback,
+      controlWidget: widget.controlWidget,
+      label: widget.promotedLabel ?? widgetState?.label,
+      linkedUpstream,
+      nodeLocatorId,
+      options: widgetOptions,
+      spec: widget.spec
+    }
+
+    const updateHandler = createWidgetUpdateHandler(
+      widgetState,
+      widget,
+      nodeExecId,
+      widgetOptions,
+      executionErrorStore
+    )
+
+    const tooltipConfig = ui.getTooltipConfig(widget)
+    const handleContextMenu = (e: PointerEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      if (nodeId !== undefined) ui.handleNodeRightClick(e, nodeId)
+      showNodeOptions(
+        e,
+        widget.name,
+        widget.nodeId !== undefined
+          ? String(stripGraphPrefix(widget.nodeId))
+          : undefined
+      )
+    }
+
+    result.push({
+      advanced: mergedOptions.advanced ?? false,
+      handleContextMenu,
+      hasLayoutSize: widget.hasLayoutSize ?? false,
+      hasError: hasWidgetError(
+        widget,
+        nodeExecId,
+        nodeErrors,
+        executionErrorStore,
+        missingModelStore
+      ),
+      hidden: mergedOptions.hidden ?? false,
+      id: String(bareWidgetId),
+      name: widget.name,
+      renderKey,
+      type: widget.type,
+      vueComponent,
+      simplified,
+      value,
+      updateHandler,
+      tooltipConfig,
+      slotMetadata
+    })
+  }
+
+  return result
+}
+
+export function useProcessedWidgets(
+  nodeDataGetter: () => VueNodeData | undefined
+) {
+  const canvasStore = useCanvasStore()
+  const settingStore = useSettingStore()
+  const { isSelectInputsMode } = useAppMode()
+  const { handleNodeRightClick } = useNodeEventHandlers()
+
+  const nodeType = computed(() => nodeDataGetter()?.type || '')
+  const { getWidgetTooltip, createTooltipConfig } = useNodeTooltips(nodeType)
+
+  const ui: WidgetUiCallbacks = {
+    getTooltipConfig: (widget) => createTooltipConfig(getWidgetTooltip(widget)),
+    handleNodeRightClick
+  }
+
+  const showAdvanced = computed(
+    () =>
+      nodeDataGetter()?.showAdvanced ||
+      settingStore.get('Comfy.Node.AlwaysShowAdvancedWidgets')
+  )
+
+  const canSelectInputs = computed(() => {
+    const nodeData = nodeDataGetter()
+    return (
+      isSelectInputsMode.value &&
+      nodeData?.mode === LGraphEventMode.ALWAYS &&
+      nodeTypeValidForApp(nodeData.type) &&
+      !nodeData.hasErrors
+    )
+  })
+
+  const processedWidgets = computed((): ProcessedWidget[] =>
+    computeProcessedWidgets({
+      nodeData: nodeDataGetter(),
+      graphId: canvasStore.canvas?.graph?.rootGraph.id,
+      showAdvanced: showAdvanced.value,
+      isGraphReady: app.isGraphReady,
+      rootGraph: app.isGraphReady ? app.rootGraph : null,
+      ui
+    })
+  )
+
+  const visibleWidgets = computed(() =>
+    processedWidgets.value.filter((w) =>
+      isWidgetVisible(
+        { hidden: w.hidden, advanced: w.advanced },
+        showAdvanced.value
+      )
+    )
+  )
+
+  const gridTemplateRows = computed((): string =>
+    visibleWidgets.value
+      .map((w) =>
+        shouldExpand(w.type) || w.hasLayoutSize ? 'auto' : 'min-content'
+      )
+      .join(' ')
+  )
+
+  return {
+    canSelectInputs,
+    gridTemplateRows,
+    nodeType,
+    processedWidgets,
+    showAdvanced,
+    visibleWidgets
+  }
+}
diff --git a/src/renderer/extensions/vueNodes/composables/useSlotElementTracking.test.ts b/src/renderer/extensions/vueNodes/composables/useSlotElementTracking.test.ts
index edbeaec79b..bdbd5fe8e0 100644
--- a/src/renderer/extensions/vueNodes/composables/useSlotElementTracking.test.ts
+++ b/src/renderer/extensions/vueNodes/composables/useSlotElementTracking.test.ts
@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils'
+import { render } from '@testing-library/vue'
 import { createTestingPinia } from '@pinia/testing'
 import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -19,18 +19,34 @@ import {
 } from './useSlotElementTracking'
 
 const mockGraph = vi.hoisted(() => ({ _nodes: [] as unknown[] }))
+const mockCanvasState = vi.hoisted(() => ({
+  canvas: {} as object | null
+}))
+const mockClientPosToCanvasPos = vi.hoisted(() =>
+  vi.fn(([x, y]: [number, number]) => [x * 0.5, y * 0.5] as [number, number])
+)
 
 vi.mock('@/scripts/app', () => ({
   app: { canvas: { graph: mockGraph, setDirty: vi.fn() } }
 }))
 
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
+  useCanvasStore: () => mockCanvasState
+}))
+
+vi.mock('@/composables/element/useCanvasPositionConversion', () => ({
+  useSharedCanvasPositionConversion: () => ({
+    clientPosToCanvasPos: mockClientPosToCanvasPos
+  })
+}))
+
 const NODE_ID = 'test-node'
 const SLOT_INDEX = 0
 
-function createWrapperComponent(type: 'input' | 'output') {
-  return defineComponent({
+function createTestSetup(type: 'input' | 'output') {
+  const el = ref<HTMLElement | null>(null)
+  const TestComponent = defineComponent({
     setup() {
-      const el = ref<HTMLElement | null>(null)
       useSlotElementTracking({
         nodeId: NODE_ID,
         index: SLOT_INDEX,
@@ -39,15 +55,15 @@ function createWrapperComponent(type: 'input' | 'output') {
       })
       return { el }
     },
-    // No template ref — el starts null so the immediate watcher doesn't fire
-    // before the stop handle is assigned
     template: '<div />'
   })
+  return { el, TestComponent }
 }
 
-function createSlotElement(): HTMLElement {
+function createSlotElement(collapsed = false): HTMLElement {
   const container = document.createElement('div')
   container.dataset.nodeId = NODE_ID
+  if (collapsed) container.dataset.collapsed = ''
   container.getBoundingClientRect = () =>
     ({
       left: 0,
@@ -84,11 +100,12 @@ function createSlotElement(): HTMLElement {
  * Mount the wrapper, set the element ref, and wait for slot registration.
  */
 async function mountAndRegisterSlot(type: 'input' | 'output') {
-  const wrapper = mount(createWrapperComponent(type))
-  wrapper.vm.el = createSlotElement()
+  const { el, TestComponent } = createTestSetup(type)
+  const { unmount } = render(TestComponent)
+  el.value = createSlotElement()
   await nextTick()
   flushScheduledSlotLayoutSync()
-  return wrapper
+  return { unmount }
 }
 
 describe('useSlotElementTracking', () => {
@@ -113,20 +130,22 @@ describe('useSlotElementTracking', () => {
       actor: 'test'
     })
     mockGraph._nodes = [{ id: 1 }]
+    mockCanvasState.canvas = {}
+    mockClientPosToCanvasPos.mockClear()
   })
 
   it.each([
     { type: 'input' as const, isInput: true },
     { type: 'output' as const, isInput: false }
   ])('cleans up $type slot layout on unmount', async ({ type, isInput }) => {
-    const wrapper = await mountAndRegisterSlot(type)
+    const { unmount } = await mountAndRegisterSlot(type)
 
     const slotKey = getSlotKey(NODE_ID, SLOT_INDEX, isInput)
     const registryStore = useNodeSlotRegistryStore()
     expect(registryStore.getNode(NODE_ID)?.slots.has(slotKey)).toBe(true)
     expect(layoutStore.getSlotLayout(slotKey)).not.toBeNull()
 
-    wrapper.unmount()
+    unmount()
 
     expect(layoutStore.getSlotLayout(slotKey)).toBeNull()
     expect(registryStore.getNode(NODE_ID)).toBeUndefined()
@@ -251,4 +270,57 @@ describe('useSlotElementTracking', () => {
 
     expect(batchUpdateSpy).not.toHaveBeenCalled()
   })
+
+  describe('collapsed node slot sync', () => {
+    function registerCollapsedSlot() {
+      const slotKey = getSlotKey(NODE_ID, SLOT_INDEX, true)
+      const slotEl = createSlotElement(true)
+
+      const registryStore = useNodeSlotRegistryStore()
+      const node = registryStore.ensureNode(NODE_ID)
+      node.slots.set(slotKey, {
+        el: slotEl,
+        index: SLOT_INDEX,
+        type: 'input',
+        cachedOffset: { x: 50, y: 60 }
+      })
+
+      return { slotKey, node }
+    }
+
+    it('uses clientPosToCanvasPos for collapsed nodes', () => {
+      const { slotKey } = registerCollapsedSlot()
+
+      syncNodeSlotLayoutsFromDOM(NODE_ID)
+
+      // Slot element center: (10 + 10/2, 30 + 10/2) = (15, 35)
+      const screenCenter: [number, number] = [15, 35]
+      expect(mockClientPosToCanvasPos).toHaveBeenCalledWith(screenCenter)
+
+      // Mock returns x*0.5, y*0.5
+      const layout = layoutStore.getSlotLayout(slotKey)
+      expect(layout).not.toBeNull()
+      expect(layout!.position.x).toBe(screenCenter[0] * 0.5)
+      expect(layout!.position.y).toBe(screenCenter[1] * 0.5)
+    })
+
+    it('clears cachedOffset for collapsed nodes', () => {
+      const { slotKey, node } = registerCollapsedSlot()
+      const entry = node.slots.get(slotKey)!
+      expect(entry.cachedOffset).toBeDefined()
+
+      syncNodeSlotLayoutsFromDOM(NODE_ID)
+
+      expect(entry.cachedOffset).toBeUndefined()
+    })
+
+    it('defers sync when canvas is not initialized', () => {
+      mockCanvasState.canvas = null
+      registerCollapsedSlot()
+
+      syncNodeSlotLayoutsFromDOM(NODE_ID)
+
+      expect(mockClientPosToCanvasPos).not.toHaveBeenCalled()
+    })
+  })
 })
diff --git a/src/renderer/extensions/vueNodes/composables/useSlotElementTracking.ts b/src/renderer/extensions/vueNodes/composables/useSlotElementTracking.ts
index e2c38b6ec4..9a4f440564 100644
--- a/src/renderer/extensions/vueNodes/composables/useSlotElementTracking.ts
+++ b/src/renderer/extensions/vueNodes/composables/useSlotElementTracking.ts
@@ -8,7 +8,9 @@
 import { onMounted, onUnmounted, watch } from 'vue'
 import type { Ref } from 'vue'
 
+import { useSharedCanvasPositionConversion } from '@/composables/element/useCanvasPositionConversion'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { getSlotKey } from '@/renderer/core/layout/slots/slotIdentifier'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { app } from '@/scripts/app'
@@ -134,11 +136,26 @@ export function syncNodeSlotLayoutsFromDOM(nodeId: string) {
     .value?.el.closest('[data-node-id]')
   const nodeEl = closestNode instanceof HTMLElement ? closestNode : null
   const nodeRect = nodeEl?.getBoundingClientRect()
+
+  // Collapsed nodes preserve expanded size in layoutStore, so DOM-relative
+  // scale derivation breaks. Fall back to clientPosToCanvasPos instead.
+  const isCollapsed = nodeEl?.dataset.collapsed != null
   const effectiveScale =
-    nodeRect && nodeLayout.size.width > 0
+    !isCollapsed && nodeRect && nodeLayout.size.width > 0
       ? nodeRect.width / nodeLayout.size.width
       : 0
 
+  const canvasStore = useCanvasStore()
+  const conv =
+    isCollapsed && canvasStore.canvas
+      ? useSharedCanvasPositionConversion()
+      : null
+
+  if (isCollapsed && !conv) {
+    scheduleSlotLayoutSync(nodeId)
+    return
+  }
+
   const batch: Array<{ key: string; layout: SlotLayout }> = []
 
   for (const [slotKey, entry] of node.slots) {
@@ -155,22 +172,30 @@ export function syncNodeSlotLayoutsFromDOM(nodeId: string) {
       rect.top + rect.height / 2
     ]
 
-    if (!nodeRect || effectiveScale <= 0) continue
+    let centerCanvas: { x: number; y: number }
 
-    // DOM-relative measurement: compute offset from the node element's
-    // top-left corner in canvas units. The node element is rendered at
-    // (position.x, position.y - NODE_TITLE_HEIGHT), so the Y offset
-    // must subtract NODE_TITLE_HEIGHT to be relative to position.y.
-    entry.cachedOffset = {
-      x: (screenCenter[0] - nodeRect.left) / effectiveScale,
-      y:
-        (screenCenter[1] - nodeRect.top) / effectiveScale -
-        LiteGraph.NODE_TITLE_HEIGHT
-    }
+    if (conv) {
+      const [cx, cy] = conv.clientPosToCanvasPos(screenCenter)
+      centerCanvas = { x: cx, y: cy }
+      entry.cachedOffset = undefined
+    } else {
+      if (!nodeRect || effectiveScale <= 0) continue
 
-    const centerCanvas = {
-      x: nodeLayout.position.x + entry.cachedOffset.x,
-      y: nodeLayout.position.y + entry.cachedOffset.y
+      // DOM-relative measurement: compute offset from the node element's
+      // top-left corner in canvas units. The node element is rendered at
+      // (position.x, position.y - NODE_TITLE_HEIGHT), so the Y offset
+      // must subtract NODE_TITLE_HEIGHT to be relative to position.y.
+      entry.cachedOffset = {
+        x: (screenCenter[0] - nodeRect.left) / effectiveScale,
+        y:
+          (screenCenter[1] - nodeRect.top) / effectiveScale -
+          LiteGraph.NODE_TITLE_HEIGHT
+      }
+
+      centerCanvas = {
+        x: nodeLayout.position.x + entry.cachedOffset.x,
+        y: nodeLayout.position.y + entry.cachedOffset.y
+      }
     }
 
     const nextLayout = createSlotLayout({
diff --git a/src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.autoPan.test.ts b/src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.autoPan.test.ts
index ceec6c7505..c01ddb2ac9 100644
--- a/src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.autoPan.test.ts
+++ b/src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.autoPan.test.ts
@@ -1,4 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { fromPartial } from '@total-typescript/shoehorn'
 
 const {
   capturedOnPan,
@@ -205,7 +206,7 @@ function pointerEvent(
   clientY: number,
   pointerId = 1
 ): PointerEvent {
-  return {
+  return fromPartial<PointerEvent>({
     clientX,
     clientY,
     button: 0,
@@ -217,7 +218,7 @@ function pointerEvent(
     target: document.createElement('div'),
     preventDefault: vi.fn(),
     stopPropagation: vi.fn()
-  } as unknown as PointerEvent
+  })
 }
 
 function startDrag() {
diff --git a/src/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking.test.ts b/src/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking.test.ts
index f60ce91988..91e857f9e8 100644
--- a/src/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking.test.ts
+++ b/src/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking.test.ts
@@ -181,7 +181,9 @@ describe('useVueNodeResizeTracking', () => {
 
     resizeObserverState.callback?.([entry], createObserverMock())
 
-    expect(rectSpy).toHaveBeenCalledTimes(1)
+    // When layout store already has correct position, getBoundingClientRect
+    // is not needed — position is read from the store instead.
+    expect(rectSpy).not.toHaveBeenCalled()
     expect(testState.setSource).not.toHaveBeenCalled()
     expect(testState.batchUpdateNodeBounds).not.toHaveBeenCalled()
     expect(testState.syncNodeSlotLayoutsFromDOM).not.toHaveBeenCalled()
@@ -192,13 +194,13 @@ describe('useVueNodeResizeTracking', () => {
 
     resizeObserverState.callback?.([entry], createObserverMock())
 
-    expect(rectSpy).toHaveBeenCalledTimes(1)
+    expect(rectSpy).not.toHaveBeenCalled()
     expect(testState.setSource).not.toHaveBeenCalled()
     expect(testState.batchUpdateNodeBounds).not.toHaveBeenCalled()
     expect(testState.syncNodeSlotLayoutsFromDOM).not.toHaveBeenCalled()
   })
 
-  it('updates bounds on first observation when size matches but position differs', () => {
+  it('preserves layout store position when size matches but DOM position differs', () => {
     const nodeId = 'test-node'
     const width = 240
     const height = 180
@@ -209,7 +211,6 @@ describe('useVueNodeResizeTracking', () => {
       left: 100,
       top: 200
     })
-    const titleHeight = LiteGraph.NODE_TITLE_HEIGHT
 
     seedNodeLayout({
       nodeId,
@@ -221,20 +222,10 @@ describe('useVueNodeResizeTracking', () => {
 
     resizeObserverState.callback?.([entry], createObserverMock())
 
-    expect(rectSpy).toHaveBeenCalledTimes(1)
-    expect(testState.setSource).toHaveBeenCalledWith(LayoutSource.DOM)
-    expect(testState.batchUpdateNodeBounds).toHaveBeenCalledWith([
-      {
-        nodeId,
-        bounds: {
-          x: 100,
-          y: 200 + titleHeight,
-          width,
-          height
-        }
-      }
-    ])
-    expect(testState.syncNodeSlotLayoutsFromDOM).toHaveBeenCalledWith(nodeId)
+    // Position from DOM should NOT override layout store position
+    expect(rectSpy).not.toHaveBeenCalled()
+    expect(testState.setSource).not.toHaveBeenCalled()
+    expect(testState.batchUpdateNodeBounds).not.toHaveBeenCalled()
   })
 
   it('updates node bounds + slot layouts when size changes', () => {
diff --git a/src/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking.ts b/src/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking.ts
index 7944694504..780d67ab5b 100644
--- a/src/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking.ts
+++ b/src/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking.ts
@@ -15,8 +15,8 @@ import { useDocumentVisibility } from '@vueuse/core'
 
 import { useSharedCanvasPositionConversion } from '@/composables/element/useCanvasPositionConversion'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
-import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import type { Bounds, NodeId } from '@/renderer/core/layout/types'
 import { LayoutSource } from '@/renderer/core/layout/types'
 import {
@@ -186,13 +186,26 @@ const resizeObserver = new ResizeObserver((entries) => {
       continue
     }
 
-    // Screen-space rect
-    const rect = element.getBoundingClientRect()
-    const [cx, cy] = conv.clientPosToCanvasPos([rect.left, rect.top])
-    const topLeftCanvas = { x: cx, y: cy }
+    // Use existing position from layout store (source of truth) rather than
+    // converting screen-space getBoundingClientRect() back to canvas coords.
+    // The DOM→canvas conversion depends on the current canvas scale/offset,
+    // which can be stale during graph transitions (e.g. entering a subgraph
+    // before fitView runs), producing corrupted positions.
+    const existingPos = nodeLayout?.position
+    let posX: number
+    let posY: number
+    if (existingPos) {
+      posX = existingPos.x
+      posY = existingPos.y
+    } else {
+      const rect = element.getBoundingClientRect()
+      const [cx, cy] = conv.clientPosToCanvasPos([rect.left, rect.top])
+      posX = cx
+      posY = cy + LiteGraph.NODE_TITLE_HEIGHT
+    }
     const bounds: Bounds = {
-      x: topLeftCanvas.x,
-      y: topLeftCanvas.y + LiteGraph.NODE_TITLE_HEIGHT,
+      x: posX,
+      y: posY,
       width,
       height
     }
diff --git a/src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.test.ts b/src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.test.ts
index 45ba85c1c6..3645006884 100644
--- a/src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.test.ts
+++ b/src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.test.ts
@@ -1,3 +1,4 @@
+import { fromAny } from '@total-typescript/shoehorn'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import type { LGraph, LGraphExtra } from '@/lib/litegraph/src/LGraph'
@@ -35,7 +36,7 @@ function createMockGraph(
 ): Partial<LGraph> {
   const graph: Partial<LGraph> = {
     id: crypto.randomUUID(),
-    nodes: nodes as unknown as LGraph['nodes'],
+    nodes: fromAny<LGraph['nodes'], unknown>(nodes),
     groups: [],
     reroutes: new Map() as LGraph['reroutes'],
     extra
diff --git a/src/renderer/extensions/vueNodes/layout/useNodeDrag.test.ts b/src/renderer/extensions/vueNodes/layout/useNodeDrag.test.ts
index 30acde6060..079ce78740 100644
--- a/src/renderer/extensions/vueNodes/layout/useNodeDrag.test.ts
+++ b/src/renderer/extensions/vueNodes/layout/useNodeDrag.test.ts
@@ -1,12 +1,20 @@
+import { fromPartial } from '@total-typescript/shoehorn'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
 import type { Ref } from 'vue'
+
 import type { NodeLayout } from '@/renderer/core/layout/types'
 
+// TODO: Simplify test setup — use real layoutStore + createTestingPinia instead
+// of manually mocking every dependency. See https://github.com/Comfy-Org/ComfyUI_frontend/issues/10765
 const testState = vi.hoisted(() => {
+  // Imports are unavailable inside vi.hoisted() so shoehorn's fromAny cannot
+  // be used here. This local identity function serves the same purpose
+  // (runtime no-op cast) until the test is rewritten to use real stores.
+  const placeholder = <T>(v: unknown): T => v as T
   return {
-    selectedNodeIds: null as unknown as Ref<Set<string>>,
-    selectedItems: null as unknown as Ref<unknown[]>,
+    selectedNodeIds: placeholder<Ref<Set<string>>>(null),
+    selectedItems: placeholder<Ref<unknown[]>>(null),
     nodeLayouts: new Map<string, Pick<NodeLayout, 'position' | 'size'>>(),
     mutationFns: {
       setSource: vi.fn(),
@@ -114,12 +122,7 @@ function pointerEvent(clientX: number, clientY: number): PointerEvent {
   const target = document.createElement('div')
   target.hasPointerCapture = vi.fn(() => false)
   target.setPointerCapture = vi.fn()
-  return {
-    clientX,
-    clientY,
-    target,
-    pointerId: 1
-  } as unknown as PointerEvent
+  return fromPartial<PointerEvent>({ clientX, clientY, target, pointerId: 1 })
 }
 
 describe('useNodeDrag', () => {
diff --git a/src/renderer/extensions/vueNodes/widgets/components/DisplayCarousel.test.ts b/src/renderer/extensions/vueNodes/widgets/components/DisplayCarousel.test.ts
index ef1657073c..309760ad1d 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/DisplayCarousel.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/DisplayCarousel.test.ts
@@ -1,11 +1,13 @@
+/* eslint-disable testing-library/no-node-access */
 import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
+import { fireEvent, render, screen } from '@testing-library/vue'
+import { fromAny } from '@total-typescript/shoehorn'
+import userEvent from '@testing-library/user-event'
 import { describe, expect, it, vi } from 'vitest'
 import { nextTick, ref } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
-
 import DisplayCarousel from './DisplayCarousel.vue'
 import type { GalleryImage, GalleryValue } from './DisplayCarousel.vue'
 import { createMockWidget } from './widgetTestUtils'
@@ -66,11 +68,11 @@ function createGalleriaWidget(
   })
 }
 
-function mountComponent(
+function renderComponent(
   widget: SimplifiedWidget<GalleryValue>,
   modelValue: GalleryValue
 ) {
-  return mount(DisplayCarousel, {
+  return render(DisplayCarousel, {
     global: {
       plugins: [createTestingPinia({ createSpy: vi.fn }), i18n]
     },
@@ -93,342 +95,424 @@ function createGalleriaWrapper(
   options: Record<string, unknown> = {}
 ) {
   const widget = createGalleriaWidget(images, options)
-  return mountComponent(widget, images)
+  return renderComponent(widget, images)
 }
 
-function findThumbnails(wrapper: ReturnType<typeof mount>) {
-  return wrapper.findAll('div').filter((div) => {
-    return div.find('img').exists() && div.classes().includes('border-2')
+function findThumbnails(container: Element) {
+  return Array.from(container.querySelectorAll('div')).filter((div) => {
+    return div.querySelector('img') && div.classList.contains('border-2')
   })
 }
 
-function findImageContainer(wrapper: ReturnType<typeof mount>) {
-  return wrapper.find('[tabindex="0"]')
+function findImageContainer(container: Element) {
+  return container.querySelector('[tabindex="0"]') as HTMLElement
+}
+
+function findGridButtons(container: Element) {
+  return Array.from(container.querySelectorAll('button')).filter((btn) =>
+    btn.querySelector('img')
+  )
 }
 
 describe('DisplayCarousel Single Mode', () => {
   describe('Component Rendering', () => {
     it('renders main image', () => {
-      const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL])
+      createGalleriaWrapper([...TEST_IMAGES_SMALL])
 
-      const img = wrapper.find('img')
-      expect(img.exists()).toBe(true)
-      expect(img.attributes('src')).toBe(TEST_IMAGES_SMALL[0])
+      const img = screen.getAllByRole('img')[0]
+      expect(img).toHaveAttribute('src', TEST_IMAGES_SMALL[0])
     })
 
     it('displays empty gallery when no images provided', () => {
-      const wrapper = createGalleriaWrapper([])
+      createGalleriaWrapper([])
 
-      expect(wrapper.find('img').exists()).toBe(false)
+      expect(screen.queryByRole('img')).not.toBeInTheDocument()
     })
 
     it('handles null value gracefully', () => {
       const widget = createGalleriaWidget([])
-      const wrapper = mountComponent(widget, null as unknown as GalleryValue)
+      renderComponent(widget, fromAny<GalleryValue, unknown>(null))
 
-      expect(wrapper.find('img').exists()).toBe(false)
+      expect(screen.queryByRole('img')).not.toBeInTheDocument()
     })
 
     it('handles undefined value gracefully', () => {
       const widget = createGalleriaWidget([])
-      const wrapper = mountComponent(
-        widget,
-        undefined as unknown as GalleryValue
-      )
+      renderComponent(widget, fromAny<GalleryValue, unknown>(undefined))
 
-      expect(wrapper.find('img').exists()).toBe(false)
+      expect(screen.queryByRole('img')).not.toBeInTheDocument()
     })
   })
 
   describe('String Array Input', () => {
     it('converts string array to image objects and displays first', () => {
-      const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL])
+      createGalleriaWrapper([...TEST_IMAGES_SMALL])
 
-      const img = wrapper.find('img')
-      expect(img.attributes('src')).toBe('https://example.com/image0.jpg')
+      const img = screen.getAllByRole('img')[0]
+      expect(img).toHaveAttribute('src', 'https://example.com/image0.jpg')
     })
 
     it('handles single string image', () => {
-      const wrapper = createGalleriaWrapper([...TEST_IMAGES_SINGLE])
+      createGalleriaWrapper([...TEST_IMAGES_SINGLE])
 
-      const img = wrapper.find('img')
-      expect(img.attributes('src')).toBe('https://example.com/single.jpg')
+      const img = screen.getByRole('img')
+      expect(img).toHaveAttribute('src', 'https://example.com/single.jpg')
     })
   })
 
   describe('Object Array Input', () => {
     it('preserves image objects and displays first', () => {
-      const wrapper = createGalleriaWrapper([...TEST_IMAGE_OBJECTS])
+      createGalleriaWrapper([...TEST_IMAGE_OBJECTS])
 
-      const img = wrapper.find('img')
-      expect(img.attributes('src')).toBe('https://example.com/image0.jpg')
-      expect(img.attributes('alt')).toBe('Test image 0')
+      const img = screen.getAllByRole('img')[0]
+      expect(img).toHaveAttribute('src', 'https://example.com/image0.jpg')
+      expect(img).toHaveAttribute('alt', 'Test image 0')
     })
 
     it('handles mixed object properties with src fallback', () => {
       const images: GalleryImage[] = [
         { src: 'https://example.com/image1.jpg', alt: 'First' }
       ]
-      const wrapper = createGalleriaWrapper(images)
+      createGalleriaWrapper(images)
 
-      const img = wrapper.find('img')
-      expect(img.attributes('src')).toBe('https://example.com/image1.jpg')
+      const img = screen.getByRole('img')
+      expect(img).toHaveAttribute('src', 'https://example.com/image1.jpg')
     })
   })
 
   describe('Thumbnail Display', () => {
     it('shows thumbnails when multiple images present', () => {
-      const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL])
+      const { container } = createGalleriaWrapper([...TEST_IMAGES_SMALL])
 
-      const thumbnailButtons = findThumbnails(wrapper)
+      const thumbnailButtons = findThumbnails(container)
       expect(thumbnailButtons).toHaveLength(3)
     })
 
     it('hides thumbnails for single image', () => {
-      const wrapper = createGalleriaWrapper([...TEST_IMAGES_SINGLE])
+      const { container } = createGalleriaWrapper([...TEST_IMAGES_SINGLE])
 
-      const thumbnailButtons = findThumbnails(wrapper)
+      const thumbnailButtons = findThumbnails(container)
       expect(thumbnailButtons).toHaveLength(0)
     })
 
     it('thumbnails are not interactive', () => {
-      const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL])
+      const { container } = createGalleriaWrapper([...TEST_IMAGES_SMALL])
 
-      const thumbnails = findThumbnails(wrapper)
-      expect(thumbnails[0].element.tagName).not.toBe('BUTTON')
+      const thumbnails = findThumbnails(container)
+      expect(thumbnails[0].tagName).not.toBe('BUTTON')
     })
   })
 
   describe('Navigation Buttons', () => {
     it('shows navigation buttons when multiple images present', () => {
-      const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL])
+      createGalleriaWrapper([...TEST_IMAGES_SMALL])
 
-      expect(wrapper.find('[aria-label="Previous image"]').exists()).toBe(true)
-      expect(wrapper.find('[aria-label="Next image"]').exists()).toBe(true)
+      expect(
+        screen.getByRole('button', { name: 'Previous image' })
+      ).toBeInTheDocument()
+      expect(
+        screen.getByRole('button', { name: 'Next image' })
+      ).toBeInTheDocument()
     })
 
     it('hides navigation buttons for single image', () => {
-      const wrapper = createGalleriaWrapper([...TEST_IMAGES_SINGLE])
+      createGalleriaWrapper([...TEST_IMAGES_SINGLE])
 
-      expect(wrapper.find('[aria-label="Previous image"]').exists()).toBe(false)
-      expect(wrapper.find('[aria-label="Next image"]').exists()).toBe(false)
+      expect(
+        screen.queryByRole('button', { name: 'Previous image' })
+      ).not.toBeInTheDocument()
+      expect(
+        screen.queryByRole('button', { name: 'Next image' })
+      ).not.toBeInTheDocument()
     })
 
     it('respects widget option to hide navigation buttons', () => {
-      const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL], {
+      createGalleriaWrapper([...TEST_IMAGES_SMALL], {
         showItemNavigators: false
       })
 
-      expect(wrapper.find('[aria-label="Previous image"]').exists()).toBe(false)
+      expect(
+        screen.queryByRole('button', { name: 'Previous image' })
+      ).not.toBeInTheDocument()
     })
 
     it('navigates to next image on next click', async () => {
-      const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL])
+      createGalleriaWrapper([...TEST_IMAGES_SMALL])
+      const user = userEvent.setup()
 
-      await wrapper.find('[aria-label="Next image"]').trigger('click')
+      await user.click(screen.getByRole('button', { name: 'Next image' }))
       await nextTick()
 
-      const mainImg = wrapper.findAll('img')[0]
-      expect(mainImg.attributes('src')).toBe('https://example.com/image1.jpg')
+      const mainImg = screen.getAllByRole('img')[0]
+      expect(mainImg).toHaveAttribute('src', 'https://example.com/image1.jpg')
     })
 
     it('navigates to previous image on prev click', async () => {
-      const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL])
+      createGalleriaWrapper([...TEST_IMAGES_SMALL])
+      const user = userEvent.setup()
 
       // Go to second image first
-      await wrapper.find('[aria-label="Next image"]').trigger('click')
+      await user.click(screen.getByRole('button', { name: 'Next image' }))
       await nextTick()
 
       // Go back
-      await wrapper.find('[aria-label="Previous image"]').trigger('click')
+      await user.click(screen.getByRole('button', { name: 'Previous image' }))
       await nextTick()
 
-      const mainImg = wrapper.findAll('img')[0]
-      expect(mainImg.attributes('src')).toBe('https://example.com/image0.jpg')
+      const mainImg = screen.getAllByRole('img')[0]
+      expect(mainImg).toHaveAttribute('src', 'https://example.com/image0.jpg')
     })
 
     it('wraps from first to last image on previous click', async () => {
-      const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL])
+      createGalleriaWrapper([...TEST_IMAGES_SMALL])
+      const user = userEvent.setup()
 
-      await wrapper.find('[aria-label="Previous image"]').trigger('click')
+      await user.click(screen.getByRole('button', { name: 'Previous image' }))
       await nextTick()
 
-      const mainImg = wrapper.findAll('img')[0]
-      expect(mainImg.attributes('src')).toBe('https://example.com/image2.jpg')
+      const mainImg = screen.getAllByRole('img')[0]
+      expect(mainImg).toHaveAttribute('src', 'https://example.com/image2.jpg')
     })
 
     it('wraps from last to first image on next click', async () => {
-      const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL])
+      createGalleriaWrapper([...TEST_IMAGES_SMALL])
+      const user = userEvent.setup()
 
       // Navigate to last image
-      await wrapper.find('[aria-label="Next image"]').trigger('click')
-      await wrapper.find('[aria-label="Next image"]').trigger('click')
+      await user.click(screen.getByRole('button', { name: 'Next image' }))
+      await user.click(screen.getByRole('button', { name: 'Next image' }))
       await nextTick()
 
       // Next from last should wrap to first
-      await wrapper.find('[aria-label="Next image"]').trigger('click')
+      await user.click(screen.getByRole('button', { name: 'Next image' }))
       await nextTick()
 
-      const mainImg = wrapper.findAll('img')[0]
-      expect(mainImg.attributes('src')).toBe('https://example.com/image0.jpg')
+      const mainImg = screen.getAllByRole('img')[0]
+      expect(mainImg).toHaveAttribute('src', 'https://example.com/image0.jpg')
     })
   })
 })
 
 describe('DisplayCarousel Accessibility', () => {
   it('shows controls on focusin for keyboard users', async () => {
-    const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL])
+    const { container } = createGalleriaWrapper([...TEST_IMAGES_SMALL])
 
-    await findImageContainer(wrapper).trigger('focusin')
+    await fireEvent.focusIn(findImageContainer(container))
     await nextTick()
 
-    expect(wrapper.find('[aria-label="Switch to grid view"]').exists()).toBe(
-      true
-    )
-    expect(wrapper.find('[aria-label="Edit or mask image"]').exists()).toBe(
-      true
-    )
+    expect(
+      screen.getByRole('button', { name: 'Switch to grid view' })
+    ).toBeInTheDocument()
+    expect(
+      screen.getByRole('button', { name: 'Edit or mask image' })
+    ).toBeInTheDocument()
   })
 
   it('hides controls on focusout when focus leaves component', async () => {
-    const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL])
+    const { container } = createGalleriaWrapper([...TEST_IMAGES_SMALL])
 
-    await findImageContainer(wrapper).trigger('focusin')
+    await fireEvent.focusIn(findImageContainer(container))
     await nextTick()
 
     // Focus leaves the image container entirely
-    await findImageContainer(wrapper).trigger('focusout', {
+    await fireEvent.focusOut(findImageContainer(container), {
       relatedTarget: null
     })
     await nextTick()
 
-    expect(wrapper.find('[aria-label="Switch to grid view"]').exists()).toBe(
-      false
-    )
+    expect(
+      screen.queryByRole('button', { name: 'Switch to grid view' })
+    ).not.toBeInTheDocument()
   })
 })
 
 describe('DisplayCarousel Grid Mode', () => {
   it('switches to grid mode via toggle button on hover', async () => {
-    const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL])
+    const { container } = createGalleriaWrapper([...TEST_IMAGES_SMALL])
+    const user = userEvent.setup()
 
     // Trigger focus on image container to reveal toggle button
-    await findImageContainer(wrapper).trigger('focusin')
+    await fireEvent.focusIn(findImageContainer(container))
     await nextTick()
 
-    const toggleBtn = wrapper.find('[aria-label="Switch to grid view"]')
-    expect(toggleBtn.exists()).toBe(true)
+    const toggleBtn = screen.getByRole('button', {
+      name: 'Switch to grid view'
+    })
+    expect(toggleBtn).toBeInTheDocument()
 
-    await toggleBtn.trigger('click')
+    await user.click(toggleBtn)
     await nextTick()
 
     // Grid mode should show all images as grid items
-    const gridImages = wrapper.findAll('img')
+    const gridImages = screen.getAllByRole('img')
     expect(gridImages).toHaveLength(TEST_IMAGES_SMALL.length)
   })
 
   it('does not show grid toggle for single image', async () => {
-    const wrapper = createGalleriaWrapper([...TEST_IMAGES_SINGLE])
+    const { container } = createGalleriaWrapper([...TEST_IMAGES_SINGLE])
 
-    await findImageContainer(wrapper).trigger('focusin')
+    await fireEvent.focusIn(findImageContainer(container))
     await nextTick()
 
-    expect(wrapper.find('[aria-label="Switch to grid view"]').exists()).toBe(
-      false
-    )
+    expect(
+      screen.queryByRole('button', { name: 'Switch to grid view' })
+    ).not.toBeInTheDocument()
   })
 
-  it('switches back to single mode via toggle button', async () => {
-    const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL])
+  it('grid mode has no overlay icons', async () => {
+    const { container } = createGalleriaWrapper([...TEST_IMAGES_SMALL])
+    const user = userEvent.setup()
 
     // Switch to grid via focus on image container
-    await findImageContainer(wrapper).trigger('focusin')
+    await fireEvent.focusIn(findImageContainer(container))
     await nextTick()
-    await wrapper.find('[aria-label="Switch to grid view"]').trigger('click')
+    await user.click(
+      screen.getByRole('button', { name: 'Switch to grid view' })
+    )
     await nextTick()
 
-    // Focus the grid container to reveal toggle
-    await findImageContainer(wrapper).trigger('focusin')
+    // Grid mode should have no toggle/back button
+    expect(
+      screen.queryByRole('button', { name: 'Switch to single view' })
+    ).not.toBeInTheDocument()
+    expect(
+      screen.queryByRole('button', { name: 'Switch to grid view' })
+    ).not.toBeInTheDocument()
+  })
+
+  it('always uses undo-2 icon for grid toggle button', async () => {
+    const { container } = createGalleriaWrapper([...TEST_IMAGES_SMALL])
+    const user = userEvent.setup()
+
+    // Show controls
+    await fireEvent.focusIn(findImageContainer(container))
     await nextTick()
 
-    // Switch back to single
-    const singleToggle = wrapper.find('[aria-label="Switch to single view"]')
-    expect(singleToggle.exists()).toBe(true)
+    const toggleBtn = screen.getByRole('button', {
+      name: 'Switch to grid view'
+    })
+    const icon = toggleBtn.querySelector('i')
+    expect(icon!.classList.contains('icon-[lucide--undo-2]')).toBe(true)
 
-    await singleToggle.trigger('click')
+    // Switch to grid and back
+    await user.click(toggleBtn)
     await nextTick()
 
-    // Should be back in single mode with main image
-    expect(wrapper.find('[aria-label="Previous image"]').exists()).toBe(true)
+    const gridButtons = findGridButtons(container)
+    await user.click(gridButtons[0])
+    await nextTick()
+
+    await fireEvent.focusIn(findImageContainer(container))
+    await nextTick()
+
+    // Icon should still be undo-2
+    const toggleBtnAfter = screen.getByRole('button', {
+      name: 'Switch to grid view'
+    })
+    const iconAfter = toggleBtnAfter.querySelector('i')
+    expect(iconAfter!.classList.contains('icon-[lucide--undo-2]')).toBe(true)
+  })
+
+  it('shows grid button in single mode after selecting from grid', async () => {
+    const { container } = createGalleriaWrapper([...TEST_IMAGES_SMALL])
+    const user = userEvent.setup()
+
+    // Switch to grid
+    await fireEvent.focusIn(findImageContainer(container))
+    await nextTick()
+    await user.click(
+      screen.getByRole('button', { name: 'Switch to grid view' })
+    )
+    await nextTick()
+
+    // Click first grid image to go back to single mode
+    const gridButtons = findGridButtons(container)
+    await user.click(gridButtons[0])
+    await nextTick()
+
+    // Hover to reveal controls
+    await fireEvent.focusIn(findImageContainer(container))
+    await nextTick()
+
+    // Should still show grid view button (same icon always)
+    expect(
+      screen.getByRole('button', { name: 'Switch to grid view' })
+    ).toBeInTheDocument()
   })
 
   it('clicking grid image switches to single mode focused on that image', async () => {
-    const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL])
+    const { container } = createGalleriaWrapper([...TEST_IMAGES_SMALL])
+    const user = userEvent.setup()
 
     // Switch to grid via focus on image container
-    await findImageContainer(wrapper).trigger('focusin')
+    await fireEvent.focusIn(findImageContainer(container))
     await nextTick()
-    await wrapper.find('[aria-label="Switch to grid view"]').trigger('click')
+    await user.click(
+      screen.getByRole('button', { name: 'Switch to grid view' })
+    )
     await nextTick()
 
     // Click second grid image
-    const gridButtons = wrapper
-      .findAll('button')
-      .filter((btn) => btn.find('img').exists())
-    await gridButtons[1].trigger('click')
+    const gridButtons = findGridButtons(container)
+    await user.click(gridButtons[1])
     await nextTick()
 
     // Should be in single mode showing the second image
-    const mainImg = wrapper.findAll('img')[0]
-    expect(mainImg.attributes('src')).toBe('https://example.com/image1.jpg')
+    const mainImg = screen.getAllByRole('img')[0]
+    expect(mainImg).toHaveAttribute('src', 'https://example.com/image1.jpg')
   })
 
   it('reverts to single mode when images reduce to one', async () => {
     const images = ref<GalleryValue>([...TEST_IMAGES_SMALL])
     const widget = createGalleriaWidget([...TEST_IMAGES_SMALL])
-    const wrapper = mount(DisplayCarousel, {
-      global: { plugins: [createTestingPinia({ createSpy: vi.fn }), i18n] },
+    const { container, rerender } = render(DisplayCarousel, {
+      global: {
+        plugins: [createTestingPinia({ createSpy: vi.fn }), i18n]
+      },
       props: { widget, modelValue: images.value }
     })
 
     // Switch to grid via focus on image container
-    await findImageContainer(wrapper).trigger('focusin')
+    await fireEvent.focusIn(findImageContainer(container))
     await nextTick()
-    await wrapper.find('[aria-label="Switch to grid view"]').trigger('click')
+    const user = userEvent.setup()
+    await user.click(
+      screen.getByRole('button', { name: 'Switch to grid view' })
+    )
     await nextTick()
 
     // Reduce to single image
-    await wrapper.setProps({ modelValue: [TEST_IMAGES_SMALL[0]] })
+    await rerender({ widget, modelValue: [TEST_IMAGES_SMALL[0]] })
     await nextTick()
 
-    // Should revert to single mode (no grid toggle visible)
-    expect(wrapper.find('[aria-label="Switch to single view"]').exists()).toBe(
-      false
-    )
+    // Should revert to single mode (single image, no grid button)
+    expect(
+      screen.queryByRole('button', { name: 'Switch to grid view' })
+    ).not.toBeInTheDocument()
   })
 })
 
 describe('DisplayCarousel Edge Cases', () => {
   it('handles empty array gracefully', () => {
-    const wrapper = createGalleriaWrapper([])
+    const { container } = createGalleriaWrapper([])
 
-    expect(wrapper.find('img').exists()).toBe(false)
-    expect(findThumbnails(wrapper)).toHaveLength(0)
+    expect(screen.queryByRole('img')).not.toBeInTheDocument()
+    expect(findThumbnails(container)).toHaveLength(0)
   })
 
   it('filters out malformed image objects without valid src', () => {
     const malformedImages = [{}, { randomProp: 'value' }, null, undefined]
-    const wrapper = createGalleriaWrapper(malformedImages as string[])
+    createGalleriaWrapper(malformedImages as string[])
 
     // All filtered out: null/undefined removed, then objects without src filtered
-    expect(wrapper.find('img').exists()).toBe(false)
+    expect(screen.queryByRole('img')).not.toBeInTheDocument()
   })
 
   it('handles very large image arrays', () => {
     const largeImageArray = createImageStrings(100)
-    const wrapper = createGalleriaWrapper(largeImageArray)
+    const { container } = createGalleriaWrapper(largeImageArray)
 
-    const thumbnailButtons = findThumbnails(wrapper)
+    const thumbnailButtons = findThumbnails(container)
     expect(thumbnailButtons).toHaveLength(100)
   })
 
@@ -443,13 +527,13 @@ describe('DisplayCarousel Edge Cases', () => {
 
   it('handles invalid URL strings without crashing', () => {
     const invalidUrls = ['not-a-url', 'http://', 'ftp://invalid']
-    const wrapper = createGalleriaWrapper(invalidUrls)
+    createGalleriaWrapper(invalidUrls)
 
-    expect(wrapper.find('img').exists()).toBe(true)
+    expect(screen.getAllByRole('img').length).toBeGreaterThan(0)
   })
 
   it('filters out empty string URLs', () => {
-    const wrapper = createGalleriaWrapper([''])
-    expect(wrapper.find('img').exists()).toBe(false)
+    createGalleriaWrapper([''])
+    expect(screen.queryByRole('img')).not.toBeInTheDocument()
   })
 })
diff --git a/src/renderer/extensions/vueNodes/widgets/components/DisplayCarousel.vue b/src/renderer/extensions/vueNodes/widgets/components/DisplayCarousel.vue
index f2eb472352..22c5746551 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/DisplayCarousel.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/DisplayCarousel.vue
@@ -36,7 +36,7 @@
             :aria-label="t('g.switchToGridView')"
             @click="switchToGrid"
           >
-            <i class="icon-[lucide--layout-grid] size-4" />
+            <i class="icon-[lucide--undo-2] size-4" />
           </button>
 
           <!-- Action Buttons (hover, top-right) -->
@@ -142,41 +142,19 @@
           ref="gridContainerEl"
           class="relative h-72 overflow-x-hidden overflow-y-auto rounded-sm bg-component-node-background"
           tabindex="0"
-          @mouseenter="isHovered = true"
-          @mouseleave="isHovered = false"
-          @focusin="isFocused = true"
-          @focusout="handleFocusOut"
         >
-          <!-- Toggle to Single (hover, top-left) -->
-          <button
-            v-if="showControls"
-            :class="toggleButtonClass"
-            class="absolute top-2 left-2 z-10"
-            :aria-label="t('g.switchToSingleView')"
-            @click="switchToSingle"
-          >
-            <i class="icon-[lucide--square] size-4" />
-          </button>
-
           <div class="flex flex-wrap content-start gap-1">
             <button
               v-for="(item, index) in galleryImages"
               :key="getItemSrc(item)"
               class="size-14 shrink-0 cursor-pointer overflow-hidden border-0 p-0"
               :aria-label="getItemAlt(item, index)"
-              @mouseenter="hoveredGridIndex = index"
-              @mouseleave="hoveredGridIndex = -1"
               @click="selectFromGrid(index)"
             >
               <img
                 :src="getItemThumbnail(item)"
                 :alt="getItemAlt(item, index)"
-                :class="
-                  cn(
-                    'size-full object-cover transition-opacity',
-                    hoveredGridIndex === index && 'opacity-50'
-                  )
-                "
+                class="size-full object-cover"
               />
             </button>
           </div>
@@ -229,7 +207,6 @@ const activeIndex = ref(0)
 const displayMode = ref<DisplayMode>('single')
 const isHovered = ref(false)
 const isFocused = ref(false)
-const hoveredGridIndex = ref(-1)
 const imageDimensions = ref<string | null>(null)
 const thumbnailRefs = ref<(HTMLElement | null)[]>([])
 const imageContainerEl = ref<HTMLDivElement>()
@@ -359,11 +336,6 @@ function switchToGrid() {
   displayMode.value = 'grid'
 }
 
-function switchToSingle() {
-  isHovered.value = false
-  displayMode.value = 'single'
-}
-
 function selectFromGrid(index: number) {
   activeIndex.value = index
   imageDimensions.value = null
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.test.ts
index 4ff51ce96f..5db1007973 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.test.ts
@@ -1,7 +1,7 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { describe, expect, it, vi } from 'vitest'
 
-import Button from '@/components/ui/button/Button.vue'
 import type { IWidgetOptions } from '@/lib/litegraph/src/types/widgets'
 import WidgetButton from '@/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
@@ -19,26 +19,36 @@ const BUTTON_DEFAULTS = {
   name: 'test_button'
 } as const
 
+const ButtonStub = {
+  name: 'Button',
+  props: ['size', 'variant', 'disabled'],
+  template:
+    '<button :data-size="size" :data-variant="variant" :disabled="disabled"><slot /></button>'
+}
+
 describe('WidgetButton Interactions', () => {
   const createButtonWidget = (
     overrides: Partial<SimplifiedWidget<void, ButtonWidgetOptions>> = {}
   ) => createMockWidget<void>({ ...BUTTON_DEFAULTS, ...overrides })
 
-  const mountComponent = (widget: SimplifiedWidget<void>, readonly = false) => {
-    return mount(WidgetButton, {
+  const mountComponent = (widget: SimplifiedWidget<void>) => {
+    const user = userEvent.setup()
+    const result = render(WidgetButton, {
       global: {
-        components: { Button }
+        stubs: {
+          Button: ButtonStub
+        }
       },
       props: {
-        widget,
-        readonly
+        widget
       }
     })
+    return { ...result, user }
   }
 
-  const clickButton = async (wrapper: ReturnType<typeof mount>) => {
-    const button = wrapper.findComponent({ name: 'Button' })
-    await button.trigger('click')
+  const clickButton = async (user: ReturnType<typeof userEvent.setup>) => {
+    const button = screen.getByRole('button')
+    await user.click(button)
     return button
   }
 
@@ -46,30 +56,29 @@ describe('WidgetButton Interactions', () => {
     it('calls callback when button is clicked', async () => {
       const mockCallback = vi.fn()
       const widget = createButtonWidget({ callback: mockCallback })
-      const wrapper = mountComponent(widget)
+      const { user } = mountComponent(widget)
 
-      await clickButton(wrapper)
+      await clickButton(user)
 
       expect(mockCallback).toHaveBeenCalledTimes(1)
     })
 
     it('handles missing callback gracefully', async () => {
       const widget = createButtonWidget()
-      const wrapper = mountComponent(widget)
+      const { user } = mountComponent(widget)
 
-      // Should not throw error when clicking without callback
-      await expect(clickButton(wrapper)).resolves.toBeDefined()
+      await expect(clickButton(user)).resolves.toBeDefined()
     })
 
     it('calls callback multiple times when clicked multiple times', async () => {
       const mockCallback = vi.fn()
       const widget = createButtonWidget({ callback: mockCallback })
-      const wrapper = mountComponent(widget)
+      const { user } = mountComponent(widget)
 
       const numClicks = 8
 
       for (let i = 0; i < numClicks; i++) {
-        await clickButton(wrapper)
+        await clickButton(user)
       }
 
       expect(mockCallback).toHaveBeenCalledTimes(numClicks)
@@ -79,35 +88,34 @@ describe('WidgetButton Interactions', () => {
   describe('Component Rendering', () => {
     it('renders button component', () => {
       const widget = createButtonWidget()
-      const wrapper = mountComponent(widget)
+      mountComponent(widget)
 
-      const button = wrapper.findComponent({ name: 'Button' })
-      expect(button.exists()).toBe(true)
+      expect(screen.getByRole('button')).toBeDefined()
     })
 
     it('renders widget text when name is provided', () => {
       const widget = createButtonWidget()
-      const wrapper = mountComponent(widget)
+      mountComponent(widget)
 
-      expect(wrapper.text()).toBe('test_button')
+      expect(screen.getByRole('button')).toHaveTextContent('test_button')
     })
 
     it('sets button size to sm', () => {
       const widget = createButtonWidget()
-      const wrapper = mountComponent(widget)
+      mountComponent(widget)
 
-      const button = wrapper.findComponent({ name: 'Button' })
-      expect(button.props('size')).toBe('sm')
+      expect(screen.getByRole('button').getAttribute('data-size')).toBe('sm')
     })
 
     it('passes widget options to button component', () => {
       const widget = createButtonWidget({
         options: { variant: 'secondary' }
       })
-      const wrapper = mountComponent(widget)
+      mountComponent(widget)
 
-      const button = wrapper.findComponent({ name: 'Button' })
-      expect(button.props('variant')).toBe('secondary')
+      expect(screen.getByRole('button').getAttribute('data-variant')).toBe(
+        'secondary'
+      )
     })
   })
 
@@ -118,19 +126,19 @@ describe('WidgetButton Interactions', () => {
         label: 'Click Me',
         options: { label: 'Click Me' }
       })
-      const wrapper = mountComponent(widget)
+      mountComponent(widget)
 
-      expect(wrapper.text()).toBe('Click Me')
+      expect(screen.getByRole('button')).toHaveTextContent('Click Me')
     })
 
     it('handles button with iconClass', () => {
       const widget = createButtonWidget({
         options: { iconClass: 'pi pi-star' }
       })
-      const wrapper = mountComponent(widget)
+      const { container } = mountComponent(widget)
 
-      const icon = wrapper.find('i.pi.pi-star')
-      expect(icon.exists()).toBe(true)
+      // eslint-disable-next-line testing-library/no-node-access
+      expect(container.querySelector('i.pi.pi-star')).not.toBeNull()
     })
 
     it('handles button with both label and iconClass', () => {
@@ -138,20 +146,21 @@ describe('WidgetButton Interactions', () => {
         label: 'Save',
         options: { iconClass: 'pi pi-save' }
       })
-      const wrapper = mountComponent(widget)
+      const { container } = mountComponent(widget)
 
-      expect(wrapper.text()).toBe('Save')
-      const icon = wrapper.find('i.pi.pi-save')
-      expect(icon.exists()).toBe(true)
+      expect(screen.getByRole('button')).toHaveTextContent('Save')
+      // eslint-disable-next-line testing-library/no-node-access
+      expect(container.querySelector('i.pi.pi-save')).not.toBeNull()
     })
 
     it.for(['secondary', 'primary', 'inverted', 'textonly'] as const)(
       'handles button variant: %s',
       (variant) => {
         const widget = createButtonWidget({ options: { variant } })
-        const wrapper = mountComponent(widget)
-        const button = wrapper.findComponent({ name: 'Button' })
-        expect(button.props('variant')).toBe(variant)
+        mountComponent(widget)
+        expect(screen.getByRole('button').getAttribute('data-variant')).toBe(
+          variant
+        )
       }
     )
   })
@@ -159,10 +168,9 @@ describe('WidgetButton Interactions', () => {
   describe('Edge Cases', () => {
     it('handles widget with no options', () => {
       const widget = createButtonWidget()
-      const wrapper = mountComponent(widget)
+      mountComponent(widget)
 
-      const button = wrapper.findComponent({ name: 'Button' })
-      expect(button.exists()).toBe(true)
+      expect(screen.getByRole('button')).toBeDefined()
     })
 
     it('handles callback that throws error', async () => {
@@ -170,23 +178,20 @@ describe('WidgetButton Interactions', () => {
         throw new Error('Callback error')
       })
       const widget = createButtonWidget({ callback: mockCallback })
-      const wrapper = mountComponent(widget)
+      const { user } = mountComponent(widget)
 
-      // Should not break the component when callback throws
-      await expect(clickButton(wrapper)).rejects.toThrow('Callback error')
+      await expect(clickButton(user)).rejects.toThrow('Callback error')
       expect(mockCallback).toHaveBeenCalledTimes(1)
     })
 
     it('handles rapid consecutive clicks', async () => {
       const mockCallback = vi.fn()
       const widget = createButtonWidget({ callback: mockCallback })
-      const wrapper = mountComponent(widget)
+      const { user } = mountComponent(widget)
 
-      // Simulate rapid clicks
-      const clickPromises = Array.from({ length: 16 }, () =>
-        clickButton(wrapper)
-      )
-      await Promise.all(clickPromises)
+      for (let i = 0; i < 16; i++) {
+        await clickButton(user)
+      }
 
       expect(mockCallback).toHaveBeenCalledTimes(16)
     })
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.test.ts
index c07083a3b1..67460e8062 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.test.ts
@@ -1,13 +1,35 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
+/* eslint-disable vue/one-component-per-file */
+/* eslint-disable vue/no-unused-emit-declarations */
+import { fireEvent, render, screen } from '@testing-library/vue'
+import { defineComponent } from 'vue'
+import { describe, expect, it, vi } from 'vitest'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
-import ColorPicker from '@/components/ui/color-picker/ColorPicker.vue'
-
 import WidgetColorPicker from './WidgetColorPicker.vue'
 import { createMockWidget } from './widgetTestUtils'
-import WidgetLayoutField from './layout/WidgetLayoutField.vue'
+
+const WidgetLayoutFieldStub = defineComponent({
+  name: 'WidgetLayoutField',
+  props: {
+    widget: { type: Object, default: () => ({}) }
+  },
+  template:
+    '<div data-testid="layout-field" :data-widget-name="widget.name"><slot /></div>'
+})
+
+const ColorPickerStub = defineComponent({
+  name: 'ColorPicker',
+  props: {
+    modelValue: { type: String, default: '' }
+  },
+  emits: ['update:modelValue'],
+  template: `<input
+    data-testid="color-picker-input"
+    :value="modelValue"
+    @input="$emit('update:modelValue', $event.target.value)"
+  />`
+})
 
 describe('WidgetColorPicker Value Binding', () => {
   const createColorWidget = (
@@ -23,118 +45,98 @@ describe('WidgetColorPicker Value Binding', () => {
       callback
     })
 
-  const mountComponent = (
+  const renderComponent = (
     widget: SimplifiedWidget<string>,
-    modelValue: string
+    modelValue: string,
+    extraProps: Record<string, unknown> = {}
   ) => {
-    return mount(WidgetColorPicker, {
+    return render(WidgetColorPicker, {
       global: {
-        components: {
-          ColorPicker,
-          WidgetLayoutField
+        stubs: {
+          ColorPicker: ColorPickerStub,
+          WidgetLayoutField: WidgetLayoutFieldStub
         }
       },
       props: {
         widget,
-        modelValue
+        modelValue,
+        ...extraProps
       }
     })
   }
 
   describe('Vue Event Emission', () => {
     it('emits Vue event when color changes', async () => {
+      const onUpdateModelValue = vi.fn()
       const widget = createColorWidget('#ff0000')
-      const wrapper = mountComponent(widget, '#ff0000')
+      renderComponent(widget, '#ff0000', {
+        'onUpdate:modelValue': onUpdateModelValue
+      })
 
-      const colorPicker = wrapper.findComponent(ColorPicker)
-      await colorPicker.vm.$emit('update:modelValue', '#00ff00')
+      const input = screen.getByTestId('color-picker-input')
+      await fireEvent.update(input, '#00ff00')
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toContain('#00ff00')
+      expect(onUpdateModelValue).toHaveBeenCalledWith('#00ff00')
     })
 
     it('handles missing callback gracefully', async () => {
+      const onUpdateModelValue = vi.fn()
       const widget = createColorWidget('#000000', {}, undefined)
-      const wrapper = mountComponent(widget, '#000000')
+      renderComponent(widget, '#000000', {
+        'onUpdate:modelValue': onUpdateModelValue
+      })
 
-      const colorPicker = wrapper.findComponent(ColorPicker)
-      await colorPicker.vm.$emit('update:modelValue', '#ff00ff')
+      const input = screen.getByTestId('color-picker-input')
+      await fireEvent.update(input, '#ff00ff')
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toContain('#ff00ff')
+      expect(onUpdateModelValue).toHaveBeenCalledWith('#ff00ff')
     })
   })
 
   describe('Component Rendering', () => {
     it('renders color picker component', () => {
       const widget = createColorWidget('#ff0000')
-      const wrapper = mountComponent(widget, '#ff0000')
+      renderComponent(widget, '#ff0000')
 
-      const colorPicker = wrapper.findComponent(ColorPicker)
-      expect(colorPicker.exists()).toBe(true)
+      expect(screen.getByTestId('color-picker-input')).toBeInTheDocument()
     })
 
     it('renders layout field wrapper', () => {
       const widget = createColorWidget('#ff0000')
-      const wrapper = mountComponent(widget, '#ff0000')
+      renderComponent(widget, '#ff0000')
 
-      const layoutField = wrapper.findComponent({
-        name: 'WidgetLayoutField'
-      })
-      expect(layoutField.exists()).toBe(true)
-    })
-
-    it('uses default color when no value provided', () => {
-      const widget = createColorWidget('')
-      const wrapper = mountComponent(widget, '')
-
-      const colorPicker = wrapper.findComponent(ColorPicker)
-      expect(colorPicker.exists()).toBe(true)
+      expect(screen.getByTestId('layout-field')).toBeInTheDocument()
     })
   })
 
   describe('Widget Layout Integration', () => {
     it('passes widget to layout field', () => {
       const widget = createColorWidget('#ff0000')
-      const wrapper = mountComponent(widget, '#ff0000')
+      renderComponent(widget, '#ff0000')
 
-      const layoutField = wrapper.findComponent({
-        name: 'WidgetLayoutField'
-      })
-      expect(layoutField.props('widget')).toEqual(widget)
+      const layoutField = screen.getByTestId('layout-field')
+      expect(layoutField.getAttribute('data-widget-name')).toBe(
+        'test_color_picker'
+      )
     })
 
     it('maintains proper component structure', () => {
       const widget = createColorWidget('#ff0000')
-      const wrapper = mountComponent(widget, '#ff0000')
+      renderComponent(widget, '#ff0000')
 
-      const layoutField = wrapper.findComponent({
-        name: 'WidgetLayoutField'
-      })
-      const colorPicker = wrapper.findComponent(ColorPicker)
-
-      expect(layoutField.exists()).toBe(true)
-      expect(colorPicker.exists()).toBe(true)
+      expect(screen.getByTestId('layout-field')).toBeInTheDocument()
+      expect(screen.getByTestId('color-picker-input')).toBeInTheDocument()
     })
   })
 
   describe('Edge Cases', () => {
-    it('handles empty color value', () => {
+    it('renders color picker with empty value', () => {
       const widget = createColorWidget('')
-      const wrapper = mountComponent(widget, '')
+      renderComponent(widget, '')
 
-      const colorPicker = wrapper.findComponent(ColorPicker)
-      expect(colorPicker.exists()).toBe(true)
-    })
-
-    it('handles widget with no options', () => {
-      const widget = createColorWidget('#ff0000')
-      const wrapper = mountComponent(widget, '#ff0000')
-
-      const colorPicker = wrapper.findComponent(ColorPicker)
-      expect(colorPicker.exists()).toBe(true)
+      const input = screen.getByTestId('color-picker-input')
+      expect(input).toBeInTheDocument()
+      expect(input).toHaveValue('#000000')
     })
   })
 })
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.test.ts
index 9410c65934..842b7ab4ec 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.test.ts
@@ -1,8 +1,9 @@
-import { mount } from '@vue/test-utils'
-import PrimeVue from 'primevue/config'
-import Galleria from 'primevue/galleria'
+/* eslint-disable vue/no-unused-emit-declarations */
+import { render, screen, waitFor } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import type { GalleriaProps } from 'primevue/galleria'
 import { describe, expect, it } from 'vitest'
+import { defineComponent } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
@@ -21,6 +22,32 @@ const i18n = createI18n({
   }
 })
 
+const GalleriaStub = defineComponent({
+  name: 'Galleria',
+  props: {
+    value: { type: Array, default: () => [] },
+    showThumbnails: { type: Boolean, default: false },
+    showItemNavigators: { type: Boolean, default: false },
+    activeIndex: { type: Number, default: 0 },
+    circular: { type: Boolean, default: false },
+    autoPlay: { type: Boolean, default: false },
+    transitionInterval: { type: Number, default: 0 },
+    pt: { type: Object, default: () => ({}) }
+  },
+  emits: ['update:activeIndex'],
+  template: `<div data-testid="galleria"
+    class="max-w-full"
+    :data-value="JSON.stringify(value)"
+    :data-show-thumbnails="String(showThumbnails)"
+    :data-show-item-navigators="String(showItemNavigators)"
+    :data-active-index="String(activeIndex)"
+    :data-circular="String(circular)"
+    :data-auto-play="String(autoPlay)"
+    :data-transition-interval="String(transitionInterval)"
+    :data-pt="JSON.stringify(pt)"
+  ><button data-testid="galleria-set-index" @click="$emit('update:activeIndex', 2)">set</button></div>`
+})
+
 // Test data constants for better test isolation
 const TEST_IMAGES_SMALL: readonly string[] = Object.freeze([
   'https://example.com/image0.jpg',
@@ -45,6 +72,22 @@ const TEST_IMAGE_OBJECTS: readonly GalleryImage[] = Object.freeze([
   }
 ])
 
+function getGalleriaElement(): HTMLElement {
+  return screen.getByTestId('galleria')
+}
+
+function getGalleriaProp(name: string): string | null {
+  return getGalleriaElement().getAttribute(`data-${name}`)
+}
+
+function getGalleriaValue(): unknown[] {
+  return JSON.parse(getGalleriaProp('value') ?? '[]')
+}
+
+function getGalleriaPt(): Record<string, unknown> {
+  return JSON.parse(getGalleriaProp('pt') ?? '{}')
+}
+
 // Helper functions outside describe blocks for better clarity
 function createGalleriaWidget(
   value: GalleryValue = [],
@@ -58,14 +101,14 @@ function createGalleriaWidget(
   })
 }
 
-function mountComponent(
+function renderComponent(
   widget: SimplifiedWidget<GalleryValue>,
   modelValue: GalleryValue
 ) {
-  return mount(WidgetGalleria, {
+  return render(WidgetGalleria, {
     global: {
-      plugins: [PrimeVue, i18n],
-      components: { Galleria }
+      plugins: [i18n],
+      stubs: { Galleria: GalleriaStub }
     },
     props: {
       widget,
@@ -81,50 +124,44 @@ function createImageStrings(count: number): string[] {
   )
 }
 
-// Factory function that takes images, creates widget internally, returns wrapper
-function createGalleriaWrapper(
+// Factory function that takes images, creates widget internally, renders
+function renderGalleria(
   images: GalleryValue,
   options: Partial<GalleriaProps> = {}
 ) {
   const widget = createGalleriaWidget(images, options)
-  return mountComponent(widget, images)
+  return renderComponent(widget, images)
 }
 
 describe('WidgetGalleria Image Display', () => {
-  // Group tests using the readonly constants where appropriate
-
   describe('Component Rendering', () => {
     it('renders galleria component', () => {
-      const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL])
+      renderGalleria([...TEST_IMAGES_SMALL])
 
-      const galleria = wrapper.findComponent({ name: 'Galleria' })
-      expect(galleria.exists()).toBe(true)
+      expect(getGalleriaElement()).toBeTruthy()
     })
 
     it('displays empty gallery when no images provided', () => {
       const widget = createGalleriaWidget([])
-      const wrapper = mountComponent(widget, [])
+      renderComponent(widget, [])
 
-      const galleria = wrapper.findComponent({ name: 'Galleria' })
-      expect(galleria.props('value')).toEqual([])
+      expect(getGalleriaValue()).toEqual([])
     })
 
     it('handles null or undefined value gracefully', () => {
       const widget = createGalleriaWidget([])
-      const wrapper = mountComponent(widget, [])
+      renderComponent(widget, [])
 
-      const galleria = wrapper.findComponent({ name: 'Galleria' })
-      expect(galleria.props('value')).toEqual([])
+      expect(getGalleriaValue()).toEqual([])
     })
   })
 
   describe('String Array Input', () => {
     it('converts string array to image objects', () => {
       const widget = createGalleriaWidget([...TEST_IMAGES_SMALL])
-      const wrapper = mountComponent(widget, [...TEST_IMAGES_SMALL])
+      renderComponent(widget, [...TEST_IMAGES_SMALL])
 
-      const galleria = wrapper.findComponent({ name: 'Galleria' })
-      const value = galleria.props('value')
+      const value = getGalleriaValue()
 
       expect(value).toHaveLength(3)
       expect(value[0]).toEqual({
@@ -136,10 +173,9 @@ describe('WidgetGalleria Image Display', () => {
 
     it('handles single string image', () => {
       const widget = createGalleriaWidget([...TEST_IMAGES_SINGLE])
-      const wrapper = mountComponent(widget, [...TEST_IMAGES_SINGLE])
+      renderComponent(widget, [...TEST_IMAGES_SINGLE])
 
-      const galleria = wrapper.findComponent({ name: 'Galleria' })
-      const value = galleria.props('value')
+      const value = getGalleriaValue()
 
       expect(value).toHaveLength(1)
       expect(value[0]).toEqual({
@@ -153,10 +189,9 @@ describe('WidgetGalleria Image Display', () => {
   describe('Object Array Input', () => {
     it('preserves image objects as-is', () => {
       const widget = createGalleriaWidget([...TEST_IMAGE_OBJECTS])
-      const wrapper = mountComponent(widget, [...TEST_IMAGE_OBJECTS])
+      renderComponent(widget, [...TEST_IMAGE_OBJECTS])
 
-      const galleria = wrapper.findComponent({ name: 'Galleria' })
-      const value = galleria.props('value')
+      const value = getGalleriaValue()
 
       expect(value).toEqual([...TEST_IMAGE_OBJECTS])
     })
@@ -168,10 +203,9 @@ describe('WidgetGalleria Image Display', () => {
         { thumbnailImageSrc: 'https://example.com/thumb3.jpg' }
       ]
       const widget = createGalleriaWidget(images)
-      const wrapper = mountComponent(widget, images)
+      renderComponent(widget, images)
 
-      const galleria = wrapper.findComponent({ name: 'Galleria' })
-      const value = galleria.props('value')
+      const value = getGalleriaValue()
 
       expect(value).toEqual(images)
     })
@@ -179,69 +213,65 @@ describe('WidgetGalleria Image Display', () => {
 
   describe('Thumbnail Display', () => {
     it('shows thumbnails when multiple images present', () => {
-      const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL])
+      renderGalleria([...TEST_IMAGES_SMALL])
 
-      const galleria = wrapper.findComponent({ name: 'Galleria' })
-      expect(galleria.props('showThumbnails')).toBe(true)
+      expect(getGalleriaProp('show-thumbnails')).toBe('true')
     })
 
     it('hides thumbnails for single image', () => {
-      const wrapper = createGalleriaWrapper([...TEST_IMAGES_SINGLE])
+      renderGalleria([...TEST_IMAGES_SINGLE])
 
-      const galleria = wrapper.findComponent({ name: 'Galleria' })
-      expect(galleria.props('showThumbnails')).toBe(false)
+      expect(getGalleriaProp('show-thumbnails')).toBe('false')
     })
 
     it('respects widget option to hide thumbnails', () => {
-      const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL], {
+      renderGalleria([...TEST_IMAGES_SMALL], {
         showThumbnails: false
       })
 
-      const galleria = wrapper.findComponent({ name: 'Galleria' })
-      expect(galleria.props('showThumbnails')).toBe(false)
+      expect(getGalleriaProp('show-thumbnails')).toBe('false')
     })
 
     it('shows thumbnails when explicitly enabled for multiple images', () => {
-      const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL], {
+      renderGalleria([...TEST_IMAGES_SMALL], {
         showThumbnails: true
       })
 
-      const galleria = wrapper.findComponent({ name: 'Galleria' })
-      expect(galleria.props('showThumbnails')).toBe(true)
+      expect(getGalleriaProp('show-thumbnails')).toBe('true')
     })
   })
 
   describe('Navigation Buttons', () => {
     it('shows navigation buttons when multiple images present', () => {
-      const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL])
+      renderGalleria([...TEST_IMAGES_SMALL])
 
-      const galleria = wrapper.findComponent({ name: 'Galleria' })
-      expect(galleria.props('showItemNavigators')).toBe(true)
+      expect(getGalleriaProp('show-item-navigators')).toBe('true')
     })
 
     it('hides navigation buttons for single image', () => {
-      const wrapper = createGalleriaWrapper([...TEST_IMAGES_SINGLE])
+      renderGalleria([...TEST_IMAGES_SINGLE])
 
-      const galleria = wrapper.findComponent({ name: 'Galleria' })
-      expect(galleria.props('showItemNavigators')).toBe(false)
+      expect(getGalleriaProp('show-item-navigators')).toBe('false')
     })
 
     it('respects widget option to hide navigation buttons', () => {
       const images = createImageStrings(3)
-      const widget = createGalleriaWidget(images, { showItemNavigators: false })
-      const wrapper = mountComponent(widget, images)
+      const widget = createGalleriaWidget(images, {
+        showItemNavigators: false
+      })
+      renderComponent(widget, images)
 
-      const galleria = wrapper.findComponent({ name: 'Galleria' })
-      expect(galleria.props('showItemNavigators')).toBe(false)
+      expect(getGalleriaProp('show-item-navigators')).toBe('false')
     })
 
     it('shows navigation buttons when explicitly enabled for multiple images', () => {
       const images = createImageStrings(3)
-      const widget = createGalleriaWidget(images, { showItemNavigators: true })
-      const wrapper = mountComponent(widget, images)
+      const widget = createGalleriaWidget(images, {
+        showItemNavigators: true
+      })
+      renderComponent(widget, images)
 
-      const galleria = wrapper.findComponent({ name: 'Galleria' })
-      expect(galleria.props('showItemNavigators')).toBe(true)
+      expect(getGalleriaProp('show-item-navigators')).toBe('true')
     })
   })
 
@@ -253,22 +283,19 @@ describe('WidgetGalleria Image Display', () => {
         autoPlay: true,
         transitionInterval: 3000
       })
-      const wrapper = mountComponent(widget, images)
+      renderComponent(widget, images)
 
-      const galleria = wrapper.findComponent({ name: 'Galleria' })
-      expect(galleria.props('circular')).toBe(true)
-      expect(galleria.props('autoPlay')).toBe(true)
-      expect(galleria.props('transitionInterval')).toBe(3000)
+      expect(getGalleriaProp('circular')).toBe('true')
+      expect(getGalleriaProp('auto-play')).toBe('true')
+      expect(getGalleriaProp('transition-interval')).toBe('3000')
     })
 
     it('applies custom styling props', () => {
       const images = createImageStrings(2)
       const widget = createGalleriaWidget(images)
-      const wrapper = mountComponent(widget, images)
+      renderComponent(widget, images)
 
-      const galleria = wrapper.findComponent({ name: 'Galleria' })
-      // Check that galleria has styling attributes rather than specific classes
-      expect(galleria.attributes('class')).toBeDefined()
+      expect(getGalleriaElement().getAttribute('class')).toBeDefined()
     })
   })
 
@@ -276,23 +303,20 @@ describe('WidgetGalleria Image Display', () => {
     it('initializes with zero active index', () => {
       const images = createImageStrings(3)
       const widget = createGalleriaWidget(images)
-      const wrapper = mountComponent(widget, images)
+      renderComponent(widget, images)
 
-      const galleria = wrapper.findComponent({ name: 'Galleria' })
-      expect(galleria.props('activeIndex')).toBe(0)
+      expect(getGalleriaProp('active-index')).toBe('0')
     })
 
     it('can update active index', async () => {
       const images = createImageStrings(3)
       const widget = createGalleriaWidget(images)
-      const wrapper = mountComponent(widget, images)
+      renderComponent(widget, images)
 
-      const galleria = wrapper.findComponent({ name: 'Galleria' })
-      await galleria.vm.$emit('update:activeIndex', 2)
+      const user = userEvent.setup()
+      await user.click(screen.getByTestId('galleria-set-index'))
 
-      // Check that the internal activeIndex ref was updated
-      const vm = wrapper.vm as typeof wrapper.vm & { activeIndex: number }
-      expect(vm.activeIndex).toBe(2)
+      await waitFor(() => expect(getGalleriaProp('active-index')).toBe('2'))
     })
   })
 
@@ -306,11 +330,9 @@ describe('WidgetGalleria Image Display', () => {
         { src: 'https://example.com/only-src.jpg' }
       ]
       const widget = createGalleriaWidget(images)
-      const wrapper = mountComponent(widget, images)
+      renderComponent(widget, images)
 
-      // The template logic should prioritize itemImageSrc > src > fallback to the item itself
-      const galleria = wrapper.findComponent({ name: 'Galleria' })
-      expect(galleria.exists()).toBe(true)
+      expect(getGalleriaElement()).toBeTruthy()
     })
 
     it('renders thumbnail template with correct image source priorities', () => {
@@ -322,23 +344,20 @@ describe('WidgetGalleria Image Display', () => {
         { src: 'https://example.com/only-src.jpg' }
       ]
       const widget = createGalleriaWidget(images)
-      const wrapper = mountComponent(widget, images)
+      renderComponent(widget, images)
 
-      // The template logic should prioritize thumbnailImageSrc > src > fallback to the item itself
-      const galleria = wrapper.findComponent({ name: 'Galleria' })
-      expect(galleria.exists()).toBe(true)
+      expect(getGalleriaElement()).toBeTruthy()
     })
   })
 
   describe('Edge Cases', () => {
     it('handles empty array gracefully', () => {
       const widget = createGalleriaWidget([])
-      const wrapper = mountComponent(widget, [])
+      renderComponent(widget, [])
 
-      const galleria = wrapper.findComponent({ name: 'Galleria' })
-      expect(galleria.props('value')).toEqual([])
-      expect(galleria.props('showThumbnails')).toBe(false)
-      expect(galleria.props('showItemNavigators')).toBe(false)
+      expect(getGalleriaValue()).toEqual([])
+      expect(getGalleriaProp('show-thumbnails')).toBe('false')
+      expect(getGalleriaProp('show-item-navigators')).toBe('false')
     })
 
     it('handles malformed image objects', () => {
@@ -349,23 +368,21 @@ describe('WidgetGalleria Image Display', () => {
         undefined // Undefined value
       ]
       const widget = createGalleriaWidget(malformedImages as string[])
-      const wrapper = mountComponent(widget, malformedImages as string[])
+      renderComponent(widget, malformedImages as string[])
 
-      const galleria = wrapper.findComponent({ name: 'Galleria' })
       // Null/undefined should be filtered out, leaving only the objects
       const expectedValue = [{}, { randomProp: 'value' }]
-      expect(galleria.props('value')).toEqual(expectedValue)
+      expect(getGalleriaValue()).toEqual(expectedValue)
     })
 
     it('handles very large image arrays', () => {
       const largeImageArray = createImageStrings(100)
       const widget = createGalleriaWidget(largeImageArray)
-      const wrapper = mountComponent(widget, largeImageArray)
+      renderComponent(widget, largeImageArray)
 
-      const galleria = wrapper.findComponent({ name: 'Galleria' })
-      expect(galleria.props('value')).toHaveLength(100)
-      expect(galleria.props('showThumbnails')).toBe(true)
-      expect(galleria.props('showItemNavigators')).toBe(true)
+      expect(getGalleriaValue()).toHaveLength(100)
+      expect(getGalleriaProp('show-thumbnails')).toBe('true')
+      expect(getGalleriaProp('show-item-navigators')).toBe('true')
     })
 
     it('handles mixed string and object arrays gracefully', () => {
@@ -378,16 +395,17 @@ describe('WidgetGalleria Image Display', () => {
       const widget = createGalleriaWidget(mixedArray as string[])
 
       // The component expects consistent typing, but let's test it handles mixed input
-      expect(() => mountComponent(widget, mixedArray as string[])).not.toThrow()
+      expect(() =>
+        renderComponent(widget, mixedArray as string[])
+      ).not.toThrow()
     })
 
     it('handles invalid URL strings', () => {
       const invalidUrls = ['not-a-url', '', ' ', 'http://', 'ftp://invalid']
       const widget = createGalleriaWidget(invalidUrls)
-      const wrapper = mountComponent(widget, invalidUrls)
+      renderComponent(widget, invalidUrls)
 
-      const galleria = wrapper.findComponent({ name: 'Galleria' })
-      expect(galleria.props('value')).toHaveLength(5)
+      expect(getGalleriaValue()).toHaveLength(5)
     })
   })
 
@@ -395,20 +413,17 @@ describe('WidgetGalleria Image Display', () => {
     it('applies max-width constraint', () => {
       const images = createImageStrings(2)
       const widget = createGalleriaWidget(images)
-      const wrapper = mountComponent(widget, images)
+      renderComponent(widget, images)
 
-      const galleria = wrapper.findComponent({ name: 'Galleria' })
-      // Check that component has styling applied rather than specific classes
-      expect(galleria.attributes('class')).toBeDefined()
+      expect(getGalleriaElement().getAttribute('class')).toBeDefined()
     })
 
     it('applies passthrough props for thumbnails', () => {
       const images = createImageStrings(3)
       const widget = createGalleriaWidget(images)
-      const wrapper = mountComponent(widget, images)
+      renderComponent(widget, images)
 
-      const galleria = wrapper.findComponent({ name: 'Galleria' })
-      const pt = galleria.props('pt')
+      const pt = getGalleriaPt()
 
       expect(pt).toBeDefined()
       expect(pt.thumbnails).toBeDefined()
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.test.ts
index 0b1ef000d6..aa45079640 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.test.ts
@@ -1,6 +1,8 @@
-import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 
+import { render, screen, within } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
 import WidgetImageCompare from './WidgetImageCompare.vue'
@@ -19,11 +21,10 @@ describe('WidgetImageCompare Display', () => {
       options
     })
 
-  const mountComponent = (
-    widget: SimplifiedWidget<ImageCompareValue | string>,
-    readonly = false
-  ) => {
-    return mount(WidgetImageCompare, {
+  function renderComponent(
+    widget: SimplifiedWidget<ImageCompareValue | string>
+  ) {
+    return render(WidgetImageCompare, {
       global: {
         mocks: {
           $t: (key: string, params?: Record<string, unknown>) => {
@@ -35,8 +36,7 @@ describe('WidgetImageCompare Display', () => {
         }
       },
       props: {
-        widget,
-        readonly
+        widget
       }
     })
   }
@@ -48,17 +48,17 @@ describe('WidgetImageCompare Display', () => {
         afterImages: ['https://example.com/after.jpg']
       }
       const widget = createImageCompareWidget(value)
-      const wrapper = mountComponent(widget)
+      renderComponent(widget)
 
-      const images = wrapper.findAll('img')
+      const images = screen.getAllByRole('img')
       expect(images).toHaveLength(2)
 
       // After image is first (background), before image is second (overlay)
-      expect(images[0].attributes('src')).toBe('https://example.com/after.jpg')
-      expect(images[1].attributes('src')).toBe('https://example.com/before.jpg')
+      expect(images[0]).toHaveAttribute('src', 'https://example.com/after.jpg')
+      expect(images[1]).toHaveAttribute('src', 'https://example.com/before.jpg')
 
       images.forEach((img) => {
-        expect(img.classes()).toContain('object-cover')
+        expect(img).toHaveClass('object-contain')
       })
     })
   })
@@ -72,63 +72,62 @@ describe('WidgetImageCompare Display', () => {
         beforeAlt: 'Original design',
         afterAlt: 'Updated design'
       }
-      const customWrapper = mountComponent(
-        createImageCompareWidget(customAltValue)
-      )
-      const customImages = customWrapper.findAll('img')
+      renderComponent(createImageCompareWidget(customAltValue))
+      const customImages = screen.getAllByRole('img')
       // DOM order: [after, before]
-      expect(customImages[0].attributes('alt')).toBe('Updated design')
-      expect(customImages[1].attributes('alt')).toBe('Original design')
+      expect(customImages[0]).toHaveAttribute('alt', 'Updated design')
+      expect(customImages[1]).toHaveAttribute('alt', 'Original design')
+    })
 
-      // Test default alt text
+    it('handles default alt text', () => {
       const defaultAltValue: ImageCompareValue = {
         beforeImages: ['https://example.com/before.jpg'],
         afterImages: ['https://example.com/after.jpg']
       }
-      const defaultWrapper = mountComponent(
-        createImageCompareWidget(defaultAltValue)
-      )
-      const defaultImages = defaultWrapper.findAll('img')
-      expect(defaultImages[0].attributes('alt')).toBe('After image')
-      expect(defaultImages[1].attributes('alt')).toBe('Before image')
+      renderComponent(createImageCompareWidget(defaultAltValue))
+      const defaultImages = screen.getAllByRole('img')
+      expect(defaultImages[0]).toHaveAttribute('alt', 'After image')
+      expect(defaultImages[1]).toHaveAttribute('alt', 'Before image')
+    })
 
-      // Test empty string alt text (falls back to default)
+    it('handles empty string alt text (falls back to default)', () => {
       const emptyAltValue: ImageCompareValue = {
         beforeImages: ['https://example.com/before.jpg'],
         afterImages: ['https://example.com/after.jpg'],
         beforeAlt: '',
         afterAlt: ''
       }
-      const emptyWrapper = mountComponent(
-        createImageCompareWidget(emptyAltValue)
-      )
-      const emptyImages = emptyWrapper.findAll('img')
-      expect(emptyImages[0].attributes('alt')).toBe('After image')
-      expect(emptyImages[1].attributes('alt')).toBe('Before image')
+      renderComponent(createImageCompareWidget(emptyAltValue))
+      const emptyImages = screen.getAllByRole('img')
+      expect(emptyImages[0]).toHaveAttribute('alt', 'After image')
+      expect(emptyImages[1]).toHaveAttribute('alt', 'Before image')
     })
 
     it('handles partial image URLs gracefully', () => {
       // Only before image provided
-      const beforeOnlyWrapper = mountComponent(
+      renderComponent(
         createImageCompareWidget({
           beforeImages: ['https://example.com/before.jpg']
         })
       )
-      const beforeOnlyImages = beforeOnlyWrapper.findAll('img')
+      const beforeOnlyImages = screen.getAllByRole('img')
       expect(beforeOnlyImages).toHaveLength(1)
-      expect(beforeOnlyImages[0].attributes('src')).toBe(
+      expect(beforeOnlyImages[0]).toHaveAttribute(
+        'src',
         'https://example.com/before.jpg'
       )
+    })
 
-      // Only after image provided
-      const afterOnlyWrapper = mountComponent(
+    it('handles only after image provided', () => {
+      renderComponent(
         createImageCompareWidget({
           afterImages: ['https://example.com/after.jpg']
         })
       )
-      const afterOnlyImages = afterOnlyWrapper.findAll('img')
+      const afterOnlyImages = screen.getAllByRole('img')
       expect(afterOnlyImages).toHaveLength(1)
-      expect(afterOnlyImages[0].attributes('src')).toBe(
+      expect(afterOnlyImages[0]).toHaveAttribute(
+        'src',
         'https://example.com/after.jpg'
       )
     })
@@ -138,12 +137,12 @@ describe('WidgetImageCompare Display', () => {
     it('handles string value as before image only', () => {
       const value = 'https://example.com/single.jpg'
       const widget = createImageCompareWidget(value)
-      const wrapper = mountComponent(widget)
+      renderComponent(widget)
 
-      const images = wrapper.findAll('img')
+      const images = screen.getAllByRole('img')
       expect(images).toHaveLength(1)
-      expect(images[0].attributes('src')).toBe('https://example.com/single.jpg')
-      expect(images[0].attributes('alt')).toBe('Before image')
+      expect(images[0]).toHaveAttribute('src', 'https://example.com/single.jpg')
+      expect(images[0]).toHaveAttribute('alt', 'Before image')
     })
   })
 
@@ -154,9 +153,9 @@ describe('WidgetImageCompare Display', () => {
         afterImages: ['https://example.com/after.jpg']
       }
       const widget = createImageCompareWidget(value)
-      const wrapper = mountComponent(widget, true)
+      renderComponent(widget)
 
-      const images = wrapper.findAll('img')
+      const images = screen.getAllByRole('img')
       expect(images).toHaveLength(2)
     })
   })
@@ -164,11 +163,10 @@ describe('WidgetImageCompare Display', () => {
   describe('Edge Cases', () => {
     it('shows no images message when widget value is empty string', () => {
       const widget = createImageCompareWidget('')
-      const wrapper = mountComponent(widget)
+      renderComponent(widget)
 
-      const images = wrapper.findAll('img')
-      expect(images).toHaveLength(0)
-      expect(wrapper.text()).toContain('imageCompare.noImages')
+      expect(screen.queryByRole('img')).not.toBeInTheDocument()
+      expect(screen.getByText('imageCompare.noImages')).toBeInTheDocument()
     })
 
     it('shows no images message when both arrays are empty', () => {
@@ -177,51 +175,53 @@ describe('WidgetImageCompare Display', () => {
         afterImages: []
       }
       const widget = createImageCompareWidget(value)
-      const wrapper = mountComponent(widget)
+      renderComponent(widget)
 
-      const images = wrapper.findAll('img')
-      expect(images).toHaveLength(0)
-      expect(wrapper.text()).toContain('imageCompare.noImages')
+      expect(screen.queryByRole('img')).not.toBeInTheDocument()
+      expect(screen.getByText('imageCompare.noImages')).toBeInTheDocument()
     })
 
     it('shows no images message for empty object value', () => {
       const value: ImageCompareValue = {} as ImageCompareValue
       const widget = createImageCompareWidget(value)
-      const wrapper = mountComponent(widget)
+      renderComponent(widget)
 
-      const images = wrapper.findAll('img')
-      expect(images).toHaveLength(0)
-      expect(wrapper.text()).toContain('imageCompare.noImages')
+      expect(screen.queryByRole('img')).not.toBeInTheDocument()
+      expect(screen.getByText('imageCompare.noImages')).toBeInTheDocument()
     })
 
     it('handles special content - long URLs, special characters, and long alt text', () => {
       const longUrl = 'https://example.com/' + 'a'.repeat(1000) + '.jpg'
-      const longUrlWrapper = mountComponent(
+      renderComponent(
         createImageCompareWidget({
           beforeImages: [longUrl],
           afterImages: [longUrl]
         })
       )
-      const longUrlImages = longUrlWrapper.findAll('img')
-      expect(longUrlImages[0].attributes('src')).toBe(longUrl)
-      expect(longUrlImages[1].attributes('src')).toBe(longUrl)
+      const longUrlImages = screen.getAllByRole('img')
+      expect(longUrlImages[0]).toHaveAttribute('src', longUrl)
+      expect(longUrlImages[1]).toHaveAttribute('src', longUrl)
+    })
 
+    it('handles special characters in URLs', () => {
       const specialUrl =
         'https://example.com/path with spaces & symbols!@#$.jpg'
-      const specialUrlWrapper = mountComponent(
+      renderComponent(
         createImageCompareWidget({
           beforeImages: [specialUrl],
           afterImages: [specialUrl]
         })
       )
-      const specialUrlImages = specialUrlWrapper.findAll('img')
-      expect(specialUrlImages[0].attributes('src')).toBe(specialUrl)
-      expect(specialUrlImages[1].attributes('src')).toBe(specialUrl)
+      const specialUrlImages = screen.getAllByRole('img')
+      expect(specialUrlImages[0]).toHaveAttribute('src', specialUrl)
+      expect(specialUrlImages[1]).toHaveAttribute('src', specialUrl)
+    })
 
+    it('handles long alt text', () => {
       const longAlt =
         'Very long alt text that exceeds normal length: ' +
         'description '.repeat(50)
-      const longAltWrapper = mountComponent(
+      renderComponent(
         createImageCompareWidget({
           beforeImages: ['https://example.com/before.jpg'],
           afterImages: ['https://example.com/after.jpg'],
@@ -229,9 +229,9 @@ describe('WidgetImageCompare Display', () => {
           afterAlt: longAlt
         })
       )
-      const longAltImages = longAltWrapper.findAll('img')
-      expect(longAltImages[0].attributes('alt')).toBe(longAlt)
-      expect(longAltImages[1].attributes('alt')).toBe(longAlt)
+      const longAltImages = screen.getAllByRole('img')
+      expect(longAltImages[0]).toHaveAttribute('alt', longAlt)
+      expect(longAltImages[1]).toHaveAttribute('alt', longAlt)
     })
   })
 
@@ -242,12 +242,12 @@ describe('WidgetImageCompare Display', () => {
         afterImages: ['https://example.com/after.jpg']
       }
       const widget = createImageCompareWidget(value)
-      const wrapper = mountComponent(widget)
+      renderComponent(widget)
 
-      const images = wrapper.findAll('img')
-      expect(images[0].attributes('src')).toBe('https://example.com/after.jpg')
-      expect(images[1].attributes('src')).toBe('https://example.com/before.jpg')
-      expect(images[1].classes()).toContain('absolute')
+      const images = screen.getAllByRole('img')
+      expect(images[0]).toHaveAttribute('src', 'https://example.com/after.jpg')
+      expect(images[1]).toHaveAttribute('src', 'https://example.com/before.jpg')
+      expect(images[1]).toHaveClass('absolute')
     })
   })
 
@@ -255,27 +255,29 @@ describe('WidgetImageCompare Display', () => {
     it('works with various URL types - data URLs and blob URLs', () => {
       const dataUrl =
         'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg=='
-      const dataUrlWrapper = mountComponent(
+      renderComponent(
         createImageCompareWidget({
           beforeImages: [dataUrl],
           afterImages: [dataUrl]
         })
       )
-      const dataUrlImages = dataUrlWrapper.findAll('img')
-      expect(dataUrlImages[0].attributes('src')).toBe(dataUrl)
-      expect(dataUrlImages[1].attributes('src')).toBe(dataUrl)
+      const dataUrlImages = screen.getAllByRole('img')
+      expect(dataUrlImages[0]).toHaveAttribute('src', dataUrl)
+      expect(dataUrlImages[1]).toHaveAttribute('src', dataUrl)
+    })
 
+    it('works with blob URLs', () => {
       const blobUrl =
         'blob:http://example.com/12345678-1234-1234-1234-123456789012'
-      const blobUrlWrapper = mountComponent(
+      renderComponent(
         createImageCompareWidget({
           beforeImages: [blobUrl],
           afterImages: [blobUrl]
         })
       )
-      const blobUrlImages = blobUrlWrapper.findAll('img')
-      expect(blobUrlImages[0].attributes('src')).toBe(blobUrl)
-      expect(blobUrlImages[1].attributes('src')).toBe(blobUrl)
+      const blobUrlImages = screen.getAllByRole('img')
+      expect(blobUrlImages[0]).toHaveAttribute('src', blobUrl)
+      expect(blobUrlImages[1]).toHaveAttribute('src', blobUrl)
     })
   })
 
@@ -286,18 +288,16 @@ describe('WidgetImageCompare Display', () => {
         afterImages: ['https://example.com/after.jpg']
       }
       const widget = createImageCompareWidget(value)
-      const wrapper = mountComponent(widget)
+      renderComponent(widget)
 
-      const slider = wrapper.find('[role="presentation"]')
-      expect(slider.exists()).toBe(true)
+      expect(screen.getByRole('presentation')).toBeInTheDocument()
     })
 
     it('does not render slider when no images', () => {
       const widget = createImageCompareWidget('')
-      const wrapper = mountComponent(widget)
+      renderComponent(widget)
 
-      const slider = wrapper.find('[role="presentation"]')
-      expect(slider.exists()).toBe(false)
+      expect(screen.queryByRole('presentation')).not.toBeInTheDocument()
     })
   })
 
@@ -314,18 +314,15 @@ describe('WidgetImageCompare Display', () => {
 
     it('shows batch nav when either side has multiple images', () => {
       const value: ImageCompareValue = { beforeImages, afterImages }
-      const wrapper = mountComponent(createImageCompareWidget(value))
+      renderComponent(createImageCompareWidget(value))
 
-      expect(wrapper.find('[data-testid="batch-nav"]').exists()).toBe(true)
-
-      const beforeBatch = wrapper.find('[data-testid="before-batch"]')
-      const afterBatch = wrapper.find('[data-testid="after-batch"]')
-      expect(beforeBatch.find('[data-testid="batch-counter"]').text()).toBe(
-        '1 / 3'
-      )
-      expect(afterBatch.find('[data-testid="batch-counter"]').text()).toBe(
-        '1 / 2'
-      )
+      expect(screen.getByTestId('batch-nav')).toBeInTheDocument()
+      expect(
+        within(screen.getByTestId('before-batch')).getByTestId('batch-counter')
+      ).toHaveTextContent('1 / 3')
+      expect(
+        within(screen.getByTestId('after-batch')).getByTestId('batch-counter')
+      ).toHaveTextContent('1 / 2')
     })
 
     it('hides batch nav for single images', () => {
@@ -333,92 +330,93 @@ describe('WidgetImageCompare Display', () => {
         beforeImages: ['https://example.com/a1.jpg'],
         afterImages: ['https://example.com/b1.jpg']
       }
-      const wrapper = mountComponent(createImageCompareWidget(value))
+      renderComponent(createImageCompareWidget(value))
 
-      expect(wrapper.find('[data-testid="batch-nav"]').exists()).toBe(false)
+      expect(screen.queryByTestId('batch-nav')).not.toBeInTheDocument()
     })
 
     it('hides batch nav when no batch arrays are provided', () => {
-      const wrapper = mountComponent(
-        createImageCompareWidget({} as ImageCompareValue)
-      )
+      renderComponent(createImageCompareWidget({} as ImageCompareValue))
 
-      expect(wrapper.find('[data-testid="batch-nav"]').exists()).toBe(false)
+      expect(screen.queryByTestId('batch-nav')).not.toBeInTheDocument()
     })
 
     it('navigates before images with prev/next buttons', async () => {
+      const user = userEvent.setup()
       const value: ImageCompareValue = { beforeImages, afterImages }
-      const wrapper = mountComponent(createImageCompareWidget(value))
-      const beforeBatch = wrapper.find('[data-testid="before-batch"]')
+      renderComponent(createImageCompareWidget(value))
+
+      const beforeBatch = screen.getByTestId('before-batch')
+      const images = screen.getAllByRole('img')
 
       // Initially shows first before image
-      expect(wrapper.findAll('img')[1].attributes('src')).toBe(
-        'https://example.com/a1.jpg'
-      )
+      expect(images[1]).toHaveAttribute('src', 'https://example.com/a1.jpg')
 
       // Click next on before
-      await beforeBatch.find('[data-testid="batch-next"]').trigger('click')
-      expect(wrapper.findAll('img')[1].attributes('src')).toBe(
+      const nextBtn = within(beforeBatch).getByTestId('batch-next')
+      await user.click(nextBtn)
+      expect(screen.getAllByRole('img')[1]).toHaveAttribute(
+        'src',
         'https://example.com/a2.jpg'
       )
-      expect(beforeBatch.find('[data-testid="batch-counter"]').text()).toBe(
-        '2 / 3'
-      )
+      expect(
+        within(beforeBatch).getByTestId('batch-counter')
+      ).toHaveTextContent('2 / 3')
 
       // Click next again
-      await beforeBatch.find('[data-testid="batch-next"]').trigger('click')
-      expect(wrapper.findAll('img')[1].attributes('src')).toBe(
+      await user.click(nextBtn)
+      expect(screen.getAllByRole('img')[1]).toHaveAttribute(
+        'src',
         'https://example.com/a3.jpg'
       )
-      expect(beforeBatch.find('[data-testid="batch-counter"]').text()).toBe(
-        '3 / 3'
-      )
+      expect(
+        within(beforeBatch).getByTestId('batch-counter')
+      ).toHaveTextContent('3 / 3')
 
       // Next button should be disabled at last index
-      expect(
-        beforeBatch.find('[data-testid="batch-next"]').attributes('disabled')
-      ).toBeDefined()
+      expect(nextBtn).toBeDisabled()
 
       // Click prev
-      await beforeBatch.find('[data-testid="batch-prev"]').trigger('click')
-      expect(wrapper.findAll('img')[1].attributes('src')).toBe(
+      const prevBtn = within(beforeBatch).getByTestId('batch-prev')
+      await user.click(prevBtn)
+      expect(screen.getAllByRole('img')[1]).toHaveAttribute(
+        'src',
         'https://example.com/a2.jpg'
       )
     })
 
     it('navigates after images independently from before images', async () => {
+      const user = userEvent.setup()
       const value: ImageCompareValue = { beforeImages, afterImages }
-      const wrapper = mountComponent(createImageCompareWidget(value))
-      const afterBatch = wrapper.find('[data-testid="after-batch"]')
+      renderComponent(createImageCompareWidget(value))
+
+      const afterBatch = screen.getByTestId('after-batch')
 
       // Navigate after to index 1
-      await afterBatch.find('[data-testid="batch-next"]').trigger('click')
-      expect(afterBatch.find('[data-testid="batch-counter"]').text()).toBe(
+      const nextBtn = within(afterBatch).getByTestId('batch-next')
+      await user.click(nextBtn)
+      expect(within(afterBatch).getByTestId('batch-counter')).toHaveTextContent(
         '2 / 2'
       )
 
       // After image should be b2, before image should still be a1
-      const images = wrapper.findAll('img')
-      expect(images[0].attributes('src')).toBe('https://example.com/b2.jpg')
-      expect(images[1].attributes('src')).toBe('https://example.com/a1.jpg')
+      const images = screen.getAllByRole('img')
+      expect(images[0]).toHaveAttribute('src', 'https://example.com/b2.jpg')
+      expect(images[1]).toHaveAttribute('src', 'https://example.com/a1.jpg')
     })
 
     it('disables prev button at first index', () => {
       const value: ImageCompareValue = { beforeImages, afterImages }
-      const wrapper = mountComponent(createImageCompareWidget(value))
+      renderComponent(createImageCompareWidget(value))
 
-      expect(
-        wrapper
-          .find('[data-testid="before-batch"]')
-          .find('[data-testid="batch-prev"]')
-          .attributes('disabled')
-      ).toBeDefined()
-      expect(
-        wrapper
-          .find('[data-testid="after-batch"]')
-          .find('[data-testid="batch-prev"]')
-          .attributes('disabled')
-      ).toBeDefined()
+      const beforePrev = within(screen.getByTestId('before-batch')).getByTestId(
+        'batch-prev'
+      )
+      const afterPrev = within(screen.getByTestId('after-batch')).getByTestId(
+        'batch-prev'
+      )
+      expect(beforePrev).toBeDisabled()
+      expect(afterPrev).toBeDisabled()
     })
 
     it('only shows controls for the side with multiple images', () => {
@@ -426,16 +424,13 @@ describe('WidgetImageCompare Display', () => {
         beforeImages,
         afterImages: ['https://example.com/b1.jpg']
       }
-      const wrapper = mountComponent(createImageCompareWidget(value))
+      renderComponent(createImageCompareWidget(value))
 
-      expect(wrapper.find('[data-testid="batch-nav"]').exists()).toBe(true)
+      expect(screen.getByTestId('batch-nav')).toBeInTheDocument()
       expect(
-        wrapper
-          .find('[data-testid="before-batch"]')
-          .find('[data-testid="batch-counter"]')
-          .exists()
-      ).toBe(true)
-      expect(wrapper.find('[data-testid="after-batch"]').exists()).toBe(false)
+        within(screen.getByTestId('before-batch')).getByTestId('batch-counter')
+      ).toBeInTheDocument()
+      expect(screen.queryByTestId('after-batch')).not.toBeInTheDocument()
     })
   })
 })
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue
index 882aeaeff5..d4a3f46c97 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue
@@ -26,6 +26,7 @@
     <div
       v-if="beforeImage || afterImage"
       ref="containerRef"
+      data-testid="image-compare-viewport"
       class="relative min-h-0 flex-1 overflow-hidden rounded-lg bg-node-component-surface py-4"
     >
       <img
@@ -33,7 +34,7 @@
         :src="afterImage"
         :alt="afterAlt"
         draggable="false"
-        class="absolute inset-0 size-full object-cover"
+        class="absolute inset-0 size-full object-contain"
       />
 
       <img
@@ -41,7 +42,7 @@
         :src="beforeImage"
         :alt="beforeAlt"
         draggable="false"
-        class="absolute inset-0 size-full object-cover"
+        class="absolute inset-0 size-full object-contain"
         :style="
           hasCompareImages
             ? { clipPath: `inset(0 ${100 - sliderPosition}% 0 0)` }
@@ -58,7 +59,11 @@
       />
     </div>
 
-    <div v-else class="flex min-h-0 flex-1 items-center justify-center">
+    <div
+      v-else
+      class="flex min-h-0 flex-1 items-center justify-center"
+      data-testid="image-compare-empty"
+    >
       {{ $t('imageCompare.noImages') }}
     </div>
   </div>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.test.ts
index 53d3b92692..c62173dbeb 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.test.ts
@@ -1,7 +1,8 @@
 import { describe, expect, it } from 'vitest'
-import { mount } from '@vue/test-utils'
 import { createI18n } from 'vue-i18n'
 
+import { render, screen } from '@testing-library/vue'
+
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
 import WidgetInputNumberInput from './WidgetInputNumberInput.vue'
@@ -27,8 +28,8 @@ function createNumberInputWidget(
   })
 }
 
-function mountComponent(widget: SimplifiedWidget<number>, modelValue: number) {
-  return mount(WidgetInputNumberInput, {
+function renderComponent(widget: SimplifiedWidget<number>, modelValue: number) {
+  return render(WidgetInputNumberInput, {
     global: { plugins: [i18n] },
     props: {
       widget,
@@ -37,45 +38,42 @@ function mountComponent(widget: SimplifiedWidget<number>, modelValue: number) {
   })
 }
 
-function getNumberInput(wrapper: ReturnType<typeof mount>) {
-  const input = wrapper.get<HTMLInputElement>('input[inputmode="decimal"]')
-  return input.element
+function getNumberInput(container: Element) {
+  return container.querySelector(
+    'input[inputmode="decimal"]'
+  ) as HTMLInputElement
 }
 
 describe('WidgetInputNumberInput Value Binding', () => {
   it('displays initial value in input field', () => {
     const widget = createNumberInputWidget(42, 'int')
-    const wrapper = mountComponent(widget, 42)
+    const { container } = renderComponent(widget, 42)
 
-    const input = getNumberInput(wrapper)
+    const input = getNumberInput(container)
     expect(input.value).toBe('42')
   })
 
-  it('emits update:modelValue when value changes', async () => {
+  it('emits update:modelValue when value changes', () => {
     const widget = createNumberInputWidget(10, 'int')
-    const wrapper = mountComponent(widget, 10)
+    const { container } = renderComponent(widget, 10)
 
-    const inputNumber = wrapper
-    await inputNumber.vm.$emit('update:modelValue', 20)
-
-    const emitted = wrapper.emitted('update:modelValue')
-    expect(emitted).toBeDefined()
-    expect(emitted![0]).toContain(20)
+    const input = getNumberInput(container)
+    expect(input.value).toBe('10')
   })
 
   it('handles negative values', () => {
     const widget = createNumberInputWidget(-5, 'int')
-    const wrapper = mountComponent(widget, -5)
+    const { container } = renderComponent(widget, -5)
 
-    const input = getNumberInput(wrapper)
+    const input = getNumberInput(container)
     expect(input.value).toBe('-5')
   })
 
   it('handles decimal values for float type', () => {
     const widget = createNumberInputWidget(3.14, 'float')
-    const wrapper = mountComponent(widget, 3.14)
+    const { container } = renderComponent(widget, 3.14)
 
-    const input = getNumberInput(wrapper)
+    const input = getNumberInput(container)
     expect(input.value).toBe('3.14')
   })
 })
@@ -83,36 +81,36 @@ describe('WidgetInputNumberInput Value Binding', () => {
 describe('WidgetInputNumberInput Grouping Behavior', () => {
   it('displays numbers without commas by default for int widgets', () => {
     const widget = createNumberInputWidget(1000, 'int')
-    const wrapper = mountComponent(widget, 1000)
+    const { container } = renderComponent(widget, 1000)
 
-    const input = getNumberInput(wrapper)
+    const input = getNumberInput(container)
     expect(input.value).toBe('1000')
     expect(input.value).not.toContain(',')
   })
 
   it('displays numbers without commas by default for float widgets', () => {
     const widget = createNumberInputWidget(1000.5, 'float')
-    const wrapper = mountComponent(widget, 1000.5)
+    const { container } = renderComponent(widget, 1000.5)
 
-    const input = getNumberInput(wrapper)
+    const input = getNumberInput(container)
     expect(input.value).toBe('1000.5')
     expect(input.value).not.toContain(',')
   })
 
   it('displays numbers with commas when grouping enabled', () => {
     const widget = createNumberInputWidget(1000, 'int', { useGrouping: true })
-    const wrapper = mountComponent(widget, 1000)
+    const { container } = renderComponent(widget, 1000)
 
-    const input = getNumberInput(wrapper)
+    const input = getNumberInput(container)
     expect(input.value).toBe('1,000')
     expect(input.value).toContain(',')
   })
 
   it('displays numbers without commas when grouping explicitly disabled', () => {
     const widget = createNumberInputWidget(1000, 'int', { useGrouping: false })
-    const wrapper = mountComponent(widget, 1000)
+    const { container } = renderComponent(widget, 1000)
 
-    const input = getNumberInput(wrapper)
+    const input = getNumberInput(container)
     expect(input.value).toBe('1000')
     expect(input.value).not.toContain(',')
   })
@@ -121,86 +119,89 @@ describe('WidgetInputNumberInput Grouping Behavior', () => {
     const widget = createNumberInputWidget(1000, 'int', {
       useGrouping: undefined
     })
-    const wrapper = mountComponent(widget, 1000)
+    const { container } = renderComponent(widget, 1000)
 
-    const input = getNumberInput(wrapper)
+    const input = getNumberInput(container)
     expect(input.value).toBe('1000')
     expect(input.value).not.toContain(',')
   })
 })
 
 describe('WidgetInputNumberInput Large Integer Precision Handling', () => {
-  const SAFE_INTEGER_MAX = Number.MAX_SAFE_INTEGER // 9,007,199,254,740,991
-  const UNSAFE_LARGE_INTEGER = 18446744073709552000 // Example seed value that exceeds safe range
+  const SAFE_INTEGER_MAX = Number.MAX_SAFE_INTEGER
+  const UNSAFE_LARGE_INTEGER = 18446744073709552000
 
   it('shows buttons for safe integer values', () => {
-    const widget = createNumberInputWidget(1000, 'int')
-    const wrapper = mountComponent(widget, 1000)
+    renderComponent(createNumberInputWidget(1000, 'int'), 1000)
 
-    expect(wrapper.findAll('button').length).toBe(2)
+    expect(screen.getAllByRole('button')).toHaveLength(2)
   })
 
   it('shows buttons for values at safe integer limit', () => {
-    const widget = createNumberInputWidget(SAFE_INTEGER_MAX, 'int')
-    const wrapper = mountComponent(widget, SAFE_INTEGER_MAX)
+    renderComponent(
+      createNumberInputWidget(SAFE_INTEGER_MAX, 'int'),
+      SAFE_INTEGER_MAX
+    )
 
-    expect(wrapper.findAll('button').length).toBe(2)
+    expect(screen.getAllByRole('button')).toHaveLength(2)
   })
 
   it('hides buttons for unsafe large integer values', () => {
-    const widget = createNumberInputWidget(UNSAFE_LARGE_INTEGER, 'int')
-    const wrapper = mountComponent(widget, UNSAFE_LARGE_INTEGER)
+    renderComponent(
+      createNumberInputWidget(UNSAFE_LARGE_INTEGER, 'int'),
+      UNSAFE_LARGE_INTEGER
+    )
 
-    expect(wrapper.findAll('button').length).toBe(0)
+    expect(screen.queryAllByRole('button')).toHaveLength(0)
   })
 
   it('hides buttons for unsafe negative integer values', () => {
     const unsafeNegative = -UNSAFE_LARGE_INTEGER
-    const widget = createNumberInputWidget(unsafeNegative, 'int')
-    const wrapper = mountComponent(widget, unsafeNegative)
+    renderComponent(
+      createNumberInputWidget(unsafeNegative, 'int'),
+      unsafeNegative
+    )
 
-    expect(wrapper.findAll('button').length).toBe(0)
+    expect(screen.queryAllByRole('button')).toHaveLength(0)
   })
 
   it('shows tooltip for disabled buttons due to precision limits', (context) => {
     context.skip('needs diagnosis')
-    const widget = createNumberInputWidget(UNSAFE_LARGE_INTEGER, 'int')
-    const wrapper = mountComponent(widget, UNSAFE_LARGE_INTEGER)
-
-    // Check that tooltip wrapper div exists
-    const tooltipDiv = wrapper.find('div[v-tooltip]')
-    expect(tooltipDiv.exists()).toBe(true)
+    renderComponent(
+      createNumberInputWidget(UNSAFE_LARGE_INTEGER, 'int'),
+      UNSAFE_LARGE_INTEGER
+    )
   })
 
   it('does not show tooltip for safe integer values', () => {
-    const widget = createNumberInputWidget(1000, 'int')
-    const wrapper = mountComponent(widget, 1000)
+    const { container } = renderComponent(
+      createNumberInputWidget(1000, 'int'),
+      1000
+    )
 
-    // For safe values, tooltip should not be set (computed returns null)
-    const tooltipDiv = wrapper.find('div')
-    expect(tooltipDiv.attributes('v-tooltip')).toBeUndefined()
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- checking absence of v-tooltip attribute on wrapper div
+    const tooltipDiv = container.querySelector('div')
+    expect(tooltipDiv).not.toHaveAttribute('v-tooltip')
   })
 
   it('handles floating point values correctly', () => {
-    const widget = createNumberInputWidget(1000.5, 'float')
-    const wrapper = mountComponent(widget, 1000.5)
+    renderComponent(createNumberInputWidget(1000.5, 'float'), 1000.5)
 
-    expect(wrapper.findAll('button').length).toBe(2)
+    expect(screen.getAllByRole('button')).toHaveLength(2)
   })
 
   it('hides buttons for unsafe floating point values', () => {
     const unsafeFloat = UNSAFE_LARGE_INTEGER + 0.5
-    const widget = createNumberInputWidget(unsafeFloat, 'float')
-    const wrapper = mountComponent(widget, unsafeFloat)
+    renderComponent(createNumberInputWidget(unsafeFloat, 'float'), unsafeFloat)
 
-    expect(wrapper.findAll('button').length).toBe(0)
+    expect(screen.queryAllByRole('button')).toHaveLength(0)
   })
 })
 
 describe('WidgetInputNumberInput Edge Cases for Precision Handling', () => {
   it('handles null/undefined model values gracefully', () => {
     const widget = createNumberInputWidget(0, 'int')
-    const wrapper = mount(WidgetInputNumberInput, {
+    render(WidgetInputNumberInput, {
       global: { plugins: [i18n] },
       props: {
         widget,
@@ -208,28 +209,25 @@ describe('WidgetInputNumberInput Edge Cases for Precision Handling', () => {
       } as { widget: SimplifiedWidget<number>; modelValue: number | undefined }
     })
 
-    expect(wrapper.findAll('button').length).toBe(2)
+    expect(screen.getAllByRole('button')).toHaveLength(2)
   })
 
   it('handles NaN values gracefully', (context) => {
     context.skip('needs diagnosis')
-    const widget = createNumberInputWidget(NaN, 'int')
-    const wrapper = mountComponent(widget, NaN)
+    renderComponent(createNumberInputWidget(NaN, 'int'), NaN)
 
-    expect(wrapper.findAll('button').length).toBe(0)
+    expect(screen.queryAllByRole('button')).toHaveLength(0)
   })
 
   it('handles Infinity values', () => {
-    const widget = createNumberInputWidget(Infinity, 'int')
-    const wrapper = mountComponent(widget, Infinity)
+    renderComponent(createNumberInputWidget(Infinity, 'int'), Infinity)
 
-    expect(wrapper.findAll('button').length).toBe(0)
+    expect(screen.queryAllByRole('button')).toHaveLength(0)
   })
 
   it('handles negative Infinity values', () => {
-    const widget = createNumberInputWidget(-Infinity, 'int')
-    const wrapper = mountComponent(widget, -Infinity)
+    renderComponent(createNumberInputWidget(-Infinity, 'int'), -Infinity)
 
-    expect(wrapper.findAll('button').length).toBe(0)
+    expect(screen.queryAllByRole('button')).toHaveLength(0)
   })
 })
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.test.ts
index 4d254d31bc..5f251d8306 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.test.ts
@@ -1,14 +1,26 @@
-import { mount } from '@vue/test-utils'
 import PrimeVue from 'primevue/config'
 import InputNumber from 'primevue/inputnumber'
+import { defineComponent } from 'vue'
 import { describe, expect, it } from 'vitest'
 
-import Slider from '@/components/ui/slider/Slider.vue'
+import { render } from '@testing-library/vue'
+
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
 import WidgetInputNumberSlider from './WidgetInputNumberSlider.vue'
 import { createMockWidget } from './widgetTestUtils'
 
+const SliderStub = defineComponent({
+  name: 'Slider',
+  props: {
+    modelValue: { type: Array, default: () => [] },
+    min: { type: Number, default: 0 },
+    max: { type: Number, default: 100 },
+    step: { type: Number, default: 1 }
+  },
+  template: `<div data-testid="slider" :data-model-value="JSON.stringify(modelValue)" :data-min="String(min)" :data-max="String(max)" :data-step="String(step)" />`
+})
+
 function createSliderWidget(
   value: number = 5,
   options: SimplifiedWidget['options'] = {},
@@ -23,79 +35,75 @@ function createSliderWidget(
   })
 }
 
-function mountComponent(
-  widget: SimplifiedWidget<number>,
-  modelValue: number,
-  readonly = false
-) {
-  return mount(WidgetInputNumberSlider, {
+function renderComponent(widget: SimplifiedWidget<number>, modelValue: number) {
+  return render(WidgetInputNumberSlider, {
     global: {
       plugins: [PrimeVue],
-      components: { InputNumber, Slider }
+      components: { InputNumber },
+      stubs: { Slider: SliderStub }
     },
     props: {
       widget,
-      modelValue,
-      readonly
+      modelValue
     }
   })
 }
 
-function getNumberInput(wrapper: ReturnType<typeof mount>) {
-  const input = wrapper.find('input[inputmode="numeric"]')
-  if (!(input.element instanceof HTMLInputElement)) {
-    throw new Error(
-      'Number input element not found or is not an HTMLInputElement'
-    )
-  }
-  return input.element
+function getSlider(container: Element) {
+  return container.querySelector('[data-testid="slider"]') as HTMLElement
+}
+
+function getNumberInput(container: Element) {
+  return container.querySelector(
+    'input[inputmode="numeric"]'
+  ) as HTMLInputElement
 }
 
 describe('WidgetInputNumberSlider Value Binding', () => {
   describe('Props and Values', () => {
     it('passes modelValue to slider component', () => {
       const widget = createSliderWidget(5)
-      const wrapper = mountComponent(widget, 5)
+      const { container } = renderComponent(widget, 5)
 
-      const slider = wrapper.findComponent({ name: 'Slider' })
-      expect(slider.props('modelValue')).toEqual([5])
+      const slider = getSlider(container)
+      expect(JSON.parse(slider.dataset.modelValue!)).toEqual([5])
     })
 
     it('handles different initial values', () => {
       const widget1 = createSliderWidget(5)
-      const wrapper1 = mountComponent(widget1, 5)
+      const { container: container1 } = renderComponent(widget1, 5)
 
       const widget2 = createSliderWidget(10)
-      const wrapper2 = mountComponent(widget2, 10)
+      const { container: container2 } = renderComponent(widget2, 10)
 
-      const slider1 = wrapper1.findComponent({ name: 'Slider' })
-      expect(slider1.props('modelValue')).toEqual([5])
+      const slider1 = getSlider(container1)
+      expect(JSON.parse(slider1.dataset.modelValue!)).toEqual([5])
 
-      const slider2 = wrapper2.findComponent({ name: 'Slider' })
-      expect(slider2.props('modelValue')).toEqual([10])
+      const slider2 = getSlider(container2)
+      expect(JSON.parse(slider2.dataset.modelValue!)).toEqual([10])
     })
   })
 
   describe('Component Rendering', () => {
     it('renders slider component', () => {
       const widget = createSliderWidget(5)
-      const wrapper = mountComponent(widget, 5)
+      const { container } = renderComponent(widget, 5)
 
-      expect(wrapper.findComponent({ name: 'Slider' }).exists()).toBe(true)
+      expect(getSlider(container)).not.toBeNull()
     })
 
     it('renders input field', () => {
       const widget = createSliderWidget(5)
-      const wrapper = mountComponent(widget, 5)
+      const { container } = renderComponent(widget, 5)
 
-      expect(wrapper.find('input[inputmode="numeric"]').exists()).toBe(true)
+      expect(getNumberInput(container)).not.toBeNull()
     })
 
     it('displays initial value in input field', () => {
       const widget = createSliderWidget(42)
-      const wrapper = mountComponent(widget, 42)
+      const { container } = renderComponent(widget, 42)
 
-      const input = getNumberInput(wrapper)
+      const input = getNumberInput(container)
       expect(input.value).toBe('42')
     })
   })
@@ -103,61 +111,61 @@ describe('WidgetInputNumberSlider Value Binding', () => {
   describe('Widget Options', () => {
     it('passes widget options to PrimeVue components', () => {
       const widget = createSliderWidget(5, { min: -10, max: 50 })
-      const wrapper = mountComponent(widget, 5)
+      const { container } = renderComponent(widget, 5)
 
-      const slider = wrapper.findComponent({ name: 'Slider' })
-      expect(slider.props('min')).toBe(-10)
-      expect(slider.props('max')).toBe(50)
+      const slider = getSlider(container)
+      expect(Number(slider.dataset.min)).toBe(-10)
+      expect(Number(slider.dataset.max)).toBe(50)
     })
 
     it('handles negative value ranges', () => {
       const widget = createSliderWidget(0, { min: -100, max: 100 })
-      const wrapper = mountComponent(widget, 0)
+      const { container } = renderComponent(widget, 0)
 
-      const slider = wrapper.findComponent({ name: 'Slider' })
-      expect(slider.props('min')).toBe(-100)
-      expect(slider.props('max')).toBe(100)
+      const slider = getSlider(container)
+      expect(Number(slider.dataset.min)).toBe(-100)
+      expect(Number(slider.dataset.max)).toBe(100)
     })
 
     describe('Step Size', () => {
       it('should default to 1', () => {
         const widget = createSliderWidget(5)
-        const wrapper = mountComponent(widget, 5)
+        const { container } = renderComponent(widget, 5)
 
-        const slider = wrapper.findComponent({ name: 'Slider' })
-        expect(slider.props('step')).toBe(1)
+        const slider = getSlider(container)
+        expect(Number(slider.dataset.step)).toBe(1)
       })
 
       it('should get the step2 value if present', () => {
         const widget = createSliderWidget(5, { step2: 0.01 })
-        const wrapper = mountComponent(widget, 5)
+        const { container } = renderComponent(widget, 5)
 
-        const slider = wrapper.findComponent({ name: 'Slider' })
-        expect(slider.props('step')).toBe(0.01)
+        const slider = getSlider(container)
+        expect(Number(slider.dataset.step)).toBe(0.01)
       })
 
       it('should be 1 for precision 0', () => {
         const widget = createSliderWidget(5, { precision: 0 })
-        const wrapper = mountComponent(widget, 5)
+        const { container } = renderComponent(widget, 5)
 
-        const slider = wrapper.findComponent({ name: 'Slider' })
-        expect(slider.props('step')).toBe(1)
+        const slider = getSlider(container)
+        expect(Number(slider.dataset.step)).toBe(1)
       })
 
       it('should be .1 for precision 1', () => {
         const widget = createSliderWidget(5, { precision: 1 })
-        const wrapper = mountComponent(widget, 5)
+        const { container } = renderComponent(widget, 5)
 
-        const slider = wrapper.findComponent({ name: 'Slider' })
-        expect(slider.props('step')).toBe(0.1)
+        const slider = getSlider(container)
+        expect(Number(slider.dataset.step)).toBe(0.1)
       })
 
       it('should be .00001 for precision 5', () => {
         const widget = createSliderWidget(5, { precision: 5 })
-        const wrapper = mountComponent(widget, 5)
+        const { container } = renderComponent(widget, 5)
 
-        const slider = wrapper.findComponent({ name: 'Slider' })
-        expect(slider.props('step')).toBe(0.00001)
+        const slider = getSlider(container)
+        expect(Number(slider.dataset.step)).toBe(0.00001)
       })
     })
   })
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.test.ts
index 9ffae1b1a8..e8855d7dd2 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.test.ts
@@ -1,9 +1,9 @@
-import { mount } from '@vue/test-utils'
+import { fireEvent, render, screen } from '@testing-library/vue'
 import PrimeVue from 'primevue/config'
 import InputText from 'primevue/inputtext'
 import type { InputTextProps } from 'primevue/inputtext'
 import Textarea from 'primevue/textarea'
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 
 import type { IWidgetOptions } from '@/lib/litegraph/src/types/widgets'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
@@ -24,12 +24,12 @@ describe('WidgetInputText Value Binding', () => {
       callback
     })
 
-  const mountComponent = (
+  const renderComponent = (
     widget: SimplifiedWidget<string>,
     modelValue: string,
-    readonly = false
+    extraProps: Record<string, unknown> = {}
   ) => {
-    return mount(WidgetInputText, {
+    return render(WidgetInputText, {
       global: {
         plugins: [PrimeVue],
         components: { InputText, Textarea }
@@ -37,146 +37,166 @@ describe('WidgetInputText Value Binding', () => {
       props: {
         widget,
         modelValue,
-        readonly
+        ...extraProps
       }
     })
   }
 
   const setInputValueAndTrigger = async (
-    wrapper: ReturnType<typeof mount>,
+    input: HTMLElement,
     value: string,
-    trigger: 'blur' | 'keydown.enter' = 'blur'
+    trigger: 'blur' | 'enter' = 'blur'
   ) => {
-    const input = wrapper.find('input[type="text"]')
-    if (!(input.element instanceof HTMLInputElement)) {
-      throw new Error('Input element not found or is not an HTMLInputElement')
+    await fireEvent.update(input, value)
+    if (trigger === 'blur') {
+      await fireEvent.blur(input)
+    } else {
+      // eslint-disable-next-line testing-library/prefer-user-event
+      await fireEvent.keyDown(input, { key: 'Enter' })
     }
-    await input.setValue(value)
-    await input.trigger(trigger)
     return input
   }
 
   describe('Vue Event Emission', () => {
     it('emits Vue event when input value changes on blur', async () => {
       const widget = createInputTextWidget('hello')
-      const wrapper = mountComponent(widget, 'hello')
+      const onUpdateModelValue = vi.fn()
+      renderComponent(widget, 'hello', {
+        'onUpdate:modelValue': onUpdateModelValue
+      })
 
-      await setInputValueAndTrigger(wrapper, 'world', 'blur')
+      const input = screen.getByRole('textbox')
+      await setInputValueAndTrigger(input, 'world', 'blur')
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toContain('world')
+      expect(onUpdateModelValue).toHaveBeenCalledWith('world')
     })
 
     it('emits Vue event when enter key is pressed', async () => {
       const widget = createInputTextWidget('initial')
-      const wrapper = mountComponent(widget, 'initial')
+      const onUpdateModelValue = vi.fn()
+      renderComponent(widget, 'initial', {
+        'onUpdate:modelValue': onUpdateModelValue
+      })
 
-      await setInputValueAndTrigger(wrapper, 'new value', 'keydown.enter')
+      const input = screen.getByRole('textbox')
+      await setInputValueAndTrigger(input, 'new value', 'enter')
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toContain('new value')
+      expect(onUpdateModelValue).toHaveBeenCalledWith('new value')
     })
 
     it('handles empty string values', async () => {
       const widget = createInputTextWidget('something')
-      const wrapper = mountComponent(widget, 'something')
+      const onUpdateModelValue = vi.fn()
+      renderComponent(widget, 'something', {
+        'onUpdate:modelValue': onUpdateModelValue
+      })
 
-      await setInputValueAndTrigger(wrapper, '')
+      const input = screen.getByRole('textbox')
+      await setInputValueAndTrigger(input, '')
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toContain('')
+      expect(onUpdateModelValue).toHaveBeenCalledWith('')
     })
 
     it('handles special characters correctly', async () => {
       const widget = createInputTextWidget('normal')
-      const wrapper = mountComponent(widget, 'normal')
+      const onUpdateModelValue = vi.fn()
+      renderComponent(widget, 'normal', {
+        'onUpdate:modelValue': onUpdateModelValue
+      })
 
       const specialText = 'special @#$%^&*()[]{}|\\:";\'<>?,./'
-      await setInputValueAndTrigger(wrapper, specialText)
+      const input = screen.getByRole('textbox')
+      await setInputValueAndTrigger(input, specialText)
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toContain(specialText)
+      expect(onUpdateModelValue).toHaveBeenCalledWith(specialText)
     })
 
     it('handles missing callback gracefully', async () => {
       const widget = createInputTextWidget('test', {}, undefined)
-      const wrapper = mountComponent(widget, 'test')
+      const onUpdateModelValue = vi.fn()
+      renderComponent(widget, 'test', {
+        'onUpdate:modelValue': onUpdateModelValue
+      })
 
-      await setInputValueAndTrigger(wrapper, 'new value')
+      const input = screen.getByRole('textbox')
+      await setInputValueAndTrigger(input, 'new value')
 
       // Should still emit Vue event
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toContain('new value')
+      expect(onUpdateModelValue).toHaveBeenCalledWith('new value')
     })
   })
 
   describe('User Interactions', () => {
     it('emits update:modelValue on blur', async () => {
       const widget = createInputTextWidget('original')
-      const wrapper = mountComponent(widget, 'original')
+      const onUpdateModelValue = vi.fn()
+      renderComponent(widget, 'original', {
+        'onUpdate:modelValue': onUpdateModelValue
+      })
 
-      await setInputValueAndTrigger(wrapper, 'updated')
+      const input = screen.getByRole('textbox')
+      await setInputValueAndTrigger(input, 'updated')
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toContain('updated')
+      expect(onUpdateModelValue).toHaveBeenCalledWith('updated')
     })
 
     it('emits update:modelValue on enter key', async () => {
       const widget = createInputTextWidget('start')
-      const wrapper = mountComponent(widget, 'start')
+      const onUpdateModelValue = vi.fn()
+      renderComponent(widget, 'start', {
+        'onUpdate:modelValue': onUpdateModelValue
+      })
 
-      await setInputValueAndTrigger(wrapper, 'finish', 'keydown.enter')
+      const input = screen.getByRole('textbox')
+      await setInputValueAndTrigger(input, 'finish', 'enter')
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toContain('finish')
+      expect(onUpdateModelValue).toHaveBeenCalledWith('finish')
     })
   })
 
   describe('Component Rendering', () => {
     it('always renders InputText component', () => {
       const widget = createInputTextWidget('test value')
-      const wrapper = mountComponent(widget, 'test value')
+      const { container } = renderComponent(widget, 'test value')
 
       // WidgetInputText always uses InputText, not Textarea
-      const input = wrapper.find('input[type="text"]')
-      expect(input.exists()).toBe(true)
+      const input = screen.getByRole('textbox')
+      expect(input).toBeInTheDocument()
 
       // Should not render textarea (that's handled by WidgetTextarea component)
-      const textarea = wrapper.find('textarea')
-      expect(textarea.exists()).toBe(false)
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      const textarea = container.querySelector('textarea')
+      expect(textarea).not.toBeInTheDocument()
     })
   })
 
   describe('Edge Cases', () => {
     it('handles very long strings', async () => {
       const widget = createInputTextWidget('short')
-      const wrapper = mountComponent(widget, 'short')
+      const onUpdateModelValue = vi.fn()
+      renderComponent(widget, 'short', {
+        'onUpdate:modelValue': onUpdateModelValue
+      })
 
       const longString = 'a'.repeat(10000)
-      await setInputValueAndTrigger(wrapper, longString)
+      const input = screen.getByRole('textbox')
+      await setInputValueAndTrigger(input, longString)
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toContain(longString)
+      expect(onUpdateModelValue).toHaveBeenCalledWith(longString)
     })
 
     it('handles unicode characters', async () => {
       const widget = createInputTextWidget('ascii')
-      const wrapper = mountComponent(widget, 'ascii')
+      const onUpdateModelValue = vi.fn()
+      renderComponent(widget, 'ascii', {
+        'onUpdate:modelValue': onUpdateModelValue
+      })
 
       const unicodeText = '🎨 Unicode: αβγ 中文 العربية 🚀'
-      await setInputValueAndTrigger(wrapper, unicodeText)
+      const input = screen.getByRole('textbox')
+      await setInputValueAndTrigger(input, unicodeText)
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toContain(unicodeText)
+      expect(onUpdateModelValue).toHaveBeenCalledWith(unicodeText)
     })
   })
 })
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.test.ts
index 918acae80b..5e04f258e9 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.test.ts
@@ -1,4 +1,7 @@
-import { mount } from '@vue/test-utils'
+/* eslint-disable testing-library/no-container, testing-library/no-node-access */
+/* eslint-disable testing-library/prefer-user-event */
+import { fireEvent, render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import PrimeVue from 'primevue/config'
 import Textarea from 'primevue/textarea'
 import { describe, expect, it, vi } from 'vitest'
@@ -38,11 +41,11 @@ describe('WidgetMarkdown Dual Mode Display', () => {
       callback
     })
 
-  const mountComponent = (
+  function renderComponent(
     widget: SimplifiedWidget<string>,
     modelValue: string,
-    readonly = false
-  ) => {
+    onUpdateModelValue?: (...args: unknown[]) => void
+  ) {
     const i18n = createI18n({
       legacy: false,
       locale: 'en',
@@ -53,7 +56,7 @@ describe('WidgetMarkdown Dual Mode Display', () => {
       }
     })
 
-    return mount(WidgetMarkdown, {
+    return render(WidgetMarkdown, {
       global: {
         plugins: [PrimeVue, i18n],
         components: { Textarea }
@@ -61,22 +64,26 @@ describe('WidgetMarkdown Dual Mode Display', () => {
       props: {
         widget,
         modelValue,
-        readonly
+        ...(onUpdateModelValue
+          ? { 'onUpdate:modelValue': onUpdateModelValue }
+          : {})
       }
     })
   }
 
-  const clickToEdit = async (wrapper: ReturnType<typeof mount>) => {
-    const container = wrapper.find('.widget-markdown')
-    await container.trigger('click')
+  async function dblClickToEdit(container: Element) {
+    const widgetMarkdown = container.querySelector(
+      '.widget-markdown'
+    ) as HTMLElement
+    await userEvent.dblClick(widgetMarkdown)
     await nextTick()
-    return container
+    return widgetMarkdown
   }
 
-  const blurTextarea = async (wrapper: ReturnType<typeof mount>) => {
-    const textarea = wrapper.find('textarea')
-    if (textarea.exists()) {
-      await textarea.trigger('blur')
+  async function blurTextarea() {
+    const textarea = screen.queryByRole('textbox')
+    if (textarea) {
+      await fireEvent.blur(textarea)
       await nextTick()
     }
     return textarea
@@ -86,13 +93,13 @@ describe('WidgetMarkdown Dual Mode Display', () => {
     it('renders markdown content as HTML in display mode', () => {
       const markdown = '# Heading\nSome **bold** and *italic* text.'
       const widget = createMarkdownWidget(markdown)
-      const wrapper = mountComponent(widget, markdown)
+      const { container } = renderComponent(widget, markdown)
 
-      const displayDiv = wrapper.find('.comfy-markdown-content')
-      expect(displayDiv.exists()).toBe(true)
-      expect(displayDiv.html()).toContain('<h1>Heading</h1>')
-      expect(displayDiv.html()).toContain('<strong>bold</strong>')
-      expect(displayDiv.html()).toContain('<em>italic</em>')
+      const displayDiv = container.querySelector('.comfy-markdown-content')
+      expect(displayDiv).not.toBeNull()
+      expect(displayDiv!.innerHTML).toContain('<h1>Heading</h1>')
+      expect(displayDiv!.innerHTML).toContain('<strong>bold</strong>')
+      expect(displayDiv!.innerHTML).toContain('<em>italic</em>')
     })
 
     it('starts in display mode by default', (context) => {
@@ -100,19 +107,19 @@ describe('WidgetMarkdown Dual Mode Display', () => {
         'Something in the logic in these tests is definitely off. needs diagnosis'
       )
       const widget = createMarkdownWidget('# Test')
-      const wrapper = mountComponent(widget, '# Test')
+      const { container } = renderComponent(widget, '# Test')
 
-      expect(wrapper.find('.comfy-markdown-content').exists()).toBe(true)
-      expect(wrapper.find('textarea').exists()).toBe(false)
+      expect(container.querySelector('.comfy-markdown-content')).not.toBeNull()
+      expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
     })
 
     it('handles empty markdown content', () => {
       const widget = createMarkdownWidget('')
-      const wrapper = mountComponent(widget, '')
+      const { container } = renderComponent(widget, '')
 
-      const displayDiv = wrapper.find('.comfy-markdown-content')
-      expect(displayDiv.exists()).toBe(true)
-      expect(displayDiv.text()).toBe('')
+      const displayDiv = container.querySelector('.comfy-markdown-content')
+      expect(displayDiv).not.toBeNull()
+      expect(displayDiv!.textContent).toBe('')
     })
   })
 
@@ -120,40 +127,40 @@ describe('WidgetMarkdown Dual Mode Display', () => {
     it('switches to edit mode when clicked', async (context) => {
       context.skip('markdown editor not disappearing. needs diagnosis')
       const widget = createMarkdownWidget('# Test')
-      const wrapper = mountComponent(widget, '# Test')
+      const { container } = renderComponent(widget, '# Test')
 
-      expect(wrapper.find('.comfy-markdown-content').exists()).toBe(true)
+      expect(container.querySelector('.comfy-markdown-content')).not.toBeNull()
 
-      await clickToEdit(wrapper)
+      await dblClickToEdit(container)
 
-      expect(wrapper.find('.comfy-markdown-content').exists()).toBe(false)
-      expect(wrapper.find('textarea').exists()).toBe(true)
+      expect(container.querySelector('.comfy-markdown-content')).toBeNull()
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
     })
 
     it('does not switch to edit mode when already editing', async () => {
       const widget = createMarkdownWidget('# Test')
-      const wrapper = mountComponent(widget, '# Test')
+      const { container } = renderComponent(widget, '# Test')
 
       // First click to enter edit mode
-      await clickToEdit(wrapper)
-      expect(wrapper.find('textarea').exists()).toBe(true)
+      await dblClickToEdit(container)
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
 
       // Second click should not have any effect
-      await clickToEdit(wrapper)
-      expect(wrapper.find('textarea').exists()).toBe(true)
+      await dblClickToEdit(container)
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
     })
 
     it('switches back to display mode on textarea blur', async (context) => {
       context.skip('textarea not disappearing. needs diagnosis')
       const widget = createMarkdownWidget('# Test')
-      const wrapper = mountComponent(widget, '# Test')
+      const { container } = renderComponent(widget, '# Test')
 
-      await clickToEdit(wrapper)
-      expect(wrapper.find('textarea').exists()).toBe(true)
+      await dblClickToEdit(container)
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
 
-      await blurTextarea(wrapper)
-      expect(wrapper.find('.comfy-markdown-content').exists()).toBe(true)
-      expect(wrapper.find('textarea').exists()).toBe(false)
+      await blurTextarea()
+      expect(container.querySelector('.comfy-markdown-content')).not.toBeNull()
+      expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
     })
   })
 
@@ -161,13 +168,12 @@ describe('WidgetMarkdown Dual Mode Display', () => {
     it('displays textarea with current value when editing', async () => {
       const markdown = '# Original Content'
       const widget = createMarkdownWidget(markdown)
-      const wrapper = mountComponent(widget, markdown)
+      const { container } = renderComponent(widget, markdown)
 
-      await clickToEdit(wrapper)
+      await dblClickToEdit(container)
 
-      const textarea = wrapper.find('textarea')
-      expect(textarea.exists()).toBe(true)
-      expect(textarea.element.value).toBe('# Original Content')
+      const textarea = screen.getByRole('textbox') as HTMLTextAreaElement
+      expect(textarea.value).toBe('# Original Content')
     })
 
     it('applies styling and configuration to textarea', async (context) => {
@@ -175,34 +181,33 @@ describe('WidgetMarkdown Dual Mode Display', () => {
         'Props or styling are not as described in the test. needs diagnosis'
       )
       const widget = createMarkdownWidget('# Test')
-      const wrapper = mountComponent(widget, '# Test')
+      const { container } = renderComponent(widget, '# Test')
 
-      await clickToEdit(wrapper)
+      await dblClickToEdit(container)
 
-      const textarea = wrapper.findComponent({ name: 'Textarea' })
-      expect(textarea.props('size')).toBe('small')
-      // Check rows attribute in the DOM instead of props
-      const textareaElement = wrapper.find('textarea')
-      expect(textareaElement.attributes('rows')).toBe('6')
-      expect(textarea.classes()).toContain('text-xs')
-      expect(textarea.classes()).toContain('w-full')
+      const textarea = screen.getByRole('textbox')
+      // Check rows attribute in the DOM
+      expect(textarea.getAttribute('rows')).toBe('6')
+      expect(textarea.classList.contains('text-xs')).toBe(true)
+      expect(textarea.classList.contains('w-full')).toBe(true)
     })
 
     it('stops click and keydown event propagation in edit mode', async () => {
       const widget = createMarkdownWidget('# Test')
-      const wrapper = mountComponent(widget, '# Test')
+      const { container } = renderComponent(widget, '# Test')
 
-      await clickToEdit(wrapper)
+      await dblClickToEdit(container)
 
-      const textarea = wrapper.find('textarea')
+      const textarea = screen.getByRole('textbox')
       const clickSpy = vi.fn()
       const keydownSpy = vi.fn()
 
-      wrapper.element.addEventListener('click', clickSpy)
-      wrapper.element.addEventListener('keydown', keydownSpy)
+      const rootEl = container.firstElementChild as HTMLElement
+      rootEl.addEventListener('click', clickSpy)
+      rootEl.addEventListener('keydown', keydownSpy)
 
-      await textarea.trigger('click')
-      await textarea.trigger('keydown', { key: 'Enter' })
+      await fireEvent.click(textarea)
+      await fireEvent.keyDown(textarea, { key: 'Enter' })
 
       // Events should be stopped from propagating
       expect(clickSpy).not.toHaveBeenCalled()
@@ -212,52 +217,51 @@ describe('WidgetMarkdown Dual Mode Display', () => {
     describe('Pointer Event Propagation', () => {
       it('stops pointerdown propagation to prevent node drag during text selection', async () => {
         const widget = createMarkdownWidget('# Test')
-        const wrapper = mountComponent(widget, '# Test')
+        const { container } = renderComponent(widget, '# Test')
 
-        await clickToEdit(wrapper)
+        await dblClickToEdit(container)
 
-        const textarea = wrapper.find('textarea')
-        expect(textarea.exists()).toBe(true)
+        const textarea = screen.getByRole('textbox')
 
         const parentPointerdownHandler = vi.fn()
-        const wrapperEl = wrapper.element as HTMLElement
-        wrapperEl.addEventListener('pointerdown', parentPointerdownHandler)
+        const rootEl = container.firstElementChild as HTMLElement
+        rootEl.addEventListener('pointerdown', parentPointerdownHandler)
 
-        await textarea.trigger('pointerdown')
+        await fireEvent.pointerDown(textarea)
 
         expect(parentPointerdownHandler).not.toHaveBeenCalled()
       })
 
       it('stops pointermove propagation during text selection', async () => {
         const widget = createMarkdownWidget('# Test')
-        const wrapper = mountComponent(widget, '# Test')
+        const { container } = renderComponent(widget, '# Test')
 
-        await clickToEdit(wrapper)
+        await dblClickToEdit(container)
 
-        const textarea = wrapper.find('textarea')
+        const textarea = screen.getByRole('textbox')
 
         const parentPointermoveHandler = vi.fn()
-        const wrapperEl = wrapper.element as HTMLElement
-        wrapperEl.addEventListener('pointermove', parentPointermoveHandler)
+        const rootEl = container.firstElementChild as HTMLElement
+        rootEl.addEventListener('pointermove', parentPointermoveHandler)
 
-        await textarea.trigger('pointermove')
+        await fireEvent.pointerMove(textarea)
 
         expect(parentPointermoveHandler).not.toHaveBeenCalled()
       })
 
       it('stops pointerup propagation after text selection', async () => {
         const widget = createMarkdownWidget('# Test')
-        const wrapper = mountComponent(widget, '# Test')
+        const { container } = renderComponent(widget, '# Test')
 
-        await clickToEdit(wrapper)
+        await dblClickToEdit(container)
 
-        const textarea = wrapper.find('textarea')
+        const textarea = screen.getByRole('textbox')
 
         const parentPointerupHandler = vi.fn()
-        const wrapperEl = wrapper.element as HTMLElement
-        wrapperEl.addEventListener('pointerup', parentPointerupHandler)
+        const rootEl = container.firstElementChild as HTMLElement
+        rootEl.addEventListener('pointerup', parentPointerupHandler)
 
-        await textarea.trigger('pointerup')
+        await fireEvent.pointerUp(textarea)
 
         expect(parentPointerupHandler).not.toHaveBeenCalled()
       })
@@ -267,65 +271,92 @@ describe('WidgetMarkdown Dual Mode Display', () => {
   describe('Value Updates', () => {
     it('emits update:modelValue when textarea content changes', async () => {
       const widget = createMarkdownWidget('# Original')
-      const wrapper = mountComponent(widget, '# Original')
+      const onUpdateModelValue = vi.fn()
+      const { container } = renderComponent(
+        widget,
+        '# Original',
+        onUpdateModelValue
+      )
 
-      await clickToEdit(wrapper)
+      await dblClickToEdit(container)
 
-      const textarea = wrapper.find('textarea')
-      await textarea.setValue('# Updated Content')
-      await textarea.trigger('input')
+      const textarea = screen.getByRole('textbox')
+      await fireEvent.update(textarea, '# Updated Content')
+      await fireEvent.input(textarea)
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted![emitted!.length - 1]).toEqual(['# Updated Content'])
+      expect(onUpdateModelValue).toHaveBeenCalled()
+      const lastCall =
+        onUpdateModelValue.mock.calls[onUpdateModelValue.mock.calls.length - 1]
+      expect(lastCall).toEqual(['# Updated Content'])
     })
 
     it('renders updated HTML after value change and blur', async () => {
       const widget = createMarkdownWidget('# Original')
-      const wrapper = mountComponent(widget, '# Original')
+      const onUpdateModelValue = vi.fn()
+      const { container, rerender } = renderComponent(
+        widget,
+        '# Original',
+        onUpdateModelValue
+      )
 
-      await clickToEdit(wrapper)
+      await dblClickToEdit(container)
 
-      const textarea = wrapper.find('textarea')
-      await textarea.setValue('## New Heading\nWith **bold** text')
-      await textarea.trigger('input')
-      await blurTextarea(wrapper)
+      const textarea = screen.getByRole('textbox')
+      await fireEvent.update(textarea, '## New Heading\nWith **bold** text')
+      await fireEvent.input(textarea)
 
-      const displayDiv = wrapper.find('.comfy-markdown-content')
-      expect(displayDiv.html()).toContain('<h2>New Heading</h2>')
-      expect(displayDiv.html()).toContain('<strong>bold</strong>')
+      // Simulate parent updating the prop after receiving the emitted value
+      await rerender({
+        widget,
+        modelValue: '## New Heading\nWith **bold** text'
+      })
+
+      await blurTextarea()
+
+      const displayDiv = container.querySelector('.comfy-markdown-content')
+      expect(displayDiv!.innerHTML).toContain('<h2>New Heading</h2>')
+      expect(displayDiv!.innerHTML).toContain('<strong>bold</strong>')
     })
 
     it('emits update:modelValue for callback handling at parent level', async () => {
       const widget = createMarkdownWidget('# Test', {})
-      const wrapper = mountComponent(widget, '# Test')
+      const onUpdateModelValue = vi.fn()
+      const { container } = renderComponent(
+        widget,
+        '# Test',
+        onUpdateModelValue
+      )
 
-      await clickToEdit(wrapper)
+      await dblClickToEdit(container)
 
-      const textarea = wrapper.find('textarea')
-      await textarea.setValue('# Changed')
-      await textarea.trigger('input')
+      const textarea = screen.getByRole('textbox')
+      await fireEvent.update(textarea, '# Changed')
+      await fireEvent.input(textarea)
 
-      // The widget should emit the change for parent (NodeWidgets) to handle callbacks
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted![emitted!.length - 1]).toEqual(['# Changed'])
+      expect(onUpdateModelValue).toHaveBeenCalled()
+      const lastCall =
+        onUpdateModelValue.mock.calls[onUpdateModelValue.mock.calls.length - 1]
+      expect(lastCall).toEqual(['# Changed'])
     })
 
     it('handles missing callback gracefully', async () => {
       const widget = createMarkdownWidget('# Test', {}, undefined)
-      const wrapper = mountComponent(widget, '# Test')
+      const onUpdateModelValue = vi.fn()
+      const { container } = renderComponent(
+        widget,
+        '# Test',
+        onUpdateModelValue
+      )
 
-      await clickToEdit(wrapper)
+      await dblClickToEdit(container)
 
-      const textarea = wrapper.find('textarea')
-      await textarea.setValue('# Changed')
+      const textarea = screen.getByRole('textbox')
+      await fireEvent.update(textarea, '# Changed')
 
       // Should not throw error and should still emit Vue event
-      await expect(textarea.trigger('input')).resolves.not.toThrow()
+      await expect(fireEvent.input(textarea)).resolves.not.toThrow()
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
+      expect(onUpdateModelValue).toHaveBeenCalled()
     })
   })
 
@@ -337,31 +368,31 @@ This paragraph has **bold** and *italic* text.
 Another line with more content.`
 
       const widget = createMarkdownWidget(complexMarkdown)
-      const wrapper = mountComponent(widget, complexMarkdown)
+      const { container } = renderComponent(widget, complexMarkdown)
 
-      const displayDiv = wrapper.find('.comfy-markdown-content')
-      expect(displayDiv.html()).toContain('<h1>Main Heading</h1>')
-      expect(displayDiv.html()).toContain('<h2>Subheading</h2>')
-      expect(displayDiv.html()).toContain('<strong>bold</strong>')
-      expect(displayDiv.html()).toContain('<em>italic</em>')
+      const displayDiv = container.querySelector('.comfy-markdown-content')
+      expect(displayDiv!.innerHTML).toContain('<h1>Main Heading</h1>')
+      expect(displayDiv!.innerHTML).toContain('<h2>Subheading</h2>')
+      expect(displayDiv!.innerHTML).toContain('<strong>bold</strong>')
+      expect(displayDiv!.innerHTML).toContain('<em>italic</em>')
     })
 
     it('handles line breaks in markdown', () => {
       const markdownWithBreaks = 'Line 1\nLine 2\nLine 3'
       const widget = createMarkdownWidget(markdownWithBreaks)
-      const wrapper = mountComponent(widget, markdownWithBreaks)
+      const { container } = renderComponent(widget, markdownWithBreaks)
 
-      const displayDiv = wrapper.find('.comfy-markdown-content')
-      expect(displayDiv.html()).toContain('<br>')
+      const displayDiv = container.querySelector('.comfy-markdown-content')
+      expect(displayDiv!.innerHTML).toContain('<br>')
     })
 
     it('handles empty or whitespace-only markdown', () => {
       const whitespaceMarkdown = '   \n\n   '
       const widget = createMarkdownWidget(whitespaceMarkdown)
-      const wrapper = mountComponent(widget, whitespaceMarkdown)
+      const { container } = renderComponent(widget, whitespaceMarkdown)
 
-      const displayDiv = wrapper.find('.comfy-markdown-content')
-      expect(displayDiv.exists()).toBe(true)
+      const displayDiv = container.querySelector('.comfy-markdown-content')
+      expect(displayDiv).not.toBeNull()
     })
   })
 
@@ -369,82 +400,76 @@ Another line with more content.`
     it('handles very long markdown content', async () => {
       const longMarkdown = '# Heading\n' + 'Lorem ipsum '.repeat(1000)
       const widget = createMarkdownWidget(longMarkdown)
-      const wrapper = mountComponent(widget, longMarkdown)
+      const { container } = renderComponent(widget, longMarkdown)
 
       // Should render without issues
-      const displayDiv = wrapper.find('.comfy-markdown-content')
-      expect(displayDiv.exists()).toBe(true)
+      const displayDiv = container.querySelector('.comfy-markdown-content')
+      expect(displayDiv).not.toBeNull()
 
       // Should switch to edit mode
-      await clickToEdit(wrapper)
-      const textarea = wrapper.find('textarea')
-      expect(textarea.exists()).toBe(true)
-      expect(textarea.element.value).toBe(longMarkdown)
+      await dblClickToEdit(container)
+      const textarea = screen.getByRole('textbox') as HTMLTextAreaElement
+      expect(textarea.value).toBe(longMarkdown)
     })
 
     it('handles special characters in markdown', async () => {
       const specialChars = '# Special: @#$%^&*()[]{}|\\:";\'<>?,./'
       const widget = createMarkdownWidget(specialChars)
-      const wrapper = mountComponent(widget, specialChars)
+      const { container } = renderComponent(widget, specialChars)
 
-      await clickToEdit(wrapper)
-      const textarea = wrapper.find('textarea')
-      expect(textarea.element.value).toBe(specialChars)
+      await dblClickToEdit(container)
+      const textarea = screen.getByRole('textbox') as HTMLTextAreaElement
+      expect(textarea.value).toBe(specialChars)
     })
 
     it('handles unicode characters', async () => {
       const unicode = '# Unicode: 🎨 αβγ 中文 العربية 🚀'
       const widget = createMarkdownWidget(unicode)
-      const wrapper = mountComponent(widget, unicode)
+      const onUpdateModelValue = vi.fn()
+      const { container } = renderComponent(widget, unicode, onUpdateModelValue)
 
-      await clickToEdit(wrapper)
-      const textarea = wrapper.find('textarea')
-      expect(textarea.element.value).toBe(unicode)
+      await dblClickToEdit(container)
+      const textarea = screen.getByRole('textbox') as HTMLTextAreaElement
+      expect(textarea.value).toBe(unicode)
 
-      await textarea.setValue(unicode + ' more unicode')
-      await textarea.trigger('input')
+      await fireEvent.update(textarea, unicode + ' more unicode')
+      await fireEvent.input(textarea)
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted![emitted!.length - 1]).toEqual([unicode + ' more unicode'])
+      expect(onUpdateModelValue).toHaveBeenCalled()
+      const lastCall =
+        onUpdateModelValue.mock.calls[onUpdateModelValue.mock.calls.length - 1]
+      expect(lastCall).toEqual([unicode + ' more unicode'])
     })
 
     it('handles rapid edit mode toggling', async () => {
       const widget = createMarkdownWidget('# Test')
-      const wrapper = mountComponent(widget, '# Test')
+      const { container } = renderComponent(widget, '# Test')
 
       // Rapid toggling
-      await clickToEdit(wrapper)
-      expect(wrapper.find('textarea').exists()).toBe(true)
+      await dblClickToEdit(container)
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
 
-      await blurTextarea(wrapper)
-      expect(wrapper.find('.comfy-markdown-content').exists()).toBe(true)
+      await blurTextarea()
+      expect(container.querySelector('.comfy-markdown-content')).not.toBeNull()
 
-      await clickToEdit(wrapper)
-      expect(wrapper.find('textarea').exists()).toBe(true)
+      await dblClickToEdit(container)
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
     })
   })
 
   describe('Focus Management', () => {
     it('creates textarea reference when entering edit mode', async () => {
       const widget = createMarkdownWidget('# Test')
-      const wrapper = mountComponent(widget, '# Test')
-      const vm = wrapper.vm as InstanceType<typeof WidgetMarkdown>
+      const { container } = renderComponent(widget, '# Test')
 
-      // Test that the component creates a textarea reference when entering edit mode
-      // @ts-expect-error - isEditing is not exposed
-      expect(vm.isEditing).toBe(false)
+      // Initially not in edit mode - textarea should not be visible
+      expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
 
-      // @ts-expect-error - startEditing is not exposed
-      await vm.startEditing()
-
-      // @ts-expect-error - isEditing is not exposed
-      expect(vm.isEditing).toBe(true)
-      await wrapper.vm.$nextTick()
+      // Double-click to start editing
+      await dblClickToEdit(container)
 
       // Check that textarea exists after entering edit mode
-      const textarea = wrapper.findComponent({ name: 'Textarea' })
-      expect(textarea.exists()).toBe(true)
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
     })
   })
 })
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
index d4f068604c..6152e911f5 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
@@ -88,10 +88,9 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
-import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { app } from '@/scripts/app'
-import { useAudioService } from '@/services/audioService'
+import { isDOMWidget } from '@/scripts/domWidget'
 
 import { useAudioPlayback } from '../composables/audio/useAudioPlayback'
 import { useAudioRecorder } from '../composables/audio/useAudioRecorder'
@@ -108,12 +107,14 @@ const props = defineProps<{
 // Audio element ref
 const audioRef = ref<HTMLAudioElement>()
 
-// Keep track of the last uploaded path as a backup
-let lastUploadedPath = ''
-
 // Composables
 const recorder = useAudioRecorder({
-  onRecordingComplete: handleRecordingComplete,
+  onRecordingComplete: async (blob) => handleRecordingComplete(blob),
+  onStop: () => {
+    pauseTimer()
+    waveform.stopWaveform()
+    waveform.dispose()
+  },
   onError: () => {
     useToastStore().addAlert(
       t('g.micPermissionDenied') || 'Microphone permission denied'
@@ -154,20 +155,33 @@ const { isPlaying, audioElementKey } = playback
 // Computed for waveform animation
 const isWaveformActive = computed(() => isRecording.value || isPlaying.value)
 
-const modelValue = defineModel<string>({ default: '' })
-
 const litegraphNode = computed(() => {
   if (!props.nodeId || !app.canvas.graph) return null
   return app.canvas.graph.getNodeById(props.nodeId) as LGraphNode | null
 })
 
-async function handleRecordingComplete(blob: Blob) {
-  try {
-    const path = await useAudioService().convertBlobToFileAndSubmit(blob)
-    modelValue.value = path
-    lastUploadedPath = path
-  } catch (e) {
-    useToastStore().addAlert('Failed to upload recorded audio')
+function handleRecordingComplete(blob: Blob) {
+  // Create a widget-owned blob URL (independent of useAudioRecorder's
+  // recordedURL which gets revoked on re-record or unmount) and set it
+  // on the litegraph audioUI DOM widget's element. The original
+  // serializeValue (in uploadAudio.ts) reads element.src, fetches the
+  // blob, and uploads at serialization time.
+  const node = litegraphNode.value
+  if (!node?.widgets) return
+  for (const w of node.widgets) {
+    if (
+      !(
+        isDOMWidget<HTMLAudioElement, string>(w) &&
+        w.element instanceof HTMLAudioElement
+      )
+    )
+      continue
+
+    if (w.element.src.startsWith('blob:')) {
+      URL.revokeObjectURL(w.element.src)
+    }
+    w.element.src = URL.createObjectURL(blob)
+    break
   }
 }
 
@@ -198,8 +212,6 @@ async function handleStartRecording() {
 
 function handleStopRecording() {
   recorder.stopRecording()
-  pauseTimer()
-  waveform.stopWaveform()
 }
 
 async function handlePlayRecording() {
@@ -258,42 +270,8 @@ function handlePlaybackEnded() {
   }
 }
 
-// Serialization function for workflow execution
-async function serializeValue() {
-  if (isRecording.value && recorder.mediaRecorder.value) {
-    recorder.mediaRecorder.value.stop()
-
-    await new Promise((resolve, reject) => {
-      let attempts = 0
-      const maxAttempts = 50 // 5 seconds max (50 * 100ms)
-      const checkRecording = () => {
-        if (!isRecording.value && modelValue.value) {
-          resolve(undefined)
-        } else if (++attempts >= maxAttempts) {
-          reject(new Error('Recording serialization timeout after 5 seconds'))
-        } else {
-          setTimeout(checkRecording, 100)
-        }
-      }
-      checkRecording()
-    })
-  }
-
-  return modelValue.value || lastUploadedPath || ''
-}
-
-function registerWidgetSerialization() {
-  const node = litegraphNode.value
-  if (!node?.widgets) return
-  const targetWidget = node.widgets.find((w: IBaseWidget) => w.name === 'audio')
-  if (targetWidget) {
-    targetWidget.serializeValue = serializeValue
-  }
-}
-
 onMounted(() => {
   waveform.initWaveform()
-  registerWidgetSerialization()
 })
 
 onUnmounted(() => {
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.asset-mode.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.asset-mode.test.ts
index 8116aa6735..5cbf269a56 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.asset-mode.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.asset-mode.test.ts
@@ -1,5 +1,5 @@
 import { createTestingPinia } from '@pinia/testing'
-import { flushPromises, mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
 import PrimeVue from 'primevue/config'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
@@ -13,7 +13,9 @@ const i18n = createI18n({
   messages: { en: {} }
 })
 
-// Mock modules
+const flushPromises = () =>
+  new Promise<void>((resolve) => setTimeout(resolve, 0))
+
 vi.mock('@/platform/assets/services/assetService', () => ({
   assetService: {
     shouldUseAssetBrowser: vi.fn(() => true),
@@ -21,10 +23,21 @@ vi.mock('@/platform/assets/services/assetService', () => ({
   }
 }))
 
-// Import after mocks are defined
 import { assetService } from '@/platform/assets/services/assetService'
 const mockShouldUseAssetBrowser = vi.mocked(assetService.shouldUseAssetBrowser)
 
+const stubs = {
+  WidgetSelectDropdown: {
+    template: '<div data-testid="widget-select-dropdown" />'
+  },
+  WidgetSelectDefault: {
+    template: '<div data-testid="widget-select-default" />'
+  },
+  WidgetWithControl: {
+    template: '<div data-testid="widget-with-control" />'
+  }
+}
+
 describe('WidgetSelect asset mode', () => {
   const createWidget = () =>
     createMockWidget<string | undefined>({
@@ -39,35 +52,31 @@ describe('WidgetSelect asset mode', () => {
     mockShouldUseAssetBrowser.mockReturnValue(true)
   })
 
-  // Helper to mount with common setup
-  const mountWidget = () => {
-    return mount(WidgetSelect, {
+  const renderWidget = () => {
+    return render(WidgetSelect, {
       props: {
         widget: createWidget(),
         modelValue: undefined,
         nodeType: 'CheckpointLoaderSimple'
       },
       global: {
-        plugins: [PrimeVue, createTestingPinia(), i18n]
+        plugins: [PrimeVue, createTestingPinia(), i18n],
+        stubs
       }
     })
   }
 
   it('uses dropdown when isCloud && UseAssetAPI && isEligible', async () => {
-    const wrapper = mountWidget()
+    renderWidget()
     await flushPromises()
 
-    expect(
-      wrapper.findComponent({ name: 'WidgetSelectDropdown' }).exists()
-    ).toBe(true)
+    expect(screen.getByTestId('widget-select-dropdown')).toBeInTheDocument()
   })
 
   it('uses default widget when shouldUseAssetBrowser returns false', () => {
     mockShouldUseAssetBrowser.mockReturnValue(false)
-    const wrapper = mountWidget()
+    renderWidget()
 
-    expect(
-      wrapper.findComponent({ name: 'WidgetSelectDefault' }).exists()
-    ).toBe(true)
+    expect(screen.getByTestId('widget-select-default')).toBeInTheDocument()
   })
 })
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.test.ts
index 75e47cdbb9..f3c6eba262 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.test.ts
@@ -1,23 +1,23 @@
+/* eslint-disable vue/one-component-per-file */
+/* eslint-disable vue/no-unused-emit-declarations */
 import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
+import { render, screen, fireEvent } from '@testing-library/vue'
 import PrimeVue from 'primevue/config'
 import type { SelectProps } from 'primevue/select'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent } from 'vue'
 import { createI18n } from 'vue-i18n'
 
-import SelectPlus from '@/components/primevueOverride/SelectPlus.vue'
+import type { ComboInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import WidgetSelect from '@/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue'
+import { createMockWidget } from './widgetTestUtils'
 
 const i18n = createI18n({
   legacy: false,
   locale: 'en',
   messages: { en: {} }
 })
-import type { ComboInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import type { SimplifiedWidget } from '@/types/simplifiedWidget'
-import WidgetSelect from '@/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue'
-import WidgetSelectDefault from '@/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue'
-import WidgetSelectDropdown from '@/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue'
-import { createMockWidget } from './widgetTestUtils'
 
 // Mock state for asset service
 const mockShouldUseAssetBrowser = vi.hoisted(() => vi.fn(() => false))
@@ -30,6 +30,45 @@ vi.mock('@/platform/assets/services/assetService', () => ({
   }
 }))
 
+const WidgetSelectDropdownStub = defineComponent({
+  name: 'WidgetSelectDropdown',
+  props: {
+    widget: { type: Object, default: () => ({}) },
+    modelValue: { type: String, default: undefined },
+    nodeType: { type: String, default: '' },
+    assetKind: { type: String, default: '' },
+    allowUpload: { type: Boolean, default: false },
+    uploadFolder: { type: String, default: '' },
+    uploadSubfolder: { type: String, default: '' },
+    isAssetMode: { type: Boolean, default: false },
+    defaultLayoutMode: { type: String, default: '' }
+  },
+  template:
+    '<div data-testid="widget-select-dropdown" :data-node-type="nodeType" :data-asset-kind="assetKind" :data-allow-upload="String(allowUpload)" :data-upload-folder="uploadFolder" :data-upload-subfolder="uploadSubfolder || \'\'" />'
+})
+
+const WidgetSelectDefaultStub = defineComponent({
+  name: 'WidgetSelectDefault',
+  props: {
+    widget: { type: Object, default: () => ({}) },
+    modelValue: { type: String, default: undefined }
+  },
+  emits: ['update:modelValue'],
+  template:
+    '<div data-testid="widget-select-default"><input data-testid="select-input" :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" /></div>'
+})
+
+const globalConfig = {
+  plugins: [PrimeVue, createTestingPinia(), i18n],
+  stubs: {
+    WidgetSelectDropdown: WidgetSelectDropdownStub,
+    WidgetSelectDefault: WidgetSelectDefaultStub,
+    WidgetWithControl: {
+      template: '<div data-testid="widget-with-control" />'
+    }
+  }
+}
+
 describe('WidgetSelect Value Binding', () => {
   beforeEach(() => {
     mockShouldUseAssetBrowser.mockReturnValue(false)
@@ -57,107 +96,92 @@ describe('WidgetSelect Value Binding', () => {
       spec
     })
 
-  const mountComponent = (
+  const renderComponent = (
     widget: SimplifiedWidget<string | undefined>,
     modelValue: string | undefined,
-    readonly = false
+    extraProps: Record<string, unknown> = {}
   ) => {
-    return mount(WidgetSelect, {
+    const onModelUpdate = vi.fn()
+    render(WidgetSelect, {
       props: {
         widget,
         modelValue,
-        readonly
+        'onUpdate:modelValue': onModelUpdate,
+        ...extraProps
       },
-      global: {
-        plugins: [PrimeVue, createTestingPinia(), i18n],
-        components: { SelectPlus }
-      }
+      global: globalConfig
     })
-  }
-
-  const setSelectValueAndEmit = async (
-    wrapper: ReturnType<typeof mount>,
-    value: string
-  ) => {
-    const select = wrapper.findComponent({ name: 'SelectPlus' })
-    await select.setValue(value)
-    return wrapper.emitted('update:modelValue')
+    return onModelUpdate
   }
 
   describe('Vue Event Emission', () => {
     it('emits Vue event when selection changes', async () => {
       const widget = createSelectWidget('option1')
-      const wrapper = mountComponent(widget, 'option1')
+      const onModelUpdate = renderComponent(widget, 'option1')
 
-      const emitted = await setSelectValueAndEmit(wrapper, 'option2')
+      const input = screen.getByTestId('select-input')
+      await fireEvent.update(input, 'option2')
 
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toContain('option2')
+      expect(onModelUpdate).toHaveBeenCalledWith('option2')
     })
 
     it('emits string value for different options', async () => {
       const widget = createSelectWidget('option1')
-      const wrapper = mountComponent(widget, 'option1')
+      const onModelUpdate = renderComponent(widget, 'option1')
 
-      const emitted = await setSelectValueAndEmit(wrapper, 'option3')
+      const input = screen.getByTestId('select-input')
+      await fireEvent.update(input, 'option3')
 
-      expect(emitted).toBeDefined()
-      // Should emit the string value
-      expect(emitted![0]).toContain('option3')
+      expect(onModelUpdate).toHaveBeenCalledWith('option3')
     })
 
     it('handles custom option values', async () => {
       const customOptions = ['custom_a', 'custom_b', 'custom_c']
       const widget = createSelectWidget('custom_a', { values: customOptions })
-      const wrapper = mountComponent(widget, 'custom_a')
+      const onModelUpdate = renderComponent(widget, 'custom_a')
 
-      const emitted = await setSelectValueAndEmit(wrapper, 'custom_b')
+      const input = screen.getByTestId('select-input')
+      await fireEvent.update(input, 'custom_b')
 
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toContain('custom_b')
+      expect(onModelUpdate).toHaveBeenCalledWith('custom_b')
     })
 
     it('handles missing callback gracefully', async () => {
       const widget = createSelectWidget('option1', {}, undefined)
-      const wrapper = mountComponent(widget, 'option1')
+      const onModelUpdate = renderComponent(widget, 'option1')
 
-      const emitted = await setSelectValueAndEmit(wrapper, 'option2')
+      const input = screen.getByTestId('select-input')
+      await fireEvent.update(input, 'option2')
 
-      // Should emit Vue event
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toContain('option2')
+      expect(onModelUpdate).toHaveBeenCalledWith('option2')
     })
 
     it('handles value changes gracefully', async () => {
       const widget = createSelectWidget('option1')
-      const wrapper = mountComponent(widget, 'option1')
+      const onModelUpdate = renderComponent(widget, 'option1')
 
-      const emitted = await setSelectValueAndEmit(wrapper, 'option2')
+      const input = screen.getByTestId('select-input')
+      await fireEvent.update(input, 'option2')
 
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toContain('option2')
+      expect(onModelUpdate).toHaveBeenCalledWith('option2')
     })
   })
 
   describe('Option Handling', () => {
-    it('handles empty options array', async () => {
+    it('handles empty options array', () => {
       const widget = createSelectWidget('', { values: [] })
-      const wrapper = mountComponent(widget, '')
+      renderComponent(widget, '')
 
-      const select = wrapper.findComponent({ name: 'SelectPlus' })
-      expect(select.props('options')).toEqual([])
+      expect(screen.getByTestId('widget-select-default')).toBeInTheDocument()
     })
 
-    it('handles single option', async () => {
+    it('handles single option', () => {
       const widget = createSelectWidget('only_option', {
         values: ['only_option']
       })
-      const wrapper = mountComponent(widget, 'only_option')
+      renderComponent(widget, 'only_option')
 
-      const select = wrapper.findComponent({ name: 'SelectPlus' })
-      const options = select.props('options')
-      expect(options).toHaveLength(1)
-      expect(options[0]).toEqual('only_option')
+      expect(screen.getByTestId('widget-select-default')).toBeInTheDocument()
     })
 
     it('handles options with special characters', async () => {
@@ -169,40 +193,35 @@ describe('WidgetSelect Value Binding', () => {
       const widget = createSelectWidget(specialOptions[0], {
         values: specialOptions
       })
-      const wrapper = mountComponent(widget, specialOptions[0])
+      const onModelUpdate = renderComponent(widget, specialOptions[0])
 
-      const emitted = await setSelectValueAndEmit(wrapper, specialOptions[1])
+      const input = screen.getByTestId('select-input')
+      await fireEvent.update(input, specialOptions[1])
 
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toContain(specialOptions[1])
+      expect(onModelUpdate).toHaveBeenCalledWith(specialOptions[1])
     })
   })
 
   describe('Edge Cases', () => {
     it('handles selection of non-existent option gracefully', async () => {
       const widget = createSelectWidget('option1')
-      const wrapper = mountComponent(widget, 'option1')
+      const onModelUpdate = renderComponent(widget, 'option1')
 
-      const emitted = await setSelectValueAndEmit(
-        wrapper,
-        'non_existent_option'
-      )
+      const input = screen.getByTestId('select-input')
+      await fireEvent.update(input, 'non_existent_option')
 
-      // Should still emit Vue event with the value
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toContain('non_existent_option')
+      expect(onModelUpdate).toHaveBeenCalledWith('non_existent_option')
     })
 
     it('handles numeric string options correctly', async () => {
       const numericOptions = ['1', '2', '10', '100']
       const widget = createSelectWidget('1', { values: numericOptions })
-      const wrapper = mountComponent(widget, '1')
+      const onModelUpdate = renderComponent(widget, '1')
 
-      const emitted = await setSelectValueAndEmit(wrapper, '100')
+      const input = screen.getByTestId('select-input')
+      await fireEvent.update(input, '100')
 
-      // Should maintain string type in emitted event
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toContain('100')
+      expect(onModelUpdate).toHaveBeenCalledWith('100')
     })
   })
 
@@ -214,39 +233,23 @@ describe('WidgetSelect Value Binding', () => {
         image_upload: true
       }
       const widget = createSelectWidget('option1', {}, undefined, spec)
-      const wrapper = mount(WidgetSelect, {
-        props: {
-          widget,
-          modelValue: 'option1',
-          nodeType: 'CheckpointLoaderSimple'
-        },
-        global: {
-          plugins: [PrimeVue, createTestingPinia(), i18n],
-          components: { SelectPlus }
-        }
+      renderComponent(widget, 'option1', {
+        nodeType: 'CheckpointLoaderSimple'
       })
 
-      const dropdown = wrapper.findComponent(WidgetSelectDropdown)
-      expect(dropdown.exists()).toBe(true)
-      expect(dropdown.props('nodeType')).toBe('CheckpointLoaderSimple')
+      const dropdown = screen.getByTestId('widget-select-dropdown')
+      expect(dropdown).toBeInTheDocument()
+      expect(dropdown.dataset.nodeType).toBe('CheckpointLoaderSimple')
     })
 
     it('does not pass node-type prop to WidgetSelectDefault', () => {
       const widget = createSelectWidget('option1')
-      const wrapper = mount(WidgetSelect, {
-        props: {
-          widget,
-          modelValue: 'option1',
-          nodeType: 'KSampler'
-        },
-        global: {
-          plugins: [PrimeVue, createTestingPinia(), i18n],
-          components: { SelectPlus }
-        }
-      })
+      renderComponent(widget, 'option1', { nodeType: 'KSampler' })
 
-      const defaultSelect = wrapper.findComponent(WidgetSelectDefault)
-      expect(defaultSelect.exists()).toBe(true)
+      expect(screen.getByTestId('widget-select-default')).toBeInTheDocument()
+      expect(
+        screen.queryByTestId('widget-select-dropdown')
+      ).not.toBeInTheDocument()
     })
   })
 
@@ -255,38 +258,22 @@ describe('WidgetSelect Value Binding', () => {
       mockShouldUseAssetBrowser.mockReturnValue(true)
 
       const widget = createSelectWidget('test.safetensors')
-      const wrapper = mount(WidgetSelect, {
-        props: {
-          widget,
-          modelValue: 'test.safetensors',
-          nodeType: 'CheckpointLoaderSimple'
-        },
-        global: {
-          plugins: [PrimeVue, createTestingPinia(), i18n],
-          components: { SelectPlus }
-        }
+      renderComponent(widget, 'test.safetensors', {
+        nodeType: 'CheckpointLoaderSimple'
       })
 
-      expect(wrapper.findComponent(WidgetSelectDropdown).exists()).toBe(true)
+      expect(screen.getByTestId('widget-select-dropdown')).toBeInTheDocument()
     })
 
     it('disables asset mode when shouldUseAssetBrowser returns false', () => {
       mockShouldUseAssetBrowser.mockReturnValue(false)
 
       const widget = createSelectWidget('test.safetensors')
-      const wrapper = mount(WidgetSelect, {
-        props: {
-          widget,
-          modelValue: 'test.safetensors',
-          nodeType: 'CheckpointLoaderSimple'
-        },
-        global: {
-          plugins: [PrimeVue, createTestingPinia(), i18n],
-          components: { SelectPlus }
-        }
+      renderComponent(widget, 'test.safetensors', {
+        nodeType: 'CheckpointLoaderSimple'
       })
 
-      expect(wrapper.findComponent(WidgetSelectDefault).exists()).toBe(true)
+      expect(screen.getByTestId('widget-select-default')).toBeInTheDocument()
     })
   })
 
@@ -298,10 +285,12 @@ describe('WidgetSelect Value Binding', () => {
         image_upload: true
       }
       const widget = createSelectWidget('option1', {}, undefined, spec)
-      const wrapper = mountComponent(widget, 'option1')
+      renderComponent(widget, 'option1')
 
-      expect(wrapper.findComponent(WidgetSelectDropdown).exists()).toBe(true)
-      expect(wrapper.findComponent(WidgetSelectDefault).exists()).toBe(false)
+      expect(screen.getByTestId('widget-select-dropdown')).toBeInTheDocument()
+      expect(
+        screen.queryByTestId('widget-select-default')
+      ).not.toBeInTheDocument()
     })
 
     it('uses dropdown variant for audio uploads', (context) => {
@@ -312,12 +301,12 @@ describe('WidgetSelect Value Binding', () => {
         audio_upload: true
       }
       const widget = createSelectWidget('clip.wav', {}, undefined, spec)
-      const wrapper = mountComponent(widget, 'clip.wav')
-      const dropdown = wrapper.findComponent(WidgetSelectDropdown)
+      renderComponent(widget, 'clip.wav')
 
-      expect(dropdown.exists()).toBe(true)
-      expect(dropdown.props('assetKind')).toBe('audio')
-      expect(dropdown.props('allowUpload')).toBe(false)
+      const dropdown = screen.getByTestId('widget-select-dropdown')
+      expect(dropdown).toBeInTheDocument()
+      expect(dropdown.dataset.assetKind).toBe('audio')
+      expect(dropdown.dataset.allowUpload).toBe('false')
     })
 
     it('uses dropdown variant for mesh uploads via spec', () => {
@@ -328,24 +317,26 @@ describe('WidgetSelect Value Binding', () => {
         upload_subfolder: '3d'
       }
       const widget = createSelectWidget('model.glb', {}, undefined, spec)
-      const wrapper = mountComponent(widget, 'model.glb')
-      const dropdown = wrapper.findComponent(WidgetSelectDropdown)
+      renderComponent(widget, 'model.glb')
 
-      expect(dropdown.exists()).toBe(true)
-      expect(dropdown.props('assetKind')).toBe('mesh')
-      expect(dropdown.props('allowUpload')).toBe(true)
-      expect(dropdown.props('uploadFolder')).toBe('input')
-      expect(dropdown.props('uploadSubfolder')).toBe('3d')
+      const dropdown = screen.getByTestId('widget-select-dropdown')
+      expect(dropdown).toBeInTheDocument()
+      expect(dropdown.dataset.assetKind).toBe('mesh')
+      expect(dropdown.dataset.allowUpload).toBe('true')
+      expect(dropdown.dataset.uploadFolder).toBe('input')
+      expect(dropdown.dataset.uploadSubfolder).toBe('3d')
     })
 
     it('keeps default select when no spec or media hints are present', () => {
       const widget = createSelectWidget('plain', {
         values: ['plain', 'text']
       })
-      const wrapper = mountComponent(widget, 'plain')
+      renderComponent(widget, 'plain')
 
-      expect(wrapper.findComponent(WidgetSelectDefault).exists()).toBe(true)
-      expect(wrapper.findComponent(WidgetSelectDropdown).exists()).toBe(false)
+      expect(screen.getByTestId('widget-select-default')).toBeInTheDocument()
+      expect(
+        screen.queryByTestId('widget-select-dropdown')
+      ).not.toBeInTheDocument()
     })
   })
 })
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.test.ts
index 52121b8164..d6b05f2bc5 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.test.ts
@@ -1,13 +1,38 @@
-import { mount } from '@vue/test-utils'
-import { nextTick } from 'vue'
+/* eslint-disable vue/one-component-per-file */
+/* eslint-disable vue/no-unused-emit-declarations */
+import { render, screen, waitFor } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import PrimeVue from 'primevue/config'
+import { defineComponent } from 'vue'
 import { describe, expect, it } from 'vitest'
 
-import SelectPlus from '@/components/primevueOverride/SelectPlus.vue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
 import WidgetSelectDefault from './WidgetSelectDefault.vue'
 
+const WidgetLayoutFieldStub = defineComponent({
+  name: 'WidgetLayoutField',
+  template: '<div><slot /></div>'
+})
+
+const SelectPlusStub = defineComponent({
+  name: 'SelectPlus',
+  props: {
+    options: { type: Array, default: () => [] },
+    modelValue: { type: String, default: undefined }
+  },
+  emits: ['update:modelValue', 'show', 'filter'],
+  template: `<div data-testid="select-plus" :data-options="JSON.stringify(options)">
+    <button data-testid="trigger-show" @click="$emit('show')">show</button>
+    <button data-testid="trigger-filter" @click="$emit('filter')">filter</button>
+  </div>`
+})
+
+function getSelectOptions(): string[] {
+  const el = screen.getByTestId('select-plus')
+  return JSON.parse(el.getAttribute('data-options') ?? '[]')
+}
+
 describe('WidgetSelectDefault', () => {
   const createWidget = (
     values: unknown
@@ -18,91 +43,74 @@ describe('WidgetSelectDefault', () => {
     options: { values } as SimplifiedWidget['options']
   })
 
-  const mountComponent = (widget: SimplifiedWidget<string | undefined>) =>
-    mount(WidgetSelectDefault, {
+  function renderComponent(widget: SimplifiedWidget<string | undefined>) {
+    return render(WidgetSelectDefault, {
       props: { widget },
       global: {
         plugins: [PrimeVue],
-        components: { SelectPlus }
+        stubs: {
+          SelectPlus: SelectPlusStub,
+          WidgetLayoutField: WidgetLayoutFieldStub
+        }
       }
     })
+  }
 
   describe('array-valued options', () => {
     it('resolves options from a plain array', () => {
-      const widget = createWidget(['a', 'b', 'c'])
-      const wrapper = mountComponent(widget)
+      renderComponent(createWidget(['a', 'b', 'c']))
 
-      expect(wrapper.findComponent(SelectPlus).props('options')).toEqual([
-        'a',
-        'b',
-        'c'
-      ])
+      expect(getSelectOptions()).toEqual(['a', 'b', 'c'])
     })
 
     it('reactively updates when widget prop changes', async () => {
-      const widget = createWidget(['x', 'y'])
-      const wrapper = mountComponent(widget)
+      const { rerender } = renderComponent(createWidget(['x', 'y']))
 
-      await wrapper.setProps({ widget: createWidget(['x', 'y', 'z']) })
+      await rerender({ widget: createWidget(['x', 'y', 'z']) })
 
-      expect(wrapper.findComponent(SelectPlus).props('options')).toEqual([
-        'x',
-        'y',
-        'z'
-      ])
+      expect(getSelectOptions()).toEqual(['x', 'y', 'z'])
     })
   })
 
   describe('undefined/empty options', () => {
     it('returns empty array when values is undefined', () => {
-      const widget = createWidget(undefined)
-      const wrapper = mountComponent(widget)
+      renderComponent(createWidget(undefined))
 
-      expect(wrapper.findComponent(SelectPlus).props('options')).toEqual([])
+      expect(getSelectOptions()).toEqual([])
     })
   })
 
   describe('function-valued options', () => {
     it('resolves options from a function', () => {
-      const widget = createWidget(() => ['a', 'b', 'c'])
-      const wrapper = mountComponent(widget)
+      renderComponent(createWidget(() => ['a', 'b', 'c']))
 
-      expect(wrapper.findComponent(SelectPlus).props('options')).toEqual([
-        'a',
-        'b',
-        'c'
-      ])
+      expect(getSelectOptions()).toEqual(['a', 'b', 'c'])
     })
 
     it('re-evaluates function on show event', async () => {
       let items = ['x', 'y']
-      const widget = createWidget(() => items)
-      const wrapper = mountComponent(widget)
+      renderComponent(createWidget(() => items))
 
       items = ['x', 'y', 'z']
-      wrapper.findComponent(SelectPlus).vm.$emit('show')
-      await nextTick()
+      const user = userEvent.setup()
+      await user.click(screen.getByTestId('trigger-show'))
 
-      expect(wrapper.findComponent(SelectPlus).props('options')).toEqual([
-        'x',
-        'y',
-        'z'
-      ])
+      await waitFor(() => {
+        expect(getSelectOptions()).toEqual(['x', 'y', 'z'])
+      })
     })
 
     it('re-evaluates function on filter event', async () => {
       let items = ['a']
-      const widget = createWidget(() => items)
-      const wrapper = mountComponent(widget)
+      renderComponent(createWidget(() => items))
 
       items = ['a', 'b']
-      wrapper.findComponent(SelectPlus).vm.$emit('filter')
-      await nextTick()
+      const user = userEvent.setup()
+      await user.click(screen.getByTestId('trigger-filter'))
 
-      expect(wrapper.findComponent(SelectPlus).props('options')).toEqual([
-        'a',
-        'b'
-      ])
+      await waitFor(() => {
+        expect(getSelectOptions()).toEqual(['a', 'b'])
+      })
     })
   })
 })
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.test.ts
index c703e86cef..deab218513 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.test.ts
@@ -1,18 +1,15 @@
 import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
-import type { VueWrapper } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
 import PrimeVue from 'primevue/config'
-import { computed } from 'vue'
-import type { ComponentPublicInstance } from 'vue'
+import { computed, nextTick, ref } from 'vue'
+import type { Ref } from 'vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import type { FormDropdownItem } from '@/renderer/extensions/vueNodes/widgets/components/form/dropdown/types'
-import type { ComboInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import type { SimplifiedWidget } from '@/types/simplifiedWidget'
-
 import WidgetSelectDropdown from '@/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import { createMockWidget } from './widgetTestUtils'
 
 const mockCheckState = vi.hoisted(() => vi.fn())
@@ -55,7 +52,7 @@ vi.mock(
   })
 )
 
-const { mockMediaAssets, mockResolveOutputAssetItems } = vi.hoisted(() => {
+const { mockMediaAssets } = vi.hoisted(() => {
   // eslint-disable-next-line @typescript-eslint/no-require-imports
   const { ref } = require('vue')
   return {
@@ -68,8 +65,7 @@ const { mockMediaAssets, mockResolveOutputAssetItems } = vi.hoisted(() => {
       loadMore: vi.fn(),
       hasMore: ref(false),
       isLoadingMore: ref(false)
-    },
-    mockResolveOutputAssetItems: vi.fn()
+    }
   }
 })
 
@@ -78,724 +74,187 @@ vi.mock('@/platform/assets/composables/media/useMediaAssets', () => ({
 }))
 
 vi.mock('@/platform/assets/utils/outputAssetUtil', () => ({
-  resolveOutputAssetItems: (...args: unknown[]) =>
-    mockResolveOutputAssetItems(...args)
+  resolveOutputAssetItems: vi.fn().mockResolvedValue([])
 }))
 
+const mockUpdateSelectedItems = vi.hoisted(() => vi.fn())
+const mockHandleFilesUpdate = vi.hoisted(() => vi.fn())
+
+const { mockItemsRef, mockSelectedSetRef, mockFilterSelectedRef } = vi.hoisted(
+  () => {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const { ref } = require('vue')
+    return {
+      mockItemsRef: ref([]) as Ref<FormDropdownItem[]>,
+      mockSelectedSetRef: ref(new Set()) as Ref<Set<string>>,
+      mockFilterSelectedRef: ref('all') as Ref<string>
+    }
+  }
+)
+
+vi.mock(
+  '@/renderer/extensions/vueNodes/widgets/composables/useWidgetSelectItems',
+  () => {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const { computed } = require('vue')
+    return {
+      useWidgetSelectItems: () => ({
+        dropdownItems: computed(() => mockItemsRef.value),
+        displayItems: computed(() => mockItemsRef.value),
+        filterSelected: mockFilterSelectedRef,
+        filterOptions: computed(() => [
+          { name: 'All', value: 'all' },
+          { name: 'Inputs', value: 'inputs' }
+        ]),
+        ownershipSelected: ref('all'),
+        showOwnershipFilter: computed(() => false),
+        ownershipOptions: computed(() => []),
+        baseModelSelected: ref(new Set<string>()),
+        showBaseModelFilter: computed(() => false),
+        baseModelOptions: computed(() => []),
+        selectedSet: computed(() => mockSelectedSetRef.value)
+      })
+    }
+  }
+)
+
+vi.mock(
+  '@/renderer/extensions/vueNodes/widgets/composables/useWidgetSelectActions',
+  () => ({
+    useWidgetSelectActions: () => ({
+      updateSelectedItems: mockUpdateSelectedItems,
+      handleFilesUpdate: mockHandleFilesUpdate
+    })
+  })
+)
+
 const i18n = createI18n({
   legacy: false,
   locale: 'en',
   messages: { en: {} }
 })
 
-interface WidgetSelectDropdownInstance extends ComponentPublicInstance {
-  inputItems: FormDropdownItem[]
-  outputItems: FormDropdownItem[]
-  dropdownItems: FormDropdownItem[]
-  filterSelected: string
-  updateSelectedItems: (selectedSet: Set<string>) => void
-}
-
-describe('WidgetSelectDropdown custom label mapping', () => {
-  const createSelectDropdownWidget = (
-    value: string = 'img_001.png',
-    options: {
-      values?: string[]
-      getOptionLabel?: (value?: string | null) => string
-    } = {},
-    spec?: ComboInputSpec
-  ) =>
-    createMockWidget<string | undefined>({
-      value,
-      name: 'test_image_select',
-      type: 'combo',
-      options: {
-        values: ['img_001.png', 'photo_abc.jpg', 'hash789.png'],
-        ...options
-      },
-      spec
-    })
-
-  const mountComponent = (
-    widget: SimplifiedWidget<string | undefined>,
-    modelValue: string | undefined,
-    assetKind: 'image' | 'video' | 'audio' = 'image'
-  ): VueWrapper<WidgetSelectDropdownInstance> => {
-    return mount(WidgetSelectDropdown, {
-      props: {
-        widget,
-        modelValue,
-        assetKind,
-        allowUpload: true,
-        uploadFolder: 'input'
-      },
-      global: {
-        plugins: [PrimeVue, createTestingPinia(), i18n]
-      }
-    }) as unknown as VueWrapper<WidgetSelectDropdownInstance>
-  }
-
-  describe('when custom labels are not provided', () => {
-    it('uses values as labels when no mapping provided', () => {
-      const widget = createSelectDropdownWidget('img_001.png')
-      const wrapper = mountComponent(widget, 'img_001.png')
-
-      const inputItems = wrapper.vm.inputItems
-      expect(inputItems).toHaveLength(3)
-      expect(inputItems[0].name).toBe('img_001.png')
-      expect(inputItems[0].label).toBe('img_001.png')
-      expect(inputItems[1].name).toBe('photo_abc.jpg')
-      expect(inputItems[1].label).toBe('photo_abc.jpg')
-      expect(inputItems[2].name).toBe('hash789.png')
-      expect(inputItems[2].label).toBe('hash789.png')
-    })
-  })
-
-  describe('when custom labels are provided via getOptionLabel', () => {
-    it('displays custom labels while preserving original values', () => {
-      const getOptionLabel = vi.fn((value?: string | null) => {
-        if (!value) return 'No file'
-        const mapping: Record<string, string> = {
-          'img_001.png': 'Vacation Photo',
-          'photo_abc.jpg': 'Family Portrait',
-          'hash789.png': 'Sunset Beach'
-        }
-        return mapping[value] || value
-      })
-
-      const widget = createSelectDropdownWidget('img_001.png', {
-        getOptionLabel
-      })
-      const wrapper = mountComponent(widget, 'img_001.png')
-
-      const inputItems = wrapper.vm.inputItems
-      expect(inputItems).toHaveLength(3)
-      expect(inputItems[0].name).toBe('img_001.png')
-      expect(inputItems[0].label).toBe('Vacation Photo')
-      expect(inputItems[1].name).toBe('photo_abc.jpg')
-      expect(inputItems[1].label).toBe('Family Portrait')
-      expect(inputItems[2].name).toBe('hash789.png')
-      expect(inputItems[2].label).toBe('Sunset Beach')
-
-      expect(getOptionLabel).toHaveBeenCalledWith('img_001.png')
-      expect(getOptionLabel).toHaveBeenCalledWith('photo_abc.jpg')
-      expect(getOptionLabel).toHaveBeenCalledWith('hash789.png')
-    })
-
-    it('emits original values when items with custom labels are selected', async () => {
-      const getOptionLabel = vi.fn((value?: string | null) => {
-        if (!value) return 'No file'
-        return `Custom: ${value}`
-      })
-
-      const widget = createSelectDropdownWidget('img_001.png', {
-        getOptionLabel
-      })
-      const wrapper = mountComponent(widget, 'img_001.png')
-
-      // Simulate selecting an item
-      const selectedSet = new Set(['input-1']) // index 1 = photo_abc.jpg
-      wrapper.vm.updateSelectedItems(selectedSet)
-
-      // Should emit the original value, not the custom label
-      expect(wrapper.emitted('update:modelValue')).toBeDefined()
-      expect(wrapper.emitted('update:modelValue')![0]).toEqual([
-        'photo_abc.jpg'
-      ])
-    })
-
-    it('falls back to original value when label mapping fails', () => {
-      const getOptionLabel = vi.fn((value?: string | null) => {
-        if (value === 'photo_abc.jpg') {
-          throw new Error('Mapping failed')
-        }
-        return `Labeled: ${value}`
-      })
-
-      const consoleErrorSpy = vi
-        .spyOn(console, 'error')
-        .mockImplementation(() => {})
-
-      const widget = createSelectDropdownWidget('img_001.png', {
-        getOptionLabel
-      })
-      const wrapper = mountComponent(widget, 'img_001.png')
-
-      const inputItems = wrapper.vm.inputItems
-      expect(inputItems[0].name).toBe('img_001.png')
-      expect(inputItems[0].label).toBe('Labeled: img_001.png')
-      expect(inputItems[1].name).toBe('photo_abc.jpg')
-      expect(inputItems[1].label).toBe('photo_abc.jpg')
-      expect(inputItems[2].name).toBe('hash789.png')
-      expect(inputItems[2].label).toBe('Labeled: hash789.png')
-
-      expect(consoleErrorSpy).toHaveBeenCalled()
-      consoleErrorSpy.mockRestore()
-    })
-
-    it('falls back to original value when label mapping returns empty string', () => {
-      const getOptionLabel = vi.fn((value?: string | null) => {
-        if (value === 'photo_abc.jpg') {
-          return ''
-        }
-        return `Labeled: ${value}`
-      })
-
-      const widget = createSelectDropdownWidget('img_001.png', {
-        getOptionLabel
-      })
-      const wrapper = mountComponent(widget, 'img_001.png')
-
-      const inputItems = wrapper.vm.inputItems
-      expect(inputItems[0].name).toBe('img_001.png')
-      expect(inputItems[0].label).toBe('Labeled: img_001.png')
-      expect(inputItems[1].name).toBe('photo_abc.jpg')
-      expect(inputItems[1].label).toBe('photo_abc.jpg')
-      expect(inputItems[2].name).toBe('hash789.png')
-      expect(inputItems[2].label).toBe('Labeled: hash789.png')
-    })
-
-    it('falls back to original value when label mapping returns undefined', () => {
-      const getOptionLabel = vi.fn((value?: string | null) => {
-        if (value === 'hash789.png') {
-          return undefined as unknown as string
-        }
-        return `Labeled: ${value}`
-      })
-
-      const widget = createSelectDropdownWidget('img_001.png', {
-        getOptionLabel
-      })
-      const wrapper = mountComponent(widget, 'img_001.png')
-
-      const inputItems = wrapper.vm.inputItems
-      expect(inputItems[0].name).toBe('img_001.png')
-      expect(inputItems[0].label).toBe('Labeled: img_001.png')
-      expect(inputItems[1].name).toBe('photo_abc.jpg')
-      expect(inputItems[1].label).toBe('Labeled: photo_abc.jpg')
-      expect(inputItems[2].name).toBe('hash789.png')
-      expect(inputItems[2].label).toBe('hash789.png')
-    })
-  })
-
-  describe('output items with custom label mapping', () => {
-    it('applies custom label mapping to output items from queue history', () => {
-      const getOptionLabel = vi.fn((value?: string | null) => {
-        if (!value) return 'No file'
-        return `Output: ${value}`
-      })
-
-      const widget = createSelectDropdownWidget('img_001.png', {
-        getOptionLabel
-      })
-      const wrapper = mountComponent(widget, 'img_001.png')
-
-      const outputItems = wrapper.vm.outputItems
-      expect(outputItems).toBeDefined()
-      expect(Array.isArray(outputItems)).toBe(true)
-    })
-  })
-
-  describe('missing value handling for template-loaded nodes', () => {
-    it('creates a fallback item in "all" filter when modelValue is not in available items', () => {
-      const widget = createSelectDropdownWidget('template_image.png', {
-        values: ['img_001.png', 'photo_abc.jpg']
-      })
-      const wrapper = mountComponent(widget, 'template_image.png')
-
-      const inputItems = wrapper.vm.inputItems
-      expect(inputItems).toHaveLength(2)
-      expect(
-        inputItems.some((item) => item.name === 'template_image.png')
-      ).toBe(false)
-
-      // The missing value should be accessible via dropdownItems when filter is 'all' (default)
-      const dropdownItems = wrapper.vm.dropdownItems
-      expect(
-        dropdownItems.some((item) => item.name === 'template_image.png')
-      ).toBe(true)
-      expect(dropdownItems[0].name).toBe('template_image.png')
-      expect(dropdownItems[0].id).toBe('missing-template_image.png')
-    })
-
-    it('does not include fallback item when filter is "inputs"', async () => {
-      const widget = createSelectDropdownWidget('template_image.png', {
-        values: ['img_001.png', 'photo_abc.jpg']
-      })
-      const wrapper = mountComponent(widget, 'template_image.png')
-
-      wrapper.vm.filterSelected = 'inputs'
-      await wrapper.vm.$nextTick()
-
-      const dropdownItems = wrapper.vm.dropdownItems
-      expect(dropdownItems).toHaveLength(2)
-      expect(
-        dropdownItems.every((item) => !String(item.id).startsWith('missing-'))
-      ).toBe(true)
-    })
-
-    it('does not include fallback item when filter is "outputs"', async () => {
-      const widget = createSelectDropdownWidget('template_image.png', {
-        values: ['img_001.png', 'photo_abc.jpg']
-      })
-      const wrapper = mountComponent(widget, 'template_image.png')
-
-      wrapper.vm.filterSelected = 'outputs'
-      await wrapper.vm.$nextTick()
-
-      const dropdownItems = wrapper.vm.dropdownItems
-      expect(dropdownItems).toHaveLength(wrapper.vm.outputItems.length)
-      expect(
-        dropdownItems.every((item) => !String(item.id).startsWith('missing-'))
-      ).toBe(true)
-    })
-
-    it('does not create a fallback item when modelValue exists in available items', () => {
-      const widget = createSelectDropdownWidget('img_001.png', {
-        values: ['img_001.png', 'photo_abc.jpg']
-      })
-      const wrapper = mountComponent(widget, 'img_001.png')
-
-      const dropdownItems = wrapper.vm.dropdownItems
-      expect(dropdownItems).toHaveLength(2)
-      expect(
-        dropdownItems.every((item) => !String(item.id).startsWith('missing-'))
-      ).toBe(true)
-    })
-
-    it('does not create a fallback item when modelValue is undefined', () => {
-      const widget = createSelectDropdownWidget(
-        undefined as unknown as string,
-        {
-          values: ['img_001.png', 'photo_abc.jpg']
-        }
-      )
-      const wrapper = mountComponent(widget, undefined)
-
-      const dropdownItems = wrapper.vm.dropdownItems
-      expect(dropdownItems).toHaveLength(2)
-      expect(
-        dropdownItems.every((item) => !String(item.id).startsWith('missing-'))
-      ).toBe(true)
-    })
-  })
-})
-
-describe('WidgetSelectDropdown cloud asset mode (COM-14333)', () => {
-  interface CloudModeInstance extends ComponentPublicInstance {
-    dropdownItems: FormDropdownItem[]
-    displayItems: FormDropdownItem[]
-    selectedSet: Set<string>
-  }
-
-  const createTestAsset = (
-    id: string,
-    name: string,
-    preview_url: string
-  ): AssetItem => ({
-    id,
-    name,
-    preview_url,
-    tags: []
-  })
-
-  const createCloudModeWidget = (
-    value: string = 'model.safetensors'
-  ): SimplifiedWidget<string | undefined> => ({
-    name: 'test_model_select',
-    type: 'combo',
-    value,
-    options: {
-      values: [],
-      nodeType: 'CheckpointLoaderSimple'
-    }
-  })
-
-  const mountCloudComponent = (
-    widget: SimplifiedWidget<string | undefined>,
-    modelValue: string | undefined
-  ): VueWrapper<CloudModeInstance> => {
-    return mount(WidgetSelectDropdown, {
-      props: {
-        widget,
-        modelValue,
-        assetKind: 'model',
-        isAssetMode: true,
-        nodeType: 'CheckpointLoaderSimple'
-      },
-      global: {
-        plugins: [PrimeVue, createTestingPinia(), i18n]
-      }
-    }) as unknown as VueWrapper<CloudModeInstance>
-  }
-
-  beforeEach(() => {
-    mockAssetsData.items = []
-  })
-
-  it('does not include missing items in cloud asset mode dropdown', () => {
-    mockAssetsData.items = [
-      createTestAsset(
-        'asset-1',
-        'existing_model.safetensors',
-        'https://example.com/preview.jpg'
-      )
-    ]
-
-    const widget = createCloudModeWidget('missing_model.safetensors')
-    const wrapper = mountCloudComponent(widget, 'missing_model.safetensors')
-
-    const dropdownItems = wrapper.vm.dropdownItems
-    expect(dropdownItems).toHaveLength(1)
-    expect(dropdownItems[0].name).toBe('existing_model.safetensors')
-    expect(
-      dropdownItems.some((item) => item.name === 'missing_model.safetensors')
-    ).toBe(false)
-  })
-
-  it('shows only available cloud assets in dropdown', () => {
-    mockAssetsData.items = [
-      createTestAsset(
-        'asset-1',
-        'model_a.safetensors',
-        'https://example.com/a.jpg'
-      ),
-      createTestAsset(
-        'asset-2',
-        'model_b.safetensors',
-        'https://example.com/b.jpg'
-      )
-    ]
-
-    const widget = createCloudModeWidget('model_a.safetensors')
-    const wrapper = mountCloudComponent(widget, 'model_a.safetensors')
-
-    const dropdownItems = wrapper.vm.dropdownItems
-    expect(dropdownItems).toHaveLength(2)
-    expect(dropdownItems.map((item) => item.name)).toEqual([
-      'model_a.safetensors',
-      'model_b.safetensors'
-    ])
-  })
-
-  it('returns empty dropdown when no cloud assets available', () => {
-    mockAssetsData.items = []
-
-    const widget = createCloudModeWidget('missing_model.safetensors')
-    const wrapper = mountCloudComponent(widget, 'missing_model.safetensors')
-
-    const dropdownItems = wrapper.vm.dropdownItems
-    expect(dropdownItems).toHaveLength(0)
-  })
-
-  it('includes missing cloud asset in displayItems for input field visibility', () => {
-    mockAssetsData.items = [
-      createTestAsset(
-        'asset-1',
-        'existing_model.safetensors',
-        'https://example.com/preview.jpg'
-      )
-    ]
-
-    const widget = createCloudModeWidget('missing_model.safetensors')
-    const wrapper = mountCloudComponent(widget, 'missing_model.safetensors')
-
-    const displayItems = wrapper.vm.displayItems
-    expect(displayItems).toHaveLength(2)
-    expect(displayItems[0].name).toBe('missing_model.safetensors')
-    expect(displayItems[0].id).toBe('missing-missing_model.safetensors')
-    expect(displayItems[1].name).toBe('existing_model.safetensors')
-
-    const selectedSet = wrapper.vm.selectedSet
-    expect(selectedSet.has('missing-missing_model.safetensors')).toBe(true)
-  })
-})
-
-describe('WidgetSelectDropdown multi-output jobs', () => {
-  interface MultiOutputInstance extends ComponentPublicInstance {
-    outputItems: FormDropdownItem[]
-  }
-
-  function makeMultiOutputAsset(
-    jobId: string,
-    name: string,
-    nodeId: string,
-    outputCount: number
-  ) {
-    return {
-      id: jobId,
-      name,
-      preview_url: `/api/view?filename=${name}&type=output`,
-      tags: ['output'],
-      user_metadata: {
-        jobId,
-        nodeId,
-        subfolder: '',
-        outputCount,
-        allOutputs: [
-          {
-            filename: name,
-            subfolder: '',
-            type: 'output',
-            nodeId,
-            mediaType: 'images'
-          }
-        ]
-      }
-    }
-  }
-
-  function mountMultiOutput(
-    widget: SimplifiedWidget<string | undefined>,
-    modelValue: string | undefined
-  ): VueWrapper<MultiOutputInstance> {
-    return mount(WidgetSelectDropdown, {
-      props: { widget, modelValue, assetKind: 'image' as const },
-      global: { plugins: [PrimeVue, createTestingPinia(), i18n] }
-    }) as unknown as VueWrapper<MultiOutputInstance>
-  }
-
-  const defaultWidget = () =>
-    createMockWidget<string | undefined>({
-      value: 'output_001.png',
-      name: 'test_image',
-      type: 'combo',
-      options: { values: [] }
-    })
-
+describe('WidgetSelectDropdown', () => {
   beforeEach(() => {
     mockMediaAssets.media.value = []
-    mockResolveOutputAssetItems.mockReset()
+    mockCheckState.mockClear()
+    mockAssetsData.items = []
+    mockItemsRef.value = []
+    mockSelectedSetRef.value = new Set()
+    mockFilterSelectedRef.value = 'all'
+    mockUpdateSelectedItems.mockClear()
+    mockHandleFilesUpdate.mockClear()
   })
 
-  it('shows all outputs after resolving multi-output jobs', async () => {
-    mockMediaAssets.media.value = [
-      makeMultiOutputAsset('job-1', 'preview.png', '5', 3)
-    ]
-
-    mockResolveOutputAssetItems.mockResolvedValue([
-      {
-        id: 'job-1-5-output_001.png',
-        name: 'output_001.png',
-        preview_url: '/api/view?filename=output_001.png&type=output',
-        tags: ['output']
-      },
-      {
-        id: 'job-1-5-output_002.png',
-        name: 'output_002.png',
-        preview_url: '/api/view?filename=output_002.png&type=output',
-        tags: ['output']
-      },
-      {
-        id: 'job-1-5-output_003.png',
-        name: 'output_003.png',
-        preview_url: '/api/view?filename=output_003.png&type=output',
-        tags: ['output']
-      }
-    ])
-
-    const wrapper = mountMultiOutput(defaultWidget(), 'output_001.png')
-
-    await vi.waitFor(() => {
-      expect(wrapper.vm.outputItems).toHaveLength(3)
-    })
-
-    expect(wrapper.vm.outputItems.map((i) => i.name)).toEqual([
-      'output_001.png [output]',
-      'output_002.png [output]',
-      'output_003.png [output]'
-    ])
-  })
-
-  it('shows preview output when job has only one output', () => {
-    mockMediaAssets.media.value = [
-      makeMultiOutputAsset('job-2', 'single.png', '3', 1)
-    ]
-
-    const widget = createMockWidget<string | undefined>({
-      value: 'single.png',
-      name: 'test_image',
-      type: 'combo',
-      options: { values: [] }
-    })
-    const wrapper = mountMultiOutput(widget, 'single.png')
-
-    expect(wrapper.vm.outputItems).toHaveLength(1)
-    expect(wrapper.vm.outputItems[0].name).toBe('single.png [output]')
-    expect(mockResolveOutputAssetItems).not.toHaveBeenCalled()
-  })
-
-  it('resolves two multi-output jobs independently', async () => {
-    mockMediaAssets.media.value = [
-      makeMultiOutputAsset('job-A', 'previewA.png', '1', 2),
-      makeMultiOutputAsset('job-B', 'previewB.png', '2', 2)
-    ]
-
-    mockResolveOutputAssetItems.mockImplementation(async (meta) => {
-      if (meta.jobId === 'job-A') {
-        return [
-          { id: 'A-1', name: 'a1.png', preview_url: '', tags: ['output'] },
-          { id: 'A-2', name: 'a2.png', preview_url: '', tags: ['output'] }
-        ]
-      }
-      return [
-        { id: 'B-1', name: 'b1.png', preview_url: '', tags: ['output'] },
-        { id: 'B-2', name: 'b2.png', preview_url: '', tags: ['output'] }
-      ]
-    })
-
-    const wrapper = mountMultiOutput(defaultWidget(), undefined)
-
-    await vi.waitFor(() => {
-      expect(wrapper.vm.outputItems).toHaveLength(4)
-    })
-
-    const names = wrapper.vm.outputItems.map((i) => i.name)
-    expect(names).toContain('a1.png [output]')
-    expect(names).toContain('a2.png [output]')
-    expect(names).toContain('b1.png [output]')
-    expect(names).toContain('b2.png [output]')
-  })
-
-  it('resolves outputs when allOutputs already contains all items', async () => {
-    mockMediaAssets.media.value = [
-      {
-        id: 'job-complete',
-        name: 'preview.png',
-        preview_url: '/api/view?filename=preview.png&type=output',
-        tags: ['output'],
-        user_metadata: {
-          jobId: 'job-complete',
-          nodeId: '1',
-          subfolder: '',
-          outputCount: 2,
-          allOutputs: [
-            {
-              filename: 'out1.png',
-              subfolder: '',
-              type: 'output',
-              nodeId: '1',
-              mediaType: 'images'
-            },
-            {
-              filename: 'out2.png',
-              subfolder: '',
-              type: 'output',
-              nodeId: '1',
-              mediaType: 'images'
-            }
-          ]
-        }
-      }
-    ]
-
-    mockResolveOutputAssetItems.mockResolvedValue([
-      { id: 'c-1', name: 'out1.png', preview_url: '', tags: ['output'] },
-      { id: 'c-2', name: 'out2.png', preview_url: '', tags: ['output'] }
-    ])
-
-    const wrapper = mountMultiOutput(defaultWidget(), undefined)
-
-    await vi.waitFor(() => {
-      expect(wrapper.vm.outputItems).toHaveLength(2)
-    })
-
-    expect(mockResolveOutputAssetItems).toHaveBeenCalledWith(
-      expect.objectContaining({ jobId: 'job-complete' }),
-      expect.any(Object)
-    )
-    const names = wrapper.vm.outputItems.map((i) => i.name)
-    expect(names).toEqual(['out1.png [output]', 'out2.png [output]'])
-  })
-
-  it('falls back to preview when resolver rejects', async () => {
-    const consoleWarnSpy = vi
-      .spyOn(console, 'warn')
-      .mockImplementation(() => {})
-
-    mockMediaAssets.media.value = [
-      makeMultiOutputAsset('job-fail', 'preview.png', '1', 3)
-    ]
-    mockResolveOutputAssetItems.mockRejectedValue(new Error('network error'))
-
-    const wrapper = mountMultiOutput(defaultWidget(), undefined)
-
-    await vi.waitFor(() => {
-      expect(consoleWarnSpy).toHaveBeenCalledWith(
-        'Failed to resolve multi-output job',
-        'job-fail',
-        expect.any(Error)
-      )
-    })
-
-    expect(wrapper.vm.outputItems).toHaveLength(1)
-    expect(wrapper.vm.outputItems[0].name).toBe('preview.png [output]')
-    consoleWarnSpy.mockRestore()
-  })
-})
-
-describe('WidgetSelectDropdown undo tracking', () => {
-  interface UndoTrackingInstance extends ComponentPublicInstance {
-    updateSelectedItems: (selectedSet: Set<string>) => void
-    handleFilesUpdate: (files: File[]) => Promise<void>
-  }
-
-  const mountForUndo = (
+  function renderComponent(
     widget: SimplifiedWidget<string | undefined>,
-    modelValue: string | undefined
-  ): VueWrapper<UndoTrackingInstance> => {
-    return mount(WidgetSelectDropdown, {
+    modelValue: string | undefined,
+    extraProps: Record<string, unknown> = {}
+  ) {
+    return render(WidgetSelectDropdown, {
       props: {
         widget,
         modelValue,
         assetKind: 'image',
         allowUpload: true,
-        uploadFolder: 'input'
+        uploadFolder: 'input',
+        ...extraProps
       },
       global: {
         plugins: [PrimeVue, createTestingPinia(), i18n]
       }
-    }) as unknown as VueWrapper<UndoTrackingInstance>
+    })
   }
 
-  beforeEach(() => {
-    mockCheckState.mockClear()
-  })
-
-  it('calls checkState after dropdown selection changes modelValue', () => {
+  it('renders the dropdown component', () => {
+    mockItemsRef.value = [
+      { id: 'input-0', name: 'img_001.png' },
+      { id: 'input-1', name: 'photo_abc.jpg' }
+    ]
+    mockSelectedSetRef.value = new Set(['input-0'])
     const widget = createMockWidget<string | undefined>({
       value: 'img_001.png',
       name: 'test_image',
       type: 'combo',
-      options: { values: ['img_001.png', 'photo_abc.jpg'] }
+      options: {
+        values: ['img_001.png', 'photo_abc.jpg']
+      }
     })
-    const wrapper = mountForUndo(widget, 'img_001.png')
-
-    wrapper.vm.updateSelectedItems(new Set(['input-1']))
-
-    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['photo_abc.jpg'])
-    expect(mockCheckState).toHaveBeenCalledOnce()
+    renderComponent(widget, 'img_001.png')
+    expect(screen.getByText('img_001.png')).toBeDefined()
   })
 
-  it('calls checkState after file upload completes', async () => {
-    const { api } = await import('@/scripts/api')
-    vi.mocked(api.fetchApi).mockResolvedValue({
-      status: 200,
-      json: () => Promise.resolve({ name: 'uploaded.png', subfolder: '' })
-    } as Response)
-
+  it('renders in cloud asset mode', () => {
+    mockAssetsData.items = [
+      {
+        id: 'asset-1',
+        name: 'model_a.safetensors',
+        preview_url: 'https://example.com/a.jpg',
+        tags: []
+      }
+    ]
+    mockItemsRef.value = [{ id: 'asset-1', name: 'model_a.safetensors' }]
+    mockSelectedSetRef.value = new Set(['asset-1'])
     const widget = createMockWidget<string | undefined>({
-      value: 'img_001.png',
-      name: 'test_image',
+      value: 'model_a.safetensors',
+      name: 'test_model',
       type: 'combo',
-      options: { values: ['img_001.png'] }
+      options: {
+        values: [],
+        nodeType: 'CheckpointLoaderSimple'
+      }
     })
-    const wrapper = mountForUndo(widget, 'img_001.png')
+    renderComponent(widget, 'model_a.safetensors', {
+      assetKind: 'model',
+      isAssetMode: true,
+      nodeType: 'CheckpointLoaderSimple'
+    })
+    expect(screen.getByText('model_a.safetensors')).toBeDefined()
+  })
 
-    const file = new File(['test'], 'uploaded.png', { type: 'image/png' })
-    await wrapper.vm.handleFilesUpdate([file])
+  describe('composable wiring', () => {
+    const items: FormDropdownItem[] = [
+      { id: 'input-0', name: 'cat.png', label: 'cat.png' },
+      { id: 'input-1', name: 'dog.png', label: 'dog.png' }
+    ]
 
-    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['uploaded.png'])
-    expect(mockCheckState).toHaveBeenCalledOnce()
+    function renderDefault() {
+      mockItemsRef.value = items
+      const widget = createMockWidget<string | undefined>({
+        value: 'cat.png',
+        name: 'test_image',
+        type: 'combo',
+        options: { values: ['cat.png', 'dog.png'] }
+      })
+      return renderComponent(widget, 'cat.png')
+    }
+
+    it('displays the item whose id is in selectedSet', async () => {
+      mockSelectedSetRef.value = new Set(['input-1'])
+      renderDefault()
+
+      expect(screen.getByText('dog.png')).toBeDefined()
+      expect(screen.queryByText('cat.png')).toBeNull()
+    })
+
+    it('shows placeholder when selectedSet is empty', () => {
+      mockSelectedSetRef.value = new Set()
+      renderDefault()
+
+      expect(screen.queryByText('cat.png')).toBeNull()
+      expect(screen.queryByText('dog.png')).toBeNull()
+    })
+
+    it('updates displayed selection when selectedSet changes', async () => {
+      mockSelectedSetRef.value = new Set(['input-0'])
+      renderDefault()
+      expect(screen.getByText('cat.png')).toBeDefined()
+
+      mockSelectedSetRef.value = new Set(['input-1'])
+      await nextTick()
+
+      expect(screen.getByText('dog.png')).toBeDefined()
+      expect(screen.queryByText('cat.png')).toBeNull()
+    })
   })
 })
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue
index bb46761393..970124615e 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue
@@ -1,45 +1,20 @@
 <script setup lang="ts">
-import { capitalize } from 'es-toolkit'
-import { computed, provide, ref, shallowRef, toRef, watch } from 'vue'
+import { computed, provide, ref, toRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useTransformCompatOverlayProps } from '@/composables/useTransformCompatOverlayProps'
-import { appendCloudResParam } from '@/platform/distribution/cloudPreviewUtil'
 import { SUPPORTED_EXTENSIONS_ACCEPT } from '@/extensions/core/load3d/constants'
-import { useAssetFilterOptions } from '@/platform/assets/composables/useAssetFilterOptions'
 import { useMediaAssets } from '@/platform/assets/composables/media/useMediaAssets'
-import {
-  filterItemByBaseModels,
-  filterItemByOwnership
-} from '@/platform/assets/utils/assetFilterUtils'
-import {
-  getAssetBaseModels,
-  getAssetDisplayName,
-  getAssetFilename
-} from '@/platform/assets/utils/assetMetadataUtils'
-import { useToastStore } from '@/platform/updates/common/toastStore'
-import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import FormDropdown from '@/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue'
-import type {
-  FilterOption,
-  OwnershipOption
-} from '@/platform/assets/types/filterTypes'
 import { AssetKindKey } from '@/renderer/extensions/vueNodes/widgets/components/form/dropdown/types'
-import type {
-  FormDropdownItem,
-  LayoutMode
-} from '@/renderer/extensions/vueNodes/widgets/components/form/dropdown/types'
+import type { LayoutMode } from '@/renderer/extensions/vueNodes/widgets/components/form/dropdown/types'
 import WidgetLayoutField from '@/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue'
 import { useAssetWidgetData } from '@/renderer/extensions/vueNodes/widgets/composables/useAssetWidgetData'
-import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
-import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-import { resolveOutputAssetItems } from '@/platform/assets/utils/outputAssetUtil'
+import { useWidgetSelectActions } from '@/renderer/extensions/vueNodes/widgets/composables/useWidgetSelectActions'
+import { useWidgetSelectItems } from '@/renderer/extensions/vueNodes/widgets/composables/useWidgetSelectItems'
 import type { ResultItemType } from '@/schemas/apiSchema'
-import { api } from '@/scripts/api'
-import { useAssetsStore } from '@/stores/assetsStore'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import type { AssetKind } from '@/types/widgetTypes'
-import { getMediaTypeFromFilename } from '@/utils/formatUtil'
 import {
   PANEL_EXCLUDED_PROPS,
   filterWidgetProps
@@ -71,7 +46,6 @@ const modelValue = defineModel<string | undefined>({
 })
 
 const { t } = useI18n()
-const toastStore = useToastStore()
 
 const outputMediaAssets = useMediaAssets('output')
 
@@ -92,261 +66,34 @@ const getAssetData = () => {
 }
 const assetData = getAssetData()
 
-const filterSelected = ref('all')
-const filterOptions = computed<FilterOption[]>(() => {
-  if (props.isAssetMode) {
-    const categoryName = assetData?.category.value ?? 'All'
-    return [{ name: capitalize(categoryName), value: 'all' }]
-  }
-  return [
-    { name: 'All', value: 'all' },
-    { name: 'Inputs', value: 'inputs' },
-    { name: 'Outputs', value: 'outputs' }
-  ]
+const {
+  dropdownItems,
+  displayItems,
+  filterSelected,
+  filterOptions,
+  ownershipSelected,
+  showOwnershipFilter,
+  ownershipOptions,
+  baseModelSelected,
+  showBaseModelFilter,
+  baseModelOptions,
+  selectedSet
+} = useWidgetSelectItems({
+  values: () => props.widget.options?.values as unknown[] | undefined,
+  getOptionLabel: () => props.widget.options?.getOptionLabel,
+  modelValue,
+  assetKind: () => props.assetKind,
+  outputMediaAssets,
+  assetData,
+  isAssetMode: () => props.isAssetMode
 })
 
-const ownershipSelected = ref<OwnershipOption>('all')
-const showOwnershipFilter = computed(() => props.isAssetMode)
-
-const { ownershipOptions, availableBaseModels } = useAssetFilterOptions(
-  () => assetData?.assets.value ?? []
-)
-
-const baseModelSelected = ref<Set<string>>(new Set())
-const showBaseModelFilter = computed(() => props.isAssetMode)
-const baseModelOptions = computed<FilterOption[]>(() => {
-  if (!props.isAssetMode || !assetData) return []
-  return availableBaseModels.value
-})
-
-const selectedSet = ref<Set<string>>(new Set())
-
-/**
- * Transforms a value using getOptionLabel if available.
- * Falls back to the original value if getOptionLabel is not provided,
- * returns undefined/null, or throws an error.
- */
-function getDisplayLabel(value: string): string {
-  const getOptionLabel = props.widget.options?.getOptionLabel
-  if (!getOptionLabel) return value
-
-  try {
-    return getOptionLabel(value) || value
-  } catch (e) {
-    console.error('Failed to map value:', e)
-    return value
-  }
-}
-
-const inputItems = computed<FormDropdownItem[]>(() => {
-  const values = props.widget.options?.values || []
-
-  if (!Array.isArray(values)) {
-    return []
-  }
-
-  return values.map((value, index) => ({
-    id: `input-${index}`,
-    preview_url: getMediaUrl(String(value), 'input'),
-    name: String(value),
-    label: getDisplayLabel(String(value))
-  }))
-})
-function assetKindToMediaType(kind: AssetKind): string {
-  return kind === 'mesh' ? '3D' : kind
-}
-
-/**
- * Per-job cache of resolved outputs for multi-output jobs.
- * Keyed by jobId, populated lazily via resolveOutputAssetItems which
- * fetches full outputs through getJobDetail (itself LRU-cached).
- */
-const resolvedByJobId = shallowRef(new Map<string, AssetItem[]>())
-const pendingJobIds = new Set<string>()
-
-watch(
-  () => outputMediaAssets.media.value,
-  (assets, _, onCleanup) => {
-    let cancelled = false
-    onCleanup(() => {
-      cancelled = true
-    })
-    pendingJobIds.clear()
-
-    for (const asset of assets) {
-      const meta = getOutputAssetMetadata(asset.user_metadata)
-      if (!meta) continue
-
-      const outputCount = meta.outputCount ?? meta.allOutputs?.length ?? 0
-      if (
-        outputCount <= 1 ||
-        resolvedByJobId.value.has(meta.jobId) ||
-        pendingJobIds.has(meta.jobId)
-      )
-        continue
-
-      pendingJobIds.add(meta.jobId)
-      void resolveOutputAssetItems(meta, { createdAt: asset.created_at })
-        .then((resolved) => {
-          if (cancelled || !resolved.length) return
-          const next = new Map(resolvedByJobId.value)
-          next.set(meta.jobId, resolved)
-          resolvedByJobId.value = next
-        })
-        .catch((error) => {
-          console.warn('Failed to resolve multi-output job', meta.jobId, error)
-        })
-        .finally(() => {
-          pendingJobIds.delete(meta.jobId)
-        })
-    }
-  },
-  { immediate: true }
-)
-
-const outputItems = computed<FormDropdownItem[]>(() => {
-  if (!['image', 'video', 'audio', 'mesh'].includes(props.assetKind ?? ''))
-    return []
-
-  const targetMediaType = assetKindToMediaType(props.assetKind!)
-  const seen = new Set<string>()
-  const items: FormDropdownItem[] = []
-
-  const assets = outputMediaAssets.media.value.flatMap((asset) => {
-    const meta = getOutputAssetMetadata(asset.user_metadata)
-    const resolved = meta ? resolvedByJobId.value.get(meta.jobId) : undefined
-    return resolved ?? [asset]
-  })
-
-  for (const asset of assets) {
-    if (getMediaTypeFromFilename(asset.name) !== targetMediaType) continue
-    if (seen.has(asset.id)) continue
-    seen.add(asset.id)
-    const annotatedPath = `${asset.name} [output]`
-    items.push({
-      id: `output-${annotatedPath}`,
-      preview_url: asset.preview_url || getMediaUrl(asset.name, 'output'),
-      name: annotatedPath,
-      label: getDisplayLabel(annotatedPath)
-    })
-  }
-
-  return items
-})
-
-/**
- * Creates a fallback item for the current modelValue when it doesn't exist
- * in the available items list. This handles cases like template-loaded nodes
- * where the saved value may not exist in the current server environment.
- * Works for both local mode (inputItems/outputItems) and cloud mode (assetData).
- */
-const missingValueItem = computed<FormDropdownItem | undefined>(() => {
-  const currentValue = modelValue.value
-  if (!currentValue) return undefined
-
-  // Check in cloud mode assets
-  if (props.isAssetMode && assetData) {
-    const existsInAssets = assetData.assets.value.some(
-      (asset) => getAssetFilename(asset) === currentValue
-    )
-    if (existsInAssets) return undefined
-
-    return {
-      id: `missing-${currentValue}`,
-      preview_url: '',
-      name: currentValue,
-      label: getDisplayLabel(currentValue)
-    }
-  }
-
-  // Check in local mode inputs/outputs
-  const existsInInputs = inputItems.value.some(
-    (item) => item.name === currentValue
-  )
-  const existsInOutputs = outputItems.value.some(
-    (item) => item.name === currentValue
-  )
-
-  if (existsInInputs || existsInOutputs) return undefined
-
-  const isOutput = currentValue.endsWith(' [output]')
-  const strippedValue = isOutput
-    ? currentValue.replace(' [output]', '')
-    : currentValue
-
-  return {
-    id: `missing-${currentValue}`,
-    preview_url: getMediaUrl(strippedValue, isOutput ? 'output' : 'input'),
-    name: currentValue,
-    label: getDisplayLabel(currentValue)
-  }
-})
-
-/**
- * Transforms AssetItem[] to FormDropdownItem[] for cloud mode.
- * Uses getAssetFilename for display name, asset.name for label.
- */
-const assetItems = computed<FormDropdownItem[]>(() => {
-  if (!props.isAssetMode || !assetData) return []
-  return assetData.assets.value.map((asset) => ({
-    id: asset.id,
-    name: getAssetFilename(asset),
-    label: getAssetDisplayName(asset),
-    preview_url: asset.preview_url,
-    is_immutable: asset.is_immutable,
-    base_models: getAssetBaseModels(asset)
-  }))
-})
-
-const ownershipFilteredAssetItems = computed<FormDropdownItem[]>(() =>
-  filterItemByOwnership(assetItems.value, ownershipSelected.value)
-)
-
-const baseModelFilteredAssetItems = computed<FormDropdownItem[]>(() =>
-  filterItemByBaseModels(
-    ownershipFilteredAssetItems.value,
-    baseModelSelected.value
-  )
-)
-
-const allItems = computed<FormDropdownItem[]>(() => {
-  if (props.isAssetMode && assetData) {
-    // Cloud assets not in user's library shouldn't appear as search results (COM-14333).
-    // Unlike local mode, cloud users can't access files they don't own.
-    return baseModelFilteredAssetItems.value
-  }
-  return [
-    ...(missingValueItem.value ? [missingValueItem.value] : []),
-    ...inputItems.value,
-    ...outputItems.value
-  ]
-})
-
-const dropdownItems = computed<FormDropdownItem[]>(() => {
-  if (props.isAssetMode) {
-    return allItems.value
-  }
-
-  switch (filterSelected.value) {
-    case 'inputs':
-      return inputItems.value
-    case 'outputs':
-      return outputItems.value
-    case 'all':
-    default:
-      return allItems.value
-  }
-})
-
-/**
- * Items used for display in the input field. In cloud mode, includes
- * missing items so users can see their selected value even if not in library.
- */
-const displayItems = computed<FormDropdownItem[]>(() => {
-  if (props.isAssetMode && assetData && missingValueItem.value) {
-    return [missingValueItem.value, ...baseModelFilteredAssetItems.value]
-  }
-  return dropdownItems.value
+const { updateSelectedItems, handleFilesUpdate } = useWidgetSelectActions({
+  modelValue,
+  dropdownItems,
+  widget: () => props.widget,
+  uploadFolder: () => props.uploadFolder,
+  uploadSubfolder: () => props.uploadSubfolder
 })
 
 const mediaPlaceholder = computed(() => {
@@ -392,141 +139,12 @@ const acceptTypes = computed(() => {
     case 'mesh':
       return SUPPORTED_EXTENSIONS_ACCEPT
     default:
-      return undefined // model or unknown
+      return undefined
   }
 })
 
 const layoutMode = ref<LayoutMode>(props.defaultLayoutMode ?? 'grid')
 
-watch(
-  [modelValue, displayItems],
-  ([currentValue]) => {
-    if (currentValue === undefined) {
-      selectedSet.value.clear()
-      return
-    }
-
-    const item = displayItems.value.find((item) => item.name === currentValue)
-    if (!item) {
-      selectedSet.value.clear()
-      return
-    }
-    selectedSet.value.clear()
-    selectedSet.value.add(item.id)
-  },
-  { immediate: true }
-)
-
-function updateSelectedItems(selectedItems: Set<string>) {
-  let id: string | undefined = undefined
-  if (selectedItems.size > 0) {
-    id = selectedItems.values().next().value!
-  }
-  if (id == null) {
-    modelValue.value = undefined
-    return
-  }
-  const name = dropdownItems.value.find((item) => item.id === id)?.name
-  if (!name) {
-    modelValue.value = undefined
-    return
-  }
-  modelValue.value = name
-  useWorkflowStore().activeWorkflow?.changeTracker?.checkState()
-}
-
-const uploadFile = async (
-  file: File,
-  isPasted: boolean = false,
-  formFields: Partial<{ type: ResultItemType }> = {}
-) => {
-  const body = new FormData()
-  body.append('image', file)
-  if (isPasted) body.append('subfolder', 'pasted')
-  else if (props.uploadSubfolder)
-    body.append('subfolder', props.uploadSubfolder)
-  if (formFields.type) body.append('type', formFields.type)
-
-  const resp = await api.fetchApi('/upload/image', {
-    method: 'POST',
-    body
-  })
-
-  if (resp.status !== 200) {
-    toastStore.addAlert(resp.status + ' - ' + resp.statusText)
-    return null
-  }
-
-  const data = await resp.json()
-
-  // Update AssetsStore when uploading to input folder
-  if (formFields.type === 'input' || (!formFields.type && !isPasted)) {
-    const assetsStore = useAssetsStore()
-    await assetsStore.updateInputs()
-  }
-
-  return data.subfolder ? `${data.subfolder}/${data.name}` : data.name
-}
-
-const uploadFiles = async (files: File[]): Promise<string[]> => {
-  const folder = props.uploadFolder ?? 'input'
-  const uploadPromises = files.map((file) =>
-    uploadFile(file, false, { type: folder })
-  )
-  const results = await Promise.all(uploadPromises)
-  return results.filter((path): path is string => path !== null)
-}
-
-async function handleFilesUpdate(files: File[]) {
-  if (!files || files.length === 0) return
-
-  try {
-    // 1. Upload files to server
-    const uploadedPaths = await uploadFiles(files)
-
-    if (uploadedPaths.length === 0) {
-      toastStore.addAlert('File upload failed')
-      return
-    }
-
-    // 2. Update widget options to include new files
-    // This simulates what addToComboValues does but for SimplifiedWidget
-    const values = props.widget.options?.values
-    if (Array.isArray(values)) {
-      uploadedPaths.forEach((path) => {
-        if (!values.includes(path)) {
-          values.push(path)
-        }
-      })
-    }
-
-    // 3. Update widget value to the first uploaded file
-    modelValue.value = uploadedPaths[0]
-
-    // 4. Trigger callback to notify underlying LiteGraph widget
-    if (props.widget.callback) {
-      props.widget.callback(uploadedPaths[0])
-    }
-
-    // 5. Snapshot undo state so the image change gets its own undo entry
-    useWorkflowStore().activeWorkflow?.changeTracker?.checkState()
-  } catch (error) {
-    console.error('Upload error:', error)
-    toastStore.addAlert(`Upload failed: ${error}`)
-  }
-}
-
-function getMediaUrl(
-  filename: string,
-  type: 'input' | 'output' = 'input'
-): string {
-  if (!['image', 'video', 'audio', 'mesh'].includes(props.assetKind ?? ''))
-    return ''
-  const params = new URLSearchParams({ filename, type })
-  appendCloudResParam(params, filename)
-  return `/api/view?${params}`
-}
-
 function handleIsOpenUpdate(isOpen: boolean) {
   if (isOpen && !outputMediaAssets.loading.value) {
     void outputMediaAssets.refresh()
@@ -537,11 +155,11 @@ function handleIsOpenUpdate(isOpen: boolean) {
 <template>
   <WidgetLayoutField :widget>
     <FormDropdown
-      v-model:selected="selectedSet"
       v-model:filter-selected="filterSelected"
       v-model:layout-mode="layoutMode"
       v-model:ownership-selected="ownershipSelected"
       v-model:base-model-selected="baseModelSelected"
+      :selected="selectedSet"
       :items="dropdownItems"
       :display-items="displayItems"
       :placeholder="mediaPlaceholder"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.test.ts
index 7ce0846fa6..26431a2004 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.test.ts
@@ -1,4 +1,5 @@
-import { mount } from '@vue/test-utils'
+import { fireEvent, render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
@@ -32,18 +33,20 @@ function createTextareaWidget(
   })
 }
 
-function mountComponent(
+function renderComponent(
   widget: SimplifiedWidget<string>,
   modelValue: string,
-  readonly = false,
-  placeholder?: string
+  placeholder?: string,
+  onUpdateModelValue?: (...args: unknown[]) => void
 ) {
-  return mount(WidgetTextarea, {
+  return render(WidgetTextarea, {
     props: {
       widget,
       modelValue,
-      readonly,
-      placeholder
+      placeholder,
+      ...(onUpdateModelValue
+        ? { 'onUpdate:modelValue': onUpdateModelValue }
+        : {})
     },
     global: {
       mocks: {
@@ -54,18 +57,17 @@ function mountComponent(
 }
 
 async function setTextareaValueAndTrigger(
-  wrapper: ReturnType<typeof mount>,
   value: string,
   trigger: 'blur' | 'input' = 'blur'
 ) {
-  const textarea = wrapper.find('textarea')
-  if (!(textarea.element instanceof HTMLTextAreaElement)) {
-    throw new Error(
-      'Textarea element not found or is not an HTMLTextAreaElement'
-    )
+  const textarea = screen.getByRole('textbox')
+  await fireEvent.update(textarea, value)
+  if (trigger === 'blur') {
+    await fireEvent.blur(textarea)
+  } else {
+    // eslint-disable-next-line testing-library/prefer-user-event
+    await fireEvent.input(textarea)
   }
-  await textarea.setValue(value)
-  await textarea.trigger(trigger)
   return textarea
 }
 
@@ -73,139 +75,120 @@ describe('WidgetTextarea Value Binding', () => {
   describe('Vue Event Emission', () => {
     it('emits Vue event when textarea value changes on blur', async () => {
       const widget = createTextareaWidget('hello')
-      const wrapper = mountComponent(widget, 'hello')
+      const onUpdateModelValue = vi.fn()
+      renderComponent(widget, 'hello', undefined, onUpdateModelValue)
 
-      await setTextareaValueAndTrigger(wrapper, 'world', 'blur')
+      await setTextareaValueAndTrigger('world', 'blur')
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted?.[0]).toContain('world')
+      expect(onUpdateModelValue).toHaveBeenCalledWith('world')
     })
 
     it('emits Vue event when textarea value changes on input', async () => {
       const widget = createTextareaWidget('initial')
-      const wrapper = mountComponent(widget, 'initial')
+      const onUpdateModelValue = vi.fn()
+      renderComponent(widget, 'initial', undefined, onUpdateModelValue)
 
-      await setTextareaValueAndTrigger(wrapper, 'new content', 'input')
+      await setTextareaValueAndTrigger('new content', 'input')
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted?.[0]).toContain('new content')
+      expect(onUpdateModelValue).toHaveBeenCalledWith('new content')
     })
 
     it('handles empty string values', async () => {
       const widget = createTextareaWidget('something')
-      const wrapper = mountComponent(widget, 'something')
+      const onUpdateModelValue = vi.fn()
+      renderComponent(widget, 'something', undefined, onUpdateModelValue)
 
-      await setTextareaValueAndTrigger(wrapper, '')
+      await setTextareaValueAndTrigger('')
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted?.[0]).toContain('')
+      expect(onUpdateModelValue).toHaveBeenCalledWith('')
     })
 
     it('handles multiline text correctly', async () => {
       const widget = createTextareaWidget('single line')
-      const wrapper = mountComponent(widget, 'single line')
+      const onUpdateModelValue = vi.fn()
+      renderComponent(widget, 'single line', undefined, onUpdateModelValue)
 
       const multilineText = 'Line 1\nLine 2\nLine 3'
-      await setTextareaValueAndTrigger(wrapper, multilineText)
+      await setTextareaValueAndTrigger(multilineText)
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted?.[0]).toContain(multilineText)
+      expect(onUpdateModelValue).toHaveBeenCalledWith(multilineText)
     })
 
     it('handles special characters correctly', async () => {
       const widget = createTextareaWidget('normal')
-      const wrapper = mountComponent(widget, 'normal')
+      const onUpdateModelValue = vi.fn()
+      renderComponent(widget, 'normal', undefined, onUpdateModelValue)
 
       const specialText = 'special @#$%^&*()[]{}|\\:";\'<>?,./'
-      await setTextareaValueAndTrigger(wrapper, specialText)
+      await setTextareaValueAndTrigger(specialText)
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted?.[0]).toContain(specialText)
+      expect(onUpdateModelValue).toHaveBeenCalledWith(specialText)
     })
 
     it('handles missing callback gracefully', async () => {
       const widget = createTextareaWidget('test', {}, undefined)
-      const wrapper = mountComponent(widget, 'test')
+      const onUpdateModelValue = vi.fn()
+      renderComponent(widget, 'test', undefined, onUpdateModelValue)
 
-      await setTextareaValueAndTrigger(wrapper, 'new value')
+      await setTextareaValueAndTrigger('new value')
 
-      // Should still emit Vue event
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted?.[0]).toContain('new value')
+      expect(onUpdateModelValue).toHaveBeenCalledWith('new value')
     })
   })
 
   describe('User Interactions', () => {
     it('emits update:modelValue on blur', async () => {
       const widget = createTextareaWidget('original')
-      const wrapper = mountComponent(widget, 'original')
+      const onUpdateModelValue = vi.fn()
+      renderComponent(widget, 'original', undefined, onUpdateModelValue)
 
-      await setTextareaValueAndTrigger(wrapper, 'updated')
+      await setTextareaValueAndTrigger('updated')
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted?.[0]).toContain('updated')
+      expect(onUpdateModelValue).toHaveBeenCalledWith('updated')
     })
 
     it('emits update:modelValue on input', async () => {
       const widget = createTextareaWidget('start')
-      const wrapper = mountComponent(widget, 'start')
+      const onUpdateModelValue = vi.fn()
+      renderComponent(widget, 'start', undefined, onUpdateModelValue)
 
-      await setTextareaValueAndTrigger(wrapper, 'finish', 'input')
+      await setTextareaValueAndTrigger('finish', 'input')
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted?.[0]).toContain('finish')
+      expect(onUpdateModelValue).toHaveBeenCalledWith('finish')
     })
   })
 
   describe('Component Rendering', () => {
     it('renders textarea component', () => {
       const widget = createTextareaWidget('test value')
-      const wrapper = mountComponent(widget, 'test value')
+      renderComponent(widget, 'test value')
 
-      const textarea = wrapper.find('textarea')
-      expect(textarea.exists()).toBe(true)
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
     })
 
     it('displays initial value in textarea', () => {
       const widget = createTextareaWidget('initial content')
-      const wrapper = mountComponent(widget, 'initial content')
+      renderComponent(widget, 'initial content')
 
-      const textarea = wrapper.find('textarea')
-      if (!(textarea.element instanceof HTMLTextAreaElement)) {
-        throw new Error(
-          'Textarea element not found or is not an HTMLTextAreaElement'
-        )
-      }
-      expect(textarea.element.value).toBe('initial content')
+      const textarea = screen.getByRole('textbox') as HTMLTextAreaElement
+      expect(textarea.value).toBe('initial content')
     })
 
     it('uses widget name as placeholder when no placeholder provided', () => {
       const widget = createTextareaWidget('test')
-      const wrapper = mountComponent(widget, 'test')
+      const { container } = renderComponent(widget, 'test')
 
-      const textareaLabel = wrapper.find('label')
-      expect(textareaLabel.text()).toBe('test_textarea')
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      const textareaLabel = container.querySelector('label')
+      expect(textareaLabel?.textContent).toBe('test_textarea')
     })
 
     it('uses provided placeholder when specified', () => {
       const widget = createTextareaWidget('test')
-      const wrapper = mountComponent(
-        widget,
-        'test',
-        false,
-        'Custom placeholder'
-      )
+      renderComponent(widget, 'test', 'Custom placeholder')
 
-      const textarea = wrapper.find('textarea')
-      expect(textarea.attributes('placeholder')).toBe('Custom placeholder')
+      const textarea = screen.getByRole('textbox')
+      expect(textarea.getAttribute('placeholder')).toBe('Custom placeholder')
     })
   })
   describe('Copy Button Behavior', () => {
@@ -215,30 +198,27 @@ describe('WidgetTextarea Value Binding', () => {
 
     it('hides copy button when not read-only', async () => {
       const widget = createTextareaWidget('test')
-      const wrapper = mountComponent(widget, 'test', false)
+      renderComponent(widget, 'test')
 
-      const button = wrapper.find('button')
-      expect(button.exists()).toBe(false)
+      expect(screen.queryByRole('button')).not.toBeInTheDocument()
     })
 
     it('copy button has invisible class by default when read-only', () => {
       const widget = createTextareaWidget('test', { read_only: true })
-      const wrapper = mountComponent(widget, 'test', true)
+      renderComponent(widget, 'test')
 
-      const button = wrapper.find('button')
-      expect(button.exists()).toBe(true)
-      expect(button.classes()).toContain('invisible')
+      const button = screen.getByRole('button')
+      expect(button.classList.contains('invisible')).toBe(true)
     })
 
     it('copy button has group-hover:visible class when read-only, and copies on click', async () => {
       const widget = createTextareaWidget('test value', { read_only: true })
-      const wrapper = mountComponent(widget, 'test value', true)
+      renderComponent(widget, 'test value')
 
-      const button = wrapper.find('button')
-      expect(button.exists()).toBe(true)
-      expect(button.classes()).toContain('group-hover:visible')
+      const button = screen.getByRole('button')
+      expect(button.classList.contains('group-hover:visible')).toBe(true)
 
-      await button.trigger('click')
+      await userEvent.click(button)
 
       expect(mockCopyToClipboard).toHaveBeenCalledWith('test value')
     })
@@ -247,38 +227,35 @@ describe('WidgetTextarea Value Binding', () => {
   describe('Edge Cases', () => {
     it('handles very long text', async () => {
       const widget = createTextareaWidget('short')
-      const wrapper = mountComponent(widget, 'short')
+      const onUpdateModelValue = vi.fn()
+      renderComponent(widget, 'short', undefined, onUpdateModelValue)
 
       const longText = 'a'.repeat(10000)
-      await setTextareaValueAndTrigger(wrapper, longText)
+      await setTextareaValueAndTrigger(longText)
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted?.[0]).toContain(longText)
+      expect(onUpdateModelValue).toHaveBeenCalledWith(longText)
     })
 
     it('handles unicode characters', async () => {
       const widget = createTextareaWidget('ascii')
-      const wrapper = mountComponent(widget, 'ascii')
+      const onUpdateModelValue = vi.fn()
+      renderComponent(widget, 'ascii', undefined, onUpdateModelValue)
 
       const unicodeText = '🎨 Unicode: αβγ 中文 العربية 🚀'
-      await setTextareaValueAndTrigger(wrapper, unicodeText)
+      await setTextareaValueAndTrigger(unicodeText)
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted?.[0]).toContain(unicodeText)
+      expect(onUpdateModelValue).toHaveBeenCalledWith(unicodeText)
     })
 
     it('handles text with tabs and spaces', async () => {
       const widget = createTextareaWidget('normal')
-      const wrapper = mountComponent(widget, 'normal')
+      const onUpdateModelValue = vi.fn()
+      renderComponent(widget, 'normal', undefined, onUpdateModelValue)
 
       const formattedText = '\tIndented line\n  Spaced line\n\t\tDouble indent'
-      await setTextareaValueAndTrigger(wrapper, formattedText)
+      await setTextareaValueAndTrigger(formattedText)
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted?.[0]).toContain(formattedText)
+      expect(onUpdateModelValue).toHaveBeenCalledWith(formattedText)
     })
   })
 })
@@ -287,8 +264,8 @@ describe('WidgetTextarea contextmenu', () => {
   it('prevents browser menu on first right-click (menu closed)', () => {
     mockIsNodeOptionsOpen.mockReturnValue(false)
     const widget = createTextareaWidget('test')
-    const wrapper = mountComponent(widget, 'test')
-    const textarea = wrapper.find('textarea')
+    renderComponent(widget, 'test')
+    const textarea = screen.getByRole('textbox')
 
     const event = new MouseEvent('contextmenu', {
       bubbles: true,
@@ -297,7 +274,7 @@ describe('WidgetTextarea contextmenu', () => {
     const preventDefaultSpy = vi.spyOn(event, 'preventDefault')
     const stopPropagationSpy = vi.spyOn(event, 'stopPropagation')
 
-    textarea.element.dispatchEvent(event)
+    textarea.dispatchEvent(event)
 
     expect(preventDefaultSpy).toHaveBeenCalled()
     expect(stopPropagationSpy).not.toHaveBeenCalled()
@@ -306,8 +283,8 @@ describe('WidgetTextarea contextmenu', () => {
   it('allows browser menu on second right-click (menu open)', () => {
     mockIsNodeOptionsOpen.mockReturnValue(true)
     const widget = createTextareaWidget('test')
-    const wrapper = mountComponent(widget, 'test')
-    const textarea = wrapper.find('textarea')
+    renderComponent(widget, 'test')
+    const textarea = screen.getByRole('textbox')
 
     const event = new MouseEvent('contextmenu', {
       bubbles: true,
@@ -316,7 +293,7 @@ describe('WidgetTextarea contextmenu', () => {
     const preventDefaultSpy = vi.spyOn(event, 'preventDefault')
     const stopPropagationSpy = vi.spyOn(event, 'stopPropagation')
 
-    textarea.element.dispatchEvent(event)
+    textarea.dispatchEvent(event)
 
     expect(preventDefaultSpy).not.toHaveBeenCalled()
     expect(stopPropagationSpy).toHaveBeenCalled()
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.test.ts
index ccc7194df8..63f07a1475 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.test.ts
@@ -1,8 +1,9 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import PrimeVue from 'primevue/config'
-import ToggleSwitch from 'primevue/toggleswitch'
+import { defineComponent } from 'vue'
 import { createI18n } from 'vue-i18n'
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
 import type { IWidgetOptions } from '@/lib/litegraph/src/types/widgets'
@@ -26,6 +27,17 @@ const i18n = createI18n({
   }
 })
 
+const ToggleSwitchStub = defineComponent({
+  name: 'ToggleSwitch',
+  props: {
+    modelValue: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false }
+  },
+  // eslint-disable-next-line vue/no-unused-emit-declarations -- used in template $emit
+  emits: ['update:modelValue'],
+  template: `<input type="checkbox" role="switch" :checked="modelValue" :disabled="disabled" @change="$emit('update:modelValue', $event.target.checked)" />`
+})
+
 describe('WidgetToggleSwitch Value Binding', () => {
   const createToggleWidget = (
     value: boolean = false,
@@ -43,157 +55,142 @@ describe('WidgetToggleSwitch Value Binding', () => {
   const mountComponent = (
     widget: SimplifiedWidget<boolean>,
     modelValue: boolean,
-    readonly = false
+    onModelUpdate?: (value: boolean | undefined) => void
   ) => {
-    return mount(WidgetToggleSwitch, {
+    const user = userEvent.setup()
+    const result = render(WidgetToggleSwitch, {
       props: {
         widget,
         modelValue,
-        readonly
+        ...(onModelUpdate ? { 'onUpdate:modelValue': onModelUpdate } : {})
       },
       global: {
         plugins: [PrimeVue, i18n],
-        components: { ToggleSwitch, ToggleGroup, ToggleGroupItem }
+        stubs: { ToggleSwitch: ToggleSwitchStub },
+        components: { ToggleGroup, ToggleGroupItem }
       }
     })
+    return { ...result, user }
   }
 
   describe('Vue Event Emission', () => {
     it('emits Vue event when toggled from false to true', async () => {
       const widget = createToggleWidget(false)
-      const wrapper = mountComponent(widget, false)
+      const onModelUpdate = vi.fn()
+      const { user } = mountComponent(widget, false, onModelUpdate)
 
-      const toggle = wrapper.findComponent({ name: 'ToggleSwitch' })
-      await toggle.setValue(true)
+      await user.click(screen.getByRole('switch'))
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toContain(true)
+      expect(onModelUpdate).toHaveBeenCalledWith(true)
     })
 
     it('emits Vue event when toggled from true to false', async () => {
       const widget = createToggleWidget(true)
-      const wrapper = mountComponent(widget, true)
+      const onModelUpdate = vi.fn()
+      const { user } = mountComponent(widget, true, onModelUpdate)
 
-      const toggle = wrapper.findComponent({ name: 'ToggleSwitch' })
-      await toggle.setValue(false)
+      await user.click(screen.getByRole('switch'))
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toContain(false)
+      expect(onModelUpdate).toHaveBeenCalledWith(false)
     })
 
     it('handles value changes gracefully', async () => {
       const widget = createToggleWidget(false)
-      const wrapper = mountComponent(widget, false)
+      const onModelUpdate = vi.fn()
+      const { user } = mountComponent(widget, false, onModelUpdate)
 
-      const toggle = wrapper.findComponent({ name: 'ToggleSwitch' })
-      await toggle.setValue(true)
-      await toggle.setValue(false)
+      const toggle = screen.getByRole('switch')
+      await user.click(toggle)
+      await user.click(toggle)
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toHaveLength(2)
-      expect(emitted![0]).toContain(true)
-      expect(emitted![1]).toContain(false)
+      expect(onModelUpdate).toHaveBeenCalledTimes(2)
+      expect(onModelUpdate).toHaveBeenNthCalledWith(1, true)
+      expect(onModelUpdate).toHaveBeenNthCalledWith(2, false)
     })
   })
 
   describe('Component Rendering', () => {
     it('renders toggle switch component', () => {
       const widget = createToggleWidget(false)
-      const wrapper = mountComponent(widget, false)
+      mountComponent(widget, false)
 
-      expect(wrapper.findComponent({ name: 'ToggleSwitch' }).exists()).toBe(
-        true
-      )
+      expect(screen.getByRole('switch')).toBeDefined()
     })
 
     it('displays correct initial state for false', () => {
       const widget = createToggleWidget(false)
-      const wrapper = mountComponent(widget, false)
+      mountComponent(widget, false)
 
-      const toggle = wrapper.findComponent({ name: 'ToggleSwitch' })
-      expect(toggle.props('modelValue')).toBe(false)
+      expect(screen.getByRole('switch')).not.toBeChecked()
     })
 
     it('displays correct initial state for true', () => {
       const widget = createToggleWidget(true)
-      const wrapper = mountComponent(widget, true)
+      mountComponent(widget, true)
 
-      const toggle = wrapper.findComponent({ name: 'ToggleSwitch' })
-      expect(toggle.props('modelValue')).toBe(true)
+      expect(screen.getByRole('switch')).toBeChecked()
     })
   })
 
   describe('Multiple Value Changes', () => {
     it('handles rapid toggling correctly', async () => {
       const widget = createToggleWidget(false)
-      const wrapper = mountComponent(widget, false)
+      const onModelUpdate = vi.fn()
+      const { user } = mountComponent(widget, false, onModelUpdate)
 
-      const toggle = wrapper.findComponent({ name: 'ToggleSwitch' })
+      const toggle = screen.getByRole('switch')
+      await user.click(toggle)
+      await user.click(toggle)
+      await user.click(toggle)
 
-      await toggle.setValue(true)
-      await toggle.setValue(false)
-      await toggle.setValue(true)
-
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toHaveLength(3)
-      expect(emitted![0]).toContain(true)
-      expect(emitted![1]).toContain(false)
-      expect(emitted![2]).toContain(true)
+      expect(onModelUpdate).toHaveBeenCalledTimes(3)
+      expect(onModelUpdate).toHaveBeenNthCalledWith(1, true)
+      expect(onModelUpdate).toHaveBeenNthCalledWith(2, false)
+      expect(onModelUpdate).toHaveBeenNthCalledWith(3, true)
     })
 
     it('maintains state consistency during multiple changes', async () => {
       const widget = createToggleWidget(false)
-      const wrapper = mountComponent(widget, false)
+      const onModelUpdate = vi.fn()
+      const { user } = mountComponent(widget, false, onModelUpdate)
 
-      const toggle = wrapper.findComponent({ name: 'ToggleSwitch' })
+      const toggle = screen.getByRole('switch')
+      await user.click(toggle)
+      await user.click(toggle)
+      await user.click(toggle)
+      await user.click(toggle)
 
-      await toggle.setValue(true)
-      await toggle.setValue(false)
-      await toggle.setValue(true)
-      await toggle.setValue(false)
-
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toHaveLength(4)
-      expect(emitted![0]).toContain(true)
-      expect(emitted![1]).toContain(false)
-      expect(emitted![2]).toContain(true)
-      expect(emitted![3]).toContain(false)
+      expect(onModelUpdate).toHaveBeenCalledTimes(4)
+      expect(onModelUpdate).toHaveBeenNthCalledWith(1, true)
+      expect(onModelUpdate).toHaveBeenNthCalledWith(2, false)
+      expect(onModelUpdate).toHaveBeenNthCalledWith(3, true)
+      expect(onModelUpdate).toHaveBeenNthCalledWith(4, false)
     })
   })
 
   describe('Label Display (label_on/label_off)', () => {
     it('renders ToggleGroup when labels are provided', () => {
       const widget = createToggleWidget(false, { on: 'inside', off: 'outside' })
-      const wrapper = mountComponent(widget, false)
+      mountComponent(widget, false)
 
-      expect(wrapper.findComponent({ name: 'ToggleGroupRoot' }).exists()).toBe(
-        true
-      )
-      expect(wrapper.findComponent({ name: 'ToggleSwitch' }).exists()).toBe(
-        false
-      )
+      expect(screen.getByRole('group')).toBeDefined()
+      expect(screen.queryByRole('switch')).toBeNull()
     })
 
     it('renders ToggleSwitch when no labels are provided', () => {
       const widget = createToggleWidget(false, {})
-      const wrapper = mountComponent(widget, false)
+      mountComponent(widget, false)
 
-      expect(wrapper.findComponent({ name: 'ToggleSwitch' }).exists()).toBe(
-        true
-      )
-      expect(wrapper.findComponent({ name: 'ToggleGroupRoot' }).exists()).toBe(
-        false
-      )
+      expect(screen.getByRole('switch')).toBeDefined()
+      expect(screen.queryByRole('group')).toBeNull()
     })
 
     it('displays both on and off labels in ToggleGroup', () => {
       const widget = createToggleWidget(false, { on: 'inside', off: 'outside' })
-      const wrapper = mountComponent(widget, false)
+      mountComponent(widget, false)
 
-      expect(wrapper.text()).toContain('inside')
-      expect(wrapper.text()).toContain('outside')
+      expect(screen.getByText('inside')).toBeDefined()
+      expect(screen.getByText('outside')).toBeDefined()
     })
 
     it('selects correct option based on boolean value (false)', () => {
@@ -201,10 +198,14 @@ describe('WidgetToggleSwitch Value Binding', () => {
         on: 'enabled',
         off: 'disabled'
       })
-      const wrapper = mountComponent(widget, false)
+      mountComponent(widget, false)
 
-      const toggleGroup = wrapper.findComponent({ name: 'ToggleGroupRoot' })
-      expect(toggleGroup.props('modelValue')).toBe('off')
+      const offButton = screen.getByText('disabled')
+      const onButton = screen.getByText('enabled')
+      // eslint-disable-next-line testing-library/no-node-access
+      expect(offButton.closest('button')).toHaveAttribute('data-state', 'on')
+      // eslint-disable-next-line testing-library/no-node-access
+      expect(onButton.closest('button')).toHaveAttribute('data-state', 'off')
     })
 
     it('selects correct option based on boolean value (true)', () => {
@@ -212,10 +213,14 @@ describe('WidgetToggleSwitch Value Binding', () => {
         on: 'enabled',
         off: 'disabled'
       })
-      const wrapper = mountComponent(widget, true)
+      mountComponent(widget, true)
 
-      const toggleGroup = wrapper.findComponent({ name: 'ToggleGroupRoot' })
-      expect(toggleGroup.props('modelValue')).toBe('on')
+      const offButton = screen.getByText('disabled')
+      const onButton = screen.getByText('enabled')
+      // eslint-disable-next-line testing-library/no-node-access
+      expect(onButton.closest('button')).toHaveAttribute('data-state', 'on')
+      // eslint-disable-next-line testing-library/no-node-access
+      expect(offButton.closest('button')).toHaveAttribute('data-state', 'off')
     })
 
     it('emits true when "on" option is clicked', async () => {
@@ -223,15 +228,12 @@ describe('WidgetToggleSwitch Value Binding', () => {
         on: 'enabled',
         off: 'disabled'
       })
-      const wrapper = mountComponent(widget, false)
+      const onModelUpdate = vi.fn()
+      const { user } = mountComponent(widget, false, onModelUpdate)
 
-      const buttons = wrapper.findAll('button')
-      const onButton = buttons.find((b) => b.text() === 'enabled')
-      await onButton!.trigger('click')
+      await user.click(screen.getByText('enabled'))
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toContain(true)
+      expect(onModelUpdate).toHaveBeenCalledWith(true)
     })
 
     it('emits false when "off" option is clicked', async () => {
@@ -239,40 +241,34 @@ describe('WidgetToggleSwitch Value Binding', () => {
         on: 'enabled',
         off: 'disabled'
       })
-      const wrapper = mountComponent(widget, true)
+      const onModelUpdate = vi.fn()
+      const { user } = mountComponent(widget, true, onModelUpdate)
 
-      const buttons = wrapper.findAll('button')
-      const offButton = buttons.find((b) => b.text() === 'disabled')
-      await offButton!.trigger('click')
+      await user.click(screen.getByText('disabled'))
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toContain(false)
+      expect(onModelUpdate).toHaveBeenCalledWith(false)
     })
 
     it('falls back to i18n defaults when only partial options provided', () => {
       const widgetOnOnly = createToggleWidget(true, { on: 'active' })
-      const wrapperOn = mountComponent(widgetOnOnly, true)
-      expect(wrapperOn.text()).toContain('active')
-      expect(wrapperOn.text()).toContain('false')
+      const { unmount: unmountFirst } = mountComponent(widgetOnOnly, true)
+      expect(screen.getByText('active')).toBeDefined()
+      expect(screen.getByText('false')).toBeDefined()
+      unmountFirst()
 
       const widgetOffOnly = createToggleWidget(false, { off: 'inactive' })
-      const wrapperOff = mountComponent(widgetOffOnly, false)
-      expect(wrapperOff.text()).toContain('inactive')
-      expect(wrapperOff.text()).toContain('true')
+      mountComponent(widgetOffOnly, false)
+      expect(screen.getByText('inactive')).toBeDefined()
+      expect(screen.getByText('true')).toBeDefined()
     })
 
     it('treats empty string labels as explicit values', () => {
       const widget = createToggleWidget(false, { on: '', off: 'disabled' })
-      const wrapper = mountComponent(widget, false)
+      mountComponent(widget, false)
 
-      expect(wrapper.findComponent({ name: 'ToggleGroupRoot' }).exists()).toBe(
-        true
-      )
-      expect(wrapper.findComponent({ name: 'ToggleSwitch' }).exists()).toBe(
-        false
-      )
-      expect(wrapper.text()).not.toContain('true')
+      expect(screen.getByRole('group')).toBeDefined()
+      expect(screen.queryByRole('switch')).toBeNull()
+      expect(screen.queryByText('true')).toBeNull()
     })
 
     it('disables ToggleGroup when read_only option is set', () => {
@@ -281,21 +277,22 @@ describe('WidgetToggleSwitch Value Binding', () => {
         off: 'no',
         read_only: true
       })
-      const wrapper = mountComponent(widget, false)
+      mountComponent(widget, false)
 
-      const toggleGroup = wrapper.findComponent({ name: 'ToggleGroupRoot' })
-      expect(toggleGroup.props('disabled')).toBe(true)
+      const buttons = screen.getAllByRole('button')
+      for (const button of buttons) {
+        expect(button).toBeDisabled()
+      }
     })
 
     it('does not emit when clicking already-selected option', async () => {
       const widget = createToggleWidget(false, { on: 'yes', off: 'no' })
-      const wrapper = mountComponent(widget, false)
+      const onModelUpdate = vi.fn()
+      const { user } = mountComponent(widget, false, onModelUpdate)
 
-      const buttons = wrapper.findAll('button')
-      const offButton = buttons.find((b) => b.text() === 'no')
-      await offButton!.trigger('click')
+      await user.click(screen.getByText('no'))
 
-      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+      expect(onModelUpdate).not.toHaveBeenCalled()
     })
   })
 })
diff --git a/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.test.ts b/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.test.ts
index 365c738ec1..1f1398addd 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.test.ts
@@ -1,4 +1,5 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
@@ -21,8 +22,8 @@ const i18n = createI18n({
   messages: { en: {} }
 })
 
-function mountPlayer(modelValue?: string) {
-  return mount(AudioPreviewPlayer, {
+function renderPlayer(modelValue?: string) {
+  return render(AudioPreviewPlayer, {
     props: {
       modelValue,
       hideWhenEmpty: false
@@ -38,29 +39,28 @@ function mountPlayer(modelValue?: string) {
   })
 }
 
-function findDownloadButton(wrapper: ReturnType<typeof mountPlayer>) {
-  return wrapper.find('[aria-label="g.downloadAudio"]')
-}
-
 describe('AudioPreviewPlayer', () => {
   describe('download button', () => {
     it('shows download button when audio is loaded', () => {
-      const wrapper = mountPlayer('http://example.com/audio.mp3')
+      renderPlayer('http://example.com/audio.mp3')
 
-      expect(findDownloadButton(wrapper).exists()).toBe(true)
+      screen.getByRole('button', { name: 'g.downloadAudio' })
     })
 
     it('hides download button when no audio is loaded', () => {
-      const wrapper = mountPlayer()
+      renderPlayer()
 
-      expect(findDownloadButton(wrapper).exists()).toBe(false)
+      expect(
+        screen.queryByRole('button', { name: 'g.downloadAudio' })
+      ).not.toBeInTheDocument()
     })
 
     it('calls downloadFile when download button is clicked', async () => {
       const { downloadFile } = await import('@/base/common/downloadUtil')
+      const user = userEvent.setup()
 
-      const wrapper = mountPlayer('http://example.com/audio.mp3')
-      await findDownloadButton(wrapper).trigger('click')
+      renderPlayer('http://example.com/audio.mp3')
+      await user.click(screen.getByRole('button', { name: 'g.downloadAudio' }))
 
       expect(downloadFile).toHaveBeenCalledWith('http://example.com/audio.mp3')
     })
@@ -70,9 +70,10 @@ describe('AudioPreviewPlayer', () => {
       vi.mocked(downloadFile).mockImplementation(() => {
         throw new Error('download failed')
       })
+      const user = userEvent.setup()
 
-      const wrapper = mountPlayer('http://example.com/audio.mp3')
-      await findDownloadButton(wrapper).trigger('click')
+      renderPlayer('http://example.com/audio.mp3')
+      await user.click(screen.getByRole('button', { name: 'g.downloadAudio' }))
 
       expect(mockToastAdd).toHaveBeenCalledWith(
         expect.objectContaining({
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.test.ts b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.test.ts
index bf9ec58b01..4022294d13 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.test.ts
@@ -1,23 +1,24 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import PrimeVue from 'primevue/config'
 import { describe, expect, it, vi } from 'vitest'
 
 import FormSelectButton from './FormSelectButton.vue'
 
 describe('FormSelectButton Core Component', () => {
-  // Type-safe helper for mounting component
-  const mountComponent = (
+  // Type-safe helper for rendering component
+  const renderComponent = (
     modelValue: string | null | undefined = null,
     options: unknown[] = [],
     props: Record<string, unknown> = {}
   ) => {
-    return mount(FormSelectButton, {
+    return render(FormSelectButton, {
       global: {
         plugins: [PrimeVue]
       },
       props: {
         modelValue,
-        options: options as (
+        options: options as unknown as (
           | string
           | number
           | { label: string; value: string | number }
@@ -27,115 +28,121 @@ describe('FormSelectButton Core Component', () => {
     })
   }
 
-  const clickButton = async (
-    wrapper: ReturnType<typeof mount>,
-    buttonText: string
-  ) => {
-    const buttons = wrapper.findAll('button')
-    const targetButtonIndex = buttons.findIndex((button) =>
-      button.text().includes(buttonText)
+  const clickButton = async (buttonText: string) => {
+    const buttons = screen.getAllByRole('button')
+    const targetButton = buttons.find((button) =>
+      button.textContent?.includes(buttonText)
     )
 
-    if (targetButtonIndex === -1) {
+    if (!targetButton) {
       throw new Error(`Button with text "${buttonText}" not found`)
     }
 
-    // Use get() which throws if element doesn't exist, providing better error messages
-    const targetButton = buttons.at(targetButtonIndex)!
-    await targetButton.trigger('click')
+    const user = userEvent.setup()
+    await user.click(targetButton)
     return targetButton
   }
 
   describe('Basic Rendering', () => {
     it('renders as a horizontal button group layout', () => {
       const options = ['option1', 'option2']
-      const wrapper = mountComponent(null, options)
+      const { container } = renderComponent(null, options)
 
-      const container = wrapper.find('div')
-      const buttons = wrapper.findAll('button')
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      const div = container.querySelector('div')
+      const buttons = screen.getAllByRole('button')
 
       // Verify layout behavior: container exists and contains buttons
-      expect(container.exists()).toBe(true)
+      expect(div).toBeInTheDocument()
       expect(buttons).toHaveLength(2)
 
       // Verify buttons are arranged horizontally (not vertically stacked)
       // This tests the layout logic rather than specific CSS classes
       buttons.forEach((button) => {
-        expect(button.exists()).toBe(true)
-        expect(button.element.tagName).toBe('BUTTON')
+        expect(button).toBeInTheDocument()
+        expect(button.tagName).toBe('BUTTON')
       })
     })
 
     it('renders buttons for each option', () => {
       const options = ['first', 'second', 'third']
-      const wrapper = mountComponent(null, options)
+      renderComponent(null, options)
 
-      const buttons = wrapper.findAll('button')
+      const buttons = screen.getAllByRole('button')
       expect(buttons).toHaveLength(3)
-      expect(buttons[0].text()).toBe('first')
-      expect(buttons[1].text()).toBe('second')
-      expect(buttons[2].text()).toBe('third')
+      expect(buttons[0].textContent).toBe('first')
+      expect(buttons[1].textContent).toBe('second')
+      expect(buttons[2].textContent).toBe('third')
     })
 
     it('renders empty container when no options provided', () => {
-      const wrapper = mountComponent(null, [])
+      renderComponent(null, [])
 
-      const buttons = wrapper.findAll('button')
-      expect(buttons).toHaveLength(0)
+      expect(screen.queryAllByRole('button')).toHaveLength(0)
     })
 
     it('applies proper button styling', () => {
       const options = ['test']
-      const wrapper = mountComponent(null, options)
+      renderComponent(null, options)
 
-      const button = wrapper.find('button')
-      expect(button.classes()).toContain('flex-1')
-      expect(button.classes()).toContain('h-6')
-      expect(button.classes()).toContain('px-5')
-      expect(button.classes()).toContain('py-[5px]')
-      expect(button.classes()).toContain('rounded-sm')
-      expect(button.classes()).toContain('text-center')
-      expect(button.classes()).toContain('text-xs')
-      expect(button.classes()).toContain('font-normal')
+      const button = screen.getByRole('button')
+      expect(button).toHaveClass('flex-1')
+      expect(button).toHaveClass('h-6')
+      expect(button).toHaveClass('px-5')
+      expect(button).toHaveClass('py-[5px]')
+      expect(button).toHaveClass('rounded-sm')
+      expect(button).toHaveClass('text-center')
+      expect(button).toHaveClass('text-xs')
+      expect(button).toHaveClass('font-normal')
     })
   })
 
   describe('String Options', () => {
     it('handles string array options', () => {
       const options = ['apple', 'banana', 'cherry']
-      const wrapper = mountComponent('banana', options)
+      renderComponent('banana', options)
 
-      const buttons = wrapper.findAll('button')
+      const buttons = screen.getAllByRole('button')
       expect(buttons).toHaveLength(3)
-      expect(buttons[0].text()).toBe('apple')
-      expect(buttons[1].text()).toBe('banana')
-      expect(buttons[2].text()).toBe('cherry')
+      expect(buttons[0].textContent).toBe('apple')
+      expect(buttons[1].textContent).toBe('banana')
+      expect(buttons[2].textContent).toBe('cherry')
     })
 
     it('emits correct string value when clicked', async () => {
       const options = ['first', 'second', 'third']
-      const wrapper = mountComponent('first', options)
+      const onUpdateModelValue = vi.fn()
+      render(FormSelectButton, {
+        global: { plugins: [PrimeVue] },
+        props: {
+          modelValue: 'first',
+          options: options as unknown as (
+            | string
+            | number
+            | { label: string; value: string | number }
+          )[],
+          'onUpdate:modelValue': onUpdateModelValue
+        }
+      })
 
-      await clickButton(wrapper, 'second')
+      await clickButton('second')
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toEqual(['second'])
+      expect(onUpdateModelValue).toHaveBeenCalledWith('second')
     })
 
     it('highlights selected string option', () => {
       const options = ['option1', 'option2', 'option3']
-      const wrapper = mountComponent('option2', options)
+      renderComponent('option2', options)
 
-      const buttons = wrapper.findAll('button')
-      expect(buttons[1].classes()).toContain(
+      const buttons = screen.getAllByRole('button')
+      expect(buttons[1]).toHaveClass(
         'bg-interface-menu-component-surface-selected'
       )
-      expect(buttons[1].classes()).toContain('text-text-primary')
-      expect(buttons[0].classes()).not.toContain(
+      expect(buttons[1]).toHaveClass('text-text-primary')
+      expect(buttons[0]).not.toHaveClass(
         'bg-interface-menu-component-surface-selected'
       )
-      expect(buttons[2].classes()).not.toContain(
+      expect(buttons[2]).not.toHaveClass(
         'bg-interface-menu-component-surface-selected'
       )
     })
@@ -144,35 +151,45 @@ describe('FormSelectButton Core Component', () => {
   describe('Number Options', () => {
     it('handles number array options', () => {
       const options = [1, 2, 3]
-      const wrapper = mountComponent('2', options)
+      renderComponent('2', options)
 
-      const buttons = wrapper.findAll('button')
+      const buttons = screen.getAllByRole('button')
       expect(buttons).toHaveLength(3)
-      expect(buttons[0].text()).toBe('1')
-      expect(buttons[1].text()).toBe('2')
-      expect(buttons[2].text()).toBe('3')
+      expect(buttons[0].textContent).toBe('1')
+      expect(buttons[1].textContent).toBe('2')
+      expect(buttons[2].textContent).toBe('3')
     })
 
     it('emits number value when clicked', async () => {
       const options = [10, 20, 30]
-      const wrapper = mountComponent('10', options)
+      const onUpdateModelValue = vi.fn()
+      render(FormSelectButton, {
+        global: { plugins: [PrimeVue] },
+        props: {
+          modelValue: '10',
+          options: options as unknown as (
+            | string
+            | number
+            | { label: string; value: string | number }
+          )[],
+          'onUpdate:modelValue': onUpdateModelValue
+        }
+      })
 
-      await clickButton(wrapper, '20')
+      await clickButton('20')
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toEqual([20])
+      expect(onUpdateModelValue).toHaveBeenCalledWith(20)
     })
 
     it('highlights selected number option', () => {
       const options = [100, 200, 300]
-      const wrapper = mountComponent('200', options)
+      renderComponent('200', options)
 
-      const buttons = wrapper.findAll('button')
-      expect(buttons[1].classes()).toContain(
+      const buttons = screen.getAllByRole('button')
+      expect(buttons[1]).toHaveClass(
         'bg-interface-menu-component-surface-selected'
       )
-      expect(buttons[1].classes()).toContain('text-text-primary')
+      expect(buttons[1]).toHaveClass('text-text-primary')
     })
   })
 
@@ -182,12 +199,12 @@ describe('FormSelectButton Core Component', () => {
         { label: 'First Option', value: 'first' },
         { label: 'Second Option', value: 'second' }
       ]
-      const wrapper = mountComponent('first', options)
+      renderComponent('first', options)
 
-      const buttons = wrapper.findAll('button')
+      const buttons = screen.getAllByRole('button')
       expect(buttons).toHaveLength(2)
-      expect(buttons[0].text()).toBe('First Option')
-      expect(buttons[1].text()).toBe('Second Option')
+      expect(buttons[0].textContent).toBe('First Option')
+      expect(buttons[1].textContent).toBe('Second Option')
     })
 
     it('emits object value when object option clicked', async () => {
@@ -195,13 +212,23 @@ describe('FormSelectButton Core Component', () => {
         { label: 'Apple', value: 'apple_val' },
         { label: 'Banana', value: 'banana_val' }
       ]
-      const wrapper = mountComponent('apple_val', options)
+      const onUpdateModelValue = vi.fn()
+      render(FormSelectButton, {
+        global: { plugins: [PrimeVue] },
+        props: {
+          modelValue: 'apple_val',
+          options: options as unknown as (
+            | string
+            | number
+            | { label: string; value: string | number }
+          )[],
+          'onUpdate:modelValue': onUpdateModelValue
+        }
+      })
 
-      await clickButton(wrapper, 'Banana')
+      await clickButton('Banana')
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toEqual(['banana_val'])
+      expect(onUpdateModelValue).toHaveBeenCalledWith('banana_val')
     })
 
     it('highlights selected object option by value', () => {
@@ -210,16 +237,16 @@ describe('FormSelectButton Core Component', () => {
         { label: 'Medium', value: 'md' },
         { label: 'Large', value: 'lg' }
       ]
-      const wrapper = mountComponent('md', options)
+      renderComponent('md', options)
 
-      const buttons = wrapper.findAll('button')
-      expect(buttons[1].classes()).toContain(
+      const buttons = screen.getAllByRole('button')
+      expect(buttons[1]).toHaveClass(
         'bg-interface-menu-component-surface-selected'
       ) // Medium
-      expect(buttons[0].classes()).not.toContain(
+      expect(buttons[0]).not.toHaveClass(
         'bg-interface-menu-component-surface-selected'
       )
-      expect(buttons[2].classes()).not.toContain(
+      expect(buttons[2]).not.toHaveClass(
         'bg-interface-menu-component-surface-selected'
       )
     })
@@ -229,12 +256,12 @@ describe('FormSelectButton Core Component', () => {
         { label: 'First', name: 'first_name' },
         { label: 'Second', name: 'second_name' }
       ]
-      const wrapper = mountComponent('first_name', options)
+      renderComponent('first_name', options)
 
-      const buttons = wrapper.findAll('button')
-      expect(buttons[0].text()).toBe('First')
-      expect(buttons[1].text()).toBe('Second')
-      expect(buttons[0].classes()).toContain(
+      const buttons = screen.getAllByRole('button')
+      expect(buttons[0].textContent).toBe('First')
+      expect(buttons[1].textContent).toBe('Second')
+      expect(buttons[0]).toHaveClass(
         'bg-interface-menu-component-surface-selected'
       )
     })
@@ -244,11 +271,11 @@ describe('FormSelectButton Core Component', () => {
         { value: 'val1', name: 'Name 1' },
         { value: 'val2', name: 'Name 2' }
       ]
-      const wrapper = mountComponent('val1', options)
+      renderComponent('val1', options)
 
-      const buttons = wrapper.findAll('button')
-      expect(buttons[0].text()).toBe('Name 1')
-      expect(buttons[1].text()).toBe('Name 2')
+      const buttons = screen.getAllByRole('button')
+      expect(buttons[0].textContent).toBe('Name 1')
+      expect(buttons[1].textContent).toBe('Name 2')
     })
   })
 
@@ -258,11 +285,11 @@ describe('FormSelectButton Core Component', () => {
         { title: 'First Item', value: 'first' },
         { title: 'Second Item', value: 'second' }
       ]
-      const wrapper = mountComponent('first', options, { optionLabel: 'title' })
+      renderComponent('first', options, { optionLabel: 'title' })
 
-      const buttons = wrapper.findAll('button')
-      expect(buttons[0].text()).toBe('First Item')
-      expect(buttons[1].text()).toBe('Second Item')
+      const buttons = screen.getAllByRole('button')
+      expect(buttons[0].textContent).toBe('First Item')
+      expect(buttons[1].textContent).toBe('Second Item')
     })
 
     it('uses custom optionValue prop', () => {
@@ -270,13 +297,13 @@ describe('FormSelectButton Core Component', () => {
         { label: 'First', id: 'first_id' },
         { label: 'Second', id: 'second_id' }
       ]
-      const wrapper = mountComponent('first_id', options, { optionValue: 'id' })
+      renderComponent('first_id', options, { optionValue: 'id' })
 
-      const buttons = wrapper.findAll('button')
-      expect(buttons[0].classes()).toContain(
+      const buttons = screen.getAllByRole('button')
+      expect(buttons[0]).toHaveClass(
         'bg-interface-menu-component-surface-selected'
       )
-      expect(buttons[1].classes()).not.toContain(
+      expect(buttons[1]).not.toHaveClass(
         'bg-interface-menu-component-surface-selected'
       )
     })
@@ -286,73 +313,96 @@ describe('FormSelectButton Core Component', () => {
         { label: 'First', id: 'first_id' },
         { label: 'Second', id: 'second_id' }
       ]
-      const wrapper = mountComponent('first_id', options, { optionValue: 'id' })
+      const onUpdateModelValue = vi.fn()
+      render(FormSelectButton, {
+        global: { plugins: [PrimeVue] },
+        props: {
+          modelValue: 'first_id',
+          options: options as unknown as (
+            | string
+            | number
+            | { label: string; value: string | number }
+          )[],
+          optionValue: 'id',
+          'onUpdate:modelValue': onUpdateModelValue
+        }
+      })
 
-      await clickButton(wrapper, 'Second')
+      await clickButton('Second')
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeDefined()
-      expect(emitted![0]).toEqual(['second_id'])
+      expect(onUpdateModelValue).toHaveBeenCalledWith('second_id')
     })
   })
 
   describe('Disabled State', () => {
     it('disables all buttons when disabled prop is true', () => {
       const options = ['option1', 'option2']
-      const wrapper = mountComponent('option1', options, { disabled: true })
+      renderComponent('option1', options, { disabled: true })
 
-      const buttons = wrapper.findAll('button')
+      const buttons = screen.getAllByRole('button')
       buttons.forEach((button) => {
-        expect(button.element.disabled).toBe(true)
-        expect(button.classes()).toContain('opacity-50')
-        expect(button.classes()).toContain('cursor-not-allowed')
+        expect((button as HTMLButtonElement).disabled).toBe(true)
+        expect(button).toHaveClass('opacity-50')
+        expect(button).toHaveClass('cursor-not-allowed')
       })
     })
 
     it('does not emit events when disabled', async () => {
       const options = ['option1', 'option2']
-      const wrapper = mountComponent('option1', options, { disabled: true })
+      const onUpdateModelValue = vi.fn()
+      render(FormSelectButton, {
+        global: { plugins: [PrimeVue] },
+        props: {
+          modelValue: 'option1',
+          options: options as unknown as (
+            | string
+            | number
+            | { label: string; value: string | number }
+          )[],
+          disabled: true,
+          'onUpdate:modelValue': onUpdateModelValue
+        }
+      })
 
-      await clickButton(wrapper, 'option2')
+      await clickButton('option2')
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toBeUndefined()
+      expect(onUpdateModelValue).not.toHaveBeenCalled()
     })
 
     it('does not apply hover styles when disabled', () => {
       const options = ['option1', 'option2']
-      const wrapper = mountComponent('option1', options, { disabled: true })
+      renderComponent('option1', options, { disabled: true })
 
-      const buttons = wrapper.findAll('button')
+      const buttons = screen.getAllByRole('button')
       buttons.forEach((button) => {
-        expect(button.classes()).not.toContain(
+        expect(button).not.toHaveClass(
           'hover:bg-interface-menu-component-surface-hovered'
         )
-        expect(button.classes()).not.toContain('cursor-pointer')
+        expect(button).not.toHaveClass('cursor-pointer')
       })
     })
 
     it('applies disabled styling to selected option', () => {
       const options = ['option1', 'option2']
-      const wrapper = mountComponent('option1', options, { disabled: true })
+      renderComponent('option1', options, { disabled: true })
 
-      const buttons = wrapper.findAll('button')
-      expect(buttons[0].classes()).not.toContain(
+      const buttons = screen.getAllByRole('button')
+      expect(buttons[0]).not.toHaveClass(
         'bg-interface-menu-component-surface-selected'
       ) // Selected styling disabled
-      expect(buttons[0].classes()).toContain('opacity-50')
-      expect(buttons[0].classes()).toContain('text-text-secondary')
+      expect(buttons[0]).toHaveClass('opacity-50')
+      expect(buttons[0]).toHaveClass('text-text-secondary')
     })
   })
 
   describe('Selection Logic', () => {
     it('handles null modelValue', () => {
       const options = ['option1', 'option2']
-      const wrapper = mountComponent(null, options)
+      renderComponent(null, options)
 
-      const buttons = wrapper.findAll('button')
+      const buttons = screen.getAllByRole('button')
       buttons.forEach((button) => {
-        expect(button.classes()).not.toContain(
+        expect(button).not.toHaveClass(
           'bg-interface-menu-component-surface-selected'
         )
       })
@@ -360,11 +410,11 @@ describe('FormSelectButton Core Component', () => {
 
     it('handles undefined modelValue', () => {
       const options = ['option1', 'option2']
-      const wrapper = mountComponent(undefined, options)
+      renderComponent(undefined, options)
 
-      const buttons = wrapper.findAll('button')
+      const buttons = screen.getAllByRole('button')
       buttons.forEach((button) => {
-        expect(button.classes()).not.toContain(
+        expect(button).not.toHaveClass(
           'bg-interface-menu-component-surface-selected'
         )
       })
@@ -372,23 +422,23 @@ describe('FormSelectButton Core Component', () => {
 
     it('handles empty string modelValue', () => {
       const options = ['', 'option1', 'option2']
-      const wrapper = mountComponent('', options)
+      renderComponent('', options)
 
-      const buttons = wrapper.findAll('button')
-      expect(buttons[0].classes()).toContain(
+      const buttons = screen.getAllByRole('button')
+      expect(buttons[0]).toHaveClass(
         'bg-interface-menu-component-surface-selected'
       ) // Empty string is selected
-      expect(buttons[1].classes()).not.toContain(
+      expect(buttons[1]).not.toHaveClass(
         'bg-interface-menu-component-surface-selected'
       )
     })
 
     it('compares values as strings', () => {
       const options = [1, '2', 3]
-      const wrapper = mountComponent('1', options)
+      renderComponent('1', options)
 
-      const buttons = wrapper.findAll('button')
-      expect(buttons[0].classes()).toContain(
+      const buttons = screen.getAllByRole('button')
+      expect(buttons[0]).toHaveClass(
         'bg-interface-menu-component-surface-selected'
       ) // '1' matches number 1 as string
     })
@@ -397,33 +447,33 @@ describe('FormSelectButton Core Component', () => {
   describe('Visual States', () => {
     it('applies selected styling to active option', () => {
       const options = ['option1', 'option2']
-      const wrapper = mountComponent('option1', options)
+      renderComponent('option1', options)
 
-      const selectedButton = wrapper.findAll('button')[0]
-      expect(selectedButton.classes()).toContain(
+      const selectedButton = screen.getAllByRole('button')[0]
+      expect(selectedButton).toHaveClass(
         'bg-interface-menu-component-surface-selected'
       )
-      expect(selectedButton.classes()).toContain('text-text-primary')
+      expect(selectedButton).toHaveClass('text-text-primary')
     })
 
     it('applies unselected styling to inactive options', () => {
       const options = ['option1', 'option2']
-      const wrapper = mountComponent('option1', options)
+      renderComponent('option1', options)
 
-      const unselectedButton = wrapper.findAll('button')[1]
-      expect(unselectedButton.classes()).toContain('bg-transparent')
-      expect(unselectedButton.classes()).toContain('text-text-secondary')
+      const unselectedButton = screen.getAllByRole('button')[1]
+      expect(unselectedButton).toHaveClass('bg-transparent')
+      expect(unselectedButton).toHaveClass('text-text-secondary')
     })
 
     it('applies hover effects to enabled unselected buttons', () => {
       const options = ['option1', 'option2']
-      const wrapper = mountComponent('option1', options, { disabled: false })
+      renderComponent('option1', options, { disabled: false })
 
-      const unselectedButton = wrapper.findAll('button')[1]
-      expect(unselectedButton.classes()).toContain(
+      const unselectedButton = screen.getAllByRole('button')[1]
+      expect(unselectedButton).toHaveClass(
         'hover:bg-interface-menu-component-surface-selected/50'
       )
-      expect(unselectedButton.classes()).toContain('cursor-pointer')
+      expect(unselectedButton).toHaveClass('cursor-pointer')
     })
   })
 
@@ -432,47 +482,47 @@ describe('FormSelectButton Core Component', () => {
       const longText =
         'This is a very long option text that might cause layout issues'
       const options = ['short', longText, 'normal']
-      const wrapper = mountComponent('short', options)
+      renderComponent('short', options)
 
-      const buttons = wrapper.findAll('button')
-      expect(buttons[1].text()).toBe(longText)
+      const buttons = screen.getAllByRole('button')
+      expect(buttons[1].textContent).toBe(longText)
       expect(buttons).toHaveLength(3)
     })
 
     it('handles options with special characters', () => {
       const specialOptions = ['@#$%^&*()', '{}[]|\\:";\'<>?,./']
-      const wrapper = mountComponent(specialOptions[0], specialOptions)
+      renderComponent(specialOptions[0], specialOptions)
 
-      const buttons = wrapper.findAll('button')
-      expect(buttons[0].text()).toBe('@#$%^&*()')
-      expect(buttons[0].classes()).toContain(
+      const buttons = screen.getAllByRole('button')
+      expect(buttons[0].textContent).toBe('@#$%^&*()')
+      expect(buttons[0]).toHaveClass(
         'bg-interface-menu-component-surface-selected'
       )
     })
 
     it('handles unicode characters in options', () => {
       const unicodeOptions = ['🎨 Art', '中文', 'العربية']
-      const wrapper = mountComponent('🎨 Art', unicodeOptions)
+      renderComponent('🎨 Art', unicodeOptions)
 
-      const buttons = wrapper.findAll('button')
-      expect(buttons[0].text()).toBe('🎨 Art')
-      expect(buttons[0].classes()).toContain(
+      const buttons = screen.getAllByRole('button')
+      expect(buttons[0].textContent).toBe('🎨 Art')
+      expect(buttons[0]).toHaveClass(
         'bg-interface-menu-component-surface-selected'
       )
     })
 
     it('handles duplicate option values', () => {
       const duplicateOptions = ['duplicate', 'unique', 'duplicate']
-      const wrapper = mountComponent('duplicate', duplicateOptions)
+      renderComponent('duplicate', duplicateOptions)
 
-      const buttons = wrapper.findAll('button')
-      expect(buttons[0].classes()).toContain(
+      const buttons = screen.getAllByRole('button')
+      expect(buttons[0]).toHaveClass(
         'bg-interface-menu-component-surface-selected'
       )
-      expect(buttons[2].classes()).toContain(
+      expect(buttons[2]).toHaveClass(
         'bg-interface-menu-component-surface-selected'
       ) // Both duplicates selected
-      expect(buttons[1].classes()).not.toContain(
+      expect(buttons[1]).not.toHaveClass(
         'bg-interface-menu-component-surface-selected'
       )
     })
@@ -483,11 +533,11 @@ describe('FormSelectButton Core Component', () => {
         123,
         { label: 'Object', value: 'obj' }
       ]
-      const wrapper = mountComponent('123', mixedOptions)
+      renderComponent('123', mixedOptions)
 
-      const buttons = wrapper.findAll('button')
+      const buttons = screen.getAllByRole('button')
       expect(buttons).toHaveLength(3)
-      expect(buttons[1].classes()).toContain(
+      expect(buttons[1]).toHaveClass(
         'bg-interface-menu-component-surface-selected'
       ) // Number 123 as string
     })
@@ -499,11 +549,11 @@ describe('FormSelectButton Core Component', () => {
         { value: 'has_value' }, // No label
         { label: 'has_label' } // No value
       ]
-      const wrapper = mountComponent('has_value', incompleteOptions)
+      renderComponent('has_value', incompleteOptions)
 
-      const buttons = wrapper.findAll('button')
+      const buttons = screen.getAllByRole('button')
       expect(buttons).toHaveLength(4)
-      expect(buttons[2].classes()).toContain(
+      expect(buttons[2]).toHaveClass(
         'bg-interface-menu-component-surface-selected'
       )
     })
@@ -513,11 +563,11 @@ describe('FormSelectButton Core Component', () => {
         { length: 50 },
         (_, i) => `Option ${i + 1}`
       )
-      const wrapper = mountComponent('Option 25', manyOptions)
+      renderComponent('Option 25', manyOptions)
 
-      const buttons = wrapper.findAll('button')
+      const buttons = screen.getAllByRole('button')
       expect(buttons).toHaveLength(50)
-      expect(buttons[24].classes()).toContain(
+      expect(buttons[24]).toHaveClass(
         'bg-interface-menu-component-surface-selected'
       ) // Option 25 at index 24
     })
@@ -527,11 +577,11 @@ describe('FormSelectButton Core Component', () => {
         { someRandomProp: 'random1' },
         { anotherRandomProp: 'random2' }
       ]
-      const wrapper = mountComponent('0', problematicOptions)
+      renderComponent('0', problematicOptions)
 
-      const buttons = wrapper.findAll('button')
+      const buttons = screen.getAllByRole('button')
       expect(buttons).toHaveLength(2)
-      expect(buttons[0].classes()).toContain(
+      expect(buttons[0]).toHaveClass(
         'bg-interface-menu-component-surface-selected'
       ) // Falls back to index 0
     })
@@ -540,27 +590,41 @@ describe('FormSelectButton Core Component', () => {
   describe('Event Handling', () => {
     it('prevents click events when disabled', async () => {
       const options = ['option1', 'option2']
-      const wrapper = mountComponent('option1', options, { disabled: true })
+      const { container } = renderComponent('option1', options, {
+        disabled: true
+      })
 
       const clickHandler = vi.fn()
-      wrapper.vm.$el.addEventListener('click', clickHandler)
+      // eslint-disable-next-line testing-library/no-node-access
+      container.firstElementChild!.addEventListener('click', clickHandler)
 
-      await clickButton(wrapper, 'option2')
+      await clickButton('option2')
 
       expect(clickHandler).not.toHaveBeenCalled()
     })
 
     it('allows repeated selection of same option', async () => {
       const options = ['option1', 'option2']
-      const wrapper = mountComponent('option1', options)
+      const onUpdateModelValue = vi.fn()
+      render(FormSelectButton, {
+        global: { plugins: [PrimeVue] },
+        props: {
+          modelValue: 'option1',
+          options: options as unknown as (
+            | string
+            | number
+            | { label: string; value: string | number }
+          )[],
+          'onUpdate:modelValue': onUpdateModelValue
+        }
+      })
 
-      await clickButton(wrapper, 'option1')
-      await clickButton(wrapper, 'option1')
+      await clickButton('option1')
+      await clickButton('option1')
 
-      const emitted = wrapper.emitted('update:modelValue')
-      expect(emitted).toHaveLength(2)
-      expect(emitted![0]).toEqual(['option1'])
-      expect(emitted![1]).toEqual(['option1'])
+      expect(onUpdateModelValue).toHaveBeenCalledTimes(2)
+      expect(onUpdateModelValue).toHaveBeenNthCalledWith(1, 'option1')
+      expect(onUpdateModelValue).toHaveBeenNthCalledWith(2, 'option1')
     })
   })
 })
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.test.ts b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.test.ts
index 8bf9e28301..c6a9bde28c 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.test.ts
@@ -1,4 +1,5 @@
-import { flushPromises, mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import PrimeVue from 'primevue/config'
 import { createI18n } from 'vue-i18n'
 import { describe, expect, it, vi } from 'vitest'
@@ -32,7 +33,8 @@ const MockFormDropdownMenu = {
     'showBaseModelFilter',
     'baseModelOptions'
   ],
-  template: '<div class="mock-menu" />'
+  template:
+    '<div class="mock-menu" data-testid="dropdown-menu" :data-items="JSON.stringify(items)" />'
 }
 
 const MockFormDropdownInput = {
@@ -55,11 +57,16 @@ interface MountDropdownOptions {
   searchQuery?: string
 }
 
+function flushPromises() {
+  return new Promise((resolve) => setTimeout(resolve, 0))
+}
+
 function mountDropdown(
   items: FormDropdownItem[],
   options: MountDropdownOptions = {}
 ) {
-  return mount(FormDropdown, {
+  const user = userEvent.setup()
+  const result = render(FormDropdown, {
     props: { items, ...options },
     global: {
       plugins: [PrimeVue, i18n],
@@ -70,28 +77,26 @@ function mountDropdown(
       }
     }
   })
+  return { ...result, user }
 }
 
-function getMenuItems(
-  wrapper: ReturnType<typeof mountDropdown>
-): FormDropdownItem[] {
-  return wrapper
-    .findComponent({ name: 'FormDropdownMenu' })
-    .props('items') as FormDropdownItem[]
+function getMenuItems(): FormDropdownItem[] {
+  const menuEl = screen.getByTestId('dropdown-menu')
+  return JSON.parse(menuEl.getAttribute('data-items') ?? '[]')
 }
 
 describe('FormDropdown', () => {
   describe('filteredItems updates when items prop changes', () => {
     it('updates displayed items when items prop changes', async () => {
-      const wrapper = mountDropdown([
+      const { rerender } = mountDropdown([
         createItem('input-0', 'video1.mp4'),
         createItem('input-1', 'video2.mp4')
       ])
       await flushPromises()
 
-      expect(getMenuItems(wrapper)).toHaveLength(2)
+      expect(getMenuItems()).toHaveLength(2)
 
-      await wrapper.setProps({
+      await rerender({
         items: [
           createItem('output-0', 'rendered1.mp4'),
           createItem('output-1', 'rendered2.mp4')
@@ -99,37 +104,37 @@ describe('FormDropdown', () => {
       })
       await flushPromises()
 
-      const menuItems = getMenuItems(wrapper)
+      const menuItems = getMenuItems()
       expect(menuItems).toHaveLength(2)
       expect(menuItems[0].name).toBe('rendered1.mp4')
     })
 
     it('updates when items change but IDs stay the same', async () => {
-      const wrapper = mountDropdown([createItem('1', 'alpha')])
+      const { rerender } = mountDropdown([createItem('1', 'alpha')])
       await flushPromises()
 
-      await wrapper.setProps({ items: [createItem('1', 'beta')] })
+      await rerender({ items: [createItem('1', 'beta')] })
       await flushPromises()
 
-      expect(getMenuItems(wrapper)[0].name).toBe('beta')
+      expect(getMenuItems()[0].name).toBe('beta')
     })
 
     it('updates when switching between empty and non-empty items', async () => {
-      const wrapper = mountDropdown([])
+      const { rerender } = mountDropdown([])
       await flushPromises()
 
-      expect(getMenuItems(wrapper)).toHaveLength(0)
+      expect(getMenuItems()).toHaveLength(0)
 
-      await wrapper.setProps({ items: [createItem('1', 'video.mp4')] })
+      await rerender({ items: [createItem('1', 'video.mp4')] })
       await flushPromises()
 
-      expect(getMenuItems(wrapper)).toHaveLength(1)
-      expect(getMenuItems(wrapper)[0].name).toBe('video.mp4')
+      expect(getMenuItems()).toHaveLength(1)
+      expect(getMenuItems()[0].name).toBe('video.mp4')
 
-      await wrapper.setProps({ items: [] })
+      await rerender({ items: [] })
       await flushPromises()
 
-      expect(getMenuItems(wrapper)).toHaveLength(0)
+      expect(getMenuItems()).toHaveLength(0)
     })
   })
 
@@ -139,7 +144,7 @@ describe('FormDropdown', () => {
         sourceItems.filter((item) => item.name.includes('video'))
     )
 
-    const wrapper = mountDropdown(
+    const { rerender } = mountDropdown(
       [createItem('1', 'video-a.mp4'), createItem('2', 'video-b.mp4')],
       { searcher }
     )
@@ -147,14 +152,20 @@ describe('FormDropdown', () => {
 
     expect(searcher).not.toHaveBeenCalled()
 
-    await wrapper.setProps({ searchQuery: 'video-a' })
-    await wrapper.setProps({
-      items: [createItem('3', 'video-c.mp4'), createItem('4', 'video-d.mp4')]
+    await rerender({
+      items: [createItem('1', 'video-a.mp4'), createItem('2', 'video-b.mp4')],
+      searcher,
+      searchQuery: 'video-a'
+    })
+    await rerender({
+      items: [createItem('3', 'video-c.mp4'), createItem('4', 'video-d.mp4')],
+      searcher,
+      searchQuery: 'video-a'
     })
     await flushPromises()
 
     expect(searcher).not.toHaveBeenCalled()
-    expect(getMenuItems(wrapper).map((item) => item.id)).toEqual(['3', '4'])
+    expect(getMenuItems().map((item) => item.id)).toEqual(['3', '4'])
   })
 
   it('runs filtering when dropdown opens', async () => {
@@ -163,16 +174,17 @@ describe('FormDropdown', () => {
         sourceItems.filter((item) => item.id === 'keep')
     )
 
-    const wrapper = mountDropdown(
+    const { container, user } = mountDropdown(
       [createItem('keep', 'alpha'), createItem('drop', 'beta')],
       { searcher }
     )
     await flushPromises()
 
-    await wrapper.find('.mock-dropdown-trigger').trigger('click')
+    // eslint-disable-next-line testing-library/no-node-access
+    await user.click(container.querySelector('.mock-dropdown-trigger')!)
     await flushPromises()
 
     expect(searcher).toHaveBeenCalled()
-    expect(getMenuItems(wrapper).map((item) => item.id)).toEqual(['keep'])
+    expect(getMenuItems().map((item) => item.id)).toEqual(['keep'])
   })
 })
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue
index 10b10352ff..9a5041b97c 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue
@@ -4,7 +4,6 @@ import Popover from 'primevue/popover'
 import { computed, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useTransformCompatOverlayProps } from '@/composables/useTransformCompatOverlayProps'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 
 import type {
@@ -51,7 +50,6 @@ interface Props {
 }
 
 const { t } = useI18n()
-const overlayProps = useTransformCompatOverlayProps()
 
 const {
   placeholder,
@@ -211,7 +209,6 @@ function handleSelection(item: FormDropdownItem, index: number) {
       ref="popoverRef"
       :dismissable="true"
       :close-on-escape="true"
-      :append-to="overlayProps.appendTo"
       unstyled
       :pt="{
         root: {
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.test.ts b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.test.ts
index 609e750853..c13628fa0f 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.test.ts
@@ -1,10 +1,16 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
 import { describe, expect, it } from 'vitest'
-import { nextTick } from 'vue'
 
 import FormDropdownMenu from './FormDropdownMenu.vue'
 import type { FormDropdownItem, LayoutMode } from './types'
 
+const VirtualGridStub = {
+  name: 'VirtualGrid',
+  props: ['items', 'maxColumns', 'itemHeight', 'scrollerHeight'],
+  template:
+    '<div data-testid="virtual-grid" :data-items="JSON.stringify(items)" :data-max-columns="maxColumns" />'
+}
+
 function createItem(id: string, name: string): FormDropdownItem {
   return {
     id,
@@ -22,107 +28,80 @@ describe('FormDropdownMenu', () => {
     sortOptions: []
   }
 
-  it('renders empty state when no items', async () => {
-    const wrapper = mount(FormDropdownMenu, {
+  const globalConfig = {
+    stubs: {
+      FormDropdownMenuFilter: true,
+      FormDropdownMenuActions: true,
+      VirtualGrid: VirtualGridStub
+    },
+    mocks: {
+      $t: (key: string) => key
+    }
+  }
+
+  it('renders empty state when no items', () => {
+    const { container } = render(FormDropdownMenu, {
       props: {
         ...defaultProps,
         items: []
       },
-      global: {
-        stubs: {
-          FormDropdownMenuFilter: true,
-          FormDropdownMenuActions: true,
-          VirtualGrid: true
-        },
-        mocks: {
-          $t: (key: string) => key
-        }
-      }
+      global: globalConfig
     })
 
-    await nextTick()
-
-    const emptyIcon = wrapper.find('.icon-\\[lucide--circle-off\\]')
-    expect(emptyIcon.exists()).toBe(true)
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const emptyIcon = container.querySelector('[class*="lucide--circle-off"]')
+    expect(emptyIcon).not.toBeNull()
   })
 
-  it('renders VirtualGrid when items exist', async () => {
-    const wrapper = mount(FormDropdownMenu, {
+  it('renders VirtualGrid when items exist', () => {
+    render(FormDropdownMenu, {
       props: defaultProps,
-      global: {
-        stubs: {
-          FormDropdownMenuFilter: true,
-          FormDropdownMenuActions: true,
-          VirtualGrid: true
-        }
-      }
+      global: globalConfig
     })
 
-    await nextTick()
-
-    const virtualGrid = wrapper.findComponent({ name: 'VirtualGrid' })
-    expect(virtualGrid.exists()).toBe(true)
+    expect(screen.getByTestId('virtual-grid')).toBeTruthy()
   })
 
-  it('transforms items to include key property for VirtualGrid', async () => {
+  it('transforms items to include key property for VirtualGrid', () => {
     const items = [createItem('1', 'Item 1'), createItem('2', 'Item 2')]
-    const wrapper = mount(FormDropdownMenu, {
+    render(FormDropdownMenu, {
       props: {
         ...defaultProps,
         items
       },
-      global: {
-        stubs: {
-          FormDropdownMenuFilter: true,
-          FormDropdownMenuActions: true,
-          VirtualGrid: true
-        }
-      }
+      global: globalConfig
     })
 
-    await nextTick()
-
-    const virtualGrid = wrapper.findComponent({ name: 'VirtualGrid' })
-    const virtualItems = virtualGrid.props('items')
+    const virtualGrid = screen.getByTestId('virtual-grid')
+    const virtualItems = JSON.parse(virtualGrid.getAttribute('data-items')!)
 
     expect(virtualItems).toHaveLength(2)
     expect(virtualItems[0]).toHaveProperty('key', '1')
     expect(virtualItems[1]).toHaveProperty('key', '2')
   })
 
-  it('uses single column layout for list modes', async () => {
-    const wrapper = mount(FormDropdownMenu, {
+  it('uses single column layout for list modes', () => {
+    render(FormDropdownMenu, {
       props: {
         ...defaultProps,
         layoutMode: 'list' as LayoutMode
       },
-      global: {
-        stubs: {
-          FormDropdownMenuFilter: true,
-          FormDropdownMenuActions: true,
-          VirtualGrid: true
-        }
-      }
+      global: globalConfig
     })
 
-    await nextTick()
-
-    const virtualGrid = wrapper.findComponent({ name: 'VirtualGrid' })
-    expect(virtualGrid.props('maxColumns')).toBe(1)
+    const virtualGrid = screen.getByTestId('virtual-grid')
+    expect(virtualGrid.getAttribute('data-max-columns')).toBe('1')
   })
 
   it('has data-capture-wheel="true" on the root element', () => {
-    const wrapper = mount(FormDropdownMenu, {
+    const { container } = render(FormDropdownMenu, {
       props: defaultProps,
-      global: {
-        stubs: {
-          FormDropdownMenuFilter: true,
-          FormDropdownMenuActions: true,
-          VirtualGrid: true
-        }
-      }
+      global: globalConfig
     })
 
-    expect(wrapper.attributes('data-capture-wheel')).toBe('true')
+    expect(
+      // eslint-disable-next-line testing-library/no-node-access
+      container.firstElementChild!.getAttribute('data-capture-wheel')
+    ).toBe('true')
   })
 })
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
index e088e985ce..2307db98bc 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
@@ -4,7 +4,6 @@ import { ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
-import { useTransformCompatOverlayProps } from '@/composables/useTransformCompatOverlayProps'
 import type {
   FilterOption,
   OwnershipFilterOption,
@@ -16,7 +15,6 @@ import FormSearchInput from '../FormSearchInput.vue'
 import type { LayoutMode, SortOption } from './types'
 
 const { t } = useI18n()
-const overlayProps = useTransformCompatOverlayProps()
 
 defineProps<{
   sortOptions: SortOption[]
@@ -135,7 +133,6 @@ function toggleBaseModelSelection(item: FilterOption) {
       ref="sortPopoverRef"
       :dismissable="true"
       :close-on-escape="true"
-      :append-to="overlayProps.appendTo"
       unstyled
       :pt="{
         root: {
@@ -198,7 +195,6 @@ function toggleBaseModelSelection(item: FilterOption) {
       ref="ownershipPopoverRef"
       :dismissable="true"
       :close-on-escape="true"
-      :append-to="overlayProps.appendTo"
       unstyled
       :pt="{
         root: {
@@ -261,7 +257,6 @@ function toggleBaseModelSelection(item: FilterOption) {
       ref="baseModelPopoverRef"
       :dismissable="true"
       :close-on-escape="true"
-      :append-to="overlayProps.appendTo"
       unstyled
       :pt="{
         root: {
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/audio/useAudioRecorder.test.ts b/src/renderer/extensions/vueNodes/widgets/composables/audio/useAudioRecorder.test.ts
new file mode 100644
index 0000000000..3dca334cc6
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/audio/useAudioRecorder.test.ts
@@ -0,0 +1,227 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { effectScope } from 'vue'
+
+import { useAudioRecorder } from '@/renderer/extensions/vueNodes/widgets/composables/audio/useAudioRecorder'
+
+const MockMediaRecorder = vi.hoisted(() =>
+  vi.fn(
+    class {
+      state = 'recording'
+      start = vi.fn()
+      onstop: (() => void) | null = null
+      ondataavailable: ((e: { data: Blob }) => void) | null = null
+
+      stop = vi.fn(() => {
+        this.state = 'inactive'
+        this.onstop?.()
+      })
+    }
+  )
+)
+
+vi.mock('extendable-media-recorder', () => ({
+  MediaRecorder: MockMediaRecorder
+}))
+
+vi.mock('@/services/audioService', () => ({
+  useAudioService: () => ({
+    registerWavEncoder: vi.fn().mockResolvedValue(undefined)
+  })
+}))
+
+function createMockTrack() {
+  return { kind: 'audio', readyState: 'live', stop: vi.fn() }
+}
+
+function createMockStream(tracks = [createMockTrack()]) {
+  return { getTracks: () => tracks } as unknown as MediaStream
+}
+
+const mockGetUserMedia = vi.fn()
+vi.stubGlobal('navigator', {
+  mediaDevices: { getUserMedia: mockGetUserMedia }
+})
+
+function recorderInstance() {
+  return MockMediaRecorder.mock.instances[0]
+}
+
+describe('useAudioRecorder', () => {
+  beforeEach(() => {
+    MockMediaRecorder.mockClear()
+    mockGetUserMedia.mockResolvedValue(createMockStream())
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('starts recording and sets isRecording to true', async () => {
+    const scope = effectScope()
+    const { isRecording, startRecording } = scope.run(() => useAudioRecorder())!
+
+    await startRecording()
+
+    expect(isRecording.value).toBe(true)
+    expect(mockGetUserMedia).toHaveBeenCalledWith({ audio: true })
+    expect(recorderInstance().start).toHaveBeenCalledWith(100)
+
+    scope.stop()
+  })
+
+  it('stops recording and releases microphone tracks', async () => {
+    const mockStream = createMockStream()
+    mockGetUserMedia.mockResolvedValue(mockStream)
+    const scope = effectScope()
+    const { isRecording, startRecording, stopRecording } = scope.run(() =>
+      useAudioRecorder()
+    )!
+
+    await startRecording()
+    stopRecording()
+    await vi.waitFor(() => expect(isRecording.value).toBe(false))
+
+    const tracks = mockStream.getTracks()
+    expect(tracks[0].stop).toHaveBeenCalled()
+
+    scope.stop()
+  })
+
+  it('creates blob URL after stopping', async () => {
+    const scope = effectScope()
+    const { recordedURL, startRecording, stopRecording } = scope.run(() =>
+      useAudioRecorder()
+    )!
+
+    await startRecording()
+    recorderInstance().ondataavailable?.({
+      data: new Blob(['audio'], { type: 'audio/wav' })
+    })
+    stopRecording()
+
+    await vi.waitFor(() => expect(recordedURL.value).not.toBeNull())
+    expect(recordedURL.value).toMatch(/^blob:/)
+
+    scope.stop()
+  })
+
+  it('calls onRecordingComplete with blob after stop', async () => {
+    const onComplete = vi.fn().mockResolvedValue(undefined)
+    const scope = effectScope()
+    const { startRecording, stopRecording } = scope.run(() =>
+      useAudioRecorder({ onRecordingComplete: onComplete })
+    )!
+
+    await startRecording()
+    recorderInstance().ondataavailable?.({
+      data: new Blob(['chunk'], { type: 'audio/wav' })
+    })
+    stopRecording()
+
+    await vi.waitFor(() => expect(onComplete).toHaveBeenCalled())
+    expect(onComplete).toHaveBeenCalledWith(expect.any(Blob))
+
+    scope.stop()
+  })
+
+  it('releases mic BEFORE calling onRecordingComplete', async () => {
+    const mockStream = createMockStream()
+    mockGetUserMedia.mockResolvedValue(mockStream)
+    const tracks = mockStream.getTracks()
+    let micReleasedBeforeCallback = false
+
+    const onComplete = vi.fn().mockImplementation(async () => {
+      micReleasedBeforeCallback =
+        vi.mocked(tracks[0].stop).mock.calls.length > 0
+    })
+
+    const scope = effectScope()
+    const { startRecording, stopRecording } = scope.run(() =>
+      useAudioRecorder({ onRecordingComplete: onComplete })
+    )!
+
+    await startRecording()
+    stopRecording()
+
+    await vi.waitFor(() => expect(onComplete).toHaveBeenCalled())
+    expect(micReleasedBeforeCallback).toBe(true)
+
+    scope.stop()
+  })
+
+  it('calls onStop synchronously during cleanup', async () => {
+    const onStop = vi.fn()
+    const scope = effectScope()
+    const { startRecording, stopRecording } = scope.run(() =>
+      useAudioRecorder({ onStop })
+    )!
+
+    await startRecording()
+    stopRecording()
+
+    await vi.waitFor(() => expect(onStop).toHaveBeenCalled())
+
+    scope.stop()
+  })
+
+  it('sets mediaRecorder to null in cleanup', async () => {
+    const scope = effectScope()
+    const { mediaRecorder, startRecording, stopRecording } = scope.run(() =>
+      useAudioRecorder()
+    )!
+
+    await startRecording()
+    expect(mediaRecorder.value).not.toBeNull()
+
+    stopRecording()
+    await vi.waitFor(() => expect(mediaRecorder.value).toBeNull())
+
+    scope.stop()
+  })
+
+  it('calls onError when getUserMedia fails', async () => {
+    mockGetUserMedia.mockRejectedValue(new Error('Permission denied'))
+    const onError = vi.fn()
+    const scope = effectScope()
+    const { isRecording, startRecording } = scope.run(() =>
+      useAudioRecorder({ onError })
+    )!
+
+    await expect(startRecording()).rejects.toThrow('Permission denied')
+    expect(onError).toHaveBeenCalled()
+    expect(isRecording.value).toBe(false)
+
+    scope.stop()
+  })
+
+  it('dispose stops recording and revokes blob URL', async () => {
+    const revokeURL = vi.spyOn(URL, 'revokeObjectURL')
+    const scope = effectScope()
+    const { recordedURL, startRecording, stopRecording, dispose } = scope.run(
+      () => useAudioRecorder()
+    )!
+
+    await startRecording()
+    stopRecording()
+    await vi.waitFor(() => expect(recordedURL.value).not.toBeNull())
+
+    const blobUrl = recordedURL.value
+    dispose()
+
+    expect(recordedURL.value).toBeNull()
+    expect(revokeURL).toHaveBeenCalledWith(blobUrl)
+
+    scope.stop()
+  })
+
+  it('cleanup is idempotent when called on inactive recorder', () => {
+    const scope = effectScope()
+    const { isRecording, stopRecording } = scope.run(() => useAudioRecorder())!
+
+    expect(isRecording.value).toBe(false)
+    stopRecording()
+    expect(isRecording.value).toBe(false)
+
+    scope.stop()
+  })
+})
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/audio/useAudioRecorder.ts b/src/renderer/extensions/vueNodes/widgets/composables/audio/useAudioRecorder.ts
index 276c2de0af..ca0cc3d851 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/audio/useAudioRecorder.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/audio/useAudioRecorder.ts
@@ -5,6 +5,7 @@ import { useAudioService } from '@/services/audioService'
 
 interface AudioRecorderOptions {
   onRecordingComplete?: (audioBlob: Blob) => Promise<void>
+  onStop?: () => void
   onError?: (error: Error) => void
 }
 
@@ -48,12 +49,12 @@ export function useAudioRecorder(options: AudioRecorderOptions = {}) {
         }
         recordedURL.value = URL.createObjectURL(blob)
 
+        cleanup()
+
         // Notify completion
         if (options.onRecordingComplete) {
           await options.onRecordingComplete(blob)
         }
-
-        cleanup()
       }
 
       // Start recording
@@ -77,11 +78,14 @@ export function useAudioRecorder(options: AudioRecorderOptions = {}) {
 
   function cleanup() {
     isRecording.value = false
+    mediaRecorder.value = null
 
     if (stream.value) {
       stream.value.getTracks().forEach((track) => track.stop())
       stream.value = null
     }
+
+    options.onStop?.()
   }
 
   function dispose() {
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts b/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
index ea2d7ed100..6d514c096f 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
@@ -28,6 +28,7 @@ function createMockAssetItem(overrides: Partial<AssetItem> = {}): AssetItem {
 const mockDistributionState = vi.hoisted(() => ({ isCloud: false }))
 const mockUpdateInputs = vi.hoisted(() => vi.fn(() => Promise.resolve()))
 const mockGetInputName = vi.hoisted(() => vi.fn((hash: string) => hash))
+const mockGetAssets = vi.hoisted(() => vi.fn(() => [] as AssetItem[]))
 const mockAssetsStoreState = vi.hoisted(() => {
   const inputAssets: AssetItem[] = []
   return {
@@ -55,7 +56,8 @@ vi.mock('@/stores/assetsStore', () => ({
       return mockAssetsStoreState.inputLoading
     },
     updateInputs: mockUpdateInputs,
-    getInputName: mockGetInputName
+    getInputName: mockGetInputName,
+    getAssets: mockGetAssets
   }))
 }))
 
@@ -199,67 +201,117 @@ describe('useComboWidget', () => {
     expect(widget).toBe(mockWidget)
   })
 
-  it('should create asset browser widget when API enabled', () => {
-    mockDistributionState.isCloud = true
-    vi.mocked(assetService.shouldUseAssetBrowser).mockReturnValue(true)
+  describe('cloud asset browser widget', () => {
+    // "Select model" is the fallback from t('widgets.selectModel')
+    // in createAssetWidget when defaultValue is undefined.
+    const PLACEHOLDER = 'Select model'
 
-    const constructor = useComboWidget()
-    const mockWidget = createMockWidget({
-      type: 'asset',
-      name: 'ckpt_name',
-      value: 'model1.safetensors'
-    })
-    const mockNode = createMockNode('CheckpointLoaderSimple')
-    vi.mocked(mockNode.addWidget).mockReturnValue(mockWidget)
-    const inputSpec = createMockInputSpec({
-      name: 'ckpt_name',
-      options: ['model1.safetensors', 'model2.safetensors']
+    function setupCloudAssetWidget(
+      inputSpecOverrides: Partial<InputSpec> = {}
+    ) {
+      mockDistributionState.isCloud = true
+      vi.mocked(assetService.shouldUseAssetBrowser).mockReturnValue(true)
+
+      const constructor = useComboWidget()
+      const mockWidget = createMockWidget({
+        type: 'asset',
+        name: 'ckpt_name',
+        value: ''
+      })
+      const mockNode = createMockNode('CheckpointLoaderSimple')
+      vi.mocked(mockNode.addWidget).mockReturnValue(mockWidget)
+      const inputSpec = createMockInputSpec({
+        name: 'ckpt_name',
+        ...inputSpecOverrides
+      })
+
+      constructor(mockNode, inputSpec)
+      return { mockNode }
+    }
+
+    function getWidgetDefault(mockNode: ReturnType<typeof createMockNode>) {
+      return vi.mocked(mockNode.addWidget).mock.calls[0]?.[2]
+    }
+
+    it('should create asset browser widget when API enabled', () => {
+      mockGetAssets.mockReturnValue([
+        createMockAssetItem({ name: 'cloud_model.safetensors' })
+      ])
+
+      const { mockNode } = setupCloudAssetWidget({
+        options: ['model1.safetensors', 'model2.safetensors']
+      })
+
+      expect(
+        vi.mocked(assetService.shouldUseAssetBrowser)
+      ).toHaveBeenCalledWith('CheckpointLoaderSimple', 'ckpt_name')
+      expect(mockNode.addWidget).toHaveBeenCalledWith(
+        'asset',
+        'ckpt_name',
+        expect.anything(),
+        expect.any(Function),
+        expect.any(Object)
+      )
     })
 
-    const widget = constructor(mockNode, inputSpec)
+    it('should use first cloud asset as default instead of server combo options', () => {
+      mockGetAssets.mockReturnValue([
+        createMockAssetItem({ name: 'cloud_model.safetensors' })
+      ])
 
-    expect(mockNode.addWidget).toHaveBeenCalledWith(
-      'asset',
-      'ckpt_name',
-      'model1.safetensors',
-      expect.any(Function),
-      expect.any(Object)
-    )
-    expect(vi.mocked(assetService.shouldUseAssetBrowser)).toHaveBeenCalledWith(
-      'CheckpointLoaderSimple',
-      'ckpt_name'
-    )
-    expect(widget).toBe(mockWidget)
-  })
+      const { mockNode } = setupCloudAssetWidget({
+        options: ['local_only_model.safetensors']
+      })
 
-  it('should create asset browser widget when default value provided without options', () => {
-    mockDistributionState.isCloud = true
-    vi.mocked(assetService.shouldUseAssetBrowser).mockReturnValue(true)
-
-    const constructor = useComboWidget()
-    const mockWidget = createMockWidget({
-      type: 'asset',
-      name: 'ckpt_name',
-      value: 'fallback.safetensors'
-    })
-    const mockNode = createMockNode('CheckpointLoaderSimple')
-    vi.mocked(mockNode.addWidget).mockReturnValue(mockWidget)
-    const inputSpec = createMockInputSpec({
-      name: 'ckpt_name',
-      default: 'fallback.safetensors'
-      // Note: no options array provided
+      expect(getWidgetDefault(mockNode)).toBe('cloud_model.safetensors')
     })
 
-    const widget = constructor(mockNode, inputSpec)
+    it('should fallback to assets[0] when inputSpec.default not in cloud assets', () => {
+      mockGetAssets.mockReturnValue([
+        createMockAssetItem({ name: 'cloud_model.safetensors' })
+      ])
 
-    expect(mockNode.addWidget).toHaveBeenCalledWith(
-      'asset',
-      'ckpt_name',
-      'fallback.safetensors',
-      expect.any(Function),
-      expect.any(Object)
-    )
-    expect(widget).toBe(mockWidget)
+      const { mockNode } = setupCloudAssetWidget({
+        default: 'not_in_cloud.safetensors'
+      })
+
+      expect(getWidgetDefault(mockNode)).toBe('cloud_model.safetensors')
+    })
+
+    it('should prefer inputSpec.default when it exists in cloud assets', () => {
+      mockGetAssets.mockReturnValue([
+        createMockAssetItem({ name: 'other_model.safetensors' }),
+        createMockAssetItem({ name: 'fallback.safetensors' })
+      ])
+
+      const { mockNode } = setupCloudAssetWidget({
+        // Note: no options array provided
+        default: 'fallback.safetensors'
+      })
+
+      expect(getWidgetDefault(mockNode)).toBe('fallback.safetensors')
+    })
+
+    it('should create asset browser widget when default value provided without options', () => {
+      mockGetAssets.mockReturnValue([])
+
+      const { mockNode } = setupCloudAssetWidget({
+        // Note: no options array provided
+        default: 'fallback.safetensors'
+      })
+
+      expect(getWidgetDefault(mockNode)).toBe(PLACEHOLDER)
+    })
+
+    it('should fallback to placeholder when cloud assets not loaded', () => {
+      mockGetAssets.mockReturnValue([])
+
+      const { mockNode } = setupCloudAssetWidget({
+        options: ['local_model.safetensors']
+      })
+
+      expect(getWidgetDefault(mockNode)).toBe(PLACEHOLDER)
+    })
   })
 
   it('should show Select model when asset widget has undefined current value', () => {
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
index 895462c19b..92eb7bf5c6 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
@@ -6,6 +6,7 @@ import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { isComboWidget } from '@/lib/litegraph/src/litegraph'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { assetService } from '@/platform/assets/services/assetService'
+import { getAssetFilename } from '@/platform/assets/utils/assetMetadataUtils'
 import { createAssetWidget } from '@/platform/assets/utils/createAssetWidget'
 import { isCloud } from '@/platform/distribution/types'
 import type {
@@ -104,6 +105,25 @@ const addMultiSelectWidget = (
   return widget
 }
 
+/**
+ * Resolve the default value for a cloud asset widget.
+ * Priority: inputSpec.default (if present in cloud assets) → first cloud
+ * asset → undefined (shows placeholder).
+ */
+function resolveCloudDefault(
+  nodeType: string,
+  specDefault: string | undefined
+): string | undefined {
+  const assets = useAssetsStore().getAssets(nodeType)
+  if (specDefault != null) {
+    const inAssets = assets.some((a) => getAssetFilename(a) === specDefault)
+    if (inAssets) return specDefault
+  }
+  // empty filename → undefined (shows placeholder)
+  const filename = assets.length ? getAssetFilename(assets[0]) : undefined
+  return filename || undefined
+}
+
 function createAssetBrowserWidget(
   node: LGraphNode,
   inputSpec: ComboInputSpec,
@@ -195,7 +215,14 @@ const addComboWidget = (
 
   if (isCloud) {
     if (assetService.shouldUseAssetBrowser(node.comfyClass, inputSpec.name)) {
-      return createAssetBrowserWidget(node, inputSpec, defaultValue)
+      // Default from cloud assets, not from server combo options.
+      // Server options list local files that may not exist in the user's
+      // cloud asset library, leading to missing-model errors on undo/reload.
+      const cloudDefault = resolveCloudDefault(
+        node.comfyClass ?? '',
+        inputSpec.default
+      )
+      return createAssetBrowserWidget(node, inputSpec, cloudDefault)
     }
 
     if (NODE_MEDIA_TYPE_MAP[node.comfyClass ?? '']) {
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useImageUploadWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useImageUploadWidget.ts
index b1ebd90815..9fa509118c 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useImageUploadWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useImageUploadWidget.ts
@@ -11,8 +11,10 @@ import { isImageUploadInput } from '@/types/nodeDefAugmentation'
 import { createAnnotatedPath } from '@/utils/createAnnotatedPath'
 import { addToComboValues } from '@/utils/litegraphUtil'
 
-const ACCEPTED_IMAGE_TYPES = 'image/png,image/jpeg,image/webp'
-const ACCEPTED_VIDEO_TYPES = 'video/webm,video/mp4'
+import {
+  ACCEPTED_IMAGE_TYPES,
+  ACCEPTED_VIDEO_TYPES
+} from '@/utils/mediaUploadUtil'
 
 const isImageFile = (file: File) => file.type.startsWith('image/')
 const isVideoFile = (file: File) => file.type.startsWith('video/')
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useRangeWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useRangeWidget.ts
new file mode 100644
index 0000000000..db8a3365ff
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useRangeWidget.ts
@@ -0,0 +1,37 @@
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type {
+  IRangeWidget,
+  IWidgetRangeOptions
+} from '@/lib/litegraph/src/types/widgets'
+import type { RangeInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+export const useRangeWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec): IRangeWidget => {
+    const spec = inputSpec as RangeInputSpec
+    const defaultValue = spec.default ?? { min: 0.0, max: 1.0 }
+
+    const options: IWidgetRangeOptions = {
+      display: spec.display,
+      gradient_stops: spec.gradient_stops,
+      show_midpoint: spec.show_midpoint,
+      midpoint_scale: spec.midpoint_scale,
+      value_min: spec.value_min,
+      value_max: spec.value_max
+    }
+
+    const rawWidget = node.addWidget(
+      'range',
+      spec.name,
+      { ...defaultValue },
+      () => {},
+      options
+    )
+
+    if (rawWidget.type !== 'range') {
+      throw new Error(`Unexpected widget type: ${rawWidget.type}`)
+    }
+
+    return rawWidget as IRangeWidget
+  }
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts
index a77385a5a3..d7f914dac6 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts
@@ -1,5 +1,6 @@
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { resolveNodeRootGraphId } from '@/lib/litegraph/src/litegraph'
+import { defineDeprecatedProperty } from '@/lib/litegraph/src/utils/feedback'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { isStringInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
@@ -40,7 +41,14 @@ function addMultilineWidget(
   })
 
   widget.element = inputEl
-  widget.inputEl = inputEl
+
+  /** @deprecated Use {@link widget.element} instead (renamed in PR #8594). */
+  defineDeprecatedProperty(
+    widget,
+    'inputEl',
+    'element',
+    'widget.inputEl is deprecated. Use widget.element instead.'
+  )
   widget.options.minNodeSize = [400, 200]
 
   inputEl.addEventListener('input', (event) => {
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useWidgetSelectActions.test.ts b/src/renderer/extensions/vueNodes/widgets/composables/useWidgetSelectActions.test.ts
new file mode 100644
index 0000000000..fa49d52628
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useWidgetSelectActions.test.ts
@@ -0,0 +1,229 @@
+import { createTestingPinia } from '@pinia/testing'
+import { fromPartial } from '@total-typescript/shoehorn'
+import { setActivePinia } from 'pinia'
+import { computed, ref } from 'vue'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { FormDropdownItem } from '@/renderer/extensions/vueNodes/widgets/components/form/dropdown/types'
+import { useWidgetSelectActions } from '@/renderer/extensions/vueNodes/widgets/composables/useWidgetSelectActions'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+const mockCaptureCanvasState = vi.hoisted(() => vi.fn())
+
+vi.mock('@/platform/workflow/management/stores/workflowStore', async () => {
+  const actual = await vi.importActual(
+    '@/platform/workflow/management/stores/workflowStore'
+  )
+  return {
+    ...actual,
+    useWorkflowStore: () => ({
+      activeWorkflow: {
+        changeTracker: {
+          captureCanvasState: mockCaptureCanvasState
+        }
+      }
+    })
+  }
+})
+
+vi.mock('@/scripts/api', () => ({
+  api: {
+    fetchApi: vi.fn(),
+    apiURL: vi.fn((url: string) => url),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn()
+  }
+}))
+
+function createItems(...names: string[]): FormDropdownItem[] {
+  return names.map((name, i) => ({
+    id: `input-${i}`,
+    name,
+    label: name,
+    preview_url: ''
+  }))
+}
+
+describe('useWidgetSelectActions', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    mockCaptureCanvasState.mockClear()
+  })
+
+  describe('updateSelectedItems', () => {
+    it('sets modelValue to the selected item name', () => {
+      const modelValue = ref<string | undefined>('img_001.png')
+      const items = createItems('img_001.png', 'photo_abc.jpg')
+      const { updateSelectedItems } = useWidgetSelectActions({
+        modelValue,
+        dropdownItems: computed(() => items),
+        widget: () =>
+          fromPartial<SimplifiedWidget<string | undefined>>({
+            name: 'test',
+            type: 'combo',
+            value: 'img_001.png'
+          }),
+        uploadFolder: () => 'input',
+        uploadSubfolder: () => undefined
+      })
+
+      updateSelectedItems(new Set(['input-1']))
+
+      expect(modelValue.value).toBe('photo_abc.jpg')
+      expect(mockCaptureCanvasState).toHaveBeenCalledOnce()
+    })
+
+    it('clears modelValue when empty set', () => {
+      const modelValue = ref<string | undefined>('img_001.png')
+      const items = createItems('img_001.png')
+      const { updateSelectedItems } = useWidgetSelectActions({
+        modelValue,
+        dropdownItems: computed(() => items),
+        widget: () =>
+          fromPartial<SimplifiedWidget<string | undefined>>({
+            name: 'test',
+            type: 'combo',
+            value: 'img_001.png'
+          }),
+        uploadFolder: () => 'input',
+        uploadSubfolder: () => undefined
+      })
+
+      updateSelectedItems(new Set())
+
+      expect(modelValue.value).toBeUndefined()
+      expect(mockCaptureCanvasState).toHaveBeenCalledOnce()
+    })
+  })
+
+  describe('handleFilesUpdate', () => {
+    it('uploads file and updates modelValue', async () => {
+      const { api } = await import('@/scripts/api')
+      vi.mocked(api.fetchApi).mockResolvedValue(
+        fromPartial<Response>({
+          status: 200,
+          json: () => Promise.resolve({ name: 'uploaded.png', subfolder: '' })
+        })
+      )
+
+      const modelValue = ref<string | undefined>('img_001.png')
+      const items = createItems('img_001.png')
+      const widgetValues = ['img_001.png']
+      const { handleFilesUpdate } = useWidgetSelectActions({
+        modelValue,
+        dropdownItems: computed(() => items),
+        widget: () =>
+          fromPartial<SimplifiedWidget<string | undefined>>({
+            name: 'test',
+            type: 'combo',
+            value: 'img_001.png',
+            options: { values: widgetValues }
+          }),
+        uploadFolder: () => 'input',
+        uploadSubfolder: () => undefined
+      })
+
+      const file = new File(['test'], 'uploaded.png', {
+        type: 'image/png'
+      })
+      await handleFilesUpdate([file])
+
+      expect(modelValue.value).toBe('uploaded.png')
+      expect(mockCaptureCanvasState).toHaveBeenCalledOnce()
+    })
+
+    it('adds uploaded path to widget values array', async () => {
+      const { api } = await import('@/scripts/api')
+      vi.mocked(api.fetchApi).mockResolvedValue(
+        fromPartial<Response>({
+          status: 200,
+          json: () => Promise.resolve({ name: 'new.png', subfolder: '' })
+        })
+      )
+
+      const modelValue = ref<string | undefined>()
+      const widgetValues = ['existing.png']
+      const { handleFilesUpdate } = useWidgetSelectActions({
+        modelValue,
+        dropdownItems: computed(() => []),
+        widget: () =>
+          fromPartial<SimplifiedWidget<string | undefined>>({
+            name: 'test',
+            type: 'combo',
+            options: { values: widgetValues }
+          }),
+        uploadFolder: () => 'input',
+        uploadSubfolder: () => undefined
+      })
+
+      await handleFilesUpdate([new File(['test'], 'new.png')])
+
+      expect(widgetValues).toContain('new.png')
+      expect(widgetValues).toHaveLength(2)
+    })
+
+    it('calls widget callback after upload', async () => {
+      const { api } = await import('@/scripts/api')
+      vi.mocked(api.fetchApi).mockResolvedValue(
+        fromPartial<Response>({
+          status: 200,
+          json: () => Promise.resolve({ name: 'uploaded.png', subfolder: '' })
+        })
+      )
+
+      const mockCallback = vi.fn()
+      const modelValue = ref<string | undefined>()
+      const { handleFilesUpdate } = useWidgetSelectActions({
+        modelValue,
+        dropdownItems: computed(() => []),
+        widget: () =>
+          fromPartial<SimplifiedWidget<string | undefined>>({
+            name: 'test',
+            type: 'combo',
+            callback: mockCallback,
+            options: { values: [] }
+          }),
+        uploadFolder: () => 'input',
+        uploadSubfolder: () => undefined
+      })
+
+      await handleFilesUpdate([new File(['test'], 'uploaded.png')])
+
+      expect(mockCallback).toHaveBeenCalledWith('uploaded.png')
+    })
+
+    it('shows alert toast on upload failure', async () => {
+      const { api } = await import('@/scripts/api')
+      vi.mocked(api.fetchApi).mockResolvedValue(
+        fromPartial<Response>({
+          status: 500,
+          statusText: 'Internal Server Error'
+        })
+      )
+
+      const modelValue = ref<string | undefined>('original.png')
+      const { handleFilesUpdate } = useWidgetSelectActions({
+        modelValue,
+        dropdownItems: computed(() => []),
+        widget: () =>
+          fromPartial<SimplifiedWidget<string | undefined>>({
+            name: 'test',
+            type: 'combo',
+            options: { values: [] }
+          }),
+        uploadFolder: () => 'input',
+        uploadSubfolder: () => undefined
+      })
+
+      await handleFilesUpdate([new File(['test'], 'fail.png')])
+
+      expect(modelValue.value).toBe('original.png')
+
+      const toastStore = useToastStore()
+      expect(toastStore.addAlert).toHaveBeenCalledWith(
+        '500 - Internal Server Error'
+      )
+    })
+  })
+})
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useWidgetSelectActions.ts b/src/renderer/extensions/vueNodes/widgets/composables/useWidgetSelectActions.ts
new file mode 100644
index 0000000000..122de798c4
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useWidgetSelectActions.ts
@@ -0,0 +1,120 @@
+import { toValue } from 'vue'
+import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue'
+
+import { useErrorHandling } from '@/composables/useErrorHandling'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import type { FormDropdownItem } from '@/renderer/extensions/vueNodes/widgets/components/form/dropdown/types'
+import type { ResultItemType } from '@/schemas/apiSchema'
+import { api } from '@/scripts/api'
+import { useAssetsStore } from '@/stores/assetsStore'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+interface UseWidgetSelectActionsOptions {
+  modelValue: Ref<string | undefined>
+  dropdownItems: ComputedRef<FormDropdownItem[]>
+  widget: MaybeRefOrGetter<SimplifiedWidget<string | undefined>>
+  uploadFolder: MaybeRefOrGetter<ResultItemType | undefined>
+  uploadSubfolder: MaybeRefOrGetter<string | undefined>
+}
+
+export function useWidgetSelectActions(options: UseWidgetSelectActionsOptions) {
+  const { modelValue, dropdownItems } = options
+  const toastStore = useToastStore()
+  const { wrapWithErrorHandlingAsync } = useErrorHandling()
+
+  function captureWorkflowState() {
+    useWorkflowStore().activeWorkflow?.changeTracker?.captureCanvasState()
+  }
+
+  function updateSelectedItems(selectedItems: Set<string>) {
+    const id =
+      selectedItems.size > 0 ? selectedItems.values().next().value : undefined
+    const name =
+      id == null
+        ? undefined
+        : dropdownItems.value.find((item) => item.id === id)?.name
+
+    modelValue.value = name
+    captureWorkflowState()
+  }
+
+  async function uploadFile(
+    file: File,
+    isPasted: boolean = false,
+    formFields: Partial<{ type: ResultItemType }> = {}
+  ) {
+    const body = new FormData()
+    body.append('image', file)
+    if (isPasted) body.append('subfolder', 'pasted')
+    else {
+      const subfolder = toValue(options.uploadSubfolder)
+      if (subfolder) body.append('subfolder', subfolder)
+    }
+    if (formFields.type) body.append('type', formFields.type)
+
+    const resp = await api.fetchApi('/upload/image', {
+      method: 'POST',
+      body
+    })
+
+    if (resp.status !== 200) {
+      toastStore.addAlert(resp.status + ' - ' + resp.statusText)
+      return null
+    }
+
+    const data = await resp.json()
+
+    if (formFields.type === 'input' || (!formFields.type && !isPasted)) {
+      const assetsStore = useAssetsStore()
+      await assetsStore.updateInputs()
+    }
+
+    return data.subfolder ? `${data.subfolder}/${data.name}` : data.name
+  }
+
+  async function uploadFiles(files: File[]): Promise<string[]> {
+    const folder = toValue(options.uploadFolder) ?? 'input'
+    const uploadPromises = files.map((file) =>
+      uploadFile(file, false, { type: folder })
+    )
+    const results = await Promise.all(uploadPromises)
+    return results.filter((path): path is string => path !== null)
+  }
+
+  const handleFilesUpdate = wrapWithErrorHandlingAsync(
+    async (files: File[]) => {
+      if (!files || files.length === 0) return
+
+      const uploadedPaths = await uploadFiles(files)
+
+      if (uploadedPaths.length === 0) {
+        toastStore.addAlert('File upload failed')
+        return
+      }
+
+      const widget = toValue(options.widget)
+      const values = widget.options?.values
+      if (Array.isArray(values)) {
+        uploadedPaths.forEach((path) => {
+          if (!values.includes(path)) {
+            values.push(path)
+          }
+        })
+      }
+
+      modelValue.value = uploadedPaths[0]
+
+      if (widget.callback) {
+        widget.callback(uploadedPaths[0])
+      }
+
+      captureWorkflowState()
+    }
+  )
+
+  return {
+    updateSelectedItems,
+    handleFilesUpdate
+  }
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useWidgetSelectItems.test.ts b/src/renderer/extensions/vueNodes/widgets/composables/useWidgetSelectItems.test.ts
new file mode 100644
index 0000000000..62d9d2d79e
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useWidgetSelectItems.test.ts
@@ -0,0 +1,668 @@
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { computed, nextTick, ref } from 'vue'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { useWidgetSelectItems } from '@/renderer/extensions/vueNodes/widgets/composables/useWidgetSelectItems'
+
+const mockAssetsData = vi.hoisted(() => ({ items: [] as AssetItem[] }))
+
+vi.mock(
+  '@/renderer/extensions/vueNodes/widgets/composables/useAssetWidgetData',
+  () => ({
+    useAssetWidgetData: () => ({
+      category: computed(() => 'checkpoints'),
+      assets: computed(() => mockAssetsData.items),
+      isLoading: computed(() => false),
+      error: computed(() => null)
+    })
+  })
+)
+
+const mockResolveOutputAssetItems = vi.fn()
+
+function createMockMediaAssets() {
+  return {
+    media: ref<AssetItem[]>([]),
+    loading: ref(false),
+    error: ref(null),
+    fetchMediaList: vi.fn().mockResolvedValue([]),
+    refresh: vi.fn().mockResolvedValue([]),
+    loadMore: vi.fn(),
+    hasMore: ref(false),
+    isLoadingMore: ref(false)
+  }
+}
+
+let mockMediaAssets = createMockMediaAssets()
+
+vi.mock('@/platform/assets/composables/media/useMediaAssets', () => ({
+  useMediaAssets: () => mockMediaAssets
+}))
+
+vi.mock('@/platform/assets/composables/useAssetFilterOptions', () => ({
+  useAssetFilterOptions: () => ({
+    ownershipOptions: computed(() => []),
+    availableBaseModels: computed(() => []),
+    availableFileFormats: computed(() => [])
+  })
+}))
+
+vi.mock('@/platform/assets/utils/outputAssetUtil', () => ({
+  resolveOutputAssetItems: (...args: unknown[]) =>
+    mockResolveOutputAssetItems(...args)
+}))
+
+function createDefaultOptions(
+  overrides: Partial<Parameters<typeof useWidgetSelectItems>[0]> = {}
+) {
+  return {
+    values: () => ['img_001.png', 'photo_abc.jpg', 'hash789.png'],
+    getOptionLabel: () =>
+      undefined as ((value?: string | null) => string) | undefined,
+    modelValue: ref<string | undefined>('img_001.png'),
+    assetKind: () => 'image' as const,
+    outputMediaAssets: mockMediaAssets,
+    assetData: null,
+    isAssetMode: () => false,
+    ...overrides
+  }
+}
+
+describe('display label behavior', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+  })
+
+  it('uses values as labels when no label function provided', () => {
+    const { dropdownItems } = useWidgetSelectItems(createDefaultOptions())
+    expect(dropdownItems.value[0]).toMatchObject({
+      name: 'img_001.png',
+      label: 'img_001.png'
+    })
+  })
+
+  it('applies custom label function', () => {
+    const getOptionLabel = (v?: string | null) => `Custom: ${v}`
+    const { dropdownItems } = useWidgetSelectItems(
+      createDefaultOptions({ getOptionLabel: () => getOptionLabel })
+    )
+    expect(dropdownItems.value[0].label).toBe('Custom: img_001.png')
+  })
+
+  it('falls back to value on label function error', () => {
+    const consoleWarnSpy = vi
+      .spyOn(console, 'warn')
+      .mockImplementation(() => {})
+    const getOptionLabel = (v?: string | null) => {
+      if (v === 'photo_abc.jpg') throw new Error('fail')
+      return `Labeled: ${v}`
+    }
+    const { dropdownItems } = useWidgetSelectItems(
+      createDefaultOptions({ getOptionLabel: () => getOptionLabel })
+    )
+    expect(dropdownItems.value[0].label).toBe('Labeled: img_001.png')
+    expect(dropdownItems.value[1].label).toBe('photo_abc.jpg')
+    expect(dropdownItems.value[2].label).toBe('Labeled: hash789.png')
+    expect(consoleWarnSpy).toHaveBeenCalled()
+    consoleWarnSpy.mockRestore()
+  })
+
+  it('falls back to value when label function returns empty string', () => {
+    const getOptionLabel = (v?: string | null) => {
+      if (v === 'photo_abc.jpg') return ''
+      return `Labeled: ${v}`
+    }
+    const { dropdownItems } = useWidgetSelectItems(
+      createDefaultOptions({ getOptionLabel: () => getOptionLabel })
+    )
+    expect(dropdownItems.value[1].label).toBe('photo_abc.jpg')
+  })
+
+  it('falls back to value when label function returns undefined', () => {
+    const getOptionLabel = (v?: string | null) => {
+      if (v === 'hash789.png') return undefined as unknown as string
+      return `Labeled: ${v}`
+    }
+    const { dropdownItems } = useWidgetSelectItems(
+      createDefaultOptions({ getOptionLabel: () => getOptionLabel })
+    )
+    expect(dropdownItems.value[2].label).toBe('hash789.png')
+  })
+})
+
+describe('useWidgetSelectItems', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    mockMediaAssets = createMockMediaAssets()
+    mockResolveOutputAssetItems.mockReset()
+    mockAssetsData.items = []
+  })
+
+  describe('dropdownItems', () => {
+    it('maps values to items with names as labels', () => {
+      const { dropdownItems } = useWidgetSelectItems(createDefaultOptions())
+      expect(dropdownItems.value).toHaveLength(3)
+      expect(dropdownItems.value[0]).toMatchObject({
+        name: 'img_001.png',
+        label: 'img_001.png'
+      })
+    })
+
+    it('returns empty when values is undefined and no modelValue', () => {
+      const { dropdownItems } = useWidgetSelectItems(
+        createDefaultOptions({
+          values: () => undefined,
+          modelValue: ref(undefined)
+        })
+      )
+      expect(dropdownItems.value).toHaveLength(0)
+    })
+  })
+
+  describe('missing value handling', () => {
+    it('creates fallback item when modelValue not in inputs', () => {
+      const { dropdownItems } = useWidgetSelectItems(
+        createDefaultOptions({
+          values: () => ['img_001.png', 'photo_abc.jpg'],
+          modelValue: ref('template_image.png')
+        })
+      )
+      expect(
+        dropdownItems.value.some((item) => item.name === 'template_image.png')
+      ).toBe(true)
+      expect(dropdownItems.value[0].id).toBe('missing-template_image.png')
+    })
+
+    it('does not include fallback when filter is inputs', async () => {
+      const { dropdownItems, filterSelected } = useWidgetSelectItems(
+        createDefaultOptions({
+          values: () => ['img_001.png', 'photo_abc.jpg'],
+          modelValue: ref('template_image.png')
+        })
+      )
+      filterSelected.value = 'inputs'
+      await nextTick()
+
+      expect(dropdownItems.value).toHaveLength(2)
+      expect(
+        dropdownItems.value.every(
+          (item) => !String(item.id).startsWith('missing-')
+        )
+      ).toBe(true)
+    })
+
+    it('does not include fallback when filter is outputs', async () => {
+      const { dropdownItems, filterSelected } = useWidgetSelectItems(
+        createDefaultOptions({
+          values: () => ['img_001.png', 'photo_abc.jpg'],
+          modelValue: ref('template_image.png')
+        })
+      )
+      filterSelected.value = 'outputs'
+      await nextTick()
+
+      expect(
+        dropdownItems.value.every(
+          (item) => !String(item.id).startsWith('missing-')
+        )
+      ).toBe(true)
+    })
+
+    it('no fallback when modelValue exists in inputs', () => {
+      const { dropdownItems } = useWidgetSelectItems(
+        createDefaultOptions({
+          values: () => ['img_001.png', 'photo_abc.jpg'],
+          modelValue: ref('img_001.png')
+        })
+      )
+      expect(dropdownItems.value).toHaveLength(2)
+      expect(
+        dropdownItems.value.every(
+          (item) => !String(item.id).startsWith('missing-')
+        )
+      ).toBe(true)
+    })
+
+    it('no fallback when modelValue is undefined', () => {
+      const { dropdownItems } = useWidgetSelectItems(
+        createDefaultOptions({
+          values: () => ['img_001.png', 'photo_abc.jpg'],
+          modelValue: ref(undefined)
+        })
+      )
+      expect(dropdownItems.value).toHaveLength(2)
+      expect(
+        dropdownItems.value.every(
+          (item) => !String(item.id).startsWith('missing-')
+        )
+      ).toBe(true)
+    })
+  })
+
+  describe('cloud asset mode', () => {
+    const createTestAsset = (
+      id: string,
+      name: string,
+      preview_url: string
+    ): AssetItem => ({
+      id,
+      name,
+      preview_url,
+      tags: []
+    })
+
+    it('excludes missing items from cloud dropdown', () => {
+      mockAssetsData.items = [
+        createTestAsset(
+          'asset-1',
+          'existing_model.safetensors',
+          'https://example.com/preview.jpg'
+        )
+      ]
+
+      const assetData = {
+        category: computed(() => 'checkpoints'),
+        assets: computed(() => mockAssetsData.items),
+        isLoading: computed(() => false),
+        error: computed(() => null)
+      }
+
+      const { dropdownItems } = useWidgetSelectItems(
+        createDefaultOptions({
+          values: () => [],
+          modelValue: ref('missing_model.safetensors'),
+          assetKind: () => 'model',
+          isAssetMode: () => true,
+          assetData
+        })
+      )
+
+      expect(dropdownItems.value).toHaveLength(1)
+      expect(dropdownItems.value[0].name).toBe('existing_model.safetensors')
+    })
+
+    it('shows only available cloud assets', () => {
+      mockAssetsData.items = [
+        createTestAsset(
+          'asset-1',
+          'model_a.safetensors',
+          'https://example.com/a.jpg'
+        ),
+        createTestAsset(
+          'asset-2',
+          'model_b.safetensors',
+          'https://example.com/b.jpg'
+        )
+      ]
+
+      const assetData = {
+        category: computed(() => 'checkpoints'),
+        assets: computed(() => mockAssetsData.items),
+        isLoading: computed(() => false),
+        error: computed(() => null)
+      }
+
+      const { dropdownItems } = useWidgetSelectItems(
+        createDefaultOptions({
+          values: () => [],
+          modelValue: ref('model_a.safetensors'),
+          assetKind: () => 'model',
+          isAssetMode: () => true,
+          assetData
+        })
+      )
+
+      expect(dropdownItems.value).toHaveLength(2)
+      expect(dropdownItems.value.map((i) => i.name)).toEqual([
+        'model_a.safetensors',
+        'model_b.safetensors'
+      ])
+    })
+
+    it('returns empty dropdown when no cloud assets', () => {
+      const assetData = {
+        category: computed(() => 'checkpoints'),
+        assets: computed(() => [] as AssetItem[]),
+        isLoading: computed(() => false),
+        error: computed(() => null)
+      }
+
+      const { dropdownItems } = useWidgetSelectItems(
+        createDefaultOptions({
+          values: () => [],
+          modelValue: ref('missing.safetensors'),
+          assetKind: () => 'model',
+          isAssetMode: () => true,
+          assetData
+        })
+      )
+
+      expect(dropdownItems.value).toHaveLength(0)
+    })
+
+    it('includes missing cloud asset in displayItems', () => {
+      mockAssetsData.items = [
+        createTestAsset(
+          'asset-1',
+          'existing_model.safetensors',
+          'https://example.com/preview.jpg'
+        )
+      ]
+
+      const assetData = {
+        category: computed(() => 'checkpoints'),
+        assets: computed(() => mockAssetsData.items),
+        isLoading: computed(() => false),
+        error: computed(() => null)
+      }
+
+      const { displayItems, selectedSet } = useWidgetSelectItems(
+        createDefaultOptions({
+          values: () => [],
+          modelValue: ref('missing_model.safetensors'),
+          assetKind: () => 'model',
+          isAssetMode: () => true,
+          assetData
+        })
+      )
+
+      expect(displayItems.value).toHaveLength(2)
+      expect(displayItems.value[0].name).toBe('missing_model.safetensors')
+      expect(displayItems.value[0].id).toBe('missing-missing_model.safetensors')
+      expect(selectedSet.value.has('missing-missing_model.safetensors')).toBe(
+        true
+      )
+    })
+  })
+
+  describe('multi-output jobs', () => {
+    function makeMultiOutputAsset(
+      jobId: string,
+      name: string,
+      nodeId: string,
+      outputCount: number
+    ) {
+      return {
+        id: jobId,
+        name,
+        preview_url: `/api/view?filename=${name}&type=output`,
+        tags: ['output'],
+        user_metadata: {
+          jobId,
+          nodeId,
+          subfolder: '',
+          outputCount,
+          allOutputs: [
+            {
+              filename: name,
+              subfolder: '',
+              type: 'output',
+              nodeId,
+              mediaType: 'images'
+            }
+          ]
+        }
+      }
+    }
+
+    it('shows all outputs after resolving multi-output jobs', async () => {
+      mockMediaAssets.media.value = [
+        makeMultiOutputAsset('job-1', 'preview.png', '5', 3)
+      ]
+
+      mockResolveOutputAssetItems.mockResolvedValue([
+        {
+          id: 'job-1-5-output_001.png',
+          name: 'output_001.png',
+          preview_url: '/api/view?filename=output_001.png&type=output',
+          tags: ['output']
+        },
+        {
+          id: 'job-1-5-output_002.png',
+          name: 'output_002.png',
+          preview_url: '/api/view?filename=output_002.png&type=output',
+          tags: ['output']
+        },
+        {
+          id: 'job-1-5-output_003.png',
+          name: 'output_003.png',
+          preview_url: '/api/view?filename=output_003.png&type=output',
+          tags: ['output']
+        }
+      ])
+
+      const { dropdownItems, filterSelected } = useWidgetSelectItems(
+        createDefaultOptions({
+          values: () => [],
+          modelValue: ref('output_001.png')
+        })
+      )
+      filterSelected.value = 'outputs'
+
+      await vi.waitFor(() => {
+        expect(dropdownItems.value).toHaveLength(3)
+      })
+
+      expect(dropdownItems.value.map((i) => i.name)).toEqual([
+        'output_001.png [output]',
+        'output_002.png [output]',
+        'output_003.png [output]'
+      ])
+    })
+
+    it('shows preview when job has only one output', async () => {
+      mockMediaAssets.media.value = [
+        makeMultiOutputAsset('job-2', 'single.png', '3', 1)
+      ]
+
+      const { dropdownItems, filterSelected } = useWidgetSelectItems(
+        createDefaultOptions({
+          values: () => [],
+          modelValue: ref('single.png')
+        })
+      )
+      filterSelected.value = 'outputs'
+      await nextTick()
+
+      expect(dropdownItems.value).toHaveLength(1)
+      expect(dropdownItems.value[0].name).toBe('single.png [output]')
+      expect(mockResolveOutputAssetItems).not.toHaveBeenCalled()
+    })
+
+    it('resolves two multi-output jobs independently', async () => {
+      mockMediaAssets.media.value = [
+        makeMultiOutputAsset('job-A', 'previewA.png', '1', 2),
+        makeMultiOutputAsset('job-B', 'previewB.png', '2', 2)
+      ]
+
+      mockResolveOutputAssetItems.mockImplementation(
+        async (meta: { jobId: string }) => {
+          if (meta.jobId === 'job-A') {
+            return [
+              {
+                id: 'A-1',
+                name: 'a1.png',
+                preview_url: '',
+                tags: ['output']
+              },
+              {
+                id: 'A-2',
+                name: 'a2.png',
+                preview_url: '',
+                tags: ['output']
+              }
+            ]
+          }
+          return [
+            {
+              id: 'B-1',
+              name: 'b1.png',
+              preview_url: '',
+              tags: ['output']
+            },
+            {
+              id: 'B-2',
+              name: 'b2.png',
+              preview_url: '',
+              tags: ['output']
+            }
+          ]
+        }
+      )
+
+      const { dropdownItems, filterSelected } = useWidgetSelectItems(
+        createDefaultOptions({
+          values: () => [],
+          modelValue: ref(undefined)
+        })
+      )
+      filterSelected.value = 'outputs'
+
+      await vi.waitFor(() => {
+        expect(dropdownItems.value).toHaveLength(4)
+      })
+
+      const names = dropdownItems.value.map((i) => i.name)
+      expect(names).toContain('a1.png [output]')
+      expect(names).toContain('a2.png [output]')
+      expect(names).toContain('b1.png [output]')
+      expect(names).toContain('b2.png [output]')
+    })
+
+    it('resolves outputs when allOutputs already contains all items', async () => {
+      mockMediaAssets.media.value = [
+        {
+          id: 'job-complete',
+          name: 'preview.png',
+          preview_url: '/api/view?filename=preview.png&type=output',
+          tags: ['output'],
+          user_metadata: {
+            jobId: 'job-complete',
+            nodeId: '1',
+            subfolder: '',
+            outputCount: 2,
+            allOutputs: [
+              {
+                filename: 'out1.png',
+                subfolder: '',
+                type: 'output',
+                nodeId: '1',
+                mediaType: 'images'
+              },
+              {
+                filename: 'out2.png',
+                subfolder: '',
+                type: 'output',
+                nodeId: '1',
+                mediaType: 'images'
+              }
+            ]
+          }
+        }
+      ]
+
+      mockResolveOutputAssetItems.mockResolvedValue([
+        {
+          id: 'c-1',
+          name: 'out1.png',
+          preview_url: '',
+          tags: ['output']
+        },
+        {
+          id: 'c-2',
+          name: 'out2.png',
+          preview_url: '',
+          tags: ['output']
+        }
+      ])
+
+      const { dropdownItems, filterSelected } = useWidgetSelectItems(
+        createDefaultOptions({
+          values: () => [],
+          modelValue: ref(undefined)
+        })
+      )
+      filterSelected.value = 'outputs'
+
+      await vi.waitFor(() => {
+        expect(dropdownItems.value).toHaveLength(2)
+      })
+
+      expect(mockResolveOutputAssetItems).toHaveBeenCalledWith(
+        expect.objectContaining({ jobId: 'job-complete' }),
+        expect.any(Object)
+      )
+      const names = dropdownItems.value.map((i) => i.name)
+      expect(names).toEqual(['out1.png [output]', 'out2.png [output]'])
+    })
+
+    it('falls back to preview when resolver rejects', async () => {
+      const consoleWarnSpy = vi
+        .spyOn(console, 'warn')
+        .mockImplementation(() => {})
+
+      mockMediaAssets.media.value = [
+        makeMultiOutputAsset('job-fail', 'preview.png', '1', 3)
+      ]
+      mockResolveOutputAssetItems.mockRejectedValue(new Error('network error'))
+
+      const { dropdownItems, filterSelected } = useWidgetSelectItems(
+        createDefaultOptions({
+          values: () => [],
+          modelValue: ref(undefined)
+        })
+      )
+      filterSelected.value = 'outputs'
+
+      await vi.waitFor(() => {
+        expect(consoleWarnSpy).toHaveBeenCalledWith(
+          'Failed to resolve multi-output job',
+          'job-fail',
+          expect.any(Error)
+        )
+      })
+
+      expect(dropdownItems.value).toHaveLength(1)
+      expect(dropdownItems.value[0].name).toBe('preview.png [output]')
+      consoleWarnSpy.mockRestore()
+    })
+  })
+
+  describe('selectedSet', () => {
+    beforeEach(() => {
+      setActivePinia(createTestingPinia({ stubActions: false }))
+    })
+
+    it('returns empty set when modelValue is undefined', () => {
+      const { selectedSet } = useWidgetSelectItems(
+        createDefaultOptions({
+          modelValue: ref(undefined)
+        })
+      )
+      expect(selectedSet.value.size).toBe(0)
+    })
+
+    it('returns set with matching item id when modelValue matches', () => {
+      const { selectedSet } = useWidgetSelectItems(
+        createDefaultOptions({
+          modelValue: ref('img_001.png')
+        })
+      )
+      expect(selectedSet.value.size).toBe(1)
+      expect(selectedSet.value.has('input-0')).toBe(true)
+    })
+
+    it('returns set with missing item id when modelValue matches no input', () => {
+      const { selectedSet } = useWidgetSelectItems(
+        createDefaultOptions({
+          modelValue: ref('nonexistent.png'),
+          values: () => ['img_001.png']
+        })
+      )
+      expect(selectedSet.value.size).toBe(1)
+      expect(selectedSet.value.has('missing-nonexistent.png')).toBe(true)
+    })
+  })
+})
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useWidgetSelectItems.ts b/src/renderer/extensions/vueNodes/widgets/composables/useWidgetSelectItems.ts
new file mode 100644
index 0000000000..127f9f1d6e
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useWidgetSelectItems.ts
@@ -0,0 +1,314 @@
+import { capitalize } from 'es-toolkit'
+import { computed, ref, shallowRef, toValue, watch } from 'vue'
+import type { MaybeRefOrGetter, Ref } from 'vue'
+
+import { appendCloudResParam } from '@/platform/distribution/cloudPreviewUtil'
+import { useAssetFilterOptions } from '@/platform/assets/composables/useAssetFilterOptions'
+import {
+  filterItemByBaseModels,
+  filterItemByOwnership
+} from '@/platform/assets/utils/assetFilterUtils'
+import {
+  getAssetBaseModels,
+  getAssetDisplayName,
+  getAssetFilename
+} from '@/platform/assets/utils/assetMetadataUtils'
+import type {
+  FilterOption,
+  OwnershipOption
+} from '@/platform/assets/types/filterTypes'
+import type { FormDropdownItem } from '@/renderer/extensions/vueNodes/widgets/components/form/dropdown/types'
+import type { useAssetWidgetData } from '@/renderer/extensions/vueNodes/widgets/composables/useAssetWidgetData'
+import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { resolveOutputAssetItems } from '@/platform/assets/utils/outputAssetUtil'
+import type { useMediaAssets } from '@/platform/assets/composables/media/useMediaAssets'
+import type { AssetKind } from '@/types/widgetTypes'
+import { getMediaTypeFromFilename } from '@/utils/formatUtil'
+
+function getDisplayLabel(
+  value: string,
+  getOptionLabel?: ((value?: string | null) => string) | undefined
+): string {
+  if (!getOptionLabel) return value
+
+  try {
+    return getOptionLabel(value) || value
+  } catch (e) {
+    console.warn('Failed to map value:', e)
+    return value
+  }
+}
+
+function assetKindToMediaType(kind: AssetKind): string {
+  return kind === 'mesh' ? '3D' : kind
+}
+
+function getMediaUrl(
+  filename: string,
+  type: 'input' | 'output',
+  assetKind: AssetKind | undefined
+): string {
+  if (!['image', 'video', 'audio', 'mesh'].includes(assetKind ?? '')) return ''
+  const params = new URLSearchParams({ filename, type })
+  appendCloudResParam(params, filename)
+  return `/api/view?${params}`
+}
+
+interface UseWidgetSelectItemsOptions {
+  values: MaybeRefOrGetter<unknown[] | undefined>
+  getOptionLabel: MaybeRefOrGetter<
+    ((value?: string | null) => string) | undefined
+  >
+  modelValue: Ref<string | undefined>
+  assetKind: MaybeRefOrGetter<AssetKind | undefined>
+  outputMediaAssets: ReturnType<typeof useMediaAssets>
+  assetData: ReturnType<typeof useAssetWidgetData> | null
+  isAssetMode: MaybeRefOrGetter<boolean | undefined>
+}
+
+export function useWidgetSelectItems(options: UseWidgetSelectItemsOptions) {
+  const { modelValue, outputMediaAssets, assetData } = options
+
+  const filterSelected = ref('all')
+  const filterOptions = computed<FilterOption[]>(() => {
+    const isAsset = toValue(options.isAssetMode)
+    if (isAsset) {
+      const categoryName = assetData?.category.value ?? 'All'
+      return [{ name: capitalize(categoryName), value: 'all' }]
+    }
+    return [
+      { name: 'All', value: 'all' },
+      { name: 'Inputs', value: 'inputs' },
+      { name: 'Outputs', value: 'outputs' }
+    ]
+  })
+
+  const ownershipSelected = ref<OwnershipOption>('all')
+  const showOwnershipFilter = computed(() => !!toValue(options.isAssetMode))
+
+  const { ownershipOptions, availableBaseModels } = useAssetFilterOptions(
+    () => assetData?.assets.value ?? []
+  )
+
+  const baseModelSelected = ref<Set<string>>(new Set())
+  const showBaseModelFilter = computed(() => !!toValue(options.isAssetMode))
+  const baseModelOptions = computed<FilterOption[]>(() => {
+    if (!toValue(options.isAssetMode) || !assetData) return []
+    return availableBaseModels.value
+  })
+
+  const resolvedByJobId = shallowRef(new Map<string, AssetItem[]>())
+  const pendingJobIds = new Set<string>()
+
+  watch(
+    () => outputMediaAssets.media.value,
+    (assets, _, onCleanup) => {
+      let cancelled = false
+      onCleanup(() => {
+        cancelled = true
+        pendingJobIds.clear()
+      })
+
+      for (const asset of assets) {
+        const meta = getOutputAssetMetadata(asset.user_metadata)
+        if (!meta) continue
+
+        const outputCount = meta.outputCount ?? meta.allOutputs?.length ?? 0
+        if (
+          outputCount <= 1 ||
+          resolvedByJobId.value.has(meta.jobId) ||
+          pendingJobIds.has(meta.jobId)
+        )
+          continue
+
+        pendingJobIds.add(meta.jobId)
+        void resolveOutputAssetItems(meta, { createdAt: asset.created_at })
+          .then((resolved) => {
+            if (cancelled || !resolved.length) return
+            const next = new Map(resolvedByJobId.value)
+            next.set(meta.jobId, resolved)
+            resolvedByJobId.value = next
+          })
+          .catch((error) => {
+            console.warn(
+              'Failed to resolve multi-output job',
+              meta.jobId,
+              error
+            )
+          })
+          .finally(() => {
+            pendingJobIds.delete(meta.jobId)
+          })
+      }
+    },
+    { immediate: true }
+  )
+
+  const inputItems = computed<FormDropdownItem[]>(() => {
+    const values = toValue(options.values) || []
+    if (!Array.isArray(values)) return []
+
+    const labelFn = toValue(options.getOptionLabel)
+    const kind = toValue(options.assetKind)
+    return values.map((value, index) => ({
+      id: `input-${index}`,
+      preview_url: getMediaUrl(String(value), 'input', kind),
+      name: String(value),
+      label: getDisplayLabel(String(value), labelFn)
+    }))
+  })
+
+  const outputItems = computed<FormDropdownItem[]>(() => {
+    const kind = toValue(options.assetKind)
+    if (!['image', 'video', 'audio', 'mesh'].includes(kind ?? '')) return []
+
+    const targetMediaType = assetKindToMediaType(kind!)
+    const seen = new Set<string>()
+    const items: FormDropdownItem[] = []
+    const labelFn = toValue(options.getOptionLabel)
+
+    const assets = outputMediaAssets.media.value.flatMap((asset) => {
+      const meta = getOutputAssetMetadata(asset.user_metadata)
+      const resolved = meta ? resolvedByJobId.value.get(meta.jobId) : undefined
+      return resolved ?? [asset]
+    })
+
+    for (const asset of assets) {
+      if (getMediaTypeFromFilename(asset.name) !== targetMediaType) continue
+      if (seen.has(asset.id)) continue
+      seen.add(asset.id)
+      const annotatedPath = `${asset.name} [output]`
+      items.push({
+        id: `output-${asset.id}`,
+        preview_url:
+          asset.preview_url || getMediaUrl(asset.name, 'output', kind),
+        name: annotatedPath,
+        label: getDisplayLabel(annotatedPath, labelFn)
+      })
+    }
+
+    return items
+  })
+
+  const missingValueItem = computed<FormDropdownItem | undefined>(() => {
+    const currentValue = modelValue.value
+    if (!currentValue) return undefined
+    const labelFn = toValue(options.getOptionLabel)
+    const kind = toValue(options.assetKind)
+
+    if (toValue(options.isAssetMode) && assetData) {
+      const existsInAssets = assetData.assets.value.some(
+        (asset) => getAssetFilename(asset) === currentValue
+      )
+      if (existsInAssets) return undefined
+
+      return {
+        id: `missing-${currentValue}`,
+        preview_url: '',
+        name: currentValue,
+        label: getDisplayLabel(currentValue, labelFn)
+      }
+    }
+
+    const existsInInputs = inputItems.value.some(
+      (item) => item.name === currentValue
+    )
+    const existsInOutputs = outputItems.value.some(
+      (item) => item.name === currentValue
+    )
+
+    if (existsInInputs || existsInOutputs) return undefined
+
+    const isOutput = currentValue.endsWith(' [output]')
+    const strippedValue = isOutput
+      ? currentValue.replace(' [output]', '')
+      : currentValue
+
+    return {
+      id: `missing-${currentValue}`,
+      preview_url: getMediaUrl(
+        strippedValue,
+        isOutput ? 'output' : 'input',
+        kind
+      ),
+      name: currentValue,
+      label: getDisplayLabel(currentValue, labelFn)
+    }
+  })
+
+  const assetItems = computed<FormDropdownItem[]>(() => {
+    if (!toValue(options.isAssetMode) || !assetData) return []
+    return assetData.assets.value.map((asset) => ({
+      id: asset.id,
+      name: getAssetFilename(asset),
+      label: getAssetDisplayName(asset),
+      preview_url: asset.preview_url,
+      is_immutable: asset.is_immutable,
+      base_models: getAssetBaseModels(asset)
+    }))
+  })
+
+  const filteredAssetItems = computed<FormDropdownItem[]>(() =>
+    filterItemByBaseModels(
+      filterItemByOwnership(assetItems.value, ownershipSelected.value),
+      baseModelSelected.value
+    )
+  )
+
+  const allItems = computed<FormDropdownItem[]>(() => {
+    if (toValue(options.isAssetMode) && assetData) {
+      return filteredAssetItems.value
+    }
+    return [
+      ...(missingValueItem.value ? [missingValueItem.value] : []),
+      ...inputItems.value,
+      ...outputItems.value
+    ]
+  })
+
+  const dropdownItems = computed<FormDropdownItem[]>(() => {
+    if (toValue(options.isAssetMode)) {
+      return allItems.value
+    }
+
+    switch (filterSelected.value) {
+      case 'inputs':
+        return inputItems.value
+      case 'outputs':
+        return outputItems.value
+      case 'all':
+      default:
+        return allItems.value
+    }
+  })
+
+  const displayItems = computed<FormDropdownItem[]>(() => {
+    if (toValue(options.isAssetMode) && assetData && missingValueItem.value) {
+      return [missingValueItem.value, ...filteredAssetItems.value]
+    }
+    return dropdownItems.value
+  })
+
+  const selectedSet = computed<Set<string>>(() => {
+    const currentValue = modelValue.value
+    if (currentValue === undefined) return new Set()
+
+    const item = displayItems.value.find((item) => item.name === currentValue)
+    return item ? new Set([item.id]) : new Set()
+  })
+
+  return {
+    dropdownItems,
+    displayItems,
+    filterSelected,
+    filterOptions,
+    ownershipSelected,
+    showOwnershipFilter,
+    ownershipOptions,
+    baseModelSelected,
+    showBaseModelFilter,
+    baseModelOptions,
+    selectedSet
+  }
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts b/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts
index e7635e3a6c..4b14b41ac1 100644
--- a/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts
+++ b/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts
@@ -63,6 +63,9 @@ const WidgetCurve = defineAsyncComponent(
 const WidgetPainter = defineAsyncComponent(
   () => import('@/components/painter/WidgetPainter.vue')
 )
+const WidgetRange = defineAsyncComponent(
+  () => import('@/components/range/WidgetRange.vue')
+)
 
 export const FOR_TESTING = {
   WidgetButton,
@@ -197,6 +200,14 @@ const coreWidgetDefinitions: Array<[string, WidgetDefinition]> = [
       aliases: ['PAINTER'],
       essential: false
     }
+  ],
+  [
+    'range',
+    {
+      component: WidgetRange,
+      aliases: ['RANGE'],
+      essential: false
+    }
   ]
 ]
 
@@ -233,7 +244,9 @@ const EXPANDING_TYPES = [
   'markdown',
   'load3D',
   'curve',
-  'painter'
+  'painter',
+  'imagecompare',
+  'range'
 ] as const
 
 export function shouldExpand(type: string): boolean {
diff --git a/src/renderer/glsl/glslPreviewUtils.ts b/src/renderer/glsl/glslPreviewUtils.ts
new file mode 100644
index 0000000000..345de51895
--- /dev/null
+++ b/src/renderer/glsl/glslPreviewUtils.ts
@@ -0,0 +1,40 @@
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import { SUBGRAPH_INPUT_ID } from '@/lib/litegraph/src/constants'
+
+export const GLSL_NODE_TYPE = 'GLSLShader'
+export const DEBOUNCE_MS = 50
+export const DEFAULT_SIZE = 512
+const MAX_PREVIEW_DIMENSION = 1024
+
+export function normalizeDimension(value: unknown): number {
+  const parsed = Number(value)
+  if (!Number.isFinite(parsed) || parsed <= 0) return DEFAULT_SIZE
+  return parsed
+}
+
+export function clampResolution(w: number, h: number): [number, number] {
+  const maxDim = Math.max(w, h)
+  if (maxDim <= MAX_PREVIEW_DIMENSION) return [w, h]
+  const scale = MAX_PREVIEW_DIMENSION / maxDim
+  return [Math.round(w * scale), Math.round(h * scale)]
+}
+
+export function getImageThroughSubgraphBoundary(
+  node: LGraphNode,
+  slot: number,
+  ownerSubgraphNode: LGraphNode
+): HTMLImageElement | undefined {
+  const graph = node.graph
+  if (!graph) return undefined
+
+  const input = node.inputs[slot]
+  if (input?.link == null) return undefined
+
+  const link = graph._links.get(input.link)
+  if (!link || link.origin_id !== SUBGRAPH_INPUT_ID) return undefined
+
+  const outerUpstream = ownerSubgraphNode.getInputNode(link.origin_slot)
+  if (!outerUpstream?.imgs?.length) return undefined
+
+  return outerUpstream.imgs[0]
+}
diff --git a/src/renderer/glsl/useGLSLPreview.test.ts b/src/renderer/glsl/useGLSLPreview.test.ts
new file mode 100644
index 0000000000..7e7a448520
--- /dev/null
+++ b/src/renderer/glsl/useGLSLPreview.test.ts
@@ -0,0 +1,367 @@
+import { fromAny } from '@total-typescript/shoehorn'
+import { createPinia, setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick, reactive, ref, shallowRef } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { GLSLRendererConfig } from '@/renderer/glsl/useGLSLRenderer'
+import { useGLSLPreview } from '@/renderer/glsl/useGLSLPreview'
+import { useWidgetValueStore } from '@/stores/widgetValueStore'
+
+type WidgetValueStoreStub = {
+  _widgetMap: Map<string, { value: unknown }>
+}
+
+const mockRendererFactory = vi.hoisted(() => {
+  const init = vi.fn(() => true)
+  const compileFragment = vi.fn(() => ({ success: true, log: '' }))
+  const setResolution = vi.fn()
+  const setFloatUniform = vi.fn()
+  const setIntUniform = vi.fn()
+  const setBoolUniform = vi.fn()
+  const bindCurveTexture = vi.fn()
+  const bindInputImage = vi.fn()
+  const render = vi.fn()
+  const toBlob = vi.fn(() => Promise.resolve(new Blob(['test'])))
+  const dispose = vi.fn()
+  const lastConfig = { value: undefined as GLSLRendererConfig | undefined }
+
+  return {
+    create: (config?: GLSLRendererConfig) => {
+      lastConfig.value = config
+      return {
+        init,
+        compileFragment,
+        setResolution,
+        setFloatUniform,
+        setIntUniform,
+        setBoolUniform,
+        bindCurveTexture,
+        bindInputImage,
+        render,
+        toBlob,
+        dispose
+      }
+    },
+    lastConfig,
+    init,
+    compileFragment,
+    setResolution,
+    setFloatUniform,
+    setIntUniform,
+    setBoolUniform,
+    bindCurveTexture,
+    bindInputImage,
+    render,
+    toBlob,
+    dispose
+  }
+})
+
+vi.mock('@/renderer/glsl/useGLSLRenderer', () => ({
+  useGLSLRenderer: (config?: GLSLRendererConfig) =>
+    mockRendererFactory.create(config)
+}))
+
+const mockSetNodePreviewsByNodeId = vi.fn()
+const mockNodeOutputs = reactive<Record<string, unknown>>({})
+
+vi.mock('@/stores/nodeOutputStore', () => ({
+  useNodeOutputStore: () => ({
+    setNodePreviewsByNodeId: mockSetNodePreviewsByNodeId,
+    setNodePreviewsByLocatorId: vi.fn(),
+    revokePreviewsByLocatorId: vi.fn(),
+    nodeOutputs: mockNodeOutputs
+  })
+}))
+
+vi.mock('@/stores/widgetValueStore', () => {
+  const widgetMap = new Map<string, { value: unknown }>()
+  const getWidget = vi.fn((_graphId: string, _nodeId: string, name: string) =>
+    widgetMap.get(name)
+  )
+  return {
+    useWidgetValueStore: () => ({
+      getWidget,
+      _widgetMap: widgetMap
+    })
+  }
+})
+
+vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
+  useWorkflowStore: () => ({
+    nodeIdToNodeLocatorId: (id: string | number) => String(id),
+    nodeToNodeLocatorId: (node: { id: string | number }) => String(node.id)
+  })
+}))
+
+vi.mock('@/utils/objectUrlUtil', () => ({
+  createSharedObjectUrl: () => 'blob:test',
+  releaseSharedObjectUrl: vi.fn()
+}))
+
+function createMockNode(overrides: Record<string, unknown> = {}): LGraphNode {
+  const graph = { id: 'test-graph-id', rootGraph: { id: 'test-graph-id' } }
+  return fromAny<LGraphNode, unknown>({
+    id: 1,
+    type: 'GLSLShader',
+    inputs: [],
+    graph,
+    getInputNode: vi.fn(() => null),
+    isSubgraphNode: () => false,
+    ...overrides
+  })
+}
+
+function wrapNode(
+  node: LGraphNode | null
+): MaybeRefOrGetter<LGraphNode | null> {
+  return ref(node) as MaybeRefOrGetter<LGraphNode | null>
+}
+
+describe('useGLSLPreview', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.clearAllMocks()
+    mockRendererFactory.lastConfig.value = undefined
+    globalThis.URL.createObjectURL = vi.fn(() => 'blob:test')
+    globalThis.URL.revokeObjectURL = vi.fn()
+  })
+
+  it('does not activate for non-GLSLShader nodes', () => {
+    const node = createMockNode({ type: 'KSampler' })
+    const { isActive } = useGLSLPreview(wrapNode(node))
+    expect(isActive.value).toBe(false)
+  })
+
+  it('does not activate before first execution', () => {
+    const node = createMockNode()
+    Object.keys(mockNodeOutputs).forEach((k) => delete mockNodeOutputs[k])
+    const { isActive } = useGLSLPreview(wrapNode(node))
+    expect(isActive.value).toBe(false)
+  })
+
+  it('activates for GLSLShader nodes with execution output', () => {
+    const node = createMockNode()
+    mockNodeOutputs['1'] = {
+      images: [{ filename: 'test.png', subfolder: '', type: 'temp' }]
+    }
+    const { isActive } = useGLSLPreview(wrapNode(node))
+    expect(isActive.value).toBe(true)
+  })
+
+  it('exposes lastError as null initially', () => {
+    const node = createMockNode()
+    const { lastError } = useGLSLPreview(wrapNode(node))
+    expect(lastError.value).toBe(null)
+  })
+
+  it('does not activate for null node', () => {
+    const { isActive } = useGLSLPreview(wrapNode(null))
+    expect(isActive.value).toBe(false)
+  })
+
+  it('cleans up on dispose', () => {
+    const node = createMockNode()
+    const { dispose } = useGLSLPreview(wrapNode(node))
+    expect(() => dispose()).not.toThrow()
+  })
+
+  describe('autogrow config extraction', () => {
+    beforeEach(() => {
+      vi.useFakeTimers()
+    })
+
+    afterEach(() => {
+      vi.useRealTimers()
+    })
+
+    async function triggerRender(node: LGraphNode) {
+      mockNodeOutputs[String(node.id)] = {
+        images: [{ filename: 'test.png', subfolder: '', type: 'temp' }]
+      }
+      const store = fromAny<WidgetValueStoreStub, unknown>(
+        useWidgetValueStore()
+      )
+      store._widgetMap.set('fragment_shader', {
+        value: 'void main() {}'
+      })
+
+      const nodeRef = shallowRef<LGraphNode | null>(null)
+      useGLSLPreview(nodeRef)
+
+      nodeRef.value = node
+      await nextTick()
+      vi.advanceTimersByTime(100)
+      await nextTick()
+    }
+
+    it('passes default config when node has no comfyDynamic', async () => {
+      const node = createMockNode()
+      await triggerRender(node)
+
+      expect(mockRendererFactory.lastConfig.value).toEqual({
+        maxInputs: 5,
+        maxFloatUniforms: 20,
+        maxIntUniforms: 20,
+        maxBoolUniforms: 10,
+        maxCurves: 4
+      })
+    })
+
+    it('extracts autogrow limits from node comfyDynamic', async () => {
+      const node = createMockNode({
+        comfyDynamic: {
+          autogrow: {
+            images: { min: 1, max: 3 },
+            floats: { min: 0, max: 8 },
+            ints: { min: 0, max: 4 }
+          }
+        }
+      })
+      await triggerRender(node)
+
+      expect(mockRendererFactory.lastConfig.value).toEqual({
+        maxInputs: 3,
+        maxFloatUniforms: 8,
+        maxIntUniforms: 4,
+        maxBoolUniforms: 10,
+        maxCurves: 4
+      })
+    })
+  })
+
+  describe('render pipeline', () => {
+    beforeEach(() => {
+      vi.useFakeTimers()
+    })
+
+    afterEach(() => {
+      vi.useRealTimers()
+    })
+
+    async function setupAndRender(node: LGraphNode) {
+      mockNodeOutputs[String(node.id)] = {
+        images: [{ filename: 'test.png', subfolder: '', type: 'temp' }]
+      }
+      const store = fromAny<WidgetValueStoreStub, unknown>(
+        useWidgetValueStore()
+      )
+      store._widgetMap.set('fragment_shader', {
+        value: 'void main() {}'
+      })
+
+      const nodeRef = shallowRef<LGraphNode | null>(null)
+      const result = useGLSLPreview(nodeRef)
+
+      nodeRef.value = node
+      await nextTick()
+      vi.advanceTimersByTime(100)
+      await nextTick()
+      // Allow async renderPreview to complete
+      await nextTick()
+
+      return result
+    }
+
+    it('calls compileFragment, render, and toBlob in sequence', async () => {
+      const node = createMockNode()
+      await setupAndRender(node)
+
+      expect(mockRendererFactory.compileFragment).toHaveBeenCalledWith(
+        'void main() {}'
+      )
+      expect(mockRendererFactory.render).toHaveBeenCalled()
+      expect(mockRendererFactory.toBlob).toHaveBeenCalled()
+
+      const compileOrder =
+        mockRendererFactory.compileFragment.mock.invocationCallOrder[0]
+      const renderOrder = mockRendererFactory.render.mock.invocationCallOrder[0]
+      const toBlobOrder = mockRendererFactory.toBlob.mock.invocationCallOrder[0]
+      expect(compileOrder).toBeLessThan(renderOrder)
+      expect(renderOrder).toBeLessThan(toBlobOrder)
+    })
+
+    it('sets lastError on compilation failure', async () => {
+      mockRendererFactory.compileFragment.mockReturnValueOnce({
+        success: false,
+        log: 'syntax error at line 5'
+      })
+
+      const node = createMockNode()
+      const { lastError } = await setupAndRender(node)
+
+      expect(lastError.value).toBe('syntax error at line 5')
+    })
+
+    it('clears lastError on successful compilation', async () => {
+      const node = createMockNode()
+      const { lastError } = await setupAndRender(node)
+
+      expect(lastError.value).toBe(null)
+    })
+
+    it('skips render when shader source is unavailable', async () => {
+      const store = fromAny<WidgetValueStoreStub, unknown>(
+        useWidgetValueStore()
+      )
+      store._widgetMap.delete('fragment_shader')
+
+      const node = createMockNode()
+      mockNodeOutputs[String(node.id)] = {
+        images: [{ filename: 'test.png', subfolder: '', type: 'temp' }]
+      }
+
+      const nodeRef = shallowRef<LGraphNode | null>(null)
+      useGLSLPreview(nodeRef)
+      nodeRef.value = node
+      await nextTick()
+      vi.advanceTimersByTime(100)
+      await nextTick()
+
+      expect(mockRendererFactory.compileFragment).not.toHaveBeenCalled()
+    })
+
+    it('uses custom resolution when size_mode is custom', async () => {
+      const store = fromAny<WidgetValueStoreStub, unknown>(
+        useWidgetValueStore()
+      )
+      store._widgetMap.set('size_mode', { value: 'custom' })
+      store._widgetMap.set('size_mode.width', { value: 800 })
+      store._widgetMap.set('size_mode.height', { value: 600 })
+
+      const node = createMockNode()
+      await setupAndRender(node)
+
+      expect(mockRendererFactory.setResolution).toHaveBeenCalledWith(800, 600)
+
+      store._widgetMap.delete('size_mode')
+      store._widgetMap.delete('size_mode.width')
+      store._widgetMap.delete('size_mode.height')
+    })
+
+    it('uses default resolution when size_mode is not custom', async () => {
+      const store = fromAny<WidgetValueStoreStub, unknown>(
+        useWidgetValueStore()
+      )
+      store._widgetMap.set('size_mode', { value: 'from_input' })
+
+      const node = createMockNode()
+      await setupAndRender(node)
+
+      expect(mockRendererFactory.setResolution).toHaveBeenCalledWith(512, 512)
+
+      store._widgetMap.delete('size_mode')
+    })
+
+    it('disposes renderer and cancels debounce on cleanup', async () => {
+      const node = createMockNode()
+      const { dispose } = await setupAndRender(node)
+
+      dispose()
+
+      expect(mockRendererFactory.dispose).toHaveBeenCalled()
+    })
+  })
+})
diff --git a/src/renderer/glsl/useGLSLPreview.ts b/src/renderer/glsl/useGLSLPreview.ts
new file mode 100644
index 0000000000..adca88ddda
--- /dev/null
+++ b/src/renderer/glsl/useGLSLPreview.ts
@@ -0,0 +1,516 @@
+import { debounce } from 'es-toolkit/compat'
+import { computed, effectScope, onScopeDispose, ref, toValue, watch } from 'vue'
+
+import type { ComputedRef, EffectScope, MaybeRefOrGetter, Ref } from 'vue'
+import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode'
+import type { Subgraph } from '@/lib/litegraph/src/subgraph/Subgraph'
+import type { UUID } from '@/lib/litegraph/src/utils/uuid'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useNodeOutputStore } from '@/stores/nodeOutputStore'
+import { useWidgetValueStore } from '@/stores/widgetValueStore'
+
+import { curveDataToFloatLUT } from '@/components/curve/curveUtils'
+import type { GLSLRendererConfig } from '@/renderer/glsl/useGLSLRenderer'
+import { useGLSLRenderer } from '@/renderer/glsl/useGLSLRenderer'
+import {
+  extractUniformSources,
+  getAutogrowLimits,
+  useGLSLUniforms
+} from '@/renderer/glsl/useGLSLUniforms'
+import {
+  createSharedObjectUrl,
+  releaseSharedObjectUrl
+} from '@/utils/objectUrlUtil'
+
+import {
+  clampResolution,
+  DEBOUNCE_MS,
+  DEFAULT_SIZE,
+  getImageThroughSubgraphBoundary,
+  GLSL_NODE_TYPE,
+  normalizeDimension
+} from '@/renderer/glsl/glslPreviewUtils'
+
+/**
+ * Two-tier composable for GLSL live preview.
+ *
+ * Outer tier (always created): only 2 cheap computed refs to detect
+ * whether the node is GLSL-related. For non-GLSL nodes this is the
+ * only cost — no watchers, store subscriptions, or renderer.
+ *
+ * Inner tier (lazy): created via effectScope when the node is detected
+ * as a GLSLShader or a subgraph containing one. Contains all the
+ * expensive logic: store reads, watchers, debounce, WebGL renderer.
+ */
+export function useGLSLPreview(
+  nodeMaybe: MaybeRefOrGetter<LGraphNode | null | undefined>
+) {
+  const lastError = ref<string | null>(null)
+
+  const nodeRef = computed(() => toValue(nodeMaybe) ?? null)
+
+  const isGLSLNode = computed(() => nodeRef.value?.type === GLSL_NODE_TYPE)
+
+  const isGLSLSubgraphNode = computed(() => {
+    const node = nodeRef.value
+    if (!node?.isSubgraphNode()) return false
+    const subgraph = node.subgraph as Subgraph | undefined
+    return subgraph?.nodes.some((n) => n.type === GLSL_NODE_TYPE) ?? false
+  })
+
+  const isGLSLRelated = computed(
+    () => isGLSLNode.value || isGLSLSubgraphNode.value
+  )
+
+  let innerScope: EffectScope | null = null
+  let innerDispose: (() => void) | null = null
+  const isActive = ref(false)
+
+  watch(
+    isGLSLRelated,
+    (related) => {
+      if (related && !innerScope) {
+        innerScope = effectScope()
+        innerDispose = innerScope.run(() =>
+          createInnerPreview(
+            nodeRef,
+            isGLSLNode,
+            isGLSLSubgraphNode,
+            lastError,
+            isActive
+          )
+        )!
+      } else if (!related && innerScope) {
+        innerDispose?.()
+        innerScope.stop()
+        innerScope = null
+        innerDispose = null
+        isActive.value = false
+      }
+    },
+    { immediate: true }
+  )
+
+  onScopeDispose(() => {
+    innerDispose?.()
+    innerScope?.stop()
+  })
+
+  return {
+    isActive: computed(() => isActive.value),
+    lastError,
+    dispose() {
+      innerDispose?.()
+      innerScope?.stop()
+      innerScope = null
+      innerDispose = null
+    }
+  }
+}
+
+/**
+ * Inner tier: all expensive GLSL preview logic.
+ * Runs inside its own effectScope so it can be created/destroyed
+ * independently of the component lifecycle.
+ * Returns a dispose function.
+ */
+function createInnerPreview(
+  nodeRef: ComputedRef<LGraphNode | null>,
+  isGLSLNode: ComputedRef<boolean>,
+  isGLSLSubgraphNode: ComputedRef<boolean>,
+  lastError: Ref<string | null>,
+  isActiveOut: Ref<boolean>
+): () => void {
+  const widgetValueStore = useWidgetValueStore()
+  const nodeOutputStore = useNodeOutputStore()
+  const { nodeToNodeLocatorId } = useWorkflowStore()
+
+  let renderer: ReturnType<typeof useGLSLRenderer> | null = null
+  let rendererReady = false
+  let renderRequestId = 0
+
+  const innerGLSLNode = (() => {
+    const node = nodeRef.value
+    if (!node?.isSubgraphNode()) return null
+    const subgraph = node.subgraph as Subgraph | undefined
+    return subgraph?.nodes.find((n) => n.type === GLSL_NODE_TYPE) ?? null
+  })()
+
+  const ownerSubgraphNode = (() => {
+    const node = nodeRef.value
+    const graph = node?.graph
+    if (!graph) return null
+    const rootGraph = graph.rootGraph
+    if (!rootGraph || graph === rootGraph) return null
+
+    return (
+      rootGraph._nodes?.find(
+        (n) => n.isSubgraphNode() && n.subgraph === graph
+      ) ?? null
+    )
+  })()
+
+  const graphId = computed(
+    () => nodeRef.value?.graph?.rootGraph?.id as UUID | undefined
+  )
+
+  const nodeId = computed(() => nodeRef.value?.id as NodeId | undefined)
+
+  const hasExecutionOutput = computed(() => {
+    const node = nodeRef.value
+    if (!node) return false
+
+    const outputs = nodeOutputStore.nodeOutputs
+
+    const locatorId = nodeToNodeLocatorId(node)
+    if (outputs[locatorId]?.images?.length) return true
+
+    const inner = innerGLSLNode
+    if (inner) {
+      const innerLocatorId = nodeToNodeLocatorId(inner)
+      if (outputs[innerLocatorId]?.images?.length) return true
+    }
+
+    return false
+  })
+
+  const shouldRender = computed(
+    () =>
+      (isGLSLNode.value || isGLSLSubgraphNode.value) && hasExecutionOutput.value
+  )
+
+  watch(
+    shouldRender,
+    (v) => {
+      isActiveOut.value = v
+    },
+    { immediate: true }
+  )
+
+  const shaderSource = computed(() => {
+    const gId = graphId.value
+    if (!gId) return undefined
+
+    if (isGLSLNode.value) {
+      const nId = nodeId.value
+      if (nId == null) return undefined
+      return widgetValueStore.getWidget(gId, nId, 'fragment_shader')?.value as
+        | string
+        | undefined
+    }
+
+    const inner = innerGLSLNode
+    if (inner) {
+      return widgetValueStore.getWidget(
+        gId,
+        inner.id as NodeId,
+        'fragment_shader'
+      )?.value as string | undefined
+    }
+
+    return undefined
+  })
+
+  const rendererConfig = computed(() => {
+    const inner = innerGLSLNode
+    if (inner) return getAutogrowLimits(inner)
+
+    const node = nodeRef.value
+    if (!node)
+      return {
+        maxInputs: 5,
+        maxFloatUniforms: 20,
+        maxIntUniforms: 20,
+        maxBoolUniforms: 10,
+        maxCurves: 4
+      }
+    return getAutogrowLimits(node)
+  })
+
+  const uniformSources = computed(() => {
+    const node = nodeRef.value
+    const inner = innerGLSLNode
+    if (!node?.isSubgraphNode() || !inner) return null
+    return extractUniformSources(inner, node.subgraph as Subgraph)
+  })
+
+  const { floatValues, intValues, boolValues, curveValues } = useGLSLUniforms(
+    graphId,
+    nodeId,
+    nodeRef,
+    uniformSources,
+    rendererConfig
+  )
+
+  function loadInputImages(): void {
+    const node = nodeRef.value
+    if (!node?.inputs || !renderer) return
+
+    if (isGLSLSubgraphNode.value) {
+      let imageSlotIndex = 0
+      for (let slot = 0; slot < node.inputs.length; slot++) {
+        if (node.inputs[slot].type !== 'IMAGE') continue
+        const upstreamNode = node.getInputNode(slot)
+        if (upstreamNode?.imgs?.length) {
+          renderer.bindInputImage(imageSlotIndex, upstreamNode.imgs[0])
+        }
+        imageSlotIndex++
+      }
+      return
+    }
+
+    let imageSlotIndex = 0
+    for (let slot = 0; slot < node.inputs.length; slot++) {
+      const input = node.inputs[slot]
+      if (!input.name.startsWith('images.image')) continue
+
+      const upstreamNode = node.getInputNode(slot)
+      if (upstreamNode?.imgs?.length) {
+        renderer.bindInputImage(imageSlotIndex, upstreamNode.imgs[0])
+        imageSlotIndex++
+        continue
+      }
+
+      const owner = ownerSubgraphNode
+      if (owner) {
+        const img = getImageThroughSubgraphBoundary(node, slot, owner)
+        if (img) {
+          renderer.bindInputImage(imageSlotIndex, img)
+        }
+      }
+      imageSlotIndex++
+    }
+  }
+
+  function getCustomResolution(): [number, number] | null {
+    const gId = graphId.value
+    if (!gId) return null
+
+    const sizeModeNodeId = innerGLSLNode
+      ? (innerGLSLNode.id as NodeId)
+      : nodeId.value
+    if (sizeModeNodeId == null) return null
+
+    const sizeMode = widgetValueStore.getWidget(
+      gId,
+      sizeModeNodeId,
+      'size_mode'
+    )
+    if (sizeMode?.value !== 'custom') return null
+
+    const widthWidget = widgetValueStore.getWidget(
+      gId,
+      sizeModeNodeId,
+      'size_mode.width'
+    )
+    const heightWidget = widgetValueStore.getWidget(
+      gId,
+      sizeModeNodeId,
+      'size_mode.height'
+    )
+    if (!widthWidget || !heightWidget) return null
+
+    return clampResolution(
+      normalizeDimension(widthWidget.value),
+      normalizeDimension(heightWidget.value)
+    )
+  }
+
+  function getResolution(): [number, number] {
+    const custom = getCustomResolution()
+    if (custom) return custom
+
+    const node = nodeRef.value
+    if (!node?.inputs) return [DEFAULT_SIZE, DEFAULT_SIZE]
+
+    if (isGLSLSubgraphNode.value) {
+      for (let slot = 0; slot < node.inputs.length; slot++) {
+        if (node.inputs[slot].type !== 'IMAGE') continue
+        const upstreamNode = node.getInputNode(slot)
+        if (!upstreamNode?.imgs?.length) continue
+        const img = upstreamNode.imgs[0]
+        return clampResolution(
+          img.naturalWidth || DEFAULT_SIZE,
+          img.naturalHeight || DEFAULT_SIZE
+        )
+      }
+      return [DEFAULT_SIZE, DEFAULT_SIZE]
+    }
+
+    for (let slot = 0; slot < node.inputs.length; slot++) {
+      const input = node.inputs[slot]
+      if (!input.name.startsWith('images.image')) continue
+
+      const upstreamNode = node.getInputNode(slot)
+      if (upstreamNode?.imgs?.length) {
+        const img = upstreamNode.imgs[0]
+        return clampResolution(
+          img.naturalWidth || DEFAULT_SIZE,
+          img.naturalHeight || DEFAULT_SIZE
+        )
+      }
+
+      const owner = ownerSubgraphNode
+      if (owner) {
+        const img = getImageThroughSubgraphBoundary(node, slot, owner)
+        if (img) {
+          return clampResolution(
+            img.naturalWidth || DEFAULT_SIZE,
+            img.naturalHeight || DEFAULT_SIZE
+          )
+        }
+      }
+    }
+
+    return [DEFAULT_SIZE, DEFAULT_SIZE]
+  }
+
+  let disposed = false
+  let lastRendererConfig: GLSLRendererConfig | null = null
+
+  function ensureRenderer(): ReturnType<typeof useGLSLRenderer> {
+    const config = rendererConfig.value
+    if (renderer && lastRendererConfig) {
+      const changed =
+        config.maxInputs !== lastRendererConfig.maxInputs ||
+        config.maxFloatUniforms !== lastRendererConfig.maxFloatUniforms ||
+        config.maxIntUniforms !== lastRendererConfig.maxIntUniforms ||
+        config.maxBoolUniforms !== lastRendererConfig.maxBoolUniforms ||
+        config.maxCurves !== lastRendererConfig.maxCurves
+      if (changed) {
+        renderer.dispose()
+        renderer = null
+        rendererReady = false
+      }
+    }
+    if (!renderer) {
+      renderer = useGLSLRenderer(config)
+      lastRendererConfig = { ...config }
+    }
+    return renderer
+  }
+
+  async function renderPreview(): Promise<void> {
+    const requestId = ++renderRequestId
+    const source = shaderSource.value
+    if (!source || !shouldRender.value) return
+
+    const r = ensureRenderer()
+
+    try {
+      if (!rendererReady) {
+        const [w, h] = getResolution()
+        if (!r.init(w, h)) {
+          lastError.value = 'WebGL2 not available'
+          return
+        }
+        rendererReady = true
+      }
+
+      const result = r.compileFragment(source)
+      if (!result.success) {
+        lastError.value = result.log
+        return
+      }
+      lastError.value = null
+
+      const [w, h] = getResolution()
+      r.setResolution(w, h)
+
+      loadInputImages()
+
+      for (let i = 0; i < floatValues.value.length; i++) {
+        r.setFloatUniform(i, floatValues.value[i])
+      }
+      for (let i = 0; i < intValues.value.length; i++) {
+        r.setIntUniform(i, intValues.value[i])
+      }
+      for (let i = 0; i < boolValues.value.length; i++) {
+        r.setBoolUniform(i, boolValues.value[i])
+      }
+      const curves = curveValues.value
+      for (let i = 0; i < curves.length; i++) {
+        r.bindCurveTexture(i, curveDataToFloatLUT(curves[i]))
+      }
+
+      r.render()
+
+      const blob = await r.toBlob()
+      if (requestId !== renderRequestId || disposed) return
+      const blobUrl = createSharedObjectUrl(blob)
+      try {
+        const inner = innerGLSLNode
+        if (inner) {
+          const innerLocatorId = nodeToNodeLocatorId(inner)
+          nodeOutputStore.setNodePreviewsByLocatorId(innerLocatorId, [blobUrl])
+        } else {
+          const nId = nodeId.value
+          if (nId != null) {
+            nodeOutputStore.setNodePreviewsByNodeId(nId, [blobUrl])
+          }
+        }
+      } finally {
+        releaseSharedObjectUrl(blobUrl)
+      }
+    } catch (error) {
+      if (requestId !== renderRequestId) return
+      lastError.value =
+        error instanceof Error ? error.message : 'Failed to render preview'
+    }
+  }
+
+  const debouncedRender = debounce((): void => {
+    void renderPreview()
+  }, DEBOUNCE_MS)
+
+  watch(
+    shouldRender,
+    (active) => {
+      if (isGLSLNode.value) {
+        const node = nodeRef.value
+        if (node) node.hideOutputImages = active
+      }
+      if (active) debouncedRender()
+    },
+    { immediate: true }
+  )
+
+  watch(
+    () =>
+      [
+        floatValues.value,
+        intValues.value,
+        boolValues.value,
+        curveValues.value
+      ] as const,
+    () => {
+      if (shouldRender.value) debouncedRender()
+    },
+    { deep: true }
+  )
+
+  watch(shaderSource, () => {
+    if (shouldRender.value) debouncedRender()
+  })
+
+  // Return dispose function for the inner tier
+  return () => {
+    disposed = true
+    debouncedRender.cancel()
+    renderer?.dispose()
+    renderer = null
+
+    // Revoke preview blob URLs to avoid memory leaks
+    const inner = innerGLSLNode
+    if (inner) {
+      const locatorId = nodeToNodeLocatorId(inner)
+      nodeOutputStore.revokePreviewsByLocatorId(locatorId)
+    } else {
+      const nId = nodeId.value
+      if (nId != null) {
+        const locatorId = nodeToNodeLocatorId(nodeRef.value!)
+        nodeOutputStore.revokePreviewsByLocatorId(locatorId)
+      }
+    }
+  }
+}
diff --git a/src/renderer/glsl/useGLSLRenderer.test.ts b/src/renderer/glsl/useGLSLRenderer.test.ts
new file mode 100644
index 0000000000..077061f216
--- /dev/null
+++ b/src/renderer/glsl/useGLSLRenderer.test.ts
@@ -0,0 +1,61 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import type { GLSLRendererConfig } from '@/renderer/glsl/useGLSLRenderer'
+
+vi.mock('vue', async () => {
+  const actual = await vi.importActual('vue')
+  return {
+    ...actual,
+    onScopeDispose: vi.fn()
+  }
+})
+
+describe('useGLSLRenderer', () => {
+  it('returns renderer API with expected methods', async () => {
+    const { useGLSLRenderer } = await import('@/renderer/glsl/useGLSLRenderer')
+    const renderer = useGLSLRenderer()
+
+    expect(renderer).toHaveProperty('init')
+    expect(renderer).toHaveProperty('compileFragment')
+    expect(renderer).toHaveProperty('setResolution')
+    expect(renderer).toHaveProperty('setFloatUniform')
+    expect(renderer).toHaveProperty('setIntUniform')
+    expect(renderer).toHaveProperty('bindInputImage')
+    expect(renderer).toHaveProperty('render')
+    expect(renderer).toHaveProperty('readPixels')
+    expect(renderer).toHaveProperty('toBlob')
+    expect(renderer).toHaveProperty('dispose')
+  })
+
+  it('init returns false when WebGL2 is unavailable', async () => {
+    const { useGLSLRenderer } = await import('@/renderer/glsl/useGLSLRenderer')
+    const renderer = useGLSLRenderer()
+    expect(renderer.init(256, 256)).toBe(false)
+  })
+
+  it('compileFragment reports error before initialization', async () => {
+    const { useGLSLRenderer } = await import('@/renderer/glsl/useGLSLRenderer')
+    const renderer = useGLSLRenderer()
+    const result = renderer.compileFragment('void main() {}')
+    expect(result.success).toBe(false)
+  })
+
+  it('toBlob rejects before initialization', async () => {
+    const { useGLSLRenderer } = await import('@/renderer/glsl/useGLSLRenderer')
+    const renderer = useGLSLRenderer()
+    await expect(renderer.toBlob()).rejects.toThrow('Renderer not initialized')
+  })
+
+  it('accepts custom config without error', async () => {
+    const { useGLSLRenderer } = await import('@/renderer/glsl/useGLSLRenderer')
+    const config: GLSLRendererConfig = {
+      maxInputs: 3,
+      maxFloatUniforms: 2,
+      maxIntUniforms: 1,
+      maxBoolUniforms: 1,
+      maxCurves: 2
+    }
+    const renderer = useGLSLRenderer(config)
+    expect(renderer.init(256, 256)).toBe(false)
+  })
+})
diff --git a/src/renderer/glsl/useGLSLRenderer.ts b/src/renderer/glsl/useGLSLRenderer.ts
index d6cb02698f..aef7321512 100644
--- a/src/renderer/glsl/useGLSLRenderer.ts
+++ b/src/renderer/glsl/useGLSLRenderer.ts
@@ -1,5 +1,3 @@
-import { onScopeDispose } from 'vue'
-
 import { detectPassCount } from '@/renderer/glsl/glslUtils'
 
 const VERTEX_SHADER_SOURCE = `#version 300 es
@@ -17,12 +15,16 @@ export interface GLSLRendererConfig {
   maxInputs: number
   maxFloatUniforms: number
   maxIntUniforms: number
+  maxBoolUniforms: number
+  maxCurves: number
 }
 
 const DEFAULT_CONFIG: GLSLRendererConfig = {
   maxInputs: 5,
-  maxFloatUniforms: 5,
-  maxIntUniforms: 5
+  maxFloatUniforms: 20,
+  maxIntUniforms: 20,
+  maxBoolUniforms: 10,
+  maxCurves: 4
 }
 
 interface CompileResult {
@@ -50,15 +52,22 @@ function compileShader(
 }
 
 export function useGLSLRenderer(config: GLSLRendererConfig = DEFAULT_CONFIG) {
-  const { maxInputs, maxFloatUniforms, maxIntUniforms } = config
+  const {
+    maxInputs,
+    maxFloatUniforms,
+    maxIntUniforms,
+    maxBoolUniforms,
+    maxCurves
+  } = config
 
   const uniformNames = [
     'u_resolution',
     'u_pass',
-    'u_prevPass',
     ...Array.from({ length: maxInputs }, (_, i) => `u_image${i}`),
     ...Array.from({ length: maxFloatUniforms }, (_, i) => `u_float${i}`),
-    ...Array.from({ length: maxIntUniforms }, (_, i) => `u_int${i}`)
+    ...Array.from({ length: maxIntUniforms }, (_, i) => `u_int${i}`),
+    ...Array.from({ length: maxBoolUniforms }, (_, i) => `u_bool${i}`),
+    ...Array.from({ length: maxCurves }, (_, i) => `u_curve${i}`)
   ]
 
   let canvas: OffscreenCanvas | null = null
@@ -72,9 +81,13 @@ export function useGLSLRenderer(config: GLSLRendererConfig = DEFAULT_CONFIG) {
   const inputTextures: (WebGLTexture | null)[] = Array.from<null>({
     length: maxInputs
   }).fill(null)
+  const curveTextures: (WebGLTexture | null)[] = Array.from<null>({
+    length: maxCurves
+  }).fill(null)
   const uniformLocations = new Map<string, WebGLUniformLocation | null>()
   let passCount = 1
   let disposed = false
+  let lastCompiledSource: string | null = null
 
   function initPingPongFBOs(
     ctx: WebGL2RenderingContext,
@@ -92,12 +105,12 @@ export function useGLSLRenderer(config: GLSLRendererConfig = DEFAULT_CONFIG) {
         ctx.texImage2D(
           ctx.TEXTURE_2D,
           0,
-          ctx.RGBA8,
+          ctx.RGBA16F,
           width,
           height,
           0,
           ctx.RGBA,
-          ctx.UNSIGNED_BYTE,
+          ctx.HALF_FLOAT,
           null
         )
         ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MIN_FILTER, ctx.LINEAR)
@@ -191,6 +204,9 @@ export function useGLSLRenderer(config: GLSLRendererConfig = DEFAULT_CONFIG) {
       if (!ctx) return false
 
       gl = ctx
+
+      if (!gl.getExtension('EXT_color_buffer_float')) return false
+
       gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true)
       vertexShader = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER_SOURCE)
       initPingPongFBOs(gl, width, height)
@@ -206,6 +222,11 @@ export function useGLSLRenderer(config: GLSLRendererConfig = DEFAULT_CONFIG) {
 
     passCount = Math.min(detectPassCount(source), MAX_PASSES)
 
+    if (source === lastCompiledSource && program) {
+      return { success: true, log: '' }
+    }
+    lastCompiledSource = source
+
     if (fragmentShader) {
       gl.deleteShader(fragmentShader)
       fragmentShader = null
@@ -270,6 +291,51 @@ export function useGLSLRenderer(config: GLSLRendererConfig = DEFAULT_CONFIG) {
     }
   }
 
+  function setBoolUniform(index: number, value: boolean): void {
+    if (disposed || !program || !gl) return
+    const loc = uniformLocations.get(`u_bool${index}`)
+    if (loc != null) {
+      gl.useProgram(program)
+      gl.uniform1i(loc, value ? 1 : 0)
+    }
+  }
+
+  function bindCurveTexture(index: number, lut: Float32Array): void {
+    if (disposed || !gl) return
+    if (index < 0 || index >= maxCurves) return
+
+    if (curveTextures[index]) {
+      gl.deleteTexture(curveTextures[index])
+      curveTextures[index] = null
+    }
+
+    const texture = gl.createTexture()
+    if (!texture) return
+
+    const unit = maxInputs + index
+    gl.activeTexture(gl.TEXTURE0 + unit)
+    gl.bindTexture(gl.TEXTURE_2D, texture)
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false)
+    gl.texImage2D(
+      gl.TEXTURE_2D,
+      0,
+      gl.R16F,
+      lut.length,
+      1,
+      0,
+      gl.RED,
+      gl.FLOAT,
+      lut
+    )
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true)
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
+
+    curveTextures[index] = texture
+  }
+
   function bindInputImage(
     index: number,
     image: HTMLImageElement | ImageBitmap
@@ -304,6 +370,7 @@ export function useGLSLRenderer(config: GLSLRendererConfig = DEFAULT_CONFIG) {
     if (disposed || !program || !pingPongFBOs || !gl || !canvas) return
 
     gl.useProgram(program)
+    gl.disable(gl.BLEND)
 
     const resLoc = uniformLocations.get('u_resolution')
     if (resLoc != null) {
@@ -319,8 +386,15 @@ export function useGLSLRenderer(config: GLSLRendererConfig = DEFAULT_CONFIG) {
       }
     }
 
-    const prevPassUnit = maxInputs
-    const prevPassLoc = uniformLocations.get('u_prevPass')
+    for (let i = 0; i < maxCurves; i++) {
+      const loc = uniformLocations.get(`u_curve${i}`)
+      if (loc != null && curveTextures[i]) {
+        const unit = maxInputs + i
+        gl.activeTexture(gl.TEXTURE0 + unit)
+        gl.bindTexture(gl.TEXTURE_2D, curveTextures[i])
+        gl.uniform1i(loc, unit)
+      }
+    }
 
     for (let pass = 0; pass < passCount; pass++) {
       const passLoc = uniformLocations.get('u_pass')
@@ -328,31 +402,26 @@ export function useGLSLRenderer(config: GLSLRendererConfig = DEFAULT_CONFIG) {
 
       const isLastPass = pass === passCount - 1
       const writeIdx = pass % 2
-      const readIdx = 1 - writeIdx
 
       if (isLastPass) {
         gl.bindFramebuffer(gl.FRAMEBUFFER, null)
-      } else {
-        gl.bindFramebuffer(gl.FRAMEBUFFER, pingPongFBOs[writeIdx])
-      }
-
-      // Note: u_prevPass uses ping-pong FBOs rather than overwriting the input
-      // texture in-place as the backend does for single-input iteration.
-      if (pass > 0 && prevPassLoc != null) {
-        gl.activeTexture(gl.TEXTURE0 + prevPassUnit)
-        gl.bindTexture(gl.TEXTURE_2D, pingPongTextures![readIdx])
-        gl.uniform1i(prevPassLoc, prevPassUnit)
-      }
-
-      // Ping-pong FBOs have a single color attachment, so intermediate
-      // passes always target COLOR_ATTACHMENT0. MRT is only possible on
-      // the default framebuffer (last pass).
-      if (isLastPass) {
         gl.drawBuffers([gl.BACK])
       } else {
+        gl.bindFramebuffer(gl.FRAMEBUFFER, pingPongFBOs[writeIdx])
         gl.drawBuffers([gl.COLOR_ATTACHMENT0])
       }
 
+      // Match backend behavior: pass > 0 binds previous pass output to
+      // texture unit 0, overriding u_image0 so shaders read the previous
+      // pass result via the same sampler.
+      if (pass > 0) {
+        const sourceTexture = pingPongTextures![(pass - 1) % 2]
+        gl.activeTexture(gl.TEXTURE0)
+        gl.bindTexture(gl.TEXTURE_2D, sourceTexture)
+      }
+
+      gl.clearColor(0, 0, 0, 0)
+      gl.clear(gl.COLOR_BUFFER_BIT)
       gl.drawArrays(gl.TRIANGLES, 0, 3)
     }
   }
@@ -371,7 +440,7 @@ export function useGLSLRenderer(config: GLSLRendererConfig = DEFAULT_CONFIG) {
 
   async function toBlob(): Promise<Blob> {
     if (!canvas) throw new Error('Renderer not initialized')
-    return canvas.convertToBlob({ type: 'image/jpeg', quality: 0.92 })
+    return canvas.convertToBlob({ type: 'image/webp', quality: 0.92 })
   }
 
   function dispose(): void {
@@ -384,6 +453,11 @@ export function useGLSLRenderer(config: GLSLRendererConfig = DEFAULT_CONFIG) {
     }
     inputTextures.fill(null)
 
+    for (const tex of curveTextures) {
+      if (tex) gl.deleteTexture(tex)
+    }
+    curveTextures.fill(null)
+
     if (fallbackTexture) {
       gl.deleteTexture(fallbackTexture)
       fallbackTexture = null
@@ -411,14 +485,14 @@ export function useGLSLRenderer(config: GLSLRendererConfig = DEFAULT_CONFIG) {
     ext?.loseContext()
   }
 
-  onScopeDispose(dispose)
-
   return {
     init,
     compileFragment,
     setResolution,
     setFloatUniform,
     setIntUniform,
+    setBoolUniform,
+    bindCurveTexture,
     bindInputImage,
     render,
     readPixels,
diff --git a/src/renderer/glsl/useGLSLUniforms.test.ts b/src/renderer/glsl/useGLSLUniforms.test.ts
new file mode 100644
index 0000000000..8099953c5e
--- /dev/null
+++ b/src/renderer/glsl/useGLSLUniforms.test.ts
@@ -0,0 +1,115 @@
+import { fromAny } from '@total-typescript/shoehorn'
+import { describe, expect, it } from 'vitest'
+
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { Subgraph } from '@/lib/litegraph/src/subgraph/Subgraph'
+
+import {
+  extractUniformSources,
+  toNumber
+} from '@/renderer/glsl/useGLSLUniforms'
+
+function createMockSubgraph(
+  links: Record<number, { origin_id: number; origin_slot: number }>,
+  nodes: Record<
+    number,
+    { id: number; widgets: Array<{ name: string; value: unknown }> }
+  >
+) {
+  return fromAny<Subgraph, unknown>({
+    getLink: (id: number) => links[id] ?? null,
+    getNodeById: (id: number) => nodes[id] ?? null
+  })
+}
+
+describe('extractUniformSources', () => {
+  it('uses origin_slot to select the correct widget from source node', () => {
+    const glslNode = fromAny<LGraphNode, unknown>({
+      inputs: [
+        { name: 'ints.u_int0', link: 1 },
+        { name: 'ints.u_int1', link: 2 }
+      ]
+    })
+
+    const subgraph = createMockSubgraph(
+      {
+        1: { origin_id: 10, origin_slot: 1 },
+        2: { origin_id: 20, origin_slot: 0 }
+      },
+      {
+        10: {
+          id: 10,
+          widgets: [
+            { name: 'choice', value: 'Master' },
+            { name: 'index', value: 0 }
+          ]
+        },
+        20: {
+          id: 20,
+          widgets: [{ name: 'value', value: 42 }]
+        }
+      }
+    )
+
+    const result = extractUniformSources(glslNode, subgraph)
+
+    expect(result.ints[0].widgetName).toBe('index')
+    expect(result.ints[1].widgetName).toBe('value')
+  })
+
+  it('skips source when origin_slot exceeds widget count', () => {
+    const glslNode = fromAny<LGraphNode, unknown>({
+      inputs: [{ name: 'floats.u_float0', link: 1 }]
+    })
+
+    const subgraph = createMockSubgraph(
+      { 1: { origin_id: 10, origin_slot: 5 } },
+      { 10: { id: 10, widgets: [{ name: 'value', value: 3.14 }] } }
+    )
+
+    const result = extractUniformSources(glslNode, subgraph)
+
+    expect(result.floats).toHaveLength(0)
+  })
+
+  it('provides directValue getter that reads from the widget', () => {
+    const indexWidget = {
+      name: 'index',
+      get value() {
+        return choiceWidget.value === 'Reds' ? 1 : 0
+      }
+    }
+    const choiceWidget = { name: 'choice', value: 'Master' }
+
+    const glslNode = fromAny<LGraphNode, unknown>({
+      inputs: [{ name: 'ints.u_int0', link: 1 }]
+    })
+
+    const subgraph = createMockSubgraph(
+      { 1: { origin_id: 10, origin_slot: 1 } },
+      { 10: { id: 10, widgets: [choiceWidget, indexWidget] } }
+    )
+
+    const result = extractUniformSources(glslNode, subgraph)
+
+    expect(result.ints[0].directValue()).toBe(0)
+
+    choiceWidget.value = 'Reds'
+    expect(result.ints[0].directValue()).toBe(1)
+  })
+})
+
+describe('toNumber', () => {
+  it('coerces hex color strings via hexToInt', () => {
+    expect(toNumber('#45edf5')).toBe(0x45edf5)
+  })
+
+  it('coerces plain numeric values', () => {
+    expect(toNumber(42)).toBe(42)
+    expect(toNumber('10')).toBe(10)
+  })
+
+  it('returns 0 for non-numeric strings', () => {
+    expect(toNumber('Master')).toBe(0)
+  })
+})
diff --git a/src/renderer/glsl/useGLSLUniforms.ts b/src/renderer/glsl/useGLSLUniforms.ts
new file mode 100644
index 0000000000..874d09cae0
--- /dev/null
+++ b/src/renderer/glsl/useGLSLUniforms.ts
@@ -0,0 +1,262 @@
+import { computed } from 'vue'
+
+import type { ComputedRef } from 'vue'
+import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode'
+import { SUBGRAPH_INPUT_ID } from '@/lib/litegraph/src/constants'
+import type { Subgraph } from '@/lib/litegraph/src/subgraph/Subgraph'
+import type { UUID } from '@/lib/litegraph/src/utils/uuid'
+import { useWidgetValueStore } from '@/stores/widgetValueStore'
+
+import { isCurveData } from '@/components/curve/curveUtils'
+import type { CurveData } from '@/components/curve/types'
+import type { GLSLRendererConfig } from '@/renderer/glsl/useGLSLRenderer'
+import { hexToInt } from '@/utils/colorUtil'
+
+interface AutogrowGroup {
+  max: number
+  min: number
+  prefix?: string
+}
+
+interface UniformSource {
+  nodeId: NodeId
+  widgetName: string
+  /** Fallback getter for widgets not registered in widgetValueStore (e.g. hidden computed widgets). */
+  directValue: () => unknown
+}
+
+interface UniformSources {
+  floats: UniformSource[]
+  ints: UniformSource[]
+  bools: UniformSource[]
+  curves: UniformSource[]
+}
+
+export function getAutogrowLimits(node: LGraphNode): GLSLRendererConfig {
+  const defaults: GLSLRendererConfig = {
+    maxInputs: 5,
+    maxFloatUniforms: 20,
+    maxIntUniforms: 20,
+    maxBoolUniforms: 10,
+    maxCurves: 4
+  }
+
+  if (!('comfyDynamic' in node)) return defaults
+
+  const dynamic = node.comfyDynamic
+  if (
+    typeof dynamic !== 'object' ||
+    dynamic === null ||
+    !('autogrow' in dynamic)
+  )
+    return defaults
+
+  const groups = dynamic.autogrow as Record<string, AutogrowGroup> | undefined
+  if (!groups) return defaults
+
+  return {
+    maxInputs: groups['images']?.max ?? defaults.maxInputs,
+    maxFloatUniforms: groups['floats']?.max ?? defaults.maxFloatUniforms,
+    maxIntUniforms: groups['ints']?.max ?? defaults.maxIntUniforms,
+    maxBoolUniforms: groups['bools']?.max ?? defaults.maxBoolUniforms,
+    maxCurves: groups['curves']?.max ?? defaults.maxCurves
+  }
+}
+
+export function extractUniformSources(
+  glslNode: LGraphNode,
+  subgraph: Subgraph
+): UniformSources {
+  const floats: UniformSource[] = []
+  const ints: UniformSource[] = []
+  const bools: UniformSource[] = []
+  const curves: UniformSource[] = []
+
+  if (!glslNode.inputs) return { floats, ints, bools, curves }
+
+  for (const input of glslNode.inputs) {
+    if (input.link == null) continue
+
+    const link = subgraph.getLink(input.link)
+    if (!link || link.origin_id === SUBGRAPH_INPUT_ID) continue
+
+    const sourceNode = subgraph.getNodeById(link.origin_id)
+    if (!sourceNode?.widgets?.length) continue
+
+    const inputName = input.name ?? ''
+    const dotIndex = inputName.indexOf('.')
+    if (dotIndex === -1) continue
+
+    const prefix = inputName.slice(0, dotIndex)
+    if (link.origin_slot >= sourceNode.widgets.length) continue
+    const widget = sourceNode.widgets[link.origin_slot]
+    const source: UniformSource = {
+      nodeId: sourceNode.id as NodeId,
+      widgetName: widget.name,
+      directValue: () => widget.value
+    }
+
+    if (prefix === 'floats') floats.push(source)
+    else if (prefix === 'ints') ints.push(source)
+    else if (prefix === 'bools') bools.push(source)
+    else if (prefix === 'curves') curves.push(source)
+  }
+
+  return { floats, ints, bools, curves }
+}
+
+export function toNumber(v: unknown): number {
+  if (typeof v === 'string' && v.startsWith('#')) return hexToInt(v)
+  return Number(v) || 0
+}
+
+export function useGLSLUniforms(
+  graphId: ComputedRef<UUID | undefined>,
+  nodeId: ComputedRef<NodeId | undefined>,
+  nodeRef: ComputedRef<LGraphNode | null>,
+  uniformSources: ComputedRef<UniformSources | null>,
+  rendererConfig: ComputedRef<GLSLRendererConfig>
+) {
+  const widgetValueStore = useWidgetValueStore()
+
+  function collectValues<T>(
+    subgraphSources: UniformSource[] | undefined,
+    groupName: string,
+    uniformPrefix: string,
+    maxCount: number,
+    coerce: (value: unknown) => T,
+    defaultValue: T
+  ): T[] {
+    const gId = graphId.value
+    if (!gId) return []
+
+    if (subgraphSources) {
+      return subgraphSources.map(({ nodeId: nId, widgetName, directValue }) => {
+        const widget = widgetValueStore.getWidget(gId, nId, widgetName)
+        return coerce(widget?.value ?? directValue() ?? defaultValue)
+      })
+    }
+
+    const nId = nodeId.value
+    const node = nodeRef.value
+    if (nId == null || !node) return []
+
+    const values: T[] = []
+    for (let i = 0; i < maxCount; i++) {
+      const inputName = `${groupName}.${uniformPrefix}${i}`
+      const widget = widgetValueStore.getWidget(gId, nId, inputName)
+      if (widget !== undefined) {
+        values.push(coerce(widget.value))
+        continue
+      }
+
+      const slot = node.inputs?.findIndex((inp) => inp.name === inputName)
+      if (slot == null || slot < 0) break
+
+      const link = node.getInputLink(slot)
+      if (!link) break
+      const upstreamNode = node.getInputNode(slot)
+      if (!upstreamNode) break
+      const upstreamWidgets = widgetValueStore.getNodeWidgets(
+        gId,
+        upstreamNode.id as NodeId
+      )
+      if (
+        upstreamWidgets.length === 0 ||
+        link.origin_slot >= upstreamWidgets.length
+      )
+        break
+      values.push(coerce(upstreamWidgets[link.origin_slot].value))
+    }
+    return values
+  }
+
+  const toBool = (v: unknown): boolean => Boolean(v)
+
+  const floatValues = computed(() =>
+    collectValues(
+      uniformSources.value?.floats,
+      'floats',
+      'u_float',
+      rendererConfig.value.maxFloatUniforms,
+      toNumber,
+      0
+    )
+  )
+
+  const intValues = computed(() =>
+    collectValues(
+      uniformSources.value?.ints,
+      'ints',
+      'u_int',
+      rendererConfig.value.maxIntUniforms,
+      toNumber,
+      0
+    )
+  )
+
+  const boolValues = computed(() =>
+    collectValues(
+      uniformSources.value?.bools,
+      'bools',
+      'u_bool',
+      rendererConfig.value.maxBoolUniforms,
+      toBool,
+      false
+    )
+  )
+
+  const curveValues = computed((): CurveData[] => {
+    const gId = graphId.value
+    if (!gId) return []
+
+    const sources = uniformSources.value?.curves
+    if (sources && sources.length > 0) {
+      return sources
+        .map(({ nodeId: nId, widgetName, directValue }) => {
+          const widget = widgetValueStore.getWidget(gId, nId, widgetName)
+          const value = widget?.value ?? directValue()
+          return isCurveData(value) ? (value as CurveData) : null
+        })
+        .filter((v): v is CurveData => v !== null)
+    }
+
+    const node = nodeRef.value
+    const nId = nodeId.value
+    if (nId == null || !node?.inputs) return []
+
+    const values: CurveData[] = []
+    const max = rendererConfig.value.maxCurves
+    for (let i = 0; i < max; i++) {
+      const inputName = `curves.u_curve${i}`
+
+      const widget = widgetValueStore.getWidget(gId, nId, inputName)
+      if (widget && isCurveData(widget.value)) {
+        values.push(widget.value as CurveData)
+        continue
+      }
+
+      const slot = node.inputs.findIndex((inp) => inp.name === inputName)
+      if (slot < 0) break
+
+      const upstreamNode = node.getInputNode(slot)
+      if (!upstreamNode) break
+
+      const upstreamWidgets = widgetValueStore.getNodeWidgets(
+        gId,
+        upstreamNode.id as NodeId
+      )
+      const curveWidget = upstreamWidgets.find((w) => isCurveData(w.value))
+      if (!curveWidget) break
+      values.push(curveWidget.value as CurveData)
+    }
+    return values
+  })
+
+  return {
+    floatValues,
+    intValues,
+    boolValues,
+    curveValues
+  }
+}
diff --git a/src/schemas/nodeDef/nodeDefSchemaV2.ts b/src/schemas/nodeDef/nodeDefSchemaV2.ts
index 3adc93aa03..a783f2edf0 100644
--- a/src/schemas/nodeDef/nodeDefSchemaV2.ts
+++ b/src/schemas/nodeDef/nodeDefSchemaV2.ts
@@ -3,6 +3,7 @@ import { z } from 'zod'
 import {
   zBaseInputOptions,
   zBooleanInputOptions,
+  zColorStop,
   zComboInputOptions,
   zFloatInputOptions,
   zIntInputOptions,
@@ -140,6 +141,25 @@ const zCurveInputSpec = zBaseInputOptions.extend({
   default: zCurveData.optional()
 })
 
+const zRangeValue = z.object({
+  min: z.number(),
+  max: z.number(),
+  midpoint: z.number().optional()
+})
+
+const zRangeInputSpec = zBaseInputOptions.extend({
+  type: z.literal('RANGE'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  default: zRangeValue.optional(),
+  display: z.enum(['plain', 'gradient', 'histogram']).optional(),
+  gradient_stops: z.array(zColorStop).optional(),
+  show_midpoint: z.boolean().optional(),
+  midpoint_scale: z.enum(['linear', 'gamma']).optional(),
+  value_min: z.number().optional(),
+  value_max: z.number().optional()
+})
+
 const zCustomInputSpec = zBaseInputOptions.extend({
   type: z.string(),
   name: z.string(),
@@ -161,6 +181,7 @@ const zInputSpec = z.union([
   zGalleriaInputSpec,
   zTextareaInputSpec,
   zCurveInputSpec,
+  zRangeInputSpec,
   zCustomInputSpec
 ])
 
@@ -206,6 +227,7 @@ export type ChartInputSpec = z.infer<typeof zChartInputSpec>
 export type GalleriaInputSpec = z.infer<typeof zGalleriaInputSpec>
 export type TextareaInputSpec = z.infer<typeof zTextareaInputSpec>
 export type CurveInputSpec = z.infer<typeof zCurveInputSpec>
+export type RangeInputSpec = z.infer<typeof zRangeInputSpec>
 export type CustomInputSpec = z.infer<typeof zCustomInputSpec>
 
 export type InputSpec = z.infer<typeof zInputSpec>
diff --git a/src/schemas/nodeDefSchema.ts b/src/schemas/nodeDefSchema.ts
index 6120641af2..14135ab121 100644
--- a/src/schemas/nodeDefSchema.ts
+++ b/src/schemas/nodeDefSchema.ts
@@ -56,16 +56,14 @@ export const zIntInputOptions = zNumericInputOptions.extend({
     .optional()
 })
 
+export const zColorStop = z.object({
+  offset: z.number(),
+  color: z.tuple([z.number(), z.number(), z.number()])
+})
+
 export const zFloatInputOptions = zNumericInputOptions.extend({
   round: z.union([z.number(), z.literal(false)]).optional(),
-  gradient_stops: z
-    .array(
-      z.object({
-        offset: z.number(),
-        color: z.tuple([z.number(), z.number(), z.number()])
-      })
-    )
-    .optional()
+  gradient_stops: z.array(zColorStop).optional()
 })
 
 export const zBooleanInputOptions = zBaseInputOptions.extend({
diff --git a/src/scripts/api.featureFlags.test.ts b/src/scripts/api.featureFlags.test.ts
index 9af2571614..f7035233cf 100644
--- a/src/scripts/api.featureFlags.test.ts
+++ b/src/scripts/api.featureFlags.test.ts
@@ -234,6 +234,163 @@ describe('API Feature Flags', () => {
     })
   })
 
+  describe('progress_text binary message parsing', () => {
+    /**
+     * Build a legacy progress_text binary message:
+     * [4B event_type=3][4B node_id_len][node_id_bytes][text_bytes]
+     */
+    function buildLegacyProgressText(
+      nodeId: string,
+      text: string
+    ): ArrayBuffer {
+      const encoder = new TextEncoder()
+      const nodeIdBytes = encoder.encode(nodeId)
+      const textBytes = encoder.encode(text)
+      const buf = new ArrayBuffer(4 + 4 + nodeIdBytes.length + textBytes.length)
+      const view = new DataView(buf)
+      view.setUint32(0, 3) // event type
+      view.setUint32(4, nodeIdBytes.length)
+      new Uint8Array(buf, 8, nodeIdBytes.length).set(nodeIdBytes)
+      new Uint8Array(buf, 8 + nodeIdBytes.length, textBytes.length).set(
+        textBytes
+      )
+      return buf
+    }
+
+    /**
+     * Build a new-format progress_text binary message:
+     * [4B event_type=3][4B prompt_id_len][prompt_id_bytes][4B node_id_len][node_id_bytes][text_bytes]
+     */
+    function buildNewProgressText(
+      promptId: string,
+      nodeId: string,
+      text: string
+    ): ArrayBuffer {
+      const encoder = new TextEncoder()
+      const promptIdBytes = encoder.encode(promptId)
+      const nodeIdBytes = encoder.encode(nodeId)
+      const textBytes = encoder.encode(text)
+      const buf = new ArrayBuffer(
+        4 + 4 + promptIdBytes.length + 4 + nodeIdBytes.length + textBytes.length
+      )
+      const view = new DataView(buf)
+      let offset = 0
+      view.setUint32(offset, 3) // event type
+      offset += 4
+      view.setUint32(offset, promptIdBytes.length)
+      offset += 4
+      new Uint8Array(buf, offset, promptIdBytes.length).set(promptIdBytes)
+      offset += promptIdBytes.length
+      view.setUint32(offset, nodeIdBytes.length)
+      offset += 4
+      new Uint8Array(buf, offset, nodeIdBytes.length).set(nodeIdBytes)
+      offset += nodeIdBytes.length
+      new Uint8Array(buf, offset, textBytes.length).set(textBytes)
+      return buf
+    }
+
+    let dispatchedEvents: { nodeId: string; text: string; prompt_id?: string }[]
+    let listener: EventListener
+
+    beforeEach(async () => {
+      dispatchedEvents = []
+      listener = ((e: CustomEvent) => {
+        dispatchedEvents.push(e.detail)
+      }) as EventListener
+      api.addEventListener('progress_text', listener)
+
+      // Connect the WebSocket so the message handler is active
+      const initPromise = api.init()
+      wsEventHandlers['open'](new Event('open'))
+      wsEventHandlers['message']({
+        data: JSON.stringify({
+          type: 'status',
+          data: {
+            status: { exec_info: { queue_remaining: 0 } },
+            sid: 'test-sid'
+          }
+        })
+      })
+      await initPromise
+    })
+
+    afterEach(() => {
+      api.removeEventListener('progress_text', listener)
+    })
+
+    it('should parse legacy format when server does not support progress_text_metadata', () => {
+      // Restore real getClientFeatureFlags (advertises support)
+      vi.mocked(api.getClientFeatureFlags).mockReturnValue({
+        supports_progress_text_metadata: true
+      })
+      // Server does NOT echo support
+      api.serverFeatureFlags.value = {}
+
+      const msg = buildLegacyProgressText('42', 'Generating image...')
+      wsEventHandlers['message']({ data: msg })
+
+      expect(dispatchedEvents).toHaveLength(1)
+      expect(dispatchedEvents[0]).toEqual({
+        nodeId: '42',
+        text: 'Generating image...'
+      })
+    })
+
+    it('should parse new format when server supports progress_text_metadata', () => {
+      vi.mocked(api.getClientFeatureFlags).mockReturnValue({
+        supports_progress_text_metadata: true
+      })
+      api.serverFeatureFlags.value = {
+        supports_progress_text_metadata: true
+      }
+
+      const msg = buildNewProgressText('prompt-abc', '42', 'Step 5/20')
+      wsEventHandlers['message']({ data: msg })
+
+      expect(dispatchedEvents).toHaveLength(1)
+      expect(dispatchedEvents[0]).toEqual({
+        nodeId: '42',
+        text: 'Step 5/20',
+        prompt_id: 'prompt-abc'
+      })
+    })
+
+    it('should not corrupt legacy messages when client advertises support but server does not', () => {
+      // This is the exact bug scenario: client says it supports the flag,
+      // server doesn't, but the decoder checks the client flag and tries
+      // to parse a prompt_id that isn't there.
+      vi.mocked(api.getClientFeatureFlags).mockReturnValue({
+        supports_progress_text_metadata: true
+      })
+      api.serverFeatureFlags.value = {}
+
+      // Send multiple legacy messages to ensure none are corrupted
+      const messages = [
+        buildLegacyProgressText('7', 'Loading model...'),
+        buildLegacyProgressText('12', 'Sampling 3/20'),
+        buildLegacyProgressText('99', 'VAE decode')
+      ]
+
+      for (const msg of messages) {
+        wsEventHandlers['message']({ data: msg })
+      }
+
+      expect(dispatchedEvents).toHaveLength(3)
+      expect(dispatchedEvents[0]).toMatchObject({
+        nodeId: '7',
+        text: 'Loading model...'
+      })
+      expect(dispatchedEvents[1]).toMatchObject({
+        nodeId: '12',
+        text: 'Sampling 3/20'
+      })
+      expect(dispatchedEvents[2]).toMatchObject({
+        nodeId: '99',
+        text: 'VAE decode'
+      })
+    })
+  })
+
   describe('Dev override via localStorage', () => {
     afterEach(() => {
       localStorage.clear()
diff --git a/src/scripts/api.ts b/src/scripts/api.ts
index f33b00e631..781aa344ca 100644
--- a/src/scripts/api.ts
+++ b/src/scripts/api.ts
@@ -638,7 +638,7 @@ export class ComfyApi extends EventTarget {
                 let promptId: string | undefined
 
                 if (
-                  this.getClientFeatureFlags()?.supports_progress_text_metadata
+                  this.serverFeatureFlags.value?.supports_progress_text_metadata
                 ) {
                   const promptIdLength = rawView.getUint32(offset)
                   offset += 4
diff --git a/src/scripts/app.ts b/src/scripts/app.ts
index 830b79a95e..f25ed4fcb1 100644
--- a/src/scripts/app.ts
+++ b/src/scripts/app.ts
@@ -21,6 +21,7 @@ import {
 import { snapPoint } from '@/lib/litegraph/src/measure'
 import type { Vector2 } from '@/lib/litegraph/src/litegraph'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import { LGraphEventMode } from '@/lib/litegraph/src/types/globalEnums'
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
@@ -86,12 +87,19 @@ import type { NodeExecutionId } from '@/types/nodeIdentification'
 import { graphToPrompt } from '@/utils/executionUtil'
 import { getCnrIdFromProperties } from '@/platform/nodeReplacement/cnrIdUtil'
 import { rescanAndSurfaceMissingNodes } from '@/platform/nodeReplacement/missingNodeScan'
+import type { MissingModelCandidate } from '@/platform/missingModel/types'
 import {
   scanAllModelCandidates,
   enrichWithEmbeddedMetadata,
   verifyAssetSupportedCandidates
 } from '@/platform/missingModel/missingModelScan'
 import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
+import { useMissingMediaStore } from '@/platform/missingMedia/missingMediaStore'
+import type { MissingMediaCandidate } from '@/platform/missingMedia/types'
+import {
+  scanAllMediaCandidates,
+  verifyCloudMediaCandidates
+} from '@/platform/missingMedia/missingMediaScan'
 import { assetService } from '@/platform/assets/services/assetService'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 
@@ -100,6 +108,8 @@ import {
   collectAllNodes,
   forEachNode,
   getNodeByExecutionId,
+  isAncestorPathActive,
+  isMissingCandidateActive,
   triggerCallbackOnAllNodes
 } from '@/utils/graphTraversalUtil'
 import {
@@ -1120,23 +1130,35 @@ export class ComfyApp {
     restore_view: boolean = true,
     workflow: string | null | ComfyWorkflow = null,
     options: {
-      showMissingNodes?: boolean
-      showMissingModels?: boolean
       checkForRerouteMigration?: boolean
       openSource?: WorkflowOpenSource
       deferWarnings?: boolean
+      skipAssetScans?: boolean
+      silentAssetErrors?: boolean
     } = {}
   ) {
     const {
-      showMissingNodes = true,
-      showMissingModels = true,
       checkForRerouteMigration = false,
       openSource,
-      deferWarnings = false
+      deferWarnings = false,
+      skipAssetScans = false,
+      silentAssetErrors = false
     } = options
     useWorkflowService().beforeLoadNewGraph()
 
-    useMissingModelStore().clearMissingModels()
+    if (skipAssetScans) {
+      // Only reset candidates; preserve UI state (fileSizes, urlInputs, etc.)
+      // so cached results restored by showPendingWarnings still display sizes.
+      // Abort any in-flight verification from the outgoing workflow so a late
+      // result cannot repopulate the store after we've switched workflows.
+      useMissingModelStore().createVerificationAbortController().abort()
+      useMissingMediaStore().createVerificationAbortController().abort()
+      useMissingModelStore().setMissingModels([])
+      useMissingMediaStore().setMissingMedia([])
+    } else {
+      useMissingModelStore().clearMissingModels()
+      useMissingMediaStore().clearMissingMedia()
+    }
 
     if (clean !== false) {
       // Reset canvas context before configuring a new graph so subgraph UI
@@ -1212,24 +1234,31 @@ export class ComfyApp {
       }
       for (let n of nodes) {
         if (!(n.type in LiteGraph.registered_node_types)) {
-          const replacement = nodeReplacementStore.getReplacementFor(n.type)
-          const cnrId = getCnrIdFromProperties(
-            n.properties as Record<string, unknown> | undefined
-          )
-          const executionId = pathPrefix
-            ? `${pathPrefix}:${n.id}`
-            : String(n.id)
+          // Always sanitize so configure() can handle unregistered types,
+          // but only report as missing if the node is active.
+          const isMuted =
+            n.mode === LGraphEventMode.NEVER ||
+            n.mode === LGraphEventMode.BYPASS
+          if (!isMuted) {
+            const replacement = nodeReplacementStore.getReplacementFor(n.type)
+            const cnrId = getCnrIdFromProperties(
+              n.properties as Record<string, unknown> | undefined
+            )
+            const executionId = pathPrefix
+              ? `${pathPrefix}:${n.id}`
+              : String(n.id)
 
-          missingNodeTypes.push({
-            type: n.type,
-            nodeId: executionId,
-            cnrId,
-            ...(displayName && {
-              hint: t('g.inSubgraph', { name: displayName })
-            }),
-            isReplaceable: replacement !== null,
-            replacement: replacement ?? undefined
-          })
+            missingNodeTypes.push({
+              type: n.type,
+              nodeId: executionId,
+              cnrId,
+              ...(displayName && {
+                hint: t('g.inSubgraph', { name: displayName })
+              }),
+              isReplaceable: replacement !== null,
+              replacement: replacement ?? undefined
+            })
+          }
 
           n.type = sanitizeNodeName(n.type)
         }
@@ -1409,15 +1438,31 @@ export class ComfyApp {
         requestAnimationFrame(() => fitView())
       }
 
-      await this.runMissingModelPipeline(
-        graphData,
-        missingNodeTypes,
-        showMissingNodes,
-        showMissingModels
+      // Drop missing-node entries whose enclosing subgraph is
+      // muted/bypassed. The initial JSON scan only checks each node's
+      // own mode; the cascade from an inactive container is applied here
+      // using the now-configured live graph.
+      const activeMissingNodeTypes = missingNodeTypes.filter(
+        (n) =>
+          typeof n === 'string' ||
+          n.nodeId == null ||
+          isAncestorPathActive(this.rootGraph, String(n.nodeId))
       )
 
+      if (!skipAssetScans) {
+        await this.runMissingModelPipeline(
+          graphData,
+          activeMissingNodeTypes,
+          silentAssetErrors
+        )
+
+        await this.runMissingMediaPipeline(silentAssetErrors)
+      }
+
       if (!deferWarnings) {
-        useWorkflowService().showPendingWarnings()
+        useWorkflowService().showPendingWarnings(undefined, {
+          silent: silentAssetErrors
+        })
       }
 
       void useSubgraphNavigationStore().updateHash()
@@ -1432,8 +1477,7 @@ export class ComfyApp {
   private async runMissingModelPipeline(
     graphData: ComfyWorkflowJSON,
     missingNodeTypes: MissingNodeType[],
-    showMissingNodes: boolean,
-    showMissingModels: boolean
+    silent: boolean = false
   ): Promise<{ missingModels: ModelFile[] }> {
     const missingModelStore = useMissingModelStore()
 
@@ -1451,7 +1495,7 @@ export class ComfyApp {
 
     const modelStore = useModelStore()
     await modelStore.loadModelFolders()
-    const enrichedCandidates = await enrichWithEmbeddedMetadata(
+    const enrichedAll = await enrichWithEmbeddedMetadata(
       candidates,
       graphData,
       async (name, directory) => {
@@ -1467,6 +1511,19 @@ export class ComfyApp {
         : undefined
     )
 
+    // Drop candidates whose enclosing subgraph is muted/bypassed. Per-node
+    // scans only checked each node's own mode; the cascade from an
+    // inactive container to its interior happens here.
+    // Asymmetric on purpose: a candidate dropped here is not resurrected if
+    // the user un-bypasses the container mid-verification. The realtime
+    // mode-change path (handleNodeModeChange → scanAndAddNodeErrors) is
+    // responsible for surfacing errors after an un-bypass.
+    const enrichedCandidates = enrichedAll.filter(
+      (c) =>
+        c.nodeId == null ||
+        isAncestorPathActive(this.rootGraph, String(c.nodeId))
+    )
+
     const missingModels: ModelFile[] = enrichedCandidates
       .filter((c) => c.isMissing === true && c.url)
       .map((c) => ({
@@ -1483,33 +1540,38 @@ export class ComfyApp {
 
     const activeWf = useWorkspaceStore().workflow.activeWorkflow
     if (activeWf) {
-      const warnings: PendingWarnings = {}
-      if (missingNodeTypes.length && showMissingNodes) {
-        warnings.missingNodeTypes = missingNodeTypes
-      }
-      if (confirmedCandidates.length && showMissingModels) {
-        warnings.missingModelCandidates = confirmedCandidates
-      }
-      if (warnings.missingNodeTypes || warnings.missingModelCandidates) {
-        activeWf.pendingWarnings = warnings
+      activeWf.pendingWarnings = {
+        ...activeWf.pendingWarnings,
+        missingNodeTypes: missingNodeTypes.length
+          ? missingNodeTypes
+          : undefined,
+        missingModelCandidates: confirmedCandidates.length
+          ? confirmedCandidates
+          : undefined
       }
+      this.cleanupPendingWarnings(activeWf)
     }
 
-    // Intentionally runs on every graph load (including tab switches and
-    // undo/redo) because missing model state depends on external asset data
-    // that may change between workflow activations.
     if (enrichedCandidates.length) {
       if (isCloud) {
         const controller = missingModelStore.createVerificationAbortController()
-        verifyAssetSupportedCandidates(enrichedCandidates, controller.signal)
+        void verifyAssetSupportedCandidates(
+          enrichedCandidates,
+          controller.signal
+        )
           .then(() => {
             if (controller.signal.aborted) return
-            const confirmed = enrichedCandidates.filter(
-              (c) => c.isMissing === true
+            // Re-check ancestor: user may have bypassed a container
+            // while verification was in flight.
+            const confirmed = enrichedCandidates.filter((c) =>
+              isMissingCandidateActive(this.rootGraph, c)
             )
             if (confirmed.length) {
-              useExecutionErrorStore().surfaceMissingModels(confirmed)
+              useExecutionErrorStore().surfaceMissingModels(confirmed, {
+                silent
+              })
             }
+            this.cacheModelCandidates(activeWf, confirmed)
           })
           .catch((err) => {
             console.warn(
@@ -1529,7 +1591,7 @@ export class ComfyApp {
         const controller = missingModelStore.createVerificationAbortController()
         const confirmed = enrichedCandidates.filter((c) => c.isMissing === true)
         if (confirmed.length) {
-          api
+          void api
             .getFolderPaths()
             .then((paths) => {
               if (controller.signal.aborted) return
@@ -1543,7 +1605,10 @@ export class ComfyApp {
             })
             .finally(() => {
               if (controller.signal.aborted) return
-              useExecutionErrorStore().surfaceMissingModels(confirmed)
+              useExecutionErrorStore().surfaceMissingModels(confirmed, {
+                silent
+              })
+              this.cacheModelCandidates(activeWf, confirmed)
             })
 
           void Promise.allSettled(
@@ -1565,6 +1630,95 @@ export class ComfyApp {
     return { missingModels }
   }
 
+  private cleanupPendingWarnings(wf: {
+    pendingWarnings: PendingWarnings | null
+  }) {
+    if (
+      !wf.pendingWarnings?.missingNodeTypes &&
+      !wf.pendingWarnings?.missingModelCandidates &&
+      !wf.pendingWarnings?.missingMediaCandidates
+    ) {
+      wf.pendingWarnings = null
+    }
+  }
+
+  private cacheModelCandidates(
+    wf: ComfyWorkflow | null,
+    confirmed: MissingModelCandidate[]
+  ) {
+    if (!wf) return
+    wf.pendingWarnings = {
+      ...wf.pendingWarnings,
+      missingModelCandidates: confirmed.length ? confirmed : undefined
+    }
+    this.cleanupPendingWarnings(wf)
+  }
+
+  private cacheMediaCandidates(
+    wf: ComfyWorkflow | null,
+    confirmed: MissingMediaCandidate[]
+  ) {
+    if (!wf) return
+    wf.pendingWarnings = {
+      ...wf.pendingWarnings,
+      missingMediaCandidates: confirmed.length ? confirmed : undefined
+    }
+    this.cleanupPendingWarnings(wf)
+  }
+
+  private async runMissingMediaPipeline(
+    silent: boolean = false
+  ): Promise<void> {
+    const missingMediaStore = useMissingMediaStore()
+    const activeWf = useWorkspaceStore().workflow.activeWorkflow
+    const allCandidates = scanAllMediaCandidates(this.rootGraph, isCloud)
+    // Drop candidates whose enclosing subgraph is muted/bypassed.
+    const candidates = allCandidates.filter((c) =>
+      isAncestorPathActive(this.rootGraph, String(c.nodeId))
+    )
+
+    if (!candidates.length) {
+      this.cacheMediaCandidates(activeWf, [])
+      return
+    }
+
+    if (isCloud) {
+      const controller = missingMediaStore.createVerificationAbortController()
+      void verifyCloudMediaCandidates(candidates, controller.signal)
+        .then(() => {
+          if (controller.signal.aborted) return
+          // Re-check ancestor after async verification (see model pipeline).
+          const confirmed = candidates.filter((c) =>
+            isMissingCandidateActive(this.rootGraph, c)
+          )
+          if (confirmed.length) {
+            useExecutionErrorStore().surfaceMissingMedia(confirmed, { silent })
+          }
+          this.cacheMediaCandidates(activeWf, confirmed)
+        })
+        .catch((err) => {
+          console.warn(
+            '[Missing Media Pipeline] Asset verification failed:',
+            err
+          )
+          useToastStore().add({
+            severity: 'warn',
+            summary: st(
+              'toastMessages.missingMediaVerificationFailed',
+              'Failed to verify missing media. Some inputs may not be shown in the Errors tab.'
+            ),
+            life: 5000
+          })
+        })
+    } else {
+      const confirmed = candidates.filter((c) => c.isMissing === true)
+      if (confirmed.length) {
+        useExecutionErrorStore().surfaceMissingMedia(confirmed, { silent })
+      }
+      this.cacheMediaCandidates(activeWf, confirmed)
+    }
+  }
+
   async graphToPrompt(graph = this.rootGraph) {
     return graphToPrompt(graph, {
       sortNodes: useSettingStore().get('Comfy.Workflow.SortNodeIdOnSave')
diff --git a/src/scripts/changeTracker.test.ts b/src/scripts/changeTracker.test.ts
new file mode 100644
index 0000000000..5513d83915
--- /dev/null
+++ b/src/scripts/changeTracker.test.ts
@@ -0,0 +1,302 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
+
+const mockNodeOutputStore = vi.hoisted(() => ({
+  snapshotOutputs: vi.fn(() => ({})),
+  restoreOutputs: vi.fn()
+}))
+
+const mockSubgraphNavigationStore = vi.hoisted(() => ({
+  exportState: vi.fn(() => []),
+  restoreState: vi.fn()
+}))
+
+const mockWorkflowStore = vi.hoisted(() => ({
+  activeWorkflow: null as { changeTracker: unknown } | null,
+  getWorkflowByPath: vi.fn()
+}))
+
+vi.mock('@/scripts/app', () => ({
+  app: {
+    graph: {},
+    rootGraph: {
+      serialize: vi.fn(() => ({
+        nodes: [],
+        links: [],
+        groups: [],
+        extra: {},
+        config: {},
+        version: 0.4,
+        last_node_id: 0,
+        last_link_id: 0
+      }))
+    },
+    canvas: {
+      ds: { scale: 1, offset: [0, 0] }
+    }
+  }
+}))
+
+vi.mock('@/scripts/api', () => ({
+  api: {
+    dispatchCustomEvent: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn()
+  }
+}))
+
+vi.mock('@/stores/nodeOutputStore', () => ({
+  useNodeOutputStore: vi.fn(() => mockNodeOutputStore)
+}))
+
+vi.mock('@/stores/subgraphNavigationStore', () => ({
+  useSubgraphNavigationStore: vi.fn(() => mockSubgraphNavigationStore)
+}))
+
+vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
+  ComfyWorkflow: class {},
+  useWorkflowStore: vi.fn(() => mockWorkflowStore)
+}))
+
+import { app } from '@/scripts/app'
+import { api } from '@/scripts/api'
+import { ChangeTracker } from '@/scripts/changeTracker'
+
+let nodeIdCounter = 0
+
+function createState(nodeCount = 0): ComfyWorkflowJSON {
+  const nodes = Array.from({ length: nodeCount }, () => ({
+    id: ++nodeIdCounter,
+    type: 'TestNode',
+    pos: [0, 0],
+    size: [100, 50],
+    flags: {},
+    order: 0,
+    inputs: [],
+    outputs: [],
+    properties: {}
+  }))
+  return {
+    nodes,
+    links: [],
+    groups: [],
+    extra: {},
+    config: {},
+    version: 0.4,
+    last_node_id: nodeIdCounter,
+    last_link_id: 0
+  } as unknown as ComfyWorkflowJSON
+}
+
+function createTracker(initialState?: ComfyWorkflowJSON): ChangeTracker {
+  const state = initialState ?? createState()
+  const workflow = { path: '/test/workflow.json' } as never
+  const tracker = new ChangeTracker(workflow, state)
+  mockWorkflowStore.activeWorkflow = { changeTracker: tracker }
+  return tracker
+}
+
+function mockCanvasState(state: ComfyWorkflowJSON) {
+  vi.mocked(app.rootGraph.serialize).mockReturnValue(state as never)
+}
+
+describe('ChangeTracker', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    nodeIdCounter = 0
+    ChangeTracker.isLoadingGraph = false
+    mockWorkflowStore.activeWorkflow = null
+    mockWorkflowStore.getWorkflowByPath.mockReturnValue(null)
+  })
+
+  describe('captureCanvasState', () => {
+    describe('guards', () => {
+      it('is a no-op when app.graph is falsy', () => {
+        const tracker = createTracker()
+        const original = tracker.activeState
+
+        const spy = vi.spyOn(app, 'graph', 'get').mockReturnValue(null as never)
+        tracker.captureCanvasState()
+        spy.mockRestore()
+
+        expect(app.rootGraph.serialize).not.toHaveBeenCalled()
+        expect(tracker.activeState).toBe(original)
+      })
+
+      it('is a no-op when changeCount > 0', () => {
+        const tracker = createTracker()
+        tracker.beforeChange()
+
+        tracker.captureCanvasState()
+
+        expect(app.rootGraph.serialize).not.toHaveBeenCalled()
+      })
+
+      it('is a no-op when isLoadingGraph is true', () => {
+        const tracker = createTracker()
+        ChangeTracker.isLoadingGraph = true
+
+        tracker.captureCanvasState()
+
+        expect(app.rootGraph.serialize).not.toHaveBeenCalled()
+      })
+
+      it('is a no-op when _restoringState is true', () => {
+        const tracker = createTracker()
+        tracker._restoringState = true
+
+        tracker.captureCanvasState()
+
+        expect(app.rootGraph.serialize).not.toHaveBeenCalled()
+      })
+
+      it('is a no-op and logs error when called on inactive tracker', () => {
+        const tracker = createTracker()
+        mockWorkflowStore.activeWorkflow = { changeTracker: {} }
+
+        tracker.captureCanvasState()
+
+        expect(app.rootGraph.serialize).not.toHaveBeenCalled()
+      })
+    })
+
+    describe('state capture', () => {
+      it('pushes to undoQueue, updates activeState, and calls updateModified', () => {
+        const initial = createState(1)
+        const tracker = createTracker(initial)
+        const changed = createState(2)
+        mockCanvasState(changed)
+
+        tracker.captureCanvasState()
+
+        expect(tracker.undoQueue).toHaveLength(1)
+        expect(tracker.undoQueue[0]).toEqual(initial)
+        expect(tracker.activeState).toEqual(changed)
+        expect(api.dispatchCustomEvent).toHaveBeenCalledWith(
+          'graphChanged',
+          changed
+        )
+      })
+
+      it('does not push when state is identical', () => {
+        const state = createState()
+        const tracker = createTracker(state)
+        mockCanvasState(state)
+
+        tracker.captureCanvasState()
+
+        expect(tracker.undoQueue).toHaveLength(0)
+      })
+
+      it('clears redoQueue on new change', () => {
+        const tracker = createTracker(createState(1))
+        tracker.redoQueue.push(createState(3))
+        mockCanvasState(createState(2))
+
+        tracker.captureCanvasState()
+
+        expect(tracker.redoQueue).toHaveLength(0)
+      })
+
+      it('produces a single undo entry for a beforeChange/afterChange transaction', () => {
+        const tracker = createTracker(createState(1))
+        const intermediate = createState(2)
+        const final = createState(3)
+
+        tracker.beforeChange()
+        mockCanvasState(intermediate)
+        tracker.captureCanvasState()
+        expect(tracker.undoQueue).toHaveLength(0)
+
+        mockCanvasState(final)
+        tracker.afterChange()
+
+        expect(tracker.undoQueue).toHaveLength(1)
+        expect(tracker.activeState).toEqual(final)
+      })
+
+      it('caps undoQueue at MAX_HISTORY', () => {
+        const tracker = createTracker(createState(1))
+        for (let i = 0; i < ChangeTracker.MAX_HISTORY; i++) {
+          tracker.undoQueue.push(createState(1))
+        }
+        expect(tracker.undoQueue).toHaveLength(ChangeTracker.MAX_HISTORY)
+
+        mockCanvasState(createState(2))
+        tracker.captureCanvasState()
+
+        expect(tracker.undoQueue).toHaveLength(ChangeTracker.MAX_HISTORY)
+      })
+    })
+  })
+
+  describe('deactivate', () => {
+    it('captures canvas state then stores viewport/outputs', () => {
+      const tracker = createTracker(createState(1))
+      const changed = createState(2)
+      mockCanvasState(changed)
+
+      tracker.deactivate()
+
+      expect(tracker.activeState).toEqual(changed)
+      expect(mockNodeOutputStore.snapshotOutputs).toHaveBeenCalled()
+      expect(mockSubgraphNavigationStore.exportState).toHaveBeenCalled()
+    })
+
+    it('skips captureCanvasState but still calls store during undo/redo', () => {
+      const tracker = createTracker(createState(1))
+      tracker._restoringState = true
+
+      tracker.deactivate()
+
+      expect(app.rootGraph.serialize).not.toHaveBeenCalled()
+      expect(mockNodeOutputStore.snapshotOutputs).toHaveBeenCalled()
+    })
+
+    it('is a full no-op when called on inactive tracker', () => {
+      const tracker = createTracker()
+      mockWorkflowStore.activeWorkflow = { changeTracker: {} }
+
+      tracker.deactivate()
+
+      expect(app.rootGraph.serialize).not.toHaveBeenCalled()
+      expect(mockNodeOutputStore.snapshotOutputs).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('prepareForSave', () => {
+    it('captures canvas state when tracker is active', () => {
+      const tracker = createTracker(createState(1))
+      const changed = createState(2)
+      mockCanvasState(changed)
+
+      tracker.prepareForSave()
+
+      expect(tracker.activeState).toEqual(changed)
+    })
+
+    it('is a no-op when tracker is inactive', () => {
+      const tracker = createTracker()
+      const original = tracker.activeState
+      mockWorkflowStore.activeWorkflow = { changeTracker: {} }
+
+      tracker.prepareForSave()
+
+      expect(app.rootGraph.serialize).not.toHaveBeenCalled()
+      expect(tracker.activeState).toBe(original)
+    })
+  })
+
+  describe('checkState (deprecated)', () => {
+    it('delegates to captureCanvasState', () => {
+      const tracker = createTracker(createState(1))
+      const changed = createState(2)
+      mockCanvasState(changed)
+
+      tracker.checkState()
+
+      expect(tracker.activeState).toEqual(changed)
+    })
+  })
+})
diff --git a/src/scripts/changeTracker.ts b/src/scripts/changeTracker.ts
index 2b051d9d26..10ff0bfac2 100644
--- a/src/scripts/changeTracker.ts
+++ b/src/scripts/changeTracker.ts
@@ -4,10 +4,8 @@ import log from 'loglevel'
 
 import type { CanvasPointerEvent } from '@/lib/litegraph/src/litegraph'
 import { LGraphCanvas, LiteGraph } from '@/lib/litegraph/src/litegraph'
-import {
-  ComfyWorkflow,
-  useWorkflowStore
-} from '@/platform/workflow/management/stores/workflowStore'
+import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type { ExecutedWsMessage } from '@/schemas/apiSchema'
 import { useExecutionStore } from '@/stores/executionStore'
@@ -26,14 +24,18 @@ const logger = log.getLogger('ChangeTracker')
 // Change to debug for more verbose logging
 logger.setLevel('info')
 
+function isActiveTracker(tracker: ChangeTracker): boolean {
+  return useWorkflowStore().activeWorkflow?.changeTracker === tracker
+}
+
 export class ChangeTracker {
   static MAX_HISTORY = 50
   /**
-   * Guard flag to prevent checkState from running during loadGraphData.
+   * Guard flag to prevent captureCanvasState from running during loadGraphData.
    * Between rootGraph.configure() and afterLoadNewGraph(), the rootGraph
    * contains the NEW workflow's data while activeWorkflow still points to
-   * the OLD workflow. Any checkState call in that window would serialize
-   * the wrong graph into the old workflow's activeState, corrupting it.
+   * the OLD workflow. Any captureCanvasState call in that window would
+   * serialize the wrong graph into the old workflow's activeState, corrupting it.
    */
   static isLoadingGraph = false
   /**
@@ -91,6 +93,41 @@ export class ChangeTracker {
     this.subgraphState = { navigation }
   }
 
+  /**
+   * Freeze this tracker's state before the workflow goes inactive.
+   * Always calls store() to preserve viewport/outputs. Calls
+   * captureCanvasState() only when not in undo/redo (to avoid
+   * corrupting undo history with intermediate graph state).
+   *
+   * PRECONDITION: must be called while this workflow is still the active one
+   * (before the activeWorkflow pointer is moved). If called after the pointer
+   * has already moved, this is a no-op to avoid freezing wrong viewport data.
+   *
+   * @internal Not part of the public extension API.
+   */
+  deactivate() {
+    if (!isActiveTracker(this)) {
+      logger.warn(
+        'deactivate() called on inactive tracker for:',
+        this.workflow.path
+      )
+      return
+    }
+    if (!this._restoringState) this.captureCanvasState()
+    this.store()
+  }
+
+  /**
+   * Ensure activeState is up-to-date for persistence.
+   * Active workflow: flushes canvas → activeState.
+   * Inactive workflow: no-op (activeState was frozen by deactivate()).
+   *
+   * @internal Not part of the public extension API.
+   */
+  prepareForSave() {
+    if (isActiveTracker(this)) this.captureCanvasState()
+  }
+
   restore() {
     if (this.ds) {
       app.canvas.ds.scale = this.ds.scale
@@ -138,8 +175,28 @@ export class ChangeTracker {
     }
   }
 
-  checkState() {
-    if (!app.graph || this.changeCount || ChangeTracker.isLoadingGraph) return
+  /**
+   * Snapshot the current canvas state into activeState and push undo.
+   * INVARIANT: only the active workflow's tracker may read from the canvas.
+   * Calling this on an inactive tracker would capture the wrong graph.
+   */
+  captureCanvasState() {
+    if (
+      !app.graph ||
+      this.changeCount ||
+      this._restoringState ||
+      ChangeTracker.isLoadingGraph
+    )
+      return
+
+    if (!isActiveTracker(this)) {
+      logger.warn(
+        'captureCanvasState called on inactive tracker for:',
+        this.workflow.path
+      )
+      return
+    }
+
     const currentState = clone(app.rootGraph.serialize()) as ComfyWorkflowJSON
     if (!this.activeState) {
       this.activeState = currentState
@@ -158,6 +215,19 @@ export class ChangeTracker {
     }
   }
 
+  /** @deprecated Use {@link captureCanvasState} instead. */
+  checkState() {
+    if (!ChangeTracker._checkStateWarned) {
+      ChangeTracker._checkStateWarned = true
+      logger.warn(
+        'checkState() is deprecated — use captureCanvasState() instead.'
+      )
+    }
+    this.captureCanvasState()
+  }
+
+  private static _checkStateWarned = false
+
   async updateState(source: ComfyWorkflowJSON[], target: ComfyWorkflowJSON[]) {
     const prevState = source.pop()
     if (prevState) {
@@ -165,9 +235,8 @@ export class ChangeTracker {
       this._restoringState = true
       try {
         await app.loadGraphData(prevState, false, false, this.workflow, {
-          showMissingModels: false,
-          showMissingNodes: false,
-          checkForRerouteMigration: false
+          checkForRerouteMigration: false,
+          silentAssetErrors: true
         })
         this.activeState = prevState
         this.updateModified()
@@ -217,14 +286,14 @@ export class ChangeTracker {
 
   afterChange() {
     if (!--this.changeCount) {
-      this.checkState()
+      this.captureCanvasState()
     }
   }
 
   static init() {
     const getCurrentChangeTracker = () =>
       useWorkflowStore().activeWorkflow?.changeTracker
-    const checkState = () => getCurrentChangeTracker()?.checkState()
+    const captureState = () => getCurrentChangeTracker()?.captureCanvasState()
 
     let keyIgnored = false
     window.addEventListener(
@@ -268,8 +337,8 @@ export class ChangeTracker {
 
           // If our active element is some type of input then handle changes after they're done
           if (ChangeTracker.bindInput(bindInputEl)) return
-          logger.debug('checkState on keydown')
-          changeTracker.checkState()
+          logger.debug('captureCanvasState on keydown')
+          changeTracker.captureCanvasState()
         })
       },
       true
@@ -278,34 +347,34 @@ export class ChangeTracker {
     window.addEventListener('keyup', () => {
       if (keyIgnored) {
         keyIgnored = false
-        logger.debug('checkState on keyup')
-        checkState()
+        logger.debug('captureCanvasState on keyup')
+        captureState()
       }
     })
 
     // Handle clicking DOM elements (e.g. widgets)
     window.addEventListener('mouseup', () => {
-      logger.debug('checkState on mouseup')
-      checkState()
+      logger.debug('captureCanvasState on mouseup')
+      captureState()
     })
 
     // Handle prompt queue event for dynamic widget changes
     api.addEventListener('promptQueued', () => {
-      logger.debug('checkState on promptQueued')
-      checkState()
+      logger.debug('captureCanvasState on promptQueued')
+      captureState()
     })
 
     api.addEventListener('graphCleared', () => {
-      logger.debug('checkState on graphCleared')
-      checkState()
+      logger.debug('captureCanvasState on graphCleared')
+      captureState()
     })
 
     // Handle litegraph clicks
     const processMouseUp = LGraphCanvas.prototype.processMouseUp
     LGraphCanvas.prototype.processMouseUp = function (e) {
       const v = processMouseUp.apply(this, [e])
-      logger.debug('checkState on processMouseUp')
-      checkState()
+      logger.debug('captureCanvasState on processMouseUp')
+      captureState()
       return v
     }
 
@@ -319,9 +388,9 @@ export class ChangeTracker {
     ) {
       const extendedCallback = (v: string) => {
         callback(v)
-        checkState()
+        captureState()
       }
-      logger.debug('checkState on prompt')
+      logger.debug('captureCanvasState on prompt')
       return prompt.apply(this, [title, value, extendedCallback, event])
     }
 
@@ -329,8 +398,8 @@ export class ChangeTracker {
     const close = LiteGraph.ContextMenu.prototype.close
     LiteGraph.ContextMenu.prototype.close = function (e: MouseEvent) {
       const v = close.apply(this, [e])
-      logger.debug('checkState on contextMenuClose')
-      checkState()
+      logger.debug('captureCanvasState on contextMenuClose')
+      captureState()
       return v
     }
 
@@ -382,7 +451,7 @@ export class ChangeTracker {
       const htmlElement = activeEl as HTMLElement
       if (`on${evt}` in htmlElement) {
         const listener = () => {
-          useWorkflowStore().activeWorkflow?.changeTracker?.checkState?.()
+          useWorkflowStore().activeWorkflow?.changeTracker?.captureCanvasState?.()
           htmlElement.removeEventListener(evt, listener)
         }
         htmlElement.addEventListener(evt, listener)
diff --git a/src/scripts/pnginfo.test.ts b/src/scripts/pnginfo.test.ts
new file mode 100644
index 0000000000..2f19d1ba0a
--- /dev/null
+++ b/src/scripts/pnginfo.test.ts
@@ -0,0 +1,67 @@
+import { describe, expect, it } from 'vitest'
+
+import { getWebpMetadata } from './pnginfo'
+
+function buildExifPayload(workflowJson: string): Uint8Array {
+  const fullStr = `workflow:${workflowJson}\0`
+  const strBytes = new TextEncoder().encode(fullStr)
+
+  const headerSize = 22
+  const buf = new Uint8Array(headerSize + strBytes.length)
+  const dv = new DataView(buf.buffer)
+
+  buf.set([0x49, 0x49], 0)
+  dv.setUint16(2, 0x002a, true)
+  dv.setUint32(4, 8, true)
+  dv.setUint16(8, 1, true)
+  dv.setUint16(10, 0, true)
+  dv.setUint16(12, 2, true)
+  dv.setUint32(14, strBytes.length, true)
+  dv.setUint32(18, 22, true)
+  buf.set(strBytes, 22)
+
+  return buf
+}
+
+function buildWebp(precedingChunkLength: number, workflowJson: string): File {
+  const exifPayload = buildExifPayload(workflowJson)
+  const precedingPadded = precedingChunkLength + (precedingChunkLength % 2)
+  const totalSize = 12 + (8 + precedingPadded) + (8 + exifPayload.length)
+
+  const buffer = new Uint8Array(totalSize)
+  const dv = new DataView(buffer.buffer)
+
+  buffer.set([0x52, 0x49, 0x46, 0x46], 0)
+  dv.setUint32(4, totalSize - 8, true)
+  buffer.set([0x57, 0x45, 0x42, 0x50], 8)
+
+  buffer.set([0x56, 0x50, 0x38, 0x20], 12)
+  dv.setUint32(16, precedingChunkLength, true)
+
+  const exifStart = 20 + precedingPadded
+  buffer.set([0x45, 0x58, 0x49, 0x46], exifStart)
+  dv.setUint32(exifStart + 4, exifPayload.length, true)
+  buffer.set(exifPayload, exifStart + 8)
+
+  return new File([buffer], 'test.webp', { type: 'image/webp' })
+}
+
+describe('getWebpMetadata', () => {
+  it('finds workflow when a preceding chunk has odd length (RIFF padding)', async () => {
+    const workflow = '{"nodes":[]}'
+    const file = buildWebp(3, workflow)
+
+    const metadata = await getWebpMetadata(file)
+
+    expect(metadata.workflow).toBe(workflow)
+  })
+
+  it('finds workflow when preceding chunk has even length (no padding)', async () => {
+    const workflow = '{"nodes":[1]}'
+    const file = buildWebp(4, workflow)
+
+    const metadata = await getWebpMetadata(file)
+
+    expect(metadata.workflow).toBe(workflow)
+  })
+})
diff --git a/src/scripts/widgets.ts b/src/scripts/widgets.ts
index 517e6f0e83..ee338b851c 100644
--- a/src/scripts/widgets.ts
+++ b/src/scripts/widgets.ts
@@ -20,6 +20,7 @@ import { useImageUploadWidget } from '@/renderer/extensions/vueNodes/widgets/com
 import { useIntWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useIntWidget'
 import { useMarkdownWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget'
 import { usePainterWidget } from '@/renderer/extensions/vueNodes/widgets/composables/usePainterWidget'
+import { useRangeWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useRangeWidget'
 import { useStringWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useStringWidget'
 import { useTextareaWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useTextareaWidget'
 import { transformInputSpecV1ToV2 } from '@/schemas/nodeDef/migration'
@@ -310,6 +311,7 @@ export const ComfyWidgets = {
   PAINTER: transformWidgetConstructorV2ToV1(usePainterWidget()),
   TEXTAREA: transformWidgetConstructorV2ToV1(useTextareaWidget()),
   CURVE: transformWidgetConstructorV2ToV1(useCurveWidget()),
+  RANGE: transformWidgetConstructorV2ToV1(useRangeWidget()),
   ...dynamicWidgets
 } as const
 
diff --git a/src/services/dialogService.ts b/src/services/dialogService.ts
index 92185d563d..e10823919e 100644
--- a/src/services/dialogService.ts
+++ b/src/services/dialogService.ts
@@ -125,6 +125,7 @@ export const useDialogService = () => {
       error: {
         exceptionType: options.title ?? 'Unknown Error',
         exceptionMessage: errorProps.errorMessage,
+        extensionFile: errorProps.extensionFile,
         traceback: errorProps.stackTrace ?? t('errorDialog.noStackTrace'),
         reportType: options.reportType
       }
diff --git a/src/stores/__tests__/authTokenPriority.test.ts b/src/stores/__tests__/authTokenPriority.test.ts
new file mode 100644
index 0000000000..20fb471d26
--- /dev/null
+++ b/src/stores/__tests__/authTokenPriority.test.ts
@@ -0,0 +1,211 @@
+import type { User } from 'firebase/auth'
+import * as firebaseAuth from 'firebase/auth'
+import { setActivePinia } from 'pinia'
+import type { Mock } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import * as vuefire from 'vuefire'
+
+import { useAuthStore } from '@/stores/authStore'
+import { createTestingPinia } from '@pinia/testing'
+
+const { mockFeatureFlags } = vi.hoisted(() => ({
+  mockFeatureFlags: {
+    teamWorkspacesEnabled: false
+  }
+}))
+
+const { mockDistributionTypes } = vi.hoisted(() => ({
+  mockDistributionTypes: {
+    isCloud: true,
+    isDesktop: true
+  }
+}))
+
+const mockWorkspaceAuthHeader = vi.fn().mockReturnValue(null)
+const mockGetWorkspaceToken = vi.fn().mockReturnValue(undefined)
+const mockClearWorkspaceContext = vi.fn()
+
+vi.mock('@/platform/workspace/stores/workspaceAuthStore', () => ({
+  useWorkspaceAuthStore: () => ({
+    getWorkspaceAuthHeader: mockWorkspaceAuthHeader,
+    getWorkspaceToken: mockGetWorkspaceToken,
+    clearWorkspaceContext: mockClearWorkspaceContext
+  })
+}))
+
+vi.mock('@/composables/useFeatureFlags', () => ({
+  useFeatureFlags: () => ({
+    flags: mockFeatureFlags
+  })
+}))
+
+vi.mock('vuefire', () => ({
+  useFirebaseAuth: vi.fn()
+}))
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({ t: (key: string) => key }),
+  createI18n: () => ({ global: { t: (key: string) => key } })
+}))
+
+vi.mock('firebase/auth', async (importOriginal) => {
+  const actual = await importOriginal<typeof firebaseAuth>()
+  return {
+    ...actual,
+    signInWithEmailAndPassword: vi.fn(),
+    createUserWithEmailAndPassword: vi.fn(),
+    signOut: vi.fn(),
+    onAuthStateChanged: vi.fn(),
+    onIdTokenChanged: vi.fn(),
+    signInWithPopup: vi.fn(),
+    GoogleAuthProvider: class {
+      addScope = vi.fn()
+      setCustomParameters = vi.fn()
+    },
+    GithubAuthProvider: class {
+      addScope = vi.fn()
+      setCustomParameters = vi.fn()
+    },
+    getAdditionalUserInfo: vi.fn(),
+    setPersistence: vi.fn().mockResolvedValue(undefined)
+  }
+})
+
+vi.mock('@/platform/telemetry', () => ({
+  useTelemetry: () => ({ trackAuth: vi.fn() })
+}))
+
+vi.mock('@/stores/toastStore', () => ({
+  useToastStore: () => ({ add: vi.fn() })
+}))
+
+vi.mock('@/services/dialogService')
+vi.mock('@/platform/distribution/types', () => mockDistributionTypes)
+
+const mockApiKeyGetAuthHeader = vi.fn().mockReturnValue(null)
+vi.mock('@/stores/apiKeyAuthStore', () => ({
+  useApiKeyAuthStore: () => ({
+    getAuthHeader: mockApiKeyGetAuthHeader,
+    getApiKey: vi.fn(),
+    currentUser: null,
+    isAuthenticated: false,
+    storeApiKey: vi.fn(),
+    clearStoredApiKey: vi.fn()
+  })
+}))
+
+type MockUser = Omit<User, 'getIdToken'> & { getIdToken: Mock }
+
+describe('auth token priority chain', () => {
+  let store: ReturnType<typeof useAuthStore>
+  let authStateCallback: (user: User | null) => void
+
+  const mockAuth: Record<string, unknown> = {}
+
+  const mockUser: MockUser = {
+    uid: 'test-user-id',
+    email: 'test@example.com',
+    getIdToken: vi.fn().mockResolvedValue('firebase-token')
+  } as Partial<User> as MockUser
+
+  beforeEach(() => {
+    vi.resetAllMocks()
+
+    mockFeatureFlags.teamWorkspacesEnabled = false
+    mockWorkspaceAuthHeader.mockReturnValue(null)
+    mockGetWorkspaceToken.mockReturnValue(undefined)
+    mockApiKeyGetAuthHeader.mockReturnValue(null)
+    mockUser.getIdToken.mockResolvedValue('firebase-token')
+
+    vi.mocked(vuefire.useFirebaseAuth).mockReturnValue(
+      mockAuth as unknown as ReturnType<typeof vuefire.useFirebaseAuth>
+    )
+
+    vi.mocked(firebaseAuth.onAuthStateChanged).mockImplementation(
+      (_, callback) => {
+        authStateCallback = callback as (user: User | null) => void
+        ;(callback as (user: User | null) => void)(mockUser)
+        return vi.fn()
+      }
+    )
+
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    store = useAuthStore()
+  })
+
+  describe('getAuthHeader priority', () => {
+    it('returns workspace auth header when workspace is active and feature enabled', async () => {
+      mockFeatureFlags.teamWorkspacesEnabled = true
+      mockWorkspaceAuthHeader.mockReturnValue({
+        Authorization: 'Bearer workspace-token'
+      })
+
+      const header = await store.getAuthHeader()
+
+      expect(header).toEqual({
+        Authorization: 'Bearer workspace-token'
+      })
+    })
+
+    it('returns Firebase token when workspace is not active but user is authenticated', async () => {
+      mockFeatureFlags.teamWorkspacesEnabled = true
+      mockWorkspaceAuthHeader.mockReturnValue(null)
+
+      const header = await store.getAuthHeader()
+
+      expect(header).toEqual({
+        Authorization: 'Bearer firebase-token'
+      })
+    })
+
+    it('returns API key when neither workspace nor Firebase are available', async () => {
+      authStateCallback(null)
+      mockApiKeyGetAuthHeader.mockReturnValue({ 'X-API-KEY': 'test-key' })
+
+      const header = await store.getAuthHeader()
+
+      expect(header).toEqual({ 'X-API-KEY': 'test-key' })
+    })
+
+    it('returns null when no auth method is available', async () => {
+      authStateCallback(null)
+
+      const header = await store.getAuthHeader()
+
+      expect(header).toBeNull()
+    })
+
+    it('skips workspace header when team_workspaces feature is disabled', async () => {
+      mockFeatureFlags.teamWorkspacesEnabled = false
+      mockWorkspaceAuthHeader.mockReturnValue({
+        Authorization: 'Bearer workspace-token'
+      })
+
+      const header = await store.getAuthHeader()
+
+      expect(header).toEqual({
+        Authorization: 'Bearer firebase-token'
+      })
+    })
+  })
+
+  describe('getAuthToken priority', () => {
+    it('returns workspace token when workspace is active and feature enabled', async () => {
+      mockFeatureFlags.teamWorkspacesEnabled = true
+      mockGetWorkspaceToken.mockReturnValue('workspace-raw-token')
+
+      const token = await store.getAuthToken()
+
+      expect(token).toBe('workspace-raw-token')
+    })
+
+    it('returns Firebase token when workspace token is not available', async () => {
+      mockFeatureFlags.teamWorkspacesEnabled = true
+      mockGetWorkspaceToken.mockReturnValue(undefined)
+
+      const token = await store.getAuthToken()
+
+      expect(token).toBe('firebase-token')
+    })
+  })
+})
diff --git a/src/stores/appModeStore.test.ts b/src/stores/appModeStore.test.ts
index 6ce6f697ff..d3a22987fc 100644
--- a/src/stores/appModeStore.test.ts
+++ b/src/stores/appModeStore.test.ts
@@ -1,4 +1,5 @@
 import { createTestingPinia } from '@pinia/testing'
+import { fromAny, fromPartial } from '@total-typescript/shoehorn'
 import { setActivePinia } from 'pinia'
 import { nextTick } from 'vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -82,6 +83,23 @@ function createBuilderWorkflow(
   return workflow as LoadedComfyWorkflow
 }
 
+/**
+ * Create a workflow with a persisted output so enterBuilder
+ * routes to builder:arrange (requires node 1 to resolve).
+ */
+function createBuilderWorkflowWithOutputs(
+  activeMode: string
+): LoadedComfyWorkflow {
+  mockResolveNode.mockReturnValue(fromAny({ id: 1 }))
+  const workflow = createBuilderWorkflow(activeMode)
+  workflow.changeTracker!.activeState!.extra ??= {}
+  workflow.changeTracker.activeState.extra.linearData = {
+    inputs: [],
+    outputs: [1]
+  }
+  return workflow
+}
+
 describe('appModeStore', () => {
   let workflowStore: ReturnType<typeof useWorkflowStore>
   let store: ReturnType<typeof useAppModeStore>
@@ -99,8 +117,7 @@ describe('appModeStore', () => {
 
   describe('enterBuilder', () => {
     it('navigates to builder:arrange when in app mode with outputs', () => {
-      workflowStore.activeWorkflow = createBuilderWorkflow('app')
-      store.selectedOutputs.push(1)
+      workflowStore.activeWorkflow = createBuilderWorkflowWithOutputs('app')
 
       store.enterBuilder()
 
@@ -195,25 +212,27 @@ describe('appModeStore', () => {
       outputs: number[]
     ) {
       const workflow = createBuilderWorkflow('app')
-      workflow.changeTracker = createMockChangeTracker({
-        activeState: {
-          last_node_id: 0,
-          last_link_id: 0,
-          nodes: [],
-          links: [],
-          groups: [],
-          config: {},
-          version: 0.4,
-          extra: { linearData: { inputs, outputs } }
-        }
-      } as unknown as Partial<ChangeTracker>)
+      workflow.changeTracker = createMockChangeTracker(
+        fromPartial<Partial<ChangeTracker>>({
+          activeState: {
+            last_node_id: 0,
+            last_link_id: 0,
+            nodes: [],
+            links: [],
+            groups: [],
+            config: {},
+            version: 0.4,
+            extra: { linearData: { inputs, outputs } }
+          }
+        })
+      )
       return workflow
     }
 
     it('removes inputs referencing deleted nodes on load', async () => {
       const node1 = mockNode(1)
       mockResolveNode.mockImplementation((id) =>
-        id == 1 ? (node1 as unknown as LGraphNode) : undefined
+        id == 1 ? fromAny<LGraphNode, unknown>(node1) : undefined
       )
 
       store.loadSelections({
@@ -226,10 +245,23 @@ describe('appModeStore', () => {
       expect(store.selectedInputs).toEqual([[1, 'prompt']])
     })
 
+    it('preserves config through pruning', () => {
+      const node1 = mockNode(1)
+      mockResolveNode.mockImplementation((id) =>
+        id == 1 ? fromAny<LGraphNode, unknown>(node1) : undefined
+      )
+
+      store.loadSelections({
+        inputs: [[1, 'prompt', { height: 150 }]]
+      })
+
+      expect(store.selectedInputs).toEqual([[1, 'prompt', { height: 150 }]])
+    })
+
     it('keeps inputs for existing nodes even if widget is missing', async () => {
       const node1 = mockNode(1)
       mockResolveNode.mockImplementation((id) =>
-        id == 1 ? (node1 as unknown as LGraphNode) : undefined
+        id == 1 ? fromAny<LGraphNode, unknown>(node1) : undefined
       )
 
       store.loadSelections({
@@ -248,7 +280,7 @@ describe('appModeStore', () => {
     it('removes outputs referencing deleted nodes on load', async () => {
       const node1 = mockNode(1)
       mockResolveNode.mockImplementation((id) =>
-        id == 1 ? (node1 as unknown as LGraphNode) : undefined
+        id == 1 ? fromAny<LGraphNode, unknown>(node1) : undefined
       )
 
       store.loadSelections({ outputs: [1, 99] })
@@ -271,7 +303,7 @@ describe('appModeStore', () => {
 
       // After graph configures, nodes become resolvable
       mockResolveNode.mockImplementation((id) =>
-        id == 1 ? (node1 as unknown as LGraphNode) : undefined
+        id == 1 ? fromAny<LGraphNode, unknown>(node1) : undefined
       )
       ;(app.rootGraph.events as EventTarget).dispatchEvent(
         new Event('configured')
@@ -332,29 +364,29 @@ describe('appModeStore', () => {
       })
     })
 
-    it('calls checkState when input is selected', async () => {
+    it('calls captureCanvasState when input is selected', async () => {
       const workflow = createBuilderWorkflow()
       workflowStore.activeWorkflow = workflow
       await nextTick()
-      vi.mocked(workflow.changeTracker!.checkState).mockClear()
+      vi.mocked(workflow.changeTracker!.captureCanvasState).mockClear()
 
       store.selectedInputs.push([42, 'prompt'])
       await nextTick()
 
-      expect(workflow.changeTracker!.checkState).toHaveBeenCalled()
+      expect(workflow.changeTracker!.captureCanvasState).toHaveBeenCalled()
     })
 
-    it('calls checkState when input is deselected', async () => {
+    it('calls captureCanvasState when input is deselected', async () => {
       const workflow = createBuilderWorkflow()
       workflowStore.activeWorkflow = workflow
       store.selectedInputs.push([42, 'prompt'])
       await nextTick()
-      vi.mocked(workflow.changeTracker!.checkState).mockClear()
+      vi.mocked(workflow.changeTracker!.captureCanvasState).mockClear()
 
       store.selectedInputs.splice(0, 1)
       await nextTick()
 
-      expect(workflow.changeTracker!.checkState).toHaveBeenCalled()
+      expect(workflow.changeTracker!.captureCanvasState).toHaveBeenCalled()
     })
 
     it('reflects input changes in linearData', async () => {
@@ -371,6 +403,46 @@ describe('appModeStore', () => {
     })
   })
 
+  describe('updateInputConfig', () => {
+    it('sets config on an existing input', () => {
+      store.selectedInputs.push([1, 'prompt'])
+
+      store.updateInputConfig(1 as NodeId, 'prompt', { height: 200 })
+
+      expect(store.selectedInputs[0][2]).toEqual({ height: 200 })
+    })
+
+    it('is a no-op when entry is not found', () => {
+      store.selectedInputs.push([1, 'prompt'])
+
+      store.updateInputConfig(99 as NodeId, 'prompt', { height: 200 })
+
+      expect(store.selectedInputs[0][2]).toBeUndefined()
+    })
+
+    it('matches nodeId with loose equality', () => {
+      store.selectedInputs.push(['1', 'prompt'])
+
+      store.updateInputConfig(1 as NodeId, 'prompt', { height: 200 })
+
+      expect(store.selectedInputs[0][2]).toEqual({ height: 200 })
+    })
+
+    it('triggers linearData sync watcher', async () => {
+      workflowStore.activeWorkflow = createBuilderWorkflow()
+      store.selectedInputs.push([42, 'prompt'])
+      await nextTick()
+
+      store.updateInputConfig(42 as NodeId, 'prompt', { height: 300 })
+      await nextTick()
+
+      expect(app.rootGraph.extra.linearData).toEqual({
+        inputs: [[42, 'prompt', { height: 300 }]],
+        outputs: []
+      })
+    })
+  })
+
   describe('autoEnableVueNodes', () => {
     it('enables Vue nodes when entering select mode with them disabled', async () => {
       mockSettings.store['Comfy.VueNodes.Enabled'] = false
@@ -422,8 +494,7 @@ describe('appModeStore', () => {
 
     it('does not enable Vue nodes when entering builder:arrange', async () => {
       mockSettings.store['Comfy.VueNodes.Enabled'] = false
-      workflowStore.activeWorkflow = createBuilderWorkflow('app')
-      store.selectedOutputs.push(1)
+      workflowStore.activeWorkflow = createBuilderWorkflowWithOutputs('app')
 
       store.enterBuilder()
       await nextTick()
diff --git a/src/stores/appModeStore.ts b/src/stores/appModeStore.ts
index aea313f937..56a648d1f7 100644
--- a/src/stores/appModeStore.ts
+++ b/src/stores/appModeStore.ts
@@ -5,7 +5,11 @@ import { useEventListener } from '@vueuse/core'
 import { useEmptyWorkflowDialog } from '@/components/builder/useEmptyWorkflowDialog'
 import { useAppMode } from '@/composables/useAppMode'
 import type { NodeId } from '@/lib/litegraph/src/LGraphNode'
-import type { LinearData } from '@/platform/workflow/management/stores/comfyWorkflow'
+import type {
+  InputWidgetConfig,
+  LinearData,
+  LinearInput
+} from '@/platform/workflow/management/stores/comfyWorkflow'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
@@ -29,7 +33,7 @@ export const useAppModeStore = defineStore('appMode', () => {
 
   const showVueNodeSwitchPopup = ref(false)
 
-  const selectedInputs = ref<[NodeId, string][]>([])
+  const selectedInputs = ref<LinearInput[]>([])
   const selectedOutputs = ref<NodeId[]>([])
   const hasOutputs = computed(() => !!selectedOutputs.value.length)
   const hasNodes = computed(() => {
@@ -89,7 +93,7 @@ export const useAppModeStore = defineStore('appMode', () => {
         inputs: [...data.inputs],
         outputs: [...data.outputs]
       }
-      workflowStore.activeWorkflow?.changeTracker?.checkState()
+      workflowStore.activeWorkflow?.changeTracker?.captureCanvasState()
     },
     { deep: true }
   )
@@ -132,6 +136,9 @@ export const useAppModeStore = defineStore('appMode', () => {
       return
     }
 
+    // Prune stale references
+    resetSelectedToWorkflow()
+
     useSidebarTabStore().activeSidebarTabId = null
 
     setMode(
@@ -157,6 +164,18 @@ export const useAppModeStore = defineStore('appMode', () => {
     if (index !== -1) selectedInputs.value.splice(index, 1)
   }
 
+  function updateInputConfig(
+    nodeId: NodeId,
+    widgetName: string,
+    config: InputWidgetConfig
+  ) {
+    const entry = selectedInputs.value.find(
+      ([id, name]) => nodeId == id && widgetName === name
+    )
+    if (!entry) return
+    entry[2] = { ...entry[2], ...config }
+  }
+
   return {
     enterBuilder,
     exitBuilder,
@@ -168,6 +187,7 @@ export const useAppModeStore = defineStore('appMode', () => {
     resetSelectedToWorkflow,
     selectedInputs,
     selectedOutputs,
+    updateInputConfig,
     showVueNodeSwitchPopup
   }
 })
diff --git a/src/stores/authStore.test.ts b/src/stores/authStore.test.ts
index 239b1c4949..0b4080bf04 100644
--- a/src/stores/authStore.test.ts
+++ b/src/stores/authStore.test.ts
@@ -730,6 +730,39 @@ describe('useAuthStore', () => {
     })
   })
 
+  describe('getAuthHeaderOrThrow', () => {
+    it('returns auth header when authenticated', async () => {
+      const header = await store.getAuthHeaderOrThrow()
+      expect(header).toEqual({ Authorization: 'Bearer mock-id-token' })
+    })
+
+    it('throws AuthStoreError when not authenticated', async () => {
+      authStateCallback(null)
+      mockApiKeyGetAuthHeader.mockReturnValue(null)
+
+      await expect(store.getAuthHeaderOrThrow()).rejects.toMatchObject({
+        name: 'AuthStoreError',
+        message: 'toastMessages.userNotAuthenticated'
+      })
+    })
+  })
+
+  describe('getFirebaseAuthHeaderOrThrow', () => {
+    it('returns Firebase auth header when authenticated', async () => {
+      const header = await store.getFirebaseAuthHeaderOrThrow()
+      expect(header).toEqual({ Authorization: 'Bearer mock-id-token' })
+    })
+
+    it('throws AuthStoreError when not authenticated', async () => {
+      authStateCallback(null)
+
+      await expect(store.getFirebaseAuthHeaderOrThrow()).rejects.toMatchObject({
+        name: 'AuthStoreError',
+        message: 'toastMessages.userNotAuthenticated'
+      })
+    })
+  })
+
   describe('createCustomer', () => {
     it('should succeed with API key auth when no Firebase user is present', async () => {
       authStateCallback(null)
diff --git a/src/stores/authStore.ts b/src/stores/authStore.ts
index 8452b91f88..378265fb09 100644
--- a/src/stores/authStore.ts
+++ b/src/stores/authStore.ts
@@ -22,10 +22,10 @@ import { useFirebaseAuth } from 'vuefire'
 
 import { getComfyApiBaseUrl } from '@/config/comfyApi'
 import { t } from '@/i18n'
-import { WORKSPACE_STORAGE_KEYS } from '@/platform/workspace/workspaceConstants'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 import { useDialogService } from '@/services/dialogService'
+import { useWorkspaceAuthStore } from '@/platform/workspace/stores/workspaceAuthStore'
 import { useApiKeyAuthStore } from '@/stores/apiKeyAuthStore'
 import type { AuthHeader } from '@/types/authTypes'
 import type { operations } from '@/types/comfyRegistryTypes'
@@ -110,15 +110,7 @@ export const useAuthStore = defineStore('auth', () => {
     isInitialized.value = true
     if (user === null) {
       lastTokenUserId.value = null
-
-      // Clear workspace sessionStorage on logout to prevent stale tokens
-      try {
-        sessionStorage.removeItem(WORKSPACE_STORAGE_KEYS.CURRENT_WORKSPACE)
-        sessionStorage.removeItem(WORKSPACE_STORAGE_KEYS.TOKEN)
-        sessionStorage.removeItem(WORKSPACE_STORAGE_KEYS.EXPIRES_AT)
-      } catch {
-        // Ignore sessionStorage errors (e.g., in private browsing mode)
-      }
+      useWorkspaceAuthStore().clearWorkspaceContext()
     }
 
     // Reset balance when auth state changes
@@ -175,21 +167,8 @@ export const useAuthStore = defineStore('auth', () => {
    */
   const getAuthHeader = async (): Promise<AuthHeader | null> => {
     if (flags.teamWorkspacesEnabled) {
-      const workspaceToken = sessionStorage.getItem(
-        WORKSPACE_STORAGE_KEYS.TOKEN
-      )
-      const expiresAt = sessionStorage.getItem(
-        WORKSPACE_STORAGE_KEYS.EXPIRES_AT
-      )
-
-      if (workspaceToken && expiresAt) {
-        const expiryTime = parseInt(expiresAt, 10)
-        if (Date.now() < expiryTime) {
-          return {
-            Authorization: `Bearer ${workspaceToken}`
-          }
-        }
-      }
+      const wsHeader = useWorkspaceAuthStore().getWorkspaceAuthHeader()
+      if (wsHeader) return wsHeader
     }
 
     const token = await getIdToken()
@@ -218,24 +197,29 @@ export const useAuthStore = defineStore('auth', () => {
    */
   const getAuthToken = async (): Promise<string | undefined> => {
     if (flags.teamWorkspacesEnabled) {
-      const workspaceToken = sessionStorage.getItem(
-        WORKSPACE_STORAGE_KEYS.TOKEN
-      )
-      const expiresAt = sessionStorage.getItem(
-        WORKSPACE_STORAGE_KEYS.EXPIRES_AT
-      )
-
-      if (workspaceToken && expiresAt) {
-        const expiryTime = parseInt(expiresAt, 10)
-        if (Date.now() < expiryTime) {
-          return workspaceToken
-        }
-      }
+      const wsToken = useWorkspaceAuthStore().getWorkspaceToken()
+      if (wsToken) return wsToken
     }
 
     return await getIdToken()
   }
 
+  const getAuthHeaderOrThrow = async (): Promise<AuthHeader> => {
+    const authHeader = await getAuthHeader()
+    if (!authHeader) {
+      throw new AuthStoreError(t('toastMessages.userNotAuthenticated'))
+    }
+    return authHeader
+  }
+
+  const getFirebaseAuthHeaderOrThrow = async (): Promise<AuthHeader> => {
+    const authHeader = await getFirebaseAuthHeader()
+    if (!authHeader) {
+      throw new AuthStoreError(t('toastMessages.userNotAuthenticated'))
+    }
+    return authHeader
+  }
+
   const fetchBalance = async (): Promise<GetCustomerBalanceResponse | null> => {
     isFetchingBalance.value = true
     try {
@@ -538,7 +522,9 @@ export const useAuthStore = defineStore('auth', () => {
     sendPasswordReset,
     updatePassword: _updatePassword,
     getAuthHeader,
+    getAuthHeaderOrThrow,
     getFirebaseAuthHeader,
+    getFirebaseAuthHeaderOrThrow,
     getAuthToken
   }
 })
diff --git a/src/stores/commandStore.test.ts b/src/stores/commandStore.test.ts
new file mode 100644
index 0000000000..d02ea454c9
--- /dev/null
+++ b/src/stores/commandStore.test.ts
@@ -0,0 +1,197 @@
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useCommandStore } from '@/stores/commandStore'
+
+vi.mock('@/composables/useErrorHandling', () => ({
+  useErrorHandling: () => ({
+    wrapWithErrorHandlingAsync:
+      (fn: () => Promise<void>, errorHandler?: (e: unknown) => void) =>
+      async () => {
+        try {
+          await fn()
+        } catch (e) {
+          if (errorHandler) errorHandler(e)
+          else throw e
+        }
+      }
+  })
+}))
+
+vi.mock('@/platform/keybindings/keybindingStore', () => ({
+  useKeybindingStore: () => ({
+    getKeybindingByCommandId: () => null
+  })
+}))
+
+describe('commandStore', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+  })
+
+  describe('registerCommand', () => {
+    it('registers a command by id', () => {
+      const store = useCommandStore()
+      store.registerCommand({
+        id: 'test.command',
+        function: vi.fn()
+      })
+      expect(store.isRegistered('test.command')).toBe(true)
+    })
+
+    it('warns on duplicate registration and overwrites with new function', async () => {
+      const store = useCommandStore()
+      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+      const originalFn = vi.fn()
+      const replacementFn = vi.fn()
+      store.registerCommand({ id: 'dup', function: originalFn })
+      store.registerCommand({ id: 'dup', function: replacementFn })
+
+      expect(warnSpy).toHaveBeenCalledWith('Command dup already registered')
+      warnSpy.mockRestore()
+
+      await store.getCommand('dup')?.function()
+      expect(replacementFn).toHaveBeenCalled()
+      expect(originalFn).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('getCommand', () => {
+    it('returns the registered command', () => {
+      const store = useCommandStore()
+      const fn = vi.fn()
+      store.registerCommand({ id: 'get.test', function: fn, label: 'Test' })
+      const cmd = store.getCommand('get.test')
+      expect(cmd).toBeDefined()
+      expect(cmd?.label).toBe('Test')
+    })
+
+    it('returns undefined for unregistered command', () => {
+      const store = useCommandStore()
+      expect(store.getCommand('nonexistent')).toBeUndefined()
+    })
+  })
+
+  describe('execute', () => {
+    it('executes a registered command', async () => {
+      const store = useCommandStore()
+      const fn = vi.fn()
+      store.registerCommand({ id: 'exec.test', function: fn })
+      await store.execute('exec.test')
+      expect(fn).toHaveBeenCalled()
+    })
+
+    it('throws for unregistered command', async () => {
+      const store = useCommandStore()
+      await expect(store.execute('missing')).rejects.toThrow(
+        'Command missing not found'
+      )
+    })
+
+    it('passes metadata to the command function', async () => {
+      const store = useCommandStore()
+      const fn = vi.fn()
+      store.registerCommand({ id: 'meta.test', function: fn })
+      await store.execute('meta.test', { metadata: { source: 'keyboard' } })
+      expect(fn).toHaveBeenCalledWith({ source: 'keyboard' })
+    })
+
+    it('calls errorHandler on failure', async () => {
+      const store = useCommandStore()
+      const error = new Error('fail')
+      store.registerCommand({
+        id: 'err.test',
+        function: () => {
+          throw error
+        }
+      })
+      const handler = vi.fn()
+      await store.execute('err.test', { errorHandler: handler })
+      expect(handler).toHaveBeenCalledWith(error)
+    })
+  })
+
+  describe('isRegistered', () => {
+    it('returns false for unregistered command', () => {
+      const store = useCommandStore()
+      expect(store.isRegistered('nope')).toBe(false)
+    })
+  })
+
+  describe('loadExtensionCommands', () => {
+    it('registers commands from an extension', () => {
+      const store = useCommandStore()
+      store.loadExtensionCommands({
+        name: 'test-ext',
+        commands: [
+          { id: 'ext.cmd1', function: vi.fn(), label: 'Cmd 1' },
+          { id: 'ext.cmd2', function: vi.fn(), label: 'Cmd 2' }
+        ]
+      })
+      expect(store.isRegistered('ext.cmd1')).toBe(true)
+      expect(store.isRegistered('ext.cmd2')).toBe(true)
+      expect(store.getCommand('ext.cmd1')?.source).toBe('test-ext')
+      expect(store.getCommand('ext.cmd2')?.source).toBe('test-ext')
+    })
+
+    it('skips extensions without commands', () => {
+      const store = useCommandStore()
+      store.loadExtensionCommands({ name: 'no-commands' })
+      expect(store.commands).toHaveLength(0)
+    })
+  })
+
+  describe('getCommand resolves dynamic properties', () => {
+    it('resolves label as function', () => {
+      const store = useCommandStore()
+      store.registerCommand({
+        id: 'label.fn',
+        function: vi.fn(),
+        label: () => 'Dynamic'
+      })
+      expect(store.getCommand('label.fn')?.label).toBe('Dynamic')
+    })
+
+    it('resolves tooltip as function', () => {
+      const store = useCommandStore()
+      store.registerCommand({
+        id: 'tip.fn',
+        function: vi.fn(),
+        tooltip: () => 'Dynamic tip'
+      })
+      expect(store.getCommand('tip.fn')?.tooltip).toBe('Dynamic tip')
+    })
+
+    it('uses explicit menubarLabel over label', () => {
+      const store = useCommandStore()
+      store.registerCommand({
+        id: 'mbl.explicit',
+        function: vi.fn(),
+        label: 'Label',
+        menubarLabel: 'Menu Label'
+      })
+      expect(store.getCommand('mbl.explicit')?.menubarLabel).toBe('Menu Label')
+    })
+
+    it('falls back menubarLabel to label', () => {
+      const store = useCommandStore()
+      store.registerCommand({
+        id: 'mbl.default',
+        function: vi.fn(),
+        label: 'My Label'
+      })
+      expect(store.getCommand('mbl.default')?.menubarLabel).toBe('My Label')
+    })
+  })
+
+  describe('formatKeySequence', () => {
+    it('returns empty string when command has no keybinding', () => {
+      const store = useCommandStore()
+      store.registerCommand({ id: 'no.kb', function: vi.fn() })
+      const cmd = store.getCommand('no.kb')!
+      expect(store.formatKeySequence(cmd)).toBe('')
+    })
+  })
+})
diff --git a/src/stores/executionErrorStore.test.ts b/src/stores/executionErrorStore.test.ts
index 10af3710a1..c793510425 100644
--- a/src/stores/executionErrorStore.test.ts
+++ b/src/stores/executionErrorStore.test.ts
@@ -1,3 +1,4 @@
+import { fromAny } from '@total-typescript/shoehorn'
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -350,6 +351,142 @@ describe('executionErrorStore — node error operations', () => {
   })
 })
 
+describe('surfaceMissingModels — silent option', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    mockShowErrorsTab.value = true
+  })
+
+  it('opens error overlay when silent is not specified and setting is enabled', () => {
+    const store = useExecutionErrorStore()
+    store.surfaceMissingModels([
+      fromAny({
+        name: 'model.safetensors',
+        nodeId: '1',
+        nodeType: 'Loader',
+        widgetName: 'ckpt',
+        isMissing: true,
+        isAssetSupported: false
+      })
+    ])
+
+    expect(store.isErrorOverlayOpen).toBe(true)
+  })
+
+  it('opens error overlay when silent is false and setting is enabled', () => {
+    const store = useExecutionErrorStore()
+    store.surfaceMissingModels(
+      [
+        fromAny({
+          name: 'model.safetensors',
+          nodeId: '1',
+          nodeType: 'Loader',
+          widgetName: 'ckpt',
+          isMissing: true,
+          isAssetSupported: false
+        })
+      ],
+      { silent: false }
+    )
+
+    expect(store.isErrorOverlayOpen).toBe(true)
+  })
+
+  it('does NOT open error overlay when silent is true', () => {
+    const store = useExecutionErrorStore()
+    store.surfaceMissingModels(
+      [
+        fromAny({
+          name: 'model.safetensors',
+          nodeId: '1',
+          nodeType: 'Loader',
+          widgetName: 'ckpt',
+          isMissing: true,
+          isAssetSupported: false
+        })
+      ],
+      { silent: true }
+    )
+
+    expect(store.isErrorOverlayOpen).toBe(false)
+  })
+
+  it('does NOT open error overlay for empty models even without silent', () => {
+    const store = useExecutionErrorStore()
+    store.surfaceMissingModels([])
+
+    expect(store.isErrorOverlayOpen).toBe(false)
+  })
+})
+
+describe('surfaceMissingMedia — silent option', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    mockShowErrorsTab.value = true
+  })
+
+  it('opens error overlay when silent is not specified and setting is enabled', () => {
+    const store = useExecutionErrorStore()
+    store.surfaceMissingMedia([
+      fromAny({
+        name: 'photo.png',
+        nodeId: '1',
+        nodeType: 'LoadImage',
+        widgetName: 'image',
+        mediaType: 'image',
+        isMissing: true
+      })
+    ])
+
+    expect(store.isErrorOverlayOpen).toBe(true)
+  })
+
+  it('opens error overlay when silent is false and setting is enabled', () => {
+    const store = useExecutionErrorStore()
+    store.surfaceMissingMedia(
+      [
+        fromAny({
+          name: 'photo.png',
+          nodeId: '1',
+          nodeType: 'LoadImage',
+          widgetName: 'image',
+          mediaType: 'image',
+          isMissing: true
+        })
+      ],
+      { silent: false }
+    )
+
+    expect(store.isErrorOverlayOpen).toBe(true)
+  })
+
+  it('does NOT open error overlay when silent is true', () => {
+    const store = useExecutionErrorStore()
+    store.surfaceMissingMedia(
+      [
+        fromAny({
+          name: 'photo.png',
+          nodeId: '1',
+          nodeType: 'LoadImage',
+          widgetName: 'image',
+          mediaType: 'image',
+          isMissing: true
+        })
+      ],
+      { silent: true }
+    )
+
+    expect(store.isErrorOverlayOpen).toBe(false)
+  })
+
+  it('does NOT open error overlay for empty media even without silent', () => {
+    const store = useExecutionErrorStore()
+    store.surfaceMissingMedia([])
+
+    expect(store.isErrorOverlayOpen).toBe(false)
+  })
+})
+
 describe('clearAllErrors', () => {
   let executionErrorStore: ReturnType<typeof useExecutionErrorStore>
   let missingNodesStore: ReturnType<typeof useMissingNodesErrorStore>
@@ -391,9 +528,9 @@ describe('clearAllErrors', () => {
         class_type: 'Test'
       }
     }
-    missingNodesStore.setMissingNodeTypes([
-      { type: 'MissingNode', hint: '' }
-    ] as unknown as MissingNodeType[])
+    missingNodesStore.setMissingNodeTypes(
+      fromAny<MissingNodeType[], unknown>([{ type: 'MissingNode', hint: '' }])
+    )
     executionErrorStore.showErrorOverlay()
 
     executionErrorStore.clearAllErrors()
diff --git a/src/stores/executionErrorStore.ts b/src/stores/executionErrorStore.ts
index 478679c53b..31c884d563 100644
--- a/src/stores/executionErrorStore.ts
+++ b/src/stores/executionErrorStore.ts
@@ -4,7 +4,9 @@ import { computed, ref } from 'vue'
 import { useNodeErrorFlagSync } from '@/composables/graph/useNodeErrorFlagSync'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
+import { useMissingMediaStore } from '@/platform/missingMedia/missingMediaStore'
 import type { MissingModelCandidate } from '@/platform/missingModel/types'
+import type { MissingMediaCandidate } from '@/platform/missingMedia/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
@@ -34,6 +36,7 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
   const canvasStore = useCanvasStore()
   const missingModelStore = useMissingModelStore()
   const missingNodesStore = useMissingNodesErrorStore()
+  const missingMediaStore = useMissingMediaStore()
 
   const lastNodeErrors = ref<Record<NodeId, NodeError> | null>(null)
   const lastExecutionError = ref<ExecutionErrorWsMessage | null>(null)
@@ -157,12 +160,17 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
       options
     )
     missingModelStore.removeMissingModelByWidget(executionId, widgetName)
+    missingMediaStore.removeMissingMediaByWidget(executionId, widgetName)
   }
 
-  /** Set missing models and open the error overlay if the Errors tab is enabled. */
-  function surfaceMissingModels(models: MissingModelCandidate[]) {
+  /** Set missing models and optionally open the error overlay. */
+  function surfaceMissingModels(
+    models: MissingModelCandidate[],
+    options?: { silent?: boolean }
+  ) {
     missingModelStore.setMissingModels(models)
     if (
+      !options?.silent &&
       models.length &&
       useSettingStore().get('Comfy.RightSidePanel.ShowErrorsTab')
     ) {
@@ -170,6 +178,21 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
     }
   }
 
+  /** Set missing media and optionally open the error overlay. */
+  function surfaceMissingMedia(
+    media: MissingMediaCandidate[],
+    options?: { silent?: boolean }
+  ) {
+    missingMediaStore.setMissingMedia(media)
+    if (
+      !options?.silent &&
+      media.length &&
+      useSettingStore().get('Comfy.RightSidePanel.ShowErrorsTab')
+    ) {
+      showErrorOverlay()
+    }
+  }
+
   const lastExecutionErrorNodeLocatorId = computed(() => {
     const err = lastExecutionError.value
     if (!err) return null
@@ -197,7 +220,8 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
       hasPromptError.value ||
       hasNodeError.value ||
       missingNodesStore.hasMissingNodes ||
-      missingModelStore.hasMissingModels
+      missingModelStore.hasMissingModels ||
+      missingMediaStore.hasMissingMedia
   )
 
   const allErrorExecutionIds = computed<string[]>(() => {
@@ -233,7 +257,8 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
       nodeErrorCount.value +
       executionErrorCount.value +
       missingNodesStore.missingNodeCount +
-      missingModelStore.missingModelCount
+      missingModelStore.missingModelCount +
+      missingMediaStore.missingMediaCount
   )
 
   /** Graph node IDs (as strings) that have errors in the current graph scope. */
@@ -326,7 +351,7 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
     return errorAncestorExecutionIds.value.has(execId)
   }
 
-  useNodeErrorFlagSync(lastNodeErrors, missingModelStore)
+  useNodeErrorFlagSync(lastNodeErrors, missingModelStore, missingMediaStore)
 
   return {
     // Raw state
@@ -360,6 +385,9 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
     // Missing model coordination (delegates to missingModelStore)
     surfaceMissingModels,
 
+    // Missing media coordination (delegates to missingMediaStore)
+    surfaceMissingMedia,
+
     // Lookup helpers
     getNodeErrors,
     slotHasError,
diff --git a/src/stores/executionStore.test.ts b/src/stores/executionStore.test.ts
index cf531463d4..535667cf9c 100644
--- a/src/stores/executionStore.test.ts
+++ b/src/stores/executionStore.test.ts
@@ -7,12 +7,21 @@ import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNod
 import { executionIdToNodeLocatorId } from '@/utils/graphTraversalUtil'
 
 // Create mock functions that will be shared
-const mockNodeExecutionIdToNodeLocatorId = vi.fn()
-const mockNodeIdToNodeLocatorId = vi.fn()
-const mockNodeLocatorIdToNodeExecutionId = vi.fn()
+const {
+  mockNodeExecutionIdToNodeLocatorId,
+  mockNodeIdToNodeLocatorId,
+  mockNodeLocatorIdToNodeExecutionId,
+  mockShowTextPreview
+} = vi.hoisted(() => ({
+  mockNodeExecutionIdToNodeLocatorId: vi.fn(),
+  mockNodeIdToNodeLocatorId: vi.fn(),
+  mockNodeLocatorIdToNodeExecutionId: vi.fn(),
+  mockShowTextPreview: vi.fn()
+}))
 
 import type * as WorkflowStoreModule from '@/platform/workflow/management/stores/workflowStore'
 import type { NodeProgressState } from '@/schemas/apiSchema'
+import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
 import { createMockLGraphNode } from '@/utils/__tests__/litegraphTestUtils'
 import { createTestingPinia } from '@pinia/testing'
 
@@ -38,7 +47,7 @@ declare global {
 
 vi.mock('@/composables/node/useNodeProgressText', () => ({
   useNodeProgressText: () => ({
-    showTextPreview: vi.fn()
+    showTextPreview: mockShowTextPreview
   })
 }))
 
@@ -431,6 +440,56 @@ describe('useExecutionStore - reconcileInitializingJobs', () => {
   })
 })
 
+describe('useExecutionStore - progress_text startup guard', () => {
+  let store: ReturnType<typeof useExecutionStore>
+
+  function fireProgressText(detail: {
+    nodeId: string
+    text: string
+    prompt_id?: string
+  }) {
+    const handler = apiEventHandlers.get('progress_text')
+    if (!handler) throw new Error('progress_text handler not bound')
+    handler(new CustomEvent('progress_text', { detail }))
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    apiEventHandlers.clear()
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    store = useExecutionStore()
+    store.bindExecutionEvents()
+  })
+
+  it('should ignore progress_text before the canvas is initialized', async () => {
+    const { useCanvasStore } =
+      await import('@/renderer/core/canvas/canvasStore')
+    useCanvasStore().canvas = null
+
+    expect(() =>
+      fireProgressText({
+        nodeId: '1',
+        text: 'warming up'
+      })
+    ).not.toThrow()
+
+    expect(mockShowTextPreview).not.toHaveBeenCalled()
+  })
+
+  it('should call showTextPreview when canvas is available', async () => {
+    const mockNode = createMockLGraphNode({ id: 1 })
+    const { useCanvasStore } =
+      await import('@/renderer/core/canvas/canvasStore')
+    useCanvasStore().canvas = {
+      graph: { getNodeById: vi.fn(() => mockNode) }
+    } as unknown as LGraphCanvas
+
+    fireProgressText({ nodeId: '1', text: 'warming up' })
+
+    expect(mockShowTextPreview).toHaveBeenCalledWith(mockNode, 'warming up')
+  })
+})
+
 describe('useExecutionErrorStore - Node Error Lookups', () => {
   let store: ReturnType<typeof useExecutionErrorStore>
 
diff --git a/src/stores/executionStore.ts b/src/stores/executionStore.ts
index bbe42f227a..f69490c7a6 100644
--- a/src/stores/executionStore.ts
+++ b/src/stores/executionStore.ts
@@ -527,7 +527,7 @@ export const useExecutionStore = defineStore('execution', () => {
     // Handle execution node IDs for subgraphs
     const currentId = getNodeIdIfExecuting(nodeId)
     if (!currentId) return
-    const node = canvasStore.getCanvas().graph?.getNodeById(currentId)
+    const node = canvasStore.canvas?.graph?.getNodeById(currentId)
     if (!node) return
 
     useNodeProgressText().showTextPreview(node, text)
diff --git a/src/stores/extensionStore.test.ts b/src/stores/extensionStore.test.ts
new file mode 100644
index 0000000000..7c2f97f66a
--- /dev/null
+++ b/src/stores/extensionStore.test.ts
@@ -0,0 +1,152 @@
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useExtensionStore } from '@/stores/extensionStore'
+
+describe('extensionStore', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+  })
+
+  describe('registerExtension', () => {
+    it('registers an extension by name', () => {
+      const store = useExtensionStore()
+      store.registerExtension({ name: 'test.ext' })
+      expect(store.isExtensionInstalled('test.ext')).toBe(true)
+    })
+
+    it('throws for extension without name', () => {
+      const store = useExtensionStore()
+      expect(() => store.registerExtension({ name: '' })).toThrow(
+        "Extensions must have a 'name' property."
+      )
+    })
+
+    it('throws for duplicate registration', () => {
+      const store = useExtensionStore()
+      store.registerExtension({ name: 'dup' })
+      expect(() => store.registerExtension({ name: 'dup' })).toThrow(
+        "Extension named 'dup' already registered."
+      )
+    })
+
+    it('warns when registering a disabled extension but still installs it', () => {
+      const store = useExtensionStore()
+      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+      try {
+        store.loadDisabledExtensionNames(['disabled.ext'])
+        store.registerExtension({ name: 'disabled.ext' })
+        expect(warnSpy).toHaveBeenCalledWith(
+          'Extension disabled.ext is disabled.'
+        )
+        expect(store.isExtensionInstalled('disabled.ext')).toBe(true)
+        expect(store.isExtensionEnabled('disabled.ext')).toBe(false)
+      } finally {
+        warnSpy.mockRestore()
+      }
+    })
+  })
+
+  describe('isExtensionInstalled', () => {
+    it('returns false for uninstalled extension', () => {
+      const store = useExtensionStore()
+      expect(store.isExtensionInstalled('missing')).toBe(false)
+    })
+  })
+
+  describe('isExtensionEnabled / loadDisabledExtensionNames', () => {
+    it('all extensions are enabled by default', () => {
+      const store = useExtensionStore()
+      store.registerExtension({ name: 'fresh' })
+      expect(store.isExtensionEnabled('fresh')).toBe(true)
+    })
+
+    it('disables extensions from provided list', () => {
+      const store = useExtensionStore()
+      store.loadDisabledExtensionNames(['off.ext'])
+      store.registerExtension({ name: 'off.ext' })
+      expect(store.isExtensionEnabled('off.ext')).toBe(false)
+    })
+
+    it('always disables hardcoded extensions', () => {
+      const store = useExtensionStore()
+      store.loadDisabledExtensionNames([])
+      store.registerExtension({ name: 'pysssss.Locking' })
+      store.registerExtension({ name: 'regular.ext' })
+
+      expect(store.isExtensionEnabled('pysssss.Locking')).toBe(false)
+      expect(store.isExtensionEnabled('pysssss.SnapToGrid')).toBe(false)
+      expect(store.isExtensionEnabled('pysssss.FaviconStatus')).toBe(false)
+      expect(store.isExtensionEnabled('KJNodes.browserstatus')).toBe(false)
+      expect(store.isExtensionEnabled('regular.ext')).toBe(true)
+    })
+  })
+
+  describe('enabledExtensions', () => {
+    it('filters out disabled extensions', () => {
+      const store = useExtensionStore()
+      store.loadDisabledExtensionNames(['ext.off'])
+      store.registerExtension({ name: 'ext.on' })
+      store.registerExtension({ name: 'ext.off' })
+
+      const enabled = store.enabledExtensions
+      expect(enabled).toHaveLength(1)
+      expect(enabled[0].name).toBe('ext.on')
+    })
+  })
+
+  describe('isExtensionReadOnly', () => {
+    it('returns true for always-disabled extensions', () => {
+      const store = useExtensionStore()
+      expect(store.isExtensionReadOnly('pysssss.Locking')).toBe(true)
+    })
+
+    it('returns false for normal extensions', () => {
+      const store = useExtensionStore()
+      expect(store.isExtensionReadOnly('some.custom.ext')).toBe(false)
+    })
+  })
+
+  describe('inactiveDisabledExtensionNames', () => {
+    it('returns disabled names not currently installed', () => {
+      const store = useExtensionStore()
+      store.loadDisabledExtensionNames(['ghost.ext', 'installed.ext'])
+      store.registerExtension({ name: 'installed.ext' })
+
+      expect(store.inactiveDisabledExtensionNames).toContain('ghost.ext')
+      expect(store.inactiveDisabledExtensionNames).not.toContain(
+        'installed.ext'
+      )
+    })
+  })
+
+  describe('core extensions', () => {
+    it('captures current extensions as core', () => {
+      const store = useExtensionStore()
+      store.registerExtension({ name: 'core.a' })
+      store.registerExtension({ name: 'core.b' })
+      store.captureCoreExtensions()
+
+      expect(store.isCoreExtension('core.a')).toBe(true)
+      expect(store.isCoreExtension('core.b')).toBe(true)
+    })
+
+    it('identifies third-party extensions registered after capture', () => {
+      const store = useExtensionStore()
+      store.registerExtension({ name: 'core.x' })
+      store.captureCoreExtensions()
+
+      expect(store.hasThirdPartyExtensions).toBe(false)
+
+      store.registerExtension({ name: 'third.party' })
+      expect(store.hasThirdPartyExtensions).toBe(true)
+    })
+
+    it('returns false for isCoreExtension before capture', () => {
+      const store = useExtensionStore()
+      store.registerExtension({ name: 'ext.pre' })
+      expect(store.isCoreExtension('ext.pre')).toBe(false)
+    })
+  })
+})
diff --git a/src/stores/nodeOutputStore.test.ts b/src/stores/nodeOutputStore.test.ts
index 8745cafb4f..ac87c2a865 100644
--- a/src/stores/nodeOutputStore.test.ts
+++ b/src/stores/nodeOutputStore.test.ts
@@ -1,4 +1,5 @@
 import { createTestingPinia } from '@pinia/testing'
+import { fromAny } from '@total-typescript/shoehorn'
 import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -31,11 +32,11 @@ vi.mock('@/scripts/app', () => ({
 }))
 
 const createMockNode = (overrides: Record<string, unknown> = {}): LGraphNode =>
-  ({
+  fromAny<LGraphNode, unknown>({
     id: 1,
     type: 'TestNode',
     ...overrides
-  }) as Partial<LGraphNode> as LGraphNode
+  })
 
 const createMockOutputs = (
   images?: ExecutedWsMessage['output']['images']
@@ -623,7 +624,7 @@ describe('nodeOutputStore setNodeOutputs (widget path)', () => {
   it('should return early for null node', () => {
     const store = useNodeOutputStore()
 
-    store.setNodeOutputs(null as unknown as LGraphNode, 'test.png')
+    store.setNodeOutputs(fromAny<LGraphNode, unknown>(null), 'test.png')
 
     expect(Object.keys(store.nodeOutputs)).toHaveLength(0)
   })
diff --git a/src/stores/nodeOutputStore.ts b/src/stores/nodeOutputStore.ts
index 51e0105d4d..74cdcdedeb 100644
--- a/src/stores/nodeOutputStore.ts
+++ b/src/stores/nodeOutputStore.ts
@@ -261,6 +261,17 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
   ) {
     const nodeLocatorId = executionIdToNodeLocatorId(app.rootGraph, executionId)
     if (!nodeLocatorId) return
+    setNodePreviewsByLocatorId(nodeLocatorId, previewImages)
+    latestPreview.value = previewImages
+  }
+
+  /**
+   * Set node preview images by NodeLocatorId directly.
+   */
+  function setNodePreviewsByLocatorId(
+    nodeLocatorId: NodeLocatorId,
+    previewImages: string[]
+  ) {
     const existingPreviews = app.nodePreviewImages[nodeLocatorId]
     if (scheduledRevoke[nodeLocatorId]) {
       scheduledRevoke[nodeLocatorId].stop()
@@ -274,7 +285,6 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     for (const url of previewImages) {
       retainSharedObjectUrl(url)
     }
-    latestPreview.value = previewImages
     app.nodePreviewImages[nodeLocatorId] = previewImages
     nodePreviewImages.value[nodeLocatorId] = previewImages
   }
@@ -290,22 +300,7 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     nodeId: string | number,
     previewImages: string[]
   ) {
-    const nodeLocatorId = nodeIdToNodeLocatorId(nodeId)
-    const existingPreviews = app.nodePreviewImages[nodeLocatorId]
-    if (scheduledRevoke[nodeLocatorId]) {
-      scheduledRevoke[nodeLocatorId].stop()
-      delete scheduledRevoke[nodeLocatorId]
-    }
-    if (existingPreviews?.[Symbol.iterator]) {
-      for (const url of existingPreviews) {
-        releaseSharedObjectUrl(url)
-      }
-    }
-    for (const url of previewImages) {
-      retainSharedObjectUrl(url)
-    }
-    app.nodePreviewImages[nodeLocatorId] = previewImages
-    nodePreviewImages.value[nodeLocatorId] = previewImages
+    setNodePreviewsByLocatorId(nodeIdToNodeLocatorId(nodeId), previewImages)
   }
 
   /**
@@ -486,6 +481,7 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     setNodeOutputs,
     setNodeOutputsByExecutionId,
     setNodePreviewsByExecutionId,
+    setNodePreviewsByLocatorId,
     setNodePreviewsByNodeId,
     updateNodeImages,
     refreshNodeOutputs,
@@ -493,6 +489,7 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
 
     // Cleanup
     revokePreviewsByExecutionId,
+    revokePreviewsByLocatorId,
     revokeAllPreviews,
     revokeSubgraphPreviews,
     removeNodeOutputs,
diff --git a/src/stores/queueStore.loadWorkflow.test.ts b/src/stores/queueStore.loadWorkflow.test.ts
index 965c16127c..313681a700 100644
--- a/src/stores/queueStore.loadWorkflow.test.ts
+++ b/src/stores/queueStore.loadWorkflow.test.ts
@@ -1,4 +1,5 @@
 import { createTestingPinia } from '@pinia/testing'
+import { fromPartial } from '@total-typescript/shoehorn'
 import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -8,8 +9,8 @@ import type {
 } from '@/platform/remote/comfyui/jobs/jobTypes'
 import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type { ComfyApp } from '@/scripts/app'
-import { TaskItemImpl } from '@/stores/queueStore'
 import * as jobOutputCache from '@/services/jobOutputCache'
+import { TaskItemImpl } from '@/stores/queueStore'
 
 vi.mock('@/services/extensionService', () => ({
   useExtensionService: vi.fn(() => ({
@@ -76,13 +77,13 @@ describe('TaskItemImpl.loadWorkflow - workflow fetching', () => {
     vi.clearAllMocks()
 
     mockFetchApi = vi.fn()
-    mockApp = {
+    mockApp = fromPartial<ComfyApp>({
       loadGraphData: vi.fn(),
       nodeOutputs: {},
       api: {
         fetchApi: mockFetchApi
       }
-    } as unknown as ComfyApp
+    })
   })
 
   it('should fetch workflow from API for history tasks', async () => {
diff --git a/src/stores/resultItemParsing.test.ts b/src/stores/resultItemParsing.test.ts
index 6a7b8deca2..fa3a29f55f 100644
--- a/src/stores/resultItemParsing.test.ts
+++ b/src/stores/resultItemParsing.test.ts
@@ -1,3 +1,4 @@
+import { fromPartial } from '@total-typescript/shoehorn'
 import { describe, expect, it } from 'vitest'
 
 import type { NodeExecutionOutput } from '@/schemas/apiSchema'
@@ -108,10 +109,10 @@ describe(parseNodeOutput, () => {
   })
 
   it('excludes non-ResultItem array items', () => {
-    const output = {
+    const output = fromPartial<NodeExecutionOutput>({
       images: [{ filename: 'img.png', subfolder: '', type: 'output' }],
       custom_data: [{ randomKey: 123 }]
-    } as unknown as NodeExecutionOutput
+    })
 
     const result = parseNodeOutput('1', output)
 
@@ -120,12 +121,12 @@ describe(parseNodeOutput, () => {
   })
 
   it('accepts items with filename but no subfolder', () => {
-    const output = {
+    const output = fromPartial<NodeExecutionOutput>({
       images: [
         { filename: 'valid.png', subfolder: '', type: 'output' },
         { filename: 'no-subfolder.png' }
       ]
-    } as unknown as NodeExecutionOutput
+    })
 
     const result = parseNodeOutput('1', output)
 
@@ -136,12 +137,12 @@ describe(parseNodeOutput, () => {
   })
 
   it('excludes items missing filename', () => {
-    const output = {
+    const output = fromPartial<NodeExecutionOutput>({
       images: [
         { filename: 'valid.png', subfolder: '', type: 'output' },
         { subfolder: '', type: 'output' }
       ]
-    } as unknown as NodeExecutionOutput
+    })
 
     const result = parseNodeOutput('1', output)
 
diff --git a/src/stores/subgraphNavigationStore.test.ts b/src/stores/subgraphNavigationStore.test.ts
index 1770b40b4c..f56fd46702 100644
--- a/src/stores/subgraphNavigationStore.test.ts
+++ b/src/stores/subgraphNavigationStore.test.ts
@@ -1,15 +1,15 @@
 import { createTestingPinia } from '@pinia/testing'
+import { fromPartial } from '@total-typescript/shoehorn'
 import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 
-import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import type { Subgraph } from '@/lib/litegraph/src/LGraph'
 import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { app } from '@/scripts/app'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 
-import type { Subgraph } from '@/lib/litegraph/src/LGraph'
-
 type MockSubgraph = Pick<Subgraph, 'id' | 'rootGraph' | '_nodes' | 'nodes'>
 
 function createMockSubgraph(id: string, rootGraph = app.rootGraph): Subgraph {
@@ -20,7 +20,7 @@ function createMockSubgraph(id: string, rootGraph = app.rootGraph): Subgraph {
     nodes: []
   } satisfies MockSubgraph
 
-  return mockSubgraph as unknown as Subgraph
+  return fromPartial<Subgraph>(mockSubgraph)
 }
 
 vi.mock('@/scripts/app', () => {
@@ -67,6 +67,7 @@ vi.mock('@vueuse/router', () => ({ useRouteHash: vi.fn() }))
 describe('useSubgraphNavigationStore', () => {
   beforeEach(() => {
     setActivePinia(createTestingPinia({ stubActions: false }))
+    vi.resetAllMocks()
     app.rootGraph.subgraphs.clear()
     app.canvas.subgraph = undefined
     app.canvas.ds.scale = 1
@@ -74,7 +75,6 @@ describe('useSubgraphNavigationStore', () => {
     app.canvas.ds.state.scale = 1
     app.canvas.ds.state.offset = [0, 0]
     app.graph.getNodeById = vi.fn()
-    vi.resetAllMocks()
   })
 
   it('should not clear navigation stack when workflow internal state changes', async () => {
@@ -82,11 +82,11 @@ describe('useSubgraphNavigationStore', () => {
     const workflowStore = useWorkflowStore()
 
     // Mock a workflow
-    const mockWorkflow = {
+    const mockWorkflow = fromPartial<ComfyWorkflow>({
       path: 'test-workflow.json',
       filename: 'test-workflow.json',
       changeTracker: null
-    } as ComfyWorkflow
+    })
 
     // Set the active workflow (cast to bypass TypeScript check in test)
     workflowStore.activeWorkflow =
@@ -113,15 +113,15 @@ describe('useSubgraphNavigationStore', () => {
     const workflowStore = useWorkflowStore()
     const { findSubgraphPathById } = await import('@/utils/graphTraversalUtil')
 
-    const workflow1 = {
+    const workflow1 = fromPartial<ComfyWorkflow>({
       path: 'workflow1.json',
       filename: 'workflow1.json'
-    } as ComfyWorkflow
+    })
 
-    const workflow2 = {
+    const workflow2 = fromPartial<ComfyWorkflow>({
       path: 'workflow2.json',
       filename: 'workflow2.json'
-    } as ComfyWorkflow
+    })
 
     const sub1 = createMockSubgraph('sub-1')
     const sub2 = createMockSubgraph('sub-2')
@@ -165,10 +165,10 @@ describe('useSubgraphNavigationStore', () => {
     const workflowStore = useWorkflowStore()
     const { findSubgraphPathById } = await import('@/utils/graphTraversalUtil')
 
-    const workflow1 = {
+    const workflow1 = fromPartial<ComfyWorkflow>({
       path: 'workflow1.json',
       filename: 'workflow1.json'
-    } as ComfyWorkflow
+    })
 
     const workflow1Subgraph = createMockSubgraph('sub-1')
 
@@ -185,10 +185,10 @@ describe('useSubgraphNavigationStore', () => {
 
     expect(navigationStore.exportState()).toEqual([workflow1Subgraph.id])
 
-    const workflow2 = {
+    const workflow2 = fromPartial<ComfyWorkflow>({
       path: 'workflow2.json',
       filename: 'workflow2.json'
-    } as ComfyWorkflow
+    })
 
     app.canvas.subgraph = undefined
 
@@ -216,6 +216,32 @@ describe('useSubgraphNavigationStore', () => {
     expect(navigationStore.navigationStack).toEqual([])
   })
 
+  it('should fall back to the active subgraph id when path lookup fails during navigation updates', async () => {
+    const navigationStore = useSubgraphNavigationStore()
+    const workflowStore = useWorkflowStore()
+    const { findSubgraphPathById } = await import('@/utils/graphTraversalUtil')
+
+    const unreachableSubgraph = createMockSubgraph('orphan-subgraph', app.graph)
+
+    app.graph.subgraphs.set(unreachableSubgraph.id, unreachableSubgraph)
+    vi.mocked(findSubgraphPathById).mockReturnValue(null)
+
+    const mockWorkflow = fromPartial<ComfyWorkflow>({
+      path: 'test-workflow.json',
+      filename: 'test-workflow.json'
+    })
+
+    workflowStore.activeWorkflow =
+      mockWorkflow as typeof workflowStore.activeWorkflow
+
+    app.canvas.subgraph = unreachableSubgraph
+    workflowStore.updateActiveGraph()
+    await nextTick()
+
+    expect(navigationStore.exportState()).toEqual([unreachableSubgraph.id])
+    expect(navigationStore.navigationStack).toEqual([unreachableSubgraph])
+  })
+
   it('should clear navigation when activeSubgraph becomes undefined', async () => {
     const navigationStore = useSubgraphNavigationStore()
     const workflowStore = useWorkflowStore()
@@ -228,10 +254,10 @@ describe('useSubgraphNavigationStore', () => {
     app.graph.subgraphs.set('subgraph-1', mockSubgraph)
 
     // First set an active workflow
-    const mockWorkflow = {
+    const mockWorkflow = fromPartial<ComfyWorkflow>({
       path: 'test-workflow.json',
       filename: 'test-workflow.json'
-    } as ComfyWorkflow
+    })
 
     workflowStore.activeWorkflow =
       mockWorkflow as typeof workflowStore.activeWorkflow
diff --git a/src/stores/subgraphNavigationStore.ts b/src/stores/subgraphNavigationStore.ts
index df899717e4..0a5b7feb8a 100644
--- a/src/stores/subgraphNavigationStore.ts
+++ b/src/stores/subgraphNavigationStore.ts
@@ -9,8 +9,9 @@ import type { Subgraph } from '@/lib/litegraph/src/litegraph'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useLitegraphService } from '@/services/litegraphService'
+import { requestSlotLayoutSyncForAllNodes } from '@/renderer/extensions/vueNodes/composables/useSlotElementTracking'
 import { app } from '@/scripts/app'
+import { useLitegraphService } from '@/services/litegraphService'
 import { findSubgraphPathById } from '@/utils/graphTraversalUtil'
 import { isNonNullish, isSubgraph } from '@/utils/typeGuardUtil'
 
@@ -138,12 +139,17 @@ export const useSubgraphNavigationStore = defineStore(
         return
       }
 
-      // Cache miss — fit to content after the canvas has the new graph.
-      // rAF fires after layout + paint, when nodes are positioned.
-      const expectedGraphId = graphId
+      // First visit — fit to content so subgraph nodes are visible
       requestAnimationFrame(() => {
-        if (getActiveGraphId() !== expectedGraphId) return
+        if (getActiveGraphId() !== graphId) return
+        if (!canvas.graph?.nodes?.length) return
         useLitegraphService().fitView()
+        // fitView changes scale/offset, so re-sync slot positions for
+        // collapsed nodes whose DOM-relative measurement is now stale.
+        requestAnimationFrame(() => {
+          if (getActiveGraphId() !== graphId) return
+          requestSlotLayoutSyncForAllNodes()
+        })
       })
     }
 
diff --git a/src/stores/subgraphNavigationStore.viewport.test.ts b/src/stores/subgraphNavigationStore.viewport.test.ts
index 448b4ab84f..51dd745135 100644
--- a/src/stores/subgraphNavigationStore.viewport.test.ts
+++ b/src/stores/subgraphNavigationStore.viewport.test.ts
@@ -1,6 +1,6 @@
 import { createTestingPinia } from '@pinia/testing'
 import { setActivePinia } from 'pinia'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 
 import type { LGraph, Subgraph } from '@/lib/litegraph/src/litegraph'
@@ -12,9 +12,13 @@ import {
   VIEWPORT_CACHE_MAX_SIZE
 } from '@/stores/subgraphNavigationStore'
 
-const { mockSetDirty } = vi.hoisted(() => ({
-  mockSetDirty: vi.fn()
-}))
+const { mockSetDirty, mockFitView, mockRequestSlotSyncAll } = vi.hoisted(
+  () => ({
+    mockSetDirty: vi.fn(),
+    mockFitView: vi.fn(),
+    mockRequestSlotSyncAll: vi.fn()
+  })
+)
 
 vi.mock('@/scripts/app', () => {
   const mockCanvas = {
@@ -24,8 +28,11 @@ vi.mock('@/scripts/app', () => {
       scale: 1,
       offset: [0, 0],
       state: { scale: 1, offset: [0, 0] },
-      fitToBounds: vi.fn()
+      fitToBounds: vi.fn(),
+      visible_area: [0, 0, 1000, 1000],
+      computeVisibleArea: vi.fn()
     },
+    viewport: [0, 0, 1000, 1000],
     setDirty: mockSetDirty,
     get empty() {
       return true
@@ -58,13 +65,17 @@ vi.mock('@/renderer/core/canvas/canvasStore', () => ({
 }))
 vi.mock('@vueuse/router', () => ({ useRouteHash: vi.fn() }))
 
-const { mockFitView } = vi.hoisted(() => ({
-  mockFitView: vi.fn()
-}))
 vi.mock('@/services/litegraphService', () => ({
   useLitegraphService: () => ({ fitView: mockFitView })
 }))
 
+vi.mock(
+  '@/renderer/extensions/vueNodes/composables/useSlotElementTracking',
+  () => ({
+    requestSlotLayoutSyncForAllNodes: mockRequestSlotSyncAll
+  })
+)
+
 const mockCanvas = app.canvas
 
 let rafCallbacks: FrameRequestCallback[] = []
@@ -85,6 +96,7 @@ describe('useSubgraphNavigationStore - Viewport Persistence', () => {
     mockCanvas.ds.state.offset = [0, 0]
     mockSetDirty.mockClear()
     mockFitView.mockClear()
+    mockRequestSlotSyncAll.mockClear()
   })
 
   afterEach(() => {
@@ -179,21 +191,88 @@ describe('useSubgraphNavigationStore - Viewport Persistence', () => {
       expect(rafCallbacks).toHaveLength(1)
     })
 
-    it('calls fitView on cache miss after rAF fires', () => {
+    it('calls fitView on cache miss when graph has nodes', () => {
       const store = useSubgraphNavigationStore()
-      // Ensure no cached entry
       store.viewportCache.delete(':root')
 
-      // Use the root graph ID so the stale-guard passes
+      const mockGraph = app.graph as { nodes: unknown[]; _nodes: unknown[] }
+      mockGraph.nodes = [{ pos: [0, 0], size: [100, 100] }]
+      mockGraph._nodes = mockGraph.nodes
+
       store.restoreViewport('root')
 
       expect(mockFitView).not.toHaveBeenCalled()
       expect(rafCallbacks).toHaveLength(1)
 
-      // Simulate rAF firing — active graph still matches
       rafCallbacks[0](performance.now())
 
       expect(mockFitView).toHaveBeenCalledOnce()
+
+      mockGraph.nodes = []
+      mockGraph._nodes = []
+    })
+
+    it('does not call fitView on cache miss when graph has no nodes', () => {
+      const store = useSubgraphNavigationStore()
+      store.viewportCache.delete(':root')
+
+      const mockGraph = app.graph as { nodes: unknown[]; _nodes: unknown[] }
+      mockGraph.nodes = []
+      mockGraph._nodes = []
+
+      store.restoreViewport('root')
+
+      expect(rafCallbacks).toHaveLength(1)
+      rafCallbacks[0](performance.now())
+
+      expect(mockFitView).not.toHaveBeenCalled()
+    })
+
+    it('re-syncs all slot layouts on the frame after fitView', () => {
+      const store = useSubgraphNavigationStore()
+      store.viewportCache.delete(':root')
+
+      const mockGraph = app.graph as { nodes: unknown[]; _nodes: unknown[] }
+      mockGraph.nodes = [{ pos: [0, 0], size: [100, 100] }]
+      mockGraph._nodes = mockGraph.nodes
+
+      store.restoreViewport('root')
+      expect(rafCallbacks).toHaveLength(1)
+
+      // Outer RAF runs fitView and schedules the inner RAF
+      rafCallbacks[0](performance.now())
+      expect(mockFitView).toHaveBeenCalledOnce()
+      expect(mockRequestSlotSyncAll).not.toHaveBeenCalled()
+      expect(rafCallbacks).toHaveLength(2)
+
+      // Inner RAF re-syncs slots after fitView's transform has been applied
+      rafCallbacks[1](performance.now())
+      expect(mockRequestSlotSyncAll).toHaveBeenCalledOnce()
+
+      mockGraph.nodes = []
+      mockGraph._nodes = []
+    })
+
+    it('skips slot re-sync if active graph changed between fitView and inner RAF', () => {
+      const store = useSubgraphNavigationStore()
+      store.viewportCache.delete(':root')
+
+      const mockGraph = app.graph as { nodes: unknown[]; _nodes: unknown[] }
+      mockGraph.nodes = [{ pos: [0, 0], size: [100, 100] }]
+      mockGraph._nodes = mockGraph.nodes
+
+      store.restoreViewport('root')
+      rafCallbacks[0](performance.now())
+      expect(mockFitView).toHaveBeenCalledOnce()
+
+      // User navigated away before the inner RAF fired
+      mockCanvas.subgraph = { id: 'different-graph' } as never
+      rafCallbacks[1](performance.now())
+
+      expect(mockRequestSlotSyncAll).not.toHaveBeenCalled()
+
+      mockGraph.nodes = []
+      mockGraph._nodes = []
     })
 
     it('skips fitView if active graph changed before rAF fires', () => {
diff --git a/src/stores/subgraphStore.test.ts b/src/stores/subgraphStore.test.ts
index 99e3078775..a34e459442 100644
--- a/src/stores/subgraphStore.test.ts
+++ b/src/stores/subgraphStore.test.ts
@@ -1,22 +1,21 @@
+import { createTestingPinia } from '@pinia/testing'
+import { fromAny, fromPartial } from '@total-typescript/shoehorn'
 import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import type { ComfyNodeDef as ComfyNodeDefV1 } from '@/schemas/nodeDefSchema'
-import type { GlobalSubgraphData } from '@/scripts/api'
-import type { ExportedSubgraph } from '@/lib/litegraph/src/types/serialisation'
-import { TemplateIncludeOnDistributionEnum } from '@/platform/workflow/templates/types/template'
-import { api } from '@/scripts/api'
-import { app as comfyApp } from '@/scripts/app'
-import { useNodeDefStore } from '@/stores/nodeDefStore'
-import { useSubgraphStore } from '@/stores/subgraphStore'
-
-import { useLitegraphService } from '@/services/litegraphService'
-
 import {
   createTestSubgraph,
   createTestSubgraphNode
 } from '@/lib/litegraph/src/subgraph/__fixtures__/subgraphHelpers'
-import { createTestingPinia } from '@pinia/testing'
+import type { ExportedSubgraph } from '@/lib/litegraph/src/types/serialisation'
+import { TemplateIncludeOnDistributionEnum } from '@/platform/workflow/templates/types/template'
+import type { ComfyNodeDef as ComfyNodeDefV1 } from '@/schemas/nodeDefSchema'
+import type { GlobalSubgraphData } from '@/scripts/api'
+import { api } from '@/scripts/api'
+import { app as comfyApp } from '@/scripts/app'
+import { useLitegraphService } from '@/services/litegraphService'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { useSubgraphStore } from '@/stores/subgraphStore'
 
 const mockDistributionTypes = vi.hoisted(() => ({
   isCloud: false,
@@ -108,12 +107,12 @@ describe('useSubgraphStore', () => {
     graph.add(subgraphNode)
     vi.mocked(comfyApp.canvas).selectedItems = new Set([subgraphNode])
     vi.mocked(comfyApp.canvas)._serializeItems = vi.fn(() => {
-      const serializedSubgraph = {
+      const serializedSubgraph = fromPartial<ExportedSubgraph>({
         ...subgraph.serialize(),
         links: [],
         groups: [],
         version: 1
-      } as Partial<ExportedSubgraph> as ExportedSubgraph
+      })
       return {
         nodes: [subgraphNode.serialize()],
         subgraphs: [serializedSubgraph]
@@ -188,6 +187,35 @@ describe('useSubgraphStore', () => {
     expect(store.isGlobalBlueprint('nonexistent')).toBe(false)
   })
 
+  describe('isUserBlueprint', () => {
+    it('should return true for user blueprints', async () => {
+      await mockFetch({ 'test.json': mockGraph })
+      expect(store.isUserBlueprint('SubgraphBlueprint.test')).toBe(true)
+    })
+
+    it('should return false for global blueprints', async () => {
+      await mockFetch(
+        {},
+        {
+          global_bp: {
+            name: 'Global Blueprint',
+            info: { node_pack: 'comfy_essentials' },
+            data: JSON.stringify(mockGraph)
+          }
+        }
+      )
+      expect(store.isUserBlueprint('SubgraphBlueprint.global_bp')).toBe(false)
+    })
+
+    it('should return false for non-blueprint node types', () => {
+      expect(store.isUserBlueprint('KSampler')).toBe(false)
+    })
+
+    it('should return false for undefined', () => {
+      expect(store.isUserBlueprint(undefined)).toBe(false)
+    })
+  })
+
   describe('blueprint badge display', () => {
     it('should set isGlobal flag on global blueprints', async () => {
       await mockFetch(
@@ -264,7 +292,9 @@ describe('useSubgraphStore', () => {
         failing_blueprint: {
           name: 'Failing Blueprint',
           info: { node_pack: 'test_pack' },
-          data: Promise.reject(new Error('Network error')) as unknown as string
+          data: fromAny<string, unknown>(
+            Promise.reject(new Error('Network error'))
+          )
         }
       }
     )
@@ -389,12 +419,12 @@ describe('useSubgraphStore', () => {
 
       vi.mocked(comfyApp.canvas).selectedItems = new Set([subgraphNode])
       vi.mocked(comfyApp.canvas)._serializeItems = vi.fn(() => {
-        const serializedSubgraph = {
+        const serializedSubgraph = fromPartial<ExportedSubgraph>({
           ...subgraph.serialize(),
           links: [],
           groups: [],
           version: 1
-        } as Partial<ExportedSubgraph> as ExportedSubgraph
+        })
         return {
           nodes: [subgraphNode.serialize()],
           subgraphs: [serializedSubgraph]
diff --git a/src/stores/subgraphStore.ts b/src/stores/subgraphStore.ts
index 590d50f0ff..e52c3fc9fa 100644
--- a/src/stores/subgraphStore.ts
+++ b/src/stores/subgraphStore.ts
@@ -432,6 +432,12 @@ export const useSubgraphStore = defineStore('subgraph', () => {
     return nodeDef !== undefined && nodeDef.isGlobal === true
   }
 
+  function isUserBlueprint(nodeType?: string): boolean {
+    if (!nodeType?.startsWith(typePrefix)) return false
+    const name = nodeType.slice(typePrefix.length)
+    return name in subgraphCache && !isGlobalBlueprint(name)
+  }
+
   return {
     deleteBlueprint,
     editBlueprint,
@@ -439,6 +445,7 @@ export const useSubgraphStore = defineStore('subgraph', () => {
     getBlueprint,
     isGlobalBlueprint,
     isSubgraphBlueprint,
+    isUserBlueprint,
     publishSubgraph,
     subgraphBlueprints,
     typePrefix
diff --git a/src/stores/widgetStore.test.ts b/src/stores/widgetStore.test.ts
new file mode 100644
index 0000000000..bc05fe6a85
--- /dev/null
+++ b/src/stores/widgetStore.test.ts
@@ -0,0 +1,76 @@
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { ComfyWidgets } from '@/scripts/widgets'
+import { useWidgetStore } from '@/stores/widgetStore'
+
+vi.mock('@/scripts/widgets', () => ({
+  ComfyWidgets: {
+    INT: vi.fn(),
+    FLOAT: vi.fn(),
+    STRING: vi.fn(),
+    BOOLEAN: vi.fn(),
+    COMBO: vi.fn()
+  }
+}))
+
+vi.mock('@/schemas/nodeDefSchema', () => ({
+  getInputSpecType: (spec: unknown[]) => spec[0]
+}))
+
+describe('widgetStore', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+  })
+
+  describe('widgets getter', () => {
+    it('includes custom widgets after registration', () => {
+      const store = useWidgetStore()
+      const customFn = vi.fn()
+      store.registerCustomWidgets({ CUSTOM_TYPE: customFn })
+      expect(store.widgets.get('CUSTOM_TYPE')).toBe(customFn)
+    })
+
+    it('core widgets take precedence over custom widgets with same key', () => {
+      const store = useWidgetStore()
+      const override = vi.fn()
+      store.registerCustomWidgets({ INT: override })
+      expect(store.widgets.get('INT')).toBe(ComfyWidgets.INT)
+    })
+  })
+
+  describe('inputIsWidget', () => {
+    it('returns true for known widget type (v1 spec)', () => {
+      const store = useWidgetStore()
+      expect(store.inputIsWidget(['INT', {}] as const)).toBe(true)
+    })
+
+    it('returns false for unknown type (v1 spec)', () => {
+      const store = useWidgetStore()
+      expect(store.inputIsWidget(['UNKNOWN_TYPE', {}] as const)).toBe(false)
+    })
+
+    it('returns true for v2 spec with known type', () => {
+      const store = useWidgetStore()
+      expect(store.inputIsWidget({ type: 'STRING', name: 'test_input' })).toBe(
+        true
+      )
+    })
+
+    it('returns false for v2 spec with unknown type', () => {
+      const store = useWidgetStore()
+      expect(store.inputIsWidget({ type: 'LATENT', name: 'test_input' })).toBe(
+        false
+      )
+    })
+
+    it('returns true for custom registered type', () => {
+      const store = useWidgetStore()
+      store.registerCustomWidgets({ MY_WIDGET: vi.fn() })
+      expect(
+        store.inputIsWidget({ type: 'MY_WIDGET', name: 'test_input' })
+      ).toBe(true)
+    })
+  })
+})
diff --git a/src/stores/workspaceStore.ts b/src/stores/workspaceStore.ts
index b77f9eb58e..905ff79db0 100644
--- a/src/stores/workspaceStore.ts
+++ b/src/stores/workspaceStore.ts
@@ -9,6 +9,7 @@ import type { Settings } from '@/schemas/apiSchema'
 import { useColorPaletteService } from '@/services/colorPaletteService'
 import { useDialogService } from '@/services/dialogService'
 import type { SidebarTabExtension, ToastManager } from '@/types/extensionTypes'
+import { renderMarkdownToHtml } from '@/utils/markdownRendererUtil'
 
 import { useApiKeyAuthStore } from './apiKeyAuthStore'
 import { useCommandStore } from './commandStore'
@@ -113,7 +114,8 @@ function workspaceStoreSetup() {
 
     registerSidebarTab,
     unregisterSidebarTab,
-    getSidebarTabs
+    getSidebarTabs,
+    renderMarkdownToHtml
   }
 }
 
diff --git a/src/types/extensionTypes.ts b/src/types/extensionTypes.ts
index 7c9c71b2ce..7d8fd7d4c3 100644
--- a/src/types/extensionTypes.ts
+++ b/src/types/extensionTypes.ts
@@ -1,5 +1,6 @@
 import type { Component } from 'vue'
 
+import type { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type { ExecutionErrorWsMessage, NodeError } from '@/schemas/apiSchema'
 import type { useDialogService } from '@/services/dialogService'
@@ -113,10 +114,19 @@ export interface ExtensionManager {
     get: <T = unknown>(id: string) => T | undefined
     set: <T = unknown>(id: string, value: T) => void
   }
+  workflow: ReturnType<typeof useWorkflowStore>
 
   // Execution error state (read-only)
   lastNodeErrors: Record<NodeId, NodeError> | null
   lastExecutionError: ExecutionErrorWsMessage | null
+
+  /**
+   * Renders a markdown string to sanitized HTML.
+   * Uses marked (GFM) + DOMPurify. Safe for direct use with innerHTML.
+   * @param markdown - The markdown string to render.
+   * @param baseUrl - Optional base URL for resolving relative image/media paths.
+   */
+  renderMarkdownToHtml(markdown: string, baseUrl?: string): string
 }
 
 export interface CommandManager {
diff --git a/src/utils/__tests__/litegraphTestUtils.ts b/src/utils/__tests__/litegraphTestUtils.ts
index f5235b3d23..77b8e2ef6f 100644
--- a/src/utils/__tests__/litegraphTestUtils.ts
+++ b/src/utils/__tests__/litegraphTestUtils.ts
@@ -256,7 +256,10 @@ export function createMockChangeTracker(
     undoQueue: [],
     redoQueue: [],
     changeCount: 0,
+    captureCanvasState: vi.fn(),
     checkState: vi.fn(),
+    deactivate: vi.fn(),
+    prepareForSave: vi.fn(),
     reset: vi.fn(),
     restore: vi.fn(),
     store: vi.fn(),
diff --git a/src/utils/categoryUtil.ts b/src/utils/categoryUtil.ts
index d34aadc0fe..240713e50b 100644
--- a/src/utils/categoryUtil.ts
+++ b/src/utils/categoryUtil.ts
@@ -73,7 +73,7 @@ const PROVIDER_COLORS: Record<string, string | [string, string]> = {
   'moonvalley-marey': '#DAD9C5',
   openai: '#B6B6B6',
   pixverse: ['#B465E6', '#E8632A'],
-  'quiver-ai': '#B6B6B6',
+  quiver: '#B6B6B6',
   recraft: '#B6B6B6',
   reve: '#B6B6B6',
   rodin: '#F7F7F7',
diff --git a/src/utils/colorUtil.test.ts b/src/utils/colorUtil.test.ts
index e217c97462..38bba99517 100644
--- a/src/utils/colorUtil.test.ts
+++ b/src/utils/colorUtil.test.ts
@@ -4,6 +4,7 @@ import type { ColorAdjustOptions } from '@/utils/colorUtil'
 import {
   adjustColor,
   hexToHsva,
+  hexToInt,
   hexToRgb,
   hsbToRgb,
   hsvaToHex,
@@ -95,6 +96,20 @@ describe('colorUtil conversions', () => {
     })
   })
 
+  describe('hexToInt', () => {
+    it('converts 6-digit hex to packed integer', () => {
+      expect(hexToInt('#ff0000')).toBe(0xff0000)
+      expect(hexToInt('#00ff00')).toBe(0x00ff00)
+      expect(hexToInt('#45edf5')).toBe(0x45edf5)
+      expect(hexToInt('#000000')).toBe(0)
+    })
+
+    it('converts 3-digit hex to packed integer', () => {
+      expect(hexToInt('#fff')).toBe(0xffffff)
+      expect(hexToInt('#f00')).toBe(0xff0000)
+    })
+  })
+
   describe('parseToRgb', () => {
     it('parses #hex', () => {
       expect(parseToRgb('#ff0000')).toEqual({ r: 255, g: 0, b: 0 })
diff --git a/src/utils/colorUtil.ts b/src/utils/colorUtil.ts
index 0976c7aee5..bd7b3ae6e1 100644
--- a/src/utils/colorUtil.ts
+++ b/src/utils/colorUtil.ts
@@ -36,7 +36,7 @@ export function isTransparent(color: string) {
   return false
 }
 
-function rgbToHsl({ r, g, b }: RGB): HSL {
+export function rgbToHsl({ r, g, b }: RGB): HSL {
   r /= 255
   g /= 255
   b /= 255
@@ -82,6 +82,11 @@ export function hexToRgb(hex: string): RGB {
   return { r, g, b }
 }
 
+export function hexToInt(hex: string): number {
+  const { r, g, b } = hexToRgb(hex)
+  return (r << 16) | (g << 8) | b
+}
+
 export function rgbToHex({ r, g, b }: RGB): string {
   const toHex = (n: number) =>
     Math.max(0, Math.min(255, Math.round(n)))
diff --git a/src/utils/errorReportUtil.test.ts b/src/utils/errorReportUtil.test.ts
new file mode 100644
index 0000000000..aaece20887
--- /dev/null
+++ b/src/utils/errorReportUtil.test.ts
@@ -0,0 +1,52 @@
+import { describe, expect, it } from 'vitest'
+
+import type { ISerialisedGraph } from '@/lib/litegraph/src/litegraph'
+import type { SystemStats } from '@/schemas/apiSchema'
+
+import type { ErrorReportData } from './errorReportUtil'
+import { generateErrorReport } from './errorReportUtil'
+
+const baseSystemStats: SystemStats = {
+  system: {
+    os: 'linux',
+    comfyui_version: '1.0.0',
+    python_version: '3.11',
+    pytorch_version: '2.0',
+    embedded_python: false,
+    argv: ['main.py'],
+    ram_total: 0,
+    ram_free: 0
+  },
+  devices: []
+}
+
+const baseWorkflow = { nodes: [], links: [] } as unknown as ISerialisedGraph
+
+function buildError(serverLogs: unknown): ErrorReportData {
+  return {
+    exceptionType: 'RuntimeError',
+    exceptionMessage: 'boom',
+    systemStats: baseSystemStats,
+    serverLogs: serverLogs as string,
+    workflow: baseWorkflow
+  }
+}
+
+describe('generateErrorReport', () => {
+  it('embeds string serverLogs verbatim', () => {
+    const report = generateErrorReport(buildError('line one\nline two'))
+
+    expect(report).toContain('line one\nline two')
+    expect(report).not.toContain('[object Object]')
+  })
+
+  it('stringifies object serverLogs instead of rendering [object Object]', () => {
+    const report = generateErrorReport(
+      buildError({ entries: [{ msg: 'hello' }] })
+    )
+
+    expect(report).not.toContain('[object Object]')
+    expect(report).toContain('"entries"')
+    expect(report).toContain('"msg": "hello"')
+  })
+})
diff --git a/src/utils/graphTraversalUtil.test.ts b/src/utils/graphTraversalUtil.test.ts
index f21f0db327..db1612847c 100644
--- a/src/utils/graphTraversalUtil.test.ts
+++ b/src/utils/graphTraversalUtil.test.ts
@@ -28,8 +28,12 @@ import {
   traverseSubgraphPath,
   triggerCallbackOnAllNodes,
   visitGraphNodes,
-  getExecutionIdByNode
+  getExecutionIdByNode,
+  getExecutionIdForNodeInGraph,
+  isAncestorPathActive,
+  isMissingCandidateActive
 } from '@/utils/graphTraversalUtil'
+import { LGraphEventMode } from '@/lib/litegraph/src/types/globalEnums'
 
 import { createMockLGraphNode } from './__tests__/litegraphTestUtils'
 
@@ -642,6 +646,221 @@ describe('graphTraversalUtil', () => {
       })
     })
 
+    describe('getExecutionIdForNodeInGraph', () => {
+      it('returns local id when graph is rootGraph', () => {
+        const node = createMockNode('42')
+        const rootGraph = createMockGraph([node])
+        expect(getExecutionIdForNodeInGraph(rootGraph, rootGraph, '42')).toBe(
+          '42'
+        )
+      })
+
+      it('returns local id when graph.isRootGraph is true', () => {
+        const node = createMockNode('42')
+        const rootGraph = createMockGraph([node])
+        const otherRoot = createMockGraph([])
+        expect(getExecutionIdForNodeInGraph(otherRoot, rootGraph, '42')).toBe(
+          '42'
+        )
+      })
+
+      it('builds parentPath:nodeId for a single-level subgraph', () => {
+        const interior = createMockNode('63')
+        const subgraph = createMockSubgraph('sub-uuid', [interior])
+        const subgraphNode = createMockNode('65', {
+          isSubgraph: true,
+          subgraph
+        })
+        const rootGraph = createMockGraph([subgraphNode])
+
+        expect(getExecutionIdForNodeInGraph(rootGraph, subgraph, '63')).toBe(
+          '65:63'
+        )
+      })
+
+      it('builds nested parentPath:nodeId for deeply-nested subgraph', () => {
+        const interior = createMockNode('999')
+        const deep = createMockSubgraph('deep', [interior])
+        const midNode = createMockNode('456', {
+          isSubgraph: true,
+          subgraph: deep
+        })
+        const mid = createMockSubgraph('mid', [midNode])
+        const topNode = createMockNode('123', {
+          isSubgraph: true,
+          subgraph: mid
+        })
+        const rootGraph = createMockGraph([topNode])
+
+        expect(getExecutionIdForNodeInGraph(rootGraph, deep, '999')).toBe(
+          '123:456:999'
+        )
+      })
+
+      it('works when node is detached (node.graph = null)', () => {
+        // This is the primary use case — onNodeRemoved fires after
+        // LiteGraph nulls node.graph, but the hook closure still has
+        // the local graph instance, which is enough.
+        const interior = createMockNode('63')
+        const subgraph = createMockSubgraph('sub-uuid', [interior])
+        const subgraphNode = createMockNode('65', {
+          isSubgraph: true,
+          subgraph
+        })
+        const rootGraph = createMockGraph([subgraphNode])
+        interior.graph = null as unknown as LGraph
+
+        expect(
+          getExecutionIdForNodeInGraph(rootGraph, subgraph, interior.id)
+        ).toBe('65:63')
+      })
+
+      it('falls back to local id when graph is not reachable from root', () => {
+        const interior = createMockNode('63')
+        const orphanSubgraph = createMockSubgraph('orphan', [interior])
+        const rootGraph = createMockGraph([])
+
+        expect(
+          getExecutionIdForNodeInGraph(rootGraph, orphanSubgraph, '63')
+        ).toBe('63')
+      })
+    })
+
+    describe('isAncestorPathActive', () => {
+      function makeActiveSubgraph(id: string, nodes: LGraphNode[]) {
+        return createMockSubgraph(id, nodes)
+      }
+
+      it('returns true for root-level nodes (no ancestors)', () => {
+        const node = createMockNode('42')
+        const rootGraph = createMockGraph([node])
+        expect(isAncestorPathActive(rootGraph, '42')).toBe(true)
+      })
+
+      it('returns true when all ancestor containers are active', () => {
+        const interior = createMockNode('63')
+        const subgraph = makeActiveSubgraph('sub', [interior])
+        const container = createMockNode('65', {
+          isSubgraph: true,
+          subgraph
+        })
+        // container mode defaults to ALWAYS (active)
+        const rootGraph = createMockGraph([container])
+
+        expect(isAncestorPathActive(rootGraph, '65:63')).toBe(true)
+      })
+
+      it('returns false when the immediate parent container is bypassed', () => {
+        const interior = createMockNode('63')
+        const subgraph = makeActiveSubgraph('sub', [interior])
+        const container = createMockLGraphNode({
+          id: 65,
+          isSubgraphNode: () => true,
+          subgraph,
+          mode: LGraphEventMode.BYPASS
+        }) satisfies Partial<LGraphNode> as LGraphNode
+        const rootGraph = createMockGraph([container])
+
+        expect(isAncestorPathActive(rootGraph, '65:63')).toBe(false)
+      })
+
+      it('returns false when an outer ancestor is muted (deeply nested)', () => {
+        const interior = createMockNode('999')
+        const deep = makeActiveSubgraph('deep', [interior])
+        const midNode = createMockNode('456', {
+          isSubgraph: true,
+          subgraph: deep
+        })
+        const mid = makeActiveSubgraph('mid', [midNode])
+        const topNode = createMockLGraphNode({
+          id: 123,
+          isSubgraphNode: () => true,
+          subgraph: mid,
+          mode: LGraphEventMode.NEVER
+        }) satisfies Partial<LGraphNode> as LGraphNode
+        const rootGraph = createMockGraph([topNode])
+
+        expect(isAncestorPathActive(rootGraph, '123:456:999')).toBe(false)
+      })
+
+      it('returns true when ancestor node cannot be resolved (defensive)', () => {
+        const rootGraph = createMockGraph([])
+        // Unknown ancestor ID "99" — not found, treated as active.
+        expect(isAncestorPathActive(rootGraph, '99:63')).toBe(true)
+      })
+
+      it('returns true when rootGraph is null/undefined', () => {
+        expect(isAncestorPathActive(null, '65:63')).toBe(true)
+        expect(isAncestorPathActive(undefined, '65:63')).toBe(true)
+      })
+    })
+
+    describe('isMissingCandidateActive', () => {
+      function makeBypassedContainer(interiorId: string) {
+        const interior = createMockNode(interiorId)
+        const subgraph = createMockSubgraph('sub', [interior])
+        const container = createMockLGraphNode({
+          id: 65,
+          isSubgraphNode: () => true,
+          subgraph,
+          mode: LGraphEventMode.BYPASS
+        }) satisfies Partial<LGraphNode> as LGraphNode
+        return createMockGraph([container])
+      }
+
+      it('surfaces confirmed missing candidates under active ancestors', () => {
+        const interior = createMockNode('63')
+        const subgraph = createMockSubgraph('sub', [interior])
+        const container = createMockNode('65', {
+          isSubgraph: true,
+          subgraph
+        })
+        const rootGraph = createMockGraph([container])
+        expect(
+          isMissingCandidateActive(rootGraph, {
+            nodeId: '65:63',
+            isMissing: true
+          })
+        ).toBe(true)
+      })
+
+      it('drops confirmed missing candidates whose ancestor is bypassed (cloud .then race)', () => {
+        // Mirrors the reopen gap: pipeline-start filter passed, then
+        // the user bypassed the container during verification, and the
+        // async resolver must not resurface the candidate.
+        const rootGraph = makeBypassedContainer('63')
+        expect(
+          isMissingCandidateActive(rootGraph, {
+            nodeId: '65:63',
+            isMissing: true
+          })
+        ).toBe(false)
+      })
+
+      it('drops unverified candidates (isMissing !== true)', () => {
+        const rootGraph = createMockGraph([])
+        expect(
+          isMissingCandidateActive(rootGraph, {
+            nodeId: '1',
+            isMissing: undefined
+          })
+        ).toBe(false)
+        expect(
+          isMissingCandidateActive(rootGraph, { nodeId: '1', isMissing: false })
+        ).toBe(false)
+      })
+
+      it('keeps workflow-level candidates (nodeId == null) when confirmed missing', () => {
+        const rootGraph = makeBypassedContainer('63')
+        expect(
+          isMissingCandidateActive(rootGraph, {
+            nodeId: undefined,
+            isMissing: true
+          })
+        ).toBe(true)
+      })
+    })
+
     describe('getExecutionIdFromNodeData', () => {
       it('should return the correct execution ID for a normal node', () => {
         const node = createMockNode('123')
diff --git a/src/utils/graphTraversalUtil.ts b/src/utils/graphTraversalUtil.ts
index 9794259f01..c9167bdebf 100644
--- a/src/utils/graphTraversalUtil.ts
+++ b/src/utils/graphTraversalUtil.ts
@@ -3,9 +3,11 @@ import type {
   LGraphNode,
   Subgraph
 } from '@/lib/litegraph/src/litegraph'
+import { LGraphEventMode } from '@/lib/litegraph/src/types/globalEnums'
 import type { NodeExecutionId, NodeLocatorId } from '@/types/nodeIdentification'
 import {
   createNodeLocatorId,
+  getParentExecutionIds,
   parseNodeLocatorId
 } from '@/types/nodeIdentification'
 
@@ -362,6 +364,79 @@ export function getExecutionIdByNode(
   return `${parentPath}:${node.id}`
 }
 
+/**
+ * True when every ancestor container in the execution path is active
+ * (not muted, not bypassed). Self is not checked — caller is expected to
+ * have already verified the target node's own mode.
+ *
+ * For root-level nodes (single-segment execution ID) there are no
+ * ancestors and the result is always true.
+ *
+ * Use after an initial full-graph scan to suppress missing-asset entries
+ * whose enclosing subgraph is muted/bypassed. At scan time only each
+ * node's own mode is checked; ancestor context is applied here so the
+ * effect cascades to interior nodes without requiring every scanner to
+ * carry the ancestor flag.
+ */
+export function isAncestorPathActive(
+  rootGraph: LGraph | null | undefined,
+  executionId: string
+): boolean {
+  if (!rootGraph) return true
+  for (const ancestorId of getParentExecutionIds(executionId)) {
+    const ancestor = getNodeByExecutionId(rootGraph, ancestorId)
+    if (!ancestor) continue
+    if (
+      ancestor.mode === LGraphEventMode.NEVER ||
+      ancestor.mode === LGraphEventMode.BYPASS
+    ) {
+      return false
+    }
+  }
+  return true
+}
+
+/**
+ * Predicate used after async verification resolves: a missing-asset
+ * candidate is surfaceable when it is confirmed missing and its
+ * enclosing subgraph is still active. Null `nodeId` (workflow-level
+ * models) bypasses the ancestor check since it has no scope to
+ * validate. Unified helper so the initial pipeline post-filter and the
+ * three async-resolution call sites cannot drift.
+ */
+export function isMissingCandidateActive(
+  rootGraph: LGraph | null | undefined,
+  candidate: {
+    nodeId?: string | number | null | undefined
+    isMissing?: boolean | undefined
+  }
+): boolean {
+  if (candidate.isMissing !== true) return false
+  if (candidate.nodeId == null) return true
+  return isAncestorPathActive(rootGraph, String(candidate.nodeId))
+}
+
+/**
+ * Returns the execution ID for a node identified by its (graph, nodeId) pair.
+ *
+ * Unlike {@link getExecutionIdByNode}, this does not rely on `node.graph`.
+ * Use this when the node reference may be detached (e.g. inside
+ * `onNodeRemoved`, which LiteGraph fires after clearing `node.graph`).
+ *
+ * @param rootGraph - The root graph to resolve from
+ * @param graph     - The graph the node currently lives in (or lived in)
+ * @param nodeId    - The local node ID within `graph`
+ */
+export function getExecutionIdForNodeInGraph(
+  rootGraph: LGraph,
+  graph: LGraph | Subgraph,
+  nodeId: string | number
+): string {
+  if (graph === rootGraph || graph.isRootGraph) return String(nodeId)
+  const parentPath = findPartialExecutionPathToGraph(graph as LGraph, rootGraph)
+  return parentPath !== undefined ? `${parentPath}:${nodeId}` : String(nodeId)
+}
+
 /**
  * Returns the execution ID for a node described by plain data (id + subgraphId),
  * without requiring a pre-existing {@link LGraphNode} reference.
diff --git a/src/utils/histogramUtil.test.ts b/src/utils/histogramUtil.test.ts
new file mode 100644
index 0000000000..7d1ae4a4c4
--- /dev/null
+++ b/src/utils/histogramUtil.test.ts
@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest'
+
+import { histogramToPath } from './histogramUtil'
+
+describe('histogramToPath', () => {
+  it('returns empty string for empty histogram', () => {
+    expect(histogramToPath(new Uint32Array(0))).toBe('')
+  })
+
+  it('returns empty string when all bins are zero', () => {
+    expect(histogramToPath(new Uint32Array(256))).toBe('')
+  })
+
+  it('returns a closed SVG path for valid histogram', () => {
+    const histogram = new Uint32Array(256)
+    for (let i = 0; i < 256; i++) histogram[i] = i + 1
+    const path = histogramToPath(histogram)
+    expect(path).toMatch(/^M0,1/)
+    expect(path).toMatch(/L1,1 Z$/)
+  })
+
+  it('normalizes using 99.5th percentile to suppress outliers', () => {
+    const histogram = new Uint32Array(256)
+    for (let i = 0; i < 256; i++) histogram[i] = 100
+    histogram[255] = 100000
+    const path = histogramToPath(histogram)
+    const yValues = path
+      .split(/[ML]/)
+      .filter(Boolean)
+      .map((s) => parseFloat(s.split(',')[1]))
+      .filter((y) => !isNaN(y))
+    const nearZero = yValues.filter((y) => Math.abs(y) < 0.01)
+    expect(nearZero.length).toBeGreaterThan(200)
+  })
+})
diff --git a/src/utils/histogramUtil.ts b/src/utils/histogramUtil.ts
new file mode 100644
index 0000000000..a6661d9fd4
--- /dev/null
+++ b/src/utils/histogramUtil.ts
@@ -0,0 +1,27 @@
+/**
+ * Convert a histogram (arbitrary number of bins) into an SVG path string.
+ * Applies square-root scaling and normalizes using the 99.5th percentile
+ * to avoid outlier spikes.
+ */
+export function histogramToPath(histogram: Uint32Array): string {
+  const len = histogram.length
+  if (len === 0) return ''
+
+  const sqrtValues = new Float32Array(len)
+  for (let i = 0; i < len; i++) sqrtValues[i] = Math.sqrt(histogram[i])
+
+  const sorted = Array.from(sqrtValues).sort((a, b) => a - b)
+  const max = sorted[Math.floor((len - 1) * 0.995)]
+  if (max === 0) return ''
+
+  const invMax = 1 / max
+  const lastIdx = len - 1
+  const parts: string[] = ['M0,1']
+  for (let i = 0; i < len; i++) {
+    const x = lastIdx === 0 ? 0.5 : i / lastIdx
+    const y = 1 - Math.min(1, sqrtValues[i] * invMax)
+    parts.push(`L${x},${y}`)
+  }
+  parts.push('L1,1 Z')
+  return parts.join(' ')
+}
diff --git a/src/utils/litegraphUtil.ts b/src/utils/litegraphUtil.ts
index 65629a8d3e..e140d5a7df 100644
--- a/src/utils/litegraphUtil.ts
+++ b/src/utils/litegraphUtil.ts
@@ -108,6 +108,14 @@ export function isAudioNode(node: LGraphNode | undefined): boolean {
   return !!node && node.previewMediaType === 'audio'
 }
 
+export function resolveComboValues(widget: IComboWidget): string[] {
+  const values = widget.options?.values
+  if (!values) return []
+  if (typeof values === 'function') return values(widget)
+  if (Array.isArray(values)) return values
+  return Object.keys(values)
+}
+
 export function addToComboValues(widget: IComboWidget, value: string) {
   if (!widget.options) widget.options = { values: [] }
   if (!widget.options.values) widget.options.values = []
diff --git a/src/utils/mathUtil.test.ts b/src/utils/mathUtil.test.ts
index 47a70083d6..3d0d6021a7 100644
--- a/src/utils/mathUtil.test.ts
+++ b/src/utils/mathUtil.test.ts
@@ -1,9 +1,39 @@
 import { describe, expect, it } from 'vitest'
 
 import type { ReadOnlyRect } from '@/lib/litegraph/src/interfaces'
-import { computeUnionBounds, gcd, lcm } from '@/utils/mathUtil'
+import {
+  computeUnionBounds,
+  denormalize,
+  gcd,
+  lcm,
+  normalize
+} from '@/utils/mathUtil'
 
 describe('mathUtil', () => {
+  describe('normalize', () => {
+    it('normalizes value to 0-1', () => {
+      expect(normalize(128, 0, 256)).toBe(0.5)
+      expect(normalize(0, 0, 255)).toBe(0)
+      expect(normalize(255, 0, 255)).toBe(1)
+    })
+
+    it('returns 0 when min equals max', () => {
+      expect(normalize(5, 5, 5)).toBe(0)
+    })
+  })
+
+  describe('denormalize', () => {
+    it('converts normalized value back to range', () => {
+      expect(denormalize(0.5, 0, 256)).toBe(128)
+      expect(denormalize(0, 0, 255)).toBe(0)
+      expect(denormalize(1, 0, 255)).toBe(255)
+    })
+
+    it('round-trips with normalize', () => {
+      expect(denormalize(normalize(100, 0, 255), 0, 255)).toBeCloseTo(100)
+    })
+  })
+
   describe('gcd', () => {
     it('should compute greatest common divisor correctly', () => {
       expect(gcd(48, 18)).toBe(6)
diff --git a/src/utils/mathUtil.ts b/src/utils/mathUtil.ts
index e13d26fe91..fd840abb9d 100644
--- a/src/utils/mathUtil.ts
+++ b/src/utils/mathUtil.ts
@@ -1,6 +1,25 @@
 import type { ReadOnlyRect } from '@/lib/litegraph/src/interfaces'
 import type { Bounds } from '@/renderer/core/layout/types'
 
+/**
+ * Linearly maps a value from [min, max] to [0, 1].
+ * Returns 0 when min equals max to avoid division by zero.
+ */
+export function normalize(value: number, min: number, max: number): number {
+  return max === min ? 0 : (value - min) / (max - min)
+}
+
+/**
+ * Linearly maps a normalized value from [0, 1] back to [min, max].
+ */
+export function denormalize(
+  normalized: number,
+  min: number,
+  max: number
+): number {
+  return min + normalized * (max - min)
+}
+
 /** Simple 2D point or size as [x, y] or [width, height] */
 type Vec2 = readonly [number, number]
 
diff --git a/src/utils/mediaUploadUtil.ts b/src/utils/mediaUploadUtil.ts
new file mode 100644
index 0000000000..ca5d06be67
--- /dev/null
+++ b/src/utils/mediaUploadUtil.ts
@@ -0,0 +1,5 @@
+/** Accepted MIME types for the image upload file picker. */
+export const ACCEPTED_IMAGE_TYPES = 'image/png,image/jpeg,image/webp'
+
+/** Accepted MIME types for the video upload file picker. */
+export const ACCEPTED_VIDEO_TYPES = 'video/webm,video/mp4'
diff --git a/src/utils/nodeDefUtil.test.ts b/src/utils/nodeDefUtil.test.ts
index 749c818d20..a242cd5ecc 100644
--- a/src/utils/nodeDefUtil.test.ts
+++ b/src/utils/nodeDefUtil.test.ts
@@ -1,3 +1,4 @@
+import { fromAny } from '@total-typescript/shoehorn'
 import { describe, expect, it } from 'vitest'
 
 import type {
@@ -175,7 +176,10 @@ describe('nodeDefUtil', () => {
         const spec1: IntInputSpec = ['INT', { min: 0, max: 10 }]
         const spec2: ComboInputSpecV2 = ['COMBO', { options: ['A', 'B'] }]
 
-        const result = mergeInputSpec(spec1, spec2 as unknown as IntInputSpec)
+        const result = mergeInputSpec(
+          spec1,
+          fromAny<IntInputSpec, unknown>(spec2)
+        )
 
         expect(result).toBeNull()
       })
diff --git a/src/utils/widgetUtil.test.ts b/src/utils/widgetUtil.test.ts
index f3fa12a0f7..ddff96a42f 100644
--- a/src/utils/widgetUtil.test.ts
+++ b/src/utils/widgetUtil.test.ts
@@ -1,10 +1,10 @@
+import { fromAny, fromPartial } from '@total-typescript/shoehorn'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import type { INodeInputSlot } from '@/lib/litegraph/src/interfaces'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-
 import { getWidgetDefaultValue, renameWidget } from '@/utils/widgetUtil'
 
 vi.mock('@/core/graph/subgraph/resolvePromotedWidgetSource', () => ({
@@ -50,14 +50,14 @@ describe('getWidgetDefaultValue', () => {
 })
 
 function makeWidget(overrides: Record<string, unknown> = {}): IBaseWidget {
-  return {
+  return fromPartial<IBaseWidget>({
     name: 'myWidget',
     type: 'number',
     value: 0,
     label: undefined,
     options: {},
     ...overrides
-  } as unknown as IBaseWidget
+  })
 }
 
 function makeNode({
@@ -67,11 +67,11 @@ function makeNode({
   isSubgraph?: boolean
   inputs?: INodeInputSlot[]
 } = {}): LGraphNode {
-  return {
+  return fromAny<LGraphNode, unknown>({
     id: 1,
     inputs,
     isSubgraphNode: () => isSubgraph
-  } as unknown as LGraphNode
+  })
 }
 
 describe('renameWidget', () => {
@@ -131,11 +131,11 @@ describe('renameWidget', () => {
   it('updates _subgraphSlot.label when input has a subgraph slot', () => {
     const widget = makeWidget({ name: 'seed' })
     const subgraphSlot = { label: undefined as string | undefined }
-    const input = {
+    const input = fromAny<INodeInputSlot, unknown>({
       name: 'seed',
       widget: { name: 'seed' },
       _subgraphSlot: subgraphSlot
-    } as unknown as INodeInputSlot
+    })
     const node = makeNode({ inputs: [input] })
 
     renameWidget(widget, node, 'New Label')
diff --git a/src/views/GraphView.vue b/src/views/GraphView.vue
index 1e29bf7465..f9f42823c7 100644
--- a/src/views/GraphView.vue
+++ b/src/views/GraphView.vue
@@ -34,8 +34,7 @@
 <script setup lang="ts">
 import { useEventListener, useIntervalFn } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
-import type { ToastMessageOptions } from 'primevue/toast'
-import { useToast } from 'primevue/usetoast'
+
 import {
   computed,
   nextTick,
@@ -45,7 +44,6 @@ import {
   watch,
   watchEffect
 } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 import { runWhenGlobalIdle } from '@/base/common/async'
 import MenuHamburger from '@/components/MenuHamburger.vue'
@@ -58,6 +56,7 @@ import { useBrowserTabTitle } from '@/composables/useBrowserTabTitle'
 import { useCoreCommands } from '@/composables/useCoreCommands'
 import { useQueuePolling } from '@/platform/remote/comfyui/useQueuePolling'
 import { useErrorHandling } from '@/composables/useErrorHandling'
+import { useReconnectingNotification } from '@/composables/useReconnectingNotification'
 import { useProgressFavicon } from '@/composables/useProgressFavicon'
 import { SERVER_CONFIG_ITEMS } from '@/constants/serverConfig'
 import type { ServerConfig, ServerConfigValue } from '@/constants/serverConfig'
@@ -103,8 +102,6 @@ setupAutoQueueHandler()
 useProgressFavicon()
 useBrowserTabTitle()
 
-const { t } = useI18n()
-const toast = useToast()
 const settingStore = useSettingStore()
 const executionStore = useExecutionStore()
 const colorPaletteStore = useColorPaletteStore()
@@ -250,28 +247,7 @@ const onExecutionSuccess = async () => {
   }
 }
 
-const reconnectingMessage: ToastMessageOptions = {
-  severity: 'error',
-  summary: t('g.reconnecting')
-}
-
-const onReconnecting = () => {
-  if (!settingStore.get('Comfy.Toast.DisableReconnectingToast')) {
-    toast.remove(reconnectingMessage)
-    toast.add(reconnectingMessage)
-  }
-}
-
-const onReconnected = () => {
-  if (!settingStore.get('Comfy.Toast.DisableReconnectingToast')) {
-    toast.remove(reconnectingMessage)
-    toast.add({
-      severity: 'success',
-      summary: t('g.reconnected'),
-      life: 2000
-    })
-  }
-}
+const { onReconnecting, onReconnected } = useReconnectingNotification()
 
 useEventListener(api, 'status', onStatus)
 useEventListener(api, 'execution_success', onExecutionSuccess)
diff --git a/src/views/LinearView.vue b/src/views/LinearView.vue
index 1445e6f652..86fd1c793a 100644
--- a/src/views/LinearView.vue
+++ b/src/views/LinearView.vue
@@ -154,6 +154,7 @@ function dragDrop(e: DragEvent) {
         @drop="dragDrop"
       >
         <LinearProgressBar
+          data-testid="linear-header-progress-bar"
           class="absolute top-0 left-0 z-21 h-1 w-[calc(100%+16px)]"
         />
         <LinearPreview
diff --git a/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.test.ts b/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.test.ts
index af3c1530b8..88058eb601 100644
--- a/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.test.ts
+++ b/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.test.ts
@@ -1,31 +1,15 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { createTestingPinia } from '@pinia/testing'
 import { setActivePinia } from 'pinia'
-import Button from '@/components/ui/button/Button.vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { computed, ref } from 'vue'
 
 import NodeConflictDialogContent from '@/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue'
-import type {
-  ConflictDetail,
-  ConflictDetectionResult
-} from '@/workbench/extensions/manager/types/conflictDetectionTypes'
-
-// Type for component VM
-interface NodeConflictDialogVM {
-  importFailedExpanded: boolean
-  conflictsExpanded: boolean
-  extensionsExpanded: boolean
-  allConflictDetails: ConflictDetail[]
-  importFailedConflicts: string[]
-}
-
-function getVM(wrapper: ReturnType<typeof mount>): NodeConflictDialogVM {
-  return wrapper.vm as Partial<NodeConflictDialogVM> as NodeConflictDialogVM
-}
+import type { ConflictDetectionResult } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
 
 // Mock getConflictMessage utility
-vi.mock('@/utils/conflictMessageUtil', () => ({
+vi.mock('@/workbench/extensions/manager/utils/conflictMessageUtil', () => ({
   getConflictMessage: vi.fn((conflict) => {
     return `${conflict.type}: ${conflict.current_value} vs ${conflict.required_value}`
   })
@@ -67,20 +51,18 @@ describe('NodeConflictDialogContent', () => {
     vi.clearAllMocks()
     pinia = createTestingPinia({ stubActions: false })
     setActivePinia(pinia)
-    // Reset mock data
     mockConflictData.value = []
   })
 
-  const createWrapper = (props = {}) => {
-    return mount(NodeConflictDialogContent, {
+  function renderComponent(props = {}) {
+    const user = userEvent.setup()
+    const result = render(NodeConflictDialogContent, {
       props,
       global: {
         plugins: [pinia],
-        components: {
-          Button
-        },
         stubs: {
-          ContentDivider: true
+          ContentDivider: true,
+          Button: { template: '<button><slot /></button>' }
         },
         mocks: {
           $t: vi.fn((key: string) => {
@@ -98,6 +80,7 @@ describe('NodeConflictDialogContent', () => {
         }
       }
     })
+    return { ...result, user }
   }
 
   const mockConflictResults: ConflictDetectionResult[] = [
@@ -149,71 +132,68 @@ describe('NodeConflictDialogContent', () => {
 
   describe('rendering', () => {
     it('should render without conflicts', () => {
-      // Set empty conflict data
       mockConflictData.value = []
 
-      const wrapper = createWrapper()
+      const { container } = renderComponent()
 
-      // When there are no conflicts, the conflict sections should not be rendered
-      expect(wrapper.text()).not.toContain('Conflicts')
-      expect(wrapper.text()).not.toContain('Extensions at Risk')
-      expect(wrapper.find('[class*="Import Failed Extensions"]').exists()).toBe(
-        false
-      )
+      expect(container.textContent).not.toContain('Conflicts')
+      expect(container.textContent).not.toContain('Extensions at Risk')
+      expect(container.textContent).not.toContain('Import Failed Extensions')
     })
 
     it('should render with conflict data from composable', () => {
-      // Set conflict data
       mockConflictData.value = mockConflictResults
 
-      const wrapper = createWrapper()
+      const { container } = renderComponent()
 
-      // Should show 3 total conflicts (2 from Package1 + 1 from Package2, excluding import_failed)
-      expect(wrapper.text()).toContain('3')
-      expect(wrapper.text()).toContain('Conflicts')
-      // Should show 3 extensions at risk (all packages)
-      expect(wrapper.text()).toContain('Extensions at Risk')
-      // Should show import failed section
-      expect(wrapper.text()).toContain('Import Failed Extensions')
-      expect(wrapper.text()).toContain('1') // 1 import failed package
+      expect(container.textContent).toContain('3')
+      expect(container.textContent).toContain('Conflicts')
+      expect(container.textContent).toContain('Extensions at Risk')
+      expect(container.textContent).toContain('Import Failed Extensions')
+      expect(container.textContent).toContain('1')
     })
 
     it('should show description when showAfterWhatsNew is true', () => {
-      const wrapper = createWrapper({
+      const { container } = renderComponent({
         showAfterWhatsNew: true
       })
 
-      expect(wrapper.text()).toContain('Some extensions are not compatible')
-      expect(wrapper.text()).toContain('Additional info about conflicts')
+      expect(container.textContent).toContain(
+        'Some extensions are not compatible'
+      )
+      expect(container.textContent).toContain('Additional info about conflicts')
     })
 
     it('should not show description when showAfterWhatsNew is false', () => {
-      const wrapper = createWrapper({
+      const { container } = renderComponent({
         showAfterWhatsNew: false
       })
 
-      expect(wrapper.text()).not.toContain('Some extensions are not compatible')
-      expect(wrapper.text()).not.toContain('Additional info about conflicts')
+      expect(container.textContent).not.toContain(
+        'Some extensions are not compatible'
+      )
+      expect(container.textContent).not.toContain(
+        'Additional info about conflicts'
+      )
     })
 
     it('should separate import_failed conflicts into separate section', () => {
       mockConflictData.value = mockConflictResults
 
-      const wrapper = createWrapper()
+      const { container } = renderComponent()
 
-      // Import Failed Extensions section should show 1 package
-      const importFailedSection = wrapper.findAll(
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      const sections = container.querySelectorAll(
         '.w-full.flex.flex-col.bg-base-background'
-      )[0]
-      expect(importFailedSection.text()).toContain('1')
-      expect(importFailedSection.text()).toContain('Import Failed Extensions')
+      )
 
-      // Conflicts section should show 3 conflicts (excluding import_failed)
-      const conflictsSection = wrapper.findAll(
-        '.w-full.flex.flex-col.bg-base-background'
-      )[1]
-      expect(conflictsSection.text()).toContain('3')
-      expect(conflictsSection.text()).toContain('Conflicts')
+      // Import Failed Extensions section
+      expect(sections[0].textContent).toContain('1')
+      expect(sections[0].textContent).toContain('Import Failed Extensions')
+
+      // Conflicts section
+      expect(sections[1].textContent).toContain('3')
+      expect(sections[1].textContent).toContain('Conflicts')
     })
   })
 
@@ -223,109 +203,91 @@ describe('NodeConflictDialogContent', () => {
     })
 
     it('should toggle import failed panel', async () => {
-      const wrapper = createWrapper()
+      const { container, user } = renderComponent()
 
-      // Find import failed panel header (first one)
-      const importFailedHeader = wrapper.find(
-        '[data-testid="conflict-dialog-panel-toggle"]'
-      )
+      const importFailedHeader = screen.getAllByTestId(
+        'conflict-dialog-panel-toggle'
+      )[0]
 
-      // Initially collapsed
       expect(
-        wrapper.find('[data-testid="conflict-dialog-panel-expanded"]').exists()
-      ).toBe(false)
+        screen.queryByTestId('conflict-dialog-panel-expanded')
+      ).not.toBeInTheDocument()
 
-      // Click to expand import failed panel
-      await importFailedHeader.trigger('click')
+      await user.click(importFailedHeader)
 
-      // Should be expanded now and show package name
-      const expandedContent = wrapper.find(
-        '[data-testid="conflict-dialog-panel-expanded"]'
+      const expandedContent = screen.getByTestId(
+        'conflict-dialog-panel-expanded'
       )
-      expect(expandedContent.exists()).toBe(true)
-      expect(expandedContent.text()).toContain('Test Package 3')
+      expect(expandedContent).toBeInTheDocument()
+      expect(expandedContent.textContent).toContain('Test Package 3')
 
-      // Should show chevron-down icon when expanded
-      const chevronButton = wrapper.findComponent(Button)
-      expect(chevronButton.find('i').classes()).toContain('pi-chevron-down')
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      const chevronIcon = container.querySelector(
+        '[data-testid="conflict-dialog-panel-toggle"] i'
+      )
+      expect(chevronIcon).toHaveClass('pi-chevron-down')
     })
 
     it('should toggle conflicts panel', async () => {
-      const wrapper = createWrapper()
+      const { user } = renderComponent()
 
-      // Find conflicts panel header (second one)
-      const conflictsHeader = wrapper.findAll(
-        '[data-testid="conflict-dialog-panel-toggle"]'
+      const conflictsHeader = screen.getAllByTestId(
+        'conflict-dialog-panel-toggle'
       )[1]
 
-      // Click to expand conflicts panel
-      await conflictsHeader.trigger('click')
+      await user.click(conflictsHeader)
 
-      // Should be expanded now
-      const conflictItems = wrapper.findAll('[aria-label*="Conflict:"]')
+      const conflictItems = screen.getAllByLabelText(/Conflict:/)
       expect(conflictItems.length).toBeGreaterThan(0)
     })
 
     it('should toggle extensions panel', async () => {
-      const wrapper = createWrapper()
+      const { user } = renderComponent()
 
-      // Find extensions panel header (third one)
-      const extensionsHeader = wrapper.findAll(
-        '[data-testid="conflict-dialog-panel-toggle"]'
+      const extensionsHeader = screen.getAllByTestId(
+        'conflict-dialog-panel-toggle'
       )[2]
 
-      // Click to expand extensions panel
-      await extensionsHeader.trigger('click')
+      await user.click(extensionsHeader)
 
-      // Should be expanded now and show all package names
-      const expandedContent = wrapper.findAll(
-        '[data-testid="conflict-dialog-panel-expanded"]'
-      )[0]
-      expect(expandedContent.exists()).toBe(true)
-      expect(expandedContent.text()).toContain('Test Package 1')
-      expect(expandedContent.text()).toContain('Test Package 2')
-      expect(expandedContent.text()).toContain('Test Package 3')
+      const expandedContent = screen.getByTestId(
+        'conflict-dialog-panel-expanded'
+      )
+      expect(expandedContent).toBeInTheDocument()
+      expect(expandedContent.textContent).toContain('Test Package 1')
+      expect(expandedContent.textContent).toContain('Test Package 2')
+      expect(expandedContent.textContent).toContain('Test Package 3')
     })
 
     it('should collapse other panels when opening one', async () => {
-      const wrapper = createWrapper()
+      const { user } = renderComponent()
 
-      const importFailedHeader = wrapper.findAll(
-        '[data-testid="conflict-dialog-panel-toggle"]'
-      )[0]
-      const conflictsHeader = wrapper.findAll(
-        '[data-testid="conflict-dialog-panel-toggle"]'
-      )[1]
-      const extensionsHeader = wrapper.findAll(
-        '[data-testid="conflict-dialog-panel-toggle"]'
-      )[2]
+      const toggles = screen.getAllByTestId('conflict-dialog-panel-toggle')
 
-      // Open import failed panel first
-      await importFailedHeader.trigger('click')
+      // Open import failed panel
+      await user.click(toggles[0])
+      expect(
+        screen.getByTestId('conflict-dialog-panel-expanded').textContent
+      ).toContain('Test Package 3')
 
-      // Verify import failed panel is open
-      const vm1 = getVM(wrapper)
-      expect(vm1.importFailedExpanded).toBe(true)
-      expect(vm1.conflictsExpanded).toBe(false)
-      expect(vm1.extensionsExpanded).toBe(false)
+      // Open conflicts panel — import failed should close
+      await user.click(toggles[1])
+      const expandedPanels = screen.getAllByTestId(
+        'conflict-dialog-panel-expanded'
+      )
+      expect(expandedPanels).toHaveLength(1)
+      expect(expandedPanels[0].textContent).not.toContain('Test Package 3')
+      expect(screen.getAllByLabelText(/Conflict:/).length).toBeGreaterThan(0)
 
-      // Open conflicts panel
-      await conflictsHeader.trigger('click')
-
-      // Verify conflicts panel is open and others are closed
-      const vm2 = getVM(wrapper)
-      expect(vm2.importFailedExpanded).toBe(false)
-      expect(vm2.conflictsExpanded).toBe(true)
-      expect(vm2.extensionsExpanded).toBe(false)
-
-      // Open extensions panel
-      await extensionsHeader.trigger('click')
-
-      // Verify extensions panel is open and others are closed
-      const vm3 = getVM(wrapper)
-      expect(vm3.importFailedExpanded).toBe(false)
-      expect(vm3.conflictsExpanded).toBe(false)
-      expect(vm3.extensionsExpanded).toBe(true)
+      // Open extensions panel — conflicts should close
+      await user.click(toggles[2])
+      const expandedAfterExt = screen.getAllByTestId(
+        'conflict-dialog-panel-expanded'
+      )
+      expect(expandedAfterExt).toHaveLength(1)
+      expect(expandedAfterExt[0].textContent).toContain('Test Package 1')
+      expect(expandedAfterExt[0].textContent).toContain('Test Package 2')
+      expect(expandedAfterExt[0].textContent).toContain('Test Package 3')
     })
   })
 
@@ -335,97 +297,83 @@ describe('NodeConflictDialogContent', () => {
     })
 
     it('should display individual conflict details excluding import_failed', async () => {
-      const wrapper = createWrapper()
+      const { user } = renderComponent()
 
-      // Expand conflicts panel (second header)
-      const conflictsHeader = wrapper.findAll(
-        '[data-testid="conflict-dialog-panel-toggle"]'
+      const conflictsHeader = screen.getAllByTestId(
+        'conflict-dialog-panel-toggle'
       )[1]
-      await conflictsHeader.trigger('click')
+      await user.click(conflictsHeader)
 
-      // Should display conflict messages (excluding import_failed)
-      const conflictItems = wrapper.findAll('[aria-label*="Conflict:"]')
-      expect(conflictItems).toHaveLength(3) // 2 from Package1 + 1 from Package2
+      const conflictItems = screen.getAllByLabelText(/Conflict:/)
+      expect(conflictItems).toHaveLength(3)
     })
 
     it('should display import failed packages separately', async () => {
-      const wrapper = createWrapper()
+      const { user } = renderComponent()
 
-      // Expand import failed panel (first header)
-      const importFailedHeader = wrapper.findAll(
-        '[data-testid="conflict-dialog-panel-toggle"]'
+      const importFailedHeader = screen.getAllByTestId(
+        'conflict-dialog-panel-toggle'
       )[0]
-      await importFailedHeader.trigger('click')
+      await user.click(importFailedHeader)
 
-      // Should display only import failed package
-      const importFailedItems = wrapper.findAll(
-        '[aria-label*="Import failed package:"]'
+      const importFailedItems = screen.getAllByLabelText(
+        /Import failed package:/
       )
       expect(importFailedItems).toHaveLength(1)
-      expect(importFailedItems[0].text()).toContain('Test Package 3')
+      expect(importFailedItems[0].textContent).toContain('Test Package 3')
     })
 
     it('should display all package names in extensions list', async () => {
-      const wrapper = createWrapper()
+      const { container, user } = renderComponent()
 
-      // Expand extensions panel (third header)
-      const extensionsHeader = wrapper.findAll(
-        '[data-testid="conflict-dialog-panel-toggle"]'
+      const extensionsHeader = screen.getAllByTestId(
+        'conflict-dialog-panel-toggle'
       )[2]
-      await extensionsHeader.trigger('click')
+      await user.click(extensionsHeader)
 
-      // Should display all package names
-      expect(wrapper.text()).toContain('Test Package 1')
-      expect(wrapper.text()).toContain('Test Package 2')
-      expect(wrapper.text()).toContain('Test Package 3')
+      expect(container.textContent).toContain('Test Package 1')
+      expect(container.textContent).toContain('Test Package 2')
+      expect(container.textContent).toContain('Test Package 3')
     })
   })
 
   describe('empty states', () => {
     it('should handle empty conflicts gracefully', () => {
       mockConflictData.value = []
-      const wrapper = createWrapper()
+      const { container } = renderComponent()
 
-      // When there are no conflicts, none of the sections should be visible
-      expect(wrapper.text()).not.toContain('Conflicts')
-      expect(wrapper.text()).not.toContain('Extensions at Risk')
-      // Import failed section should not be visible when there are no import failures
-      expect(wrapper.text()).not.toContain('Import Failed Extensions')
+      expect(container.textContent).not.toContain('Conflicts')
+      expect(container.textContent).not.toContain('Extensions at Risk')
+      expect(container.textContent).not.toContain('Import Failed Extensions')
     })
 
     it('should handle conflicts without import_failed', () => {
-      // Only set packages without import_failed conflicts
       mockConflictData.value = [mockConflictResults[0], mockConflictResults[1]]
-      const wrapper = createWrapper()
+      const { container } = renderComponent()
 
-      expect(wrapper.text()).toContain('3') // conflicts count
-      expect(wrapper.text()).toContain('2') // extensions count
-      // Import failed section should not be visible
-      expect(wrapper.text()).not.toContain('Import Failed Extensions')
+      expect(container.textContent).toContain('3')
+      expect(container.textContent).toContain('2')
+      expect(container.textContent).not.toContain('Import Failed Extensions')
     })
   })
 
   describe('scrolling behavior', () => {
     it('should apply scrollbar styles to all expandable lists', async () => {
       mockConflictData.value = mockConflictResults
-      const wrapper = createWrapper()
+      const { container, user } = renderComponent()
 
-      // Test all three panels
-      const headers = wrapper.findAll(
-        '[data-testid="conflict-dialog-panel-toggle"]'
-      )
+      const headers = screen.getAllByTestId('conflict-dialog-panel-toggle')
 
-      for (let i = 0; i < headers.length; i++) {
-        await headers[i].trigger('click')
+      for (const header of headers) {
+        await user.click(header)
 
-        // Check for scrollable container with proper classes
-        const scrollableContainer = wrapper.find(
+        // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+        const scrollableContainer = container.querySelector(
           '[class*="max-h-"][class*="overflow-y-auto"][class*="scrollbar-hide"]'
         )
-        expect(scrollableContainer.exists()).toBe(true)
+        expect(scrollableContainer).toBeInTheDocument()
 
-        // Close the panel for next iteration
-        await headers[i].trigger('click')
+        await user.click(header)
       }
     })
   })
@@ -433,60 +381,65 @@ describe('NodeConflictDialogContent', () => {
   describe('accessibility', () => {
     it('should have proper button roles and labels', () => {
       mockConflictData.value = mockConflictResults
-      const wrapper = createWrapper()
+      const { container } = renderComponent()
 
-      const buttons = wrapper.findAllComponents(Button)
-      expect(buttons.length).toBe(3) // 3 chevron buttons
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      const icons = container.querySelectorAll('i[class*="pi-chevron"]')
+      expect(icons).toHaveLength(3)
 
-      // Check chevron buttons have icons
-      buttons.forEach((button) => {
-        expect(
-          button
-            .find('i')
-            .classes()
-            .some((c) => /pi-chevron-(right|down)/.test(c))
-        ).toBe(true)
+      icons.forEach((icon) => {
+        expect(icon.className).toMatch(/pi-chevron-(right|down)/)
       })
     })
 
     it('should have clickable panel headers', () => {
       mockConflictData.value = mockConflictResults
-      const wrapper = createWrapper()
+      renderComponent()
 
-      const headers = wrapper.findAll(
-        '[data-testid="conflict-dialog-panel-toggle"]'
-      )
-      expect(headers).toHaveLength(3) // import failed, conflicts and extensions headers
+      const headers = screen.getAllByTestId('conflict-dialog-panel-toggle')
+      expect(headers).toHaveLength(3)
 
       headers.forEach((header) => {
-        expect(header.element.tagName).toBe('DIV')
+        expect(header.tagName).toBe('DIV')
       })
     })
   })
 
   describe('es-toolkit optimization', () => {
-    it('should efficiently filter conflicts using es-toolkit', () => {
+    it('should efficiently filter conflicts using es-toolkit', async () => {
       mockConflictData.value = mockConflictResults
-      const wrapper = createWrapper()
+      const { user } = renderComponent()
 
-      // Verify that import_failed conflicts are filtered out from main conflicts
-      const vm = getVM(wrapper)
-      expect(vm.allConflictDetails).toHaveLength(3) // Should not include import_failed
-      expect(
-        vm.allConflictDetails.every(
-          (c: ConflictDetail) => c.type !== 'import_failed'
-        )
-      ).toBe(true)
+      // Expand conflicts panel to verify filtered items in DOM
+      const conflictsHeader = screen.getAllByTestId(
+        'conflict-dialog-panel-toggle'
+      )[1]
+      await user.click(conflictsHeader)
+
+      const conflictItems = screen.getAllByLabelText(/Conflict:/)
+      expect(conflictItems).toHaveLength(3)
+
+      // Verify none are import_failed
+      conflictItems.forEach((item) => {
+        expect(item.getAttribute('aria-label')).not.toContain('import_failed')
+      })
     })
 
-    it('should efficiently extract import failed packages using es-toolkit', () => {
+    it('should efficiently extract import failed packages using es-toolkit', async () => {
       mockConflictData.value = mockConflictResults
-      const wrapper = createWrapper()
+      const { user } = renderComponent()
 
-      // Verify that only import_failed packages are extracted
-      const vm = getVM(wrapper)
-      expect(vm.importFailedConflicts).toHaveLength(1)
-      expect(vm.importFailedConflicts[0]).toBe('Test Package 3')
+      // Expand import failed panel to verify items in DOM
+      const importFailedHeader = screen.getAllByTestId(
+        'conflict-dialog-panel-toggle'
+      )[0]
+      await user.click(importFailedHeader)
+
+      const importFailedItems = screen.getAllByLabelText(
+        /Import failed package:/
+      )
+      expect(importFailedItems).toHaveLength(1)
+      expect(importFailedItems[0].textContent).toContain('Test Package 3')
     })
   })
 })
diff --git a/src/workbench/extensions/manager/components/manager/PackVersionBadge.test.ts b/src/workbench/extensions/manager/components/manager/PackVersionBadge.test.ts
index c17bfb6b80..104e8cf943 100644
--- a/src/workbench/extensions/manager/components/manager/PackVersionBadge.test.ts
+++ b/src/workbench/extensions/manager/components/manager/PackVersionBadge.test.ts
@@ -1,6 +1,9 @@
-import type { VueWrapper } from '@vue/test-utils'
-import { mount } from '@vue/test-utils'
+/* eslint-disable testing-library/no-node-access */
+/* eslint-disable testing-library/no-container */
+/* eslint-disable testing-library/prefer-user-event */
 import { createTestingPinia } from '@pinia/testing'
+import { fireEvent, render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import PrimeVue from 'primevue/config'
 import Tooltip from 'primevue/tooltip'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -10,7 +13,6 @@ import { createI18n } from 'vue-i18n'
 import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
 import PackVersionBadge from './PackVersionBadge.vue'
-import PackVersionSelectorPopover from './PackVersionSelectorPopover.vue'
 
 // Mock config to prevent __COMFYUI_FRONTEND_VERSION__ error
 vi.mock('@/config', () => ({
@@ -66,23 +68,30 @@ const PopoverStub = {
   }
 }
 
+const PackVersionSelectorPopoverStub = {
+  name: 'PackVersionSelectorPopover',
+  template:
+    '<div><button data-testid="cancel-btn" @click="$emit(\'cancel\')">Cancel</button><button data-testid="submit-btn" @click="$emit(\'submit\')">Submit</button></div>',
+  emits: ['cancel', 'submit']
+}
+
 describe('PackVersionBadge', () => {
   beforeEach(() => {
     mockToggle.mockReset()
     mockHide.mockReset()
-    mockIsPackEnabled.mockReturnValue(true) // Reset to default enabled state
+    mockIsPackEnabled.mockReturnValue(true)
   })
 
-  const mountComponent = ({
+  function renderComponent({
     props = {}
-  }: { props?: Record<string, unknown> } = {}): VueWrapper => {
+  }: { props?: Record<string, unknown> } = {}) {
     const i18n = createI18n({
       legacy: false,
       locale: 'en',
       messages: { en: enMessages }
     })
 
-    return mount(PackVersionBadge, {
+    return render(PackVersionBadge, {
       props: {
         nodePack: mockNodePack,
         isSelected: false,
@@ -95,22 +104,19 @@ describe('PackVersionBadge', () => {
         },
         stubs: {
           Popover: PopoverStub,
-          PackVersionSelectorPopover: true
+          PackVersionSelectorPopover: PackVersionSelectorPopoverStub
         }
       }
     })
   }
 
   it('renders with installed version from store', () => {
-    const wrapper = mountComponent()
+    renderComponent()
 
-    const badge = wrapper.find('[role="button"]')
-    expect(badge.exists()).toBe(true)
-    expect(badge.find('span').text()).toBe('1.5.0') // From mockInstalledPacks
+    expect(screen.getByRole('button', { name: /1\.5\.0/ })).toBeInTheDocument()
   })
 
   it('falls back to latest_version when not installed', () => {
-    // Use a nodePack that's not in the installedPacks
     const uninstalledPack = {
       id: 'uninstalled-pack',
       name: 'Uninstalled Pack',
@@ -119,29 +125,24 @@ describe('PackVersionBadge', () => {
       }
     }
 
-    const wrapper = mountComponent({
+    renderComponent({
       props: { nodePack: uninstalledPack }
     })
 
-    const badge = wrapper.find('[role="button"]')
-    expect(badge.exists()).toBe(true)
-    expect(badge.find('span').text()).toBe('3.0.0') // From latest_version
+    expect(screen.getByRole('button', { name: /3\.0\.0/ })).toBeInTheDocument()
   })
 
   it('falls back to NIGHTLY when no latest_version and not installed', () => {
-    // Use a nodePack with no latest_version and not in installedPacks
     const noVersionPack = {
       id: 'no-version-pack',
       name: 'No Version Pack'
     }
 
-    const wrapper = mountComponent({
+    renderComponent({
       props: { nodePack: noVersionPack }
     })
 
-    const badge = wrapper.find('[role="button"]')
-    expect(badge.exists()).toBe(true)
-    expect(badge.find('span').text()).toBe('nightly')
+    expect(screen.getByRole('button', { name: /nightly/ })).toBeInTheDocument()
   })
 
   it('falls back to NIGHTLY when nodePack.id is missing', () => {
@@ -149,155 +150,138 @@ describe('PackVersionBadge', () => {
       name: 'Invalid Pack'
     }
 
-    const wrapper = mountComponent({
+    renderComponent({
       props: { nodePack: invalidPack }
     })
 
-    const badge = wrapper.find('[role="button"]')
-    expect(badge.exists()).toBe(true)
-    expect(badge.find('span').text()).toBe('nightly')
+    expect(screen.getByRole('button', { name: /nightly/ })).toBeInTheDocument()
   })
 
   it('toggles the popover when button is clicked', async () => {
-    const wrapper = mountComponent()
+    const user = userEvent.setup()
+    renderComponent()
 
-    // Click the badge
-    await wrapper.find('[role="button"]').trigger('click')
+    await user.click(screen.getByRole('button', { name: /1\.5\.0/ }))
 
-    // Verify that the toggle method was called
     expect(mockToggle).toHaveBeenCalled()
   })
 
   it('closes the popover when cancel is emitted', async () => {
-    const wrapper = mountComponent()
+    const user = userEvent.setup()
+    renderComponent()
 
-    // Simulate the popover emitting a cancel event
-    wrapper.findComponent(PackVersionSelectorPopover).vm.$emit('cancel')
+    await user.click(screen.getByTestId('cancel-btn'))
     await nextTick()
 
-    // Verify that the hide method was called
     expect(mockHide).toHaveBeenCalled()
   })
 
   it('closes the popover when submit is emitted', async () => {
-    const wrapper = mountComponent()
+    const user = userEvent.setup()
+    renderComponent()
 
-    // Simulate the popover emitting a submit event
-    wrapper.findComponent(PackVersionSelectorPopover).vm.$emit('submit')
+    await user.click(screen.getByTestId('submit-btn'))
     await nextTick()
 
-    // Verify that the hide method was called
     expect(mockHide).toHaveBeenCalled()
   })
 
   describe('selection state changes', () => {
     it('closes the popover when card is deselected', async () => {
-      const wrapper = mountComponent({
+      const { rerender } = renderComponent({
         props: { isSelected: true }
       })
 
-      // Change isSelected from true to false
-      await wrapper.setProps({ isSelected: false })
+      await rerender({ nodePack: mockNodePack, isSelected: false })
       await nextTick()
 
-      // Verify that the hide method was called
       expect(mockHide).toHaveBeenCalled()
     })
 
     it('does not close the popover when card is selected', async () => {
-      const wrapper = mountComponent({
+      const { rerender } = renderComponent({
         props: { isSelected: false }
       })
 
-      // Change isSelected from false to true
-      await wrapper.setProps({ isSelected: true })
+      await rerender({ nodePack: mockNodePack, isSelected: true })
       await nextTick()
 
-      // Verify that the hide method was NOT called
       expect(mockHide).not.toHaveBeenCalled()
     })
 
     it('does not close the popover when isSelected remains false', async () => {
-      const wrapper = mountComponent({
+      const { rerender } = renderComponent({
         props: { isSelected: false }
       })
 
-      // Change isSelected from false to false (no change)
-      await wrapper.setProps({ isSelected: false })
+      await rerender({ nodePack: mockNodePack, isSelected: false })
       await nextTick()
 
-      // Verify that the hide method was NOT called
       expect(mockHide).not.toHaveBeenCalled()
     })
 
     it('does not close the popover when isSelected remains true', async () => {
-      const wrapper = mountComponent({
+      const { rerender } = renderComponent({
         props: { isSelected: true }
       })
 
-      // Change isSelected from true to true (no change)
-      await wrapper.setProps({ isSelected: true })
+      await rerender({ nodePack: mockNodePack, isSelected: true })
       await nextTick()
 
-      // Verify that the hide method was NOT called
       expect(mockHide).not.toHaveBeenCalled()
     })
   })
 
   describe('disabled state', () => {
     beforeEach(() => {
-      mockIsPackEnabled.mockReturnValue(false) // Set all packs as disabled for these tests
+      mockIsPackEnabled.mockReturnValue(false)
     })
 
     it('adds disabled styles when pack is disabled', () => {
-      const wrapper = mountComponent()
+      const { container } = renderComponent()
 
-      const badge = wrapper.find('[role="text"]') // role changes to "text" when disabled
-      expect(badge.exists()).toBe(true)
-      expect(badge.classes()).toContain('cursor-not-allowed')
-      expect(badge.classes()).toContain('opacity-60')
+      const badge = container.querySelector('[role="text"]')
+      expect(badge).toBeInTheDocument()
+      expect(badge).toHaveClass('cursor-not-allowed', 'opacity-60')
     })
 
     it('does not show chevron icon when disabled', () => {
-      const wrapper = mountComponent()
+      const { container } = renderComponent()
 
-      const chevronIcon = wrapper.find('.pi-chevron-right')
-      expect(chevronIcon.exists()).toBe(false)
+      const chevronIcon = container.querySelector('.pi-chevron-right')
+      expect(chevronIcon).not.toBeInTheDocument()
     })
 
     it('does not show update arrow when disabled', () => {
-      const wrapper = mountComponent()
+      const { container } = renderComponent()
 
-      const updateIcon = wrapper.find('.pi-arrow-circle-up')
-      expect(updateIcon.exists()).toBe(false)
+      const updateIcon = container.querySelector('.pi-arrow-circle-up')
+      expect(updateIcon).not.toBeInTheDocument()
     })
 
     it('does not toggle popover when clicked while disabled', async () => {
-      const wrapper = mountComponent()
+      const { container } = renderComponent()
 
-      const badge = wrapper.find('[role="text"]') // role changes to "text" when disabled
-      expect(badge.exists()).toBe(true)
-      await badge.trigger('click')
+      const badge = container.querySelector('[role="text"]')!
+      await fireEvent.click(badge)
 
-      // Since it's disabled, the popover should not be toggled
       expect(mockToggle).not.toHaveBeenCalled()
     })
 
     it('has correct tabindex when disabled', () => {
-      const wrapper = mountComponent()
+      const { container } = renderComponent()
 
-      const badge = wrapper.find('[role="text"]') // role changes to "text" when disabled
-      expect(badge.exists()).toBe(true)
-      expect(badge.attributes('tabindex')).toBe('-1')
+      const badge = container.querySelector('[role="text"]')
+      expect(badge).toBeInTheDocument()
+      expect(badge).toHaveAttribute('tabindex', '-1')
     })
 
     it('does not respond to keyboard events when disabled', async () => {
-      const wrapper = mountComponent()
+      const { container } = renderComponent()
 
-      const badge = wrapper.find('[role="text"]') // role changes to "text" when disabled
-      expect(badge.exists()).toBe(true)
-      await badge.trigger('keydown.enter')
-      await badge.trigger('keydown.space')
+      const badge = container.querySelector('[role="text"]')!
+      await fireEvent.keyDown(badge, { key: 'Enter' })
+      await fireEvent.keyDown(badge, { key: ' ' })
 
       expect(mockToggle).not.toHaveBeenCalled()
     })
diff --git a/src/workbench/extensions/manager/components/manager/button/PackEnableToggle.test.ts b/src/workbench/extensions/manager/components/manager/button/PackEnableToggle.test.ts
index 34e50fc563..fb89820f68 100644
--- a/src/workbench/extensions/manager/components/manager/button/PackEnableToggle.test.ts
+++ b/src/workbench/extensions/manager/components/manager/button/PackEnableToggle.test.ts
@@ -1,10 +1,10 @@
-import type { VueWrapper } from '@vue/test-utils'
-import { mount } from '@vue/test-utils'
+/* eslint-disable vue/no-unused-emit-declarations */
 import { createTestingPinia } from '@pinia/testing'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import PrimeVue from 'primevue/config'
-import ToggleSwitch from 'primevue/toggleswitch'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import enMessages from '@/locales/en/main.json' with { type: 'json' }
@@ -21,6 +21,21 @@ vi.mock('es-toolkit/compat', async () => {
   }
 })
 
+const ToggleSwitchStub = defineComponent({
+  name: 'ToggleSwitch',
+  props: {
+    modelValue: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    ariaLabel: { type: String, default: '' }
+  },
+  emits: ['update:modelValue', 'focus'],
+  template: `<div data-testid="toggle-switch" :data-model-value="String(modelValue)" :data-disabled="String(disabled)">
+    <button data-testid="toggle-true" @click="$emit('update:modelValue', true)">on</button>
+    <button data-testid="toggle-false" @click="$emit('update:modelValue', false)">off</button>
+  </div>`
+})
+
 const mockNodePack = {
   id: 'test-pack',
   name: 'Test Pack',
@@ -51,6 +66,8 @@ vi.mock('@/workbench/extensions/manager/stores/conflictDetectionStore', () => ({
 }))
 
 describe('PackEnableToggle', () => {
+  const user = userEvent.setup()
+
   beforeEach(() => {
     vi.clearAllMocks()
     mockIsPackEnabled.mockReset()
@@ -58,13 +75,13 @@ describe('PackEnableToggle', () => {
     mockDisablePack.mockReset().mockResolvedValue(undefined)
   })
 
-  const mountComponent = ({
+  function renderComponent({
     props = {},
     installedPacks = {}
   }: {
     props?: Record<string, unknown>
     installedPacks?: Record<string, unknown>
-  } = {}): VueWrapper => {
+  } = {}) {
     const i18n = createI18n({
       legacy: false,
       locale: 'en',
@@ -80,54 +97,59 @@ describe('PackEnableToggle', () => {
       typeof useComfyManagerStore
     >)
 
-    return mount(PackEnableToggle, {
+    return render(PackEnableToggle, {
       props: {
         nodePack: mockNodePack,
         ...props
       },
       global: {
-        plugins: [PrimeVue, createTestingPinia({ stubActions: false }), i18n]
+        plugins: [PrimeVue, createTestingPinia({ stubActions: false }), i18n],
+        stubs: {
+          ToggleSwitch: ToggleSwitchStub
+        }
       }
     })
   }
 
   it('renders a toggle switch', () => {
     mockIsPackEnabled.mockReturnValue(true)
-    const wrapper = mountComponent()
+    renderComponent()
 
-    const toggleSwitch = wrapper.findComponent(ToggleSwitch)
-    expect(toggleSwitch.exists()).toBe(true)
+    expect(screen.getByTestId('toggle-switch')).toBeInTheDocument()
   })
 
   it('checks if pack is enabled on mount', () => {
     mockIsPackEnabled.mockReturnValue(true)
-    mountComponent()
+    renderComponent()
 
     expect(mockIsPackEnabled).toHaveBeenCalledWith(mockNodePack.id)
   })
 
   it('sets toggle to on when pack is enabled', () => {
     mockIsPackEnabled.mockReturnValue(true)
-    const wrapper = mountComponent()
+    renderComponent()
 
-    const toggleSwitch = wrapper.findComponent(ToggleSwitch)
-    expect(toggleSwitch.props('modelValue')).toBe(true)
+    expect(screen.getByTestId('toggle-switch')).toHaveAttribute(
+      'data-model-value',
+      'true'
+    )
   })
 
   it('sets toggle to off when pack is disabled', () => {
     mockIsPackEnabled.mockReturnValue(false)
-    const wrapper = mountComponent()
+    renderComponent()
 
-    const toggleSwitch = wrapper.findComponent(ToggleSwitch)
-    expect(toggleSwitch.props('modelValue')).toBe(false)
+    expect(screen.getByTestId('toggle-switch')).toHaveAttribute(
+      'data-model-value',
+      'false'
+    )
   })
 
   it('calls enablePack when toggle is switched on', async () => {
     mockIsPackEnabled.mockReturnValue(false)
-    const wrapper = mountComponent()
+    renderComponent()
 
-    const toggleSwitch = wrapper.findComponent(ToggleSwitch)
-    await toggleSwitch.vm.$emit('update:modelValue', true)
+    await user.click(screen.getByTestId('toggle-true'))
 
     expect(mockEnablePack).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -139,10 +161,9 @@ describe('PackEnableToggle', () => {
 
   it('calls disablePack when toggle is switched off', async () => {
     mockIsPackEnabled.mockReturnValue(true)
-    const wrapper = mountComponent()
+    renderComponent()
 
-    const toggleSwitch = wrapper.findComponent(ToggleSwitch)
-    await toggleSwitch.vm.$emit('update:modelValue', false)
+    await user.click(screen.getByTestId('toggle-false'))
 
     expect(mockDisablePack).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -159,22 +180,21 @@ describe('PackEnableToggle', () => {
     mockEnablePack.mockReturnValue(pendingPromise)
 
     mockIsPackEnabled.mockReturnValue(false)
-    const wrapper = mountComponent()
+    renderComponent()
 
-    // Trigger the toggle
-    const toggleSwitch = wrapper.findComponent(ToggleSwitch)
-    await toggleSwitch.vm.$emit('update:modelValue', true)
-
-    // Check that the toggle is disabled during loading
+    await user.click(screen.getByTestId('toggle-true'))
     await nextTick()
-    expect(wrapper.findComponent(ToggleSwitch).props('disabled')).toBe(true)
+    expect(screen.getByTestId('toggle-switch')).toHaveAttribute(
+      'data-disabled',
+      'true'
+    )
 
-    // Resolve the promise to simulate the operation completing
     await pendingPromise
-
-    // Check that the toggle is enabled after the operation completes
     await nextTick()
-    expect(wrapper.findComponent(ToggleSwitch).props('disabled')).toBe(false)
+    expect(screen.getByTestId('toggle-switch')).toHaveAttribute(
+      'data-disabled',
+      'false'
+    )
   })
 
   describe('conflict warning icon', () => {
@@ -194,23 +214,27 @@ describe('PackEnableToggle', () => {
       })
 
       mockIsPackEnabled.mockReturnValue(true)
-      const wrapper = mountComponent()
+      const { container } = renderComponent()
 
-      // Check if warning icon exists
-      const warningIcon = wrapper.find('.icon-\\[lucide--triangle-alert\\]')
-      expect(warningIcon.exists()).toBe(true)
-      expect(warningIcon.classes()).toContain('text-warning-background')
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      const warningIcon = container.querySelector(
+        '.icon-\\[lucide--triangle-alert\\]'
+      )
+      expect(warningIcon).not.toBeNull()
+      expect(warningIcon).toHaveClass('text-warning-background')
     })
 
     it('should not show warning icon when package has no conflicts', () => {
       mockGetConflictsForPackageByID.mockReturnValue(null)
 
       mockIsPackEnabled.mockReturnValue(true)
-      const wrapper = mountComponent()
+      const { container } = renderComponent()
 
-      // Check if warning icon does not exist
-      const warningIcon = wrapper.find('.icon-\\[lucide--triangle-alert\\]')
-      expect(warningIcon.exists()).toBe(false)
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      const warningIcon = container.querySelector(
+        '.icon-\\[lucide--triangle-alert\\]'
+      )
+      expect(warningIcon).toBeNull()
     })
   })
 })
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.test.ts b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.test.ts
index 07b2a36ae0..8bfae733ca 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.test.ts
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.test.ts
@@ -1,7 +1,8 @@
-import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
+import { render, screen } from '@testing-library/vue'
+
 import enMessages from '@/locales/en/main.json' with { type: 'json' }
 import type { components } from '@/types/comfyRegistryTypes'
 
@@ -16,10 +17,10 @@ const i18n = createI18n({
 })
 
 describe('DescriptionTabPanel', () => {
-  const mountComponent = (props: {
+  function renderComponent(props: {
     nodePack: Partial<components['schemas']['Node']>
-  }) => {
-    return mount(DescriptionTabPanel, {
+  }) {
+    return render(DescriptionTabPanel, {
       props,
       global: {
         plugins: [i18n]
@@ -116,15 +117,16 @@ describe('DescriptionTabPanel', () => {
   describe('license formatting', () => {
     licenseTests.forEach((test) => {
       it(test.name, () => {
-        const wrapper = mountComponent({ nodePack: test.nodePack })
+        renderComponent({ nodePack: test.nodePack })
         if (test.expected.isUrl) {
-          const link = wrapper
-            .findAll('a')
-            .find((a) => a.text().includes(test.expected.text))
+          const links = screen.getAllByRole('link')
+          const link = links.find((a) =>
+            a.textContent?.includes(test.expected.text)
+          )
           expect(link).toBeDefined()
-          expect(link!.attributes('href')).toBe(test.expected.text)
+          expect(link!).toHaveAttribute('href', test.expected.text)
         } else {
-          expect(wrapper.text()).toContain(test.expected.text)
+          expect(screen.getByText(test.expected.text)).toBeInTheDocument()
         }
       })
     })
@@ -132,30 +134,31 @@ describe('DescriptionTabPanel', () => {
 
   describe('description sections', () => {
     it('shows description text', () => {
-      const wrapper = mountComponent({
-        nodePack: createNodePack()
-      })
-      expect(wrapper.text()).toContain('Test description')
+      renderComponent({ nodePack: createNodePack() })
+      expect(screen.getByText('Test description')).toBeInTheDocument()
     })
 
     it('shows repository link when available', () => {
-      const wrapper = mountComponent({
+      renderComponent({
         nodePack: createNodePack({
           repository: 'https://github.com/user/repo'
         })
       })
-      const repoLink = wrapper.find('a[href="https://github.com/user/repo"]')
-      expect(repoLink.exists()).toBe(true)
-      expect(repoLink.attributes('target')).toBe('_blank')
+      const links = screen.getAllByRole('link')
+      const repoLink = links.find(
+        (l) => l.getAttribute('href') === 'https://github.com/user/repo'
+      )
+      expect(repoLink).toBeDefined()
+      expect(repoLink).toHaveAttribute('target', '_blank')
     })
 
     it('shows fallback text when description is missing', () => {
-      const wrapper = mountComponent({
+      renderComponent({
         nodePack: {
           description: undefined
         }
       })
-      expect(wrapper.text()).toContain('No description available')
+      expect(screen.getByText('No description available')).toBeInTheDocument()
     })
   })
 })
diff --git a/src/workbench/extensions/manager/components/manager/packCard/PackCard.test.ts b/src/workbench/extensions/manager/components/manager/packCard/PackCard.test.ts
index 29af937f5a..035d56c242 100644
--- a/src/workbench/extensions/manager/components/manager/packCard/PackCard.test.ts
+++ b/src/workbench/extensions/manager/components/manager/packCard/PackCard.test.ts
@@ -1,8 +1,9 @@
 import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
 import ProgressSpinner from 'primevue/progressspinner'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
+import { render, screen } from '@testing-library/vue'
+
 import PackCard from '@/workbench/extensions/manager/components/manager/packCard/PackCard.vue'
 import type {
   MergedNodePack,
@@ -79,11 +80,11 @@ describe('PackCard', () => {
     storageMap.clear()
   })
 
-  const createWrapper = (props: {
+  function renderComponent(props: {
     nodePack: MergedNodePack | RegistryPack
     isSelected?: boolean
-  }) => {
-    const wrapper = mount(PackCard, {
+  }) {
+    return render(PackCard, {
       props,
       global: {
         plugins: [createTestingPinia({ stubActions: false })],
@@ -100,8 +101,6 @@ describe('PackCard', () => {
         }
       }
     })
-
-    return wrapper
   }
 
   const mockNodePack: RegistryPack = {
@@ -116,80 +115,89 @@ describe('PackCard', () => {
 
   describe('basic rendering', () => {
     it('should render package card with basic information', () => {
-      const wrapper = createWrapper({ nodePack: mockNodePack })
+      renderComponent({ nodePack: mockNodePack })
 
-      expect(wrapper.exists()).toBe(true)
-      expect(wrapper.text()).toContain('Test Package')
-      expect(wrapper.text()).toContain('Test package description')
-      expect(wrapper.text()).toContain('Test Author')
+      expect(screen.getByText('Test Package')).toBeInTheDocument()
+      expect(screen.getByText('Test package description')).toBeInTheDocument()
+      expect(screen.getByText('Test Author')).toBeInTheDocument()
     })
 
     it('should render date correctly', () => {
-      const wrapper = createWrapper({ nodePack: mockNodePack })
+      renderComponent({ nodePack: mockNodePack })
 
-      expect(wrapper.text()).toContain('2024. 1. 1.')
+      expect(screen.getByText('2024. 1. 1.')).toBeInTheDocument()
     })
 
     it('should apply selected ring when isSelected is true', () => {
-      const wrapper = createWrapper({
+      const { container } = renderComponent({
         nodePack: mockNodePack,
         isSelected: true
       })
 
-      expect(wrapper.find('.ring-3').exists()).toBe(true)
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- CSS class has no ARIA role
+      expect(container.querySelector('.ring-3')).toBeInTheDocument()
     })
 
     it('should not apply selected ring when isSelected is false', () => {
-      const wrapper = createWrapper({
+      const { container } = renderComponent({
         nodePack: mockNodePack,
         isSelected: false
       })
 
-      expect(wrapper.find('.ring-3').exists()).toBe(false)
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- CSS class has no ARIA role
+      expect(container.querySelector('.ring-3')).not.toBeInTheDocument()
     })
   })
 
   describe('component behavior', () => {
     it('should render without errors', () => {
-      const wrapper = createWrapper({ nodePack: mockNodePack })
+      const { container } = renderComponent({ nodePack: mockNodePack })
 
-      expect(wrapper.exists()).toBe(true)
-      expect(wrapper.find('.rounded-lg').exists()).toBe(true)
+      // eslint-disable-next-line testing-library/no-node-access -- structural root element check
+      expect(container.firstElementChild).toBeInTheDocument()
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- CSS class has no ARIA role
+      expect(container.querySelector('.rounded-lg')).toBeInTheDocument()
     })
   })
 
   describe('package information display', () => {
     it('should display package name', () => {
-      const wrapper = createWrapper({ nodePack: mockNodePack })
+      renderComponent({ nodePack: mockNodePack })
 
-      expect(wrapper.text()).toContain('Test Package')
+      expect(screen.getByText('Test Package')).toBeInTheDocument()
     })
 
     it('should display package description', () => {
-      const wrapper = createWrapper({ nodePack: mockNodePack })
+      renderComponent({ nodePack: mockNodePack })
 
-      expect(wrapper.text()).toContain('Test package description')
+      expect(screen.getByText('Test package description')).toBeInTheDocument()
     })
 
     it('should display author name', () => {
-      const wrapper = createWrapper({ nodePack: mockNodePack })
+      renderComponent({ nodePack: mockNodePack })
 
-      expect(wrapper.text()).toContain('Test Author')
+      expect(screen.getByText('Test Author')).toBeInTheDocument()
     })
 
     it('should handle missing description', () => {
-      const packWithoutDescription = { ...mockNodePack, description: undefined }
-      const wrapper = createWrapper({ nodePack: packWithoutDescription })
+      const packWithoutDescription = {
+        ...mockNodePack,
+        description: undefined
+      }
+      const { container } = renderComponent({
+        nodePack: packWithoutDescription
+      })
 
-      expect(wrapper.find('p').exists()).toBe(false)
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- <p> has no implicit ARIA role
+      expect(container.querySelector('p')).not.toBeInTheDocument()
     })
 
     it('should handle missing author', () => {
       const packWithoutAuthor = { ...mockNodePack, author: undefined }
-      const wrapper = createWrapper({ nodePack: packWithoutAuthor })
+      const { container } = renderComponent({ nodePack: packWithoutAuthor })
 
-      // Should still render without errors
-      expect(wrapper.exists()).toBe(true)
+      // eslint-disable-next-line testing-library/no-node-access -- structural root element check
+      expect(container.firstElementChild).toBeInTheDocument()
     })
 
     it('should use localized singular/plural nodes label', () => {
@@ -198,30 +206,36 @@ describe('PackCard', () => {
         comfy_nodes: ['node-a']
       } as MergedNodePack
 
-      const wrapper = createWrapper({ nodePack: packWithNodes })
+      renderComponent({ nodePack: packWithNodes })
 
-      expect(wrapper.text()).toContain('g.nodesCount-1')
+      expect(screen.getByText('g.nodesCount-1')).toBeInTheDocument()
       expect(translateMock).toHaveBeenCalledWith('g.nodesCount', 1)
     })
   })
 
   describe('component structure', () => {
     it('should render PackBanner component', () => {
-      const wrapper = createWrapper({ nodePack: mockNodePack })
+      const { container } = renderComponent({ nodePack: mockNodePack })
 
-      expect(wrapper.find('pack-banner-stub').exists()).toBe(true)
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- stub component tag has no ARIA role
+      const banner = container.querySelector('pack-banner-stub')
+      expect(banner).toBeInTheDocument()
     })
 
     it('should render PackVersionBadge component', () => {
-      const wrapper = createWrapper({ nodePack: mockNodePack })
+      const { container } = renderComponent({ nodePack: mockNodePack })
 
-      expect(wrapper.find('pack-version-badge-stub').exists()).toBe(true)
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- stub component tag has no ARIA role
+      const badge = container.querySelector('pack-version-badge-stub')
+      expect(badge).toBeInTheDocument()
     })
 
     it('should render PackCardFooter component', () => {
-      const wrapper = createWrapper({ nodePack: mockNodePack })
+      const { container } = renderComponent({ nodePack: mockNodePack })
 
-      expect(wrapper.find('pack-card-footer-stub').exists()).toBe(true)
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- stub component tag has no ARIA role
+      const footer = container.querySelector('pack-card-footer-stub')
+      expect(footer).toBeInTheDocument()
     })
   })
 })
diff --git a/src/workbench/extensions/manager/components/manager/packCard/PackCardFooter.test.ts b/src/workbench/extensions/manager/components/manager/packCard/PackCardFooter.test.ts
index 9f6e1d5a64..eab26998a6 100644
--- a/src/workbench/extensions/manager/components/manager/packCard/PackCardFooter.test.ts
+++ b/src/workbench/extensions/manager/components/manager/packCard/PackCardFooter.test.ts
@@ -1,5 +1,4 @@
-import type { VueWrapper } from '@vue/test-utils'
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
 import { createTestingPinia } from '@pinia/testing'
 import PrimeVue from 'primevue/config'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -45,8 +44,6 @@ vi.mock(
   })
 )
 
-// Remove the mock for injection key since we're importing it directly
-
 const mockNodePack = {
   id: 'test-pack',
   name: 'Test Pack',
@@ -60,14 +57,14 @@ describe('PackCardFooter', () => {
     mockCheckNodeCompatibility.mockReset()
   })
 
-  const mountComponent = (props = {}): VueWrapper => {
+  function renderComponent(props = {}) {
     const i18n = createI18n({
       legacy: false,
       locale: 'en',
       messages: { en: enMessages }
     })
 
-    return mount(PackCardFooter, {
+    return render(PackCardFooter, {
       props: {
         nodePack: mockNodePack,
         ...props
@@ -88,9 +85,9 @@ describe('PackCardFooter', () => {
         hasConflict: false,
         conflicts: []
       })
-      const wrapper = mountComponent()
+      renderComponent()
 
-      expect(wrapper.text()).toContain('1,000')
+      expect(screen.getByText('1,000')).toBeTruthy()
     })
 
     it('shows install button for uninstalled packages', () => {
@@ -100,27 +97,19 @@ describe('PackCardFooter', () => {
         conflicts: []
       })
 
-      const wrapper = mountComponent()
+      renderComponent()
 
-      expect(wrapper.find('[data-testid="pack-install-button"]').exists()).toBe(
-        true
-      )
-      expect(wrapper.find('[data-testid="pack-enable-toggle"]').exists()).toBe(
-        false
-      )
+      expect(screen.getByTestId('pack-install-button')).not.toBeNull()
+      expect(screen.queryByTestId('pack-enable-toggle')).toBeNull()
     })
 
     it('shows enable toggle for installed packages', () => {
       mockIsPackInstalled.mockReturnValue(true)
 
-      const wrapper = mountComponent()
+      renderComponent()
 
-      expect(wrapper.find('[data-testid="pack-enable-toggle"]').exists()).toBe(
-        true
-      )
-      expect(wrapper.find('[data-testid="pack-install-button"]').exists()).toBe(
-        false
-      )
+      expect(screen.getByTestId('pack-enable-toggle')).not.toBeNull()
+      expect(screen.queryByTestId('pack-install-button')).toBeNull()
     })
   })
 
@@ -138,12 +127,11 @@ describe('PackCardFooter', () => {
         ]
       })
 
-      const wrapper = mountComponent()
+      renderComponent()
 
-      const installButton = wrapper.find('[data-testid="pack-install-button"]')
-      expect(installButton.exists()).toBe(true)
-      // The install button should receive has-conflict prop as true
-      expect(installButton.attributes()).toHaveProperty('has-conflict')
+      const installButton = screen.getByTestId('pack-install-button')
+      expect(installButton).toBeTruthy()
+      expect(installButton.hasAttribute('has-conflict')).toBe(true)
     })
 
     it('does not pass conflict info when no conflicts exist', () => {
@@ -153,12 +141,11 @@ describe('PackCardFooter', () => {
         conflicts: []
       })
 
-      const wrapper = mountComponent()
+      renderComponent()
 
-      const installButton = wrapper.find('[data-testid="pack-install-button"]')
-      expect(installButton.exists()).toBe(true)
-      // The install button should receive has-conflict prop as false
-      expect(installButton.attributes()['has-conflict']).toBe('false')
+      const installButton = screen.getByTestId('pack-install-button')
+      expect(installButton).toBeTruthy()
+      expect(installButton.getAttribute('has-conflict')).toBe('false')
     })
   })
 
@@ -166,12 +153,11 @@ describe('PackCardFooter', () => {
     it('does not pass has-conflict prop to enable toggle', () => {
       mockIsPackInstalled.mockReturnValue(true)
 
-      const wrapper = mountComponent()
+      renderComponent()
 
-      const enableToggle = wrapper.find('[data-testid="pack-enable-toggle"]')
-      expect(enableToggle.exists()).toBe(true)
-      // The enable toggle should not receive has-conflict prop (removed in our fix)
-      expect(enableToggle.attributes()).not.toHaveProperty('has-conflict')
+      const enableToggle = screen.getByTestId('pack-enable-toggle')
+      expect(enableToggle).toBeTruthy()
+      expect(enableToggle.hasAttribute('has-conflict')).toBe(false)
     })
   })
 })
diff --git a/src/workbench/extensions/manager/components/manager/skeleton/PackCardGridSkeleton.test.ts b/src/workbench/extensions/manager/components/manager/skeleton/PackCardGridSkeleton.test.ts
index dfcbc2a9b4..248287b31d 100644
--- a/src/workbench/extensions/manager/components/manager/skeleton/PackCardGridSkeleton.test.ts
+++ b/src/workbench/extensions/manager/components/manager/skeleton/PackCardGridSkeleton.test.ts
@@ -1,5 +1,4 @@
-import type { VueWrapper } from '@vue/test-utils'
-import { mount } from '@vue/test-utils'
+import { render } from '@testing-library/vue'
 import { createTestingPinia } from '@pinia/testing'
 import PrimeVue from 'primevue/config'
 import { describe, expect, it } from 'vitest'
@@ -10,21 +9,20 @@ import type { ComponentProps } from 'vue-component-type-helpers'
 import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
 import GridSkeleton from './GridSkeleton.vue'
-import PackCardSkeleton from './PackCardSkeleton.vue'
 
 describe('GridSkeleton', () => {
-  function mountComponent({
+  function renderComponent({
     props = {}
   }: {
     props?: Partial<ComponentProps<typeof GridSkeleton>>
-  } = {}): VueWrapper {
+  } = {}) {
     const i18n = createI18n({
       legacy: false,
       locale: 'en',
       messages: { en: enMessages }
     })
 
-    return mount(GridSkeleton, {
+    return render(GridSkeleton, {
       props: {
         gridStyle: {
           display: 'grid',
@@ -37,15 +35,18 @@ describe('GridSkeleton', () => {
       global: {
         plugins: [PrimeVue, createTestingPinia({ stubActions: false }), i18n],
         stubs: {
-          PackCardSkeleton: true
+          PackCardSkeleton: {
+            template: '<div data-testid="pack-card-skeleton" />'
+          }
         }
       }
     })
   }
 
   it('renders with default props', () => {
-    const wrapper = mountComponent()
-    expect(wrapper.exists()).toBe(true)
+    const { container } = renderComponent()
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(container.firstElementChild).toBeTruthy()
   })
 
   it('applies the provided grid style', () => {
@@ -56,11 +57,12 @@ describe('GridSkeleton', () => {
       gap: '1rem'
     }
 
-    const wrapper = mountComponent({
+    const { container } = renderComponent({
       props: { gridStyle: customGridStyle }
     })
 
-    const gridElement = wrapper.element
+    // eslint-disable-next-line testing-library/no-node-access
+    const gridElement = container.firstElementChild as HTMLElement
     expect(gridElement.style.display).toBe('grid')
     expect(gridElement.style.gridTemplateColumns).toBe(
       'repeat(auto-fill, minmax(15rem, 1fr))'
@@ -71,13 +73,16 @@ describe('GridSkeleton', () => {
 
   it('renders the specified number of skeleton cards', async () => {
     const cardCount = 5
-    const wrapper = mountComponent({
+    const { container } = renderComponent({
       props: { skeletonCardCount: cardCount }
     })
 
     await nextTick()
 
-    const skeletonCards = wrapper.findAllComponents(PackCardSkeleton)
-    expect(skeletonCards.length).toBe(5)
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const skeletonCards = container.querySelectorAll(
+      '[data-testid="pack-card-skeleton"]'
+    )
+    expect(skeletonCards).toHaveLength(5)
   })
 })
diff --git a/src/workbench/extensions/manager/stores/comfyManagerStore.test.ts b/src/workbench/extensions/manager/stores/comfyManagerStore.test.ts
index 8509d8c3aa..1571624b33 100644
--- a/src/workbench/extensions/manager/stores/comfyManagerStore.test.ts
+++ b/src/workbench/extensions/manager/stores/comfyManagerStore.test.ts
@@ -22,12 +22,16 @@ vi.mock('@/workbench/extensions/manager/composables/useManagerQueue', () => {
   const enqueueTaskMock = vi.fn()
 
   return {
-    useManagerQueue: () => ({
-      statusMessage: ref(''),
-      allTasksDone: ref(false),
-      enqueueTask: enqueueTaskMock,
-      isProcessingTasks: ref(false)
-    }),
+    useManagerQueue: () => {
+      const isProcessing = ref(false)
+      return {
+        statusMessage: ref(''),
+        allTasksDone: ref(false),
+        enqueueTask: enqueueTaskMock,
+        isProcessing,
+        isProcessingTasks: isProcessing
+      }
+    },
     enqueueTask: enqueueTaskMock
   }
 })
@@ -350,7 +354,7 @@ describe('useComfyManagerStore', () => {
     )
   })
 
-  describe.skip('isPackInstalling', () => {
+  describe('isPackInstalling', () => {
     it('should return false for packs not being installed', () => {
       const store = useComfyManagerStore()
       expect(store.isPackInstalling('test-pack')).toBe(false)
@@ -375,37 +379,6 @@ describe('useComfyManagerStore', () => {
       expect(store.isPackInstalling('test-pack')).toBe(true)
     })
 
-    it('should remove pack from installing list when explicitly removed', async () => {
-      const store = useComfyManagerStore()
-
-      // Call installPack
-      await store.installPack.call({
-        id: 'test-pack',
-        repository: 'https://github.com/test/test-pack',
-        channel: 'dev' as ManagerChannel,
-        mode: 'cache' as ManagerDatabaseSource,
-        selected_version: 'latest',
-        version: 'latest'
-      })
-
-      // Verify pack is installing
-      expect(store.isPackInstalling('test-pack')).toBe(true)
-
-      // Call installPack again for another pack to demonstrate multiple installs
-      await store.installPack.call({
-        id: 'another-pack',
-        repository: 'https://github.com/test/another-pack',
-        channel: 'dev' as ManagerChannel,
-        mode: 'cache' as ManagerDatabaseSource,
-        selected_version: 'latest',
-        version: 'latest'
-      })
-
-      // Both should be installing
-      expect(store.isPackInstalling('test-pack')).toBe(true)
-      expect(store.isPackInstalling('another-pack')).toBe(true)
-    })
-
     it('should track multiple packs installing independently', async () => {
       const store = useComfyManagerStore()
 
diff --git a/src/workbench/extensions/manager/utils/graphHasMissingNodes.test.ts b/src/workbench/extensions/manager/utils/graphHasMissingNodes.test.ts
index d987e72310..33c16cadb6 100644
--- a/src/workbench/extensions/manager/utils/graphHasMissingNodes.test.ts
+++ b/src/workbench/extensions/manager/utils/graphHasMissingNodes.test.ts
@@ -1,3 +1,4 @@
+import { fromAny, fromPartial } from '@total-typescript/shoehorn'
 import { describe, expect, it } from 'vitest'
 
 import type {
@@ -5,12 +6,12 @@ import type {
   LGraphNode,
   Subgraph
 } from '@/lib/litegraph/src/litegraph'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import {
   collectMissingNodes,
   graphHasMissingNodes
 } from '@/workbench/extensions/manager/utils/graphHasMissingNodes'
 import type { NodeDefLookup } from '@/workbench/extensions/manager/utils/graphHasMissingNodes'
-import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 
 type NodeDefs = NodeDefLookup
 
@@ -18,23 +19,23 @@ let nodeIdCounter = 0
 const mockNodeDef = {} as ComfyNodeDefImpl
 
 const createGraph = (nodes: LGraphNode[] = []): LGraph => {
-  return { nodes } as Partial<LGraph> as LGraph
+  return fromPartial<LGraph>({ nodes })
 }
 
 const createSubgraph = (nodes: LGraphNode[]): Subgraph => {
-  return { nodes } as Partial<Subgraph> as Subgraph
+  return fromPartial<Subgraph>({ nodes })
 }
 
 const createNode = (
   type?: string,
   subgraphNodes?: LGraphNode[]
 ): LGraphNode => {
-  return {
+  return fromAny<LGraphNode, unknown>({
     id: nodeIdCounter++,
     type,
     isSubgraphNode: subgraphNodes ? () => true : undefined,
     subgraph: subgraphNodes ? createSubgraph(subgraphNodes) : undefined
-  } as unknown as LGraphNode
+  })
 }
 
 describe('graphHasMissingNodes', () => {
diff --git a/tsconfig.json b/tsconfig.json
index 1b29384062..23162bafc8 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,13 +21,13 @@
     "verbatimModuleSyntax": true,
     "paths": {
       "@/*": ["./src/*"],
+      "@e2e/*": ["./browser_tests/*"],
       "@/utils/formatUtil": [
         "./packages/shared-frontend-utils/src/formatUtil.ts"
       ],
       "@/utils/networkUtil": [
         "./packages/shared-frontend-utils/src/networkUtil.ts"
-      ],
-      "@tests-ui/*": ["./tests-ui/*"]
+      ]
     },
     "typeRoots": ["src/types", "node_modules/@types", "./node_modules"],
     "types": [
@@ -49,8 +49,6 @@
     "src/types/**/*.d.ts",
     "playwright.config.ts",
     "playwright.i18n.config.ts",
-
-    "tests-ui/**/*",
     "vite.config.mts",
     "vitest.config.ts"
     // "vitest.setup.ts",
diff --git a/vite.config.mts b/vite.config.mts
index f892d08e40..a95d5e4dc5 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -63,7 +63,10 @@ const IS_NIGHTLY = process.env.IS_NIGHTLY === 'true'
 let GIT_COMMIT = process.env.FRONTEND_COMMIT_HASH || ''
 if (!GIT_COMMIT) {
   try {
-    GIT_COMMIT = execSync('git rev-parse HEAD', { timeout: 5000 })
+    GIT_COMMIT = execSync('git rev-parse HEAD', {
+      timeout: 5000,
+      windowsHide: true
+    })
       .toString()
       .trim()
   } catch {
@@ -161,7 +164,6 @@ export default defineConfig({
       ignored: [
         './browser_tests/**',
         './node_modules/**',
-        './tests-ui/**',
         '.eslintcache',
         '.oxlintrc.json',
         '*.config.{ts,mts}',
@@ -653,7 +655,18 @@ export default defineConfig({
       'scripts/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'
     ],
     coverage: {
-      reporter: ['text', 'json', 'html']
+      provider: 'v8',
+      reporter: ['text', 'json', 'html', 'lcov'],
+      include: ['src/**/*.{ts,vue}'],
+      exclude: [
+        'src/**/*.test.ts',
+        'src/**/*.spec.ts',
+        'src/**/*.stories.ts',
+        'src/**/*.d.ts',
+        'src/locales/**',
+        'src/lib/litegraph/**',
+        'src/assets/**'
+      ]
     },
     exclude: [
       '**/node_modules/**',