fix(assets-e2e): replace waitForTimeout with state-based wait

Replace the last remaining waitForTimeout(200) with contextmenu visibility assertion for deterministic test behavior.
fix(assets-e2e): fix grid view toggle and bulk right-click tests
2026-03-29 08:47:31 +00:00 · 2026-03-28 13:44:09 +09:00 · 2026-03-28 12:27:58 +09:00 · 2026-03-28 12:15:15 +09:00 · 2026-03-28 08:53:00 +09:00 · 2026-03-27 23:49:09 +09:00
256 changed files with 4272 additions and 19708 deletions
--- a/.claude/agents/playwright-test-generator.md
+++ b/.claude/agents/playwright-test-generator.md
@@ -1,125 +0,0 @@
---
-name: playwright-test-generator
-description: 'Use this agent when you need to create automated browser tests using Playwright Examples: <example>Context: User wants to generate a test for the test plan item. <test-suite><!-- Verbatim name of the test spec group w/o ordinal like "Multiplication tests" --></test-suite> <test-name><!-- Name of the test case without the ordinal like "should add two numbers" --></test-name> <test-file><!-- Name of the file to save the test into, like tests/multiplication/should-add-two-numbers.spec.ts --></test-file> <seed-file><!-- Seed file path from test plan --></seed-file> <body><!-- Test case content including steps and expectations --></body></example>'
-tools: Glob, Grep, Read, LS, mcp__playwright-test__browser_click, mcp__playwright-test__browser_drag, mcp__playwright-test__browser_evaluate, mcp__playwright-test__browser_file_upload, mcp__playwright-test__browser_handle_dialog, mcp__playwright-test__browser_hover, mcp__playwright-test__browser_navigate, mcp__playwright-test__browser_press_key, mcp__playwright-test__browser_select_option, mcp__playwright-test__browser_snapshot, mcp__playwright-test__browser_type, mcp__playwright-test__browser_verify_element_visible, mcp__playwright-test__browser_verify_list_visible, mcp__playwright-test__browser_verify_text_visible, mcp__playwright-test__browser_verify_value, mcp__playwright-test__browser_wait_for, mcp__playwright-test__generator_read_log, mcp__playwright-test__generator_setup_page, mcp__playwright-test__generator_write_test
-model: sonnet
-color: blue
---
-
-You are a Playwright Test Generator, an expert in browser automation and end-to-end testing.
-Your specialty is creating robust, reliable Playwright tests that accurately simulate user interactions and validate
-application behavior.
-
-# For each test you generate
-
- Obtain the test plan with all the steps and verification specification
- Run the `generator_setup_page` tool to set up page for the scenario
- For each step and verification in the scenario, do the following:
-  - Use Playwright tool to manually execute it in real-time.
-  - Use the step description as the intent for each Playwright tool call.
- Retrieve generator log via `generator_read_log`
- Immediately after reading the test log, invoke `generator_write_test` with the generated source code
-  - File should contain single test
-  - File name must be fs-friendly scenario name
-  - Test must be placed in a describe matching the top-level test plan item
-  - Test title must match the scenario name
-  - Includes a comment with the step text before each step execution. Do not duplicate comments if step requires
-    multiple actions.
-  - Always use best practices from the log when generating tests.
-
-   <example-generation>
-   For following plan:
-
-  ```markdown file=specs/plan.md
-  ### 1. Adding New Todos
-
-  **Seed:** `tests/seed.spec.ts`
-
-  #### 1.1 Add Valid Todo
-
-  **Steps:**
-
-  1. Click in the "What needs to be done?" input field
-
-  #### 1.2 Add Multiple Todos
-
-  ...
-  ```
-
-  Following file is generated:
-
-  ```ts file=add-valid-todo.spec.ts
-  // spec: specs/plan.md
-  // seed: tests/seed.spec.ts
-
-  test.describe('Adding New Todos', () => {
-    test('Add Valid Todo', async { page } => {
-      // 1. Click in the "What needs to be done?" input field
-      await page.click(...);
-
-      ...
-    });
-  });
-  ```
-
-   </example-generation>
-
-## ComfyUI Project Context
-
-### Required Import Pattern
-
-Generated tests MUST use ComfyUI fixtures, not generic `@playwright/test`:
-
-```typescript
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-```
-
-### Fixture Object
-
-Tests receive `comfyPage` (not `page`) as their fixture:
-
-```typescript
-test('my test', async ({ comfyPage }) => {
-  // Access raw page via comfyPage.page if needed
-})
-```
-
-### Key APIs
-
-| Need             | Use                                                  | Notes                             |
-| ---------------- | ---------------------------------------------------- | --------------------------------- |
-| Canvas element   | `comfyPage.canvas`                                   | Pre-configured Locator            |
-| Wait for render  | `comfyPage.nextFrame()`                              | After canvas mutations            |
-| Load workflow    | `comfyPage.workflow.loadWorkflow('name')`            | Assets in `browser_tests/assets/` |
-| Get node by type | `comfyPage.nodeOps.getNodeRefsByType('KSampler')`    | Returns NodeReference[]           |
-| Search box       | `comfyPage.searchBox.fillAndSelectFirstNode('name')` | Opens on canvas dblclick          |
-| Settings         | `comfyPage.settings.setSetting(key, value)`          | Clean up in afterEach             |
-| Keyboard         | `comfyPage.keyboard.press('Delete')`                 | Focus canvas first                |
-| Context menu     | `comfyPage.contextMenu`                              | Right-click interactions          |
-
-### Mandatory Test Structure
-
-Every generated test must:
-
-1. Be wrapped in `test.describe('Name', { tag: ['@canvas'] }, () => { ... })`
-2. Include `test.afterEach(async ({ comfyPage }) => { await comfyPage.canvasOps.resetView() })`
-3. Use descriptive test names (not "test" or "test1")
-
-### Anti-Patterns — NEVER Use
-
- ❌ `page.goto()` — fixture handles navigation
- ❌ `page.waitForTimeout()` — use `comfyPage.nextFrame()` or retrying assertions
- ❌ `import from '@playwright/test'` — use `from '../fixtures/ComfyPage'`
- ❌ Bare `page.` references — use `comfyPage.page.` if you need raw page access
-
-### Reference
-
-Read the fixture code for full API surface:
-
- `browser_tests/fixtures/ComfyPage.ts` — main fixture
- `browser_tests/fixtures/helpers/` — helper classes
- `browser_tests/fixtures/components/` — page object components
- See also: `.claude/skills/codegen-transform/SKILL.md` for transform rules
--- a/.claude/agents/playwright-test-healer.md
+++ b/.claude/agents/playwright-test-healer.md
@@ -1,91 +0,0 @@
---
-name: playwright-test-healer
-description: Use this agent when you need to debug and fix failing Playwright tests
-tools: Glob, Grep, Read, LS, Edit, MultiEdit, Write, mcp__playwright-test__browser_console_messages, mcp__playwright-test__browser_evaluate, mcp__playwright-test__browser_generate_locator, mcp__playwright-test__browser_network_requests, mcp__playwright-test__browser_snapshot, mcp__playwright-test__test_debug, mcp__playwright-test__test_list, mcp__playwright-test__test_run
-model: sonnet
-color: red
---
-
-You are the Playwright Test Healer, an expert test automation engineer specializing in debugging and
-resolving Playwright test failures. Your mission is to systematically identify, diagnose, and fix
-broken Playwright tests using a methodical approach.
-
-Your workflow:
-
-1. **Initial Execution**: Run all tests using `test_run` tool to identify failing tests
-2. **Debug failed tests**: For each failing test run `test_debug`.
-3. **Error Investigation**: When the test pauses on errors, use available Playwright MCP tools to:
-   - Examine the error details
-   - Capture page snapshot to understand the context
-   - Analyze selectors, timing issues, or assertion failures
-4. **Root Cause Analysis**: Determine the underlying cause of the failure by examining:
-   - Element selectors that may have changed
-   - Timing and synchronization issues
-   - Data dependencies or test environment problems
-   - Application changes that broke test assumptions
-5. **Code Remediation**: Edit the test code to address identified issues, focusing on:
-   - Updating selectors to match current application state
-   - Fixing assertions and expected values
-   - Improving test reliability and maintainability
-   - For inherently dynamic data, utilize regular expressions to produce resilient locators
-6. **Verification**: Restart the test after each fix to validate the changes
-7. **Iteration**: Repeat the investigation and fixing process until the test passes cleanly
-
-Key principles:
-
- Be systematic and thorough in your debugging approach
- Document your findings and reasoning for each fix
- Prefer robust, maintainable solutions over quick hacks
- Use Playwright best practices for reliable test automation
- If multiple errors exist, fix them one at a time and retest
- Provide clear explanations of what was broken and how you fixed it
- You will continue this process until the test runs successfully without any failures or errors.
- If the error persists and you have high confidence the test is correct, do not auto-skip by default.
- Summarize root-cause evidence and escalate as a likely app regression.
- Use `test.fixme()` only when a known issue is documented and referenced, and include a short rationale comment.
-  Auto-skipping can mask real regressions — require explicit justification.
- Do not ask user questions, you are not interactive tool, do the most reasonable thing possible to pass the test.
- Never wait for networkidle or use other discouraged or deprecated apis
-
-## ComfyUI Project Context
-
-### Custom Fixtures
-
-Tests in this project use `comfyPage` fixture, not bare `page`. When healing:
-
- Replace any `page.` references with `comfyPage.page.` if adding new code
- Use `comfyPage.nextFrame()` instead of adding `waitForTimeout()`
- Use fixture helpers (`comfyPage.nodeOps`, `comfyPage.canvas`, etc.) over raw locators
-
-### Common Failure Causes in ComfyUI Tests
-
-1. **Missing `nextFrame()`**: Canvas operations need `await comfyPage.nextFrame()` after mutations. This is the #1 cause of "works locally, fails in CI" issues.
-
-2. **Canvas focus required**: Keyboard shortcuts won't work unless `await comfyPage.canvas.click()` is called first.
-
-3. **Node position drift**: Pixel coordinates can shift between environments. When possible, replace with node references:
-
-   ```typescript
-   // Instead of: canvas.click({ position: { x: 423, y: 267 } })
-   const node = (await comfyPage.nodeOps.getNodeRefsByType('KSampler'))[0]
-   await node.click('title')
-   ```
-
-4. **Settings pollution**: Settings persist across tests on the backend. Always reset changed settings in `afterEach`.
-
-5. **Drag animation timing**: Use `{ steps: 10 }` option for drag operations, not `{ steps: 1 }`.
-
-### Healing Safety Rules
-
- ❌ NEVER add `waitForTimeout()` — always use retrying assertions or `nextFrame()`
- ❌ NEVER "fix" a test by weakening assertions (e.g., removing an assertion that fails)
- ❌ NEVER modify the application code — only modify test code
- ⚠️ If a test fails because expected UI elements are missing, the app may have a regression — mark as `test.fixme()` with explanation, don't "heal" the assertion away
- ⚠️ If a test fails only in CI but passes locally, likely missing `nextFrame()` — don't mask with timeouts
-
-### Reference
-
- `browser_tests/fixtures/ComfyPage.ts` — full fixture API
- `browser_tests/fixtures/helpers/` — available helper classes
- `.claude/skills/writing-playwright-tests/SKILL.md` — testing conventions
- `.claude/skills/codegen-transform/SKILL.md` — transform rules
--- a/.claude/agents/playwright-test-planner.md
+++ b/.claude/agents/playwright-test-planner.md
@@ -1,89 +0,0 @@
---
-name: playwright-test-planner
-description: Use this agent when you need to create comprehensive test plan for a web application or website
-tools: Glob, Grep, Read, LS, mcp__playwright-test__browser_click, mcp__playwright-test__browser_close, mcp__playwright-test__browser_console_messages, mcp__playwright-test__browser_drag, mcp__playwright-test__browser_evaluate, mcp__playwright-test__browser_file_upload, mcp__playwright-test__browser_handle_dialog, mcp__playwright-test__browser_hover, mcp__playwright-test__browser_navigate, mcp__playwright-test__browser_navigate_back, mcp__playwright-test__browser_network_requests, mcp__playwright-test__browser_press_key, mcp__playwright-test__browser_run_code, mcp__playwright-test__browser_select_option, mcp__playwright-test__browser_snapshot, mcp__playwright-test__browser_take_screenshot, mcp__playwright-test__browser_type, mcp__playwright-test__browser_wait_for, mcp__playwright-test__planner_setup_page, mcp__playwright-test__planner_save_plan
-model: sonnet
-color: green
---
-
-You are an expert web test planner with extensive experience in quality assurance, user experience testing, and test
-scenario design. Your expertise includes functional testing, edge case identification, and comprehensive test coverage
-planning.
-
-You will:
-
-1. **Navigate and Explore**
-   - Invoke the `planner_setup_page` tool once to set up page before using any other tools
-   - Explore the browser snapshot
-   - Do not take screenshots unless absolutely necessary
-   - Use `browser_*` tools to navigate and discover interface
-   - Thoroughly explore the interface, identifying all interactive elements, forms, navigation paths, and functionality
-
-2. **Analyze User Flows**
-   - Map out the primary user journeys and identify critical paths through the application
-   - Consider different user types and their typical behaviors
-
-3. **Design Comprehensive Scenarios**
-
-   Create detailed test scenarios that cover:
-   - Happy path scenarios (normal user behavior)
-   - Edge cases and boundary conditions
-   - Error handling and validation
-
-4. **Structure Test Plans**
-
-   Each scenario must include:
-   - Clear, descriptive title
-   - Detailed step-by-step instructions
-   - Expected outcomes where appropriate
-   - Assumptions about starting state (always assume blank/fresh state)
-   - Success criteria and failure conditions
-
-5. **Create Documentation**
-
-   Submit your test plan using `planner_save_plan` tool.
-
-**Quality Standards**:
-
- Write steps that are specific enough for any tester to follow
- Include negative testing scenarios
- Ensure scenarios are independent and can be run in any order
-
-**Output Format**: Always save the complete test plan as a markdown file with clear headings, numbered steps, and
-professional formatting suitable for sharing with development and QA teams.
-
-## ComfyUI Project Context
-
-### Application Overview
-
-ComfyUI is a **canvas-based node graph editor** for AI image generation. It is a complex SPA with:
-
- A **LiteGraph canvas** where users create workflows by connecting nodes
- A **Vue 3 sidebar** with node library, workflows panel, and settings
- A **topbar** with queue/run buttons and workspace controls
- A **search box** for finding and adding nodes (opens on double-click)
- WebSocket-based real-time communication with a Python backend
-
-### Exploration Tips
-
- Start by loading a workflow: the app is most useful with nodes on the canvas
- Key UI areas to explore: canvas interactions, sidebar panels, topbar buttons, search box, context menus, settings dialog
- Double-click the canvas to open the node search box
- Right-click nodes/canvas for context menus
- The bottom panel shows job queue and execution logs
-
-### Test Environment
-
- The seed test uses `comfyPageFixture` which provides a `comfyPage` object with extensive helpers
- Workflows (JSON files) are loaded via `comfyPage.workflow.loadWorkflow('name')`
- Available workflow assets are in `browser_tests/assets/`
- The backend MUST be running with `--multi-user` flag
- A Vite dev server runs on `:5173`
-
-### When Creating Test Plans
-
- Reference specific workflow assets when a scenario needs a starting state
- Note that canvas interactions use pixel coordinates — these may vary across environments
- Distinguish between "canvas tests" (LiteGraph) and "UI tests" (Vue components)
- Include tags in your plans: `@canvas`, `@widget`, `@sidebar`, `@smoke`, `@screenshot`
- Reference `browser_tests/fixtures/ComfyPage.ts` for available test helpers
--- a/.claude/skills/adding-deprecation-warnings/SKILL.md
+++ b/.claude/skills/adding-deprecation-warnings/SKILL.md
@@ -1,84 +0,0 @@
---
-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
--- a/.claude/skills/codegen-transform/SKILL.md
+++ b/.claude/skills/codegen-transform/SKILL.md
@@ -1,174 +0,0 @@
---
-name: codegen-transform
-description: 'Transforms raw Playwright codegen output into ComfyUI convention-compliant tests. Use when: user pastes raw codegen, asks to convert raw Playwright code, refactor recorded tests, or rewrite to project conventions. Triggers on: transform codegen, convert raw test, rewrite to conventions, codegen output, raw playwright.'
---
-
-# Codegen → Convention Transform
-
-Transform raw Playwright codegen output into tests that follow ComfyUI conventions.
-
-## When to Use
-
- QA tester recorded a test with `pnpm comfy-test record` and wants refinement
- Developer pasted raw `npx playwright codegen` output
- Agent needs to post-process Playwright test agent output
- Reviewing a test that uses raw `page.*` calls instead of fixture helpers
-
-## Transform Rules
-
-Apply these replacements in order:
-
-| Raw codegen                                       | Convention replacement                                                                    | Why                                      |
-| ------------------------------------------------- | ----------------------------------------------------------------------------------------- | ---------------------------------------- |
-| `import { test, expect } from '@playwright/test'` | `import { comfyPageFixture as test, comfyExpect as expect } from '../fixtures/ComfyPage'` | Use custom fixtures with ComfyUI helpers |
-| `test('test', async ({ page }) =>`                | `test('descriptive-name', async ({ comfyPage }) =>`                                       | Use comfyPage fixture, descriptive names |
-| `await page.goto('http://...')`                   | **Remove entirely**                                                                       | Fixture handles navigation automatically |
-| `page.locator('canvas')`                          | `comfyPage.canvas`                                                                        | Pre-configured canvas locator            |
-| `page.waitForTimeout(N)`                          | `comfyPage.nextFrame()`                                                                   | Never use arbitrary waits                |
-| `page.getByPlaceholder('Search Nodes...')`        | `comfyPage.searchBox.input`                                                               | Use search box page object               |
-| `page` (bare reference)                           | `comfyPage.page`                                                                          | Access raw page through fixture          |
-| Bare `test(...)`                                  | `test.describe('Feature', { tag: ['@canvas'] }, () => { test(...) })`                     | All tests need describe + tags           |
-| No cleanup                                        | Add `test.afterEach(async ({ comfyPage }) => { await comfyPage.canvasOps.resetView() })`  | Canvas tests need cleanup                |
-
-## Fixture API Quick Reference
-
-| Need              | Use                                               | Notes                                                         |
-| ----------------- | ------------------------------------------------- | ------------------------------------------------------------- |
-| Canvas element    | `comfyPage.canvas`                                | Pre-configured Locator                                        |
-| Wait for render   | `comfyPage.nextFrame()`                           | After canvas mutations. NOT needed after `loadWorkflow()`     |
-| Load workflow     | `comfyPage.workflow.loadWorkflow('name')`         | Assets in `browser_tests/assets/`                             |
-| Get node by type  | `comfyPage.nodeOps.getNodeRefsByType('KSampler')` | Returns array of NodeReference                                |
-| Get node by title | `comfyPage.nodeOps.getNodeRefsByTitle('My Node')` | Returns array of NodeReference                                |
-| Search box        | `comfyPage.searchBox`                             | Has `.input`, `.fillAndSelectFirstNode()`                     |
-| Settings          | `comfyPage.settings.setSetting(key, value)`       | Persistent — clean up in afterEach                            |
-| Keyboard          | `comfyPage.keyboard.press('Delete')`              | Focus canvas first                                            |
-| Drag & drop       | `comfyPage.dragDrop.*`                            | Use `{ steps: 10 }` for reliability                           |
-| Context menu      | `comfyPage.contextMenu.*`                         | Right-click interactions                                      |
-| Toast messages    | `comfyPage.toast.*`                               | Notification assertions                                       |
-| Subgraph          | `comfyPage.subgraph.*`                            | Subgraph/group node operations                                |
-| Vue Nodes         | `comfyPage.vueNodes.*`                            | Requires opt-in: `setSetting('Comfy.VueNodes.Enabled', true)` |
-| Mouse ops         | `comfyPage.page` + `ComfyMouse`                   | For precise canvas mouse interactions                         |
-| Bottom panel      | `comfyPage.bottomPanel.*`                         | Job queue, logs panel                                         |
-| Commands          | `comfyPage.command.*`                             | Command palette interactions                                  |
-| Clipboard         | `comfyPage.clipboard.*`                           | Copy/paste operations                                         |
-
-## Canvas Coordinates → Node References
-
-Raw codegen records fragile pixel coordinates. Replace with node references when possible:
-
-```typescript
-// ❌ Raw codegen — fragile pixel coordinates
-await page.locator('canvas').click({ position: { x: 423, y: 267 } })
-
-// ✅ If clicking a specific node
-const node = (await comfyPage.nodeOps.getNodeRefsByType('KSampler'))[0]
-await node.click('title')
-
-// ✅ If double-clicking canvas to open search
-await comfyPage.canvas.dblclick({ position: { x: 500, y: 400 } })
-await comfyPage.searchBox.fillAndSelectFirstNode('KSampler')
-```
-
-**When to keep coordinates**: Canvas background clicks (pan, zoom), empty area clicks to deselect. These are inherently position-based.
-
-## Complete Before/After Example
-
-### Raw codegen output
-
-```typescript
-import { test, expect } from '@playwright/test'
-
-test('test', async ({ page }) => {
-  await page.goto('http://localhost:5173/')
-  await page.locator('canvas').dblclick({ position: { x: 500, y: 400 } })
-  await page.getByPlaceholder('Search Nodes...').fill('KSampler')
-  await page.getByPlaceholder('Search Nodes...').press('Enter')
-  await page.locator('canvas').click({ position: { x: 600, y: 300 } })
-  await page.waitForTimeout(1000)
-  await page.getByRole('button', { name: 'Queue' }).click()
-})
-```
-
-### Convention-compliant output
-
-```typescript
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-
-test.describe('Queue workflow with KSampler', { tag: ['@canvas'] }, () => {
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.canvasOps.resetView()
-  })
-
-  test('should add KSampler node and queue', async ({ comfyPage }) => {
-    // Open search and add KSampler
-    await comfyPage.canvas.dblclick({ position: { x: 500, y: 400 } })
-    await comfyPage.searchBox.fillAndSelectFirstNode('KSampler')
-    await comfyPage.nextFrame()
-
-    // Queue the workflow
-    await comfyPage.menu.topbar.runButton.click()
-  })
-})
-```
-
-### What changed and why
-
-1. **Imports**: `@playwright/test` → `../fixtures/ComfyPage` (custom fixtures)
-2. **Fixture**: `{ page }` → `{ comfyPage }` (access all helpers)
-3. **goto removed**: Fixture navigates automatically
-4. **Search box**: Raw locator → `comfyPage.searchBox.fillAndSelectFirstNode()`
-5. **waitForTimeout**: Replaced with `comfyPage.nextFrame()`
-6. **Queue button**: Used `comfyPage.menu.topbar.runButton` page object
-7. **Structure**: Wrapped in `describe` with `@canvas` tag and `afterEach` cleanup
-8. **Test name**: Generic "test" → descriptive name
-
-## Decision Guide
-
-| Question                   | Answer                                                                                      |
-| -------------------------- | ------------------------------------------------------------------------------------------- |
-| Canvas or DOM interaction? | Canvas: `comfyPage.nodeOps.*`. DOM: `comfyPage.vueNodes.*` (needs opt-in)                   |
-| Need `nextFrame()`?        | Yes after canvas mutations. No after `loadWorkflow()`, no after DOM clicks                  |
-| Which tag?                 | `@canvas` for canvas tests, `@widget` for widget tests, `@screenshot` for visual regression |
-| Need cleanup?              | Yes for canvas tests (`resetView`), yes if changing settings (`setSetting` back)            |
-| Keep pixel coords?         | Only for empty canvas clicks. Replace with node refs for node interactions                  |
-| Use `page` directly?       | Only via `comfyPage.page` for Playwright APIs not wrapped by fixtures                       |
-
-## Tags Reference
-
-| Tag           | When to use                          |
-| ------------- | ------------------------------------ |
-| `@canvas`     | Any test interacting with the canvas |
-| `@widget`     | Testing widget inputs                |
-| `@smoke`      | Quick essential tests                |
-| `@screenshot` | Visual regression (Linux CI only)    |
-| `@mobile`     | Mobile viewport (runs on Pixel 5)    |
-| `@2x`         | HiDPI tests (2x scale)               |
-| `@0.5x`       | Low-DPI tests (0.5x scale)           |
-| `@slow`       | Tests taking >10 seconds             |
-| `@perf`       | Performance measurement tests        |
-
-## Anti-Patterns
-
-1. **Never use `waitForTimeout`** → use `nextFrame()` or retrying assertions
-2. **Never use `page.goto`** → fixture handles navigation
-3. **Never import from `@playwright/test`** → use `../fixtures/ComfyPage`
-4. **Never use bare CSS selectors** → use test IDs or semantic locators
-5. **Never share state between tests** → each test is independent
-6. **Never commit local screenshots** → Linux CI generates baselines
-
-## For Deeper Reference
-
-Read fixture code directly — it's the source of truth:
-
-| Purpose           | Path                                       |
-| ----------------- | ------------------------------------------ |
-| Main fixture      | `browser_tests/fixtures/ComfyPage.ts`      |
-| Helper classes    | `browser_tests/fixtures/helpers/`          |
-| Component objects | `browser_tests/fixtures/components/`       |
-| Test selectors    | `browser_tests/fixtures/selectors.ts`      |
-| Vue Node helpers  | `browser_tests/fixtures/VueNodeHelpers.ts` |
-| Existing tests    | `browser_tests/tests/`                     |
-| Test assets       | `browser_tests/assets/`                    |
--- a/.github/actions/setup-frontend/action.yaml
+++ b/.github/actions/setup-frontend/action.yaml
@@ -13,6 +13,8 @@ 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
--- a/.github/workflows/api-update-electron-api-types.yaml
+++ b/.github/workflows/api-update-electron-api-types.yaml
@@ -17,6 +17,8 @@ jobs:

      - name: Install pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        with:
+          version: 10

      - name: Setup Node.js
        uses: actions/setup-node@v6
--- a/.github/workflows/api-update-manager-api-types.yaml
+++ b/.github/workflows/api-update-manager-api-types.yaml
@@ -22,6 +22,8 @@ jobs:

      - name: Install pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        with:
+          version: 10

      - name: Setup Node.js
        uses: actions/setup-node@v6
--- a/.github/workflows/api-update-registry-api-types.yaml
+++ b/.github/workflows/api-update-registry-api-types.yaml
@@ -21,6 +21,8 @@ jobs:

      - name: Install pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        with:
+          version: 10

      - name: Setup Node.js
        uses: actions/setup-node@v6
--- a/.github/workflows/ci-dist-telemetry-scan.yaml
+++ b/.github/workflows/ci-dist-telemetry-scan.yaml
@@ -20,6 +20,8 @@ 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
--- a/.github/workflows/ci-oss-assets-validation.yaml
+++ b/.github/workflows/ci-oss-assets-validation.yaml
@@ -21,6 +21,8 @@ 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
@@ -74,6 +76,8 @@ 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
--- a/.github/workflows/pr-claude-review.yaml
+++ b/.github/workflows/pr-claude-review.yaml
@@ -30,6 +30,8 @@ jobs:

      - name: Install pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        with:
+          version: 10

      - name: Setup Node.js
        uses: actions/setup-node@v6
--- a/.github/workflows/publish-desktop-ui.yaml
+++ b/.github/workflows/publish-desktop-ui.yaml
@@ -85,6 +85,8 @@ jobs:

      - name: Install pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        with:
+          version: 10

      - name: Setup Node.js
        uses: actions/setup-node@v6
--- a/.github/workflows/release-biweekly-comfyui.yaml
+++ b/.github/workflows/release-biweekly-comfyui.yaml
@@ -76,6 +76,8 @@ jobs:

      - name: Install pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        with:
+          version: 10

      - name: Setup Node.js
        uses: actions/setup-node@v6
@@ -201,6 +203,8 @@ jobs:

      - name: Install pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        with:
+          version: 10

      - uses: actions/setup-node@v6
        with:
--- 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'
--- a/.github/workflows/release-npm-types.yaml
+++ b/.github/workflows/release-npm-types.yaml
@@ -76,6 +76,8 @@ jobs:

      - name: Install pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        with:
+          version: 10

      - name: Setup Node.js
        uses: actions/setup-node@v6
--- 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'
--- a/.github/workflows/release-version-bump.yaml
+++ b/.github/workflows/release-version-bump.yaml
@@ -144,6 +144,8 @@ jobs:

      - name: Install pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        with:
+          version: 10

      - name: Setup Node.js
        uses: actions/setup-node@v6
--- a/.github/workflows/version-bump-desktop-ui.yaml
+++ b/.github/workflows/version-bump-desktop-ui.yaml
@@ -52,6 +52,8 @@ jobs:

      - name: Install pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        with:
+          version: 10

      - name: Setup Node.js
        uses: actions/setup-node@v6
--- a/.github/workflows/weekly-docs-check.yaml
+++ b/.github/workflows/weekly-docs-check.yaml
@@ -30,6 +30,8 @@ jobs:

      - name: Install pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        with:
+          version: 10

      - name: Setup Node.js
        uses: actions/setup-node@v6
--- a/.mcp.json
+++ b/.mcp.json
@@ -1,8 +0,0 @@
-{
-  "mcpServers": {
-    "playwright-test": {
-      "command": "pnpm",
-      "args": ["dlx", "@playwright/mcp@latest"]
-    }
-  }
-}
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@@ -10,8 +10,6 @@
    "dist/*",
    "packages/registry-types/src/comfyRegistryTypes.ts",
    "playwright-report/*",
