Merge branch 'main' into glary/replace-delay-with-retrying-assertions

fix: add fast-fail timeout to inner toBeHidden assertion
The inner toBeHidden() had a 5s default timeout that consumed the entire toPass budget, preventing retry intervals from firing. Adding { timeout: 200 } makes the assertion fail fast so toPass retries at 300ms/500ms/1000ms — the 300ms+ retries land after the dialog's 266ms debounce window.
2026-04-17 21:21:06 +00:00 · 2026-04-08 11:29:47 -07:00 · 2026-04-08 06:26:47 +00:00 · 2026-04-08 05:53:54 +00:00 · 2026-04-08 05:20:02 +00:00 · 2026-04-08 04:49:19 +00:00
598 changed files with 16684 additions and 31867 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/settings.json
+++ b/.claude/settings.json
@@ -1,86 +1,9 @@
 {
-  "hooks": {
-    "PreToolUse": [
-      {
-        "matcher": "Bash",
-        "hooks": [
-          {
-            "type": "command",
-            "if": "Bash(tsc *)",
-            "command": "echo 'Use `pnpm typecheck` instead of running tsc directly.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(vue-tsc *)",
-            "command": "echo 'Use `pnpm typecheck` instead of running vue-tsc directly.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(npx tsc *)",
-            "command": "echo 'Use `pnpm typecheck` instead of running tsc via npx.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(pnpx tsc *)",
-            "command": "echo 'Use `pnpm typecheck` instead of running tsc via pnpx.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(pnpm exec tsc *)",
-            "command": "echo 'Use `pnpm typecheck` instead of `pnpm exec tsc`.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(npx vitest *)",
-            "command": "echo 'Use `pnpm test:unit` (or `pnpm test:unit -- <path>`) instead of npx vitest.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(pnpx vitest *)",
-            "command": "echo 'Use `pnpm test:unit` (or `pnpm test:unit -- <path>`) instead of pnpx vitest.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(npx eslint *)",
-            "command": "echo 'Use `pnpm lint` or `pnpm lint:fix` instead of npx eslint.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(pnpx eslint *)",
-            "command": "echo 'Use `pnpm lint` or `pnpm lint:fix` instead of pnpx eslint.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(npx prettier *)",
-            "command": "echo 'This project uses oxfmt, not prettier. Use `pnpm format` or `pnpm format:check`.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(pnpx prettier *)",
-            "command": "echo 'This project uses oxfmt, not prettier. Use `pnpm format` or `pnpm format:check`.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(npx oxlint *)",
-            "command": "echo 'Use `pnpm oxlint` instead of npx oxlint.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(npx stylelint *)",
-            "command": "echo 'Use `pnpm stylelint` instead of npx stylelint.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(npx knip *)",
-            "command": "echo 'Use `pnpm knip` instead of npx knip.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(pnpx knip *)",
-            "command": "echo 'Use `pnpm knip` instead of pnpx knip.' >&2 && exit 2"
-          }
-        ]
-      }
+  "permissions": {
+    "allow": [
+      "Bash(pnpx vitest run --testPathPattern=\"draftCacheV2.property\")",
+      "Bash(pnpx vitest run \"draftCacheV2.property\")",
+      "Bash(node -e \"const fc = require\\(''fast-check''\\); console.log\\(Object.keys\\(fc\\).filter\\(k => k.includes\\(''string''\\)\\).join\\('', ''\\)\\)\")"
    ]
  }
 }
--- a/.claude/skills/codegen-transform/SKILL.md
+++ b/.claude/skills/codegen-transform/SKILL.md
@@ -1,95 +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
-
-## Reference Documentation
-
-Before transforming, read these existing docs for full context:
-
-| Document                              | What it covers                                                          |
-| ------------------------------------- | ----------------------------------------------------------------------- |
-| `docs/guidance/playwright.md`         | Playwright conventions, type assertions, assertion best practices, tags |
-| `browser_tests/AGENTS.md`             | Directory structure, polling assertions, gotchas, quality checks        |
-| `browser_tests/fixtures/ComfyPage.ts` | Main fixture API (source of truth for all helpers)                      |
-| `browser_tests/fixtures/helpers/`     | Focused helper classes (canvas, keyboard, workflow, etc.)               |
-
-## Transform Rules
-
-The programmatic transform engine lives in `tools/test-recorder/src/transform/rules.ts`. 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                |
-
-## 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.
-
-## 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                       |
-
-## 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/.claude/skills/hardening-flaky-e2e-tests/SKILL.md
+++ b/.claude/skills/hardening-flaky-e2e-tests/SKILL.md
@@ -1,246 +0,0 @@
---
-name: hardening-flaky-e2e-tests
-description: 'Diagnoses and fixes flaky Playwright e2e tests by replacing race-prone patterns with retry-safe alternatives. Use when triaging CI flakes, hardening spec files, fixing timing races, or asked to stabilize browser tests. Triggers on: flaky, flake, harden, stabilize, race condition in e2e, intermittent failure.'
---
-
-# Hardening Flaky E2E Tests
-
-Fix flaky Playwright specs by identifying race-prone patterns and replacing them with retry-safe alternatives. This skill covers diagnosis, pattern matching, and mechanical transforms — not writing new tests (see `writing-playwright-tests` for that).
-
-## Workflow
-
-### 1. Gather CI Evidence
-
-```bash
-gh run list --workflow=ci-test.yaml --limit=5
-gh run download <run-id> -n playwright-report
-```
-
- Open `report.json` and search for `"status": "flaky"` entries.
- Collect file paths, test titles, and error messages.
- Do NOT trust green checks alone — flaky tests that passed on retry still need fixing.
- Use `error-context.md`, traces, and page snapshots before editing code.
- Pull the newest run after each push instead of assuming the flaky set is unchanged.
-
-### 2. Classify the Flake
-
-Read the failing assertion and match it against the pattern table. Most flakes fall into one of these categories:
-
-| #   | Pattern                               | Signature in Code                                         | Fix                                                              |
-| --- | ------------------------------------- | --------------------------------------------------------- | ---------------------------------------------------------------- |
-| 1   | **Snapshot-then-assert**              | `expect(await evaluate()).toBe(x)`                        | `await expect.poll(() => evaluate()).toBe(x)`                    |
-| 2   | **Immediate count**                   | `const n = await loc.count(); expect(n).toBe(3)`          | `await expect(loc).toHaveCount(3)`                               |
-| 3   | **nextFrame after menu click**        | `clickMenuItem(x); nextFrame()`                           | `clickMenuItem(x); contextMenu.waitForHidden()`                  |
-| 4   | **Tight poll timeout**                | `expect.poll(..., { timeout: 250 })`                      | ≥2000 ms; prefer default 5000 ms                                 |
-| 5   | **Immediate evaluate after mutation** | `setSetting(k, v); expect(await evaluate()).toBe(x)`      | `await expect.poll(() => evaluate()).toBe(x)`                    |
-| 6   | **Screenshot without readiness**      | `loadWorkflow(); nextFrame(); toHaveScreenshot()`         | `waitForNodes()` or poll state first                             |
-| 7   | **Non-deterministic node order**      | `getNodeRefsByType('X')[0]` with >1 match                 | `getNodeRefById(id)` or guard `toHaveLength(1)`                  |
-| 8   | **Fake readiness helper**             | Helper clicks but doesn't assert state                    | Remove; poll the actual value                                    |
-| 9   | **Immediate graph state after drop**  | `expect(await getLinkCount()).toBe(1)`                    | `await expect.poll(() => getLinkCount()).toBe(1)`                |
-| 10  | **Immediate boundingBox/layout read** | `const box = await loc.boundingBox(); expect(box!.width)` | `await expect.poll(() => loc.boundingBox().then(b => b?.width))` |
-
-### 3. Apply the Transform
-
-#### Rule: Choose the Smallest Correct Assertion
-
- **Locator state** → use built-in retrying assertions: `toBeVisible()`, `toHaveText()`, `toHaveCount()`, `toHaveClass()`
- **Single async value** → `expect.poll(() => asyncFn()).toBe(expected)`
- **Multiple assertions that must settle together** → `expect(async () => { ... }).toPass()`
- **Never** use `waitForTimeout()` to hide a race.
-
-```typescript
-// ✅ Single value — use expect.poll
-await expect
-  .poll(() => comfyPage.page.evaluate(() => window.app!.graph.links.length))
-  .toBe(3)
-
-// ✅ Locator count — use toHaveCount
-await expect(comfyPage.page.locator('.dom-widget')).toHaveCount(2)
-
-// ✅ Multiple conditions — use toPass
-await expect(async () => {
-  expect(await node1.getValue()).toBe('foo')
-  expect(await node2.getValue()).toBe('bar')
-}).toPass({ timeout: 5000 })
-```
-
-#### Rule: Wait for the Real Readiness Boundary
-
-Visible is not always ready. Prefer user-facing assertions when possible; poll internal state only when there is no UI surface to assert on.
-
-Common readiness boundaries:
-
-| After this action...                   | Wait for...                                                  |
-| -------------------------------------- | ------------------------------------------------------------ |
-| Canvas interaction (drag, click node)  | `await comfyPage.nextFrame()`                                |
-| Menu item click                        | `await contextMenu.waitForHidden()`                          |
-| Workflow load                          | `await comfyPage.workflow.loadWorkflow(...)` (built-in wait) |
-| Settings write                         | Poll the setting value with `expect.poll()`                  |
-| Node pin/bypass/collapse toggle        | `await expect.poll(() => nodeRef.isPinned()).toBe(true)`     |
-| Graph mutation (add/remove node, link) | Poll link/node count                                         |
-| Clipboard write                        | Poll pasted value                                            |
-| Screenshot                             | Ensure nodes are rendered: `waitForNodes()` or poll state    |
-
-#### Rule: Expose Locators for Retrying Assertions
-
-When a helper returns a count via `await loc.count()`, callers can't use `toHaveCount()`. Expose the underlying `Locator` as a getter so callers choose between:
-
-```typescript
-// Helper exposes locator
-get domWidgets(): Locator {
-  return this.page.locator('.dom-widget')
-}
-
-// Caller uses retrying assertion
-await expect(comfyPage.domWidgets).toHaveCount(2)
-```
-
-Replace count methods with locator getters so callers can use retrying assertions directly.
-
-#### Rule: Fix Check-then-Act Races in Helpers
-
-```typescript
-// ❌ Race: count can change between check and waitFor
-const count = await locator.count()
-if (count > 0) {
-  await locator.waitFor({ state: 'hidden' })
-}
-
-// ✅ Direct: waitFor handles both cases
-await locator.waitFor({ state: 'hidden' })
-```
-
-#### Rule: Remove force:true from Clicks
-
-`force: true` bypasses actionability checks, hiding real animation/visibility races. Remove it and fix the underlying timing issue.
-
-```typescript
-// ❌ Hides the race
-await closeButton.click({ force: true })
-
-// ✅ Surfaces the real issue — fix with proper wait
-await closeButton.click()
-await dialog.waitForHidden()
-```
-
-#### Rule: Handle Non-deterministic Element Order
-
-When `getNodeRefsByType` returns multiple nodes, the order is not guaranteed. Don't use index `[0]` blindly.
-
-```typescript
-// ❌ Assumes order
-const node = (await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode'))[0]
-
-// ✅ Find by ID or proximity
-const nodes = await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
-let target = nodes[0]
-for (const n of nodes) {
-  const pos = await n.getPosition()
-  if (Math.abs(pos.y - expectedY) < minDist) target = n
-}
-```
-
-Or guard the assumption:
-
-```typescript
-const nodes = await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
-expect(nodes).toHaveLength(1)
-const node = nodes[0]
-```
-
-#### Rule: Use toPass for Timing-sensitive Dismiss Guards
-
-Some UI elements (e.g. LiteGraph's graphdialog) have built-in dismiss delays. Retry the entire dismiss action:
-
-```typescript
-// ✅ Retry click+assert together
-await expect(async () => {
-  await comfyPage.canvas.click({ position: { x: 10, y: 10 } })
-  await expect(dialog).toBeHidden({ timeout: 500 })
-}).toPass({ timeout: 5000 })
-```
-
-### 4. Keep Changes Narrow
-
- Shared helpers should drive setup to a stable boundary.
- Do not encode one-spec timing assumptions into generic helpers.
- If a race only matters to one spec, prefer a local wait in that spec.
- If a helper fails before the real test begins, remove or relax the brittle precondition and let downstream UI interaction prove readiness.
-
-### 5. Verify Narrowly
-
-```bash
-# Targeted rerun with repetition
-pnpm test:browser:local -- browser_tests/tests/myFile.spec.ts --repeat-each 10
-
-# Single test by line number (avoids grep quoting issues on Windows)
-pnpm test:browser:local -- browser_tests/tests/myFile.spec.ts:42
-```
-
- Use `--repeat-each 10` for targeted flake verification (use 20 for single test cases).
- Verify with the smallest command that exercises the flaky path.
-
-### 6. Watch CI E2E Runs
-
-After pushing, use `gh` to monitor the E2E workflow:
-
-```bash
-# Find the run for the current branch
-gh run list --workflow="CI: Tests E2E" --branch=$(git branch --show-current) --limit=1
-
-# Watch it live (blocks until complete, streams logs)
-gh run watch <run-id>
-
-# One-liner: find and watch the latest E2E run for the current branch
-gh run list --workflow="CI: Tests E2E" --branch=$(git branch --show-current) --limit=1 --json databaseId --jq ".[0].databaseId" | xargs gh run watch
-```
-
-On Windows (PowerShell):
-
-```powershell
-# One-liner equivalent
-gh run watch (gh run list --workflow="CI: Tests E2E" --branch=$(git branch --show-current) --limit=1 --json databaseId --jq ".[0].databaseId")
-```
-
-After the run completes:
-
-```bash
-# Download the Playwright report artifact
-gh run download <run-id> -n playwright-report
-
-# View the run summary in browser
-gh run view <run-id> --web
-```
-
-Also watch the unit test workflow in parallel if you changed helpers:
-
-```bash
-gh run list --workflow="CI: Tests Unit" --branch=$(git branch --show-current) --limit=1
-```
-
-### 7. Pre-merge Checklist
-
-Before merging a flaky-test fix, confirm:
-
- [ ] The latest CI artifact was inspected directly
- [ ] The root cause is stated as a race or readiness mismatch
- [ ] The fix waits on the real readiness boundary
- [ ] The assertion primitive matches the job (poll vs toHaveCount vs toPass)
- [ ] The fix stays local unless a shared helper truly owns the race
- [ ] Local verification uses a targeted rerun
- [ ] No behavioral changes to the test — only timing/retry strategy updated
-
-## Local Noise — Do Not Fix
-
-These are local distractions, not CI root causes:
-
- Missing local input fixture files required by the test path
- Missing local models directory
- Teardown `EPERM` while restoring the local browser-test user data directory
- Local screenshot baseline differences on Windows
-
-Rules:
-
- First confirm whether it blocks the exact flaky path under investigation.
- Do not commit temporary local assets used only for verification.
- Do not commit local screenshot baselines.
--- a/.claude/skills/ticket-intake/SKILL.md
+++ b/.claude/skills/ticket-intake/SKILL.md
@@ -0,0 +1,361 @@
+---
+name: ticket-intake
+description: 'Parse ticket URL (Notion or GitHub), extract all data, initialize pipeline run. Use when starting work on a new ticket or when asked to pick up a ticket.'
+---
+
+# Ticket Intake
+
+Parses a ticket URL from supported sources (Notion or GitHub), extracts all relevant information, and creates a ticket in the pipeline API.
+
+> **🚨 CRITICAL REQUIREMENT**: This skill MUST register the ticket in the Pipeline API and update the source (Notion/GitHub). If these steps are skipped, the entire pipeline breaks. See [Mandatory API Calls](#mandatory-api-calls-execute-all-three) below.
+
+## Supported Sources
+
+| Source | URL Pattern                                         | Provider File         |
+| ------ | --------------------------------------------------- | --------------------- |
+| Notion | `https://notion.so/...` `https://www.notion.so/...` | `providers/notion.md` |
+| GitHub | `https://github.com/{owner}/{repo}/issues/{n}`      | `providers/github.md` |
+
+## Quick Start
+
+When given a ticket URL:
+
+1. **Detect source type** from URL pattern
+2. **Load provider-specific logic** from `providers/` directory
+3. Fetch ticket content via appropriate API
+4. Extract and normalize properties to common schema
+5. **Register ticket in pipeline API** ← MANDATORY
+6. **Update source** (Notion status / GitHub comment) ← MANDATORY
+7. **Run verification script** to confirm API registration
+8. Output summary and handoff to `research-orchestrator`
+
+## Configuration
+
+Uses the **production API** by default. No configuration needed for read operations.
+
+**Defaults (no setup required):**
+
+- API URL: `https://api-gateway-856475788601.us-central1.run.app`
+- Read-only endpoints at `/public/*` require no authentication
+
+**For write operations** (transitions, creating tickets), set:
+
+```bash
+export PIPELINE_API_KEY="..."  # Get from GCP Secret Manager or ask admin
+```
+
+**Optional (for local working artifacts):**
+
+```bash
+PIPELINE_DIR="${PIPELINE_DIR:-$HOME/repos/ticket-to-pr-pipeline}"
+```
+
+## Mandatory API Calls (Execute ALL Three)
+
+**⚠️ These three API calls are the ENTIRE POINT of this skill. Without them, the ticket is invisible to the pipeline, downstream skills will fail, and Notion status won't update.**
+
+**You MUST make these HTTP requests.** Use `curl` from bash — do not just read this as documentation.
+
+### Call 1: Create Ticket
+
+```bash
+API_URL="${PIPELINE_API_URL:-https://api-gateway-856475788601.us-central1.run.app}"
+API_KEY="${PIPELINE_API_KEY}"
+
+curl -s -X POST "${API_URL}/v1/tickets" \
+  -H "Authorization: Bearer ${API_KEY}" \
+  -H "Content-Type: application/json" \
+  -H "X-Agent-ID: ${AGENT_ID:-amp-agent}" \
+  -d '{
+    "notion_page_id": "NOTION_PAGE_UUID_HERE",
+    "title": "TICKET_TITLE_HERE",
+    "source": "notion",
+    "metadata": {
+      "description": "DESCRIPTION_HERE",
+      "priority": "High",
+      "labels": [],
+      "acceptanceCriteria": []
+    }
+  }'
+```
+
+Save the returned `id` — you need it for the next two calls.
+
+### Call 2: Transition to RESEARCH
+
+```bash
+TICKET_ID="id-from-step-1"
+
+curl -s -X POST "${API_URL}/v1/tickets/${TICKET_ID}/transition" \
+  -H "Authorization: Bearer ${API_KEY}" \
+  -H "Content-Type: application/json" \
+  -H "X-Agent-ID: ${AGENT_ID:-amp-agent}" \
+  -d '{
+    "to_state": "RESEARCH",
+    "reason": "Intake complete, starting research"
+  }'
+```
+
+### Call 3: Queue Source Update
+
+```bash
+curl -s -X POST "${API_URL}/v1/sync/queue" \
+  -H "Authorization: Bearer ${API_KEY}" \
+  -H "Content-Type: application/json" \
+  -H "X-Agent-ID: ${AGENT_ID:-amp-agent}" \
+  -d '{
+    "ticket_id": "TICKET_ID_HERE",
+    "action": "update_status",
+    "payload": { "status": "In Progress" },
+    "priority": "normal"
+  }'
+```
+
+> **Note:** The action MUST be `"update_status"` (not `"UPDATE_NOTION_STATUS"`). Valid actions: `update_status`, `update_pr_url`, `mark_done`.
+
+### TypeScript Equivalent (if using pipeline client)
+
+```typescript
+import { PipelineClient } from '@pipeline/client'
+
+const client = new PipelineClient({
+  apiUrl:
+    process.env.PIPELINE_API_URL ||
+    'https://api-gateway-856475788601.us-central1.run.app',
+  agentId: process.env.AGENT_ID!
+})
+
+const ticket = await client.createTicket({
+  notion_page_id: pageId,
+  title: ticketTitle,
+  source: 'notion',
+  metadata: { description, priority, labels, acceptanceCriteria }
+})
+
+await client.transitionState(
+  ticket.id,
+  'RESEARCH',
+  'Intake complete, starting research'
+)
+
+await client.queueSync(ticket.id, 'update_status', { status: 'In Progress' })
+```
+
+## Workflow
+
+### Step 1: Detect Source Type
+
+Parse the URL to determine source:
+
+```javascript
+if (url.includes('notion.so')) {
+  source = 'notion'
+  // Load providers/notion.md
+} else if (url.match(/github\.com\/[^\/]+\/[^\/]+\/issues\/\d+/)) {
+  source = 'github'
+  // Load providers/github.md
+} else {
+  // Error: Unsupported URL format
+}
+```
+
+### Step 2: Load Provider and Fetch Data
+
+Read the appropriate provider file for source-specific instructions:
+
+- **Notion**: `providers/notion.md` - Uses Notion MCP, handles Slack links
+- **GitHub**: `providers/github.md` - Uses `gh` CLI, handles Dosu comments
+
+Follow the provider's instructions for:
+
+- Fetching content
+- Extracting properties
+- **Updating the source** (Notion status → "In Progress", Assignee → pipeline owner)
+
+### Step 3: Normalize to Common Schema
+
+All providers must extract normalized ticket data following `schema.md`:
+
+```json
+{
+  "id": "abc12345",
+  "url": "https://...",
+  "source": "notion | github",
+  "title": "Ticket title",
+  "description": "Full description",
+  "status": "Not Started",
+  "assignee": "username",
+  "priority": "High",
+  "area": "UI",
+  "labels": ["bug", "frontend"],
+  "acceptanceCriteria": ["Criterion 1", "Criterion 2"],
+  "fetchedAt": "2024-01-15T10:30:00Z"
+}
+```
+
+### Step 4: Register Ticket in Pipeline API (MANDATORY — DO NOT SKIP)
+
+**Execute all three API calls from [Mandatory API Calls](#mandatory-api-calls-execute-all-three) above.**
+
+This is not optional. This is not documentation. You MUST make these HTTP requests right now.
+
+1. `createTicket()` → save the returned ticket ID
+2. `transitionState(id, 'RESEARCH')` → confirm state changed
+3. `queueSync(id, 'update_status', { status: 'In Progress' })` → confirm queued
+
+**If any call fails**, retry once. If it still fails, report the error prominently — do NOT silently continue.
+
+### Step 5: Run Verification Script
+
+After making the API calls, run the verification script to confirm everything worked:
+
+```bash
+bash scripts/verify-intake.sh TICKET_ID_OR_NOTION_PAGE_ID
+```
+
+**If the script is not available locally**, verify manually via the public API:
+
+```bash
+curl -s "${API_URL}/public/tickets/${TICKET_ID}" | jq '{id, state, title, notion_page_id}'
+```
+
+Expected output:
+
+```json
+{
+  "id": "...",
+  "state": "RESEARCH",
+  "title": "...",
+  "notion_page_id": "..."
+}
+```
+
+**If `state` is not `RESEARCH`, go back to Step 4 and complete the missing calls.**
+
+### Step 6: Output Summary and Handoff
+
+Print a clear summary:
+
+```markdown
+## Ticket Intake Complete
+
+**Source:** Notion | GitHub
+**Title:** [Ticket title]
+**ID:** abc12345
+**Status:** In Progress (queued)
+**Priority:** High
+**Area:** UI
+
+### Description
+
+[Brief description or first 200 chars]
+
+### Acceptance Criteria
+
+- [ ] Criterion 1
+- [ ] Criterion 2
+
+### Links
+
+- **Ticket:** [Original URL]
+- **Slack:** [Slack thread content fetched via slackdump] (Notion only)
+
+### Pipeline
+
+- **API Ticket ID:** abc12345
+- **State:** RESEARCH
+- **Verified:** ✅ (via verify-intake.sh or public API)
+```
+
+**After printing the summary, immediately handoff** to continue the pipeline. Use the `handoff` tool with all necessary context (ticket ID, source, title, description, slack context if any):
+
+> **Handoff goal:** "Continue pipeline for ticket {ID} ({title}). Ticket is in RESEARCH state. Load skill: `research-orchestrator` to begin research phase. Ticket data: source={source}, notion_page_id={pageId}, priority={priority}. {slack context summary if available}"
+
+**Do NOT wait for human approval to proceed.** The intake phase is complete — handoff immediately.
+
+## Error Handling
+
+### Unsupported URL
+
+```
+❌ Unsupported ticket URL format.
+
+Supported formats:
+- Notion: https://notion.so/... or https://www.notion.so/...
+- GitHub: https://github.com/{owner}/{repo}/issues/{number}
+
+Received: [provided URL]
+```
+
+### Provider-Specific Errors
+
+See individual provider files for source-specific error handling:
+
+- `providers/notion.md` - Authentication, page not found
+- `providers/github.md` - Auth, rate limits, issue not found
+
+### Missing Properties
+
+Continue with available data and note what's missing:
+
+```
+⚠️ Some properties unavailable:
+- Priority: not found (using default: Medium)
+- Area: not found
+
+Proceeding with available data...
+```
+
+### API Call Failures
+
+```
+❌ Pipeline API call failed: {method} {endpoint}
+   Status: {status}
+   Error: {message}
+
+Retrying once...
+
+❌ Retry also failed. INTAKE IS INCOMPLETE.
+   The ticket was NOT registered in the pipeline.
+   Downstream skills will not work until this is fixed.
+```
+
+## Notes
+
+- This skill focuses ONLY on intake — it does not do research
+- Slack thread content is fetched automatically via the `slackdump` skill — no manual copy-paste needed
+- ALL API calls (createTicket, transitionState, queueSync) are MANDATORY — never skip them
+- The `queueSync` action must be `"update_status"`, NOT `"UPDATE_NOTION_STATUS"`
+- Pipeline state is tracked via the API, not local files
+- Working artifacts (research-report.md, plan.md) can be saved locally to `$PIPELINE_DIR/runs/{ticket-id}/`
+- The `source` field in the ticket determines which research strategies to use
+
+## API Client Reference
+
+### Available Methods
+
+| Method                                                      | Description                                                         |
+| ----------------------------------------------------------- | ------------------------------------------------------------------- |
+| `createTicket({ notion_page_id, title, source, metadata })` | Create a new ticket in the API                                      |
+| `getTicket(id)`                                             | Retrieve a ticket by ID                                             |
+| `findByNotionId(notionPageId)`                              | Look up a ticket by its Notion page ID                              |
+| `listTickets({ state, agent_id, limit, offset })`           | List tickets with optional filters                                  |
+| `transitionState(id, state, reason)`                        | Move ticket to a new state (e.g., `'RESEARCH'`)                     |
+| `setPRCreated(id, prUrl)`                                   | Mark ticket as having a PR created                                  |
+| `queueSync(id, action, payload)`                            | Queue a sync action (`update_status`, `update_pr_url`, `mark_done`) |
+| `registerBranch(id, branch, repo)`                          | Register working branch for automatic PR detection                  |
+
+### Error Handling
+
+```typescript
+import { PipelineClient, PipelineAPIError } from '@pipeline/client';
+
+try {
+  await client.createTicket({ ... });
+} catch (error) {
+  if (error instanceof PipelineAPIError) {
+    console.error(`API Error ${error.status}: ${error.message}`);
+  }
+  throw error;
+}
+```
--- a/.claude/skills/ticket-intake/providers/github.md
+++ b/.claude/skills/ticket-intake/providers/github.md
@@ -0,0 +1,194 @@
+# GitHub Provider - Ticket Intake
+
+Provider-specific logic for ingesting tickets from GitHub Issues.
+
+## URL Pattern
+
+```
+https://github.com/{owner}/{repo}/issues/{number}
+https://www.github.com/{owner}/{repo}/issues/{number}
+```
+
+Extract: `owner`, `repo`, `issue_number` from URL.
+
+## Prerequisites
+
+- `gh` CLI authenticated (`gh auth status`)
+- Access to the repository
+
+## Fetch Issue Content
+
+Use `gh` CLI to fetch issue details:
+
+```bash
+# Get issue details in JSON
+gh issue view {number} --repo {owner}/{repo} --json title,body,state,labels,assignees,milestone,author,createdAt,comments,linkedPRs
+
+# Get comments separately if needed
+gh issue view {number} --repo {owner}/{repo} --comments
+```
+
+## Extract Ticket Data
+
+Map GitHub issue fields to normalized ticket data (stored via API):
+
+| GitHub Field | ticket.json Field | Notes                      |
+| ------------ | ----------------- | -------------------------- |
+| title        | title             | Direct mapping             |
+| body         | description       | Issue body/description     |
+| state        | status            | Map: open → "Not Started"  |
+| labels       | labels            | Array of label names       |
+| assignees    | assignee          | First assignee login       |
+| author       | author            | Issue author login         |
+| milestone    | milestone         | Milestone title if present |
+| comments     | comments          | Array of comment objects   |
+| linkedPRs    | linkedPRs         | PRs linked to this issue   |
+
+### Priority Mapping
+
+Infer priority from labels:
+
+- `priority:critical`, `P0` → "Critical"
+- `priority:high`, `P1` → "High"
+- `priority:medium`, `P2` → "Medium"
+- `priority:low`, `P3` → "Low"
+- No priority label → "Medium" (default)
+
+### Area Mapping
+
+Infer area from labels:
+
+- `area:ui`, `frontend`, `component:*` → "UI"
+- `area:api`, `backend` → "API"
+- `area:docs`, `documentation` → "Docs"
+- `bug`, `fix` → "Bug"
+- `enhancement`, `feature` → "Feature"
+
+## Update Source
+
+**For GitHub issues, update is optional but recommended.**
+
+Add a comment to indicate work has started:
+
+```bash
+gh issue comment {number} --repo {owner}/{repo} --body "🤖 Pipeline started processing this issue."
+```
+
+Optionally assign to self:
+
+```bash
+gh issue edit {number} --repo {owner}/{repo} --add-assignee @me
+```
+
+Log any updates via the Pipeline API:
+
+```typescript
+await client.updateTicket(ticketId, {
+  metadata: {
+    ...ticket.metadata,
+    githubWrites: [
+      ...(ticket.metadata?.githubWrites || []),
+      {
+        action: 'comment',
+        issueNumber: 123,
+        at: new Date().toISOString(),
+        skill: 'ticket-intake',
+        success: true
+      }
+    ]
+  }
+})
+```
+
+## GitHub-Specific Ticket Fields
+
+Store via API using `client.createTicket()`:
+
+```json
+{
+  "source": "github",
+  "githubOwner": "Comfy-Org",
+  "githubRepo": "ComfyUI_frontend",
+  "githubIssueNumber": 123,
+  "githubIssueUrl": "https://github.com/Comfy-Org/ComfyUI_frontend/issues/123",
+  "labels": ["bug", "area:ui", "priority:high"],
+  "linkedPRs": [456, 789],
+  "dosuComment": "..." // Extracted Dosu bot analysis if present
+}
+```
+
+## Dosu Bot Detection
+
+Many repositories use Dosu bot for automated issue analysis. Check comments for Dosu:
+
+```bash
+gh issue view {number} --repo {owner}/{repo} --comments | grep -A 100 "dosu"
+```
+
+Look for comments from:
+
+- `dosu[bot]`
+- `dosu-bot`
+
+Extract Dosu analysis which typically includes:
+
+- Root cause analysis
+- Suggested files to modify
+- Related issues/PRs
+- Potential solutions
+
+Store in ticket data via API:
+
+```json
+{
+  "dosuComment": {
+    "found": true,
+    "analysis": "...",
+    "suggestedFiles": ["src/file1.ts", "src/file2.ts"],
+    "relatedIssues": [100, 101]
+  }
+}
+```
+
+## Extract Linked Issues/PRs
+
+Parse issue body and comments for references:
+
+- `#123` → Issue or PR reference
+- `fixes #123`, `closes #123` → Linked issue
+- `https://github.com/.../issues/123` → Full URL reference
+
+Store in ticket data via API for research phase:
+
+```json
+{
+  "referencedIssues": [100, 101, 102],
+  "referencedPRs": [200, 201]
+}
+```
+
+## Error Handling
+
+### Authentication Error
+
+```
+⚠️ GitHub CLI not authenticated.
+Run: gh auth login
+```
+
+### Issue Not Found
+
+```
+❌ GitHub issue not found or inaccessible.
+- Check the URL is correct
+- Ensure you have access to this repository
+- Run: gh auth status
+```
+
+### Rate Limiting
+
+```
+⚠️ GitHub API rate limited.
+Wait a few minutes and try again.
+Check status: gh api rate_limit
+```
--- a/.claude/skills/ticket-intake/providers/notion.md
+++ b/.claude/skills/ticket-intake/providers/notion.md
@@ -0,0 +1,202 @@
+# Notion Provider - Ticket Intake
+
+Provider-specific logic for ingesting tickets from Notion.
+
+## URL Pattern
+
+```
+https://www.notion.so/workspace/Page-Title-abc123def456...
+https://notion.so/Page-Title-abc123def456...
+https://www.notion.so/abc123def456...
+```
+
+Page ID is the 32-character hex string (with or without hyphens).
+
+## Prerequisites
+
+- Notion MCP connected and authenticated
+- If not setup: `claude mcp add --transport http notion https://mcp.notion.com/mcp`
+- Authenticate via `/mcp` command if prompted
+
+## Fetch Ticket Content
+
+Use `Notion:notion-fetch` with the page URL or ID:
+
+```
+Fetch the full page content including all properties
+```
+
+## Extract Ticket Data
+
+Extract these properties (names may vary):
+
+| Property      | Expected Name             | Type         |
+| ------------- | ------------------------- | ------------ |
+| Title         | Name / Title              | Title        |
+| Status        | Status                    | Select       |
+| Assignee      | Assignee / Assigned To    | Person       |
+| Description   | -                         | Page content |
+| Slack Link    | Slack Link / Slack Thread | URL          |
+| GitHub PR     | GitHub PR / PR Link       | URL          |
+| Priority      | Priority                  | Select       |
+| Area          | Area / Category           | Select       |
+| Related Tasks | Related Tasks             | Relation     |
+
+**If properties are missing**: Note what's unavailable and continue with available data.
+
+## Update Source (REQUIRED)
+
+**⚠️ DO NOT SKIP THIS STEP. This is a required action, not optional.**
+
+**⚠️ Notion Write Safety rules apply (see `$PIPELINE_DIR/docs/notion-write-safety.md` for full reference):**
+
+- **Whitelist**: Only `Status`, `GitHub PR`, and `Assignee` fields may be written
+- **Valid transitions**: Not Started → In Progress, In Progress → In Review, In Review → Done
+- **Logging**: Every write attempt MUST be logged with timestamp, field, value, previous value, skill name, and success status
+
+Use `Notion:notion-update-page` to update the ticket:
+
+1. **Status**: Set to "In Progress" (only valid from "Not Started")
+2. **Assignee**: Assign to pipeline owner (Notion ID: `175d872b-594c-81d4-ba5a-0002911c5966`)
+
+```json
+{
+  "page_id": "{page_id_from_ticket}",
+  "command": "update_properties",
+  "properties": {
+    "Status": "In Progress",
+    "Assignee": "175d872b-594c-81d4-ba5a-0002911c5966"
+  }
+}
+```
+
+**After the update succeeds**, log the write via the Pipeline API:
+
+```typescript
+await client.updateTicket(ticketId, {
+  metadata: {
+    ...ticket.metadata,
+    notionWrites: [
+      ...(ticket.metadata?.notionWrites || []),
+      {
+        field: 'Status',
+        value: 'In Progress',
+        previousValue: 'Not Started',
+        at: new Date().toISOString(),
+        skill: 'ticket-intake',
+        success: true
+      }
+    ]
+  }
+})
+```
+
+If update fails, log with `success: false` and continue.
+
+## Notion-Specific Ticket Fields
+
+Store via API using `client.createTicket()`:
+
+```json
+{
+  "source": "notion",
+  "notionPageId": "abc123def456...",
+  "slackLink": "https://slack.com/...",
+  "relatedTasks": ["page-id-1", "page-id-2"]
+}
+```
+
+## Slack Thread Handling
+
+If a Slack link exists, use the `slackdump` skill to fetch the thread content programmatically.
+
+### Slack URL Conversion
+
+Notion stores Slack links in `slackMessage://` format:
+
+```
+slackMessage://comfy-organization.slack.com/CHANNEL_ID/THREAD_TS/MESSAGE_TS
+```
+
+Convert to browser-clickable format:
+
+```
+https://comfy-organization.slack.com/archives/CHANNEL_ID/pMESSAGE_TS_NO_DOT
+```
+
+**Example:**
+
+- Input: `slackMessage://comfy-organization.slack.com/C075ANWQ8KS/1766022478.450909/1764772881.854829`
+- Output: `https://comfy-organization.slack.com/archives/C075ANWQ8KS/p1764772881854829`
+
+(Remove the dot from the last timestamp and prefix with `p`)
+
+### Fetching Thread Content
+
+Load the `slackdump` skill and use the **export-thread** workflow:
+
+```bash
+# Export thread by URL
+slackdump dump "https://comfy-organization.slack.com/archives/CHANNEL_ID/pMESSAGE_TS"
+
+# Or by colon notation (channel_id:thread_ts)
+slackdump dump CHANNEL_ID:THREAD_TS
+```
+
+Save the thread content to `$RUN_DIR/slack-context.md` and include it in the ticket metadata.
+
+> **No manual action required.** The slackdump CLI handles authentication via stored credentials at `~/.cache/slackdump/comfy-organization.bin`.
+
+## Database Reference: Comfy Tasks
+
+The "Comfy Tasks" database has these properties (verify via `notion-search`):
+
+- **Status values**: Not Started, In Progress, In Review, Done
+- **Team assignment**: "Frontend Team" for unassigned tickets
+- **Filtering note**: Team filtering in Notion may have quirks - handle gracefully
+
+### Pipeline Owner Details
+
+When assigning tickets, use these identifiers:
+
+| Platform        | Identifier                             |
+| --------------- | -------------------------------------- |
+| Notion User ID  | `175d872b-594c-81d4-ba5a-0002911c5966` |
+| Notion Name     | Christian Byrne                        |
+| Notion Email    | cbyrne@comfy.org                       |
+| Slack User ID   | U087MJCDHHC                            |
+| GitHub Username | christian-byrne                        |
+
+**To update Assignee**, use the Notion User ID (not name):
+
+```
+properties: {"Assignee": "175d872b-594c-81d4-ba5a-0002911c5966"}
+```
+
+### Finding Active Tickets
+
+To list your active tickets:
+
+```
+Use Notion:notion-search for "Comfy Tasks"
+Filter by Assignee = current user OR Team = "Frontend Team"
+```
+
+## Error Handling
+
+### Authentication Error
+
+```
+⚠️ Notion authentication required.
+Run: claude mcp add --transport http notion https://mcp.notion.com/mcp
+Then authenticate via /mcp command.
+```
+
+### Page Not Found
+
+```
+❌ Notion page not found or inaccessible.
+- Check the URL is correct
+- Ensure you have access to this page
+- Try re-authenticating via /mcp
+```
--- a/.claude/skills/ticket-intake/schema.md
+++ b/.claude/skills/ticket-intake/schema.md
@@ -0,0 +1,81 @@
+# Ticket Schema
+
+Common schema for normalized ticket data across all sources. This data is stored and retrieved via the Pipeline API, not local files.
+
+## Ticket Data Schema
+
+```json
+{
+  // Required fields (all sources)
+  "id": "string", // Unique identifier (short form)
+  "url": "string", // Original URL
+  "source": "notion | github", // Source type
+  "title": "string", // Ticket title
+  "description": "string", // Full description/body
+  "fetchedAt": "ISO8601", // When ticket was fetched
+
+  // Common optional fields
+  "status": "string", // Current status
+  "assignee": "string", // Assigned user
+  "priority": "string", // Priority level
+  "area": "string", // Category/area
+  "labels": ["string"], // Tags/labels
+  "acceptanceCriteria": ["string"] // List of AC items
+
+  // Source-specific fields (see providers)
+  // Notion: notionPageId, slackLink, relatedTasks, notionWrites
+  // GitHub: githubOwner, githubRepo, githubIssueNumber, linkedPRs, dosuComment, referencedIssues
+}
+```
+
+## Ticket State Schema (via API)
+
+State is managed via the Pipeline API using `client.transitionState()`:
+
+```json
+{
+  "ticketId": "string",
+  "state": "intake | research | planning | implementation | pr_created | done | failed",
+  "stateChangedAt": "ISO8601",
+
+  // Timestamps tracked by API
+  "createdAt": "ISO8601",
+  "updatedAt": "ISO8601"
+}
+```
+
+## Priority Normalization
+
+All sources should normalize to these values:
+
+| Normalized | Description               |
+| ---------- | ------------------------- |
+| Critical   | Production down, security |
+| High       | Blocking work, urgent     |
+| Medium     | Normal priority (default) |
+| Low        | Nice to have, backlog     |
+
+## Status Normalization
+
+Pipeline tracks these statuses internally:
+
+| Status         | Description                  |
+| -------------- | ---------------------------- |
+| research       | Gathering context            |
+| planning       | Creating implementation plan |
+| implementation | Writing code                 |
+| review         | Code review in progress      |
+| qa             | Quality assurance            |
+| done           | PR merged or completed       |
+
+## ID Generation
+
+IDs are generated by the API when creating tickets. For reference:
+
+- **Notion**: First 8 characters of page ID
+- **GitHub**: `gh-{owner}-{repo}-{issue_number}` (sanitized)
+
+Examples:
+
+- Notion: `abc12345`
+- GitHub: `gh-comfy-org-frontend-123`
--- a/.github/actions/lint-format-verify/action.yml
+++ b/.github/actions/lint-format-verify/action.yml
@@ -1,31 +0,0 @@
-name: 'Lint and format verify'
-description: >
-  Runs the lint/format/knip verification suite plus a conditional
-  browser-tests typecheck. Shared by ci-lint-format.yaml (PR) and
-  ci-lint-format-queue.yaml (merge queue) so both paths run the exact
-  same checks. The caller is responsible for checkout and frontend setup
-  before invoking this action.
-
-runs:
-  using: composite
-  steps:
-    - name: Detect browser_tests changes
-      id: changed-paths
-      uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
-      with:
-        filters: |
-          browser_tests:
-            - 'browser_tests/**'
-
-    - name: Verify lint and format
-      shell: bash
-      run: |
-        pnpm lint
-        pnpm stylelint
-        pnpm format:check
-        pnpm knip
-
-    - name: Typecheck browser tests
-      if: steps.changed-paths.outputs.browser_tests == 'true'
-      shell: bash
-      run: pnpm typecheck:browser
--- a/.github/workflows/ci-lint-format-queue.yaml
+++ b/.github/workflows/ci-lint-format-queue.yaml
@@ -1,29 +0,0 @@
-# Description: Lint and format verification for GitHub merge queue runs.
-# Paired with ci-lint-format.yaml — workflow name and job name must match
-# so branch protection resolves a single required check in both the
-# pull_request and merge_group contexts. This file runs verify-only steps
-# with a read-only token; auto-fix and PR comments live in the PR workflow.
-name: 'CI: Lint Format'
-
-on:
-  merge_group:
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-permissions:
-  contents: read
-
-jobs:
-  lint-and-format:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout merge group ref
-        uses: actions/checkout@v6
-
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
-
-      - name: Verify lint and format
-        uses: ./.github/actions/lint-format-verify
--- a/.github/workflows/ci-lint-format.yaml
+++ b/.github/workflows/ci-lint-format.yaml
@@ -1,7 +1,4 @@
-# Description: Linting and code formatting validation for pull requests.
-# Paired with ci-lint-format-queue.yaml - workflow name and job name must
-# match so branch protection resolves a single required check in both the
-# pull_request and merge_group contexts.
+# Description: Linting and code formatting validation for pull requests
 name: 'CI: Lint Format'

 on:
@@ -29,6 +26,14 @@ jobs:
      - name: Setup frontend
        uses: ./.github/actions/setup-frontend

+      - name: Detect browser_tests changes
+        id: changed-paths
+        uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
+        with:
+          filters: |
+            browser_tests:
+              - 'browser_tests/**'
+
      - name: Run ESLint with auto-fix
        run: pnpm lint:fix

@@ -72,8 +77,16 @@ jobs:
          echo "See CONTRIBUTING.md for more details."
          exit 1

-      - name: Verify lint and format
-        uses: ./.github/actions/lint-format-verify
+      - name: Final validation
+        run: |
+          pnpm lint
+          pnpm stylelint
+          pnpm format:check
+          pnpm knip
+
+      - name: Typecheck browser tests
+        if: steps.changed-paths.outputs.browser_tests == 'true'
+        run: pnpm typecheck:browser

      - name: Comment on PR about auto-fix
        if: steps.verify-changed-files.outputs.changed == 'true' && github.event.pull_request.head.repo.full_name == github.repository
--- a/.github/workflows/ci-tests-e2e.yaml
+++ b/.github/workflows/ci-tests-e2e.yaml
@@ -8,7 +8,6 @@ on:
  pull_request:
    branches-ignore: [wip/*, draft/*, temp/*]
    paths-ignore: ['**/*.md']
-  merge_group:
  workflow_dispatch:

 concurrency:
--- a/.github/workflows/ci-tests-unit.yaml
+++ b/.github/workflows/ci-tests-unit.yaml
@@ -8,7 +8,6 @@ on:
  pull_request:
    branches-ignore: [wip/*, draft/*, temp/*]
    paths-ignore: ['**/*.md']
-  merge_group:

 concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
--- a/.github/workflows/release-biweekly-comfyui.yaml
+++ b/.github/workflows/release-biweekly-comfyui.yaml
@@ -1,23 +1,14 @@
-# Release workflow for ComfyUI frontend: version bump → PyPI publish → ComfyUI PR.
-# Runs on a bi-weekly schedule for minor releases, or manually for patch/hotfix releases.
-name: 'Release: ComfyUI'
+# Automated bi-weekly workflow to bump ComfyUI frontend RC releases
+name: 'Release: Bi-weekly ComfyUI'

 on:
-  # Bi-weekly schedule: Monday at 20:00 UTC
+  # Schedule for Monday at 12:00 PM PST (20:00 UTC)
  schedule:
    - cron: '0 20 * * 1'

-  # Manual trigger for both on-demand minor and patch/hotfix releases
+  # Allow manual triggering (bypasses bi-weekly check)
  workflow_dispatch:
    inputs:
-      release_type:
-        description: 'minor = next minor version (bi-weekly cadence), patch = hotfix for current production version'
-        required: true
-        default: 'minor'
-        type: choice
-        options:
-          - minor
-          - patch
      comfyui_fork:
        description: 'ComfyUI fork to use for PR (e.g., Comfy-Org/ComfyUI)'
        required: false
@@ -50,11 +41,10 @@ jobs:

      - name: Summary
        run: |
-          echo "## Release Check" >> $GITHUB_STEP_SUMMARY
+          echo "## Bi-weekly Check" >> $GITHUB_STEP_SUMMARY
          echo "" >> $GITHUB_STEP_SUMMARY
          echo "- Is release week: ${{ steps.check.outputs.is_release_week }}" >> $GITHUB_STEP_SUMMARY
          echo "- Manual trigger: ${{ github.event_name == 'workflow_dispatch' }}" >> $GITHUB_STEP_SUMMARY
-          echo "- Release type: ${{ inputs.release_type || 'minor (scheduled)' }}" >> $GITHUB_STEP_SUMMARY

  resolve-version:
    needs: check-release-week
@@ -86,8 +76,6 @@ jobs:

      - name: Install pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          package_json_file: frontend/package.json

      - name: Setup Node.js
        uses: actions/setup-node@v6
@@ -101,8 +89,6 @@ jobs:
      - name: Resolve release information
        id: resolve
        working-directory: frontend
-        env:
-          RELEASE_TYPE: ${{ inputs.release_type || 'minor' }}
        run: |
          set -euo pipefail

--- a/.github/workflows/release-version-bump.yaml
+++ b/.github/workflows/release-version-bump.yaml
@@ -142,22 +142,10 @@ jobs:
          fi
          echo "✅ Branch '$BRANCH' exists"

-      - name: Ensure packageManager field exists
-        run: |
-          if ! grep -q '"packageManager"' package.json; then
-            # Old branches (e.g. core/1.42) predate the packageManager field.
-            # Inject it so pnpm/action-setup can resolve the version.
-            node -e "
-              const fs = require('fs');
-              const pkg = JSON.parse(fs.readFileSync('package.json','utf8'));
-              pkg.packageManager = 'pnpm@10.33.0';
-              fs.writeFileSync('package.json', JSON.stringify(pkg, null, 2) + '\n');
-            "
-            echo "Injected packageManager into package.json for legacy branch"
-          fi
-
      - name: Install pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        with:
+          version: 10

      - name: Setup Node.js
        uses: actions/setup-node@v6
--- a/.gitignore
+++ b/.gitignore
@@ -59,7 +59,6 @@ coverage/
 /playwright/.cache/
 browser_tests/**/*-win32.png
 browser_tests/local/
-browser_tests/tests/_recording-session.spec.ts

 .env

--- a/.mcp.json
+++ b/.mcp.json
@@ -1,8 +0,0 @@
-{
-  "mcpServers": {
-    "playwright-test": {
-      "command": "pnpm",
-      "args": ["dlx", "@playwright/mcp@0.0.68"]
-    }
-  }
-}
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@@ -10,7 +10,6 @@
    "dist/*",
    "packages/registry-types/src/comfyRegistryTypes.ts",
    "playwright-report/*",
-    "scripts/patch-playwright-agents.js",
    "src/extensions/core/*",
    "src/scripts/*",
    "src/types/generatedManagerTypes.ts",
@@ -65,7 +64,6 @@
        ]
      }
    ],
-    "no-unsafe-optional-chaining": "error",
    "no-self-assign": "allow",
    "no-unused-expressions": "off",
    "no-unused-private-class-members": "off",
@@ -85,7 +83,6 @@
    "typescript/no-unsafe-declaration-merging": "off",
    "typescript/no-unused-vars": "off",
    "unicorn/no-empty-file": "off",
-    "vitest/require-mock-type-parameters": "off",
    "unicorn/no-new-array": "off",
    "unicorn/no-single-promise-in-promise-methods": "off",
    "unicorn/no-useless-fallback-in-spread": "off",
@@ -107,7 +104,8 @@
        "allowInterfaces": "always"
      }
    ],
-    "vue/no-import-compiler-macros": "error"
+    "vue/no-import-compiler-macros": "error",
+    "vue/no-dupe-keys": "error"
  },
  "overrides": [
    {
@@ -116,68 +114,15 @@
        "no-console": "allow"
      }
    },
-    {
-      "files": ["tools/test-recorder/**/*.ts"],
-      "rules": {
-        "no-console": "allow"
-      }
-    },
    {
      "files": ["browser_tests/**/*.ts"],
-      "jsPlugins": ["eslint-plugin-playwright"],
      "rules": {
        "typescript/no-explicit-any": "error",
        "no-async-promise-executor": "error",
        "no-control-regex": "error",
        "no-useless-rename": "error",
        "no-unused-private-class-members": "error",
-        "unicorn/no-empty-file": "error",
-        "playwright/consistent-spacing-between-blocks": "error",
-        "playwright/expect-expect": [
-          "error",
-          {
-            "assertFunctionNames": [
-              "recordMeasurement",
-              "logMeasurement",
-              "builderSaveAs"
-            ],
-            "assertFunctionPatterns": [
-              "^expect",
-              "^assert",
-              "^verify",
-              "^searchAndExpect",
-              "waitForOpen",
-              "waitForClosed",
-              "waitForRequest"
-            ]
-          }
-        ],
-        "playwright/max-nested-describe": "error",
-        "playwright/no-duplicate-hooks": "error",
-        "playwright/no-element-handle": "error",
-        "playwright/no-eval": "error",
-        "playwright/no-focused-test": "error",
-        "playwright/no-force-option": "error",
-        "playwright/no-networkidle": "error",
-        "playwright/no-page-pause": "error",
-        "playwright/no-skipped-test": "error",
-        "playwright/no-unsafe-references": "error",
-        "playwright/no-unused-locators": "error",
-        "playwright/no-useless-await": "error",
-        "playwright/no-useless-not": "error",
-        "playwright/no-wait-for-navigation": "error",
-        "playwright/no-wait-for-selector": "error",
-        "playwright/no-wait-for-timeout": "error",
-        "playwright/prefer-hooks-on-top": "error",
-        "playwright/prefer-locator": "error",
-        "playwright/prefer-to-have-count": "error",
-        "playwright/prefer-to-have-length": "error",
-        "playwright/prefer-web-first-assertions": "error",
-        "playwright/prefer-native-locators": "error",
-        "playwright/require-to-pass-timeout": "error",
-        "playwright/valid-expect": "error",
-        "playwright/valid-expect-in-promise": "error",
-        "playwright/valid-title": "error"
+        "unicorn/no-empty-file": "error"
      }
    }
  ]