-    "scripts/patch-playwright-agents.js",
-    "tools/test-recorder/*",
    "src/extensions/core/*",
    "src/scripts/*",
    "src/types/generatedManagerTypes.ts",
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -49,21 +49,6 @@ This project uses **pnpm**. Always prefer scripts defined in `package.json` (e.g
 - `pnpm preview`: Preview the production build locally
 - `pnpm test:unit`: Run Vitest unit tests
 - `pnpm test:browser:local`: Run Playwright E2E tests (`browser_tests/`)
- `pnpm comfy-test record`: Interactive test recorder (guided setup for non-devs)
- `pnpm comfy-test transform <file>`: Transform raw codegen to conventions
- `pnpm comfy-test check`: Check environment prerequisites
- `pnpm comfy-test list`: List available test workflows
-
-### Playwright Test Agents (`.claude/agents/`)
-
-| Agent                          | Responsibility                                                                     |
-| ------------------------------ | ---------------------------------------------------------------------------------- |
-| `playwright-test-planner.md`   | Explores the app, identifies testable scenarios, creates structured test plans     |
-| `playwright-test-generator.md` | Generates Playwright test code from plans using ComfyUI fixtures and conventions   |
-| `playwright-test-healer.md`    | Diagnoses and fixes failing tests; escalates regressions rather than auto-skipping |
-
-Guardrails: agents must use `comfyPage` fixture (not bare `page`), never add `waitForTimeout()`, never weaken assertions, and reference `.claude/skills/codegen-transform/SKILL.md` for transform rules.
-
 - `pnpm lint` / `pnpm lint:fix`: Lint (ESLint)
 - `pnpm format` / `pnpm format:check`: oxfmt
 - `pnpm typecheck`: Vue TSC type checking
--- a/apps/website/public/icons/social/discord.svg
+++ b/apps/website/public/icons/social/discord.svg
@@ -1 +0,0 @@
-<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>
--- a/apps/website/public/icons/social/github.svg
+++ b/apps/website/public/icons/social/github.svg
@@ -1 +0,0 @@
-<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>
--- a/apps/website/public/icons/social/instagram.svg
+++ b/apps/website/public/icons/social/instagram.svg
@@ -1 +0,0 @@
-<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>
--- a/apps/website/public/icons/social/linkedin.svg
+++ b/apps/website/public/icons/social/linkedin.svg
@@ -1 +0,0 @@
-<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>
--- a/apps/website/public/icons/social/reddit.svg
+++ b/apps/website/public/icons/social/reddit.svg
@@ -1 +0,0 @@
-<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>
--- a/apps/website/public/icons/social/x.svg
+++ b/apps/website/public/icons/social/x.svg
@@ -1 +0,0 @@
-<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>
--- a/apps/website/src/components/SiteFooter.vue
+++ b/apps/website/src/components/SiteFooter.vue
@@ -1,143 +0,0 @@
-<script setup lang="ts">
-const columns = [
-  {
-    title: 'Product',
-    links: [
-      { label: 'Comfy Desktop', href: '/download' },
-      { label: 'Comfy Cloud', href: 'https://app.comfy.org' },
-      { label: 'ComfyHub', href: 'https://hub.comfy.org' },
-      { label: 'Pricing', href: '/pricing' }
-    ]
-  },
-  {
-    title: 'Resources',
-    links: [
-      { label: 'Documentation', href: 'https://docs.comfy.org' },
-      { label: 'Blog', href: 'https://blog.comfy.org' },
-      { label: 'Gallery', href: '/gallery' },
-      { label: 'GitHub', href: 'https://github.com/comfyanonymous/ComfyUI' }
-    ]
-  },
-  {
-    title: 'Company',
-    links: [
-      { label: 'About', href: '/about' },
-      { label: 'Careers', href: '/careers' },
-      { label: 'Enterprise', href: '/enterprise' }
-    ]
-  },
-  {
-    title: 'Legal',
-    links: [
-      { label: 'Terms of Service', href: '/terms-of-service' },
-      { label: 'Privacy Policy', href: '/privacy-policy' }
-    ]
-  }
-]
-
-const socials = [
-  {
-    label: 'GitHub',
-    href: 'https://github.com/comfyanonymous/ComfyUI',
-    icon: '/icons/social/github.svg'
-  },
-  {
-    label: 'Discord',
-    href: 'https://discord.gg/comfyorg',
-    icon: '/icons/social/discord.svg'
-  },
-  {
-    label: 'X',
-    href: 'https://x.com/comaboratory',
-    icon: '/icons/social/x.svg'
-  },
-  {
-    label: 'Reddit',
-    href: 'https://reddit.com/r/comfyui',
-    icon: '/icons/social/reddit.svg'
-  },
-  {
-    label: 'LinkedIn',
-    href: 'https://linkedin.com/company/comfyorg',
-    icon: '/icons/social/linkedin.svg'
-  },
-  {
-    label: 'Instagram',
-    href: 'https://instagram.com/comfyorg',
-    icon: '/icons/social/instagram.svg'
-  }
-]
-</script>
-
-<template>
-  <footer class="border-t border-white/10 bg-black">
-    <div
-      class="mx-auto grid max-w-7xl gap-8 px-6 py-16 sm:grid-cols-2 lg:grid-cols-5"
-    >
-      <!-- Brand -->
-      <div class="lg:col-span-1">
-        <a href="/" class="text-2xl font-bold text-brand-yellow italic">
-          Comfy
-        </a>
-        <p class="mt-4 text-sm text-smoke-700">
-          Professional control of visual AI.
-        </p>
-      </div>
-
-      <!-- Link columns -->
-      <nav
-        v-for="column in columns"
-        :key="column.title"
-        :aria-label="column.title"
-        class="flex flex-col gap-3"
-      >
-        <h3 class="text-sm font-semibold text-white">{{ column.title }}</h3>
-        <a
-          v-for="link in column.links"
-          :key="link.href"
-          :href="link.href"
-          class="text-sm text-smoke-700 transition-colors hover:text-white"
-        >
-          {{ link.label }}
-        </a>
-      </nav>
-    </div>
-
-    <!-- Bottom bar -->
-    <div class="border-t border-white/10">
-      <div
-        class="mx-auto flex max-w-7xl flex-col items-center justify-between gap-4 p-6 sm:flex-row"
-      >
-        <p class="text-sm text-smoke-700">
-          &copy; {{ new Date().getFullYear() }} Comfy Org. All rights reserved.
-        </p>
-
-        <!-- Social icons -->
-        <div class="flex items-center gap-4">
-          <a
-            v-for="social in socials"
-            :key="social.label"
-            :href="social.href"
-            :aria-label="social.label"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-smoke-700 transition-colors hover:text-white"
-          >
-            <span
-              class="inline-block size-5 bg-current"
-              :style="{
-                maskImage: `url(${social.icon})`,
-                maskSize: 'contain',
-                maskRepeat: 'no-repeat',
-                WebkitMaskImage: `url(${social.icon})`,
-                WebkitMaskSize: 'contain',
-                WebkitMaskRepeat: 'no-repeat'
-              }"
-              aria-hidden="true"
-            />
-          </a>
-        </div>
-      </div>
-    </div>
-  </footer>
-</template>
--- a/apps/website/src/components/SiteNav.vue
+++ b/apps/website/src/components/SiteNav.vue
@@ -1,149 +0,0 @@
-<script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue'
-
-const mobileMenuOpen = ref(false)
-const currentPath = ref('')
-
-const navLinks = [
-  { label: 'ENTERPRISE', href: '/enterprise' },
-  { label: 'GALLERY', href: '/gallery' },
-  { label: 'ABOUT', href: '/about' },
-  { label: 'CAREERS', href: '/careers' }
-]
-
-const ctaLinks = [
-  {
-    label: 'COMFY CLOUD',
-    href: 'https://app.comfy.org',
-    primary: true
-  },
-  {
-    label: 'COMFY HUB',
-    href: 'https://hub.comfy.org',
-    primary: false
-  }
-]
-
-function onKeydown(e: KeyboardEvent) {
-  if (e.key === 'Escape' && mobileMenuOpen.value) {
-    mobileMenuOpen.value = false
-  }
-}
-
-function onAfterSwap() {
-  mobileMenuOpen.value = false
-  currentPath.value = window.location.pathname
-}
-
-onMounted(() => {
-  document.addEventListener('keydown', onKeydown)
-  document.addEventListener('astro:after-swap', onAfterSwap)
-  currentPath.value = window.location.pathname
-})
-
-onUnmounted(() => {
-  document.removeEventListener('keydown', onKeydown)
-  document.removeEventListener('astro:after-swap', onAfterSwap)
-})
-</script>
-
-<template>
-  <nav
-    class="fixed top-0 left-0 right-0 z-50 bg-black/80 backdrop-blur-md"
-    aria-label="Main navigation"
-  >
-    <div class="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
-      <!-- Logo -->
-      <a href="/" class="text-2xl font-bold italic text-brand-yellow">
-        Comfy
-      </a>
-
-      <!-- Desktop nav links -->
-      <div class="hidden items-center gap-8 md:flex">
-        <a
-          v-for="link in navLinks"
-          :key="link.href"
-          :href="link.href"
-          :aria-current="currentPath === link.href ? 'page' : undefined"
-          class="text-sm font-medium tracking-wide text-white transition-colors hover:text-brand-yellow"
-        >
-          {{ link.label }}
-        </a>
-
-        <div class="flex items-center gap-3">
-          <a
-            v-for="cta in ctaLinks"
-            :key="cta.href"
-            :href="cta.href"
-            :class="
-              cta.primary
-                ? 'bg-brand-yellow text-black hover:opacity-90 transition-opacity'
-                : 'border border-brand-yellow text-brand-yellow hover:bg-brand-yellow hover:text-black transition-colors'
-            "
-            class="rounded-full px-5 py-2 text-sm font-semibold"
-          >
-            {{ cta.label }}
-          </a>
-        </div>
-      </div>
-
-      <!-- Mobile hamburger -->
-      <button
-        class="flex flex-col gap-1.5 md:hidden"
-        aria-label="Toggle menu"
-        aria-controls="site-mobile-menu"
-        :aria-expanded="mobileMenuOpen"
-        @click="mobileMenuOpen = !mobileMenuOpen"
-      >
-        <span
-          class="block h-0.5 w-6 bg-white transition-transform"
-          :class="mobileMenuOpen && 'translate-y-2 rotate-45'"
-        />
-        <span
-          class="block h-0.5 w-6 bg-white transition-opacity"
-          :class="mobileMenuOpen && 'opacity-0'"
-        />
-        <span
-          class="block h-0.5 w-6 bg-white transition-transform"
-          :class="mobileMenuOpen && '-translate-y-2 -rotate-45'"
-        />
-      </button>
-    </div>
-
-    <!-- Mobile menu -->
-    <div
-      v-show="mobileMenuOpen"
-      id="site-mobile-menu"
-      class="border-t border-white/10 bg-black px-6 pb-6 md:hidden"
-    >
-      <div class="flex flex-col gap-4 pt-4">
-        <a
-          v-for="link in navLinks"
-          :key="link.href"
-          :href="link.href"
-          :aria-current="currentPath === link.href ? 'page' : undefined"
-          class="text-sm font-medium tracking-wide text-white transition-colors hover:text-brand-yellow"
-          @click="mobileMenuOpen = false"
-        >
-          {{ link.label }}
-        </a>
-
-        <div class="flex flex-col gap-3 pt-2">
-          <a
-            v-for="cta in ctaLinks"
-            :key="cta.href"
-            :href="cta.href"
-            :class="
-              cta.primary
-                ? 'bg-brand-yellow text-black hover:opacity-90 transition-opacity'
-                : 'border border-brand-yellow text-brand-yellow hover:bg-brand-yellow hover:text-black transition-colors'
-            "
-            class="rounded-full px-5 py-2 text-center text-sm font-semibold"
-          >
-            {{ cta.label }}
-          </a>
-        </div>
-      </div>
-    </div>
-  </nav>
-</template>
--- a/apps/website/src/layouts/BaseLayout.astro
+++ b/apps/website/src/layouts/BaseLayout.astro
@@ -1,86 +0,0 @@
---
-import { ClientRouter } from 'astro:transitions'
-import Analytics from '@vercel/analytics/astro'
-import '../styles/global.css'
-
-interface Props {
-  title: string
-  description?: string
-  ogImage?: string
-}
-
-const {
-  title,
-  description = 'Comfy is the AI creation engine for visual professionals who demand control.',
-  ogImage = '/og-default.png',
-} = Astro.props
-
-const siteBase = Astro.site ?? 'https://comfy.org'
-const canonicalURL = new URL(Astro.url.pathname, siteBase)
-const ogImageURL = new URL(ogImage, siteBase)
-const locale = Astro.currentLocale ?? 'en'
-const gtmId = 'GTM-NP9JM6K7'
-const gtmEnabled = import.meta.env.PROD
---
-
-<!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} />
-    <title>{title}</title>
-
-    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
-    <link rel="canonical" href={canonicalURL.href} />
-
-    <!-- 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: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:title" content={title} />
-    <meta name="twitter:description" content={description} />
-    <meta name="twitter:image" content={ogImageURL.href} />
-
-    <!-- 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-black text-white font-inter antialiased">
-    {gtmEnabled && (
-      <noscript>
-        <iframe
-          src={`https://www.googletagmanager.com/ns.html?id=${gtmId}`}
-          height="0"
-          width="0"
-          style="display:none;visibility:hidden"
-        ></iframe>
-      </noscript>
-    )}
-
-    <slot />
-
-    <Analytics />
-  </body>
-</html>
--- a/apps/website/tsconfig.json
+++ b/apps/website/tsconfig.json
@@ -5,5 +5,5 @@
      "@/*": ["./src/*"]
    }
  },
-  "include": ["src/**/*", "astro.config.ts"]
+  "include": ["src/**/*", "astro.config.mjs"]
 }
--- a/browser_tests/AGENTS.md
+++ b/browser_tests/AGENTS.md
@@ -30,24 +30,6 @@ browser_tests/
 └── tests/            - Test files (*.spec.ts)
 ```

-## 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                                                                                                     |
@@ -67,51 +49,3 @@ Reserve `toPass()` for blocks with multiple assertions or complex async logic th
 A Playwright test-writing skill exists at `.claude/skills/writing-playwright-tests/SKILL.md`.

 The skill documents **meta-level guidance only** (gotchas, anti-patterns, decision guides). It does **not** duplicate fixture APIs - agents should read the fixture code directly in `browser_tests/fixtures/`.
-
-## AI-Assisted Test Creation
-
-Three systems work together for test authoring:
-
-### 1. Interactive Recorder CLI (`comfy-test`)
-
-For QA testers and non-developers. Guides through the full flow:
-
-```bash
-pnpm comfy-test record     # Interactive 7-step recording flow
-pnpm comfy-test transform   # Transform raw codegen to conventions
-pnpm comfy-test check       # Verify environment prerequisites
-pnpm comfy-test list        # List available workflow assets
-```
-
-Source: `tools/test-recorder/`
-
-### 2. Codegen Transform Skill
-
-For AI agents transforming raw Playwright codegen output. See `.claude/skills/codegen-transform/SKILL.md`.
-
-Key transforms:
-
- `@playwright/test` → `../fixtures/ComfyPage` imports
- `page` destructure → `comfyPage` fixture
- `page.goto()` → removed (fixture handles navigation)
- `page.locator('canvas')` → `comfyPage.canvas`
- `waitForTimeout()` → `comfyPage.nextFrame()`
- Wraps in `test.describe` with tags and `afterEach` cleanup
-
-### 3. Playwright AI Agents
-
-Three agents in `.claude/agents/` are patched with ComfyUI context:
-
- **planner** — explores the app and creates test plans in `browser_tests/specs/`
- **generator** — converts test plans into executable `.spec.ts` files
- **healer** — debugs and fixes failing tests
-
-To regenerate after Playwright updates: `bash scripts/update-playwright-agents.sh`
-
-### MCP Server
-
-The `.mcp.json` configures `playwright-test` MCP server for agent browser interaction:
-
-```bash
-pnpm exec playwright run-test-mcp-server
-```
--- a/browser_tests/README.md
+++ b/browser_tests/README.md
@@ -70,32 +70,6 @@ await comfyPage.setup({ mockReleases: false })

 For tests that specifically need to test release functionality, see the example in `tests/releaseNotifications.spec.ts`.

-## Recording Tests (For Non-Developers)
-
-If you're a QA tester or non-developer, use the interactive recorder:
-
-```bash
-pnpm comfy-test record
-```
-
-This guides you through a 7-step flow:
-
-1. **Environment check** — verifies all tools are installed (with install instructions if not)
-2. **Project setup** — installs dependencies
-3. **Backend check** — ensures ComfyUI is running
-4. **Configure** — set test name, tags, and starting workflow
-5. **Record** — opens browser with Playwright Inspector for recording
-6. **Transform** — paste recorded code, auto-transforms to project conventions
-7. **PR creation** — creates a PR via `gh` CLI or gives manual instructions
-
-Other commands:
-
-```bash
-pnpm comfy-test check       # Just run environment checks
-pnpm comfy-test transform <file>  # Transform a raw codegen file
-pnpm comfy-test list        # List available workflow assets
-```
-
 ## Running Tests

 **Always use UI mode for development:**
--- a/browser_tests/assets/widgets/image_compare_widget.json
+++ b/browser_tests/assets/widgets/image_compare_widget.json
@@ -1,42 +0,0 @@
-{
-  "last_node_id": 1,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 1,
-      "type": "ImageCompare",
-      "pos": [50, 50],
-      "size": [400, 350],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "a_images",
-          "type": "IMAGE",
-          "link": null
-        },
-        {
-          "name": "b_images",
-          "type": "IMAGE",
-          "link": null
-        }
-      ],
-      "outputs": [],
-      "properties": {
-        "Node name for S&R": "ImageCompare"
-      },
-      "widgets_values": []
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "offset": [0, 0],
-      "scale": 1
-    }
-  },
-  "version": 0.4
-}
--- a/browser_tests/fixtures/VueNodeHelpers.ts
+++ b/browser_tests/fixtures/VueNodeHelpers.ts
@@ -31,14 +31,10 @@ export class VueNodeHelpers {
  }

  /**
-   * 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.
+   * Get locator for a Vue node by the node's title (displayed name in the header)
   */
  getNodeByTitle(title: string): Locator {
-    return this.page.locator('[data-node-id]').filter({
-      has: this.page.locator('[data-testid="node-title"]', { hasText: title })
-    })
+    return this.page.locator(`[data-node-id]`).filter({ hasText: title })
  }

  /**
--- a/browser_tests/fixtures/components/SidebarTab.ts
+++ b/browser_tests/fixtures/components/SidebarTab.ts
@@ -1,4 +1,5 @@
 import type { Locator, Page } from '@playwright/test'
+import { expect } from '@playwright/test'

 import type { WorkspaceStore } from '../../types/globals'
 import { TestIds } from '../selectors'
@@ -174,6 +175,8 @@ export class AssetsSidebarTab extends SidebarTab {
    super(page, 'assets')
  }

+  // --- Tab navigation ---
+
  get generatedTab() {
    return this.page.getByRole('tab', { name: 'Generated' })
  }
@@ -182,6 +185,8 @@ export class AssetsSidebarTab extends SidebarTab {
    return this.page.getByRole('tab', { name: 'Imported' })
  }

+  // --- Empty state ---
+
  get emptyStateMessage() {
    return this.page.getByText(
      'Upload files or generate content to see them here'
@@ -192,8 +197,173 @@ export class AssetsSidebarTab extends SidebarTab {
    return this.page.getByText(title)
  }

+  // --- Search & filter ---
+
+  get searchInput() {
+    return this.page.getByPlaceholder('Search Assets...')
+  }
+
+  get settingsButton() {
+    return this.page.getByRole('button', { name: 'View settings' })
+  }
+
+  // --- View mode ---
+
+  get listViewOption() {
+    return this.page.getByText('List view')
+  }
+
+  get gridViewOption() {
+    return this.page.getByText('Grid view')
+  }
+
+  // --- Sort options (cloud-only, shown inside settings popover) ---
+
+  get sortNewestFirst() {
+    return this.page.getByText('Newest first')
+  }
+
+  get sortOldestFirst() {
+    return this.page.getByText('Oldest first')
+  }
+
+  // --- Asset cards ---
+
+  get assetCards() {
+    return this.page.locator('[role="button"][data-selected]')
+  }
+
+  getAssetCardByName(name: string) {
+    return this.page.locator('[role="button"][data-selected]', {
+      hasText: name
+    })
+  }
+
+  get selectedCards() {
+    return this.page.locator('[data-selected="true"]')
+  }
+
+  // --- List view items ---
+
+  get listViewItems() {
+    return this.page.locator(
+      '.sidebar-content-container [role="button"][tabindex="0"]'
+    )
+  }
+
+  // --- Selection footer ---
+
+  get selectionFooter() {
+    return this.page
+      .locator('.sidebar-content-container')
+      .locator('..')
+      .locator('[class*="h-18"]')
+  }
+
+  get selectionCountButton() {
+    return this.page.getByText(/Assets Selected: \d+/)
+  }
+
+  get deselectAllButton() {
+    return this.page.getByText('Deselect all')
+  }
+
+  get deleteSelectedButton() {
+    return this.page
+      .getByTestId('assets-delete-selected')
+      .or(this.page.locator('button:has(.icon-\\[lucide--trash-2\\])').last())
+      .first()
+  }
+
+  get downloadSelectedButton() {
+    return this.page
+      .getByTestId('assets-download-selected')
+      .or(this.page.locator('button:has(.icon-\\[lucide--download\\])').last())
+      .first()
+  }
+
+  // --- Context menu ---
+
+  contextMenuItem(label: string) {
+    return this.page.locator('.p-contextmenu').getByText(label)
+  }
+
+  // --- Folder view ---
+
+  get backToAssetsButton() {
+    return this.page.getByText('Back to all assets')
+  }
+
+  // --- Loading ---
+
+  get skeletonLoaders() {
+    return this.page.locator('.sidebar-content-container .animate-pulse')
+  }
+
+  // --- Helpers ---
+
  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({ force: true }).catch(() => {})
+    }
+    // Wait for toast containers to animate out after close
+    await this.page
+      .locator('.p-toast')
+      .first()
+      .waitFor({ state: 'hidden', timeout: 5000 })
+      .catch(() => {})
+  }
+
+  async switchToImported() {
+    await this.dismissToasts()
+    // Use evaluate click because toast overlay can intercept force clicks
+    // during fade-out animation (browser hit-test still routes to overlay)
+    await this.importedTab.evaluate((el: HTMLElement) => el.click())
+    await expect(this.importedTab).toHaveAttribute('aria-selected', 'true', {
+      timeout: 3000
+    })
+  }
+
+  async switchToGenerated() {
+    await this.dismissToasts()
+    await this.generatedTab.evaluate((el: HTMLElement) => el.click())
+    await expect(this.generatedTab).toHaveAttribute('aria-selected', 'true', {
+      timeout: 3000
+    })
+  }
+
+  async openSettingsMenu() {
+    await this.dismissToasts()
+    await this.settingsButton.click({ force: true })
+    // 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, { timeout: 5000 })
+    } else {
+      await this.assetCards.first().waitFor({ state: 'visible', timeout: 5000 })
+    }
+  }
 }
--- a/browser_tests/fixtures/helpers/AppModeHelper.ts
+++ b/browser_tests/fixtures/helpers/AppModeHelper.ts
@@ -3,28 +3,17 @@ import type { Locator, Page } from '@playwright/test'
 import type { ComfyPage } from '../ComfyPage'
 import { TestIds } from '../selectors'

-import { BuilderFooterHelper } from './BuilderFooterHelper'
-import { BuilderSaveAsHelper } from './BuilderSaveAsHelper'
-import { BuilderSelectHelper } from './BuilderSelectHelper'
-import { BuilderStepsHelper } from './BuilderStepsHelper'
-
 export class AppModeHelper {
-  readonly steps: BuilderStepsHelper
-  readonly footer: BuilderFooterHelper
-  readonly saveAs: BuilderSaveAsHelper
-  readonly select: BuilderSelectHelper
-
-  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)
-  }
+  constructor(private readonly comfyPage: ComfyPage) {}

  private get page(): Page {
    return this.comfyPage.page
  }

+  private get builderToolbar(): Locator {
+    return this.page.getByRole('navigation', { name: 'App Builder' })
+  }
+
  /** Enter builder mode via the "Workflow actions" dropdown → "Build app". */
  async enterBuilder() {
    await this.page
@@ -35,6 +24,42 @@ export class AppModeHelper {
    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.comfyPage.nextFrame()
+  }
+
  /** Toggle app mode (linear view) on/off. */
  async toggleAppMode() {
    await this.page.evaluate(() => {
@@ -93,4 +118,84 @@ 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)
+  }
+
+  /**
+   * 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()
+  }
 }
--- a/browser_tests/fixtures/helpers/AssetsHelper.ts
+++ b/browser_tests/fixtures/helpers/AssetsHelper.ts
@@ -5,6 +5,63 @@ import type { RawJobListItem } from '../../../src/platform/remote/comfyui/jobs/j
 const jobsListRoutePattern = /\/api\/jobs(?:\?.*)?$/
 const inputFilesRoutePattern = /\/internal\/files\/input(?:\?.*)?$/

+/** Factory to create a mock completed job with preview output. */
+export function createMockJob(
+  overrides: Partial<RawJobListItem> & { id: string }
+): RawJobListItem {
+  const now = Date.now() / 1000
+  return {
+    status: 'completed',
+    create_time: now,
+    execution_start_time: now,
+    execution_end_time: now + 5,
+    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() / 1000
+  return Array.from({ length: count }, (_, i) =>
+    createMockJob({
+      id: `job-${String(i + 1).padStart(3, '0')}`,
+      create_time: now - i * 60,
+      execution_start_time: now - i * 60,
+      execution_end_time: now - i * 60 + 5 + i,
+      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'))
  if (!Number.isInteger(value) || value <= 0) {
--- a/browser_tests/fixtures/helpers/BuilderFooterHelper.ts
+++ b/browser_tests/fixtures/helpers/BuilderFooterHelper.ts
@@ -1,69 +0,0 @@
-import type { Locator, Page } from '@playwright/test'
-
-import type { ComfyPage } from '../ComfyPage'
-import { TestIds } from '../selectors'
-
-export class BuilderFooterHelper {
-  constructor(private readonly comfyPage: ComfyPage) {}
-
-  private get page(): Page {
-    return this.comfyPage.page
-  }
-
-  get nav(): Locator {
-    return this.page.getByTestId(TestIds.builder.footerNav)
-  }
-
-  get exitButton(): Locator {
-    return this.buttonByName('Exit app builder')
-  }
-
-  get nextButton(): Locator {
-    return this.buttonByName('Next')
-  }
-
-  get backButton(): Locator {
-    return this.buttonByName('Back')
-  }
-
-  get saveButton(): Locator {
-    return this.page.getByTestId(TestIds.builder.saveButton)
-  }
-
-  get saveAsButton(): Locator {
-    return this.page.getByTestId(TestIds.builder.saveAsButton)
-  }
-
-  get saveAsChevron(): Locator {
-    return this.page.getByTestId(TestIds.builder.saveAsChevron)
-  }
-
-  get opensAsPopover(): Locator {
-    return this.page.getByTestId(TestIds.builder.opensAs)
-  }
-
-  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()
-  }
-}
--- a/browser_tests/fixtures/helpers/BuilderSaveAsHelper.ts
+++ b/browser_tests/fixtures/helpers/BuilderSaveAsHelper.ts
@@ -1,78 +0,0 @@
-import type { Locator, Page } from '@playwright/test'
-
-import type { ComfyPage } from '../ComfyPage'
-
-export class BuilderSaveAsHelper {
-  constructor(private readonly comfyPage: ComfyPage) {}
-
-  private get page(): Page {
-    return this.comfyPage.page
-  }
-
-  /** The save-as dialog (scoped by aria-labelledby). */
-  get dialog(): Locator {
-    return this.page.locator('[aria-labelledby="builder-save"]')
-  }
-
-  /** The post-save success dialog (scoped by aria-labelledby). */
-  get successDialog(): Locator {
-    return this.page.locator('[aria-labelledby="builder-save-success"]')
-  }
-
-  get title(): Locator {
-    return this.dialog.getByText('Save as')
-  }
-
-  get radioGroup(): Locator {
-    return this.dialog.getByRole('radiogroup')
-  }
-
-  get nameInput(): Locator {
-    return this.dialog.getByRole('textbox')
-  }
-
-  viewTypeRadio(viewType: 'App' | 'Node graph'): Locator {
-    return this.dialog.getByRole('radio', { name: viewType })
-  }
-
-  get saveButton(): Locator {
-    return this.dialog.getByRole('button', { name: 'Save' })
-  }
-
-  get successMessage(): Locator {
-    return this.successDialog.getByText('Successfully saved')
-  }
-
-  get viewAppButton(): Locator {
-    return this.successDialog.getByRole('button', { name: 'View app' })
-  }
-
-  get closeButton(): Locator {
-    return this.successDialog
-      .getByRole('button', { name: 'Close', exact: true })
-      .filter({ hasText: 'Close' })
-  }
-
-  /** The X button to dismiss the success dialog without any action. */
-  get dismissButton(): Locator {
-    return this.successDialog.locator('button.p-dialog-close-button')
-  }
-
-  get exitBuilderButton(): Locator {
-    return this.successDialog.getByRole('button', { name: 'Exit builder' })
-  }
-
-  get overwriteDialog(): Locator {
-    return this.page.getByRole('dialog', { name: 'Overwrite existing file?' })
-  }
-
-  get overwriteButton(): Locator {
-    return this.overwriteDialog.getByRole('button', { name: 'Overwrite' })
-  }
-
-  async fillAndSave(workflowName: string, viewType: 'App' | 'Node graph') {
-    await this.nameInput.fill(workflowName)
-    await this.viewTypeRadio(viewType).click()
-    await this.saveButton.click()
-  }
-}
--- a/browser_tests/fixtures/helpers/BuilderSelectHelper.ts
+++ b/browser_tests/fixtures/helpers/BuilderSelectHelper.ts
@@ -1,139 +0,0 @@
-import type { Locator, Page } from '@playwright/test'
-
-import type { ComfyPage } from '../ComfyPage'
-import type { NodeReference } from '../utils/litegraphUtils'
-import { TestIds } from '../selectors'
-
-export class BuilderSelectHelper {
-  constructor(private readonly comfyPage: ComfyPage) {}
-
-  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.page
-      .getByTestId(TestIds.builder.ioItem)
-      .filter({
-        has: this.page
-          .getByTestId(TestIds.builder.ioItemTitle)
-          .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()
-  }
-
-  /** Center on a node and click its first widget to select it as input. */
-  async selectInputWidget(node: NodeReference) {
-    await this.comfyPage.canvasOps.setScale(1)
-    await node.centerOnNode()
-
-    const widgetRef = await node.getWidget(0)
-    const widgetPos = await widgetRef.getPosition()
-    const titleHeight = await this.page.evaluate(
-      () => window.LiteGraph!['NODE_TITLE_HEIGHT'] as number
-    )
-    await this.page.mouse.click(widgetPos.x, widgetPos.y + titleHeight)
-    await this.comfyPage.nextFrame()
-  }
-
-  /** Click the first SaveImage/PreviewImage node on the canvas. */
-  async selectOutputNode() {
-    const saveImageNodeId = await this.page.evaluate(() => {
-      const node = window.app!.rootGraph.nodes.find(
-        (n: { type?: string }) =>
-          n.type === 'SaveImage' || n.type === 'PreviewImage'
-      )
-      return node ? String(node.id) : null
-    })
-    if (!saveImageNodeId)
-      throw new Error('SaveImage/PreviewImage node not found')
-    const saveImageRef =
-      await this.comfyPage.nodeOps.getNodeRefById(saveImageNodeId)
-    await saveImageRef.centerOnNode()
-
-    const canvasBox = await this.page.locator('#graph-canvas').boundingBox()
-    if (!canvasBox) throw new Error('Canvas not found')
-    await this.page.mouse.click(
-      canvasBox.x + canvasBox.width / 2,
-      canvasBox.y + canvasBox.height / 2
-    )
-    await this.comfyPage.nextFrame()
-  }
-}
--- a/browser_tests/fixtures/helpers/BuilderStepsHelper.ts
+++ b/browser_tests/fixtures/helpers/BuilderStepsHelper.ts
@@ -1,30 +0,0 @@
-import type { Locator, Page } from '@playwright/test'
-
-import type { ComfyPage } from '../ComfyPage'
-
-export class BuilderStepsHelper {
-  constructor(private readonly comfyPage: ComfyPage) {}
-
-  private get page(): Page {
-    return this.comfyPage.page
-  }
-
-  get toolbar(): Locator {
-    return this.page.getByRole('navigation', { name: 'App Builder' })
-  }
-
-  async goToInputs() {
-    await this.toolbar.getByRole('button', { name: 'Inputs' }).click()
-    await this.comfyPage.nextFrame()
-  }
-
-  async goToOutputs() {
-    await this.toolbar.getByRole('button', { name: 'Outputs' }).click()
-    await this.comfyPage.nextFrame()
-  }
-
-  async goToPreview() {
-    await this.toolbar.getByRole('button', { name: 'Preview' }).click()
-    await this.comfyPage.nextFrame()
-  }
-}
--- a/browser_tests/fixtures/helpers/CanvasHelper.ts
+++ b/browser_tests/fixtures/helpers/CanvasHelper.ts
@@ -169,39 +169,6 @@ 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 this.nextFrame()
-    }
-    // Sweep back
-    for (let i = steps; i > 0; i--) {
-      await this.page.mouse.move(centerX + i * dx, centerY + i * dy)
-      await this.nextFrame()
-    }
-
-    await this.page.mouse.up({ button: 'middle' })
-  }
-
  async disconnectEdge(): Promise<void> {
    await this.dragAndDrop(
      DefaultGraphPositions.clipTextEncodeNode1InputSlot,
--- a/browser_tests/fixtures/helpers/SubgraphHelper.ts
+++ b/browser_tests/fixtures/helpers/SubgraphHelper.ts
@@ -1,11 +1,10 @@
 import { expect } from '@playwright/test'
-import type { ConsoleMessage, Locator, Page } from '@playwright/test'
+import type { Page } from '@playwright/test'

 import type {
  CanvasPointerEvent,
  Subgraph
 } from '@/lib/litegraph/src/litegraph'
-import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'

 import type { ComfyPage } from '../ComfyPage'
 import { TestIds } from '../selectors'
@@ -414,138 +413,4 @@ 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.nextFrame()
-  }
-
-  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.page.evaluate(
-      (workflow: ComfyWorkflowJSON) => window.app!.loadGraphData(workflow),
-      serialized as ComfyWorkflowJSON
-    )
-    await this.comfyPage.nextFrame()
-  }
-
-  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()
-    await this.comfyPage.nextFrame()
-    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.nextFrame()
-    await this.comfyPage.canvas.click()
-    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.click()
-    await this.comfyPage.nextFrame()
-  }
-
-  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) }
-  }
 }
--- a/browser_tests/fixtures/helpers/WorkflowHelper.ts
+++ b/browser_tests/fixtures/helpers/WorkflowHelper.ts
@@ -1,6 +1,5 @@
 import { readFileSync } from 'fs'

-import type { AppMode } from '../../../src/composables/useAppMode'
 import type {
  ComfyApiWorkflow,
  ComfyWorkflowJSON
@@ -105,40 +104,6 @@ export class WorkflowHelper {
    })
  }

-  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
--- a/browser_tests/fixtures/selectors.ts
+++ b/browser_tests/fixtures/selectors.ts
@@ -77,14 +77,9 @@ export const TestIds = {
    subgraphEnterButton: 'subgraph-enter-button'
  },
  builder: {
-    footerNav: 'builder-footer-nav',
-    saveButton: 'builder-save-button',
-    saveAsButton: 'builder-save-as-button',
-    saveAsChevron: 'builder-save-as-chevron',
    ioItem: 'builder-io-item',
    ioItemTitle: 'builder-io-item-title',
-    widgetActionsMenu: 'widget-actions-menu',
-    opensAs: 'builder-opens-as'
+    widgetActionsMenu: 'widget-actions-menu'
  },
  breadcrumb: {
    subgraph: 'subgraph-breadcrumb'
--- a/browser_tests/fixtures/utils/litegraphUtils.ts
+++ b/browser_tests/fixtures/utils/litegraphUtils.ts
@@ -392,11 +392,6 @@ export class NodeReference {
    await this.comfyPage.clipboard.copy()
    await this.comfyPage.nextFrame()
  }
-  async delete(): Promise<void> {
-    await this.click('title')
-    await this.comfyPage.page.keyboard.press('Delete')
-    await this.comfyPage.nextFrame()
-  }
  async connectWidget(
    originSlotIndex: number,
    targetNode: NodeReference,
--- a/browser_tests/helpers/builderTestUtils.ts
+++ b/browser_tests/helpers/builderTestUtils.ts
@@ -1,78 +0,0 @@
-import { expect } from '@playwright/test'
-
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import type { NodeReference } from '../fixtures/utils/litegraphUtils'
-
-import { fitToViewInstant } from './fitToView'
-import { getPromotedWidgetNames } from './promotedWidgets'
-
-/**
- * Enter builder on the default workflow and select I/O.
- *
- * Loads the default workflow, optionally transforms it (e.g. convert a node
- * 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.
- */
-export async function setupBuilder(
-  comfyPage: ComfyPage,
-  getInputNode?: (ksampler: NodeReference) => Promise<NodeReference>
-): Promise<NodeReference> {
-  const { appMode } = comfyPage
-  await comfyPage.workflow.loadWorkflow('default')
-
-  const ksampler = await comfyPage.nodeOps.getNodeRefById('3')
-  const inputNode = getInputNode ? await getInputNode(ksampler) : ksampler
-
-  await fitToViewInstant(comfyPage)
-  await appMode.enterBuilder()
-  await appMode.steps.goToInputs()
-  await appMode.select.selectInputWidget(inputNode)
-
-  await appMode.steps.goToOutputs()
-  await appMode.select.selectOutputNode()
-
-  return inputNode
-}
-
-/**
- * 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) => {
-    await ksampler.click('title')
-    const subgraphNode = await ksampler.convertToSubgraph()
-    await comfyPage.nextFrame()
-
-    const promotedNames = await getPromotedWidgetNames(
-      comfyPage,
-      String(subgraphNode.id)
-    )
-    expect(promotedNames).toContain('seed')
-
-    return subgraphNode
-  })
-}
-
-/** Save the workflow, reopen it, and enter app mode. */
-export async function saveAndReopenInAppMode(
-  comfyPage: ComfyPage,
-  workflowName: string
-) {
-  await comfyPage.menu.topbar.saveWorkflow(workflowName)
-
-  const { workflowsTab } = comfyPage.menu
-  await workflowsTab.open()
-  await workflowsTab.getPersistedItem(workflowName).dblclick()
-  await comfyPage.nextFrame()
-
-  await comfyPage.appMode.toggleAppMode()
-}
--- a/browser_tests/helpers/perfReporter.ts
+++ b/browser_tests/helpers/perfReporter.ts
@@ -12,38 +12,6 @@ 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]}`
-  })
-  console.log(`${label}: ${parts.join(', ')}`)
-}
-
 export function recordMeasurement(m: PerfMeasurement) {
  mkdirSync(TEMP_DIR, { recursive: true })
  const filename = `${m.name}-${Date.now()}.json`
--- a/browser_tests/helpers/subgraphTestUtils.ts
+++ b/browser_tests/helpers/subgraphTestUtils.ts
@@ -0,0 +1,45 @@
+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)
+}
--- a/browser_tests/specs/README.md
+++ b/browser_tests/specs/README.md
@@ -1,3 +0,0 @@
-# Specs
-
-This is a directory for test plans.
--- a/browser_tests/tests/appModeWidgetRename.spec.ts
+++ b/browser_tests/tests/appModeWidgetRename.spec.ts
@@ -1,11 +1,89 @@
+import type { ComfyPage } from '../fixtures/ComfyPage'
 import {
  comfyPageFixture as test,
  comfyExpect as expect
 } from '../fixtures/ComfyPage'