--- 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
@@ -194,12 +179,6 @@ Guardrails: agents must use `comfyPage` fixture (not bare `page`), never add `wa
 24. Do not use function expressions if it's possible to use function declarations instead
 25. Watch out for [Code Smells](https://wiki.c2.com/?CodeSmell) and refactor to avoid them

-## Design Standards
-
-Before implementing any user-facing feature, consult the [Comfy Design Standards](https://www.figma.com/design/QreIv5htUaSICNuO2VBHw0/Comfy-Design-Standards) Figma file. Use the Figma MCP to fetch it live — the file is the single source of truth and may be updated by designers at any time.
-
-See `docs/guidance/design-standards.md` for Figma file keys, section node IDs, and component references.
-
 ## Testing Guidelines

 See @docs/testing/\*.md for detailed patterns.
@@ -247,7 +226,6 @@ See @docs/testing/\*.md for detailed patterns.
 - shadcn/vue: <https://www.shadcn-vue.com/>
 - Reka UI: <https://reka-ui.com/>
 - PrimeVue: <https://primevue.org>
- Comfy Design Standards: <https://www.figma.com/design/QreIv5htUaSICNuO2VBHw0/Comfy-Design-Standards>
 - ComfyUI: <https://docs.comfy.org>
 - Electron: <https://www.electronjs.org/docs/latest/>
 - Wiki: <https://deepwiki.com/Comfy-Org/ComfyUI_frontend/1-overview>
@@ -333,9 +311,6 @@ When referencing Comfy-Org repos:
  - Find existing `!important` classes that are interfering with the styling and propose corrections of those instead.
 - NEVER use arbitrary percentage values like `w-[80%]` when a Tailwind fraction utility exists
  - Use `w-4/5` instead of `w-[80%]`, `w-1/2` instead of `w-[50%]`, etc.
- NEVER use font-size classes (`text-xs`, `text-sm`, etc.) to size `icon-[...]` (iconify) icons
-  - Iconify icons size via `width`/`height: 1.2em`, so font-size produces unpredictable results
-  - Use `size-*` classes for explicit sizing, or set font-size on the **parent** container and let `1.2em` scale naturally

 ## Agent-only rules

--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -62,37 +62,6 @@ python main.py --port 8188 --cpu
 - Run `pnpm dev:electron` to start the dev server with electron API mocked
 - Run `pnpm dev:cloud` to start the dev server against the cloud backend (instead of local ComfyUI server)

-#### Testing with Cloud & Staging Environments
-
-Some features — particularly **partner/API nodes** (e.g. BFL, OpenAI, Stability AI) — require a cloud backend for authentication and billing. Running these against a local ComfyUI instance will result in permission errors or logged-out states. There are two ways to connect to a cloud/staging backend:
-
-**Option 1: Frontend — `pnpm dev:cloud`**
-
-The simplest approach. This proxies all API requests to the test cloud environment:
-
-```bash
-pnpm dev:cloud
-```
-
-This sets `DEV_SERVER_COMFYUI_URL` to `https://testcloud.comfy.org/` automatically. You can also set this variable manually in your `.env` file to target a different environment:
-
-```bash
-# .env
-DEV_SERVER_COMFYUI_URL=https://stagingcloud.comfy.org/
-```
-
-Any `*.comfy.org` URL automatically enables cloud mode, which includes the GCS media proxy needed for viewing generated images and videos. See [.env_example](.env_example) for all available cloud URLs.
-
-**Option 2: Backend — `--comfy-api-base`**
-
-Alternatively, launch the ComfyUI backend pointed at the staging API:
-
-```bash
-python main.py --comfy-api-base https://stagingapi.comfy.org --verbose
-```
-
-Then run `pnpm dev` as usual. This keeps the frontend in local mode but routes backend API calls through staging.
-
 #### Access dev server on touch devices

 Enable remote access to the dev server by setting `VITE_REMOTE_DEV` in `.env` to `true`.
--- a/apps/website/src/components/AcademySection.vue
+++ b/apps/website/src/components/AcademySection.vue
@@ -1,15 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import type { Locale } from '../i18n/translations'
-import { t } from '../i18n/translations'
-
-const { locale = 'en' } = defineProps<{ locale?: Locale }>()
-
-const features = computed(() => [
-  { icon: '📚', label: t('academy.tutorials', locale) },
-  { icon: '🎥', label: t('academy.videos', locale) },
-  { icon: '🛠️', label: t('academy.projects', locale) }
-])
+const features = [
+  { icon: '📚', label: 'Guided Tutorials' },
+  { icon: '🎥', label: 'Video Courses' },
+  { icon: '🛠️', label: 'Hands-on Projects' }
+]
 </script>

 <template>