-import {
-  saveAndReopenInAppMode,
-  setupSubgraphBuilder
-} from '../helpers/builderTestUtils'
+import { fitToViewInstant } from '../helpers/fitToView'
+import { getPromotedWidgetNames } from '../helpers/promotedWidgets'
+
+/**
+ * Convert the KSampler (id 3) in the default workflow to a subgraph,
+ * enter builder, select the promoted seed widget as input and
+ * SaveImage/PreviewImage as output.
+ *
+ * Returns the subgraph node reference for further interaction.
+ */
+async function setupSubgraphBuilder(comfyPage: ComfyPage) {
+  const { page, appMode } = 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()
+
+  const subgraphNodeId = String(subgraphNode.id)
+  const promotedNames = await getPromotedWidgetNames(comfyPage, subgraphNodeId)
+  expect(promotedNames).toContain('seed')
+
+  await fitToViewInstant(comfyPage)
+  await appMode.enterBuilder()
+  await appMode.goToInputs()
+
+  // Reset zoom to 1 and center on the subgraph node so click coords are accurate
+  await comfyPage.canvasOps.setScale(1)
+  await subgraphNode.centerOnNode()
+
+  // Click the promoted seed widget on the canvas to select it
+  const seedWidgetRef = await subgraphNode.getWidget(0)
+  const seedPos = await seedWidgetRef.getPosition()
+  const titleHeight = await page.evaluate(
+    () => window.LiteGraph!['NODE_TITLE_HEIGHT'] as number
+  )
+
+  await page.mouse.click(seedPos.x, seedPos.y + titleHeight)
+  await comfyPage.nextFrame()
+
+  // Select an output node
+  await appMode.goToOutputs()
+
+  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()
+
+  // Node is centered on screen, so click the canvas center
+  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()
+
+  return subgraphNode
+}
+
+/** Save the workflow, reopen it, and enter app mode. */
+async function saveAndReopenInAppMode(
+  comfyPage: ComfyPage,
+  workflowName: string
+) {
+  await comfyPage.menu.topbar.saveWorkflow(workflowName)
+
+  const { workflowsTab } = comfyPage.menu
+  await workflowsTab.open()
+  await workflowsTab.getPersistedItem(workflowName).dblclick()
+  await comfyPage.nextFrame()
+
+  await comfyPage.appMode.toggleAppMode()
+}

 test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
  test.beforeEach(async ({ comfyPage }) => {
@@ -29,14 +107,14 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
    await setupSubgraphBuilder(comfyPage)

    // Go back to inputs step where IoItems are shown
-    await appMode.steps.goToInputs()
+    await appMode.goToInputs()

-    const menu = appMode.select.getInputItemMenu('seed')
+    const menu = appMode.getBuilderInputItemMenu('seed')
    await expect(menu).toBeVisible({ timeout: 5000 })
-    await appMode.select.renameInputViaMenu('seed', 'Builder Input Seed')
+    await appMode.renameBuilderInputViaMenu('seed', 'Builder Input Seed')

    // Verify in app mode after save/reload
-    await appMode.footer.exitBuilder()
+    await appMode.exitBuilder()
    const workflowName = `${new Date().getTime()} builder-input-menu`
    await saveAndReopenInAppMode(comfyPage, workflowName)

@@ -52,11 +130,11 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
    const { appMode } = comfyPage
    await setupSubgraphBuilder(comfyPage)

-    await appMode.steps.goToInputs()
+    await appMode.goToInputs()

-    await appMode.select.renameInput('seed', 'Dblclick Seed')
+    await appMode.renameBuilderInput('seed', 'Dblclick Seed')

-    await appMode.footer.exitBuilder()
+    await appMode.exitBuilder()
    const workflowName = `${new Date().getTime()} builder-input-dblclick`
    await saveAndReopenInAppMode(comfyPage, workflowName)

@@ -68,14 +146,14 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
    const { appMode } = comfyPage
    await setupSubgraphBuilder(comfyPage)

-    await appMode.steps.goToPreview()
+    await appMode.goToPreview()

-    const menu = appMode.select.getPreviewWidgetMenu('seed — New Subgraph')
+    const menu = appMode.getBuilderPreviewWidgetMenu('seed — New Subgraph')
    await expect(menu).toBeVisible({ timeout: 5000 })
-    await appMode.select.renameWidget(menu, 'Preview Seed')
+    await appMode.renameWidget(menu, 'Preview Seed')

    // Verify in app mode after save/reload
-    await appMode.footer.exitBuilder()
+    await appMode.exitBuilder()
    const workflowName = `${new Date().getTime()} builder-preview`
    await saveAndReopenInAppMode(comfyPage, workflowName)

@@ -88,13 +166,13 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
    await setupSubgraphBuilder(comfyPage)

    // Enter app mode from builder
-    await appMode.footer.exitBuilder()
+    await appMode.exitBuilder()
    await appMode.toggleAppMode()

    await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })

    const menu = appMode.getAppModeWidgetMenu('seed')
-    await appMode.select.renameWidget(menu, 'App Mode Seed')
+    await appMode.renameWidget(menu, 'App Mode Seed')

    await expect(appMode.linearWidgets.getByText('App Mode Seed')).toBeVisible()

--- a/browser_tests/tests/browserTabTitle.spec.ts
+++ b/browser_tests/tests/browserTabTitle.spec.ts
@@ -19,26 +19,24 @@ test.describe('Browser tab title', { tag: '@smoke' }, () => {
        .toBe(`*${workflowName} - ComfyUI`)
    })

-    test('Can display workflow name with unsaved changes', async ({
+    // Failing on CI
+    // Cannot reproduce locally
+    test.skip('Can display workflow name with unsaved changes', async ({
      comfyPage
    }) => {
-      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?.checkState()
+      const workflowName = await comfyPage.page.evaluate(async () => {
+        return (window.app!.extensionManager as WorkspaceStore).workflow
+          .activeWorkflow?.filename
      })
-      await expect
-        .poll(() => comfyPage.page.title())
-        .toBe(`*${workflowName} - ComfyUI`)
+      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`)

      // Delete the saved workflow for cleanup.
      await comfyPage.page.evaluate(async () => {
--- a/browser_tests/tests/builderSaveFlow.spec.ts
+++ b/browser_tests/tests/builderSaveFlow.spec.ts
@@ -1,371 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import type { AppModeHelper } from '../fixtures/helpers/AppModeHelper'
-import { setupBuilder } from '../helpers/builderTestUtils'
-import { fitToViewInstant } from '../helpers/fitToView'
-
-/**
- * Open the save-as dialog, fill name + view type, click save,
- * and wait for the success dialog.
- */
-async function builderSaveAs(
-  appMode: AppModeHelper,
-  workflowName: string,
-  viewType: 'App' | 'Node graph'
-) {
-  await appMode.footer.saveAsButton.click()
-  await expect(appMode.saveAs.nameInput).toBeVisible({ timeout: 5000 })
-  await appMode.saveAs.fillAndSave(workflowName, viewType)
-  await expect(appMode.saveAs.successMessage).toBeVisible({ timeout: 5000 })
-}
-
-/**
- * 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.
- */
-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(async () => {
-    const path = await comfyPage.workflow.getActiveWorkflowPath()
-    expect(path).toContain(name)
-  }).toPass({ timeout: 5000 })
-}
-
-/**
- * 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({ timeout: 5000 })
-  await appMode.saveAs.fillAndSave(workflowName, viewType)
-}
-
-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.settings.setSetting(
-      'Comfy.AppBuilder.VueNodeSwitchDismissed',
-      true
-    )
-  })
-
-  test('Save as dialog appears for unsaved workflow', async ({ comfyPage }) => {
-    const { saveAs } = comfyPage.appMode
-    await setupBuilder(comfyPage)
-    await comfyPage.appMode.footer.saveAsButton.click()
-
-    await expect(saveAs.dialog).toBeVisible({ timeout: 5000 })
-    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
-  }) => {
-    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 { saveAs } = comfyPage.appMode
-    await setupBuilder(comfyPage)
-    await comfyPage.appMode.footer.saveAsButton.click()
-
-    await expect(saveAs.dialog).toBeVisible({ timeout: 5000 })
-    await saveAs.nameInput.fill('')
-    await expect(saveAs.saveButton).toBeDisabled()
-  })
-
-  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()
-
-    await expect(saveAs.dialog).toBeVisible({ timeout: 5000 })
-
-    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 { footer } = comfyPage.appMode
-    await setupBuilder(comfyPage)
-
-    await comfyPage.appMode.steps.goToInputs()
-
-    await expect(footer.backButton).toBeDisabled()
-    await expect(footer.nextButton).toBeEnabled()
-
-    await footer.next()
-    await expect(footer.backButton).toBeEnabled()
-
-    await footer.next()
-    await expect(footer.nextButton).toBeDisabled()
-  })
-
-  test('Escape key exits builder mode', async ({ comfyPage }) => {
-    await setupBuilder(comfyPage)
-
-    await expect(comfyPage.appMode.steps.toolbar).toBeVisible()
-
-    await comfyPage.page.keyboard.press('Escape')
-    await comfyPage.nextFrame()
-
-    await expect(comfyPage.appMode.steps.toolbar).not.toBeVisible()
-  })
-
-  test('Exit builder button exits builder mode', async ({ comfyPage }) => {
-    await setupBuilder(comfyPage)
-
-    await expect(comfyPage.appMode.steps.toolbar).toBeVisible()
-    await comfyPage.appMode.footer.exitBuilder()
-    await expect(comfyPage.appMode.steps.toolbar).not.toBeVisible()
-  })
-
-  test('Save button directly saves for previously saved workflow', async ({
-    comfyPage
-  }) => {
-    const { footer, saveAs } = comfyPage.appMode
-    await setupBuilder(comfyPage)
-
-    await builderSaveAs(comfyPage.appMode, `${Date.now()} direct-save`, 'App')
-    await saveAs.closeButton.click()
-    await comfyPage.nextFrame()
-
-    // 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({ timeout: 5000 })
-
-    await footer.saveButton.click()
-    await comfyPage.nextFrame()
-
-    await expect(saveAs.dialog).not.toBeVisible({ timeout: 2000 })
-    await expect(footer.saveButton).toBeDisabled()
-  })
-
-  test('Split button chevron opens save-as for saved workflow', async ({
-    comfyPage
-  }) => {
-    const { footer, saveAs } = comfyPage.appMode
-    await setupBuilder(comfyPage)
-
-    await builderSaveAs(comfyPage.appMode, `${Date.now()} split-btn`, 'App')
-    await saveAs.closeButton.click()
-    await comfyPage.nextFrame()
-
-    await footer.openSaveAsFromChevron()
-
-    await expect(saveAs.title).toBeVisible({ timeout: 5000 })
-    await expect(saveAs.nameInput).toBeVisible()
-  })
-
-  test('Connect output popover appears when no outputs selected', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow('default')
-    await fitToViewInstant(comfyPage)
-    await comfyPage.appMode.enterBuilder()
-
-    await comfyPage.appMode.footer.saveAsButton.click()
-
-    await expect(
-      comfyPage.page.getByText('Connect an output', { exact: false })
-    ).toBeVisible({ timeout: 5000 })
-  })
-
-  test('save as app produces correct extension and linearMode', async ({
-    comfyPage
-  }) => {
-    await setupBuilder(comfyPage)
-    await builderSaveAs(comfyPage.appMode, `${Date.now()} app-ext`, 'App')
-
-    const path = await comfyPage.workflow.getActiveWorkflowPath()
-    expect(path).toContain('.app.json')
-
-    const linearMode = await comfyPage.workflow.getLinearModeFromGraph()
-    expect(linearMode).toBe(true)
-  })
-
-  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'
-    )
-
-    const path = await comfyPage.workflow.getActiveWorkflowPath()
-    expect(path).toMatch(/\.json$/)
-    expect(path).not.toContain('.app.json')
-
-    const linearMode = await comfyPage.workflow.getLinearModeFromGraph()
-    expect(linearMode).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 comfyPage.nextFrame()
-
-    expect(await 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 comfyPage.nextFrame()
-
-    await expect(comfyPage.appMode.steps.toolbar).not.toBeVisible()
-  })
-
-  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')
-    const originalPath = await comfyPage.workflow.getActiveWorkflowPath()
-    expect(originalPath).toContain('.app.json')
-    await appMode.saveAs.closeButton.click()
-    await comfyPage.nextFrame()
-
-    // Re-save as node graph — creates a copy
-    await reSaveAs(appMode, `${Date.now()} copy`, 'Node graph')
-    await expect(appMode.saveAs.successMessage).toBeVisible({ timeout: 5000 })
-
-    const newPath = await comfyPage.workflow.getActiveWorkflowPath()
-    expect(newPath).not.toBe(originalPath)
-    expect(newPath).not.toContain('.app.json')
-
-    // Dismiss success dialog, exit app mode, reopen the original
-    await appMode.saveAs.dismissButton.click()
-    await comfyPage.nextFrame()
-    await appMode.toggleAppMode()
-    await openWorkflowFromSidebar(comfyPage, originalName)
-
-    const linearMode = await comfyPage.workflow.getLinearModeFromGraph()
-    expect(linearMode).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 appMode.saveAs.closeButton.click()
-    await comfyPage.nextFrame()
-
-    const pathAfterFirst = await comfyPage.workflow.getActiveWorkflowPath()
-
-    await reSaveAs(appMode, name, 'App')
-
-    await expect(appMode.saveAs.overwriteDialog).toBeVisible({ timeout: 5000 })
-    await appMode.saveAs.overwriteButton.click()
-
-    await expect(appMode.saveAs.successMessage).toBeVisible({ timeout: 5000 })
-
-    const pathAfterSecond = await comfyPage.workflow.getActiveWorkflowPath()
-    expect(pathAfterSecond).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')
-    const pathAfterFirst = await comfyPage.workflow.getActiveWorkflowPath()
-    expect(pathAfterFirst).toContain('.app.json')
-    await appMode.saveAs.closeButton.click()
-    await comfyPage.nextFrame()
-
-    await reSaveAs(appMode, name, 'Node graph')
-    await expect(appMode.saveAs.successMessage).toBeVisible({ timeout: 5000 })
-
-    const pathAfterSecond = await comfyPage.workflow.getActiveWorkflowPath()
-    expect(pathAfterSecond).not.toBe(pathAfterFirst)
-    expect(pathAfterSecond).toMatch(/\.json$/)
-    expect(pathAfterSecond).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 comfyPage.appMode.saveAs.dismissButton.click()
-    await comfyPage.nextFrame()
-    await comfyPage.appMode.footer.exitBuilder()
-
-    await openWorkflowFromSidebar(comfyPage, name)
-
-    const mode = await comfyPage.workflow.getActiveWorkflowInitialMode()
-    expect(mode).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 comfyPage.appMode.saveAs.dismissButton.click()
-    await comfyPage.nextFrame()
-    await comfyPage.appMode.toggleAppMode()
-
-    await openWorkflowFromSidebar(comfyPage, name)
-
-    const mode = await comfyPage.workflow.getActiveWorkflowInitialMode()
-    expect(mode).toBe('graph')
-  })
-})
--- a/browser_tests/tests/changeTrackerLoadGuard.spec.ts
+++ b/browser_tests/tests/changeTrackerLoadGuard.spec.ts
@@ -1,66 +0,0 @@
-import {
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from '../fixtures/ComfyPage'
-import type { WorkspaceStore } from '../types/globals'
-
-test.describe(
-  'Change Tracker - isLoadingGraph guard',
-  { tag: '@workflow' },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.workflow.setupWorkflowsDirectory({})
-    })
-
-    test('Prevents checkState from corrupting workflow state during tab switch', async ({
-      comfyPage
-    }) => {
-      // Tab 0: default workflow (7 nodes)
-      expect(await 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.
-      // This simulates the bug scenario where a user clicks during graph loading
-      // which triggers a checkState call on the wrong graph, corrupting the activeState.
-      await comfyPage.page.evaluate(() => {
-        window.app!.registerExtension({
-          name: 'TestCheckStateDuringLoad',
-          afterConfigureGraph() {
-            const workflow = (window.app!.extensionManager as WorkspaceStore)
-              .workflow.activeWorkflow
-            if (!workflow) throw new Error('No workflow found')
-            // Bypass the guard to reproduce the corruption bug:
-            // ; (workflow.changeTracker.constructor as unknown as { isLoadingGraph: boolean }).isLoadingGraph = false
-
-            // Simulate the user clicking during graph loading
-            workflow.changeTracker.checkState()
-          }
-        })
-      })
-
-      // Create tab 1: blank workflow (0 nodes)
-      await comfyPage.menu.topbar.triggerTopbarCommand(['New'])
-      await comfyPage.nextFrame()
-      expect(await 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)
-
-      // 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)
-
-      // switch again and verify no corruption
-      await tab0.click()
-      await comfyPage.nextFrame()
-      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(7)
-    })
-  }
-)
--- a/browser_tests/tests/dialog.spec.ts
+++ b/browser_tests/tests/dialog.spec.ts
@@ -256,6 +256,27 @@ test.describe('Missing models in Error Tab', () => {
      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', () => {
--- a/browser_tests/tests/domWidget.spec.ts
+++ b/browser_tests/tests/domWidget.spec.ts
@@ -55,4 +55,46 @@ test.describe('DOM Widget', { tag: '@widget' }, () => {
    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()
+  })
 })
--- a/browser_tests/tests/groupNode.spec.ts
+++ b/browser_tests/tests/groupNode.spec.ts
@@ -94,7 +94,13 @@ test.describe('Group Node', { tag: '@node' }, () => {
        .click()
    })
  })
-  test(
+  // 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(
    'Can be added to canvas using search',
    { tag: '@screenshot' },
    async ({ comfyPage }) => {
@@ -102,16 +108,7 @@ test.describe('Group Node', { tag: '@node' }, () => {
      await comfyPage.nodeOps.convertAllNodesToGroupNode(groupNodeName)
      await comfyPage.canvasOps.doubleClick()
      await comfyPage.nextFrame()
-      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 comfyPage.searchBox.fillAndSelectFirstNode(groupNodeName)
      await expect(comfyPage.canvas).toHaveScreenshot(
        'group-node-copy-added-from-search.png'
      )
--- 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
--- a/browser_tests/tests/imageCompare.spec.ts
+++ b/browser_tests/tests/imageCompare.spec.ts
@@ -1,81 +0,0 @@
-import { expect } from '@playwright/test'
-
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-test.describe('Image Compare', () => {
-  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 {
-    const svg =
-      `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">` +
-      `<rect width="200" height="200" fill="${color}"/>` +
-      `<text x="50%" y="50%" fill="white" font-size="24" ` +
-      `text-anchor="middle" dominant-baseline="middle">${label}</text></svg>`
-    return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
-  }
-
-  async function setImageCompareValue(
-    comfyPage: ComfyPage,
-    value: { beforeImages: string[]; afterImages: string[] }
-  ) {
-    await comfyPage.page.evaluate(
-      ({ value }) => {
-        const node = window.app!.graph.getNodeById(1)
-        const widget = node?.widgets?.find((w) => w.type === 'imagecompare')
-        if (widget) {
-          widget.value = value
-          widget.callback?.(value)
-        }
-      },
-      { value }
-    )
-    await comfyPage.nextFrame()
-  }
-
-  test(
-    'Shows empty state when no images are set',
-    { tag: '@smoke' },
-    async ({ comfyPage }) => {
-      const node = comfyPage.vueNodes.getNodeLocator('1')
-      await expect(node).toBeVisible()
-
-      await expect(node).toContainText('No images to compare')
-      await expect(node.locator('img')).toHaveCount(0)
-      await expect(node.locator('[role="presentation"]')).toHaveCount(0)
-    }
-  )
-
-  test(
-    'Slider defaults to 50% with both images set',
-    { tag: ['@smoke', '@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 afterImg = node.locator('img[alt="After image"]')
-      await expect(beforeImg).toBeVisible()
-      await expect(afterImg).toBeVisible()
-
-      const handle = node.locator('[role="presentation"]')
-      await expect(handle).toBeVisible()
-
-      expect(
-        await handle.evaluate((el) => (el as HTMLElement).style.left)
-      ).toBe('50%')
-      await expect(beforeImg).toHaveCSS('clip-path', /50%/)
-
-      await expect(node).toHaveScreenshot('image-compare-default-50.png')
-    }
-  )
-})
--- 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
--- a/browser_tests/tests/interaction.spec.ts
+++ b/browser_tests/tests/interaction.spec.ts
@@ -175,9 +175,7 @@ test.describe('Node Interaction', () => {
    // 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', {
-      maxDiffPixels: 50
-    })
+    await expect(comfyPage.canvas).toHaveScreenshot('dragged-node1.png')
  })

  test.describe('Edge Interaction', { tag: '@screenshot' }, () => {
@@ -222,7 +220,10 @@ test.describe('Node Interaction', () => {
      await expect(comfyPage.canvas).toHaveScreenshot('moved-link.png')
    })

-    test('Can copy link by shift-drag existing link', async ({ comfyPage }) => {
+    // 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
+    }) => {
      await comfyPage.canvasOps.dragAndDrop(
        DefaultGraphPositions.clipTextEncodeNode1InputSlot,
        DefaultGraphPositions.emptySpace
@@ -814,15 +815,11 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
        'Comfy.Workflow.WorkflowTabsPosition',
        'Topbar'
      )
-
-      await expect
-        .poll(() => comfyPage.menu.topbar.getTabNames(), { timeout: 5000 })
-        .toEqual(expect.arrayContaining([workflowA, workflowB]))
-
      const tabs = await comfyPage.menu.topbar.getTabNames()
-      expect(tabs.indexOf(workflowA)).toBeLessThan(tabs.indexOf(workflowB))
-
      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)
    })

--- 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
--- a/browser_tests/tests/loadWorkflowInMedia.spec.ts
+++ b/browser_tests/tests/loadWorkflowInMedia.spec.ts
@@ -68,7 +68,7 @@ test.describe(
      })
    })