@@ -17,17 +11,16 @@ const features = computed(() => [
    <div class="mx-auto max-w-3xl px-6 text-center">
      <!-- Badge -->
      <span
-        class="inline-block rounded-full bg-brand-yellow/10 px-4 py-1.5 text-xs tracking-widest text-brand-yellow uppercase"
+        class="inline-block rounded-full bg-brand-yellow/10 px-4 py-1.5 text-xs uppercase tracking-widest text-brand-yellow"
      >
-        {{ t('academy.badge', locale) }}
+        COMFY ACADEMY
      </span>

-      <h2 class="mt-6 text-3xl font-bold text-white">
-        {{ t('academy.heading', locale) }}
-      </h2>
+      <h2 class="mt-6 text-3xl font-bold text-white">Master AI Workflows</h2>

      <p class="mt-4 text-smoke-700">
-        {{ t('academy.body', locale) }}
+        Learn to build professional AI workflows with guided tutorials, video
+        courses, and hands-on projects.
      </p>

      <!-- Feature bullets -->
@@ -47,7 +40,7 @@ const features = computed(() => [
        href="/academy"
        class="mt-8 inline-block rounded-full bg-brand-yellow px-8 py-3 text-sm font-semibold text-black transition-opacity hover:opacity-90"
      >
-        {{ t('academy.cta', locale) }}
+        EXPLORE ACADEMY
      </a>
    </div>
  </section>
--- a/apps/website/src/components/CTASection.vue
+++ b/apps/website/src/components/CTASection.vue
@@ -1,43 +1,37 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import type { Locale } from '../i18n/translations'
-import { t } from '../i18n/translations'
-
-const { locale = 'en' } = defineProps<{ locale?: Locale }>()
-
-const cards = computed(() => [
+const cards = [
  {
    icon: '🖥️',
-    title: t('cta.desktop.title', locale),
-    description: t('cta.desktop.desc', locale),
-    cta: t('cta.desktop.cta', locale),
+    title: 'Comfy Desktop',
+    description: 'Full power on your local machine. Free and open source.',
+    cta: 'DOWNLOAD',
    href: '/download',
    outlined: false
  },
  {
    icon: '☁️',
-    title: t('cta.cloud.title', locale),
-    description: t('cta.cloud.desc', locale),
-    cta: t('cta.cloud.cta', locale),
+    title: 'Comfy Cloud',
+    description: 'Run workflows in the cloud. No GPU required.',
+    cta: 'TRY CLOUD',
    href: 'https://app.comfy.org',
    outlined: false
  },
  {
    icon: '⚡',
-    title: t('cta.api.title', locale),
-    description: t('cta.api.desc', locale),
-    cta: t('cta.api.cta', locale),
+    title: 'Comfy API',
+    description: 'Integrate AI generation into your applications.',
+    cta: 'VIEW DOCS',
    href: 'https://docs.comfy.org',
    outlined: true
  }
-])
+]
 </script>

 <template>
  <section class="bg-charcoal-800 py-24">
    <div class="mx-auto max-w-5xl px-6">
      <h2 class="text-center text-3xl font-bold text-white">
-        {{ t('cta.heading', locale) }}
+        Choose Your Way to Comfy
      </h2>

      <!-- CTA cards -->
--- a/apps/website/src/components/GetStartedSection.vue
+++ b/apps/website/src/components/GetStartedSection.vue
@@ -1,37 +1,30 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import type { Locale } from '../i18n/translations'
-import { t } from '../i18n/translations'
-
-const { locale = 'en' } = defineProps<{ locale?: Locale }>()
-
-const steps = computed(() => [
+const steps = [
  {
    number: '1',
-    title: t('getStarted.step1.title', locale),
-    description: t('getStarted.step1.desc', locale)
+    title: 'Download & Sign Up',
+    description: 'Get Comfy Desktop for free or create a Cloud account'
  },
  {
    number: '2',
-    title: t('getStarted.step2.title', locale),
-    description: t('getStarted.step2.desc', locale)
+    title: 'Load a Workflow',
+    description:
+      'Choose from thousands of community workflows or build your own'
  },
  {
    number: '3',
-    title: t('getStarted.step3.title', locale),
-    description: t('getStarted.step3.desc', locale)
+    title: 'Generate',
+    description: 'Hit run and watch your AI workflow come to life'
  }
-])
+]
 </script>

 <template>
  <section class="border-t border-white/10 bg-black py-24">
    <div class="mx-auto max-w-7xl px-6 text-center">
-      <h2 class="text-3xl font-bold text-white">
-        {{ t('getStarted.heading', locale) }}
-      </h2>
+      <h2 class="text-3xl font-bold text-white">Get Started in Minutes</h2>
      <p class="mt-4 text-smoke-700">
-        {{ t('getStarted.subheading', locale) }}
+        From download to your first AI-generated output in three simple steps
      </p>

      <!-- Steps -->
@@ -40,7 +33,7 @@ const steps = computed(() => [
          <!-- Connecting line between steps (desktop only) -->
          <div
            v-if="index < steps.length - 1"
-            class="absolute top-8 right-0 hidden w-full translate-x-1/2 border-t border-brand-yellow/20 md:block"
+            class="absolute right-0 top-8 hidden w-full translate-x-1/2 border-t border-brand-yellow/20 md:block"
          />

          <div class="relative">
@@ -62,7 +55,7 @@ const steps = computed(() => [
        href="/download"
        class="mt-12 inline-block rounded-full bg-brand-yellow px-8 py-3 text-sm font-semibold text-black transition-opacity hover:opacity-90"
      >
-        {{ t('getStarted.cta', locale) }}
+        DOWNLOAD COMFY
      </a>
    </div>
  </section>
--- a/apps/website/src/components/HeroSection.vue
+++ b/apps/website/src/components/HeroSection.vue
@@ -1,23 +1,16 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-
-import type { Locale } from '../i18n/translations'
-import { t } from '../i18n/translations'
-
-const { locale = 'en' } = defineProps<{ locale?: Locale }>()
-
-const ctaButtons = computed(() => [
+const ctaButtons = [
  {
-    label: t('hero.cta.getStarted', locale),
+    label: 'GET STARTED',
    href: 'https://app.comfy.org',
    variant: 'solid' as const
  },
  {
-    label: t('hero.cta.learnMore', locale),
+    label: 'LEARN MORE',
    href: '/about',
    variant: 'outline' as const
  }
-])
+]
 </script>

 <template>
@@ -31,11 +24,11 @@ const ctaButtons = computed(() => [
      <div class="flex w-full items-center justify-center md:w-[55%]">
        <div class="relative -ml-12 -rotate-15 md:-ml-24" aria-hidden="true">
          <div
-            class="size-64 rounded-full border-40 border-brand-yellow md:h-112 md:w-md md:border-64 lg:h-144 lg:w-xl lg:border-80"
+            class="h-64 w-64 rounded-full border-[40px] border-brand-yellow md:h-[28rem] md:w-[28rem] md:border-[64px] lg:h-[36rem] lg:w-[36rem] lg:border-[80px]"
          >
            <!-- Gap on the right side to form "C" shape -->
            <div
-              class="absolute top-1/2 right-0 h-32 w-24 translate-x-1/2 -translate-y-1/2 bg-black md:h-48 md:w-36 lg:h-64 lg:w-48"
+              class="absolute right-0 top-1/2 h-32 w-24 -translate-y-1/2 translate-x-1/2 bg-black md:h-48 md:w-36 lg:h-64 lg:w-48"
            />
          </div>
        </div>
@@ -44,13 +37,14 @@ const ctaButtons = computed(() => [
      <!-- Right: Text content -->
      <div class="flex w-full flex-col items-start md:w-[45%]">
        <h1
-          class="text-5xl/tight font-bold tracking-tight text-white md:text-6xl lg:text-7xl"
+          class="text-5xl font-bold leading-tight tracking-tight text-white md:text-6xl lg:text-7xl"
        >
-          {{ t('hero.headline', locale) }}
+          Professional Control of Visual AI
        </h1>

        <p class="mt-6 max-w-lg text-lg text-smoke-700">
-          {{ t('hero.subheadline', locale) }}
+          Comfy is the AI creation engine for visual professionals who demand
+          control over every model, every parameter, and every output.
        </p>

        <div class="mt-8 flex flex-wrap gap-4">
--- a/apps/website/src/components/ManifestoSection.vue
+++ b/apps/website/src/components/ManifestoSection.vue
@@ -1,10 +1,3 @@
-<script setup lang="ts">
-import type { Locale } from '../i18n/translations'
-import { t } from '../i18n/translations'
-
-const { locale = 'en' } = defineProps<{ locale?: Locale }>()
-</script>
-
 <template>
  <section class="bg-black py-24">
    <div class="mx-auto max-w-4xl px-6 text-center">
@@ -14,11 +7,13 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
      </span>

      <h2 class="text-4xl font-bold text-white md:text-5xl">
-        {{ t('manifesto.heading', locale) }}
+        Method, Not Magic
      </h2>

-      <p class="mx-auto mt-6 max-w-2xl text-lg/relaxed text-smoke-700">
-        {{ t('manifesto.body', locale) }}
+      <p class="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-smoke-700">
+        We believe in giving creators real control over AI. Not black boxes. Not
+        magic buttons. But transparent, reproducible, node-by-node control over
+        every step of the creative process.
      </p>

      <!-- Separator line -->
--- a/apps/website/src/components/ProductShowcase.vue
+++ b/apps/website/src/components/ProductShowcase.vue
@@ -1,16 +1,6 @@
 <!-- TODO: Replace with actual workflow demo content -->
 <script setup lang="ts">
-import { computed } from 'vue'
-import type { Locale } from '../i18n/translations'
-import { t } from '../i18n/translations'
-
-const { locale = 'en' } = defineProps<{ locale?: Locale }>()
-
-const features = computed(() => [
-  t('showcase.nodeEditor', locale),
-  t('showcase.realTimePreview', locale),
-  t('showcase.versionControl', locale)
-])
+const features = ['Node-Based Editor', 'Real-Time Preview', 'Version Control']
 </script>

 <template>
@@ -18,11 +8,9 @@ const features = computed(() => [
    <div class="mx-auto max-w-7xl px-6">
      <!-- Section header -->
      <div class="text-center">
-        <h2 class="text-3xl font-bold text-white">
-          {{ t('showcase.heading', locale) }}
-        </h2>
+        <h2 class="text-3xl font-bold text-white">See Comfy in Action</h2>
        <p class="mx-auto mt-4 max-w-2xl text-smoke-700">
-          {{ t('showcase.subheading', locale) }}
+          Watch how professionals build AI workflows with unprecedented control
        </p>
      </div>

@@ -33,16 +21,14 @@ const features = computed(() => [
        <div class="flex flex-col items-center gap-4">
          <!-- Play button triangle -->
          <div
-            class="flex size-16 items-center justify-center rounded-full border-2 border-white/20"
+            class="flex h-16 w-16 items-center justify-center rounded-full border-2 border-white/20"
            aria-hidden="true"
          >
            <div
-              class="ml-1 size-0 border-y-8 border-l-14 border-y-transparent border-l-white"
+              class="ml-1 h-0 w-0 border-y-8 border-l-[14px] border-y-transparent border-l-white"
            />
          </div>
-          <p class="text-sm text-smoke-700">
-            {{ t('showcase.placeholder', locale) }}
-          </p>
+          <p class="text-sm text-smoke-700">Workflow Demo Coming Soon</p>
        </div>
      </div>

@@ -54,7 +40,7 @@ const features = computed(() => [
          class="flex items-center gap-2"
        >
          <span
-            class="size-2 rounded-full bg-brand-yellow"
+            class="h-2 w-2 rounded-full bg-brand-yellow"
            aria-hidden="true"
          />
          <span class="text-sm text-smoke-700">{{ feature }}</span>
--- a/apps/website/src/components/SiteFooter.vue
+++ b/apps/website/src/components/SiteFooter.vue
@@ -1,73 +1,39 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-
-import type { Locale } from '../i18n/translations'
-import { localePath, t } from '../i18n/translations'
-
-const { locale = 'en' } = defineProps<{ locale?: Locale }>()
-
-const columns = computed(() => [
+const columns = [
  {
-    title: t('footer.product', locale),
+    title: 'Product',
    links: [
-      {
-        label: t('footer.comfyDesktop', locale),
-        href: localePath('/download', locale)
-      },
-      { label: t('footer.comfyCloud', locale), href: 'https://app.comfy.org' },
-      { label: t('footer.comfyHub', locale), href: 'https://hub.comfy.org' },
-      {
-        label: t('footer.pricing', locale),
-        href: localePath('/pricing', locale)
-      }
+      { 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: t('footer.resources', locale),
+    title: 'Resources',
    links: [
-      {
-        label: t('footer.documentation', locale),
-        href: 'https://docs.comfy.org'
-      },
-      { label: t('footer.blog', locale), href: 'https://blog.comfy.org' },
-      {
-        label: t('footer.gallery', locale),
-        href: localePath('/gallery', locale)
-      },
-      {
-        label: t('footer.github', locale),
-        href: 'https://github.com/comfyanonymous/ComfyUI'
-      }
+      { 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: t('footer.company', locale),
+    title: 'Company',
    links: [
-      { label: t('footer.about', locale), href: localePath('/about', locale) },
-      {
-        label: t('footer.careers', locale),
-        href: localePath('/careers', locale)
-      },
-      {
-        label: t('footer.enterprise', locale),
-        href: localePath('/enterprise', locale)
-      }
+      { label: 'About', href: '/about' },
+      { label: 'Careers', href: '/careers' },
+      { label: 'Enterprise', href: '/enterprise' }
    ]
  },
  {
-    title: t('footer.legal', locale),
+    title: 'Legal',
    links: [
-      {
-        label: t('footer.terms', locale),
-        href: localePath('/terms-of-service', locale)
-      },
-      {
-        label: t('footer.privacy', locale),
-        href: localePath('/privacy-policy', locale)
-      }
+      { label: 'Terms of Service', href: '/terms-of-service' },
+      { label: 'Privacy Policy', href: '/privacy-policy' }
    ]
  }
-])
+]

 const socials = [
  {
@@ -110,16 +76,11 @@ const socials = [
    >
      <!-- Brand -->
      <div class="lg:col-span-1">
-        <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
-        <a
-          :href="localePath('/', locale)"
-          class="text-2xl font-bold text-brand-yellow italic"
-        >
+        <a href="/" class="text-2xl font-bold text-brand-yellow italic">
          Comfy
        </a>
-        <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
        <p class="mt-4 text-sm text-smoke-700">
-          {{ t('footer.tagline', locale) }}
+          Professional control of visual AI.
        </p>
      </div>

@@ -152,8 +113,7 @@ const socials = [
        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() }}
-          {{ t('footer.copyright', locale) }}
+          &copy; {{ new Date().getFullYear() }} Comfy Org. All rights reserved.
        </p>

        <!-- Social icons -->
--- a/apps/website/src/components/SiteNav.vue
+++ b/apps/website/src/components/SiteNav.vue
@@ -1,23 +1,15 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-
-import type { Locale } from '../i18n/translations'
-import { localePath, t } from '../i18n/translations'
-
-const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+import { onMounted, onUnmounted, ref } from 'vue'

 const mobileMenuOpen = ref(false)
 const currentPath = ref('')

-const navLinks = computed(() => [
-  {
-    label: t('nav.enterprise', locale),
-    href: localePath('/enterprise', locale)
-  },
-  { label: t('nav.gallery', locale), href: localePath('/gallery', locale) },
-  { label: t('nav.about', locale), href: localePath('/about', locale) },
-  { label: t('nav.careers', locale), href: localePath('/careers', locale) }
-])
+const navLinks = [
+  { label: 'ENTERPRISE', href: '/enterprise' },
+  { label: 'GALLERY', href: '/gallery' },
+  { label: 'ABOUT', href: '/about' },
+  { label: 'CAREERS', href: '/careers' }
+]

 const ctaLinks = [
  {
@@ -57,19 +49,14 @@ onUnmounted(() => {

 <template>
  <nav
-    class="fixed inset-x-0 top-0 z-50 bg-black/80 backdrop-blur-md"
-    :aria-label="t('nav.ariaLabel', locale)"
+    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 -->
-      <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
-      <a
-        :href="localePath('/', locale)"
-        class="text-2xl font-bold text-brand-yellow italic"
-      >
+      <a href="/" class="text-2xl font-bold italic text-brand-yellow">
        Comfy
      </a>
-      <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->

      <!-- Desktop nav links -->
      <div class="hidden items-center gap-8 md:flex">
@@ -90,8 +77,8 @@ onUnmounted(() => {
            :href="cta.href"
            :class="
              cta.primary
-                ? 'bg-brand-yellow text-black transition-opacity hover:opacity-90'
-                : 'border border-brand-yellow text-brand-yellow transition-colors hover:bg-brand-yellow hover:text-black'
+                ? '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"
          >
@@ -103,7 +90,7 @@ onUnmounted(() => {
      <!-- Mobile hamburger -->
      <button
        class="flex flex-col gap-1.5 md:hidden"
-        :aria-label="t('nav.toggleMenu', locale)"
+        aria-label="Toggle menu"
        aria-controls="site-mobile-menu"
        :aria-expanded="mobileMenuOpen"
        @click="mobileMenuOpen = !mobileMenuOpen"
@@ -148,8 +135,8 @@ onUnmounted(() => {
            :href="cta.href"
            :class="
              cta.primary
-                ? 'bg-brand-yellow text-black transition-opacity hover:opacity-90'
-                : 'border border-brand-yellow text-brand-yellow transition-colors hover:bg-brand-yellow hover:text-black'
+                ? '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"
          >
--- a/apps/website/src/components/SocialProofBar.vue
+++ b/apps/website/src/components/SocialProofBar.vue
@@ -1,10 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import type { Locale } from '../i18n/translations'
-import { t } from '../i18n/translations'
-
-const { locale = 'en' } = defineProps<{ locale?: Locale }>()
-
 const logos = [
  'Harman',
  'Tencent',
@@ -20,11 +14,11 @@ const logos = [
  'EA'
 ]

-const metrics = computed(() => [
-  { value: '60K+', label: t('social.customNodes', locale) },
-  { value: '106K+', label: t('social.githubStars', locale) },
-  { value: '500K+', label: t('social.communityMembers', locale) }
-])
+const metrics = [
+  { value: '60K+', label: 'Custom Nodes' },
+  { value: '106K+', label: 'GitHub Stars' },
+  { value: '500K+', label: 'Community Members' }
+]
 </script>

 <template>
@@ -32,9 +26,9 @@ const metrics = computed(() => [
    <div class="mx-auto max-w-7xl px-6">
      <!-- Heading -->
      <p
-        class="text-center text-xs font-medium tracking-widest text-smoke-700 uppercase"
+        class="text-center text-xs font-medium uppercase tracking-widest text-smoke-700"
      >
-        {{ t('social.heading', locale) }}
+        Trusted by Industry Leaders
      </p>

      <!-- Logo row -->
--- a/apps/website/src/components/TestimonialsSection.vue
+++ b/apps/website/src/components/TestimonialsSection.vue
@@ -1,28 +1,9 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'

-import type { Locale } from '../i18n/translations'
-import { t } from '../i18n/translations'
+const activeFilter = ref('All')

-const { locale = 'en' } = defineProps<{ locale?: Locale }>()
-
-const industryKeys = [
-  'All',
-  'VFX',
-  'Gaming',
-  'Advertising',
-  'Photography'
-] as const
-
-const industryLabels = computed(() => ({
-  All: t('testimonials.all', locale),
-  VFX: t('testimonials.vfx', locale),
-  Gaming: t('testimonials.gaming', locale),
-  Advertising: t('testimonials.advertising', locale),
-  Photography: t('testimonials.photography', locale)
-}))
-
-const activeFilter = ref<(typeof industryKeys)[number]>('All')
+const industries = ['All', 'VFX', 'Gaming', 'Advertising', 'Photography']

 const testimonials = [
  {
@@ -31,7 +12,7 @@ const testimonials = [
    name: 'Sarah Chen',
    title: 'Lead Technical Artist',
    company: 'Studio Alpha',
-    industry: 'VFX' as const
+    industry: 'VFX'
  },
  {
    quote:
@@ -39,7 +20,7 @@ const testimonials = [
    name: 'Marcus Rivera',
    title: 'Creative Director',
    company: 'PixelForge',
-    industry: 'Gaming' as const
+    industry: 'Gaming'
  },
  {
    quote:
@@ -47,7 +28,7 @@ const testimonials = [
    name: 'Yuki Tanaka',
    title: 'Head of AI',
    company: 'CreativeX',
-    industry: 'Advertising' as const
+    industry: 'Advertising'
  }
 ]

@@ -61,13 +42,13 @@ const filteredTestimonials = computed(() => {
  <section class="bg-black py-24">
    <div class="mx-auto max-w-7xl px-6">
      <h2 class="text-center text-3xl font-bold text-white">
-        {{ t('testimonials.heading', locale) }}
+        What Professionals Say
      </h2>

      <!-- Industry filter pills -->
      <div class="mt-8 flex flex-wrap items-center justify-center gap-3">
        <button
-          v-for="industry in industryKeys"
+          v-for="industry in industries"
          :key="industry"
          type="button"
          :aria-pressed="activeFilter === industry"
@@ -79,7 +60,7 @@ const filteredTestimonials = computed(() => {
          "
          @click="activeFilter = industry"
        >
-          {{ industryLabels[industry] }}
+          {{ industry }}
        </button>
      </div>

@@ -90,7 +71,7 @@ const filteredTestimonials = computed(() => {
          :key="testimonial.name"
          class="rounded-xl border border-white/10 bg-charcoal-600 p-6"
        >
-          <blockquote class="text-base text-white italic">
+          <blockquote class="text-base italic text-white">
            &ldquo;{{ testimonial.quote }}&rdquo;
          </blockquote>

@@ -104,7 +85,7 @@ const filteredTestimonials = computed(() => {
          <span
            class="mt-3 inline-block rounded-full bg-white/5 px-2 py-0.5 text-xs text-smoke-700"
          >
-            {{ industryLabels[testimonial.industry] ?? testimonial.industry }}
+            {{ testimonial.industry }}
          </span>
        </article>
      </div>
--- a/apps/website/src/components/UseCaseSection.vue
+++ b/apps/website/src/components/UseCaseSection.vue
@@ -1,18 +1,14 @@
 <!-- TODO: Wire category content swap when final assets arrive -->
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import type { Locale } from '../i18n/translations'
-import { t } from '../i18n/translations'
+import { ref } from 'vue'

-const { locale = 'en' } = defineProps<{ locale?: Locale }>()
-
-const categories = computed(() => [
-  t('useCase.vfx', locale),
-  t('useCase.agencies', locale),
-  t('useCase.gaming', locale),
-  t('useCase.ecommerce', locale),
-  t('useCase.community', locale)
-])
+const categories = [
+  'VFX & Animation',
+  'Creative Agencies',
+  'Gaming',
+  'eCommerce & Fashion',
+  'Community & Hobbyists'
+]

 const activeCategory = ref(0)
 </script>
@@ -24,14 +20,14 @@ const activeCategory = ref(0)
        <!-- Left placeholder image (desktop only) -->
        <div class="hidden flex-1 lg:block">
          <div
-            class="aspect-2/3 rounded-full border border-white/10 bg-charcoal-600"
+            class="aspect-[2/3] rounded-full border border-white/10 bg-charcoal-600"
          />
        </div>

        <!-- Center content -->
-        <div class="flex flex-col items-center text-center lg:flex-2">
+        <div class="flex flex-col items-center text-center lg:flex-[2]">
          <h2 class="text-3xl font-bold text-white">
-            {{ t('useCase.heading', locale) }}
+            Built for Every Creative Industry
          </h2>

          <nav
@@ -56,21 +52,22 @@ const activeCategory = ref(0)
          </nav>

          <p class="mt-10 max-w-lg text-smoke-700">
-            {{ t('useCase.body', locale) }}
+            Powered by 60,000+ nodes, thousands of workflows, and a community
+            that builds faster than any one company could.
          </p>

          <a
            href="/workflows"
            class="mt-8 rounded-full border border-brand-yellow px-8 py-3 text-sm font-semibold text-brand-yellow transition-colors hover:bg-brand-yellow hover:text-black"
          >
-            {{ t('useCase.cta', locale) }}
+            EXPLORE WORKFLOWS
          </a>
        </div>

        <!-- Right placeholder image (desktop only) -->
        <div class="hidden flex-1 lg:block">
          <div
-            class="aspect-2/3 rounded-3xl border border-white/10 bg-charcoal-600"
+            class="aspect-[2/3] rounded-3xl border border-white/10 bg-charcoal-600"
          />
        </div>
      </div>
--- a/apps/website/src/components/ValuePillars.vue
+++ b/apps/website/src/components/ValuePillars.vue
@@ -1,37 +1,34 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import type { Locale } from '../i18n/translations'
-import { t } from '../i18n/translations'
-
-const { locale = 'en' } = defineProps<{ locale?: Locale }>()
-
-const pillars = computed(() => [
+const pillars = [
  {
    icon: '⚡',
-    title: t('pillars.buildTitle', locale),
-    description: t('pillars.buildDesc', locale)
+    title: 'Build',
+    description:
+      'Design complex AI workflows visually with our node-based editor'
  },
  {
    icon: '🎨',
-    title: t('pillars.customizeTitle', locale),
-    description: t('pillars.customizeDesc', locale)
+    title: 'Customize',
+    description: 'Fine-tune every parameter across any model architecture'
  },
  {
    icon: '🔧',
-    title: t('pillars.refineTitle', locale),
-    description: t('pillars.refineDesc', locale)
+    title: 'Refine',
+    description:
+      'Iterate on outputs with precision controls and real-time preview'
  },
  {
    icon: '⚙️',
-    title: t('pillars.automateTitle', locale),
-    description: t('pillars.automateDesc', locale)
+    title: 'Automate',
+    description:
+      'Scale your workflows with batch processing and API integration'
  },
  {
    icon: '🚀',
-    title: t('pillars.runTitle', locale),
-    description: t('pillars.runDesc', locale)
+    title: 'Run',
+    description: 'Deploy locally or in the cloud with identical results'
  }
-])
+]
 </script>

 <template>
@@ -39,10 +36,10 @@ const pillars = computed(() => [
    <div class="mx-auto max-w-7xl">
      <header class="mb-16 text-center">
        <h2 class="text-3xl font-bold text-white md:text-4xl">
-          {{ t('pillars.heading', locale) }}
+          The Building Blocks of AI Production
        </h2>
        <p class="mt-4 text-smoke-700">
-          {{ t('pillars.subheading', locale) }}
+          Five powerful capabilities that give you complete control
        </p>
      </header>

@@ -53,7 +50,7 @@ const pillars = computed(() => [
          class="rounded-xl border border-white/10 bg-charcoal-600 p-6 transition-colors hover:border-brand-yellow"
        >
          <div
-            class="flex size-12 items-center justify-center rounded-full bg-brand-yellow text-xl"
+            class="flex h-12 w-12 items-center justify-center rounded-full bg-brand-yellow text-xl"
          >
            {{ pillar.icon }}
          </div>
--- a/apps/website/src/i18n/translations.ts
+++ b/apps/website/src/i18n/translations.ts
@@ -1,253 +0,0 @@
-type Locale = 'en' | 'zh-CN'
-
-const translations = {
-  // HeroSection
-  'hero.headline': {
-    en: 'Professional Control of Visual AI',
-    'zh-CN': '视觉 AI 的专业控制'
-  },
-  'hero.subheadline': {
-    en: 'Comfy is the AI creation engine for visual professionals who demand control over every model, every parameter, and every output.',
-    'zh-CN':
-      'Comfy 是面向视觉专业人士的 AI 创作引擎，让您掌控每个模型、每个参数和每个输出。'
-  },
-  'hero.cta.getStarted': { en: 'GET STARTED', 'zh-CN': '立即开始' },
-  'hero.cta.learnMore': { en: 'LEARN MORE', 'zh-CN': '了解更多' },
-
-  // SocialProofBar
-  'social.heading': {
-    en: 'Trusted by Industry Leaders',
-    'zh-CN': '受到行业领导者的信赖'
-  },
-  'social.customNodes': { en: 'Custom Nodes', 'zh-CN': '自定义节点' },
-  'social.githubStars': { en: 'GitHub Stars', 'zh-CN': 'GitHub 星标' },
-  'social.communityMembers': {
-    en: 'Community Members',
-    'zh-CN': '社区成员'
-  },
-
-  // ProductShowcase
-  'showcase.heading': { en: 'See Comfy in Action', 'zh-CN': '观看 Comfy 实战' },
-  'showcase.subheading': {
-    en: 'Watch how professionals build AI workflows with unprecedented control',
-    'zh-CN': '观看专业人士如何以前所未有的控制力构建 AI 工作流'
-  },
-  'showcase.placeholder': {
-    en: 'Workflow Demo Coming Soon',
-    'zh-CN': '工作流演示即将推出'
-  },
-  'showcase.nodeEditor': { en: 'Node-Based Editor', 'zh-CN': '节点编辑器' },
-  'showcase.realTimePreview': {
-    en: 'Real-Time Preview',
-    'zh-CN': '实时预览'
-  },
-  'showcase.versionControl': {
-    en: 'Version Control',
-    'zh-CN': '版本控制'
-  },
-
-  // ValuePillars
-  'pillars.heading': {
-    en: 'The Building Blocks of AI Production',
-    'zh-CN': 'AI 制作的基本要素'
-  },
-  'pillars.subheading': {
-    en: 'Five powerful capabilities that give you complete control',
-    'zh-CN': '五大强大功能，让您完全掌控'
-  },
-  'pillars.buildTitle': { en: 'Build', 'zh-CN': '构建' },
-  'pillars.buildDesc': {
-    en: 'Design complex AI workflows visually with our node-based editor',
-    'zh-CN': '使用节点编辑器直观地设计复杂的 AI 工作流'
-  },
-  'pillars.customizeTitle': { en: 'Customize', 'zh-CN': '自定义' },
-  'pillars.customizeDesc': {
-    en: 'Fine-tune every parameter across any model architecture',
-    'zh-CN': '在任何模型架构中微调每个参数'
-  },
-  'pillars.refineTitle': { en: 'Refine', 'zh-CN': '优化' },
-  'pillars.refineDesc': {
-    en: 'Iterate on outputs with precision controls and real-time preview',
-    'zh-CN': '通过精确控制和实时预览迭代输出'
-  },
-  'pillars.automateTitle': { en: 'Automate', 'zh-CN': '自动化' },
-  'pillars.automateDesc': {
-    en: 'Scale your workflows with batch processing and API integration',
-    'zh-CN': '通过批处理和 API 集成扩展工作流'
-  },
-  'pillars.runTitle': { en: 'Run', 'zh-CN': '运行' },
-  'pillars.runDesc': {
-    en: 'Deploy locally or in the cloud with identical results',
-    'zh-CN': '在本地或云端部署，获得相同的结果'
-  },
-
-  // UseCaseSection
-  'useCase.heading': {
-    en: 'Built for Every Creative Industry',
-    'zh-CN': '为每个创意行业而生'
-  },
-  'useCase.vfx': { en: 'VFX & Animation', 'zh-CN': '视觉特效与动画' },
-  'useCase.agencies': { en: 'Creative Agencies', 'zh-CN': '创意机构' },
-  'useCase.gaming': { en: 'Gaming', 'zh-CN': '游戏' },
-  'useCase.ecommerce': {
-    en: 'eCommerce & Fashion',
-    'zh-CN': '电商与时尚'
-  },
-  'useCase.community': {
-    en: 'Community & Hobbyists',
-    'zh-CN': '社区与爱好者'
-  },
-  'useCase.body': {
-    en: 'Powered by 60,000+ nodes, thousands of workflows, and a community that builds faster than any one company could.',
-    'zh-CN':
-      '由 60,000+ 节点、数千个工作流和一个比任何公司都更快构建的社区驱动。'
-  },
-  'useCase.cta': { en: 'EXPLORE WORKFLOWS', 'zh-CN': '探索工作流' },
-
-  // CaseStudySpotlight
-  'caseStudy.heading': { en: 'Customer Stories', 'zh-CN': '客户故事' },
-  'caseStudy.subheading': {
-    en: 'See how leading studios use Comfy in production',
-    'zh-CN': '了解领先工作室如何在生产中使用 Comfy'
-  },
-  'caseStudy.readMore': { en: 'READ CASE STUDY', 'zh-CN': '阅读案例' },
-
-  // TestimonialsSection
-  'testimonials.heading': {
-    en: 'What Professionals Say',
-    'zh-CN': '专业人士的评价'
-  },
-  'testimonials.all': { en: 'All', 'zh-CN': '全部' },
-  'testimonials.vfx': { en: 'VFX', 'zh-CN': '特效' },
-  'testimonials.gaming': { en: 'Gaming', 'zh-CN': '游戏' },
-  'testimonials.advertising': { en: 'Advertising', 'zh-CN': '广告' },
-  'testimonials.photography': { en: 'Photography', 'zh-CN': '摄影' },
-
-  // GetStartedSection
-  'getStarted.heading': {
-    en: 'Get Started in Minutes',
-    'zh-CN': '几分钟即可开始'
-  },
-  'getStarted.subheading': {
-    en: 'From download to your first AI-generated output in three simple steps',
-    'zh-CN': '从下载到首次 AI 生成输出，只需三个简单步骤'
-  },
-  'getStarted.step1.title': {
-    en: 'Download & Sign Up',
-    'zh-CN': '下载与注册'
-  },
-  'getStarted.step1.desc': {
-    en: 'Get Comfy Desktop for free or create a Cloud account',
-    'zh-CN': '免费获取 Comfy Desktop 或创建云端账号'
-  },
-  'getStarted.step2.title': {
-    en: 'Load a Workflow',
-    'zh-CN': '加载工作流'
-  },
-  'getStarted.step2.desc': {
-    en: 'Choose from thousands of community workflows or build your own',
-    'zh-CN': '从数千个社区工作流中选择，或自行构建'
-  },
-  'getStarted.step3.title': { en: 'Generate', 'zh-CN': '生成' },
-  'getStarted.step3.desc': {
-    en: 'Hit run and watch your AI workflow come to life',
-    'zh-CN': '点击运行，观看 AI 工作流生动呈现'
-  },
-  'getStarted.cta': { en: 'DOWNLOAD COMFY', 'zh-CN': '下载 COMFY' },
-
-  // CTASection
-  'cta.heading': {
-    en: 'Choose Your Way to Comfy',
-    'zh-CN': '选择您的 Comfy 方式'
-  },
-  'cta.desktop.title': { en: 'Comfy Desktop', 'zh-CN': 'Comfy Desktop' },
-  'cta.desktop.desc': {
-    en: 'Full power on your local machine. Free and open source.',
-    'zh-CN': '在本地机器上释放全部性能。免费开源。'
-  },
-  'cta.desktop.cta': { en: 'DOWNLOAD', 'zh-CN': '下载' },
-  'cta.cloud.title': { en: 'Comfy Cloud', 'zh-CN': 'Comfy Cloud' },
-  'cta.cloud.desc': {
-    en: 'Run workflows in the cloud. No GPU required.',
-    'zh-CN': '在云端运行工作流，无需 GPU。'
-  },
-  'cta.cloud.cta': { en: 'TRY CLOUD', 'zh-CN': '试用云端' },
-  'cta.api.title': { en: 'Comfy API', 'zh-CN': 'Comfy API' },
-  'cta.api.desc': {
-    en: 'Integrate AI generation into your applications.',
-    'zh-CN': '将 AI 生成功能集成到您的应用程序中。'
-  },
-  'cta.api.cta': { en: 'VIEW DOCS', 'zh-CN': '查看文档' },
-
-  // ManifestoSection
-  'manifesto.heading': { en: 'Method, Not Magic', 'zh-CN': '方法，而非魔法' },
-  'manifesto.body': {
-    en: 'We believe in giving creators real control over AI. Not black boxes. Not magic buttons. But transparent, reproducible, node-by-node control over every step of the creative process.',
-    'zh-CN':
-      '我们相信应赋予创作者对 AI 的真正控制权。没有黑箱，没有魔法按钮，而是对创作过程每一步的透明、可复现、逐节点控制。'
-  },
-
-  // AcademySection
-  'academy.badge': { en: 'COMFY ACADEMY', 'zh-CN': 'COMFY 学院' },
-  'academy.heading': {
-    en: 'Master AI Workflows',
-    'zh-CN': '掌握 AI 工作流'
-  },
-  'academy.body': {
-    en: 'Learn to build professional AI workflows with guided tutorials, video courses, and hands-on projects.',
-    'zh-CN': '通过指导教程、视频课程和实践项目，学习构建专业的 AI 工作流。'
-  },
-  'academy.tutorials': { en: 'Guided Tutorials', 'zh-CN': '指导教程' },
-  'academy.videos': { en: 'Video Courses', 'zh-CN': '视频课程' },
-  'academy.projects': { en: 'Hands-on Projects', 'zh-CN': '实践项目' },
-  'academy.cta': { en: 'EXPLORE ACADEMY', 'zh-CN': '探索学院' },
-
-  // SiteNav
-  'nav.ariaLabel': { en: 'Main navigation', 'zh-CN': '主导航' },
-  'nav.toggleMenu': { en: 'Toggle menu', 'zh-CN': '切换菜单' },
-  'nav.enterprise': { en: 'ENTERPRISE', 'zh-CN': '企业版' },
-  'nav.gallery': { en: 'GALLERY', 'zh-CN': '画廊' },
-  'nav.about': { en: 'ABOUT', 'zh-CN': '关于' },
-  'nav.careers': { en: 'CAREERS', 'zh-CN': '招聘' },
-  'nav.cloud': { en: 'COMFY CLOUD', 'zh-CN': 'COMFY 云端' },
-  'nav.hub': { en: 'COMFY HUB', 'zh-CN': 'COMFY HUB' },
-
-  // SiteFooter
-  'footer.tagline': {
-    en: 'Professional control of visual AI.',
-    'zh-CN': '视觉 AI 的专业控制。'
-  },
-  'footer.product': { en: 'Product', 'zh-CN': '产品' },
-  'footer.resources': { en: 'Resources', 'zh-CN': '资源' },
-  'footer.company': { en: 'Company', 'zh-CN': '公司' },
-  'footer.legal': { en: 'Legal', 'zh-CN': '法律' },
-  'footer.copyright': {
-    en: 'Comfy Org. All rights reserved.',
-    'zh-CN': 'Comfy Org. 保留所有权利。'
-  },
-  'footer.comfyDesktop': { en: 'Comfy Desktop', 'zh-CN': 'Comfy Desktop' },
-  'footer.comfyCloud': { en: 'Comfy Cloud', 'zh-CN': 'Comfy Cloud' },
-  'footer.comfyHub': { en: 'ComfyHub', 'zh-CN': 'ComfyHub' },
-  'footer.pricing': { en: 'Pricing', 'zh-CN': '价格' },
-  'footer.documentation': { en: 'Documentation', 'zh-CN': '文档' },
-  'footer.blog': { en: 'Blog', 'zh-CN': '博客' },
-  'footer.gallery': { en: 'Gallery', 'zh-CN': '画廊' },
-  'footer.github': { en: 'GitHub', 'zh-CN': 'GitHub' },
-  'footer.about': { en: 'About', 'zh-CN': '关于' },
-  'footer.careers': { en: 'Careers', 'zh-CN': '招聘' },
-  'footer.enterprise': { en: 'Enterprise', 'zh-CN': '企业版' },
-  'footer.terms': { en: 'Terms of Service', 'zh-CN': '服务条款' },
-  'footer.privacy': { en: 'Privacy Policy', 'zh-CN': '隐私政策' }
-} as const satisfies Record<string, Record<Locale, string>>
-
-type TranslationKey = keyof typeof translations
-
-export function t(key: TranslationKey, locale: Locale = 'en'): string {
-  return translations[key][locale] ?? translations[key].en
-}
-
-export function localePath(path: string, locale: Locale): string {
-  return locale === 'en' ? path : `/${locale}${path}`
-}
-
-export type { Locale }
--- a/apps/website/src/pages/zh-CN/about.astro
+++ b/apps/website/src/pages/zh-CN/about.astro
@@ -4,89 +4,89 @@ import SiteNav from '../../components/SiteNav.vue'
 import SiteFooter from '../../components/SiteFooter.vue'

 const team = [
-  { name: 'comfyanonymous', role: 'ComfyUI 创始人、联合创始人' },
-  { name: 'Dr.Lt.Data', role: 'ComfyUI-Manager 和 Impact/Inspire Pack 作者' },
-  { name: 'pythongosssss', role: '核心贡献者、ComfyUI-Custom-Scripts 作者' },
-  { name: 'yoland68', role: 'ComfyCLI 作者、联合创始人、前 Google' },
-  { name: 'robinjhuang', role: 'Comfy Registry 维护者、联合创始人、前 Google Cloud' },
-  { name: 'jojodecay', role: 'ComfyUI 活动主持人、社区与合作关系' },
-  { name: 'christian-byrne', role: '全栈开发工程师' },
-  { name: 'Kosinkadink', role: 'AnimateDiff-Evolved 和 Advanced-ControlNet 作者' },
-  { name: 'webfiltered', role: 'Litegraph 库重构者' },
-  { name: 'Pablo', role: '产品设计、前 AI 初创公司创始人' },
-  { name: 'ComfyUI Wiki (Daxiong)', role: '官方文档和模板' },
-  { name: 'ctrlbenlu (Ben)', role: '软件工程师、前机器人领域' },
-  { name: 'Purz Beats', role: '动效设计师和机器学习工程师' },
-  { name: 'Ricyu (Rich)', role: '软件工程师、前 Meta' },
+  { name: 'comfyanonymous', role: 'Creator of ComfyUI, cofounder' },
+  { name: 'Dr.Lt.Data', role: 'Creator of ComfyUI-Manager and Impact/Inspire Pack' },
+  { name: 'pythongosssss', role: 'Major contributor, creator of ComfyUI-Custom-Scripts' },
+  { name: 'yoland68', role: 'Creator of ComfyCLI, cofounder, ex-Google' },
+  { name: 'robinjhuang', role: 'Maintains Comfy Registry, cofounder, ex-Google Cloud' },
+  { name: 'jojodecay', role: 'ComfyUI event series host, community & partnerships' },
+  { name: 'christian-byrne', role: 'Fullstack developer' },
+  { name: 'Kosinkadink', role: 'Creator of AnimateDiff-Evolved and Advanced-ControlNet' },
+  { name: 'webfiltered', role: 'Overhauled Litegraph library' },
+  { name: 'Pablo', role: 'Product Design, ex-AI startup founder' },
+  { name: 'ComfyUI Wiki (Daxiong)', role: 'Official docs and templates' },
+  { name: 'ctrlbenlu (Ben)', role: 'Software engineer, ex-robotics' },
+  { name: 'Purz Beats', role: 'Motion graphics designer and ML Engineer' },
+  { name: 'Ricyu (Rich)', role: 'Software engineer, ex-Meta' },
 ]

 const collaborators = [
-  { name: 'Yogo', role: '协作者' },
-  { name: 'Fill (Machine Delusions)', role: '协作者' },
-  { name: 'Julien (MJM)', role: '协作者' },
+  { name: 'Yogo', role: 'Collaborator' },
+  { name: 'Fill (Machine Delusions)', role: 'Collaborator' },
+  { name: 'Julien (MJM)', role: 'Collaborator' },
 ]

 const projects = [
-  { name: 'ComfyUI', description: '生成式 AI 工作流的核心节点式界面。' },
-  { name: 'ComfyUI Manager', description: '一键安装、更新和管理自定义节点。' },
-  { name: 'Comfy Registry', description: '发布和发现自定义节点的官方注册表。' },
-  { name: 'Frontends', description: '驱动 ComfyUI 体验的桌面端和 Web 前端。' },
-  { name: 'Docs', description: '官方文档、指南和教程。' },
+  { name: 'ComfyUI', description: 'The core node-based interface for generative AI workflows.' },
+  { name: 'ComfyUI Manager', description: 'Install, update, and manage custom nodes with one click.' },
+  { name: 'Comfy Registry', description: 'The official registry for publishing and discovering custom nodes.' },
+  { name: 'Frontends', description: 'The desktop and web frontends that power the ComfyUI experience.' },
+  { name: 'Docs', description: 'Official documentation, guides, and tutorials.' },
 ]

 const faqs = [
  {
-    q: 'ComfyUI 免费吗？',
-    a: '是的。ComfyUI 是免费开源的，基于 GPL-3.0 许可证。您可以将其用于个人和商业项目。',
+    q: 'Is ComfyUI free?',
+    a: 'Yes. ComfyUI is free and open-source under the GPL-3.0 license. You can use it for personal and commercial projects.',
  },
  {
-    q: '谁在开发 ComfyUI？',
-    a: 'ComfyUI 由 comfyanonymous 创建，由一个小而专注的开发团队和社区贡献者共同维护。',
+    q: 'Who is behind ComfyUI?',
+    a: 'ComfyUI was created by comfyanonymous and is maintained by a small, dedicated team of developers and community contributors.',
  },
  {
-    q: '如何参与贡献？',
-    a: '查看我们的 GitHub 仓库来报告问题、提交 Pull Request 或构建自定义节点。加入我们的 Discord 社区与其他贡献者交流。',
+    q: 'How can I contribute?',
+    a: 'Check out our GitHub repositories to report issues, submit pull requests, or build custom nodes. Join our Discord community to connect with other contributors.',
  },
  {
-    q: '未来有什么计划？',
-    a: '我们专注于让 ComfyUI 成为生成式 AI 的操作系统——提升性能、扩展模型支持，为创作者和开发者打造更好的工具。',
+    q: 'What are the future plans?',
+    a: 'We are focused on making ComfyUI the operating system for generative AI — improving performance, expanding model support, and building better tools for creators and developers.',
  },
 ]
 ---

-<BaseLayout title="关于我们 — Comfy" description="了解 ComfyUI 背后的团队和使命——开源的生成式 AI 平台。">
-  <SiteNav locale="zh-CN" client:load />
+<BaseLayout title="关于我们 — Comfy" description="Learn about the team and mission behind ComfyUI, the open-source generative AI platform.">
+  <SiteNav client:load />
  <main>
-    <!-- 主页横幅 -->
+    <!-- Hero -->
    <section class="px-6 pb-24 pt-40 text-center">
      <h1 class="mx-auto max-w-4xl text-4xl font-bold leading-tight md:text-6xl">
-        开创视觉与音频媒体的下一个前沿
+        Crafting the next frontier of visual and audio media
      </h1>
      <p class="mx-auto mt-6 max-w-2xl text-lg text-smoke-700">
-        一个开源社区和公司，致力于为生成式 AI 创作者打造最强大的工具。
+        An open-source community and company building the most powerful tools for generative AI creators.
      </p>
    </section>

-    <!-- 我们的使命 -->
+    <!-- Our Mission -->
    <section class="bg-charcoal-800 px-6 py-24">
      <div class="mx-auto max-w-3xl text-center">
-        <h2 class="text-sm font-semibold uppercase tracking-widest text-brand-yellow">我们的使命</h2>
+        <h2 class="text-sm font-semibold uppercase tracking-widest text-brand-yellow">Our Mission</h2>
        <p class="mt-6 text-3xl font-bold md:text-4xl">
-          我们想打造生成式 AI 的操作系统。
+          We want to build the operating system for Gen AI.
        </p>
        <p class="mt-6 text-lg leading-relaxed text-smoke-700">
-          我们正在构建让创作者完全掌控生成式 AI 的基础工具。
-          从图像和视频合成到音频生成，ComfyUI 提供了一个模块化的
-          节点式环境，让专业人士和爱好者可以创建、迭代
-          和部署生产级工作流——没有黑箱。
+          We're building the foundational tools that give creators full control over generative AI.
+          From image and video synthesis to audio generation, ComfyUI provides a modular,
+          node-based environment where professionals and enthusiasts can craft, iterate,
+          and deploy production-quality workflows — without black boxes.
        </p>
      </div>
    </section>

-    <!-- 我们做什么？ -->
+    <!-- What Do We Do? -->
    <section class="px-6 py-24">
      <div class="mx-auto max-w-5xl">
-        <h2 class="text-center text-3xl font-bold md:text-4xl">我们做什么？</h2>
+        <h2 class="text-center text-3xl font-bold md:text-4xl">What Do We Do?</h2>
        <div class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {projects.map((project) => (
            <div class="rounded-xl border border-white/10 bg-charcoal-600 p-6">
@@ -98,23 +98,24 @@ const faqs = [
      </div>
    </section>

-    <!-- 我们是谁 -->
+    <!-- Who We Are -->
    <section class="bg-charcoal-800 px-6 py-24">
      <div class="mx-auto max-w-3xl text-center">
-        <h2 class="text-3xl font-bold md:text-4xl">我们是谁</h2>
+        <h2 class="text-3xl font-bold md:text-4xl">Who We Are</h2>
        <p class="mt-6 text-lg leading-relaxed text-smoke-700">
-          ComfyUI 最初是 comfyanonymous 的个人项目，后来发展成为一个全球性的
-          创作者、开发者和研究者社区。今天，Comfy Org 是一个位于旧金山的小型扁平化团队，
-          由相信开源 AI 工具的投资者支持。我们与令人难以置信的贡献者社区一起工作，
-          他们构建自定义节点、分享工作流，并不断突破生成式 AI 的边界。
+          ComfyUI started as a personal project by comfyanonymous and grew into a global community
+          of creators, developers, and researchers. Today, Comfy Org is a small, flat team based in
+          San Francisco, backed by investors who believe in open-source AI tooling. We work
+          alongside an incredible community of contributors who build custom nodes, share workflows,
+          and push the boundaries of what's possible with generative AI.
        </p>
      </div>
    </section>

-    <!-- 团队 -->
+    <!-- Team -->
    <section class="px-6 py-24">
      <div class="mx-auto max-w-6xl">
-        <h2 class="text-center text-3xl font-bold md:text-4xl">团队</h2>
+        <h2 class="text-center text-3xl font-bold md:text-4xl">Team</h2>
        <div class="mt-12 grid gap-6 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
          {team.map((member) => (
            <div class="rounded-xl border border-white/10 p-5 text-center">
@@ -127,10 +128,10 @@ const faqs = [
      </div>
    </section>

-    <!-- 协作者 -->
+    <!-- Collaborators -->
    <section class="bg-charcoal-800 px-6 py-16">
      <div class="mx-auto max-w-4xl text-center">
-        <h2 class="text-2xl font-bold">协作者</h2>
+        <h2 class="text-2xl font-bold">Collaborators</h2>
        <div class="mt-8 flex flex-wrap items-center justify-center gap-8">
          {collaborators.map((person) => (
            <div class="text-center">
@@ -142,10 +143,10 @@ const faqs = [
      </div>
    </section>

-    <!-- 常见问题 -->
+    <!-- FAQs -->
    <section class="px-6 py-24">
      <div class="mx-auto max-w-3xl">
-        <h2 class="text-center text-3xl font-bold md:text-4xl">常见问题</h2>
+        <h2 class="text-center text-3xl font-bold md:text-4xl">FAQs</h2>
        <div class="mt-12 space-y-10">
          {faqs.map((faq) => (
            <div>
@@ -157,19 +158,19 @@ const faqs = [
      </div>
    </section>

-    <!-- 加入我们 CTA -->
+    <!-- Join Our Team CTA -->
    <section class="bg-charcoal-800 px-6 py-24 text-center">
-      <h2 class="text-3xl font-bold md:text-4xl">加入我们的团队</h2>
+      <h2 class="text-3xl font-bold md:text-4xl">Join Our Team</h2>
      <p class="mx-auto mt-4 max-w-xl text-smoke-700">
-        我们正在寻找热衷于开源、生成式 AI 和打造优秀开发者工具的人。
+        We're looking for people who are passionate about open-source, generative AI, and building great developer tools.
      </p>
      <a
        href="/careers"
        class="mt-8 inline-block rounded-full bg-brand-yellow px-8 py-3 text-sm font-semibold text-black transition-opacity hover:opacity-90"
      >
-        查看开放职位
+        View Open Positions
      </a>
    </section>
  </main>
-  <SiteFooter locale="zh-CN" />
+  <SiteFooter />
 </BaseLayout>
--- a/apps/website/src/pages/zh-CN/careers.astro
+++ b/apps/website/src/pages/zh-CN/careers.astro
@@ -78,7 +78,7 @@ const questions = [
  title="招聘 — Comfy"
  description="加入构建生成式 AI 操作系统的团队。工程、设计、市场营销等岗位开放招聘中。"
 >
-  <SiteNav locale="zh-CN" client:load />
+  <SiteNav client:load />
  <main>
    <!-- Hero -->
    <section class="px-6 pb-24 pt-40">
@@ -196,5 +196,5 @@ const questions = [
      </div>
    </section>
  </main>
-  <SiteFooter locale="zh-CN" />
+  <SiteFooter />
 </BaseLayout>
--- a/apps/website/src/pages/zh-CN/download.astro
+++ b/apps/website/src/pages/zh-CN/download.astro
@@ -32,7 +32,7 @@ const cards = [
 ---

 <BaseLayout title="下载 — Comfy">
-  <SiteNav locale="zh-CN" client:load />
+  <SiteNav client:load />
  <main class="mx-auto max-w-5xl px-6 py-32 text-center">
    <h1 class="text-4xl font-bold text-white md:text-5xl">
      下载 ComfyUI
@@ -76,5 +76,5 @@ const cards = [
      </p>
    </div>
  </main>
-  <SiteFooter locale="zh-CN" />
+  <SiteFooter />
 </BaseLayout>
--- a/apps/website/src/pages/zh-CN/gallery.astro
+++ b/apps/website/src/pages/zh-CN/gallery.astro
@@ -5,7 +5,7 @@ import SiteFooter from '../../components/SiteFooter.vue'
 ---

 <BaseLayout title="作品集 — Comfy">
-  <SiteNav locale="zh-CN" client:load />
+  <SiteNav client:load />
  <main class="bg-black text-white">
    <!-- Hero -->
    <section class="mx-auto max-w-5xl px-6 pb-16 pt-32 text-center">
@@ -39,5 +39,5 @@ import SiteFooter from '../../components/SiteFooter.vue'
      </a>
    </section>
  </main>
-  <SiteFooter locale="zh-CN" />
+  <SiteFooter />
 </BaseLayout>
--- a/apps/website/src/pages/zh-CN/index.astro
+++ b/apps/website/src/pages/zh-CN/index.astro
@@ -16,19 +16,19 @@ import SiteFooter from '../../components/SiteFooter.vue'
 ---

 <BaseLayout title="Comfy — 视觉 AI 的专业控制">
-  <SiteNav locale="zh-CN" client:load />
+  <SiteNav client:load />
  <main>
-    <HeroSection locale="zh-CN" />
-    <SocialProofBar locale="zh-CN" />
-    <ProductShowcase locale="zh-CN" />
-    <ValuePillars locale="zh-CN" />
-    <UseCaseSection locale="zh-CN" client:visible />
-    <CaseStudySpotlight locale="zh-CN" />
-    <TestimonialsSection locale="zh-CN" client:visible />
-    <GetStartedSection locale="zh-CN" />
-    <CTASection locale="zh-CN" />
-    <ManifestoSection locale="zh-CN" />
-    <AcademySection locale="zh-CN" />
+    <HeroSection />
+    <SocialProofBar />
+    <ProductShowcase />
+    <ValuePillars />
+    <UseCaseSection client:visible />
+    <CaseStudySpotlight />
+    <TestimonialsSection client:visible />
+    <GetStartedSection />
+    <CTASection />
+    <ManifestoSection />
+    <AcademySection />
  </main>
-  <SiteFooter locale="zh-CN" />
+  <SiteFooter />
 </BaseLayout>
--- a/apps/website/src/pages/zh-CN/privacy-policy.astro
+++ b/apps/website/src/pages/zh-CN/privacy-policy.astro
@@ -9,7 +9,7 @@ import SiteFooter from '../../components/SiteFooter.vue'
  description="Comfy 隐私政策。了解我们如何收集、使用和保护您的个人信息。"
  noindex
 >
-  <SiteNav locale="zh-CN" client:load />
+  <SiteNav client:load />
  <main class="mx-auto max-w-3xl px-6 py-24">
    <h1 class="text-3xl font-bold text-white">隐私政策</h1>
    <p class="mt-2 text-sm text-smoke-500">生效日期：2025年4月18日</p>
@@ -229,5 +229,5 @@ import SiteFooter from '../../components/SiteFooter.vue'
      </p>
    </section>
  </main>
-  <SiteFooter locale="zh-CN" />
+  <SiteFooter />
 </BaseLayout>
--- a/apps/website/src/pages/zh-CN/terms-of-service.astro
+++ b/apps/website/src/pages/zh-CN/terms-of-service.astro
@@ -9,7 +9,7 @@ import SiteFooter from '../../components/SiteFooter.vue'
  description="ComfyUI 及相关 Comfy 服务的服务条款。"
  noindex
 >
-  <SiteNav locale="zh-CN" client:load />
+  <SiteNav client:load />
  <main class="mx-auto max-w-3xl px-6 py-24 sm:py-32">
    <header class="mb-16">
      <h1 class="text-3xl font-bold text-white">服务条款</h1>
@@ -216,5 +216,5 @@ import SiteFooter from '../../components/SiteFooter.vue'
      </div>
    </section>
  </main>
-  <SiteFooter locale="zh-CN" />
+  <SiteFooter />
 </BaseLayout>
--- a/browser_tests/AGENTS.md
+++ b/browser_tests/AGENTS.md
@@ -40,39 +40,6 @@ browser_tests/
 - **`fixtures/helpers/`** — Focused helper classes. Domain-specific actions that coordinate multiple page objects (e.g. canvas operations, workflow loading).
 - **`fixtures/utils/`** — Pure utility functions. No `Page` dependency; stateless helpers that can be used anywhere.

-## Page Object Locator Style
-
-Define UI element locators as `public readonly` properties assigned in the constructor — not as getter methods. Getters that simply return a locator add unnecessary indirection and hide the object shape from IDE auto-complete.
-
-```typescript
-// ✅ Correct — public readonly, assigned in constructor
-export class MyDialog extends BaseDialog {
-  public readonly submitButton: Locator
-  public readonly cancelButton: Locator
-
-  constructor(page: Page) {
-    super(page)
-    this.submitButton = this.root.getByRole('button', { name: 'Submit' })
-    this.cancelButton = this.root.getByRole('button', { name: 'Cancel' })
-  }
-}
-
-// ❌ Avoid — getter-based locators
-export class MyDialog extends BaseDialog {
-  get submitButton() {
-    return this.root.getByRole('button', { name: 'Submit' })
-  }
-}
-```
-
-**Keep as getters only when:**
-
- Lazy initialization is needed (`this._tab ??= new Tab(this.page)`)
- The value is computed from runtime state (e.g. `get id() { return this.userIds[index] }`)
- It's a private convenience accessor (e.g. `private get page() { return this.comfyPage.page }`)
-
-When a class has cached locator properties, prefer reusing them in methods rather than rebuilding locators from scratch.
-
 ## Polling Assertions

 Prefer `expect.poll()` over `expect(async () => { ... }).toPass()` when the block contains a single async call with a single assertion. `expect.poll()` is more readable and gives better error messages (shows actual vs expected on failure).
--- a/browser_tests/FLAKE_PREVENTION_RULES.md
+++ b/browser_tests/FLAKE_PREVENTION_RULES.md
@@ -83,21 +83,6 @@ await expect
  a different reproduction pattern.
 - Verify with the smallest command that exercises the flaky path.

-## 7. Common Flake Patterns
-
-| Pattern                               | Bad                                                               | Fix                                                                      |
-| ------------------------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------ |
-| **Snapshot-then-assert**              | `expect(await evaluate()).toBe(x)`                                | `await expect.poll(() => evaluate()).toBe(x)`                            |
-| **Immediate boundingBox/layout read** | `const box = await loc.boundingBox(); expect(box!.width).toBe(w)` | `await expect.poll(() => loc.boundingBox().then(b => b?.width)).toBe(w)` |
-| **Immediate graph state after drop**  | `expect(await getLinkCount()).toBe(1)`                            | `await expect.poll(() => getLinkCount()).toBe(1)`                        |
-| **Fake readiness helper**             | Helper that clicks but doesn't assert state                       | Remove; poll the actual value                                            |
-| **nextFrame after menu click**        | `clickMenuItem(x); nextFrame()`                                   | `clickMenuItem(x); contextMenu.waitForHidden()`                          |
-| **Tight poll timeout**                | `expect.poll(..., { timeout: 250 })`                              | ≥2000ms; prefer default (5000ms)                                         |
-| **Immediate count()**                 | `const n = await loc.count(); expect(n).toBe(3)`                  | `await expect(loc).toHaveCount(3)`                                       |
-| **Immediate evaluate after mutation** | `setSetting(); expect(await evaluate()).toBe(x)`                  | `await expect.poll(() => evaluate()).toBe(x)`                            |
-| **Screenshot without readiness**      | `loadWorkflow(); nextFrame(); toHaveScreenshot()`                 | `waitForNodes()` or poll state first                                     |
-| **Non-deterministic node order**      | `getNodeRefsByType('X')[0]` with >1 match                         | `getNodeRefById(id)` or guard `toHaveLength(1)`                          |
-
 ## Current Local Noise

 These are local distractions, not automatic CI root causes:
--- 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:**
@@ -236,8 +210,8 @@ Most common testing needs are already addressed by these helpers, which will mak

   ```typescript
   // Prefer this:
-   await expect.poll(() => node.isPinned()).toBe(true)
-   await expect.poll(() => node.getProperty('title')).toBe('Expected Title')
+   expect(await node.isPinned()).toBe(true)
+   expect(await node.getProperty('title')).toBe('Expected Title')

   // Over this - only use when needed:
   await expect(comfyPage.canvas).toHaveScreenshot('state.png')
--- a/browser_tests/assets/cube.obj
+++ b/browser_tests/assets/cube.obj
@@ -1,40 +0,0 @@
-# Blender 5.2.0 Alpha
-# www.blender.org
-mtllib Untitled.mtl
-o Cube
-v 2.857396 2.486626 -0.081892
-v 2.857396 0.486626 -0.081892
-v 2.857396 2.486626 1.918108
-v 2.857396 0.486626 1.918108
-v 0.857396 2.486626 -0.081892
-v 0.857396 0.486626 -0.081892
-v 0.857396 2.486626 1.918108
-v 0.857396 0.486626 1.918108
-vn -0.0000 1.0000 -0.0000
-vn -0.0000 -0.0000 1.0000
-vn -1.0000 -0.0000 -0.0000
-vn -0.0000 -1.0000 -0.0000
-vn 1.0000 -0.0000 -0.0000
-vn -0.0000 -0.0000 -1.0000
-vt 0.625000 0.500000
-vt 0.875000 0.500000
-vt 0.875000 0.750000
-vt 0.625000 0.750000
-vt 0.375000 0.750000
-vt 0.625000 1.000000
-vt 0.375000 1.000000
-vt 0.375000 0.000000
-vt 0.625000 0.000000
-vt 0.625000 0.250000
-vt 0.375000 0.250000
-vt 0.125000 0.500000
-vt 0.375000 0.500000
-vt 0.125000 0.750000
-s 0
-usemtl Material
-f 1/1/1 5/2/1 7/3/1 3/4/1
-f 4/5/2 3/4/2 7/6/2 8/7/2
-f 8/8/3 7/9/3 5/10/3 6/11/3
-f 6/12/4 2/13/4 4/5/4 8/14/4
-f 2/13/5 1/1/5 3/4/5 4/5/5
-f 6/11/6 5/10/6 1/1/6 2/13/6
--- a/browser_tests/assets/missing/missing_media_bypassed.json
+++ b/browser_tests/assets/missing/missing_media_bypassed.json
@@ -1,34 +0,0 @@
-{
-  "last_node_id": 10,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 10,
-      "type": "LoadImage",
-      "pos": [50, 200],
-      "size": [315, 314],
-      "flags": {},
-      "order": 0,
-      "mode": 4,
-      "inputs": [],
-      "outputs": [
-        { "name": "IMAGE", "type": "IMAGE", "links": null },
-        { "name": "MASK", "type": "MASK", "links": null }
-      ],
-      "properties": {
-        "Node name for S&R": "LoadImage"
-      },
-      "widgets_values": ["nonexistent_test_image_12345.png", "image"]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "offset": [0, 0],
-      "scale": 1
-    }
-  },
-  "version": 0.4
-}
--- a/browser_tests/assets/missing/missing_media_multiple.json
+++ b/browser_tests/assets/missing/missing_media_multiple.json
@@ -5,7 +5,7 @@
    {
      "id": 10,
      "type": "LoadImage",
-      "pos": [50, 200],
+      "pos": [50, 50],
      "size": [315, 314],
      "flags": {},
      "order": 0,
@@ -31,7 +31,7 @@
    {
      "id": 11,
      "type": "LoadImage",
-      "pos": [450, 200],
+      "pos": [450, 50],
      "size": [315, 314],
      "flags": {},
      "order": 1,
--- a/browser_tests/assets/missing/missing_media_single.json
+++ b/browser_tests/assets/missing/missing_media_single.json
@@ -5,7 +5,7 @@
    {
      "id": 10,
      "type": "LoadImage",
-      "pos": [50, 200],
+      "pos": [50, 50],
      "size": [315, 314],
      "flags": {},
      "order": 0,
--- a/browser_tests/assets/missing/missing_models.json
+++ b/browser_tests/assets/missing/missing_models.json
@@ -1,27 +1,7 @@
 {
-  "last_node_id": 1,
+  "last_node_id": 0,
  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 1,
-      "type": "CheckpointLoaderSimple",
-      "pos": [256, 256],
-      "size": [315, 98],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        { "name": "MODEL", "type": "MODEL", "links": null },
-        { "name": "CLIP", "type": "CLIP", "links": null },
-        { "name": "VAE", "type": "VAE", "links": null }
-      ],
-      "properties": {
-        "Node name for S&R": "CheckpointLoaderSimple"
-      },
-      "widgets_values": ["fake_model.safetensors"]
-    }
-  ],
+  "nodes": [],
  "links": [],
  "groups": [],
  "config": {},
@@ -35,7 +15,7 @@
    {
      "name": "fake_model.safetensors",
      "url": "http://localhost:8188/api/devtools/fake_model.safetensors",
-      "directory": "checkpoints"
+      "directory": "text_encoders"
    }
  ],
  "version": 0.4
--- a/browser_tests/assets/missing/missing_models_bypassed.json
+++ b/browser_tests/assets/missing/missing_models_bypassed.json
@@ -1,42 +0,0 @@
-{
-  "last_node_id": 1,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 1,
-      "type": "CheckpointLoaderSimple",
-      "pos": [256, 256],
-      "size": [315, 98],
-      "flags": {},
-      "order": 0,
-      "mode": 4,
-      "inputs": [],
-      "outputs": [
-        { "name": "MODEL", "type": "MODEL", "links": null },
-        { "name": "CLIP", "type": "CLIP", "links": null },
-        { "name": "VAE", "type": "VAE", "links": null }
-      ],
-      "properties": {
-        "Node name for S&R": "CheckpointLoaderSimple"
-      },
-      "widgets_values": ["fake_model.safetensors"]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 1,
-      "offset": [0, 0]
-    }
-  },
-  "models": [
-    {
-      "name": "fake_model.safetensors",
-      "url": "http://localhost:8188/api/devtools/fake_model.safetensors",
-      "directory": "checkpoints"
-    }
-  ],
-  "version": 0.4
-}
--- a/browser_tests/assets/missing/missing_models_in_subgraph.json
+++ b/browser_tests/assets/missing/missing_models_in_subgraph.json
@@ -1,141 +0,0 @@
-{
-  "id": "test-missing-models-in-subgraph",
-  "revision": 0,
-  "last_node_id": 2,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 1,
-      "type": "KSampler",
-      "pos": [100, 100],
-      "size": [270, 262],
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [
-        { "name": "model", "type": "MODEL", "link": null },
-        { "name": "positive", "type": "CONDITIONING", "link": null },
-        { "name": "negative", "type": "CONDITIONING", "link": null },
-        { "name": "latent_image", "type": "LATENT", "link": null }
-      ],
-      "outputs": [{ "name": "LATENT", "type": "LATENT", "links": [] }],
-      "properties": {
-        "Node name for S&R": "KSampler"
-      },
-      "widgets_values": [0, "randomize", 20, 8, "euler", "simple", 1]
-    },
-    {
-      "id": 2,
-      "type": "subgraph-with-missing-model",
-      "pos": [450, 100],
-      "size": [400, 200],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [{ "name": "model", "type": "MODEL", "link": null }],
-      "outputs": [{ "name": "MODEL", "type": "MODEL", "links": null }],
-      "properties": {},
-      "widgets_values": []
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "definitions": {
-    "subgraphs": [
-      {
-        "id": "subgraph-with-missing-model",
-        "version": 1,
-        "state": {
-          "lastGroupId": 0,
-          "lastNodeId": 1,
-          "lastLinkId": 2,
-          "lastRerouteId": 0
-        },
-        "revision": 0,
-        "config": {},
-        "name": "Subgraph with Missing Model",
-        "inputNode": {
-          "id": -10,
-          "bounding": [100, 200, 120, 60]
-        },
-        "outputNode": {
-          "id": -20,
-          "bounding": [500, 200, 120, 60]
-        },
-        "inputs": [
-          {
-            "id": "input1-id",
-            "name": "model",
-            "type": "MODEL",
-            "linkIds": [1],
-            "pos": { "0": 150, "1": 220 }
-          }
-        ],
-        "outputs": [
-          {
-            "id": "output1-id",
-            "name": "MODEL",
-            "type": "MODEL",
-            "linkIds": [2],
-            "pos": { "0": 520, "1": 220 }
-          }
-        ],
-        "widgets": [],
-        "nodes": [
-          {
-            "id": 1,
-            "type": "CheckpointLoaderSimple",
-            "pos": [250, 180],
-            "size": [315, 98],
-            "flags": {},
-            "order": 0,
-            "mode": 0,
-            "inputs": [],
-            "outputs": [
-              { "name": "MODEL", "type": "MODEL", "links": [2] },
-              { "name": "CLIP", "type": "CLIP", "links": null },
-              { "name": "VAE", "type": "VAE", "links": null }
-            ],
-            "properties": {
-              "Node name for S&R": "CheckpointLoaderSimple"
-            },
-            "widgets_values": ["fake_model.safetensors"]
-          }
-        ],
-        "links": [
-          {
-            "id": 1,
-            "origin_id": -10,
-            "origin_slot": 0,
-            "target_id": 1,
-            "target_slot": 0,
-            "type": "MODEL"
-          },
-          {
-            "id": 2,
-            "origin_id": 1,
-            "origin_slot": 0,
-            "target_id": -20,
-            "target_slot": 0,
-            "type": "MODEL"
-          }
-        ]
-      }
-    ]
-  },
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 1,
-      "offset": [0, 0]
-    }
-  },
-  "models": [
-    {
-      "name": "fake_model.safetensors",
-      "url": "http://localhost:8188/api/devtools/fake_model.safetensors",
-      "directory": "checkpoints"
-    }
-  ],
-  "version": 0.4
-}
--- a/browser_tests/assets/missing/missing_models_with_nodes.json
+++ b/browser_tests/assets/missing/missing_models_with_nodes.json
@@ -78,7 +78,7 @@
    {
      "name": "fake_model.safetensors",
      "url": "http://localhost:8188/api/devtools/fake_model.safetensors",
-      "directory": "checkpoints"
+      "directory": "text_encoders"
    }
  ],
  "version": 0.4
--- a/browser_tests/assets/widgets/image_crop_widget.json
+++ b/browser_tests/assets/widgets/image_crop_widget.json
@@ -1,50 +0,0 @@
-{
-  "last_node_id": 1,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 1,
-      "type": "ImageCropV2",
-      "pos": [50, 50],
-      "size": [400, 500],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "image",
-          "type": "IMAGE",
-          "link": null
-        }
-      ],
-      "outputs": [
-        {
-          "name": "IMAGE",
-          "type": "IMAGE",
-          "links": null
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "ImageCropV2"
-      },
-      "widgets_values": [
-        {
-          "x": 0,
-          "y": 0,
-          "width": 512,
-          "height": 512
-        }
-      ]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "offset": [0, 0],
-      "scale": 1
-    }
-  },
-  "version": 0.4
-}
--- a/browser_tests/assets/widgets/image_crop_with_source.json
+++ b/browser_tests/assets/widgets/image_crop_with_source.json
@@ -1,100 +0,0 @@
-{
-  "last_node_id": 3,
-  "last_link_id": 2,
-  "nodes": [
-    {
-      "id": 1,
-      "type": "LoadImage",
-      "pos": [50, 50],
-      "size": [315, 314],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "IMAGE",
-          "type": "IMAGE",
-          "links": [1]
-        },
-        {
-          "name": "MASK",
-          "type": "MASK",
-          "links": null
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "LoadImage"
-      },
-      "widgets_values": ["example.png", "image"]
-    },
-    {
-      "id": 2,
-      "type": "ImageCropV2",
-      "pos": [450, 50],
-      "size": [400, 500],
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "image",
-          "type": "IMAGE",
-          "link": 1
-        }
-      ],
-      "outputs": [
-        {
-          "name": "IMAGE",
-          "type": "IMAGE",
-          "links": [2]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "ImageCropV2"
-      },
-      "widgets_values": [
-        {
-          "x": 10,
-          "y": 10,
-          "width": 100,
-          "height": 100
-        }
-      ]
-    },
-    {
-      "id": 3,
-      "type": "PreviewImage",
-      "pos": [900, 50],
-      "size": [315, 270],
-      "flags": {},
-      "order": 2,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "images",
-          "type": "IMAGE",
-          "link": 2
-        }
-      ],
-      "outputs": [],
-      "properties": {
-        "Node name for S&R": "PreviewImage"
-      },
-      "widgets_values": []
-    }
-  ],
-  "links": [
-    [1, 1, 0, 2, 0, "IMAGE"],
-    [2, 2, 0, 3, 0, "IMAGE"]
-  ],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "offset": [0, 0],
-      "scale": 1
-    }
-  },
-  "version": 0.4
-}
--- a/browser_tests/fixtures/ComfyMouse.ts
+++ b/browser_tests/fixtures/ComfyMouse.ts
@@ -26,10 +26,11 @@ export class ComfyMouse implements Omit<Mouse, 'move'> {
  static defaultSteps = 5
  static defaultOptions: DragOptions = { steps: ComfyMouse.defaultSteps }

-  readonly mouse: Mouse
+  constructor(readonly comfyPage: ComfyPage) {}

-  constructor(readonly comfyPage: ComfyPage) {
-    this.mouse = comfyPage.page.mouse
+  /** The normal Playwright {@link Mouse} property from {@link ComfyPage.page}. */
+  get mouse() {
+    return this.comfyPage.page.mouse
  }

  async nextFrame() {
--- a/browser_tests/fixtures/ComfyPage.ts
+++ b/browser_tests/fixtures/ComfyPage.ts
@@ -34,7 +34,6 @@ import { createAssetHelper } from '@e2e/fixtures/helpers/AssetHelper'
 import { AssetsHelper } from '@e2e/fixtures/helpers/AssetsHelper'
 import { CanvasHelper } from '@e2e/fixtures/helpers/CanvasHelper'
 import { ClipboardHelper } from '@e2e/fixtures/helpers/ClipboardHelper'
-import { CloudAuthHelper } from '@e2e/fixtures/helpers/CloudAuthHelper'
 import { CommandHelper } from '@e2e/fixtures/helpers/CommandHelper'
 import { DragDropHelper } from '@e2e/fixtures/helpers/DragDropHelper'
 import { FeatureFlagHelper } from '@e2e/fixtures/helpers/FeatureFlagHelper'
@@ -73,13 +72,15 @@ class ComfyMenu {
  public readonly sideToolbar: Locator
  public readonly propertiesPanel: ComfyPropertiesPanel
  public readonly modeToggleButton: Locator
-  public readonly buttons: Locator

  constructor(public readonly page: Page) {
    this.sideToolbar = page.getByTestId(TestIds.sidebar.toolbar)
    this.modeToggleButton = page.getByTestId(TestIds.sidebar.modeToggle)
    this.propertiesPanel = new ComfyPropertiesPanel(page)
-    this.buttons = this.sideToolbar.locator('.side-bar-button')
+  }
+
+  get buttons() {
+    return this.sideToolbar.locator('.side-bar-button')
  }

  get modelLibraryTab() {
@@ -180,8 +181,6 @@ export class ComfyPage {
  public readonly assets: AssetsHelper
  public readonly assetApi: AssetHelper
  public readonly modelLibrary: ModelLibraryHelper
-  public readonly cloudAuth: CloudAuthHelper
-  public readonly visibleToasts: Locator

  /** Worker index to test user ID */
  public readonly userIds: string[] = []
@@ -224,7 +223,6 @@ export class ComfyPage {
    this.workflow = new WorkflowHelper(this)
    this.contextMenu = new ContextMenu(page)
    this.toast = new ToastHelper(page)
-    this.visibleToasts = this.toast.visibleToasts
    this.dragDrop = new DragDropHelper(page)
    this.featureFlags = new FeatureFlagHelper(page)
    this.command = new CommandHelper(page)
@@ -234,7 +232,10 @@ export class ComfyPage {
    this.assets = new AssetsHelper(page)
    this.assetApi = createAssetHelper(page)
    this.modelLibrary = new ModelLibraryHelper(page)
-    this.cloudAuth = new CloudAuthHelper(page)
+  }
+
+  get visibleToasts() {
+    return this.toast.visibleToasts
  }

  async setupUser(username: string) {
@@ -321,7 +322,7 @@ export class ComfyPage {
        // window.app.extensionManager => GraphView ready
        window.app && window.app.extensionManager
    )
-    await this.page.locator('.p-blockui-mask').waitFor({ state: 'hidden' })
+    await this.page.waitForSelector('.p-blockui-mask', { state: 'hidden' })
    await this.nextFrame()
  }

@@ -371,7 +372,7 @@ export class ComfyPage {
  }

  async closeMenu() {
-    await this.page.locator('button.comfy-close-menu-btn').click()
+    await this.page.click('button.comfy-close-menu-btn')
    await this.nextFrame()
  }

@@ -388,8 +389,9 @@ export class ComfyPage {
    await modal.waitFor({ state: 'hidden' })
  }

-  get domWidgets(): Locator {
-    return this.page.locator('.dom-widget')
+  /** Get number of DOM widgets on the canvas. */
+  async getDOMWidgetCount() {
+    return await this.page.locator('.dom-widget').count()
  }

  async setFocusMode(focusMode: boolean) {
@@ -414,8 +416,6 @@ export const comfyPageFixture = base.extend<{
    const userId = await comfyPage.setupUser(username)
    comfyPage.userIds[parallelIndex] = userId

-    const isVueNodes = testInfo.tags.includes('@vue-nodes')
-
    try {
      await comfyPage.setupSettings({
        'Comfy.UseNewMenu': 'Top',
@@ -438,23 +438,14 @@ export const comfyPageFixture = base.extend<{
        'Comfy.VersionCompatibility.DisableWarnings': true,
        // Disable errors tab to prevent missing model detection from
        // rendering error indicators on nodes during unrelated tests.
-        'Comfy.RightSidePanel.ShowErrorsTab': false,
-        ...(isVueNodes && { 'Comfy.VueNodes.Enabled': true })
+        'Comfy.RightSidePanel.ShowErrorsTab': false
      })
    } catch (e) {
      console.error(e)
    }

-    if (testInfo.tags.includes('@cloud')) {
-      await comfyPage.cloudAuth.mockAuth()
-    }
-
    await comfyPage.setup()

-    if (isVueNodes) {
-      await comfyPage.vueNodes.waitForNodes()
-    }
-
    const needsPerf =
      testInfo.tags.includes('@perf') || testInfo.tags.includes('@audit')
    if (needsPerf) await comfyPage.perf.init()
--- a/browser_tests/fixtures/UserSelectPage.ts
+++ b/browser_tests/fixtures/UserSelectPage.ts
@@ -1,22 +1,30 @@
-import type { Locator, Page } from '@playwright/test'
+import type { Page } from '@playwright/test'
 import { test as base } from '@playwright/test'

 export class UserSelectPage {
-  public readonly selectionUrl: string
-  public readonly container: Locator
-  public readonly newUserInput: Locator
-  public readonly existingUserSelect: Locator
-  public readonly nextButton: Locator
-
  constructor(
    public readonly url: string,
    public readonly page: Page
-  ) {
-    this.selectionUrl = url + '/user-select'
-    this.container = page.locator('#comfy-user-selection')
-    this.newUserInput = this.container.locator('#new-user-input')
-    this.existingUserSelect = this.container.locator('#existing-user-select')
-    this.nextButton = this.container.getByText('Next')
+  ) {}
+
+  get selectionUrl() {
+    return this.url + '/user-select'
+  }
+
+  get container() {
+    return this.page.locator('#comfy-user-selection')
+  }
+
+  get newUserInput() {
+    return this.container.locator('#new-user-input')
+  }
+
+  get existingUserSelect() {
+    return this.container.locator('#existing-user-select')
+  }
+
+  get nextButton() {
+    return this.container.getByText('Next')
  }
 }

--- a/browser_tests/fixtures/VueNodeHelpers.ts
+++ b/browser_tests/fixtures/VueNodeHelpers.ts
@@ -7,20 +7,13 @@ import { TestIds } from '@e2e/fixtures/selectors'
 import { VueNodeFixture } from '@e2e/fixtures/utils/vueNodeFixtures'

 export class VueNodeHelpers {
+  constructor(private page: Page) {}
+
  /**
   * Get locator for all Vue node components in the DOM
   */
-  public readonly nodes: Locator
-  /**
-   * Get locator for selected Vue node components (using visual selection indicators)
-   */
-  public readonly selectedNodes: Locator
-
-  constructor(private page: Page) {
-    this.nodes = page.locator('[data-node-id]')
-    this.selectedNodes = page.locator(
-      '[data-node-id].outline-node-component-outline'
-    )
+  get nodes(): Locator {
+    return this.page.locator('[data-node-id]')
  }

  /**
@@ -30,6 +23,13 @@ export class VueNodeHelpers {
    return this.page.locator(`[data-node-id="${nodeId}"]`)
  }

+  /**
+   * Get locator for selected Vue node components (using visual selection indicators)
+   */
+  get selectedNodes(): Locator {
+    return this.page.locator('[data-node-id].outline-node-component-outline')
+  }
+
  /**
   * Get locator for Vue nodes by the node's title (displayed name in the header).
   * Matches against the actual title element, not the full node body.
@@ -37,7 +37,7 @@ export class VueNodeHelpers {
   */
  getNodeByTitle(title: string): Locator {
    return this.page.locator('[data-node-id]').filter({
-      has: this.page.getByTestId('node-title').filter({ hasText: title })
+      has: this.page.locator('[data-testid="node-title"]', { hasText: title })
    })
  }

@@ -48,6 +48,13 @@ export class VueNodeHelpers {
    return await this.nodes.count()
  }

+  /**
+   * Get count of selected Vue nodes
+   */
+  async getSelectedNodeCount(): Promise<number> {
+    return await this.selectedNodes.count()
+  }
+
  /**
   * Get all Vue node IDs currently in the DOM
   */
@@ -146,7 +153,7 @@ export class VueNodeHelpers {
        expectedCount
      )
    } else {
-      await this.page.locator('[data-node-id]').first().waitFor()
+      await this.page.waitForSelector('[data-node-id]')
    }
  }

--- a/browser_tests/fixtures/components/BaseDialog.ts
+++ b/browser_tests/fixtures/components/BaseDialog.ts
@@ -25,7 +25,7 @@ export class BaseDialog {
  }

  async close(): Promise<void> {
-    await this.closeButton.click()
+    await this.closeButton.click({ force: true })
    await this.waitForHidden()
  }
 }
--- a/browser_tests/fixtures/components/ComfyNodeSearchBox.ts
+++ b/browser_tests/fixtures/components/ComfyNodeSearchBox.ts
@@ -3,11 +3,13 @@ import type { Locator, Page } from '@playwright/test'

 export class ComfyNodeSearchFilterSelectionPanel {
  readonly root: Locator
-  readonly header: Locator

  constructor(public readonly page: Page) {
    this.root = page.getByRole('dialog')
-    this.header = this.root
+  }
+
+  get header() {
+    return this.root
      .locator('div')
      .filter({ hasText: 'Add node filter condition' })
  }
@@ -39,8 +41,6 @@ export class ComfyNodeSearchFilterSelectionPanel {
 export class ComfyNodeSearchBox {
  public readonly input: Locator
  public readonly dropdown: Locator
-  public readonly filterButton: Locator
-  public readonly filterChips: Locator
  public readonly filterSelectionPanel: ComfyNodeSearchFilterSelectionPanel

  constructor(public readonly page: Page) {
@@ -50,15 +50,13 @@ export class ComfyNodeSearchBox {
    this.dropdown = page.locator(
      '.comfy-vue-node-search-container .p-autocomplete-list'
    )
-    this.filterButton = page.locator(
-      '.comfy-vue-node-search-container .filter-button'
-    )
-    this.filterChips = page.locator(
-      '.comfy-vue-node-search-container .p-autocomplete-chip-item'
-    )
    this.filterSelectionPanel = new ComfyNodeSearchFilterSelectionPanel(page)
  }

+  get filterButton() {
+    return this.page.locator('.comfy-vue-node-search-container .filter-button')
+  }
+
  async fillAndSelectFirstNode(
    nodeName: string,
    options?: { suggestionIndex?: number; exact?: boolean }
@@ -80,6 +78,12 @@ export class ComfyNodeSearchBox {
    await this.filterSelectionPanel.addFilter(filterValue, filterType)
  }

+  get filterChips() {
+    return this.page.locator(
+      '.comfy-vue-node-search-container .p-autocomplete-chip-item'
+    )
+  }
+
  async removeFilter(index: number) {
    await this.filterChips.nth(index).locator('.p-chip-remove-icon').click()
  }
--- a/browser_tests/fixtures/components/ContextMenu.ts
+++ b/browser_tests/fixtures/components/ContextMenu.ts
@@ -2,14 +2,18 @@ import { expect } from '@playwright/test'
 import type { Locator, Page } from '@playwright/test'

 export class ContextMenu {
-  public readonly primeVueMenu: Locator
-  public readonly litegraphMenu: Locator
-  public readonly menuItems: Locator
+  constructor(public readonly page: Page) {}

-  constructor(public readonly page: Page) {
-    this.primeVueMenu = page.locator('.p-contextmenu, .p-menu')
-    this.litegraphMenu = page.locator('.litemenu')
-    this.menuItems = page.locator('.p-menuitem, .litemenu-entry')
+  get primeVueMenu() {
+    return this.page.locator('.p-contextmenu, .p-menu')
+  }
+
+  get litegraphMenu() {
+    return this.page.locator('.litemenu')
+  }
+
+  get menuItems() {
+    return this.page.locator('.p-menuitem, .litemenu-entry')
  }

  async clickMenuItem(name: string): Promise<void> {
@@ -61,9 +65,21 @@ export class ContextMenu {
  }

  async waitForHidden(): Promise<void> {
+    const waitIfExists = async (locator: Locator, menuName: string) => {
+      const count = await locator.count()
+      if (count > 0) {
+        await locator.waitFor({ state: 'hidden' }).catch((error: Error) => {
+          console.warn(
+            `[waitForHidden] ${menuName} waitFor failed:`,
+            error.message
+          )
+        })
+      }
+    }
+
    await Promise.all([
-      this.primeVueMenu.waitFor({ state: 'hidden' }),
-      this.litegraphMenu.waitFor({ state: 'hidden' })
+      waitIfExists(this.primeVueMenu, 'primeVueMenu'),
+      waitIfExists(this.litegraphMenu, 'litegraphMenu')
    ])
  }
 }
--- a/browser_tests/fixtures/components/OutputHistory.ts
+++ b/browser_tests/fixtures/components/OutputHistory.ts
@@ -1,97 +0,0 @@
-import type { Locator, Page } from '@playwright/test'
-
-import { TestIds } from '@e2e/fixtures/selectors'
-
-const ids = TestIds.outputHistory
-
-export class OutputHistoryComponent {
-  constructor(private readonly page: Page) {}
-
-  get outputs(): Locator {
-    return this.page.getByTestId(ids.outputs)
-  }
-
-  get welcome(): Locator {
-    return this.page.getByTestId(ids.welcome)
-  }
-
-  get outputInfo(): Locator {
-    return this.page.getByTestId(ids.outputInfo)
-  }
-
-  get activeQueue(): Locator {
-    return this.page.getByTestId(ids.activeQueue)
-  }
-
-  get queueBadge(): Locator {
-    return this.page.getByTestId(ids.queueBadge)
-  }
-
-  get inProgressItems(): Locator {
-    return this.page.getByTestId(ids.inProgressItem)
-  }
-
-  get historyItems(): Locator {
-    return this.page.getByTestId(ids.historyItem)
-  }
-
-  get skeletons(): Locator {
-    return this.page.getByTestId(ids.skeleton)
-  }
-
-  get latentPreviews(): Locator {
-    return this.page.getByTestId(ids.latentPreview)
-  }
-
-  get imageOutputs(): Locator {
-    return this.page.getByTestId(ids.imageOutput)
-  }
-
-  get videoOutputs(): Locator {
-    return this.page.getByTestId(ids.videoOutput)
-  }
-
-  /** The currently selected (checked) in-progress item. */
-  get selectedInProgressItem(): Locator {
-    return this.page.locator(
-      `[data-testid="${ids.inProgressItem}"][data-state="checked"]`
-    )
-  }
-
-  /** The currently selected (checked) history item. */
-  get selectedHistoryItem(): Locator {
-    return this.page.locator(
-      `[data-testid="${ids.historyItem}"][data-state="checked"]`
-    )
-  }
-
-  /** The header-level progress bar. */
-  get headerProgressBar(): Locator {
-    return this.page.getByTestId(ids.headerProgressBar)
-  }
-
-  /** The in-progress item's progress bar (inside the thumbnail). */
-  get itemProgressBar(): Locator {
-    return this.inProgressItems.first().getByTestId(ids.itemProgressBar)
-  }
-
-  /** Overall progress in the header bar. */
-  get headerOverallProgress(): Locator {
-    return this.headerProgressBar.getByTestId(ids.progressOverall)
-  }
-
-  /** Node progress in the header bar. */
-  get headerNodeProgress(): Locator {
-    return this.headerProgressBar.getByTestId(ids.progressNode)
-  }
-
-  /** Overall progress in the in-progress item bar. */
-  get itemOverallProgress(): Locator {
-    return this.itemProgressBar.getByTestId(ids.progressOverall)
-  }
-
-  /** Node progress in the in-progress item bar. */
-  get itemNodeProgress(): Locator {
-    return this.itemProgressBar.getByTestId(ids.progressNode)
-  }
-}
--- a/browser_tests/fixtures/components/SettingDialog.ts
+++ b/browser_tests/fixtures/components/SettingDialog.ts
@@ -1,22 +1,15 @@
-import type { Locator, Page } from '@playwright/test'
+import type { Page } from '@playwright/test'

 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
 import { BaseDialog } from '@e2e/fixtures/components/BaseDialog'

 export class SettingDialog extends BaseDialog {
-  public readonly searchBox: Locator
-  public readonly categories: Locator
-  public readonly contentArea: Locator
-
  constructor(
    page: Page,
    public readonly comfyPage: ComfyPage
  ) {
    super(page, TestIds.dialogs.settings)
-    this.searchBox = this.root.getByPlaceholder(/Search/)
-    this.categories = this.root.locator('nav').getByRole('button')
-    this.contentArea = this.root.getByRole('main')
  }

  async open() {
@@ -43,15 +36,27 @@ export class SettingDialog extends BaseDialog {
    await settingInputDiv.locator('input').click()
  }

+  get searchBox() {
+    return this.root.getByPlaceholder(/Search/)
+  }
+
+  get categories() {
+    return this.root.locator('nav').getByRole('button')
+  }
+
  category(name: string) {
    return this.root.locator('nav').getByRole('button', { name })
  }

+  get contentArea() {
+    return this.root.getByRole('main')
+  }
+
  async goToAboutPanel() {
    const aboutButton = this.root.locator('nav').getByRole('button', {
      name: 'About'
    })
    await aboutButton.click()
-    await this.page.locator('.about-container').waitFor()
+    await this.page.waitForSelector('.about-container')
  }
 }
--- a/browser_tests/fixtures/components/SidebarTab.ts
+++ b/browser_tests/fixtures/components/SidebarTab.ts
@@ -5,16 +5,18 @@ import type { WorkspaceStore } from '@e2e/types/globals'
 import { TestIds } from '@e2e/fixtures/selectors'

 class SidebarTab {
-  public readonly tabButton: Locator
-  public readonly selectedTabButton: Locator
-
  constructor(
    public readonly page: Page,
    public readonly tabId: string
-  ) {
-    this.tabButton = page.locator(`.${tabId}-tab-button`)
-    this.selectedTabButton = page.locator(
-      `.${tabId}-tab-button.side-bar-button-selected`
+  ) {}
+
+  get tabButton() {
+    return this.page.locator(`.${this.tabId}-tab-button`)
+  }
+
+  get selectedTabButton() {
+    return this.page.locator(
+      `.${this.tabId}-tab-button.side-bar-button-selected`
    )
  }

@@ -33,19 +35,28 @@ class SidebarTab {
 }

 export class NodeLibrarySidebarTab extends SidebarTab {
-  public readonly nodeLibrarySearchBoxInput: Locator
-  public readonly nodeLibraryTree: Locator
-  public readonly nodePreview: Locator
-  public readonly tabContainer: Locator
-  public readonly newFolderButton: Locator
-
  constructor(public override readonly page: Page) {
    super(page, 'node-library')
-    this.nodeLibrarySearchBoxInput = page.getByPlaceholder('Search Nodes...')
-    this.nodeLibraryTree = page.getByTestId(TestIds.sidebar.nodeLibrary)
-    this.nodePreview = page.locator('.node-lib-node-preview')
-    this.tabContainer = page.locator('.sidebar-content-container')
-    this.newFolderButton = this.tabContainer.locator('.new-folder-button')
+  }
+
+  get nodeLibrarySearchBoxInput() {
+    return this.page.getByPlaceholder('Search Nodes...')
+  }
+
+  get nodeLibraryTree() {
+    return this.page.getByTestId(TestIds.sidebar.nodeLibrary)
+  }
+
+  get nodePreview() {
+    return this.page.locator('.node-lib-node-preview')
+  }
+
+  get tabContainer() {
+    return this.page.locator('.sidebar-content-container')
+  }
+
+  get newFolderButton() {
+    return this.tabContainer.locator('.new-folder-button')
  }

  override async open() {
@@ -90,25 +101,34 @@ export class NodeLibrarySidebarTab extends SidebarTab {
 }

 export class NodeLibrarySidebarTabV2 extends SidebarTab {
-  public readonly searchInput: Locator
-  public readonly sidebarContent: Locator
-  public readonly allTab: Locator
-  public readonly blueprintsTab: Locator
-  public readonly sortButton: Locator
-
  constructor(public override readonly page: Page) {
    super(page, 'node-library')
-    this.searchInput = page.getByPlaceholder('Search...')
-    this.sidebarContent = page.locator('.sidebar-content-container')
-    this.allTab = this.getTab('All')
-    this.blueprintsTab = this.getTab('Blueprints')
-    this.sortButton = this.sidebarContent.getByRole('button', { name: 'Sort' })
+  }
+
+  get searchInput() {
+    return this.page.getByPlaceholder('Search...')
+  }
+
+  get sidebarContent() {
+    return this.page.locator('.sidebar-content-container')
  }

  getTab(name: string) {
    return this.sidebarContent.getByRole('tab', { name, exact: true })
  }

+  get allTab() {
+    return this.getTab('All')
+  }
+
+  get blueprintsTab() {
+    return this.getTab('Blueprints')
+  }
+
+  get sortButton() {
+    return this.sidebarContent.getByRole('button', { name: 'Sort' })
+  }
+
  getFolder(folderName: string) {
    return this.sidebarContent
      .getByRole('treeitem', { name: folderName })
@@ -134,15 +154,12 @@ export class NodeLibrarySidebarTabV2 extends SidebarTab {
 }

 export class WorkflowsSidebarTab extends SidebarTab {
-  public readonly root: Locator
-  public readonly activeWorkflowLabel: Locator
-
  constructor(public override readonly page: Page) {
    super(page, 'workflows')
-    this.root = page.getByTestId(TestIds.sidebar.workflows)
-    this.activeWorkflowLabel = this.root.locator(
-      '.comfyui-workflows-open .p-tree-node-selected .node-label'
-    )
+  }
+
+  get root() {
+    return this.page.getByTestId(TestIds.sidebar.workflows)
  }

  async getOpenedWorkflowNames() {
@@ -152,7 +169,9 @@ export class WorkflowsSidebarTab extends SidebarTab {
  }

  async getActiveWorkflowName() {
-    return await this.activeWorkflowLabel.innerText()
+    return await this.root
+      .locator('.comfyui-workflows-open .p-tree-node-selected .node-label')
+      .innerText()
  }

  async getTopLevelSavedWorkflowNames() {
@@ -205,27 +224,36 @@ export class WorkflowsSidebarTab extends SidebarTab {
 }

 export class ModelLibrarySidebarTab extends SidebarTab {
-  public readonly searchInput: Locator
-  public readonly modelTree: Locator
-  public readonly refreshButton: Locator
-  public readonly loadAllFoldersButton: Locator
-  public readonly folderNodes: Locator
-  public readonly leafNodes: Locator
-  public readonly modelPreview: Locator
-
  constructor(public override readonly page: Page) {
    super(page, 'model-library')
-    this.searchInput = page.getByPlaceholder('Search Models...')
-    this.modelTree = page.locator('.model-lib-tree-explorer')
-    this.refreshButton = page.getByRole('button', { name: 'Refresh' })
-    this.loadAllFoldersButton = page.getByRole('button', {
-      name: 'Load All Folders'
-    })
-    this.folderNodes = this.modelTree.locator(
-      '.p-tree-node:not(.p-tree-node-leaf)'
-    )
-    this.leafNodes = this.modelTree.locator('.p-tree-node-leaf')
-    this.modelPreview = page.locator('.model-lib-model-preview')
+  }
+
+  get searchInput() {
+    return this.page.getByPlaceholder('Search Models...')
+  }
+
+  get modelTree() {
+    return this.page.locator('.model-lib-tree-explorer')
+  }
+
+  get refreshButton() {
+    return this.page.getByRole('button', { name: 'Refresh' })
+  }
+
+  get loadAllFoldersButton() {
+    return this.page.getByRole('button', { name: 'Load All Folders' })
+  }
+
+  get folderNodes() {
+    return this.modelTree.locator('.p-tree-node:not(.p-tree-node-leaf)')
+  }
+
+  get leafNodes() {
+    return this.modelTree.locator('.p-tree-node-leaf')
+  }
+
+  get modelPreview() {
+    return this.page.locator('.model-lib-model-preview')
  }

  override async open() {
@@ -249,97 +277,137 @@ export class ModelLibrarySidebarTab extends SidebarTab {
 }

 export class AssetsSidebarTab extends SidebarTab {
-  // --- Tab navigation ---
-  public readonly generatedTab: Locator
-  public readonly importedTab: Locator
-
-  // --- Empty state ---
-  public readonly emptyStateMessage: Locator
-
-  // --- Search & filter ---
-  public readonly searchInput: Locator
-  public readonly settingsButton: Locator
-
-  // --- View mode ---
-  public readonly listViewOption: Locator
-  public readonly gridViewOption: Locator
-
-  // --- Sort options (cloud-only, shown inside settings popover) ---
-  public readonly sortNewestFirst: Locator
-  public readonly sortOldestFirst: Locator
-
-  // --- Asset cards ---
-  public readonly assetCards: Locator
-  public readonly selectedCards: Locator
-
-  // --- List view items ---
-  public readonly listViewItems: Locator
-
-  // --- Selection footer ---
-  public readonly selectionFooter: Locator
-  public readonly selectionCountButton: Locator
-  public readonly deselectAllButton: Locator
-  public readonly deleteSelectedButton: Locator
-  public readonly downloadSelectedButton: Locator
-
-  // --- Folder view ---
-  public readonly backToAssetsButton: Locator
-
-  // --- Loading ---
-  public readonly skeletonLoaders: Locator
-
  constructor(public override readonly page: Page) {
    super(page, 'assets')
-    this.generatedTab = page.getByRole('tab', { name: 'Generated' })
-    this.importedTab = page.getByRole('tab', { name: 'Imported' })
-    this.emptyStateMessage = page.getByText(
+  }
+
+  // --- Tab navigation ---
+
+  get generatedTab() {
+    return this.page.getByRole('tab', { name: 'Generated' })
+  }
+
+  get importedTab() {
+    return this.page.getByRole('tab', { name: 'Imported' })
+  }
+
+  // --- Empty state ---
+
+  get emptyStateMessage() {
+    return this.page.getByText(
      'Upload files or generate content to see them here'
    )
-    this.searchInput = page.getByPlaceholder('Search Assets...')
-    this.settingsButton = page.getByRole('button', { name: 'View settings' })
-    this.listViewOption = page.getByText('List view')
-    this.gridViewOption = page.getByText('Grid view')
-    this.sortNewestFirst = page.getByText('Newest first')
-    this.sortOldestFirst = page.getByText('Oldest first')
-    this.assetCards = page
-      .getByRole('button')
-      .and(page.locator('[data-selected]'))
-    this.selectedCards = page.locator('[data-selected="true"]')
-    this.listViewItems = page.locator(
-      '.sidebar-content-container [role="button"][tabindex="0"]'
-    )
-    this.selectionFooter = page
-      .locator('.sidebar-content-container')
-      .locator('..')
-      .locator('[class*="h-18"]')
-    this.selectionCountButton = page.getByText(/Assets Selected: \d+/)
-    this.deselectAllButton = page.getByText('Deselect all')
-    this.deleteSelectedButton = page
-      .getByTestId('assets-delete-selected')
-      .or(page.locator('button:has(.icon-\\[lucide--trash-2\\])').last())
-      .first()
-    this.downloadSelectedButton = page
-      .getByTestId('assets-download-selected')
-      .or(page.locator('button:has(.icon-\\[lucide--download\\])').last())
-      .first()
-    this.backToAssetsButton = page.getByText('Back to all assets')
-    this.skeletonLoaders = page.locator(
-      '.sidebar-content-container .animate-pulse'
-    )
  }

  emptyStateTitle(title: string) {
    return this.page.getByText(title)
  }

-  getAssetCardByName(name: string) {
-    return this.assetCards.filter({ hasText: name })
+  // --- 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()
@@ -351,24 +419,28 @@ export class AssetsSidebarTab extends SidebarTab {
  async dismissToasts() {
    const closeButtons = this.page.locator('.p-toast-close-button')
    for (const btn of await closeButtons.all()) {
-      await btn.click().catch(() => {})
+      await btn.click({ force: true }).catch(() => {})
    }
    // Wait for all toast elements to fully animate out and detach from DOM
    await expect(this.page.locator('.p-toast-message'))
-      .toHaveCount(0)
+      .toHaveCount(0, { timeout: 5000 })
      .catch(() => {})
  }

  async switchToImported() {
    await this.dismissToasts()
    await this.importedTab.click()
-    await expect(this.importedTab).toHaveAttribute('aria-selected', 'true')
+    await expect(this.importedTab).toHaveAttribute('aria-selected', 'true', {
+      timeout: 3000
+    })
  }

  async switchToGenerated() {
    await this.dismissToasts()
    await this.generatedTab.click()
-    await expect(this.generatedTab).toHaveAttribute('aria-selected', 'true')
+    await expect(this.generatedTab).toHaveAttribute('aria-selected', 'true', {
+      timeout: 3000
+    })
  }

  async openSettingsMenu() {
@@ -391,7 +463,7 @@ export class AssetsSidebarTab extends SidebarTab {

  async waitForAssets(count?: number) {
    if (count !== undefined) {
-      await expect(this.assetCards).toHaveCount(count)
+      await expect(this.assetCards).toHaveCount(count, { timeout: 5000 })
    } else {
      await this.assetCards.first().waitFor({ state: 'visible', timeout: 5000 })
    }
--- a/browser_tests/fixtures/components/SignInDialog.ts
+++ b/browser_tests/fixtures/components/SignInDialog.ts
@@ -10,17 +10,6 @@ export class SignInDialog extends BaseDialog {
  readonly apiKeyButton: Locator
  readonly termsLink: Locator
  readonly privacyLink: Locator
-  readonly heading: Locator
-  readonly signUpLink: Locator
-  readonly signInLink: Locator
-  readonly signUpEmailInput: Locator
-  readonly signUpPasswordInput: Locator
-  readonly signUpConfirmPasswordInput: Locator
-  readonly signUpButton: Locator
-  readonly apiKeyHeading: Locator
-  readonly apiKeyInput: Locator
-  readonly backButton: Locator
-  readonly dividerText: Locator

  constructor(page: Page) {
    super(page)
@@ -33,22 +22,6 @@ export class SignInDialog extends BaseDialog {
    })
    this.termsLink = this.root.getByRole('link', { name: 'Terms of Use' })
    this.privacyLink = this.root.getByRole('link', { name: 'Privacy Policy' })
-    this.heading = this.root.getByRole('heading').first()
-    this.signUpLink = this.root.getByText('Sign up', { exact: true })
-    this.signInLink = this.root.getByText('Sign in', { exact: true })
-    this.signUpEmailInput = this.root.locator('#comfy-org-sign-up-email')
-    this.signUpPasswordInput = this.root.locator('#comfy-org-sign-up-password')
-    this.signUpConfirmPasswordInput = this.root.locator(
-      '#comfy-org-sign-up-confirm-password'
-    )
-    this.signUpButton = this.root.getByRole('button', {
-      name: 'Sign up',
-      exact: true
-    })
-    this.apiKeyHeading = this.root.getByRole('heading', { name: 'API Key' })
-    this.apiKeyInput = this.root.locator('#comfy-org-api-key')
-    this.backButton = this.root.getByRole('button', { name: 'Back' })
-    this.dividerText = this.root.getByText('Or continue with')
  }

  async open() {
@@ -57,4 +30,48 @@ export class SignInDialog extends BaseDialog {
    })
    await this.waitForVisible()
  }
+
+  get heading() {
+    return this.root.getByRole('heading').first()
+  }
+
+  get signUpLink() {
+    return this.root.getByText('Sign up', { exact: true })
+  }
+
+  get signInLink() {
+    return this.root.getByText('Sign in', { exact: true })
+  }
+
+  get signUpEmailInput() {
+    return this.root.locator('#comfy-org-sign-up-email')
+  }
+
+  get signUpPasswordInput() {
+    return this.root.locator('#comfy-org-sign-up-password')
+  }
+
+  get signUpConfirmPasswordInput() {
+    return this.root.locator('#comfy-org-sign-up-confirm-password')
+  }
+
+  get signUpButton() {
+    return this.root.getByRole('button', { name: 'Sign up', exact: true })
+  }
+
+  get apiKeyHeading() {
+    return this.root.getByRole('heading', { name: 'API Key' })
+  }
+
+  get apiKeyInput() {
+    return this.root.locator('#comfy-org-api-key')
+  }
+
+  get backButton() {
+    return this.root.getByRole('button', { name: 'Back' })
+  }
+
+  get dividerText() {
+    return this.root.getByText('Or continue with')
+  }
 }
--- a/browser_tests/fixtures/components/Topbar.ts
+++ b/browser_tests/fixtures/components/Topbar.ts
@@ -5,12 +5,10 @@ import type { WorkspaceStore } from '@e2e/types/globals'
 export class Topbar {
  private readonly menuLocator: Locator
  private readonly menuTrigger: Locator
-  readonly newWorkflowButton: Locator

  constructor(public readonly page: Page) {
    this.menuLocator = page.locator('.comfy-command-menu')
    this.menuTrigger = page.locator('.comfy-menu-button-wrapper')
-    this.newWorkflowButton = page.locator('.new-blank-workflow-button')
  }

  async getTabNames(): Promise<string[]> {
@@ -52,6 +50,10 @@ export class Topbar {
    return classes ? !classes.includes('invisible') : false
  }

+  get newWorkflowButton(): Locator {
+    return this.page.locator('.new-blank-workflow-button')
+  }
+
  getWorkflowTab(tabName: string): Locator {
    return this.page
      .locator(`.workflow-tabs .workflow-label:has-text("${tabName}")`)
@@ -71,7 +73,7 @@ export class Topbar {
  async closeWorkflowTab(tabName: string) {
    const tab = this.getWorkflowTab(tabName)
    await tab.hover()
-    await tab.locator('.close-button').click()
+    await tab.locator('.close-button').click({ force: true })
  }

  getSaveDialog(): Locator {
@@ -105,7 +107,7 @@ export class Topbar {
      { timeout: 3000 }
    )
    // Wait for the dialog to close.
-    await this.getSaveDialog().waitFor({ state: 'hidden' })
+    await this.getSaveDialog().waitFor({ state: 'hidden', timeout: 500 })

    // Check if a confirmation dialog appeared (e.g., "Overwrite existing file?")
    // If so, return early to let the test handle the confirmation
--- a/browser_tests/fixtures/helpers/AppModeHelper.ts
+++ b/browser_tests/fixtures/helpers/AppModeHelper.ts
@@ -3,7 +3,6 @@ import type { Locator, Page } from '@playwright/test'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'

-import { OutputHistoryComponent } from '@e2e/fixtures/components/OutputHistory'
 import { AppModeWidgetHelper } from '@e2e/fixtures/helpers/AppModeWidgetHelper'
 import { BuilderFooterHelper } from '@e2e/fixtures/helpers/BuilderFooterHelper'
 import { BuilderSaveAsHelper } from '@e2e/fixtures/helpers/BuilderSaveAsHelper'
@@ -15,66 +14,14 @@ export class AppModeHelper {
  readonly footer: BuilderFooterHelper
  readonly saveAs: BuilderSaveAsHelper
  readonly select: BuilderSelectHelper
-  readonly outputHistory: OutputHistoryComponent
  readonly widgets: AppModeWidgetHelper
-  /** The "Connect an output" popover shown when saving without outputs. */
-  public readonly connectOutputPopover: Locator
-  /** The empty-state placeholder shown when no outputs are selected. */
-  public readonly outputPlaceholder: Locator
-  /** The linear-mode widget list container (visible in app mode). */
-  public readonly linearWidgets: Locator
-  /** The PrimeVue Popover for the image picker (renders with role="dialog"). */
-  public readonly imagePickerPopover: Locator
-  /** The Run button in the app mode footer. */
-  public readonly runButton: Locator
-  /** The welcome screen shown when app mode has no outputs or no nodes. */
-  public readonly welcome: Locator
-  /** The empty workflow message shown when no nodes exist. */
-  public readonly emptyWorkflowText: Locator
-  /** The "Build app" button shown when nodes exist but no outputs. */
-  public readonly buildAppButton: Locator
-  /** The "Back to workflow" button on the welcome screen. */
-  public readonly backToWorkflowButton: Locator
-  /** The "Load template" button shown when no nodes exist. */
-  public readonly loadTemplateButton: Locator
-  /** The cancel button for an in-progress run in the output history. */
-  public readonly cancelRunButton: Locator

  constructor(private readonly comfyPage: ComfyPage) {
    this.steps = new BuilderStepsHelper(comfyPage)
    this.footer = new BuilderFooterHelper(comfyPage)
    this.saveAs = new BuilderSaveAsHelper(comfyPage)
    this.select = new BuilderSelectHelper(comfyPage)
-    this.outputHistory = new OutputHistoryComponent(comfyPage.page)
    this.widgets = new AppModeWidgetHelper(comfyPage)
-    this.connectOutputPopover = this.page.getByTestId(
-      TestIds.builder.connectOutputPopover
-    )
-    this.outputPlaceholder = this.page.getByTestId(
-      TestIds.builder.outputPlaceholder
-    )
-    this.linearWidgets = this.page.getByTestId('linear-widgets')
-    this.imagePickerPopover = this.page
-      .getByRole('dialog')
-      .filter({ has: this.page.getByRole('button', { name: 'All' }) })
-      .first()
-    this.runButton = this.page
-      .getByTestId('linear-run-button')
-      .getByRole('button', { name: /run/i })
-    this.welcome = this.page.getByTestId(TestIds.appMode.welcome)
-    this.emptyWorkflowText = this.page.getByTestId(
-      TestIds.appMode.emptyWorkflow
-    )
-    this.buildAppButton = this.page.getByTestId(TestIds.appMode.buildApp)
-    this.backToWorkflowButton = this.page.getByTestId(
-      TestIds.appMode.backToWorkflow
-    )
-    this.loadTemplateButton = this.page.getByTestId(
-      TestIds.appMode.loadTemplate
-    )
-    this.cancelRunButton = this.page.getByTestId(
-      TestIds.outputHistory.cancelRun
-    )
  }

  private get page(): Page {
@@ -106,8 +53,9 @@ export class AppModeHelper {

  /** Toggle app mode (linear view) on/off. */
  async toggleAppMode() {
-    await this.comfyPage.workflow.waitForActiveWorkflow()
-    await this.comfyPage.command.executeCommand('Comfy.ToggleLinear')
+    await this.page.evaluate(() => {
+      window.app!.extensionManager.command.execute('Comfy.ToggleLinear')
+    })
    await this.comfyPage.nextFrame()
  }

@@ -146,6 +94,36 @@ export class AppModeHelper {
    await this.toggleAppMode()
  }

+  /** The "Connect an output" popover shown when saving without outputs. */
+  get connectOutputPopover(): Locator {
+    return this.page.getByTestId(TestIds.builder.connectOutputPopover)
+  }
+
+  /** The empty-state placeholder shown when no outputs are selected. */
+  get outputPlaceholder(): Locator {
+    return this.page.getByTestId(TestIds.builder.outputPlaceholder)
+  }
+
+  /** The linear-mode widget list container (visible in app mode). */
+  get linearWidgets(): Locator {
+    return this.page.locator('[data-testid="linear-widgets"]')
+  }
+
+  /** The PrimeVue Popover for the image picker (renders with role="dialog"). */
+  get imagePickerPopover(): Locator {
+    return this.page
+      .getByRole('dialog')
+      .filter({ has: this.page.getByRole('button', { name: 'All' }) })
+      .first()
+  }
+
+  /** The Run button in the app mode footer. */
+  get runButton(): Locator {
+    return this.page
+      .getByTestId('linear-run-button')
+      .getByRole('button', { name: /run/i })
+  }
+
  /**
   * Get the actions menu trigger for a widget in the app mode widget list.
   * @param widgetName Text shown in the widget label (e.g. "seed").
--- a/browser_tests/fixtures/helpers/BuilderFooterHelper.ts
+++ b/browser_tests/fixtures/helpers/BuilderFooterHelper.ts
@@ -4,32 +4,48 @@ import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'

 export class BuilderFooterHelper {
-  public readonly nav: Locator
-  public readonly exitButton: Locator
-  public readonly nextButton: Locator
-  public readonly backButton: Locator
-  public readonly saveButton: Locator
-  public readonly saveGroup: Locator
-  public readonly saveAsButton: Locator
-  public readonly saveAsChevron: Locator
-  public readonly opensAsPopover: Locator
-
-  constructor(private readonly comfyPage: ComfyPage) {
-    this.nav = this.page.getByTestId(TestIds.builder.footerNav)
-    this.exitButton = this.buttonByName('Exit app builder')
-    this.nextButton = this.buttonByName('Next')
-    this.backButton = this.buttonByName('Back')
-    this.saveButton = this.page.getByTestId(TestIds.builder.saveButton)
-    this.saveGroup = this.page.getByTestId(TestIds.builder.saveGroup)
-    this.saveAsButton = this.page.getByTestId(TestIds.builder.saveAsButton)
-    this.saveAsChevron = this.page.getByTestId(TestIds.builder.saveAsChevron)
-    this.opensAsPopover = this.page.getByTestId(TestIds.builder.opensAs)
-  }
+  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 saveGroup(): Locator {
+    return this.page.getByTestId(TestIds.builder.saveGroup)
+  }
+
+  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 })
  }
--- a/browser_tests/fixtures/helpers/BuilderSaveAsHelper.ts
+++ b/browser_tests/fixtures/helpers/BuilderSaveAsHelper.ts
@@ -3,61 +3,73 @@ import type { Locator, Page } from '@playwright/test'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'

 export class BuilderSaveAsHelper {
-  /** The save-as dialog (scoped by aria-labelledby). */
-  public readonly dialog: Locator
-  /** The post-save success dialog (scoped by aria-labelledby). */
-  public readonly successDialog: Locator
-  public readonly title: Locator
-  public readonly radioGroup: Locator
-  public readonly nameInput: Locator
-  public readonly saveButton: Locator
-  public readonly successMessage: Locator
-  public readonly viewAppButton: Locator
-  public readonly closeButton: Locator
-  /** The X button to dismiss the success dialog without any action. */
-  public readonly dismissButton: Locator
-  public readonly exitBuilderButton: Locator
-  public readonly overwriteDialog: Locator
-  public readonly overwriteButton: Locator
-
-  constructor(private readonly comfyPage: ComfyPage) {
-    this.dialog = this.page.locator('[aria-labelledby="builder-save"]')
-    this.successDialog = this.page.locator(
-      '[aria-labelledby="builder-save-success"]'
-    )
-    this.title = this.dialog.getByText('Save as')
-    this.radioGroup = this.dialog.getByRole('radiogroup')
-    this.nameInput = this.dialog.getByRole('textbox')
-    this.saveButton = this.dialog.getByRole('button', { name: 'Save' })
-    this.successMessage = this.successDialog.getByText('Successfully saved')
-    this.viewAppButton = this.successDialog.getByRole('button', {
-      name: 'View app'
-    })
-    this.closeButton = this.successDialog
-      .getByRole('button', { name: 'Close', exact: true })
-      .filter({ hasText: 'Close' })
-    this.dismissButton = this.successDialog.locator(
-      'button.p-dialog-close-button'
-    )
-    this.exitBuilderButton = this.successDialog.getByRole('button', {
-      name: 'Exit builder'
-    })
-    this.overwriteDialog = this.page.getByRole('dialog', {
-      name: 'Overwrite existing file?'
-    })
-    this.overwriteButton = this.overwriteDialog.getByRole('button', {
-      name: 'Overwrite'
-    })
-  }
+  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()
--- a/browser_tests/fixtures/helpers/BuilderSelectHelper.ts
+++ b/browser_tests/fixtures/helpers/BuilderSelectHelper.ts
@@ -32,20 +32,7 @@ async function dragByIndex(items: Locator, fromIndex: number, toIndex: number) {
 }

 export class BuilderSelectHelper {
-  /** All IoItem locators in the current step sidebar. */
-  public readonly inputItems: Locator
-  /** All IoItem title locators in the inputs step sidebar. */
-  public readonly inputItemTitles: Locator
-  /** All widget label locators in the preview/arrange sidebar. */
-  public readonly previewWidgetLabels: Locator
-
-  constructor(private readonly comfyPage: ComfyPage) {
-    this.inputItems = this.page.getByTestId(TestIds.builder.ioItem)
-    this.inputItemTitles = this.page.getByTestId(TestIds.builder.ioItemTitle)
-    this.previewWidgetLabels = this.page.getByTestId(
-      TestIds.builder.widgetLabel
-    )
-  }
+  constructor(private readonly comfyPage: ComfyPage) {}

  private get page(): Page {
    return this.comfyPage.page
@@ -56,9 +43,12 @@ export class BuilderSelectHelper {
   * @param title The widget title shown in the IoItem.
   */
  getInputItemMenu(title: string): Locator {
-    return this.inputItems
+    return this.page
+      .getByTestId(TestIds.builder.ioItem)
      .filter({
-        has: this.inputItemTitles.getByText(title, { exact: true })
+        has: this.page
+          .getByTestId(TestIds.builder.ioItemTitle)
+          .getByText(title, { exact: true })
      })
      .getByTestId(TestIds.builder.widgetActionsMenu)
  }
@@ -151,7 +141,6 @@ export class BuilderSelectHelper {
    const widgetLocator = this.comfyPage.vueNodes
      .getNodeLocator(String(nodeRef.id))
      .getByLabel(widgetName, { exact: true })
-    // oxlint-disable-next-line playwright/no-force-option -- Node container has conditional pointer-events:none that blocks actionability
    await widgetLocator.click({ force: true })
    await this.comfyPage.nextFrame()
  }
@@ -161,19 +150,38 @@ export class BuilderSelectHelper {
   * Useful for asserting "Widget not visible" on disconnected inputs.
   */
  getInputItemSubtitle(title: string): Locator {
-    return this.inputItems
+    return this.page
+      .getByTestId(TestIds.builder.ioItem)
      .filter({
-        has: this.inputItemTitles.getByText(title, { exact: true })
+        has: this.page
+          .getByTestId(TestIds.builder.ioItemTitle)
+          .getByText(title, { exact: true })
      })
      .getByTestId(TestIds.builder.ioItemSubtitle)
  }

+  /** All IoItem locators in the current step sidebar. */
+  get inputItems(): Locator {
+    return this.page.getByTestId(TestIds.builder.ioItem)
+  }
+
+  /** All IoItem title locators in the inputs step sidebar. */
+  get inputItemTitles(): Locator {
+    return this.page.getByTestId(TestIds.builder.ioItemTitle)
+  }
+
+  /** All widget label locators in the preview/arrange sidebar. */
+  get previewWidgetLabels(): Locator {
+    return this.page.getByTestId(TestIds.builder.widgetLabel)
+  }
+
  /**
   * Drag an IoItem from one index to another in the inputs step.
   * Items are identified by their 0-based position among visible IoItems.
   */
  async dragInputItem(fromIndex: number, toIndex: number) {
-    await dragByIndex(this.inputItems, fromIndex, toIndex)
+    const items = this.page.getByTestId(TestIds.builder.ioItem)
+    await dragByIndex(items, fromIndex, toIndex)
    await this.comfyPage.nextFrame()
  }

@@ -200,7 +208,6 @@ export class BuilderSelectHelper {
    const nodeLocator = this.comfyPage.vueNodes.getNodeLocator(
      String(nodeRef.id)
    )
-    // oxlint-disable-next-line playwright/no-force-option -- Node container has conditional pointer-events:none that blocks actionability
    await nodeLocator.click({ force: true })
    await this.comfyPage.nextFrame()
  }
--- a/browser_tests/fixtures/helpers/BuilderStepsHelper.ts
+++ b/browser_tests/fixtures/helpers/BuilderStepsHelper.ts
@@ -3,16 +3,16 @@ import type { Locator, Page } from '@playwright/test'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'

 export class BuilderStepsHelper {
-  public readonly toolbar: Locator
-
-  constructor(private readonly comfyPage: ComfyPage) {
-    this.toolbar = this.page.getByRole('navigation', { name: 'App Builder' })
-  }
+  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()
--- a/browser_tests/fixtures/helpers/CanvasHelper.ts
+++ b/browser_tests/fixtures/helpers/CanvasHelper.ts
@@ -74,51 +74,6 @@ export class CanvasHelper {
    await this.nextFrame()
  }

-  /**
-   * Convert a canvas-element-relative position to absolute page coordinates.
-   * Use with `page.mouse` APIs when Vue DOM overlays above the canvas would
-   * cause Playwright's actionability check to fail on the canvas locator.
-   */
-  private async toAbsolute(position: Position): Promise<Position> {
-    const box = await this.canvas.boundingBox()
-    if (!box) throw new Error('Canvas bounding box not available')
-    return { x: box.x + position.x, y: box.y + position.y }
-  }
-
-  /**
-   * Click at canvas-element-relative coordinates using `page.mouse.click()`.
-   * Bypasses Playwright's actionability checks on the canvas locator, which
-   * can fail when Vue-rendered DOM nodes overlay the `<canvas>` element.
-   */
-  async mouseClickAt(
-    position: Position,
-    options?: {
-      button?: 'left' | 'right' | 'middle'
-      modifiers?: ('Shift' | 'Control' | 'Alt' | 'Meta')[]
-    }
-  ): Promise<void> {
-    const abs = await this.toAbsolute(position)
-    const modifiers = options?.modifiers ?? []
-    for (const mod of modifiers) await this.page.keyboard.down(mod)
-    try {
-      await this.page.mouse.click(abs.x, abs.y, {
-        button: options?.button
-      })
-    } finally {
-      for (const mod of modifiers) await this.page.keyboard.up(mod)
-    }
-    await this.nextFrame()
-  }
-
-  /**
-   * Double-click at canvas-element-relative coordinates using `page.mouse`.
-   */
-  async mouseDblclickAt(position: Position): Promise<void> {
-    const abs = await this.toAbsolute(position)
-    await this.page.mouse.dblclick(abs.x, abs.y)
-    await this.nextFrame()
-  }
-
  async clickEmptySpace(): Promise<void> {
    await this.canvas.click({ position: DefaultGraphPositions.emptySpaceClick })
    await this.nextFrame()
--- a/browser_tests/fixtures/helpers/CloudAuthHelper.ts
+++ b/browser_tests/fixtures/helpers/CloudAuthHelper.ts
@@ -1,171 +0,0 @@
-import type { Page } from '@playwright/test'
-
-/**
- * Mocks Firebase authentication for cloud E2E tests.
- *
- * The cloud build's router guard waits for Firebase `onAuthStateChanged`
- * to fire, then checks `getAuthHeader()`. In CI no Firebase project is
- * configured, so the user is never authenticated and the app redirects
- * to `/cloud/login`.
- *
- * This helper seeds Firebase's IndexedDB persistence layer with a mock
- * user and intercepts the Firebase REST APIs (securetoken, identitytoolkit)
- * so the SDK believes a user is signed in. Must be called before navigation.
- */
-export class CloudAuthHelper {
-  constructor(private readonly page: Page) {}
-
-  /**
-   * Set up all auth mocks. Must be called before `comfyPage.setup()`.
-   */
-  async mockAuth(): Promise<void> {
-    await this.seedFirebaseIndexedDB()
-    await this.mockFirebaseEndpoints()
-  }
-
-  /**
-   * Navigate to a lightweight same-origin page to seed Firebase's
-   * IndexedDB persistence with a mock user. This ensures the data
-   * is written before the app loads and Firebase reads it.
-   *
-   * Firebase auth uses `browserLocalPersistence` which stores data in
-   * IndexedDB database `firebaseLocalStorageDb`, object store
-   * `firebaseLocalStorage`, keyed by `firebase:authUser:<apiKey>:<appName>`.
-   */
-  private async seedFirebaseIndexedDB(): Promise<void> {
-    // Navigate to a lightweight endpoint to get a same-origin context
-    await this.page.goto('http://localhost:8188/api/users')
-
-    await this.page.evaluate(() => {
-      const MOCK_USER_DATA = {
-        uid: 'test-user-e2e',
-        email: 'e2e@test.comfy.org',
-        displayName: 'E2E Test User',
-        emailVerified: true,
-        isAnonymous: false,
-        providerData: [
-          {
-            providerId: 'google.com',
-            uid: 'test-user-e2e',
-            displayName: 'E2E Test User',
-            email: 'e2e@test.comfy.org',
-            phoneNumber: null,
-            photoURL: null
-          }
-        ],
-        stsTokenManager: {
-          refreshToken: 'mock-refresh-token',
-          accessToken: 'mock-firebase-id-token',
-          expirationTime: Date.now() + 60 * 60 * 1000
-        },
-        apiKey: 'AIzaSyDa_YMeyzV0SkVe92vBZ1tVikWBmOU5KVE',
-        appName: '[DEFAULT]'
-      }
-
-      const DB_NAME = 'firebaseLocalStorageDb'
-      const STORE_NAME = 'firebaseLocalStorage'
-      const KEY = `firebase:authUser:${MOCK_USER_DATA.apiKey}:${MOCK_USER_DATA.appName}`
-
-      return new Promise<void>((resolve, reject) => {
-        const request = indexedDB.open(DB_NAME)
-        request.onerror = () => reject(request.error)
-        request.onupgradeneeded = () => {
-          const db = request.result
-          if (!db.objectStoreNames.contains(STORE_NAME)) {
-            db.createObjectStore(STORE_NAME)
-          }
-        }
-        request.onsuccess = () => {
-          const db = request.result
-          if (!db.objectStoreNames.contains(STORE_NAME)) {
-            db.close()
-            const upgradeReq = indexedDB.open(DB_NAME, db.version + 1)
-            upgradeReq.onerror = () => reject(upgradeReq.error)
-            upgradeReq.onupgradeneeded = () => {
-              const upgradedDb = upgradeReq.result
-              if (!upgradedDb.objectStoreNames.contains(STORE_NAME)) {
-                upgradedDb.createObjectStore(STORE_NAME)
-              }
-            }
-            upgradeReq.onsuccess = () => {
-              const upgradedDb = upgradeReq.result
-              const tx = upgradedDb.transaction(STORE_NAME, 'readwrite')
-              tx.objectStore(STORE_NAME).put(
-                { fpiVersion: '1', value: MOCK_USER_DATA },
-                KEY
-              )
-              tx.oncomplete = () => {
-                upgradedDb.close()
-                resolve()
-              }
-              tx.onerror = () => reject(tx.error)
-            }
-            return
-          }
-          const tx = db.transaction(STORE_NAME, 'readwrite')
-          tx.objectStore(STORE_NAME).put(
-            { fpiVersion: '1', value: MOCK_USER_DATA },
-            KEY
-          )
-          tx.oncomplete = () => {
-            db.close()
-            resolve()
-          }
-          tx.onerror = () => reject(tx.error)
-        }
-      })
-    })
-  }
-
-  /**
-   * Intercept Firebase Auth REST API endpoints so the SDK can
-   * "refresh" the mock user's token without real credentials.
-   */
-  private async mockFirebaseEndpoints(): Promise<void> {
-    await this.page.route('**/securetoken.googleapis.com/**', (route) =>
-      route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify({
-          access_token: 'mock-access-token',
-          expires_in: '3600',
-          token_type: 'Bearer',
-          refresh_token: 'mock-refresh-token',
-          id_token: 'mock-firebase-id-token',
-          user_id: 'test-user-e2e',
-          project_id: 'dreamboothy-dev'
-        })
-      })
-    )
-
-    await this.page.route('**/identitytoolkit.googleapis.com/**', (route) =>
-      route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify({
-          kind: 'identitytoolkit#GetAccountInfoResponse',
-          users: [
-            {
-              localId: 'test-user-e2e',
-              email: 'e2e@test.comfy.org',
-              displayName: 'E2E Test User',
-              emailVerified: true,
-              validSince: '0',
-              lastLoginAt: String(Date.now()),
-              createdAt: String(Date.now()),
-              lastRefreshAt: new Date().toISOString()
-            }
-          ]
-        })
-      })
-    )
-
-    await this.page.route('**/__/auth/**', (route) =>
-      route.fulfill({
-        status: 200,
-        contentType: 'text/html',
-        body: '<html><body></body></html>'
-      })
-    )
-  }
-}
--- a/browser_tests/fixtures/helpers/ExecutionHelper.ts
+++ b/browser_tests/fixtures/helpers/ExecutionHelper.ts
@@ -1,211 +0,0 @@
-import type { WebSocketRoute } from '@playwright/test'
-
-import type { RawJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
-import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
-import { createMockJob } from '@e2e/fixtures/helpers/AssetsHelper'
-
-/**
- * Helper for simulating prompt execution in e2e tests.
- */
-export class ExecutionHelper {
-  private jobCounter = 0
-  private readonly completedJobs: RawJobListItem[] = []
-  private readonly page: ComfyPage['page']
-  private readonly command: ComfyPage['command']
-  private readonly assets: ComfyPage['assets']
-
-  constructor(
-    comfyPage: ComfyPage,
-    private readonly ws: WebSocketRoute
-  ) {
-    this.page = comfyPage.page
-    this.command = comfyPage.command
-    this.assets = comfyPage.assets
-  }
-
-  /**
-   * Intercept POST /api/prompt, execute Comfy.QueuePrompt, and return
-   * the synthetic job ID.
-   *
-   * The app receives a valid PromptResponse so storeJob() fires
-   * and registers the job against the active workflow path.
-   */
-  async run(): Promise<string> {
-    const jobId = `test-job-${++this.jobCounter}`
-
-    let fulfilled!: () => void
-    const prompted = new Promise<void>((r) => {
-      fulfilled = r
-    })
-
-    await this.page.route(
-      '**/api/prompt',
-      async (route) => {
-        await route.fulfill({
-          status: 200,
-          contentType: 'application/json',
-          body: JSON.stringify({
-            prompt_id: jobId,
-            node_errors: {}
-          })
-        })
-        fulfilled()
-      },
-      { times: 1 }
-    )
-
-    await this.command.executeCommand('Comfy.QueuePrompt')
-    await prompted
-
-    return jobId
-  }
-
-  /**
-   * Send a binary `b_preview_with_metadata` WS message (type 4).
-   * Encodes the metadata and a tiny 1x1 PNG so the app creates a blob URL.
-   */
-  latentPreview(jobId: string, nodeId: string): void {
-    const metadata = JSON.stringify({
-      node_id: nodeId,
-      display_node_id: nodeId,
-      parent_node_id: nodeId,
-      real_node_id: nodeId,
-      prompt_id: jobId,
-      image_type: 'image/png'
-    })
-    const metadataBytes = new TextEncoder().encode(metadata)
-
-    // 1x1 red PNG
-    const png = Buffer.from(
-      'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwADhQGAWjR9awAAAABJRU5ErkJggg==',
-      'base64'
-    )
-
-    // Binary format: [type:uint32][metadataLength:uint32][metadata][imageData]
-    const buf = new ArrayBuffer(8 + metadataBytes.length + png.length)
-    const view = new DataView(buf)
-    view.setUint32(0, 4) // type 4 = PREVIEW_IMAGE_WITH_METADATA
-    view.setUint32(4, metadataBytes.length)
-    new Uint8Array(buf, 8, metadataBytes.length).set(metadataBytes)
-    new Uint8Array(buf, 8 + metadataBytes.length).set(png)
-
-    this.ws.send(Buffer.from(buf))
-  }
-
-  /** Send `execution_start` WS event. */
-  executionStart(jobId: string): void {
-    this.ws.send(
-      JSON.stringify({
-        type: 'execution_start',
-        data: { prompt_id: jobId, timestamp: Date.now() }
-      })
-    )
-  }
-
-  /** Send `executing` WS event to signal which node is currently running. */
-  executing(jobId: string, nodeId: string | null): void {
-    this.ws.send(
-      JSON.stringify({
-        type: 'executing',
-        data: { prompt_id: jobId, node: nodeId }
-      })
-    )
-  }
-
-  /** Send `executed` WS event with node output. */
-  executed(
-    jobId: string,
-    nodeId: string,
-    output: Record<string, unknown>
-  ): void {
-    this.ws.send(
-      JSON.stringify({
-        type: 'executed',
-        data: {
-          prompt_id: jobId,
-          node: nodeId,
-          display_node: nodeId,
-          output
-        }
-      })
-    )
-  }
-
-  /** Send `execution_success` WS event. */
-  executionSuccess(jobId: string): void {
-    this.ws.send(
-      JSON.stringify({
-        type: 'execution_success',
-        data: { prompt_id: jobId, timestamp: Date.now() }
-      })
-    )
-  }
-
-  /** Send `execution_error` WS event. */
-  executionError(jobId: string, nodeId: string, message: string): void {
-    this.ws.send(
-      JSON.stringify({
-        type: 'execution_error',
-        data: {
-          prompt_id: jobId,
-          timestamp: Date.now(),
-          node_id: nodeId,
-          node_type: 'Unknown',
-          exception_message: message,
-          exception_type: 'RuntimeError',
-          traceback: []
-        }
-      })
-    )
-  }
-
-  /** Send `progress` WS event. */
-  progress(jobId: string, nodeId: string, value: number, max: number): void {
-    this.ws.send(
-      JSON.stringify({
-        type: 'progress',
-        data: { prompt_id: jobId, node: nodeId, value, max }
-      })
-    )
-  }
-
-  /**
-   * Complete a job by adding it to mock history, sending execution_success,
-   * and triggering a history refresh via a status event.
-   *
-   * Requires an {@link AssetsHelper} to be passed in the constructor.
-   */
-  async completeWithHistory(
-    jobId: string,
-    nodeId: string,
-    filename: string
-  ): Promise<void> {
-    this.completedJobs.push(
-      createMockJob({
-        id: jobId,
-        preview_output: {
-          filename,
-          subfolder: '',
-          type: 'output',
-          nodeId,
-          mediaType: 'images'
-        }
-      })
-    )
-
-    await this.assets.mockOutputHistory(this.completedJobs)
-    this.executionSuccess(jobId)
-    // Trigger queue/history refresh
-    this.status(0)
-  }
-
-  /** Send `status` WS event to update queue count. */
-  status(queueRemaining: number): void {
-    this.ws.send(
-      JSON.stringify({
-        type: 'status',
-        data: { status: { exec_info: { queue_remaining: queueRemaining } } }
-      })
-    )
-  }
-}
--- a/browser_tests/fixtures/helpers/Load3DFixtures.ts
+++ b/browser_tests/fixtures/helpers/Load3DFixtures.ts
@@ -1,25 +0,0 @@
-import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
-import { Load3DHelper } from '@e2e/tests/load3d/Load3DHelper'
-import { Load3DViewerHelper } from '@e2e/tests/load3d/Load3DViewerHelper'
-
-export const load3dTest = comfyPageFixture.extend<{
-  load3d: Load3DHelper
-}>({
-  load3d: async ({ comfyPage }, use) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.workflow.loadWorkflow('3d/load3d_node')
-    await comfyPage.vueNodes.waitForNodes()
-
-    const node = comfyPage.vueNodes.getNodeLocator('1')
-    await use(new Load3DHelper(node))
-  }
-})
-
-export const load3dViewerTest = load3dTest.extend<{
-  viewer: Load3DViewerHelper
-}>({
-  viewer: async ({ comfyPage }, use) => {
-    await comfyPage.settings.setSetting('Comfy.Load3D.3DViewerEnable', true)
-    await use(new Load3DViewerHelper(comfyPage.page))
-  }
-})
--- a/browser_tests/fixtures/helpers/NodeOperationsHelper.ts
+++ b/browser_tests/fixtures/helpers/NodeOperationsHelper.ts
@@ -8,13 +8,7 @@ import type { Position, Size } from '@e2e/fixtures/types'
 import { NodeReference } from '@e2e/fixtures/utils/litegraphUtils'

 export class NodeOperationsHelper {
-  public readonly promptDialogInput: Locator
-
-  constructor(private comfyPage: ComfyPage) {
-    this.promptDialogInput = this.page.locator(
-      '.p-dialog-content input[type="text"]'
-    )
-  }
+  constructor(private comfyPage: ComfyPage) {}

  private get page() {
    return this.comfyPage.page
@@ -36,12 +30,6 @@ export class NodeOperationsHelper {
    })
  }

-  /** Remove all nodes from the graph and clean. */
-  async clearGraph() {
-    await this.comfyPage.settings.setSetting('Comfy.ConfirmClear', false)
-    await this.comfyPage.command.executeCommand('Comfy.ClearWorkflow')
-  }
-
  /** Reads from `window.app.graph` (the root workflow graph). */
  async getNodeCount(): Promise<number> {
    return await this.page.evaluate(() => window.app!.graph.nodes.length)
@@ -161,6 +149,10 @@ export class NodeOperationsHelper {
    await this.comfyPage.nextFrame()
  }

+  get promptDialogInput(): Locator {
+    return this.page.locator('.p-dialog-content input[type="text"]')
+  }
+
  async fillPromptDialog(value: string): Promise<void> {
    await this.promptDialogInput.fill(value)
    await this.page.keyboard.press('Enter')
--- a/browser_tests/fixtures/helpers/SubgraphHelper.ts
+++ b/browser_tests/fixtures/helpers/SubgraphHelper.ts
@@ -157,7 +157,7 @@ export class SubgraphHelper {

    // Wait for the appropriate UI element to appear
    if (action === 'rightClick') {
-      await this.page.locator('.litemenu-entry').first().waitFor({
+      await this.page.waitForSelector('.litemenu-entry', {
        state: 'visible',
        timeout: 5000
      })
@@ -445,7 +445,7 @@ export class SubgraphHelper {
      await this.rightClickOutputSlot(slotName)
    }
    await this.comfyPage.contextMenu.clickLitegraphMenuItem('Remove Slot')
-    await this.comfyPage.contextMenu.waitForHidden()
+    await this.comfyPage.nextFrame()
  }

  async findSubgraphNodeId(): Promise<string> {
--- a/browser_tests/fixtures/helpers/ToastHelper.ts
+++ b/browser_tests/fixtures/helpers/ToastHelper.ts
@@ -2,12 +2,20 @@ import { expect } from '@playwright/test'
 import type { Locator, Page } from '@playwright/test'

 export class ToastHelper {
-  public readonly visibleToasts: Locator
-  public readonly toastErrors: Locator
+  constructor(private readonly page: Page) {}

-  constructor(private readonly page: Page) {
-    this.visibleToasts = page.locator('.p-toast-message:visible')
-    this.toastErrors = page.locator('.p-toast-message.p-toast-message-error')
+  get visibleToasts(): Locator {
+    return this.page.locator('.p-toast-message:visible')
+  }
+
+  async getToastErrorCount(): Promise<number> {
+    return await this.page
+      .locator('.p-toast-message.p-toast-message-error')
+      .count()
+  }
+
+  async getVisibleToastCount(): Promise<number> {
+    return await this.visibleToasts.count()
  }

  async closeToasts(requireCount = 0): Promise<void> {
@@ -26,6 +34,6 @@ export class ToastHelper {
    }

    // Assert all toasts are closed
-    await expect(this.visibleToasts).toHaveCount(0)
+    await expect(this.visibleToasts).toHaveCount(0, { timeout: 1000 })
  }
 }
--- a/browser_tests/fixtures/helpers/WorkflowHelper.ts
+++ b/browser_tests/fixtures/helpers/WorkflowHelper.ts
@@ -1,7 +1,5 @@
 import { readFileSync } from 'fs'

-import { test } from '@playwright/test'
-
 import type { AppMode } from '@/composables/useAppMode'
 import type {
  ComfyApiWorkflow,
@@ -75,9 +73,6 @@ export class WorkflowHelper {
      assetPath(`${workflowName}.json`)
    )
    await this.comfyPage.nextFrame()
-    if (test.info().tags.includes('@vue-nodes')) {
-      await this.comfyPage.vueNodes.waitForNodes()
-    }
  }

  async deleteWorkflow(
@@ -121,14 +116,6 @@ export class WorkflowHelper {
    })
  }

-  async waitForActiveWorkflow(): Promise<void> {
-    await this.comfyPage.page.waitForFunction(
-      () =>
-        (window.app!.extensionManager as WorkspaceStore).workflow
-          .activeWorkflow !== null
-    )
-  }
-
  async getActiveWorkflowPath(): Promise<string | undefined> {
    return this.comfyPage.page.evaluate(() => {
      return (window.app!.extensionManager as WorkspaceStore).workflow
--- a/browser_tests/fixtures/selectors.ts
+++ b/browser_tests/fixtures/selectors.ts
@@ -21,10 +21,6 @@ export const TestIds = {
    contextMenu: 'canvas-context-menu',
    toggleMinimapButton: 'toggle-minimap-button',
    closeMinimapButton: 'close-minimap-button',
-    minimapContainer: 'minimap-container',
-    minimapCanvas: 'minimap-canvas',
-    minimapViewport: 'minimap-viewport',
-    minimapInteractionOverlay: 'minimap-interaction-overlay',
    toggleLinkVisibilityButton: 'toggle-link-visibility-button',
    zoomControlsButton: 'zoom-controls-button',
    zoomInAction: 'zoom-in-action',
@@ -67,8 +63,7 @@ export const TestIds = {
    missingMediaStatusCard: 'missing-media-status-card',
    missingMediaConfirmButton: 'missing-media-confirm-button',
    missingMediaCancelButton: 'missing-media-cancel-button',
-    missingMediaLocateButton: 'missing-media-locate-button',
-    publishTabPanel: 'publish-tab-panel'
+    missingMediaLocateButton: 'missing-media-locate-button'
  },
  keybindings: {
    presetMenu: 'keybinding-preset-menu'
@@ -83,8 +78,7 @@ export const TestIds = {
    bookmarksSection: 'node-library-bookmarks-section'
  },
  propertiesPanel: {
-    root: 'properties-panel',
-    errorsTab: 'panel-tab-errors'
+    root: 'properties-panel'
  },
  subgraphEditor: {
    toggle: 'subgraph-editor-toggle',
@@ -135,31 +129,8 @@ export const TestIds = {
    outputPlaceholder: 'builder-output-placeholder',
    connectOutputPopover: 'builder-connect-output-popover'
  },
-  outputHistory: {
-    outputs: 'linear-outputs',
-    welcome: 'linear-welcome',
-    outputInfo: 'linear-output-info',
-    activeQueue: 'linear-job',
-    queueBadge: 'linear-job-badge',
-    inProgressItem: 'linear-in-progress-item',
-    historyItem: 'linear-history-item',
-    skeleton: 'linear-skeleton',
-    latentPreview: 'linear-latent-preview',
-    imageOutput: 'linear-image-output',
-    videoOutput: 'linear-video-output',
-    cancelRun: 'linear-cancel-run',
-    headerProgressBar: 'linear-header-progress-bar',
-    itemProgressBar: 'linear-item-progress-bar',
-    progressOverall: 'linear-progress-overall',
-    progressNode: 'linear-progress-node'
-  },
  appMode: {
-    widgetItem: 'app-mode-widget-item',
-    welcome: 'linear-welcome',
-    emptyWorkflow: 'linear-welcome-empty-workflow',
-    buildApp: 'linear-welcome-build-app',
-    backToWorkflow: 'linear-welcome-back-to-workflow',
-    loadTemplate: 'linear-welcome-load-template'
+    widgetItem: 'app-mode-widget-item'
  },
  breadcrumb: {
    subgraph: 'subgraph-breadcrumb'
@@ -178,12 +149,6 @@ export const TestIds = {
  errors: {
    imageLoadError: 'error-loading-image',
    videoLoadError: 'error-loading-video'
-  },
-  loading: {
-    overlay: 'loading-overlay'
-  },
-  load3dViewer: {
-    sidebar: 'load3d-viewer-sidebar'
  }
 } as const

@@ -203,7 +168,6 @@ export type TestIdValue =
  | (typeof TestIds.selectionToolbox)[keyof typeof TestIds.selectionToolbox]
  | (typeof TestIds.widgets)[keyof typeof TestIds.widgets]
  | (typeof TestIds.builder)[keyof typeof TestIds.builder]
-  | (typeof TestIds.outputHistory)[keyof typeof TestIds.outputHistory]
  | (typeof TestIds.appMode)[keyof typeof TestIds.appMode]
  | (typeof TestIds.breadcrumb)[keyof typeof TestIds.breadcrumb]
  | Exclude<
@@ -215,5 +179,3 @@ export type TestIdValue =
  | (typeof TestIds.subgraphEditor)[keyof typeof TestIds.subgraphEditor]
  | (typeof TestIds.queue)[keyof typeof TestIds.queue]
  | (typeof TestIds.errors)[keyof typeof TestIds.errors]
-  | (typeof TestIds.loading)[keyof typeof TestIds.loading]
-  | (typeof TestIds.load3dViewer)[keyof typeof TestIds.load3dViewer]
--- a/browser_tests/fixtures/utils/customMatchers.ts
+++ b/browser_tests/fixtures/utils/customMatchers.ts
@@ -14,12 +14,11 @@ function makeMatcher<T>(
  ) {
    await expect(async () => {
      const value = await getValue(node)
-      if (this.isNot) {
-        expect(value, 'Node is ' + type).not.toBeTruthy()
-      } else {
-        expect(value, 'Node is not ' + type).toBeTruthy()
-      }
-    }).toPass({ timeout: 5000, ...options })
+      const assertion = this.isNot
+        ? expect(value, 'Node is ' + type).not
+        : expect(value, 'Node is not ' + type)
+      assertion.toBeTruthy()
+    }).toPass({ timeout: 250, ...options })
    return {
      pass: !this.isNot,
      message: () => 'Node is ' + (this.isNot ? 'not ' : '') + type
@@ -31,7 +30,7 @@ export const comfyExpect = expect.extend({
  toBePinned: makeMatcher((n) => n.isPinned(), 'pinned'),
  toBeBypassed: makeMatcher((n) => n.isBypassed(), 'bypassed'),
  toBeCollapsed: makeMatcher((n) => n.isCollapsed(), 'collapsed'),
-  async toHaveFocus(locator: Locator, options = {}) {
+  async toHaveFocus(locator: Locator, options = { timeout: 256 }) {
    await expect
      .poll(
        () => locator.evaluate((el) => el === document.activeElement),
--- a/browser_tests/fixtures/utils/litegraphUtils.ts
+++ b/browser_tests/fixtures/utils/litegraphUtils.ts
@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+import type { Page } from '@playwright/test'

 import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { ManageGroupNode } from '@e2e/helpers/manageGroupNode'
@@ -355,11 +356,7 @@ export class NodeReference {
  }
  async click(
    position: 'title' | 'collapse',
-    options?: {
-      button?: 'left' | 'right' | 'middle'
-      modifiers?: ('Shift' | 'Control' | 'Alt' | 'Meta')[]
-      moveMouseToEmptyArea?: boolean
-    }
+    options?: Parameters<Page['click']>[1] & { moveMouseToEmptyArea?: boolean }
  ) {
    let clickPos: Position
    switch (position) {
@@ -380,7 +377,12 @@ export class NodeReference {
      delete options.moveMouseToEmptyArea
    }

-    await this.comfyPage.canvasOps.mouseClickAt(clickPos, options)
+    await this.comfyPage.canvas.click({
+      ...options,
+      position: clickPos,
+      force: true
+    })
+    await this.comfyPage.nextFrame()
    if (moveMouseToEmptyArea) {
      await this.comfyPage.canvasOps.moveMouseToEmptyArea()
    }
@@ -497,18 +499,31 @@ export class NodeReference {

    await expect(async () => {
      // Try just clicking the enter button first
-      await this.comfyPage.canvasOps.mouseClickAt({ x: 250, y: 250 })
+      await this.comfyPage.canvas.click({
+        position: { x: 250, y: 250 },
+        force: true
+      })
+      await this.comfyPage.nextFrame()

-      await this.comfyPage.canvasOps.mouseClickAt(subgraphButtonPos)
+      await this.comfyPage.canvas.click({
+        position: subgraphButtonPos,
+        force: true
+      })
+      await this.comfyPage.nextFrame()

      if (await checkIsInSubgraph()) return

      for (const position of clickPositions) {
        // Clear any selection first
-        await this.comfyPage.canvasOps.mouseClickAt({ x: 250, y: 250 })
+        await this.comfyPage.canvas.click({
+          position: { x: 250, y: 250 },
+          force: true
+        })
+        await this.comfyPage.nextFrame()

        // Double-click to enter subgraph
-        await this.comfyPage.canvasOps.mouseDblclickAt(position)
+        await this.comfyPage.canvas.dblclick({ position, force: true })
+        await this.comfyPage.nextFrame()

        if (await checkIsInSubgraph()) return
      }
--- a/browser_tests/fixtures/utils/vueNodeFixtures.ts
+++ b/browser_tests/fixtures/utils/vueNodeFixtures.ts
@@ -4,24 +4,38 @@ import { TestIds } from '@e2e/fixtures/selectors'

 /** DOM-centric helper for a single Vue-rendered node on the canvas. */
 export class VueNodeFixture {
-  public readonly header: Locator
-  public readonly title: Locator
-  public readonly titleInput: Locator
-  public readonly body: Locator
-  public readonly pinIndicator: Locator
-  public readonly collapseButton: Locator
-  public readonly collapseIcon: Locator
-  public readonly root: Locator
+  constructor(private readonly locator: Locator) {}

-  constructor(private readonly locator: Locator) {
-    this.header = locator.locator('[data-testid^="node-header-"]')
-    this.title = locator.getByTestId('node-title')
-    this.titleInput = locator.getByTestId('node-title-input')
-    this.body = locator.locator('[data-testid^="node-body-"]')
-    this.pinIndicator = locator.getByTestId(TestIds.node.pinIndicator)
-    this.collapseButton = locator.getByTestId('node-collapse-button')
-    this.collapseIcon = this.collapseButton.locator('i')
-    this.root = locator
+  get header(): Locator {
+    return this.locator.locator('[data-testid^="node-header-"]')
+  }
+
+  get title(): Locator {
+    return this.locator.locator('[data-testid="node-title"]')
+  }
+
+  get titleInput(): Locator {
+    return this.locator.locator('[data-testid="node-title-input"]')
+  }
+
+  get body(): Locator {
+    return this.locator.locator('[data-testid^="node-body-"]')
+  }
+
+  get pinIndicator(): Locator {
+    return this.locator.getByTestId(TestIds.node.pinIndicator)
+  }
+
+  get collapseButton(): Locator {
+    return this.locator.locator('[data-testid="node-collapse-button"]')
+  }
+
+  get collapseIcon(): Locator {
+    return this.collapseButton.locator('i')
+  }
+
+  get root(): Locator {
+    return this.locator
  }

  async getTitle(): Promise<string> {
--- a/browser_tests/fixtures/ws.ts
+++ b/browser_tests/fixtures/ws.ts
@@ -1,31 +1,53 @@
 import { test as base } from '@playwright/test'
-import type { WebSocketRoute } from '@playwright/test'

 export const webSocketFixture = base.extend<{
-  getWebSocket: () => Promise<WebSocketRoute>
+  ws: { trigger(data: unknown, url?: string): Promise<void> }
 }>({
-  getWebSocket: [
-    async ({ context }, use) => {
-      let latest: WebSocketRoute | undefined
-      let resolve: ((ws: WebSocketRoute) => void) | undefined
-
-      await context.routeWebSocket(/\/ws/, (ws) => {
-        const server = ws.connectToServer()
-        server.onMessage((message) => {
-          ws.send(message)
+  ws: [
+    async ({ page }, use) => {
+      // Each time a page loads, to catch navigations
+      page.on('load', async () => {
+        await page.evaluate(function () {
+          // Create a wrapper for WebSocket that stores them globally
+          // so we can look it up to trigger messages
+          const store: Record<string, WebSocket> = (window.__ws__ = {})
+          window.WebSocket = class extends window.WebSocket {
+            constructor(
+              ...rest: ConstructorParameters<typeof window.WebSocket>
+            ) {
+              super(...rest)
+              store[this.url] = this
+            }
+          }
        })
-
-        latest = ws
-        resolve?.(ws)
      })

-      await use(() => {
-        if (latest) return Promise.resolve(latest)
-        return new Promise<WebSocketRoute>((r) => {
-          resolve = r
-        })
+      await use({
+        async trigger(data, url) {
+          // Trigger a websocket event on the page
+          await page.evaluate(
+            function ([data, url]) {
+              if (!url) {
+                // If no URL specified, use page URL
+                const u = new URL(window.location.href)
+                u.hash = ''
+                u.protocol = 'ws:'
+                u.pathname = '/'
+                url = u.toString() + 'ws'
+              }
+              const ws: WebSocket = window.__ws__![url]
+              ws.dispatchEvent(
+                new MessageEvent('message', {
+                  data
+                })
+              )
+            },
+            [JSON.stringify(data), url]
+          )
+        }
      })
    },
+    // We need this to run automatically as the first thing so it adds handlers as soon as the page loads
    { auto: true }
  ]
 })
--- a/browser_tests/helpers/builderTestUtils.ts
+++ b/browser_tests/helpers/builderTestUtils.ts
@@ -82,9 +82,11 @@ export async function builderSaveAs(
  viewType: 'App' | 'Node graph' = 'App'
 ) {
  await appMode.footer.saveAsButton.click()
-  await comfyExpect(appMode.saveAs.nameInput).toBeVisible()
+  await comfyExpect(appMode.saveAs.nameInput).toBeVisible({ timeout: 5000 })
  await appMode.saveAs.fillAndSave(workflowName, viewType)
-  await comfyExpect(appMode.saveAs.successMessage).toBeVisible()
+  await comfyExpect(appMode.saveAs.successMessage).toBeVisible({
+    timeout: 5000
+  })
 }

 /**
@@ -122,21 +124,3 @@ export async function saveAndReopenInAppMode(

  await comfyPage.appMode.toggleAppMode()
 }
-
-/**
- * Enter builder, select the given widgets as inputs + SaveImage as output,
- * save as an app, and close the success dialog.
- *
- * Returns on the builder arrange/preview step.
- */
-export async function createAndSaveApp(
-  comfyPage: ComfyPage,
-  appName: string,
-  widgetNames: string[] = ['seed']
-): Promise<void> {
-  await setupBuilder(comfyPage, undefined, widgetNames)
-  await comfyPage.appMode.steps.goToPreview()
-  await builderSaveAs(comfyPage.appMode, appName)
-  await comfyPage.appMode.saveAs.closeButton.click()
-  await comfyPage.nextFrame()
-}
--- a/browser_tests/helpers/manageGroupNode.ts
+++ b/browser_tests/helpers/manageGroupNode.ts
@@ -26,12 +26,9 @@ export class ManageGroupNode {
    await this.footer.getByText('Close').click()
  }

-  get selectedNodeTypeSelect(): Locator {
-    return this.header.locator('select').first()
-  }
-
  async getSelectedNodeType() {
-    return await this.selectedNodeTypeSelect.inputValue()
+    const select = this.header.locator('select').first()
+    return await select.inputValue()
  }

  async selectNode(name: string) {
--- a/browser_tests/helpers/painter.ts
+++ b/browser_tests/helpers/painter.ts
@@ -1,66 +0,0 @@
-import type { Locator, Page } from '@playwright/test'
-import type { TestGraphAccess } from '@e2e/types/globals'
-
-export async function drawStroke(
-  page: Page,
-  canvas: Locator,
-  opts: { startXPct?: number; endXPct?: number; yPct?: number } = {}
-): Promise<void> {
-  const { startXPct = 0.3, endXPct = 0.7, yPct = 0.5 } = opts
-  const box = await canvas.boundingBox()
-  if (!box) throw new Error('Canvas bounding box not found')
-  await page.mouse.move(
-    box.x + box.width * startXPct,
-    box.y + box.height * yPct
-  )
-  await page.mouse.down()
-  await page.mouse.move(
-    box.x + box.width * endXPct,
-    box.y + box.height * yPct,
-    { steps: 10 }
-  )
-  await page.mouse.up()
-}
-
-export async function hasCanvasContent(canvas: Locator): Promise<boolean> {
-  return canvas.evaluate((el: HTMLCanvasElement) => {
-    const ctx = el.getContext('2d')
-    if (!ctx) return false
-    const { data } = ctx.getImageData(0, 0, el.width, el.height)
-    for (let i = 3; i < data.length; i += 4) {
-      if (data[i] > 0) return true
-    }
-    return false
-  })
-}
-
-export async function triggerSerialization(page: Page): Promise<void> {
-  await page.evaluate(async () => {
-    const graph = window.graph as TestGraphAccess | undefined
-    if (!graph) {
-      throw new Error(
-        'Global window.graph is absent. Ensure workflow fixture is loaded.'
-      )
-    }
-
-    const node = graph._nodes_by_id?.['1']
-    if (!node) {
-      throw new Error(
-        'Target node with ID "1" not found in graph._nodes_by_id.'
-      )
-    }
-
-    const widget = node.widgets?.find((w) => w.name === 'mask')
-    if (!widget) {
-      throw new Error('Widget "mask" not found on target node 1.')
-    }
-
-    if (typeof widget.serializeValue !== 'function') {
-      throw new Error(
-        'mask widget on node 1 does not have a serializeValue function.'
-      )
-    }
-
-    await widget.serializeValue(node, 0)
-  })
-}
--- a/browser_tests/helpers/promotedWidgets.ts
+++ b/browser_tests/helpers/promotedWidgets.ts
@@ -1,8 +1,15 @@
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'

-type PromotedWidgetEntry = [string, string]
+export type PromotedWidgetEntry = [string, string]

-function isPromotedWidgetEntry(entry: unknown): entry is PromotedWidgetEntry {
+export interface PromotedWidgetSnapshot {
+  proxyWidgets: PromotedWidgetEntry[]
+  widgetNames: string[]
+}
+
+export function isPromotedWidgetEntry(
+  entry: unknown
+): entry is PromotedWidgetEntry {
  return (
    Array.isArray(entry) &&
    entry.length === 2 &&
@@ -11,7 +18,9 @@ function isPromotedWidgetEntry(entry: unknown): entry is PromotedWidgetEntry {
  )
 }

-function normalizePromotedWidgets(value: unknown): PromotedWidgetEntry[] {
+export function normalizePromotedWidgets(
+  value: unknown
+): PromotedWidgetEntry[] {
  if (!Array.isArray(value)) return []
  return value.filter(isPromotedWidgetEntry)
 }
@@ -22,29 +31,34 @@ export async function getPromotedWidgets(
 ): Promise<PromotedWidgetEntry[]> {
  const raw = await comfyPage.page.evaluate((id) => {
    const node = window.app!.canvas.graph!.getNodeById(id)
-    const widgets = node?.widgets ?? []
-
-    // Read the live promoted widget views from the host node instead of the
-    // serialized proxyWidgets snapshot, which can lag behind the current graph
-    // state during promotion and cleanup flows.
-    return widgets.flatMap((widget) => {
-      if (
-        widget &&
-        typeof widget === 'object' &&
-        'sourceNodeId' in widget &&
-        typeof widget.sourceNodeId === 'string' &&
-        'sourceWidgetName' in widget &&
-        typeof widget.sourceWidgetName === 'string'
-      ) {
-        return [[widget.sourceNodeId, widget.sourceWidgetName]]
-      }
-      return []
-    })
+    return node?.properties?.proxyWidgets ?? []
  }, nodeId)

  return normalizePromotedWidgets(raw)
 }

+export async function getPromotedWidgetSnapshot(
+  comfyPage: ComfyPage,
+  nodeId: string
+): Promise<PromotedWidgetSnapshot> {
+  const raw = await comfyPage.page.evaluate((id) => {
+    const node = window.app!.canvas.graph!.getNodeById(id)
+    return {
+      proxyWidgets: node?.properties?.proxyWidgets ?? [],
+      widgetNames: (node?.widgets ?? []).map((widget) => widget.name)
+    }
+  }, nodeId)
+
+  return {
+    proxyWidgets: normalizePromotedWidgets(raw.proxyWidgets),
+    widgetNames: Array.isArray(raw.widgetNames)
+      ? raw.widgetNames.filter(
+          (name): name is string => typeof name === 'string'
+        )
+      : []
+  }
+}
+
 export async function getPromotedWidgetNames(
  comfyPage: ComfyPage,
  nodeId: string
@@ -61,7 +75,7 @@ export async function getPromotedWidgetCount(
  return promotedWidgets.length
 }

-function isPseudoPreviewEntry(entry: PromotedWidgetEntry): boolean {
+export function isPseudoPreviewEntry(entry: PromotedWidgetEntry): boolean {
  return entry[1].startsWith('$$')
 }

@@ -73,6 +87,14 @@ export async function getPseudoPreviewWidgets(
  return widgets.filter(isPseudoPreviewEntry)
 }

+export async function getNonPreviewPromotedWidgets(
+  comfyPage: ComfyPage,
+  nodeId: string
+): Promise<PromotedWidgetEntry[]> {
+  const widgets = await getPromotedWidgets(comfyPage, nodeId)
+  return widgets.filter((entry) => !isPseudoPreviewEntry(entry))
+}
+
 export async function getPromotedWidgetCountByName(
  comfyPage: ComfyPage,
  nodeId: string,
--- 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/actionbar.spec.ts
+++ b/browser_tests/tests/actionbar.spec.ts
@@ -1,6 +1,7 @@
 import type { Response } from '@playwright/test'
 import { expect, mergeTests } from '@playwright/test'

+import type { StatusWsMessage } from '@/schemas/apiSchema'
 import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
 import { webSocketFixture } from '@e2e/fixtures/ws'
 import type { WorkspaceStore } from '@e2e/types/globals'
@@ -8,21 +9,23 @@ import type { WorkspaceStore } from '@e2e/types/globals'
 const test = mergeTests(comfyPageFixture, webSocketFixture)

 test.describe('Actionbar', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
  /**
   * This test ensures that the autoqueue change mode can only queue one change at a time
   */
  test('Does not auto-queue multiple changes at a time', async ({
    comfyPage,
-    getWebSocket
+    ws
  }) => {
-    const ws = await getWebSocket()
-
    // Enable change auto-queue mode
    const queueOpts = await comfyPage.actionbar.queueButton.toggleOptions()
-    await expect.poll(() => queueOpts.getMode()).toBe('disabled')
+    expect(await queueOpts.getMode()).toBe('disabled')
    await queueOpts.setMode('change')
    await comfyPage.nextFrame()
-    await expect.poll(() => queueOpts.getMode()).toBe('change')
+    expect(await queueOpts.getMode()).toBe('change')
    await comfyPage.actionbar.queueButton.toggleOptions()

    // Intercept the prompt queue endpoint
@@ -59,19 +62,17 @@ test.describe('Actionbar', { tag: '@ui' }, () => {
    }

    // Trigger a status websocket message
-    const triggerStatus = (queueSize: number) => {
-      ws.send(
-        JSON.stringify({
-          type: 'status',
-          data: {
-            status: {
-              exec_info: {
-                queue_remaining: queueSize
-              }
+    const triggerStatus = async (queueSize: number) => {
+      await ws.trigger({
+        type: 'status',
+        data: {
+          status: {
+            exec_info: {
+              queue_remaining: queueSize
            }
          }
-        })
-      )
+        }
+      } as StatusWsMessage)
    }

    // Extract the width from the queue response
@@ -103,8 +104,8 @@ test.describe('Actionbar', { tag: '@ui' }, () => {
    ).toBe(1)

    // Trigger a status update so auto-queue re-runs
-    triggerStatus(1)
-    triggerStatus(0)
+    await triggerStatus(1)
+    await triggerStatus(0)

    // Ensure the queued width is the last queued value
    expect(
@@ -123,8 +124,6 @@ test.describe('Actionbar', { tag: '@ui' }, () => {
        force: true
      }
    )
-    await expect(comfyPage.actionbar.root.locator('.actionbar')).toHaveClass(
-      /static/
-    )
+    expect(await comfyPage.actionbar.isDocked()).toBe(true)
  })
 })
--- a/browser_tests/tests/appModeDropdownClipping.spec.ts
+++ b/browser_tests/tests/appModeDropdownClipping.spec.ts
@@ -75,7 +75,9 @@ test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
    ]
    await comfyPage.appMode.enterAppModeWithInputs(inputs)

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

    // Scroll to bottom so the codec widget is at the clipping edge
    const widgetList = comfyPage.appMode.linearWidgets
@@ -88,25 +90,21 @@ test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
    await codecSelect.click()

    const overlay = comfyPage.page.locator('.p-select-overlay').first()
-    await expect(overlay).toBeVisible()
+    await expect(overlay).toBeVisible({ timeout: 5000 })

-    await expect
-      .poll(() =>
-        overlay.evaluate((el) => {
-          const rect = el.getBoundingClientRect()
-          return (
-            rect.top >= 0 &&
-            rect.left >= 0 &&
-            rect.bottom <= window.innerHeight &&
-            rect.right <= window.innerWidth
-          )
-        })
+    const isInViewport = await overlay.evaluate((el) => {
+      const rect = el.getBoundingClientRect()
+      return (
+        rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= window.innerHeight &&
+        rect.right <= window.innerWidth
      )
-      .toBe(true)
+    })
+    expect(isInViewport).toBe(true)

-    await expect
-      .poll(() => overlay.evaluate(isClippedByAnyAncestor))
-      .toBe(false)
+    const isClipped = await overlay.evaluate(isClippedByAnyAncestor)
+    expect(isClipped).toBe(false)
  })

  test('FormDropdown popup is not clipped in app mode panel', async ({
@@ -121,7 +119,9 @@ test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
    ]
    await comfyPage.appMode.enterAppModeWithInputs(inputs)

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

    // Scroll to bottom so the image widget is at the clipping edge
    const widgetList = comfyPage.appMode.linearWidgets
@@ -140,24 +140,20 @@ test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
    // The unstyled PrimeVue Popover renders with role="dialog".
    // Locate the one containing the image grid (filter buttons like "All", "Inputs").
    const popover = comfyPage.appMode.imagePickerPopover
-    await expect(popover).toBeVisible()
+    await expect(popover).toBeVisible({ timeout: 5000 })

-    await expect
-      .poll(() =>
-        popover.evaluate((el) => {
-          const rect = el.getBoundingClientRect()
-          return (
-            rect.top >= 0 &&
-            rect.left >= 0 &&
-            rect.bottom <= window.innerHeight &&
-            rect.right <= window.innerWidth
-          )
-        })
+    const isInViewport = await popover.evaluate((el) => {
+      const rect = el.getBoundingClientRect()
+      return (
+        rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= window.innerHeight &&
+        rect.right <= window.innerWidth
      )
-      .toBe(true)
+    })
+    expect(isInViewport).toBe(true)

-    await expect
-      .poll(() => popover.evaluate(isClippedByAnyAncestor))
-      .toBe(false)
+    const isClipped = await popover.evaluate(isClippedByAnyAncestor)
+    expect(isClipped).toBe(false)
  })
 })
--- a/browser_tests/tests/appModePruning.spec.ts
+++ b/browser_tests/tests/appModePruning.spec.ts
@@ -1,10 +1,10 @@
-import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '../fixtures/ComfyPage'
 import {
  comfyPageFixture as test,
  comfyExpect as expect
-} from '@e2e/fixtures/ComfyPage'
-import { setupBuilder } from '@e2e/helpers/builderTestUtils'
-import { fitToViewInstant } from '@e2e/helpers/fitToView'
+} from '../fixtures/ComfyPage'
+import { setupBuilder } from '../helpers/builderTestUtils'
+import { fitToViewInstant } from '../helpers/fitToView'

 const RESIZE_NODE_TITLE = 'Resize Image/Mask'
 const RESIZE_NODE_ID = '1'
--- a/browser_tests/tests/appModeWelcome.spec.ts
+++ b/browser_tests/tests/appModeWelcome.spec.ts
@@ -1,61 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '@e2e/fixtures/ComfyPage'
-
-test.describe('App mode welcome states', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.appMode.enableLinearMode()
-  })
-
-  test('Empty workflow text is visible when no nodes', async ({
-    comfyPage
-  }) => {
-    await comfyPage.nodeOps.clearGraph()
-    await comfyPage.appMode.toggleAppMode()
-
-    await expect(comfyPage.appMode.welcome).toBeVisible()
-    await expect(comfyPage.appMode.emptyWorkflowText).toBeVisible()
-    await expect(comfyPage.appMode.buildAppButton).toBeHidden()
-  })
-
-  test('Build app button is visible when no outputs selected', async ({
-    comfyPage
-  }) => {
-    await comfyPage.appMode.toggleAppMode()
-
-    await expect(comfyPage.appMode.welcome).toBeVisible()
-    await expect(comfyPage.appMode.buildAppButton).toBeVisible()
-    await expect(comfyPage.appMode.emptyWorkflowText).toBeHidden()
-  })
-
-  test('Empty workflow and build app are hidden when app has outputs', async ({
-    comfyPage
-  }) => {
-    await comfyPage.appMode.enterAppModeWithInputs([['3', 'seed']])
-
-    await expect(comfyPage.appMode.linearWidgets).toBeVisible()
-    await expect(comfyPage.appMode.emptyWorkflowText).toBeHidden()
-    await expect(comfyPage.appMode.buildAppButton).toBeHidden()
-  })
-
-  test('Back to workflow returns to graph mode', async ({ comfyPage }) => {
-    await comfyPage.appMode.toggleAppMode()
-
-    await expect(comfyPage.appMode.welcome).toBeVisible()
-    await comfyPage.appMode.backToWorkflowButton.click()
-
-    await expect(comfyPage.canvas).toBeVisible()
-    await expect(comfyPage.appMode.welcome).toBeHidden()
-  })
-
-  test('Load template opens template selector', async ({ comfyPage }) => {
-    await comfyPage.nodeOps.clearGraph()
-    await comfyPage.appMode.toggleAppMode()
-
-    await expect(comfyPage.appMode.welcome).toBeVisible()
-    await comfyPage.appMode.loadTemplateButton.click()
-
-    await expect(comfyPage.templates.content).toBeVisible()
-  })
-})
--- a/browser_tests/tests/appModeWidgetRename.spec.ts
+++ b/browser_tests/tests/appModeWidgetRename.spec.ts
@@ -26,7 +26,7 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
    await appMode.steps.goToInputs()

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

    // Verify in app mode after save/reload
@@ -34,7 +34,7 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
    const workflowName = `${new Date().getTime()} builder-input-menu`
    await saveAndReopenInAppMode(comfyPage, workflowName)

-    await expect(appMode.linearWidgets).toBeVisible()
+    await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
    await expect(
      appMode.linearWidgets.getByText('Builder Input Seed')
    ).toBeVisible()
@@ -54,7 +54,7 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
    const workflowName = `${new Date().getTime()} builder-input-dblclick`
    await saveAndReopenInAppMode(comfyPage, workflowName)

-    await expect(appMode.linearWidgets).toBeVisible()
+    await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
    await expect(appMode.linearWidgets.getByText('Dblclick Seed')).toBeVisible()
  })

@@ -65,7 +65,7 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
    await appMode.steps.goToPreview()

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

    // Verify in app mode after save/reload
@@ -73,7 +73,7 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
    const workflowName = `${new Date().getTime()} builder-preview`
    await saveAndReopenInAppMode(comfyPage, workflowName)

-    await expect(appMode.linearWidgets).toBeVisible()
+    await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
    await expect(appMode.linearWidgets.getByText('Preview Seed')).toBeVisible()
  })

@@ -85,7 +85,7 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
    await appMode.footer.exitBuilder()
    await appMode.toggleAppMode()

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

    const menu = appMode.getAppModeWidgetMenu('seed')
    await appMode.select.renameWidget(menu, 'App Mode Seed')
@@ -97,7 +97,7 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
    const workflowName = `${new Date().getTime()} app-mode`
    await saveAndReopenInAppMode(comfyPage, workflowName)

-    await expect(appMode.linearWidgets).toBeVisible()
+    await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
    await expect(appMode.linearWidgets.getByText('App Mode Seed')).toBeVisible()
  })
 })
--- a/browser_tests/tests/appModeWidgetValues.spec.ts
+++ b/browser_tests/tests/appModeWidgetValues.spec.ts
@@ -63,7 +63,7 @@ test.describe('App mode widget values in prompt', { tag: '@ui' }, () => {
      ({ nodeId, widgetName }) => [nodeId, widgetName]
    )
    await appMode.enterAppModeWithInputs(inputs)
-    await expect(appMode.linearWidgets).toBeVisible()
+    await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })

    for (const { nodeId, widgetName, type, fill } of WIDGET_TEST_DATA) {
      const key = `${nodeId}:${widgetName}`
--- a/browser_tests/tests/bottomPanelLogs.spec.ts
+++ b/browser_tests/tests/bottomPanelLogs.spec.ts
@@ -4,10 +4,14 @@ import {
 } from '@e2e/fixtures/ComfyPage'

 test.describe('Bottom Panel Logs', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
  test('should open bottom panel via toggle button', async ({ comfyPage }) => {
    const { bottomPanel } = comfyPage

-    await expect(bottomPanel.root).toBeHidden()
+    await expect(bottomPanel.root).not.toBeVisible()
    await bottomPanel.toggleButton.click()
    await expect(bottomPanel.root).toBeVisible()
  })
@@ -31,7 +35,7 @@ test.describe('Bottom Panel Logs', { tag: '@ui' }, () => {
    await expect(bottomPanel.root).toBeVisible()

    await bottomPanel.toggleButton.click()
-    await expect(bottomPanel.root).toBeHidden()
+    await expect(bottomPanel.root).not.toBeVisible()
  })

  test('should switch between shortcuts and terminal panels', async ({
@@ -51,7 +55,7 @@ test.describe('Bottom Panel Logs', { tag: '@ui' }, () => {
    await expect(logsTab).toBeVisible()
    await expect(
      comfyPage.page.locator('[id*="tab_shortcuts-essentials"]')
-    ).toBeHidden()
+    ).not.toBeVisible()
  })

  test('should persist Logs tab content in bottom panel', async ({
--- a/browser_tests/tests/bottomPanelShortcuts.spec.ts
+++ b/browser_tests/tests/bottomPanelShortcuts.spec.ts
@@ -3,14 +3,18 @@ import { expect } from '@playwright/test'
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'

 test.describe('Bottom Panel Shortcuts', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
  test('should toggle shortcuts panel visibility', async ({ comfyPage }) => {
    const { bottomPanel } = comfyPage

-    await expect(bottomPanel.root).toBeHidden()
+    await expect(bottomPanel.root).not.toBeVisible()
    await bottomPanel.keyboardShortcutsButton.click()
    await expect(bottomPanel.root).toBeVisible()
    await bottomPanel.keyboardShortcutsButton.click()
-    await expect(bottomPanel.root).toBeHidden()
+    await expect(bottomPanel.root).not.toBeVisible()
  })

  test('should display essentials shortcuts tab', async ({ comfyPage }) => {
@@ -99,15 +103,14 @@ test.describe('Bottom Panel Shortcuts', { tag: '@ui' }, () => {

    const keyBadges = bottomPanel.shortcuts.keyBadges
    await keyBadges.first().waitFor({ state: 'visible' })
-    await expect.poll(() => keyBadges.count()).toBeGreaterThanOrEqual(1)
+    const count = await keyBadges.count()
+    expect(count).toBeGreaterThanOrEqual(1)

-    await expect
-      .poll(() => keyBadges.allTextContents())
-      .toEqual(
-        expect.arrayContaining([
-          expect.stringMatching(/^(Ctrl|Cmd|Shift|Alt)$/)
-        ])
-      )
+    const badgeText = await keyBadges.allTextContents()
+    const hasModifiers = badgeText.some((text) =>
+      ['Ctrl', 'Cmd', 'Shift', 'Alt'].includes(text)
+    )
+    expect(hasModifiers).toBeTruthy()
  })

  test('should maintain panel state when switching between panels', async ({
@@ -178,7 +181,7 @@ test.describe('Bottom Panel Shortcuts', { tag: '@ui' }, () => {
    await expect(bottomPanel.root).toBeVisible()

    await bottomPanel.keyboardShortcutsButton.click()
-    await expect(bottomPanel.root).toBeHidden()
+    await expect(bottomPanel.root).not.toBeVisible()
  })

  test('should display shortcuts in organized columns', async ({
@@ -188,10 +191,13 @@ test.describe('Bottom Panel Shortcuts', { tag: '@ui' }, () => {

    await bottomPanel.keyboardShortcutsButton.click()

-    await expect(comfyPage.page.getByTestId('shortcuts-columns')).toBeVisible()
+    await expect(
+      comfyPage.page.locator('[data-testid="shortcuts-columns"]')
+    ).toBeVisible()

    const subcategoryTitles = bottomPanel.shortcuts.subcategoryTitles
-    await expect.poll(() => subcategoryTitles.count()).toBeGreaterThanOrEqual(2)
+    const titleCount = await subcategoryTitles.count()
+    expect(titleCount).toBeGreaterThanOrEqual(2)
  })

  test('should open shortcuts panel with Ctrl+Shift+K', async ({
@@ -199,7 +205,7 @@ test.describe('Bottom Panel Shortcuts', { tag: '@ui' }, () => {
  }) => {
    const { bottomPanel } = comfyPage

-    await expect(bottomPanel.root).toBeHidden()
+    await expect(bottomPanel.root).not.toBeVisible()

    await comfyPage.page.keyboard.press('Control+Shift+KeyK')

--- a/browser_tests/tests/browserTabTitle.spec.ts
+++ b/browser_tests/tests/browserTabTitle.spec.ts
@@ -5,6 +5,10 @@ import type { WorkspaceStore } from '@e2e/types/globals'

 test.describe('Browser tab title', { tag: '@smoke' }, () => {
  test.describe('Beta Menu', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    })
+
    test('Can display workflow name', async ({ comfyPage }) => {
      const workflowName = await comfyPage.page.evaluate(async () => {
        return (window.app!.extensionManager as WorkspaceStore).workflow
--- a/browser_tests/tests/builderReorder.spec.ts
+++ b/browser_tests/tests/builderReorder.spec.ts
@@ -6,7 +6,6 @@ import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import type { AppModeHelper } from '@e2e/fixtures/helpers/AppModeHelper'
 import {
  builderSaveAs,
-  createAndSaveApp,
  openWorkflowFromSidebar,
  setupBuilder
 } from '@e2e/helpers/builderTestUtils'
@@ -22,7 +21,7 @@ async function saveCloseAndReopenAsApp(
  await appMode.steps.goToPreview()
  await builderSaveAs(appMode, workflowName)
  await appMode.saveAs.closeButton.click()
-  await expect(appMode.saveAs.successDialog).toBeHidden()
+  await comfyPage.nextFrame()

  await appMode.footer.exitBuilder()
  await openWorkflowFromSidebar(comfyPage, workflowName)
@@ -123,7 +122,7 @@ test.describe('Builder input reordering', { tag: '@ui' }, () => {
    const workflowName = `${Date.now()} reorder-preview`
    await saveCloseAndReopenAsApp(comfyPage, appMode, workflowName)

-    await expect(appMode.linearWidgets).toBeVisible()
+    await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
    await expect(appMode.select.previewWidgetLabels).toHaveText([
      'steps',
      'cfg',
@@ -148,58 +147,11 @@ test.describe('Builder input reordering', { tag: '@ui' }, () => {
    const workflowName = `${Date.now()} reorder-persist`
    await saveCloseAndReopenAsApp(comfyPage, appMode, workflowName)

-    await expect(appMode.linearWidgets).toBeVisible()
+    await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
    await expect(appMode.select.previewWidgetLabels).toHaveText([
      'steps',
      'cfg',
      'seed'
    ])
  })
-
-  test('Reordering inputs in one app does not corrupt another app', async ({
-    comfyPage
-  }) => {
-    const { appMode } = comfyPage
-    const suffix = String(Date.now())
-    const app1Name = `app1-${suffix}`
-    const app2Name = `app2-${suffix}`
-    const app2Widgets = ['seed', 'steps']
-
-    // Create and save app1 with [seed, steps, cfg]
-    await createAndSaveApp(comfyPage, app1Name, WIDGETS)
-    await appMode.footer.exitBuilder()
-
-    // Create app2 in a new tab so both apps are open simultaneously
-    await comfyPage.menu.topbar.triggerTopbarCommand(['New'])
-    await createAndSaveApp(comfyPage, app2Name, app2Widgets)
-    await appMode.footer.exitBuilder()
-
-    // Switch to app1 tab and enter builder
-    await comfyPage.menu.topbar.getWorkflowTab(app1Name).click()
-    await appMode.enterBuilder()
-    await appMode.steps.goToInputs()
-    await expect(appMode.select.inputItemTitles).toHaveText(WIDGETS)
-
-    // Reorder app1 inputs: drag 'seed' from first to last
-    await appMode.select.dragInputItem(0, 2)
-    const app1Reordered = ['steps', 'cfg', 'seed']
-    await expect(appMode.select.inputItemTitles).toHaveText(app1Reordered)
-
-    // Switch to app2 tab and enter builder
-    await appMode.footer.exitBuilder()
-    await comfyPage.menu.topbar.getWorkflowTab(app2Name).click()
-    await appMode.enterBuilder()
-    await appMode.steps.goToInputs()
-
-    // Verify app2 inputs are not corrupted — still [seed, steps]
-    await expect(appMode.select.inputItemTitles).toHaveText(app2Widgets)
-
-    // Switch back to app1 and verify reorder persisted
-    await appMode.footer.exitBuilder()
-    await comfyPage.menu.topbar.getWorkflowTab(app1Name).click()
-    await appMode.enterBuilder()
-    await appMode.steps.goToInputs()
-
-    await expect(appMode.select.inputItemTitles).toHaveText(app1Reordered)
-  })
 })
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Alexander Brown	efbb58cf67	Merge branch 'main' into glary/replace-delay-with-retrying-assertions	2026-04-08 11:29:47 -07:00
Glary-Bot	0802cbc76b	fix: add fast-fail timeout to inner toBeHidden assertion The inner toBeHidden() had a 5s default timeout that consumed the entire toPass budget, preventing retry intervals from firing. Adding { timeout: 200 } makes the assertion fail fast so toPass retries at 300ms/500ms/1000ms — the 300ms+ retries land after the dialog's 266ms debounce window.	2026-04-08 06:26:47 +00:00
Glary-Bot	c205530282	fix: use dispatchEvent to bypass canvas overlay for dialog dismiss The dialog's click-outside handler (LGraphCanvas.prompt L7175-7190) registers via setTimeout(10ms) with a 256ms debounce. The canvas z-999 overlay blocks normal Playwright click() and force:true doesn't set e.target to the canvas element. dispatchEvent('click') bypasses the overlay while correctly targeting the canvas. Custom toPass intervals [300, 500, 1000] start past the 266ms debounce.	2026-04-08 05:53:54 +00:00
Glary-Bot	78b0ec5efb	fix: address CI failures in delay-removal tests - Toggle test (flaky): add nextFrame() after screenshot match to settle canvas before re-toggle click - Dialog tests (failed): add force:true to canvas click inside toPass() to bypass actionability checks that hung on dialog overlay, and increase timeout to 5s	2026-04-08 05:20:02 +00:00
Glary-Bot	81c0a625f2	test: replace hardcoded delay() calls with retrying assertions - Remove comfyPage.delay(1000) in toggle test — the preceding toHaveScreenshot already confirms the canvas is stable - Replace comfyPage.delay(300) in two dialog-dismiss tests with toPass() blocks that retry the click+hidden assertion, handling the case where the click-outside handler isn't attached yet	2026-04-08 04:49:19 +00:00