-    test('Load workflow from URL dropped onto Vue node', async ({
+    test.fixme('Load workflow from URL dropped onto Vue node', async ({
      comfyPage
    }) => {
      const fakeUrl = 'https://example.com/workflow.png'
--- a/browser_tests/tests/maskEditor.spec.ts
+++ b/browser_tests/tests/maskEditor.spec.ts
@@ -1,92 +0,0 @@
-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)
-  })
-
-  async function loadImageOnNode(comfyPage: ComfyPage) {
-    await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
-    await comfyPage.vueNodes.waitForNodes()
-
-    const loadImageNode = (
-      await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
-    )[0]
-    const { x, y } = await loadImageNode.getPosition()
-
-    await comfyPage.dragDrop.dragAndDropFile('image64x64.webp', {
-      dropPosition: { x, y }
-    })
-
-    const imagePreview = comfyPage.page.locator('.image-preview')
-    await expect(imagePreview).toBeVisible()
-    await expect(imagePreview.locator('img')).toBeVisible()
-    await expect(imagePreview).toContainText('x')
-
-    return {
-      imagePreview,
-      nodeId: String(loadImageNode.id)
-    }
-  }
-
-  test(
-    'opens mask editor from image preview button',
-    { tag: ['@smoke', '@screenshot'] },
-    async ({ comfyPage }) => {
-      const { imagePreview } = await loadImageOnNode(comfyPage)
-
-      // Hover over the image panel to reveal action buttons
-      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)
-
-      await expect(dialog.locator('.maskEditor-ui-container')).toBeVisible()
-      await expect(dialog.getByText('Save')).toBeVisible()
-      await expect(dialog.getByText('Cancel')).toBeVisible()
-
-      await expect(dialog).toHaveScreenshot('mask-editor-dialog-open.png')
-    }
-  )
-
-  test(
-    'opens mask editor from context menu',
-    { tag: ['@smoke', '@screenshot'] },
-    async ({ comfyPage }) => {
-      const { nodeId } = await loadImageOnNode(comfyPage)
-
-      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')
-      await expect(contextMenu).toBeVisible()
-
-      await contextMenu.getByText('Open in Mask Editor').click()
-
-      const dialog = comfyPage.page.locator('.mask-editor-dialog')
-      await expect(dialog).toBeVisible()
-      await expect(
-        dialog.getByRole('heading', { name: 'Mask Editor' })
-      ).toBeVisible()
-
-      await expect(dialog).toHaveScreenshot(
-        'mask-editor-dialog-from-context-menu.png'
-      )
-    }
-  )
-})
--- a/browser_tests/tests/maskEditor.spec.ts-snapshots/mask-editor-dialog-from-context-menu-chromium-linux.png
+++ b/browser_tests/tests/maskEditor.spec.ts-snapshots/mask-editor-dialog-from-context-menu-chromium-linux.png
--- a/browser_tests/tests/maskEditor.spec.ts-snapshots/mask-editor-dialog-open-chromium-linux.png
+++ b/browser_tests/tests/maskEditor.spec.ts-snapshots/mask-editor-dialog-open-chromium-linux.png
--- a/browser_tests/tests/nodeHelp.spec.ts
+++ b/browser_tests/tests/nodeHelp.spec.ts
@@ -481,7 +481,6 @@ This is English documentation.
      const helpButton = comfyPage.page.locator(
        '.selection-toolbox button[data-testid="info-button"]'
      )
-      await helpButton.waitFor({ state: 'visible', timeout: 10_000 })
      await helpButton.click()

      const helpPage = comfyPage.page.locator(
--- a/browser_tests/tests/nodeSearchBox.spec.ts
+++ b/browser_tests/tests/nodeSearchBox.spec.ts
@@ -176,13 +176,40 @@ test.describe('Node search box', { tag: '@node' }, () => {
      await expectFilterChips(comfyPage, ['MODEL'])
    })

-    test('Outer click dismisses filter panel but keeps search box visible', async ({
+    // 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 ({
      comfyPage
    }) => {
      await comfyPage.searchBox.filterButton.click()
      const panel = comfyPage.searchBox.filterSelectionPanel
      await panel.header.waitFor({ state: 'visible' })
-      await comfyPage.page.keyboard.press('Escape')
+      const panelBounds = await panel.header.boundingBox()
+      await comfyPage.page.mouse.click(panelBounds!.x - 10, panelBounds!.y - 10)

      // Verify the filter selection panel is hidden
      await expect(panel.header).not.toBeVisible()
--- 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 { logMeasurement, recordMeasurement } from '../helpers/perfReporter'
+import { recordMeasurement } from '../helpers/perfReporter'

 test.describe('Performance', { tag: ['@perf'] }, () => {
  test('canvas idle style recalculations', async ({ comfyPage }) => {
@@ -186,22 +186,6 @@ 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
  }) => {
--- a/browser_tests/tests/seed.spec.ts
+++ b/browser_tests/tests/seed.spec.ts
@@ -1,26 +0,0 @@
-/**
- * Seed test for Playwright AI agents.
- *
- * This test bootstraps the ComfyUI environment for agent exploration.
- * When agents (Planner, Generator, Healer) run, they execute this test
- * first to set up the browser state, then use it as a template for
- * generated tests.
- *
- * Usage:
- *   - Planner: Runs this to explore the app, then generates a test plan
- *   - Generator: Uses this as an import/fixture template
- *   - Healer: Runs this to establish baseline state
- */
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-
-test('seed', async ({ comfyPage }) => {
-  // Load the default workflow — gives agents a realistic starting state
-  await comfyPage.workflow.loadWorkflow('default')
-  await comfyPage.nextFrame()
-
-  // Verify the app is ready
-  await expect(comfyPage.canvas).toBeVisible()
-})
--- 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 {
+  createMockJob,
+  createMockJobs
+} from '../../fixtures/helpers/AssetsHelper'
+import type { RawJobListItem } from '../../../src/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,582 @@ 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()
+    const count = await tab.assetCards.count()
+    expect(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({ timeout: 5000 })
+
+    // Imported tab should show the mocked files
+    const count = await tab.assetCards.count()
+    expect(count).toBeGreaterThanOrEqual(1)
+  })
+})
+
+// ==========================================================================
+// 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({ timeout: 5000 })
+  })
+
+  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({ timeout: 5000 })
+
+    // 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({ timeout: 5000 })
+  })
+})
+
+// ==========================================================================
+// 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(async () => {
+      const filteredCount = await tab.assetCards.count()
+      expect(filteredCount).toBeLessThan(initialCount)
+    }).toPass({ timeout: 5000 })
+  })
+
+  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(async () => {
+      expect(await tab.assetCards.count()).toBeLessThan(initialCount)
+    }).toPass({ timeout: 5000 })
+
+    await tab.searchInput.fill('')
+    await expect(tab.assetCards).toHaveCount(initialCount, { timeout: 5000 })
+  })
+
+  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, { timeout: 5000 })
+  })
+})
+
+// ==========================================================================
+// 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
+    const cardCount = await cards.count()
+    expect(cardCount).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({ timeout: 3000 })
+  })
+
+  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({ timeout: 3000 })
+
+    // 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({ timeout: 3000 })
+  })
+
+  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({ timeout: 3000 })
+
+    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
+    const cardCount = await cards.count()
+    expect(cardCount).toBeGreaterThanOrEqual(2)
+
+    // Multi-select: click first, then Ctrl/Cmd+click second
+    await cards.first().click({ force: true })
+    await cards.nth(1).click({ modifiers: ['ControlOrMeta'], force: true })
+
+    // Verify multi-selection took effect before right-clicking
+    await expect(tab.selectedCards).toHaveCount(2, { timeout: 3000 })
+
+    // Right-click on a selected card (force bypasses overlay interception)
+    await cards.first().click({ button: 'right', force: true })
+
+    const contextMenu = comfyPage.page.locator('.p-contextmenu')
+    await expect(contextMenu).toBeVisible({ timeout: 3000 })
+
+    // 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({ timeout: 3000 })
+  })
+
+  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({ timeout: 3000 })
+  })
+
+  test('Selection count displays correct number', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    // Select two assets
+    const cards = tab.assetCards
+    const cardCount = await cards.count()
+    expect(cardCount).toBeGreaterThanOrEqual(2)
+
+    await cards.first().click()
+    await cards.nth(1).click({ modifiers: ['ControlOrMeta'] })
+
+    // Selection count should show the count
+    await expect(tab.selectionCountButton).toBeVisible({ timeout: 3000 })
+    const text = await tab.selectionCountButton.textContent()
+    expect(text).toMatch(/Assets Selected: \d+/)
+  })
+})
+
+// ==========================================================================
+// 9. Pagination
+// ==========================================================================
+
+test.describe('Assets sidebar - pagination', () => {
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
+  test('Initially loads a batch of assets with has_more pagination', async ({
+    comfyPage
+  }) => {
+    // Create a large set of jobs to trigger pagination
+    const manyJobs = createMockJobs(30)
+    await comfyPage.assets.mockOutputHistory(manyJobs)
+    await comfyPage.setup()
+
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    // Should load at least the first batch
+    const count = await tab.assetCards.count()
+    expect(count).toBeGreaterThanOrEqual(1)
+  })
+})
+
+// ==========================================================================
+// 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()
+  })
 })
--- a/browser_tests/tests/sidebar/workflows.spec.ts
+++ b/browser_tests/tests/sidebar/workflows.spec.ts
@@ -271,11 +271,9 @@ test.describe('Workflows sidebar', () => {
      '.comfyui-workflows-open .close-workflow-button'
    )
    await closeButton.click()
-    await expect
-      .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames(), {
-        timeout: 5000
-      })
-      .toEqual(['*Unsaved Workflow'])
+    expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
+      '*Unsaved Workflow'
+    ])
  })

  test('Can close saved workflow with command', async ({ comfyPage }) => {
--- a/browser_tests/tests/subgraph-duplicate-ids.spec.ts
+++ b/browser_tests/tests/subgraph-duplicate-ids.spec.ts
@@ -110,11 +110,16 @@ test.describe('Subgraph duplicate ID remapping', { tag: ['@subgraph'] }, () => {
    const subgraphNode = await comfyPage.nodeOps.getNodeRefById('5')
    await subgraphNode.navigateIntoSubgraph()

-    expect(await comfyPage.subgraph.isInSubgraph()).toBe(true)
+    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 comfyPage.subgraph.isInSubgraph()).toBe(false)
+    expect(await isInSubgraph()).toBe(false)
  })
 })
--- a/browser_tests/tests/subgraph-promoted-slot-position.spec.ts
+++ b/browser_tests/tests/subgraph-promoted-slot-position.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test'

 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { SubgraphHelper } from '../fixtures/helpers/SubgraphHelper'
+import { getTextSlotPosition } from '../helpers/subgraphTestUtils'

 test.describe(
  'Subgraph promoted widget-input slot position',
@@ -18,10 +18,7 @@ test.describe(
      await comfyPage.nextFrame()
      await comfyPage.nextFrame()

-      const result = await SubgraphHelper.getTextSlotPosition(
-        comfyPage.page,
-        '11'
-      )
+      const result = await getTextSlotPosition(comfyPage.page, '11')
      expect(result).not.toBeNull()
      expect(result!.hasPos).toBe(true)

@@ -40,10 +37,7 @@ test.describe(
      await comfyPage.nextFrame()

      // Verify initial position is correct
-      const before = await SubgraphHelper.getTextSlotPosition(
-        comfyPage.page,
-        '11'
-      )
+      const before = await getTextSlotPosition(comfyPage.page, '11')
      expect(before).not.toBeNull()
      expect(before!.hasPos).toBe(true)
      expect(before!.posY).toBeGreaterThan(before!.titleHeight)
@@ -79,10 +73,7 @@ test.describe(
      await comfyPage.subgraph.exitViaBreadcrumb()

      // Verify slot position is still at the widget row after rename
-      const after = await SubgraphHelper.getTextSlotPosition(
-        comfyPage.page,
-        '11'
-      )
+      const after = await getTextSlotPosition(comfyPage.page, '11')
      expect(after).not.toBeNull()
      expect(after!.hasPos).toBe(true)
      expect(after!.posY).toBeGreaterThan(after!.titleHeight)
--- a/browser_tests/tests/subgraph-promoted-widget-dom.spec.ts
+++ b/browser_tests/tests/subgraph-promoted-widget-dom.spec.ts
@@ -1,7 +1,6 @@
 import { expect } from '@playwright/test'

 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { SubgraphHelper } from '../fixtures/helpers/SubgraphHelper'
 import { getPromotedWidgetNames } from '../helpers/promotedWidgets'

 test.describe(
@@ -15,8 +14,13 @@ test.describe(
    test('Promoted seed widget renders in node body, not header', async ({
      comfyPage
    }) => {
-      const subgraphNode =
-        await comfyPage.subgraph.convertDefaultKSamplerToSubgraph()
+      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)
@@ -39,7 +43,15 @@ test.describe(
      await expect(seedWidget).toBeVisible()

      // Verify widget is inside the node body, not the header
-      await SubgraphHelper.expectWidgetBelowHeader(nodeLocator, seedWidget)
+      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)
    })
  }
 )
--- a/browser_tests/tests/subgraph-rename-dialog.spec.ts
+++ b/browser_tests/tests/subgraph-rename-dialog.spec.ts
@@ -25,7 +25,11 @@ test.describe('Subgraph Slot Rename Dialog', { tag: '@subgraph' }, () => {
    await subgraphNode.navigateIntoSubgraph()

    // Get initial slot label
-    const initialInputLabel = await comfyPage.subgraph.getSlotLabel('input')
+    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(
@@ -102,7 +106,11 @@ test.describe('Subgraph Slot Rename Dialog', { tag: '@subgraph' }, () => {
    await comfyPage.nextFrame()

    // Verify the second rename worked
-    const afterSecondRename = await comfyPage.subgraph.getSlotLabel('input')
+    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)
  })

@@ -115,7 +123,11 @@ test.describe('Subgraph Slot Rename Dialog', { tag: '@subgraph' }, () => {
    await subgraphNode.navigateIntoSubgraph()

    // Get initial output slot label
-    const initialOutputLabel = await comfyPage.subgraph.getSlotLabel('output')
+    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(
--- a/browser_tests/tests/subgraph.spec.ts
+++ b/browser_tests/tests/subgraph.spec.ts
@@ -26,6 +26,38 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
    )
  })

+  // 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')
@@ -33,7 +65,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
      await subgraphNode.navigateIntoSubgraph()

-      const initialCount = await comfyPage.subgraph.getSlotCount('input')
+      const initialCount = await getSubgraphSlotCount(comfyPage, 'inputs')
      const [vaeEncodeNode] = await comfyPage.nodeOps.getNodeRefsByType(
        'VAEEncode',
        true
@@ -42,7 +74,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
      await comfyPage.subgraph.connectFromInput(vaeEncodeNode, 0)
      await comfyPage.nextFrame()

-      const finalCount = await comfyPage.subgraph.getSlotCount('input')
+      const finalCount = await getSubgraphSlotCount(comfyPage, 'inputs')
      expect(finalCount).toBe(initialCount + 1)
    })

@@ -52,7 +84,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
      await subgraphNode.navigateIntoSubgraph()

-      const initialCount = await comfyPage.subgraph.getSlotCount('output')
+      const initialCount = await getSubgraphSlotCount(comfyPage, 'outputs')
      const [vaeEncodeNode] = await comfyPage.nodeOps.getNodeRefsByType(
        'VAEEncode',
        true
@@ -61,7 +93,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
      await comfyPage.subgraph.connectToOutput(vaeEncodeNode, 0)
      await comfyPage.nextFrame()

-      const finalCount = await comfyPage.subgraph.getSlotCount('output')
+      const finalCount = await getSubgraphSlotCount(comfyPage, 'outputs')
      expect(finalCount).toBe(initialCount + 1)
    })

@@ -71,16 +103,18 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
      await subgraphNode.navigateIntoSubgraph()

-      const initialCount = await comfyPage.subgraph.getSlotCount('input')
+      const initialCount = await getSubgraphSlotCount(comfyPage, 'inputs')
      expect(initialCount).toBeGreaterThan(0)

-      await comfyPage.subgraph.removeSlot('input')
+      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 comfyPage.subgraph.getSlotCount('input')
+      const finalCount = await getSubgraphSlotCount(comfyPage, 'inputs')
      expect(finalCount).toBe(initialCount - 1)
    })

@@ -90,16 +124,18 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
      await subgraphNode.navigateIntoSubgraph()

-      const initialCount = await comfyPage.subgraph.getSlotCount('output')
+      const initialCount = await getSubgraphSlotCount(comfyPage, 'outputs')
      expect(initialCount).toBeGreaterThan(0)

-      await comfyPage.subgraph.removeSlot('output')
+      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 comfyPage.subgraph.getSlotCount('output')
+      const finalCount = await getSubgraphSlotCount(comfyPage, 'outputs')
      expect(finalCount).toBe(initialCount - 1)
    })

@@ -109,7 +145,11 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
      await subgraphNode.navigateIntoSubgraph()

-      const initialInputLabel = await comfyPage.subgraph.getSlotLabel('input')
+      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')
@@ -125,7 +165,11 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
      await comfyPage.nextFrame()

-      const newInputName = await comfyPage.subgraph.getSlotLabel('input')
+      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)
@@ -137,7 +181,11 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
      await subgraphNode.navigateIntoSubgraph()

-      const initialInputLabel = await comfyPage.subgraph.getSlotLabel('input')
+      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!)

@@ -151,7 +199,11 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
      await comfyPage.nextFrame()

-      const newInputName = await comfyPage.subgraph.getSlotLabel('input')
+      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)
@@ -163,7 +215,11 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
      await subgraphNode.navigateIntoSubgraph()

-      const initialOutputLabel = await comfyPage.subgraph.getSlotLabel('output')
+      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!)

@@ -178,7 +234,11 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
      await comfyPage.nextFrame()

-      const newOutputName = await comfyPage.subgraph.getSlotLabel('output')
+      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)
@@ -192,7 +252,11 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
      await subgraphNode.navigateIntoSubgraph()

-      const initialInputLabel = await comfyPage.subgraph.getSlotLabel('input')
+      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!)
@@ -210,7 +274,11 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
      await comfyPage.nextFrame()

-      const newInputName = await comfyPage.subgraph.getSlotLabel('input')
+      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)
@@ -224,7 +292,11 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
      await subgraphNode.navigateIntoSubgraph()

-      const initialInputLabel = await comfyPage.subgraph.getSlotLabel('input')
+      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(() => {
@@ -282,7 +354,11 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
      await comfyPage.nextFrame()

-      const newInputName = await comfyPage.subgraph.getSlotLabel('input')
+      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)
@@ -354,7 +430,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
        await comfyPage.nodeOps.getNodeRefsByTitle(NEW_SUBGRAPH_TITLE)
      expect(subgraphNodes.length).toBe(1)

-      const finalNodeCount = await comfyPage.subgraph.getNodeCount()
+      const finalNodeCount = await getGraphNodeCount(comfyPage)
      expect(finalNodeCount).toBe(1)
    })

@@ -364,11 +440,13 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
      expect(await subgraphNode.exists()).toBe(true)

-      const initialNodeCount = await comfyPage.subgraph.getNodeCount()
+      const initialNodeCount = await getGraphNodeCount(comfyPage)

-      await subgraphNode.delete()
+      await subgraphNode.click('title')
+      await comfyPage.page.keyboard.press('Delete')
+      await comfyPage.nextFrame()

-      const finalNodeCount = await comfyPage.subgraph.getNodeCount()
+      const finalNodeCount = await getGraphNodeCount(comfyPage)
      expect(finalNodeCount).toBe(initialNodeCount - 1)

      const deletedNode = await comfyPage.nodeOps.getNodeRefById('2')
@@ -445,7 +523,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
      await subgraphNode.navigateIntoSubgraph()

-      const initialNodeCount = await comfyPage.subgraph.getNodeCount()
+      const initialNodeCount = await getGraphNodeCount(comfyPage)

      const nodesInSubgraph = await comfyPage.page.evaluate(() => {
        const nodes = window.app!.canvas.graph!.nodes
@@ -466,7 +544,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
      await comfyPage.page.keyboard.press('Control+v')
      await comfyPage.nextFrame()

-      const finalNodeCount = await comfyPage.subgraph.getNodeCount()
+      const finalNodeCount = await getGraphNodeCount(comfyPage)
      expect(finalNodeCount).toBe(initialNodeCount + 1)
    })

@@ -482,20 +560,20 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
      await comfyPage.nextFrame()

      // Get initial node count
-      const initialCount = await comfyPage.subgraph.getNodeCount()
+      const initialCount = await getGraphNodeCount(comfyPage)

      // Undo
      await comfyPage.keyboard.undo()
      await comfyPage.nextFrame()

-      const afterUndoCount = await comfyPage.subgraph.getNodeCount()
+      const afterUndoCount = await getGraphNodeCount(comfyPage)
      expect(afterUndoCount).toBe(initialCount - 1)

      // Redo
      await comfyPage.keyboard.redo()
      await comfyPage.nextFrame()

-      const afterRedoCount = await comfyPage.subgraph.getNodeCount()
+      const afterRedoCount = await getGraphNodeCount(comfyPage)
      expect(afterRedoCount).toBe(initialCount)
    })
  })
@@ -565,17 +643,17 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
      await subgraphNode.navigateIntoSubgraph()
      await comfyPage.nextFrame()

-      expect(await comfyPage.subgraph.isInSubgraph()).toBe(true)
+      expect(await isInSubgraph(comfyPage)).toBe(true)
      await expect(comfyPage.page.locator(SELECTORS.breadcrumb)).toBeVisible()

      await comfyPage.workflow.loadWorkflow('default')
      await comfyPage.nextFrame()

-      expect(await comfyPage.subgraph.isInSubgraph()).toBe(false)
+      expect(await isInSubgraph(comfyPage)).toBe(false)

      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
      await comfyPage.nextFrame()
-      expect(await comfyPage.subgraph.isInSubgraph()).toBe(false)
+      expect(await isInSubgraph(comfyPage)).toBe(false)
    })

    test('Breadcrumb disappears after switching workflows while inside subgraph', async ({
@@ -672,7 +750,9 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {

      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')

-      await subgraphNode.delete()
+      await subgraphNode.click('title')
+      await comfyPage.page.keyboard.press('Delete')
+      await comfyPage.nextFrame()

      const finalCount = await comfyPage.page
        .locator(SELECTORS.domWidget)
@@ -699,7 +779,9 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
      // Navigate into subgraph (method now handles retries internally)
      await subgraphNode.navigateIntoSubgraph()

-      await comfyPage.subgraph.removeSlot('input', 'text')
+      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, {
@@ -799,19 +881,19 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
      await comfyPage.page.waitForSelector(SELECTORS.breadcrumb)

      // Verify we're in a subgraph
-      expect(await comfyPage.subgraph.isInSubgraph()).toBe(true)
+      expect(await isInSubgraph(comfyPage)).toBe(true)

      // Test that Escape no longer exits subgraph
      await comfyPage.page.keyboard.press('Escape')
      await comfyPage.nextFrame()
-      if (!(await comfyPage.subgraph.isInSubgraph())) {
+      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 comfyPage.subgraph.isInSubgraph()).toBe(false)
+      expect(await isInSubgraph(comfyPage)).toBe(false)
    })

    test('Escape prioritizes closing dialogs over exiting subgraph', async ({
@@ -825,7 +907,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
      await comfyPage.page.waitForSelector(SELECTORS.breadcrumb)

      // Verify we're in a subgraph
-      if (!(await comfyPage.subgraph.isInSubgraph())) {
+      if (!(await isInSubgraph(comfyPage))) {
        throw new Error('Not in subgraph')
      }

@@ -845,12 +927,12 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
      ).not.toBeVisible()

      // Should still be in subgraph
-      expect(await comfyPage.subgraph.isInSubgraph()).toBe(true)
+      expect(await isInSubgraph(comfyPage)).toBe(true)

      // Press Escape again - now should exit subgraph
      await comfyPage.page.keyboard.press('Escape')
      await comfyPage.nextFrame()
-      expect(await comfyPage.subgraph.isInSubgraph()).toBe(false)
+      expect(await isInSubgraph(comfyPage)).toBe(false)
    })
  })
 })
--- a/browser_tests/tests/subgraphInputSlotRename.spec.ts
+++ b/browser_tests/tests/subgraphInputSlotRename.spec.ts
@@ -2,7 +2,6 @@ import {
  comfyPageFixture as test,
  comfyExpect as expect
 } from '../fixtures/ComfyPage'
-import { SubgraphHelper } from '../fixtures/helpers/SubgraphHelper'

 const WORKFLOW = 'subgraphs/test-values-input-subgraph'
 const RENAMED_LABEL = 'my_seed'
@@ -41,7 +40,13 @@ test.describe(
      await expect(seedWidget).toBeVisible()

      // Verify widget is in the node body, not the header
-      await SubgraphHelper.expectWidgetBelowHeader(sgNode, seedWidget)
+      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
@@ -98,7 +103,15 @@ test.describe(
      const seedWidgetAfter = sgNodeAfter.getByLabel('seed', { exact: true })
      await expect(seedWidgetAfter).toBeVisible()

-      await SubgraphHelper.expectWidgetBelowHeader(sgNodeAfter, seedWidgetAfter)
+      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
+      )
    })
  }
 )
--- a/browser_tests/tests/subgraphLegacyPrefixedProxyWidgets.spec.ts
+++ b/browser_tests/tests/subgraphLegacyPrefixedProxyWidgets.spec.ts
@@ -2,7 +2,6 @@ import {
  comfyPageFixture as test,
  comfyExpect as expect
 } from '../fixtures/ComfyPage'
-import { SubgraphHelper } from '../fixtures/helpers/SubgraphHelper'
 import { TestIds } from '../fixtures/selectors'

 /**
@@ -31,7 +30,17 @@ test.describe(
    test('Loads without console warnings about failed widget resolution', async ({
      comfyPage
    }) => {
-      const { warnings } = SubgraphHelper.collectConsoleWarnings(comfyPage.page)
+      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)

--- a/browser_tests/tests/subgraphLifecycle.spec.ts
+++ b/browser_tests/tests/subgraphLifecycle.spec.ts
@@ -1,5 +1,6 @@
 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'

@@ -81,7 +82,14 @@ test.describe(
          initialWidgets
        )

-        await comfyPage.subgraph.serializeAndReload()
+        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(
@@ -90,7 +98,14 @@ test.describe(
          afterFirst
        )

-        await comfyPage.subgraph.serializeAndReload()
+        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(
@@ -147,7 +162,9 @@ test.describe(
        await subgraphNode.navigateIntoSubgraph()

        const clipNode = await comfyPage.nodeOps.getNodeRefById('10')
-        await clipNode.delete()
+        await clipNode.click('title')
+        await comfyPage.page.keyboard.press('Delete')
+        await comfyPage.nextFrame()

        await comfyPage.subgraph.exitViaBreadcrumb()

@@ -187,7 +204,9 @@ test.describe(
        await subgraphNode.navigateIntoSubgraph()

        const clipNode = await comfyPage.nodeOps.getNodeRefById('10')
-        await clipNode.delete()
+        await clipNode.click('title')
+        await comfyPage.page.keyboard.press('Delete')
+        await comfyPage.nextFrame()

        await comfyPage.subgraph.exitViaBreadcrumb()

@@ -278,9 +297,14 @@ test.describe(
        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('5')
        expect(await subgraphNode.exists()).toBe(true)

-        await subgraphNode.delete()
+        await subgraphNode.click('title')
+        await comfyPage.page.keyboard.press('Delete')
+        await comfyPage.nextFrame()

-        expect(await subgraphNode.exists()).toBe(false)
+        const nodeExists = await comfyPage.page.evaluate(() => {
+          return !!window.app!.canvas.graph!.getNodeById('5')
+        })
+        expect(nodeExists).toBe(false)

        await expect
          .poll(async () => comfyPage.subgraph.countGraphPseudoPreviewEntries())
--- a/browser_tests/tests/subgraphNestedConfigureOrder.spec.ts
+++ b/browser_tests/tests/subgraphNestedConfigureOrder.spec.ts
@@ -1,7 +1,6 @@
 import { expect } from '@playwright/test'

 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { SubgraphHelper } from '../fixtures/helpers/SubgraphHelper'

 test.describe('Nested subgraph configure order', { tag: ['@subgraph'] }, () => {
  const WORKFLOW = 'subgraphs/subgraph-nested-duplicate-ids'
@@ -9,10 +8,17 @@ test.describe('Nested subgraph configure order', { tag: ['@subgraph'] }, () => {
  test('Loads without "No link found" or "Failed to resolve legacy -1" console warnings', async ({
    comfyPage
  }) => {
-    const { warnings } = SubgraphHelper.collectConsoleWarnings(comfyPage.page, [
-      'No link found',
-      'Failed to resolve legacy -1'
-    ])
+    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)

--- a/browser_tests/tests/subgraphNestedPackValues.spec.ts
+++ b/browser_tests/tests/subgraphNestedPackValues.spec.ts
@@ -60,8 +60,29 @@ test.describe(
        await expect(textWidget).toHaveValue(/Latina female/)
      }).toPass({ timeout: 5000 })

-      // 2. Pack all interior nodes into a nested subgraph
-      await comfyPage.subgraph.packAllInteriorNodes(HOST_NODE_ID)
+      // 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)
@@ -102,8 +123,24 @@ test.describe(
      const nodeLocator = comfyPage.vueNodes.getNodeLocator(HOST_NODE_ID)
      await expect(nodeLocator).toBeVisible()

-      // Pack all interior nodes into a nested subgraph
-      await comfyPage.subgraph.packAllInteriorNodes(HOST_NODE_ID)
+      // 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 () => {
--- a/browser_tests/tests/subgraphProgressClear.spec.ts
+++ b/browser_tests/tests/subgraphProgressClear.spec.ts
@@ -13,7 +13,14 @@ test.describe(
      await comfyPage.nextFrame()

      // Find the subgraph node
-      const subgraphNodeId = await comfyPage.subgraph.findSubgraphNodeId()
+      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:
@@ -27,21 +34,26 @@ test.describe(
      await comfyPage.page.evaluate((nodeId) => {
        const node = window.app!.canvas.graph!.getNodeById(nodeId)!
        node.progress = 0.5
-      }, subgraphNodeId)
+      }, subgraphNodeId!)

      // Verify progress is set
      const progressBefore = await comfyPage.page.evaluate((nodeId) => {
        return window.app!.canvas.graph!.getNodeById(nodeId)!.progress
-      }, subgraphNodeId)
+      }, subgraphNodeId!)
      expect(progressBefore).toBe(0.5)

      // Navigate into the subgraph
-      const subgraphNode =
-        await comfyPage.nodeOps.getNodeRefById(subgraphNodeId)
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById(
+        subgraphNodeId!
+      )
      await subgraphNode.navigateIntoSubgraph()

      // Verify we're inside the subgraph
-      expect(await comfyPage.subgraph.isInSubgraph()).toBe(true)
+      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')
@@ -68,18 +80,30 @@ test.describe(
      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
      await comfyPage.nextFrame()

-      const subgraphNodeId = await comfyPage.subgraph.findSubgraphNodeId()
+      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)
+      }, subgraphNodeId!)

-      const subgraphNode =
-        await comfyPage.nodeOps.getNodeRefById(subgraphNodeId)
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById(
+        subgraphNodeId!
+      )
      await subgraphNode.navigateIntoSubgraph()

-      expect(await comfyPage.subgraph.isInSubgraph()).toBe(true)
+      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()
--- a/browser_tests/tests/subgraphPromotion.spec.ts
+++ b/browser_tests/tests/subgraphPromotion.spec.ts
@@ -1,5 +1,7 @@
 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'
@@ -70,7 +72,14 @@ test.describe(

        // Pan to SaveImage node (rightmost, may be off-screen in CI)
        const saveNode = await comfyPage.nodeOps.getNodeRefById('9')
-        await saveNode.centerOnNode()
+        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()
@@ -351,7 +360,6 @@ test.describe(
        await comfyPage.subgraph.exitViaBreadcrumb()
        await fitToViewInstant(comfyPage)
        await comfyPage.nextFrame()
-        await comfyPage.nextFrame()

        const initialWidgetCount = await getPromotedWidgetCount(comfyPage, '2')
        expect(initialWidgetCount).toBeGreaterThan(0)
@@ -464,7 +472,14 @@ test.describe(

        // Pan to SaveImage node (rightmost, may be off-screen in CI)
        const saveNode = await comfyPage.nodeOps.getNodeRefById('9')
-        await saveNode.centerOnNode()
+        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()
@@ -513,7 +528,14 @@ test.describe(
        const beforePromoted = await getPromotedWidgetNames(comfyPage, '11')
        expect(beforePromoted).toContain('text')

-        await comfyPage.subgraph.serializeAndReload()
+        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')
@@ -533,7 +555,14 @@ test.describe(
        const beforeSnapshot = await getPromotedWidgets(comfyPage, '11')
        expect(beforeSnapshot.length).toBeGreaterThan(0)

-        await comfyPage.subgraph.serializeAndReload()
+        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)
@@ -685,10 +714,15 @@ test.describe(

        // Delete the subgraph node
        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
-        await subgraphNode.delete()
+        await subgraphNode.click('title')
+        await comfyPage.page.keyboard.press('Delete')
+        await comfyPage.nextFrame()

        // Node no longer exists, so promoted widgets should be gone
-        expect(await subgraphNode.exists()).toBe(false)
+        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 ({
@@ -714,7 +748,9 @@ test.describe(
        })
        expect(removedSlotName).not.toBeNull()

-        await comfyPage.subgraph.removeSlot('input')
+        await comfyPage.subgraph.rightClickInputSlot()
+        await comfyPage.contextMenu.clickLitegraphMenuItem('Remove Slot')
+        await comfyPage.nextFrame()

        await comfyPage.subgraph.exitViaBreadcrumb()

@@ -744,7 +780,9 @@ test.describe(
        await subgraphNode.navigateIntoSubgraph()

        // Remove the text input slot
-        await comfyPage.subgraph.removeSlot('input', 'text')
+        await comfyPage.subgraph.rightClickInputSlot('text')
+        await comfyPage.contextMenu.clickLitegraphMenuItem('Remove Slot')
+        await comfyPage.nextFrame()

        // Navigate back via breadcrumb
        await comfyPage.subgraph.exitViaBreadcrumb()
--- a/browser_tests/tests/subgraphSearchAliases.spec.ts
+++ b/browser_tests/tests/subgraphSearchAliases.spec.ts
@@ -4,8 +4,19 @@ import type { ComfyPage } from '../fixtures/ComfyPage'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'

 async function createSubgraphAndNavigateInto(comfyPage: ComfyPage) {
-  const subgraphNode =
-    await comfyPage.subgraph.convertDefaultKSamplerToSubgraph()
+  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]
+
  await subgraphNode.navigateIntoSubgraph()
  return subgraphNode
 }
--- a/browser_tests/tests/subgraphViewport.spec.ts
+++ b/browser_tests/tests/subgraphViewport.spec.ts
@@ -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)
-        ]
-      })
-  })
-})
--- a/browser_tests/tests/templates.spec.ts
+++ b/browser_tests/tests/templates.spec.ts
@@ -2,7 +2,6 @@ import type { Page } from '@playwright/test'
 import { expect } from '@playwright/test'

 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'

 async function checkTemplateFileExists(
  page: Page,
@@ -33,11 +32,7 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
    }
  })

-  // 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).
+  // TODO: Re-enable this test once issue resolved
  // https://github.com/Comfy-Org/ComfyUI_frontend/issues/3992
  test.skip('should have all required thumbnail media for each template', async ({
    comfyPage
@@ -77,9 +72,9 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
    // Clear the workflow
    await comfyPage.menu.workflowsTab.open()
    await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
-    await expect
-      .poll(() => comfyPage.nodeOps.getGraphNodesCount(), { timeout: 250 })
-      .toBe(0)
+    await expect(async () => {
+      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
+    }).toPass({ timeout: 250 })

    // Load a template
    await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
@@ -92,9 +87,9 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
    await expect(comfyPage.templates.content).toBeHidden()

    // Ensure we now have some nodes
-    await expect
-      .poll(() => comfyPage.nodeOps.getGraphNodesCount(), { timeout: 250 })
-      .toBeGreaterThan(0)
+    await expect(async () => {
+      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBeGreaterThan(0)
+    }).toPass({ timeout: 250 })
  })

  test('dialog should be automatically shown to first-time users', async ({
@@ -107,7 +102,7 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
    await comfyPage.setup({ clearStorage: true })

    // Expect the templates dialog to be shown
-    await expect(comfyPage.templates.content).toBeVisible({ timeout: 5000 })
+    expect(await comfyPage.templates.content.isVisible()).toBe(true)
  })

  test('Uses proper locale files for templates', async ({ comfyPage }) => {
@@ -346,71 +341,4 @@ 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({ timeout: 5000 })
-      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'
-      )
-    }
-  )
 })
--- 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
--- a/browser_tests/tests/vueNodes/interactions/node/imagePreview.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/node/imagePreview.spec.ts
@@ -25,37 +25,37 @@ test.describe('Vue Nodes Image Preview', () => {
      dropPosition: { x, y }
    })

-    const nodeId = String(loadImageNode.id)
-    const imagePreview = comfyPage.vueNodes
-      .getNodeLocator(nodeId)
-      .locator('.image-preview')
-
+    const imagePreview = comfyPage.page.locator('.image-preview')
    await expect(imagePreview).toBeVisible()
-    await expect(imagePreview.locator('img')).toBeVisible({ timeout: 30_000 })
+    await expect(imagePreview.locator('img')).toBeVisible()
    await expect(imagePreview).toContainText('x')

    return {
      imagePreview,
-      nodeId
+      nodeId: String(loadImageNode.id)
    }
  }

-  test('opens mask editor from image preview button', async ({ comfyPage }) => {
+  // TODO(#8143): Re-enable after image preview sync is working in CI
+  test.fixme('opens mask editor from image preview button', async ({
+    comfyPage
+  }) => {
    const { imagePreview } = await loadImageOnNode(comfyPage)

-    await imagePreview.getByRole('region').hover()
+    await imagePreview.locator('[role="img"]').focus()
    await comfyPage.page.getByLabel('Edit or mask image').click()

    await expect(comfyPage.page.locator('.mask-editor-dialog')).toBeVisible()
  })

-  test('shows image context menu options', async ({ comfyPage }) => {
+  // TODO(#8143): Re-enable after image preview sync is working in CI
+  test.fixme('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')
--- a/browser_tests/tests/widget.spec.ts
+++ b/browser_tests/tests/widget.spec.ts
@@ -76,9 +76,10 @@ test.describe('Combo text widget', { tag: ['@screenshot', '@widget'] }, () => {
    await comfyPage.page.keyboard.press('r')

    // Wait for nodes' widgets to be updated
-    await expect
-      .poll(() => getComboValues(), { timeout: 5000 })
-      .not.toEqual(initialComboValues)
+    await expect(async () => {
+      const refreshedComboValues = await getComboValues()
+      expect(refreshedComboValues).not.toEqual(initialComboValues)
+    }).toPass({ timeout: 5000 })
  })

  test('Should refresh combo values of nodes with v2 combo input spec', async ({
@@ -184,9 +185,7 @@ 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', {
-      maxDiffPixels: 50
-    })
+    await expect(comfyPage.canvas).toHaveScreenshot('load_image_widget.png')
  })

  test('Can drag and drop image', async ({ comfyPage }) => {
@@ -228,23 +227,14 @@ 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()

-    // Wait for the image to load from the server
-    await imageLoaded
+    // Stabilization for the image swap
    await comfyPage.nextFrame()

    // Expect the image preview to change automatically
    await expect(comfyPage.canvas).toHaveScreenshot(
-      'image_preview_changed_by_combo_value.png',
-      { maxDiffPixels: 50 }
+      'image_preview_changed_by_combo_value.png'
    )

    // Expect the filename combo value to be updated
@@ -283,6 +273,38 @@ 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')

@@ -337,11 +359,9 @@ test.describe(
        },
        [loadAnimatedWebpNode.id, saveAnimatedWebpNode.id]
      )
-      await comfyPage.nextFrame()
-      await comfyPage.nextFrame()
      await expect(
        comfyPage.page.locator('.dom-widget').locator('img')
-      ).toHaveCount(2, { timeout: 10_000 })
+      ).toHaveCount(2)
    })
  }
 )
--- a/browser_tests/tests/workflowTabThumbnail.spec.ts
+++ b/browser_tests/tests/workflowTabThumbnail.spec.ts
@@ -90,12 +90,10 @@ test.describe('Workflow Tab Thumbnails', { tag: '@workflow' }, () => {
    const canvasArea = await comfyPage.canvas.boundingBox()

    await comfyPage.page.mouse.move(
-      canvasArea!.x + canvasArea!.width / 2,
-      canvasArea!.y + canvasArea!.height / 2
-    )
-    await expect(comfyPage.page.locator('.workflow-popover-fade')).toHaveCount(
-      0
+      canvasArea!.x + canvasArea!.width - 100,
+      100
    )
+    await expect(comfyPage.page.locator('.workflow-popover-fade')).toBeHidden()

    await comfyPage.canvasOps.rightClick(200, 200)
    await comfyPage.page.getByText('Add Node').click()
--- a/browser_tests/tests/zoomControls.spec.ts
+++ b/browser_tests/tests/zoomControls.spec.ts
@@ -100,7 +100,7 @@ test.describe('Zoom Controls', { tag: '@canvas' }, () => {
    await comfyPage.nextFrame()

    await expect
-      .poll(() => comfyPage.canvasOps.getScale(), { timeout: 5000 })
+      .poll(() => comfyPage.canvasOps.getScale(), { timeout: 2000 })
      .toBeCloseTo(1.0, 1)

    const zoomIn = comfyPage.page.getByTestId(TestIds.canvas.zoomInAction)
--- a/docs/guidance/playwright.md
+++ b/docs/guidance/playwright.md
@@ -75,30 +75,6 @@ await page.evaluate(() => {
 // Keep app.extensionManager typed as ExtensionManager, not WorkspaceStore
 ```

-## Assertion Best Practices
-
-When a test depends on an invariant unrelated to what it's actually testing (e.g. asserting a node has 4 widgets before testing node movement), always assert that invariant explicitly — don't leave it unchecked. Use a custom message or `expect.soft()` rather than a bare `expect`, so failures point to the broken assumption instead of producing a confusing error downstream.
-
-```typescript
-// ✅ Custom message on an unrelated precondition — clear signal when the invariant breaks
-expect(node.widgets, 'Widget count changed — update test fixture').toHaveLength(
-  4
-)
-await node.move(100, 200)
-
-// ✅ Soft assertion — verifies multiple invariants without stopping the test early
-expect.soft(menuItem1).toBeVisible()
-expect.soft(menuItem2).toBeVisible()
-expect.soft(menuItem3).toBeVisible()
-
-// ❌ Bare expect on a precondition — no context when it fails
-expect(node.widgets).toHaveLength(4)
-```
-
- Use custom messages (`expect(x, 'reason')`) for precondition checks unrelated to the test's purpose
- Use `expect.soft()` when you want to verify multiple invariants without aborting on the first failure
- Prefer Playwright's built-in message parameter over custom error classes
-
 ## Test Tags

 Tags are respected by config:
@@ -110,7 +86,6 @@ Tags are respected by config:

 - Check `browser_tests/assets/` for test data and fixtures
 - Use realistic ComfyUI workflows for E2E tests
- When multiple nodes share the same title (e.g. two "CLIP Text Encode" nodes), use `vueNodes.getNodeByTitle(name).nth(n)` to pick a specific one. Never interact with the bare locator when titles are non-unique — Playwright strict mode will fail.

 ## Running Tests

--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -64,13 +64,6 @@ 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: [
@@ -363,14 +356,6 @@ 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
  {
@@ -385,8 +370,7 @@ export default defineConfig([
              importNames: ['t', 'd', 'te'],
              message:
                "In Vue components, use `const { t } = useI18n()` instead of importing from '@/i18n'."
-            },
-            useVirtualListRestriction
+            }
          ]
        }
      ]
@@ -406,23 +390,10 @@ 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]
-        }
-      ]
-    }
  }
 ])
--- a/knip.config.ts
+++ b/knip.config.ts
@@ -38,9 +38,6 @@ const config: KnipConfig = {
      ],
      project: ['src/**/*.{astro,vue,ts}', '*.{js,ts,mjs}'],
      ignoreDependencies: ['@comfyorg/design-system', '@vercel/analytics']
-    },
-    'tools/test-recorder': {
-      project: ['src/**/*.ts']
    }
  },
  ignoreBinaries: ['python3'],
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@comfyorg/comfyui-frontend",
-  "version": "1.43.8",
+  "version": "1.43.7",
  "private": true,
  "description": "Official front-end implementation of ComfyUI",
  "homepage": "https://comfy.org",
@@ -36,13 +36,13 @@
    "lint:desktop": "nx run @comfyorg/desktop-ui:lint",
    "locale": "lobe-i18n locale",
    "oxlint": "oxlint src --type-aware",
+    "preinstall": "pnpm dlx only-allow pnpm",
    "prepare": "husky || true && git config blame.ignoreRevsFile .git-blame-ignore-revs || true",
    "preview": "nx preview",
    "storybook": "nx storybook",
    "storybook:desktop": "nx run @comfyorg/desktop-ui:storybook",
    "stylelint:fix": "stylelint --cache --fix '{apps,packages,src}/**/*.{css,vue}'",
    "stylelint": "stylelint --cache '{apps,packages,src}/**/*.{css,vue}'",
-    "comfy-test": "tsx tools/test-recorder/src/index.ts",
    "test:browser": "pnpm exec nx e2e",
    "test:browser:local": "cross-env PLAYWRIGHT_LOCAL=1 PLAYWRIGHT_TEST_URL=http://localhost:5173 pnpm test:browser",
    "test:unit": "nx run test",
@@ -200,21 +200,11 @@
    "zod-to-json-schema": "catalog:"
  },
  "engines": {
-    "node": "24.x",
-    "pnpm": ">=10"
+    "node": "24.x"
  },
-  "packageManager": "pnpm@10.33.0",
  "pnpm": {
    "overrides": {
      "vite": "catalog:"
-    },
-    "ignoredBuiltDependencies": [
-      "@firebase/util",
-      "core-js",
-      "protobufjs",
-      "sharp",
-      "unrs-resolver",
-      "vue-demi"
-    ]
+    }
  }
 }
--- a/packages/design-system/src/css/_palette.css
+++ b/packages/design-system/src/css/_palette.css
@@ -1,38 +0,0 @@
-@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);
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
dante01yoon	2b6fc1f97e	fix(assets-e2e): replace waitForTimeout with state-based wait Replace the last remaining waitForTimeout(200) with contextmenu visibility assertion for deterministic test behavior.	2026-03-28 13:44:09 +09:00
dante01yoon	d2808f07b9	fix(assets-e2e): fix grid view toggle and bulk right-click tests - Don't re-call openSettingsMenu() when popover is still open - Add force: true to bulk context menu right-click	2026-03-28 12:27:58 +09:00
dante01yoon	9280446288	refactor(assets-e2e): use UI interactions instead of workarounds - Replace localStorage manipulation with settings menu for grid/list view toggle - Replace dispatchEvent('contextmenu') with Playwright native right-click	2026-03-28 12:15:15 +09:00
dante01yoon	1afcf2e1bb	refactor(assets-e2e): address Myestery review feedback - Add data-testid to footer delete/download buttons in AssetsSidebarTab.vue - Use testId selectors with icon-based fallback for footer buttons - Dismiss toasts by clicking close buttons instead of DOM removal - Use Playwright ControlOrMeta modifier instead of process.platform check - Keep evaluate-based click for tab switching (explained in PR comment)	2026-03-28 08:53:00 +09:00
dante01yoon	aa47be0598	refactor(assets-e2e): address CodeRabbit review feedback - Replace all waitForTimeout() calls with state-based waits using locator assertions (toBeVisible, toHaveCount, toPass) - Replace test.skip() guards with direct assertions since mock data is fully controlled - Use locator wait for context menu visibility after right-click	2026-03-27 23:49:09 +09:00
dante01yoon	b4ddb07166	fix(assets-e2e): resolve toast overlay, tab switching, and popover issues - Dismiss toast notifications via DOM removal before sidebar interactions - Use evaluate-based click for tab switching to bypass toolbar overlay - Fix settings popover re-open by using localStorage for grid view restore - Use icon-based selectors for footer buttons to handle compact mode - Use dispatchEvent for bulk context menu right-click	2026-03-27 23:45:46 +09:00
dante01yoon	bbb12e35ea	test(assets-sidebar): add comprehensive E2E tests for Assets browser panel Extend AssetsSidebarTab page object with selectors for search, view mode, asset cards, selection footer, context menu, and folder view navigation. Add mock data factories (createMockJob, createMockJobs, createMockImportedFiles) to AssetsHelper for generating realistic test fixtures. Write 30 E2E test cases across 10 categories: empty states, tab navigation, grid/list view display, view mode toggle, search filtering, asset selection (single/multi), context menu actions, bulk footer actions, pagination, and settings menu visibility.	2026-03-27 23:02:07 +09:00
				`@@ -1 +0,0 @@`
				<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>
				`@@ -1 +0,0 @@`
				`<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>`