fix: improve findCommand error message per review feedback

## Summary

Add `windowsHide: true` to the `execSync('git rev-parse HEAD')` call in
`vite.config.mts` to prevent a console window from flashing on Windows
during builds.

## Changes

- **What**: Pass `windowsHide: true` option to `execSync` when fetching
the git commit hash at build time. This suppresses the transient cmd.exe
popup that appears on Windows.

## Review Focus

Minimal, single-option change. `windowsHide` is a Node.js built-in
option for `child_process` methods — no-op on non-Windows platforms.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-11144-fix-vite-hide-git-rev-parse-window-on-Windows-33e6d73d365081ed9a14da5f47ccac4d)
by [Unito](https://www.unito.io)

Co-authored-by: Amp <amp@ampcode.com>

.claude/skills/hardening-flaky-e2e-tests/SKILL.md

@@ -0,0 +1,246 @@
+---
+name: hardening-flaky-e2e-tests
+description: 'Diagnoses and fixes flaky Playwright e2e tests by replacing race-prone patterns with retry-safe alternatives. Use when triaging CI flakes, hardening spec files, fixing timing races, or asked to stabilize browser tests. Triggers on: flaky, flake, harden, stabilize, race condition in e2e, intermittent failure.'
+---
+
+# Hardening Flaky E2E Tests
+
+Fix flaky Playwright specs by identifying race-prone patterns and replacing them with retry-safe alternatives. This skill covers diagnosis, pattern matching, and mechanical transforms — not writing new tests (see `writing-playwright-tests` for that).
+
+## Workflow
+
+### 1. Gather CI Evidence
+
+```bash
+gh run list --workflow=ci-test.yaml --limit=5
+gh run download <run-id> -n playwright-report
+```
+
+- Open `report.json` and search for `"status": "flaky"` entries.
+- Collect file paths, test titles, and error messages.
+- Do NOT trust green checks alone — flaky tests that passed on retry still need fixing.
+- Use `error-context.md`, traces, and page snapshots before editing code.
+- Pull the newest run after each push instead of assuming the flaky set is unchanged.
+
+### 2. Classify the Flake
+
+Read the failing assertion and match it against the pattern table. Most flakes fall into one of these categories:
+
+| #   | Pattern                               | Signature in Code                                         | Fix                                                              |
+| --- | ------------------------------------- | --------------------------------------------------------- | ---------------------------------------------------------------- |
+| 1   | **Snapshot-then-assert**              | `expect(await evaluate()).toBe(x)`                        | `await expect.poll(() => evaluate()).toBe(x)`                    |
+| 2   | **Immediate count**                   | `const n = await loc.count(); expect(n).toBe(3)`          | `await expect(loc).toHaveCount(3)`                               |
+| 3   | **nextFrame after menu click**        | `clickMenuItem(x); nextFrame()`                           | `clickMenuItem(x); contextMenu.waitForHidden()`                  |
+| 4   | **Tight poll timeout**                | `expect.poll(..., { timeout: 250 })`                      | ≥2000 ms; prefer default 5000 ms                                 |
+| 5   | **Immediate evaluate after mutation** | `setSetting(k, v); expect(await evaluate()).toBe(x)`      | `await expect.poll(() => evaluate()).toBe(x)`                    |
+| 6   | **Screenshot without readiness**      | `loadWorkflow(); nextFrame(); toHaveScreenshot()`         | `waitForNodes()` or poll state first                             |
+| 7   | **Non-deterministic node order**      | `getNodeRefsByType('X')[0]` with >1 match                 | `getNodeRefById(id)` or guard `toHaveLength(1)`                  |
+| 8   | **Fake readiness helper**             | Helper clicks but doesn't assert state                    | Remove; poll the actual value                                    |
+| 9   | **Immediate graph state after drop**  | `expect(await getLinkCount()).toBe(1)`                    | `await expect.poll(() => getLinkCount()).toBe(1)`                |
+| 10  | **Immediate boundingBox/layout read** | `const box = await loc.boundingBox(); expect(box!.width)` | `await expect.poll(() => loc.boundingBox().then(b => b?.width))` |
+
+### 3. Apply the Transform
+
+#### Rule: Choose the Smallest Correct Assertion
+
+- **Locator state** → use built-in retrying assertions: `toBeVisible()`, `toHaveText()`, `toHaveCount()`, `toHaveClass()`
+- **Single async value** → `expect.poll(() => asyncFn()).toBe(expected)`
+- **Multiple assertions that must settle together** → `expect(async () => { ... }).toPass()`
+- **Never** use `waitForTimeout()` to hide a race.
+
+```typescript
+// ✅ Single value — use expect.poll
+await expect
+  .poll(() => comfyPage.page.evaluate(() => window.app!.graph.links.length))
+  .toBe(3)
+
+// ✅ Locator count — use toHaveCount
+await expect(comfyPage.page.locator('.dom-widget')).toHaveCount(2)
+
+// ✅ Multiple conditions — use toPass
+await expect(async () => {
+  expect(await node1.getValue()).toBe('foo')
+  expect(await node2.getValue()).toBe('bar')
+}).toPass({ timeout: 5000 })
+```
+
+#### Rule: Wait for the Real Readiness Boundary
+
+Visible is not always ready. Prefer user-facing assertions when possible; poll internal state only when there is no UI surface to assert on.
+
+Common readiness boundaries:
+
+| After this action...                   | Wait for...                                                  |
+| -------------------------------------- | ------------------------------------------------------------ |
+| Canvas interaction (drag, click node)  | `await comfyPage.nextFrame()`                                |
+| Menu item click                        | `await contextMenu.waitForHidden()`                          |
+| Workflow load                          | `await comfyPage.workflow.loadWorkflow(...)` (built-in wait) |
+| Settings write                         | Poll the setting value with `expect.poll()`                  |
+| Node pin/bypass/collapse toggle        | `await expect.poll(() => nodeRef.isPinned()).toBe(true)`     |
+| Graph mutation (add/remove node, link) | Poll link/node count                                         |
+| Clipboard write                        | Poll pasted value                                            |
+| Screenshot                             | Ensure nodes are rendered: `waitForNodes()` or poll state    |
+
+#### Rule: Expose Locators for Retrying Assertions
+
+When a helper returns a count via `await loc.count()`, callers can't use `toHaveCount()`. Expose the underlying `Locator` as a getter so callers choose between:
+
+```typescript
+// Helper exposes locator
+get domWidgets(): Locator {
+  return this.page.locator('.dom-widget')
+}
+
+// Caller uses retrying assertion
+await expect(comfyPage.domWidgets).toHaveCount(2)
+```
+
+Replace count methods with locator getters so callers can use retrying assertions directly.
+
+#### Rule: Fix Check-then-Act Races in Helpers
+
+```typescript
+// ❌ Race: count can change between check and waitFor
+const count = await locator.count()
+if (count > 0) {
+  await locator.waitFor({ state: 'hidden' })
+}
+
+// ✅ Direct: waitFor handles both cases
+await locator.waitFor({ state: 'hidden' })
+```
+
+#### Rule: Remove force:true from Clicks
+
+`force: true` bypasses actionability checks, hiding real animation/visibility races. Remove it and fix the underlying timing issue.
+
+```typescript
+// ❌ Hides the race
+await closeButton.click({ force: true })
+
+// ✅ Surfaces the real issue — fix with proper wait
+await closeButton.click()
+await dialog.waitForHidden()
+```
+
+#### Rule: Handle Non-deterministic Element Order
+
+When `getNodeRefsByType` returns multiple nodes, the order is not guaranteed. Don't use index `[0]` blindly.
+
+```typescript
+// ❌ Assumes order
+const node = (await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode'))[0]
+
+// ✅ Find by ID or proximity
+const nodes = await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
+let target = nodes[0]
+for (const n of nodes) {
+  const pos = await n.getPosition()
+  if (Math.abs(pos.y - expectedY) < minDist) target = n
+}
+```
+
+Or guard the assumption:
+
+```typescript
+const nodes = await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
+expect(nodes).toHaveLength(1)
+const node = nodes[0]
+```
+
+#### Rule: Use toPass for Timing-sensitive Dismiss Guards
+
+Some UI elements (e.g. LiteGraph's graphdialog) have built-in dismiss delays. Retry the entire dismiss action:
+
+```typescript
+// ✅ Retry click+assert together
+await expect(async () => {
+  await comfyPage.canvas.click({ position: { x: 10, y: 10 } })
+  await expect(dialog).toBeHidden({ timeout: 500 })
+}).toPass({ timeout: 5000 })
+```
+
+### 4. Keep Changes Narrow
+
+- Shared helpers should drive setup to a stable boundary.
+- Do not encode one-spec timing assumptions into generic helpers.
+- If a race only matters to one spec, prefer a local wait in that spec.
+- If a helper fails before the real test begins, remove or relax the brittle precondition and let downstream UI interaction prove readiness.
+
+### 5. Verify Narrowly
+
+```bash
+# Targeted rerun with repetition
+pnpm test:browser:local -- browser_tests/tests/myFile.spec.ts --repeat-each 10
+
+# Single test by line number (avoids grep quoting issues on Windows)
+pnpm test:browser:local -- browser_tests/tests/myFile.spec.ts:42
+```
+
+- Use `--repeat-each 10` for targeted flake verification (use 20 for single test cases).
+- Verify with the smallest command that exercises the flaky path.
+
+### 6. Watch CI E2E Runs
+
+After pushing, use `gh` to monitor the E2E workflow:
+
+```bash
+# Find the run for the current branch
+gh run list --workflow="CI: Tests E2E" --branch=$(git branch --show-current) --limit=1
+
+# Watch it live (blocks until complete, streams logs)
+gh run watch <run-id>
+
+# One-liner: find and watch the latest E2E run for the current branch
+gh run list --workflow="CI: Tests E2E" --branch=$(git branch --show-current) --limit=1 --json databaseId --jq ".[0].databaseId" | xargs gh run watch
+```
+
+On Windows (PowerShell):
+
+```powershell
+# One-liner equivalent
+gh run watch (gh run list --workflow="CI: Tests E2E" --branch=$(git branch --show-current) --limit=1 --json databaseId --jq ".[0].databaseId")
+```
+
+After the run completes:
+
+```bash
+# Download the Playwright report artifact
+gh run download <run-id> -n playwright-report
+
+# View the run summary in browser
+gh run view <run-id> --web
+```
+
+Also watch the unit test workflow in parallel if you changed helpers:
+
+```bash
+gh run list --workflow="CI: Tests Unit" --branch=$(git branch --show-current) --limit=1
+```
+
+### 7. Pre-merge Checklist
+
+Before merging a flaky-test fix, confirm:
+
+- [ ] The latest CI artifact was inspected directly
+- [ ] The root cause is stated as a race or readiness mismatch
+- [ ] The fix waits on the real readiness boundary
+- [ ] The assertion primitive matches the job (poll vs toHaveCount vs toPass)
+- [ ] The fix stays local unless a shared helper truly owns the race
+- [ ] Local verification uses a targeted rerun
+- [ ] No behavioral changes to the test — only timing/retry strategy updated
+
+## Local Noise — Do Not Fix
+
+These are local distractions, not CI root causes:
+
+- Missing local input fixture files required by the test path
+- Missing local models directory
+- Teardown `EPERM` while restoring the local browser-test user data directory
+- Local screenshot baseline differences on Windows
+
+Rules:
+
+- First confirm whether it blocks the exact flaky path under investigation.
+- Do not commit temporary local assets used only for verification.
+- Do not commit local screenshot baselines.

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

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

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

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

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

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

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

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

.github/actions/lint-format-verify/action.yml

@@ -0,0 +1,31 @@
+name: 'Lint and format verify'
+description: >
+  Runs the lint/format/knip verification suite plus a conditional
+  browser-tests typecheck. Shared by ci-lint-format.yaml (PR) and
+  ci-lint-format-queue.yaml (merge queue) so both paths run the exact
+  same checks. The caller is responsible for checkout and frontend setup
+  before invoking this action.
+
+runs:
+  using: composite
+  steps:
+    - name: Detect browser_tests changes
+      id: changed-paths
+      uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
+      with:
+        filters: |
+          browser_tests:
+            - 'browser_tests/**'
+
+    - name: Verify lint and format
+      shell: bash
+      run: |
+        pnpm lint
+        pnpm stylelint
+        pnpm format:check
+        pnpm knip
+
+    - name: Typecheck browser tests
+      if: steps.changed-paths.outputs.browser_tests == 'true'
+      shell: bash
+      run: pnpm typecheck:browser

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

@@ -0,0 +1,29 @@
+# Description: Lint and format verification for GitHub merge queue runs.
+# Paired with ci-lint-format.yaml — workflow name and job name must match
+# so branch protection resolves a single required check in both the
+# pull_request and merge_group contexts. This file runs verify-only steps
+# with a read-only token; auto-fix and PR comments live in the PR workflow.
+name: 'CI: Lint Format'
+
+on:
+  merge_group:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+jobs:
+  lint-and-format:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout merge group ref
+        uses: actions/checkout@v6
+
+      - name: Setup frontend
+        uses: ./.github/actions/setup-frontend
+
+      - name: Verify lint and format
+        uses: ./.github/actions/lint-format-verify

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

@@ -1,4 +1,7 @@
-# Description: Linting and code formatting validation for pull requests
+# Description: Linting and code formatting validation for pull requests.
+# Paired with ci-lint-format-queue.yaml - workflow name and job name must
+# match so branch protection resolves a single required check in both the
+# pull_request and merge_group contexts.
 name: 'CI: Lint Format'
 
 on:
@@ -26,14 +29,6 @@ jobs:
       - name: Setup frontend
         uses: ./.github/actions/setup-frontend
 
-      - name: Detect browser_tests changes
-        id: changed-paths
-        uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
-        with:
-          filters: |
-            browser_tests:
-              - 'browser_tests/**'
-
       - name: Run ESLint with auto-fix
         run: pnpm lint:fix
 
@@ -77,16 +72,8 @@ jobs:
           echo "See CONTRIBUTING.md for more details."
           exit 1
 
-      - name: Final validation
-        run: |
-          pnpm lint
-          pnpm stylelint
-          pnpm format:check
-          pnpm knip
-
-      - name: Typecheck browser tests
-        if: steps.changed-paths.outputs.browser_tests == 'true'
-        run: pnpm typecheck:browser
+      - name: Verify lint and format
+        uses: ./.github/actions/lint-format-verify
 
       - name: Comment on PR about auto-fix
         if: steps.verify-changed-files.outputs.changed == 'true' && github.event.pull_request.head.repo.full_name == github.repository

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

@@ -8,6 +8,7 @@ on:
   pull_request:
     branches-ignore: [wip/*, draft/*, temp/*]
     paths-ignore: ['**/*.md']
+  merge_group:
   workflow_dispatch:
 
 concurrency:

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

@@ -8,6 +8,7 @@ on:
   pull_request:
     branches-ignore: [wip/*, draft/*, temp/*]
     paths-ignore: ['**/*.md']
+  merge_group:
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

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

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

.oxlintrc.json

@@ -64,6 +64,7 @@
         ]
       }
     ],
+    "no-unsafe-optional-chaining": "error",
     "no-self-assign": "allow",
     "no-unused-expressions": "off",
     "no-unused-private-class-members": "off",
@@ -104,8 +105,7 @@
         "allowInterfaces": "always"
       }
     ],
-    "vue/no-import-compiler-macros": "error",
-    "vue/no-dupe-keys": "error"
+    "vue/no-import-compiler-macros": "error"
   },
   "overrides": [
     {

AGENTS.md

@@ -179,6 +179,12 @@ This project uses **pnpm**. Always prefer scripts defined in `package.json` (e.g
 24. Do not use function expressions if it's possible to use function declarations instead
 25. Watch out for [Code Smells](https://wiki.c2.com/?CodeSmell) and refactor to avoid them
 
+## Design Standards
+
+Before implementing any user-facing feature, consult the [Comfy Design Standards](https://www.figma.com/design/QreIv5htUaSICNuO2VBHw0/Comfy-Design-Standards) Figma file. Use the Figma MCP to fetch it live — the file is the single source of truth and may be updated by designers at any time.
+
+See `docs/guidance/design-standards.md` for Figma file keys, section node IDs, and component references.
+
 ## Testing Guidelines
 
 See @docs/testing/\*.md for detailed patterns.
@@ -226,6 +232,7 @@ See @docs/testing/\*.md for detailed patterns.
 - shadcn/vue: <https://www.shadcn-vue.com/>
 - Reka UI: <https://reka-ui.com/>
 - PrimeVue: <https://primevue.org>
+- Comfy Design Standards: <https://www.figma.com/design/QreIv5htUaSICNuO2VBHw0/Comfy-Design-Standards>
 - ComfyUI: <https://docs.comfy.org>
 - Electron: <https://www.electronjs.org/docs/latest/>
 - Wiki: <https://deepwiki.com/Comfy-Org/ComfyUI_frontend/1-overview>
@@ -311,6 +318,9 @@ When referencing Comfy-Org repos:
   - Find existing `!important` classes that are interfering with the styling and propose corrections of those instead.
 - NEVER use arbitrary percentage values like `w-[80%]` when a Tailwind fraction utility exists
   - Use `w-4/5` instead of `w-[80%]`, `w-1/2` instead of `w-[50%]`, etc.
+- NEVER use font-size classes (`text-xs`, `text-sm`, etc.) to size `icon-[...]` (iconify) icons
+  - Iconify icons size via `width`/`height: 1.2em`, so font-size produces unpredictable results
+  - Use `size-*` classes for explicit sizing, or set font-size on the **parent** container and let `1.2em` scale naturally
 
 ## Agent-only rules
 

CONTRIBUTING.md

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

apps/website/src/components/AcademySection.vue

@@ -1,9 +1,15 @@
 <script setup lang="ts">
-const features = [
-  { icon: '📚', label: 'Guided Tutorials' },
-  { icon: '🎥', label: 'Video Courses' },
-  { icon: '🛠️', label: 'Hands-on Projects' }
-]
+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) }
+])
 </script>
 
 <template>
@@ -11,16 +17,17 @@ const features = [
     <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 uppercase tracking-widest text-brand-yellow"
+        class="inline-block rounded-full bg-brand-yellow/10 px-4 py-1.5 text-xs tracking-widest text-brand-yellow uppercase"
       >
-        COMFY ACADEMY
+        {{ t('academy.badge', locale) }}
       </span>
 
-      <h2 class="mt-6 text-3xl font-bold text-white">Master AI Workflows</h2>
+      <h2 class="mt-6 text-3xl font-bold text-white">
+        {{ t('academy.heading', locale) }}
+      </h2>
 
       <p class="mt-4 text-smoke-700">
-        Learn to build professional AI workflows with guided tutorials, video
-        courses, and hands-on projects.
+        {{ t('academy.body', locale) }}
       </p>
 
       <!-- Feature bullets -->
@@ -40,7 +47,7 @@ const features = [
         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"
       >
-        EXPLORE ACADEMY
+        {{ t('academy.cta', locale) }}
       </a>
     </div>
   </section>

apps/website/src/components/CTASection.vue

@@ -1,37 +1,43 @@
 <script setup lang="ts">
-const cards = [
+import { computed } from 'vue'
+import type { Locale } from '../i18n/translations'
+import { t } from '../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const cards = computed(() => [
   {
     icon: '🖥️',
-    title: 'Comfy Desktop',
-    description: 'Full power on your local machine. Free and open source.',
-    cta: 'DOWNLOAD',
+    title: t('cta.desktop.title', locale),
+    description: t('cta.desktop.desc', locale),
+    cta: t('cta.desktop.cta', locale),
     href: '/download',
     outlined: false
   },
   {
     icon: '☁️',
-    title: 'Comfy Cloud',
-    description: 'Run workflows in the cloud. No GPU required.',
-    cta: 'TRY CLOUD',
+    title: t('cta.cloud.title', locale),
+    description: t('cta.cloud.desc', locale),
+    cta: t('cta.cloud.cta', locale),
     href: 'https://app.comfy.org',
     outlined: false
   },
   {
     icon: '⚡',
-    title: 'Comfy API',
-    description: 'Integrate AI generation into your applications.',
-    cta: 'VIEW DOCS',
+    title: t('cta.api.title', locale),
+    description: t('cta.api.desc', locale),
+    cta: t('cta.api.cta', locale),
     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">
-        Choose Your Way to Comfy
+        {{ t('cta.heading', locale) }}
       </h2>
 
       <!-- CTA cards -->

apps/website/src/components/GetStartedSection.vue

@@ -1,30 +1,37 @@
 <script setup lang="ts">
-const steps = [
+import { computed } from 'vue'
+import type { Locale } from '../i18n/translations'
+import { t } from '../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const steps = computed(() => [
   {
     number: '1',
-    title: 'Download & Sign Up',
-    description: 'Get Comfy Desktop for free or create a Cloud account'
+    title: t('getStarted.step1.title', locale),
+    description: t('getStarted.step1.desc', locale)
   },
   {
     number: '2',
-    title: 'Load a Workflow',
-    description:
-      'Choose from thousands of community workflows or build your own'
+    title: t('getStarted.step2.title', locale),
+    description: t('getStarted.step2.desc', locale)
   },
   {
     number: '3',
-    title: 'Generate',
-    description: 'Hit run and watch your AI workflow come to life'
+    title: t('getStarted.step3.title', locale),
+    description: t('getStarted.step3.desc', locale)
   }
-]
+])
 </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">Get Started in Minutes</h2>
+      <h2 class="text-3xl font-bold text-white">
+        {{ t('getStarted.heading', locale) }}
+      </h2>
       <p class="mt-4 text-smoke-700">
-        From download to your first AI-generated output in three simple steps
+        {{ t('getStarted.subheading', locale) }}
       </p>
 
       <!-- Steps -->
@@ -33,7 +40,7 @@ const steps = [
           <!-- Connecting line between steps (desktop only) -->
           <div
             v-if="index < steps.length - 1"
-            class="absolute right-0 top-8 hidden w-full translate-x-1/2 border-t border-brand-yellow/20 md:block"
+            class="absolute top-8 right-0 hidden w-full translate-x-1/2 border-t border-brand-yellow/20 md:block"
           />
 
           <div class="relative">
@@ -55,7 +62,7 @@ const steps = [
         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"
       >
-        DOWNLOAD COMFY
+        {{ t('getStarted.cta', locale) }}
       </a>
     </div>
   </section>

apps/website/src/components/HeroSection.vue

@@ -1,16 +1,23 @@
 <script setup lang="ts">
-const ctaButtons = [
+import { computed } from 'vue'
+
+import type { Locale } from '../i18n/translations'
+import { t } from '../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const ctaButtons = computed(() => [
   {
-    label: 'GET STARTED',
+    label: t('hero.cta.getStarted', locale),
     href: 'https://app.comfy.org',
     variant: 'solid' as const
   },
   {
-    label: 'LEARN MORE',
+    label: t('hero.cta.learnMore', locale),
     href: '/about',
     variant: 'outline' as const
   }
-]
+])
 </script>
 
 <template>
@@ -24,11 +31,11 @@ const ctaButtons = [
       <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="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]"
+            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"
           >
             <!-- Gap on the right side to form "C" shape -->
             <div
-              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"
+              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"
             />
           </div>
         </div>
@@ -37,14 +44,13 @@ const ctaButtons = [
       <!-- Right: Text content -->
       <div class="flex w-full flex-col items-start md:w-[45%]">
         <h1
-          class="text-5xl font-bold leading-tight tracking-tight text-white md:text-6xl lg:text-7xl"
+          class="text-5xl/tight font-bold tracking-tight text-white md:text-6xl lg:text-7xl"
         >
-          Professional Control of Visual AI
+          {{ t('hero.headline', locale) }}
         </h1>
 
         <p class="mt-6 max-w-lg text-lg text-smoke-700">
-          Comfy is the AI creation engine for visual professionals who demand
-          control over every model, every parameter, and every output.
+          {{ t('hero.subheadline', locale) }}
         </p>
 
         <div class="mt-8 flex flex-wrap gap-4">

apps/website/src/components/ManifestoSection.vue

@@ -1,3 +1,10 @@
+<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">
@@ -7,13 +14,11 @@
       </span>
 
       <h2 class="text-4xl font-bold text-white md:text-5xl">
-        Method, Not Magic
+        {{ t('manifesto.heading', locale) }}
       </h2>
 
-      <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 class="mx-auto mt-6 max-w-2xl text-lg/relaxed text-smoke-700">
+        {{ t('manifesto.body', locale) }}
       </p>
 
       <!-- Separator line -->

apps/website/src/components/ProductShowcase.vue

@@ -1,6 +1,16 @@
 <!-- TODO: Replace with actual workflow demo content -->
 <script setup lang="ts">
-const features = ['Node-Based Editor', 'Real-Time Preview', 'Version Control']
+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)
+])
 </script>
 
 <template>
@@ -8,9 +18,11 @@ const features = ['Node-Based Editor', 'Real-Time Preview', 'Version Control']
     <div class="mx-auto max-w-7xl px-6">
       <!-- Section header -->
       <div class="text-center">
-        <h2 class="text-3xl font-bold text-white">See Comfy in Action</h2>
+        <h2 class="text-3xl font-bold text-white">
+          {{ t('showcase.heading', locale) }}
+        </h2>
         <p class="mx-auto mt-4 max-w-2xl text-smoke-700">
-          Watch how professionals build AI workflows with unprecedented control
+          {{ t('showcase.subheading', locale) }}
         </p>
       </div>
 
@@ -21,14 +33,16 @@ const features = ['Node-Based Editor', 'Real-Time Preview', 'Version Control']
         <div class="flex flex-col items-center gap-4">
           <!-- Play button triangle -->
           <div
-            class="flex h-16 w-16 items-center justify-center rounded-full border-2 border-white/20"
+            class="flex size-16 items-center justify-center rounded-full border-2 border-white/20"
             aria-hidden="true"
           >
             <div
-              class="ml-1 h-0 w-0 border-y-8 border-l-[14px] border-y-transparent border-l-white"
+              class="ml-1 size-0 border-y-8 border-l-14 border-y-transparent border-l-white"
             />
           </div>
-          <p class="text-sm text-smoke-700">Workflow Demo Coming Soon</p>
+          <p class="text-sm text-smoke-700">
+            {{ t('showcase.placeholder', locale) }}
+          </p>
         </div>
       </div>
 
@@ -40,7 +54,7 @@ const features = ['Node-Based Editor', 'Real-Time Preview', 'Version Control']
           class="flex items-center gap-2"
         >
           <span
-            class="h-2 w-2 rounded-full bg-brand-yellow"
+            class="size-2 rounded-full bg-brand-yellow"
             aria-hidden="true"
           />
           <span class="text-sm text-smoke-700">{{ feature }}</span>

apps/website/src/components/SiteFooter.vue

@@ -1,39 +1,73 @@
 <script setup lang="ts">
-const columns = [
+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(() => [
   {
-    title: 'Product',
+    title: t('footer.product', locale),
     links: [
-      { label: 'Comfy Desktop', href: '/download' },
-      { label: 'Comfy Cloud', href: 'https://app.comfy.org' },
-      { label: 'ComfyHub', href: 'https://hub.comfy.org' },
-      { label: 'Pricing', href: '/pricing' }
+      {
+        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)
+      }
     ]
   },
   {
-    title: 'Resources',
+    title: t('footer.resources', locale),
     links: [
-      { label: 'Documentation', href: 'https://docs.comfy.org' },
-      { label: 'Blog', href: 'https://blog.comfy.org' },
-      { label: 'Gallery', href: '/gallery' },
-      { label: 'GitHub', href: 'https://github.com/comfyanonymous/ComfyUI' }
+      {
+        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'
+      }
     ]
   },
   {
-    title: 'Company',
+    title: t('footer.company', locale),
     links: [
-      { label: 'About', href: '/about' },
-      { label: 'Careers', href: '/careers' },
-      { label: 'Enterprise', href: '/enterprise' }
+      { 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)
+      }
     ]
   },
   {
-    title: 'Legal',
+    title: t('footer.legal', locale),
     links: [
-      { label: 'Terms of Service', href: '/terms-of-service' },
-      { label: 'Privacy Policy', href: '/privacy-policy' }
+      {
+        label: t('footer.terms', locale),
+        href: localePath('/terms-of-service', locale)
+      },
+      {
+        label: t('footer.privacy', locale),
+        href: localePath('/privacy-policy', locale)
+      }
     ]
   }
-]
+])
 
 const socials = [
   {
@@ -76,11 +110,16 @@ const socials = [
     >
       <!-- Brand -->
       <div class="lg:col-span-1">
-        <a href="/" class="text-2xl font-bold text-brand-yellow italic">
+        <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
+        <a
+          :href="localePath('/', locale)"
+          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">
-          Professional control of visual AI.
+          {{ t('footer.tagline', locale) }}
         </p>
       </div>
 
@@ -113,7 +152,8 @@ 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() }} Comfy Org. All rights reserved.
+          &copy; {{ new Date().getFullYear() }}
+          {{ t('footer.copyright', locale) }}
         </p>
 
         <!-- Social icons -->

apps/website/src/components/SiteNav.vue

@@ -1,15 +1,23 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue'
+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 }>()
 
 const mobileMenuOpen = ref(false)
 const currentPath = ref('')
 
-const navLinks = [
-  { label: 'ENTERPRISE', href: '/enterprise' },
-  { label: 'GALLERY', href: '/gallery' },
-  { label: 'ABOUT', href: '/about' },
-  { label: 'CAREERS', href: '/careers' }
-]
+const 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 ctaLinks = [
   {
@@ -49,14 +57,19 @@ onUnmounted(() => {
 
 <template>
   <nav
-    class="fixed top-0 left-0 right-0 z-50 bg-black/80 backdrop-blur-md"
-    aria-label="Main navigation"
+    class="fixed inset-x-0 top-0 z-50 bg-black/80 backdrop-blur-md"
+    :aria-label="t('nav.ariaLabel', locale)"
   >
     <div class="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
       <!-- Logo -->
-      <a href="/" class="text-2xl font-bold italic text-brand-yellow">
+      <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
+      <a
+        :href="localePath('/', locale)"
+        class="text-2xl font-bold text-brand-yellow italic"
+      >
         Comfy
       </a>
+      <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
 
       <!-- Desktop nav links -->
       <div class="hidden items-center gap-8 md:flex">
@@ -77,8 +90,8 @@ onUnmounted(() => {
             :href="cta.href"
             :class="
               cta.primary
-                ? 'bg-brand-yellow text-black hover:opacity-90 transition-opacity'
-                : 'border border-brand-yellow text-brand-yellow hover:bg-brand-yellow hover:text-black transition-colors'
+                ? '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'
             "
             class="rounded-full px-5 py-2 text-sm font-semibold"
           >
@@ -90,7 +103,7 @@ onUnmounted(() => {
       <!-- Mobile hamburger -->
       <button
         class="flex flex-col gap-1.5 md:hidden"
-        aria-label="Toggle menu"
+        :aria-label="t('nav.toggleMenu', locale)"
         aria-controls="site-mobile-menu"
         :aria-expanded="mobileMenuOpen"
         @click="mobileMenuOpen = !mobileMenuOpen"
@@ -135,8 +148,8 @@ onUnmounted(() => {
             :href="cta.href"
             :class="
               cta.primary
-                ? 'bg-brand-yellow text-black hover:opacity-90 transition-opacity'
-                : 'border border-brand-yellow text-brand-yellow hover:bg-brand-yellow hover:text-black transition-colors'
+                ? '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'
             "
             class="rounded-full px-5 py-2 text-center text-sm font-semibold"
           >

apps/website/src/components/SocialProofBar.vue

@@ -1,4 +1,10 @@
 <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',
@@ -14,11 +20,11 @@ const logos = [
   'EA'
 ]
 
-const metrics = [
-  { value: '60K+', label: 'Custom Nodes' },
-  { value: '106K+', label: 'GitHub Stars' },
-  { value: '500K+', label: 'Community Members' }
-]
+const metrics = computed(() => [
+  { value: '60K+', label: t('social.customNodes', locale) },
+  { value: '106K+', label: t('social.githubStars', locale) },
+  { value: '500K+', label: t('social.communityMembers', locale) }
+])
 </script>
 
 <template>
@@ -26,9 +32,9 @@ const metrics = [
     <div class="mx-auto max-w-7xl px-6">
       <!-- Heading -->
       <p
-        class="text-center text-xs font-medium uppercase tracking-widest text-smoke-700"
+        class="text-center text-xs font-medium tracking-widest text-smoke-700 uppercase"
       >
-        Trusted by Industry Leaders
+        {{ t('social.heading', locale) }}
       </p>
 
       <!-- Logo row -->

apps/website/src/components/TestimonialsSection.vue

@@ -1,9 +1,28 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 
-const activeFilter = ref('All')
+import type { Locale } from '../i18n/translations'
+import { t } from '../i18n/translations'
 
-const industries = ['All', 'VFX', 'Gaming', 'Advertising', 'Photography']
+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 testimonials = [
   {
@@ -12,7 +31,7 @@ const testimonials = [
     name: 'Sarah Chen',
     title: 'Lead Technical Artist',
     company: 'Studio Alpha',
-    industry: 'VFX'
+    industry: 'VFX' as const
   },
   {
     quote:
@@ -20,7 +39,7 @@ const testimonials = [
     name: 'Marcus Rivera',
     title: 'Creative Director',
     company: 'PixelForge',
-    industry: 'Gaming'
+    industry: 'Gaming' as const
   },
   {
     quote:
@@ -28,7 +47,7 @@ const testimonials = [
     name: 'Yuki Tanaka',
     title: 'Head of AI',
     company: 'CreativeX',
-    industry: 'Advertising'
+    industry: 'Advertising' as const
   }
 ]
 
@@ -42,13 +61,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">
-        What Professionals Say
+        {{ t('testimonials.heading', locale) }}
       </h2>
 
       <!-- Industry filter pills -->
       <div class="mt-8 flex flex-wrap items-center justify-center gap-3">
         <button
-          v-for="industry in industries"
+          v-for="industry in industryKeys"
           :key="industry"
           type="button"
           :aria-pressed="activeFilter === industry"
@@ -60,7 +79,7 @@ const filteredTestimonials = computed(() => {
           "
           @click="activeFilter = industry"
         >
-          {{ industry }}
+          {{ industryLabels[industry] }}
         </button>
       </div>
 
@@ -71,7 +90,7 @@ const filteredTestimonials = computed(() => {
           :key="testimonial.name"
           class="rounded-xl border border-white/10 bg-charcoal-600 p-6"
         >
-          <blockquote class="text-base italic text-white">
+          <blockquote class="text-base text-white italic">
             &ldquo;{{ testimonial.quote }}&rdquo;
           </blockquote>
 
@@ -85,7 +104,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"
           >
-            {{ testimonial.industry }}
+            {{ industryLabels[testimonial.industry] ?? testimonial.industry }}
           </span>
         </article>
       </div>

apps/website/src/components/UseCaseSection.vue

@@ -1,14 +1,18 @@
 <!-- TODO: Wire category content swap when final assets arrive -->
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
+import type { Locale } from '../i18n/translations'
+import { t } from '../i18n/translations'
 
-const categories = [
-  'VFX & Animation',
-  'Creative Agencies',
-  'Gaming',
-  'eCommerce & Fashion',
-  'Community & Hobbyists'
-]
+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 activeCategory = ref(0)
 </script>
@@ -20,14 +24,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">
-            Built for Every Creative Industry
+            {{ t('useCase.heading', locale) }}
           </h2>
 
           <nav
@@ -52,22 +56,21 @@ const activeCategory = ref(0)
           </nav>
 
           <p class="mt-10 max-w-lg text-smoke-700">
-            Powered by 60,000+ nodes, thousands of workflows, and a community
-            that builds faster than any one company could.
+            {{ t('useCase.body', locale) }}
           </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"
           >
-            EXPLORE WORKFLOWS
+            {{ t('useCase.cta', locale) }}
           </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>

apps/website/src/components/ValuePillars.vue

@@ -1,34 +1,37 @@
 <script setup lang="ts">
-const pillars = [
+import { computed } from 'vue'
+import type { Locale } from '../i18n/translations'
+import { t } from '../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const pillars = computed(() => [
   {
     icon: '⚡',
-    title: 'Build',
-    description:
-      'Design complex AI workflows visually with our node-based editor'
+    title: t('pillars.buildTitle', locale),
+    description: t('pillars.buildDesc', locale)
   },
   {
     icon: '🎨',
-    title: 'Customize',
-    description: 'Fine-tune every parameter across any model architecture'
+    title: t('pillars.customizeTitle', locale),
+    description: t('pillars.customizeDesc', locale)
   },
   {
     icon: '🔧',
-    title: 'Refine',
-    description:
-      'Iterate on outputs with precision controls and real-time preview'
+    title: t('pillars.refineTitle', locale),
+    description: t('pillars.refineDesc', locale)
   },
   {
     icon: '⚙️',
-    title: 'Automate',
-    description:
-      'Scale your workflows with batch processing and API integration'
+    title: t('pillars.automateTitle', locale),
+    description: t('pillars.automateDesc', locale)
   },
   {
     icon: '🚀',
-    title: 'Run',
-    description: 'Deploy locally or in the cloud with identical results'
+    title: t('pillars.runTitle', locale),
+    description: t('pillars.runDesc', locale)
   }
-]
+])
 </script>
 
 <template>
@@ -36,10 +39,10 @@ const pillars = [
     <div class="mx-auto max-w-7xl">
       <header class="mb-16 text-center">
         <h2 class="text-3xl font-bold text-white md:text-4xl">
-          The Building Blocks of AI Production
+          {{ t('pillars.heading', locale) }}
         </h2>
         <p class="mt-4 text-smoke-700">
-          Five powerful capabilities that give you complete control
+          {{ t('pillars.subheading', locale) }}
         </p>
       </header>
 
@@ -50,7 +53,7 @@ const pillars = [
           class="rounded-xl border border-white/10 bg-charcoal-600 p-6 transition-colors hover:border-brand-yellow"
         >
           <div
-            class="flex h-12 w-12 items-center justify-center rounded-full bg-brand-yellow text-xl"
+            class="flex size-12 items-center justify-center rounded-full bg-brand-yellow text-xl"
           >
             {{ pillar.icon }}
           </div>

apps/website/src/i18n/translations.ts

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

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: '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' },
+  { name: 'comfyanonymous', role: 'ComfyUI 创始人、联合创始人' },
+  { name: 'Dr.Lt.Data', role: 'ComfyUI-Manager 和 Impact/Inspire Pack 作者' },
+  { name: 'pythongosssss', role: '核心贡献者、ComfyUI-Custom-Scripts 作者' },
+  { name: 'yoland68', role: 'ComfyCLI 作者、联合创始人、前 Google' },
+  { name: 'robinjhuang', role: 'Comfy Registry 维护者、联合创始人、前 Google Cloud' },
+  { name: 'jojodecay', role: 'ComfyUI 活动主持人、社区与合作关系' },
+  { name: 'christian-byrne', role: '全栈开发工程师' },
+  { name: 'Kosinkadink', role: 'AnimateDiff-Evolved 和 Advanced-ControlNet 作者' },
+  { name: 'webfiltered', role: 'Litegraph 库重构者' },
+  { name: 'Pablo', role: '产品设计、前 AI 初创公司创始人' },
+  { name: 'ComfyUI Wiki (Daxiong)', role: '官方文档和模板' },
+  { name: 'ctrlbenlu (Ben)', role: '软件工程师、前机器人领域' },
+  { name: 'Purz Beats', role: '动效设计师和机器学习工程师' },
+  { name: 'Ricyu (Rich)', role: '软件工程师、前 Meta' },
 ]
 
 const collaborators = [
-  { name: 'Yogo', role: 'Collaborator' },
-  { name: 'Fill (Machine Delusions)', role: 'Collaborator' },
-  { name: 'Julien (MJM)', role: 'Collaborator' },
+  { name: 'Yogo', role: '协作者' },
+  { name: 'Fill (Machine Delusions)', role: '协作者' },
+  { name: 'Julien (MJM)', role: '协作者' },
 ]
 
 const projects = [
-  { 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.' },
+  { name: 'ComfyUI', description: '生成式 AI 工作流的核心节点式界面。' },
+  { name: 'ComfyUI Manager', description: '一键安装、更新和管理自定义节点。' },
+  { name: 'Comfy Registry', description: '发布和发现自定义节点的官方注册表。' },
+  { name: 'Frontends', description: '驱动 ComfyUI 体验的桌面端和 Web 前端。' },
+  { name: 'Docs', description: '官方文档、指南和教程。' },
 ]
 
 const faqs = [
   {
-    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 是免费开源的，基于 GPL-3.0 许可证。您可以将其用于个人和商业项目。',
   },
   {
-    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: '谁在开发 ComfyUI？',
+    a: 'ComfyUI 由 comfyanonymous 创建，由一个小而专注的开发团队和社区贡献者共同维护。',
   },
   {
-    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: '查看我们的 GitHub 仓库来报告问题、提交 Pull Request 或构建自定义节点。加入我们的 Discord 社区与其他贡献者交流。',
   },
   {
-    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.',
+    q: '未来有什么计划？',
+    a: '我们专注于让 ComfyUI 成为生成式 AI 的操作系统——提升性能、扩展模型支持，为创作者和开发者打造更好的工具。',
   },
 ]
 ---
 
-<BaseLayout title="关于我们 — Comfy" description="Learn about the team and mission behind ComfyUI, the open-source generative AI platform.">
-  <SiteNav client:load />
+<BaseLayout title="关于我们 — Comfy" description="了解 ComfyUI 背后的团队和使命——开源的生成式 AI 平台。">
+  <SiteNav locale="zh-CN" 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">
-        An open-source community and company building the most powerful tools for generative AI creators.
+        一个开源社区和公司，致力于为生成式 AI 创作者打造最强大的工具。
       </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">Our Mission</h2>
+        <h2 class="text-sm font-semibold uppercase tracking-widest text-brand-yellow">我们的使命</h2>
         <p class="mt-6 text-3xl font-bold md:text-4xl">
-          We want to build the operating system for Gen AI.
+          我们想打造生成式 AI 的操作系统。
         </p>
         <p class="mt-6 text-lg leading-relaxed text-smoke-700">
-          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.
+          我们正在构建让创作者完全掌控生成式 AI 的基础工具。
+          从图像和视频合成到音频生成，ComfyUI 提供了一个模块化的
+          节点式环境，让专业人士和爱好者可以创建、迭代
+          和部署生产级工作流——没有黑箱。
         </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">What Do We Do?</h2>
+        <h2 class="text-center text-3xl font-bold md:text-4xl">我们做什么？</h2>
         <div class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
           {projects.map((project) => (
             <div class="rounded-xl border border-white/10 bg-charcoal-600 p-6">
@@ -98,24 +98,23 @@ 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">Who We Are</h2>
+        <h2 class="text-3xl font-bold md:text-4xl">我们是谁</h2>
         <p class="mt-6 text-lg leading-relaxed text-smoke-700">
-          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.
+          ComfyUI 最初是 comfyanonymous 的个人项目，后来发展成为一个全球性的
+          创作者、开发者和研究者社区。今天，Comfy Org 是一个位于旧金山的小型扁平化团队，
+          由相信开源 AI 工具的投资者支持。我们与令人难以置信的贡献者社区一起工作，
+          他们构建自定义节点、分享工作流，并不断突破生成式 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">Team</h2>
+        <h2 class="text-center text-3xl font-bold md:text-4xl">团队</h2>
         <div class="mt-12 grid gap-6 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
           {team.map((member) => (
             <div class="rounded-xl border border-white/10 p-5 text-center">
@@ -128,10 +127,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">Collaborators</h2>
+        <h2 class="text-2xl font-bold">协作者</h2>
         <div class="mt-8 flex flex-wrap items-center justify-center gap-8">
           {collaborators.map((person) => (
             <div class="text-center">
@@ -143,10 +142,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">FAQs</h2>
+        <h2 class="text-center text-3xl font-bold md:text-4xl">常见问题</h2>
         <div class="mt-12 space-y-10">
           {faqs.map((faq) => (
             <div>
@@ -158,19 +157,19 @@ const faqs = [
       </div>
     </section>
 
-    <!-- Join Our Team CTA -->
+    <!-- 加入我们 CTA -->
     <section class="bg-charcoal-800 px-6 py-24 text-center">
-      <h2 class="text-3xl font-bold md:text-4xl">Join Our Team</h2>
+      <h2 class="text-3xl font-bold md:text-4xl">加入我们的团队</h2>
       <p class="mx-auto mt-4 max-w-xl text-smoke-700">
-        We're looking for people who are passionate about open-source, generative AI, and building great developer tools.
+        我们正在寻找热衷于开源、生成式 AI 和打造优秀开发者工具的人。
       </p>
       <a
         href="/careers"
         class="mt-8 inline-block rounded-full bg-brand-yellow px-8 py-3 text-sm font-semibold text-black transition-opacity hover:opacity-90"
       >
-        View Open Positions
+        查看开放职位
       </a>
     </section>
   </main>
-  <SiteFooter />
+  <SiteFooter locale="zh-CN" />
 </BaseLayout>

apps/website/src/pages/zh-CN/careers.astro

@@ -78,7 +78,7 @@ const questions = [
   title="招聘 — Comfy"
   description="加入构建生成式 AI 操作系统的团队。工程、设计、市场营销等岗位开放招聘中。"
 >
-  <SiteNav client:load />
+  <SiteNav locale="zh-CN" client:load />
   <main>
     <!-- Hero -->
     <section class="px-6 pb-24 pt-40">
@@ -196,5 +196,5 @@ const questions = [
       </div>
     </section>
   </main>
-  <SiteFooter />
+  <SiteFooter locale="zh-CN" />
 </BaseLayout>

apps/website/src/pages/zh-CN/download.astro

@@ -32,7 +32,7 @@ const cards = [
 ---
 
 <BaseLayout title="下载 — Comfy">
-  <SiteNav client:load />
+  <SiteNav locale="zh-CN" 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 />
+  <SiteFooter locale="zh-CN" />
 </BaseLayout>

apps/website/src/pages/zh-CN/gallery.astro

@@ -5,7 +5,7 @@ import SiteFooter from '../../components/SiteFooter.vue'
 ---
 
 <BaseLayout title="作品集 — Comfy">
-  <SiteNav client:load />
+  <SiteNav locale="zh-CN" 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 />
+  <SiteFooter locale="zh-CN" />
 </BaseLayout>

apps/website/src/pages/zh-CN/index.astro

@@ -16,19 +16,19 @@ import SiteFooter from '../../components/SiteFooter.vue'
 ---
 
 <BaseLayout title="Comfy — 视觉 AI 的专业控制">
-  <SiteNav client:load />
+  <SiteNav locale="zh-CN" client:load />
   <main>
-    <HeroSection />
-    <SocialProofBar />
-    <ProductShowcase />
-    <ValuePillars />
-    <UseCaseSection client:visible />
-    <CaseStudySpotlight />
-    <TestimonialsSection client:visible />
-    <GetStartedSection />
-    <CTASection />
-    <ManifestoSection />
-    <AcademySection />
+    <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" />
   </main>
-  <SiteFooter />
+  <SiteFooter locale="zh-CN" />
 </BaseLayout>

apps/website/src/pages/zh-CN/privacy-policy.astro

@@ -9,7 +9,7 @@ import SiteFooter from '../../components/SiteFooter.vue'
   description="Comfy 隐私政策。了解我们如何收集、使用和保护您的个人信息。"
   noindex
 >
-  <SiteNav client:load />
+  <SiteNav locale="zh-CN" 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 />
+  <SiteFooter locale="zh-CN" />
 </BaseLayout>

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 client:load />
+  <SiteNav locale="zh-CN" 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 />
+  <SiteFooter locale="zh-CN" />
 </BaseLayout>

browser_tests/AGENTS.md

@@ -40,6 +40,39 @@ 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).

browser_tests/FLAKE_PREVENTION_RULES.md

@@ -83,6 +83,21 @@ 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:

browser_tests/README.md

@@ -210,8 +210,8 @@ Most common testing needs are already addressed by these helpers, which will mak
 
    ```typescript
    // Prefer this:
-   expect(await node.isPinned()).toBe(true)
-   expect(await node.getProperty('title')).toBe('Expected Title')
+   await expect.poll(() => node.isPinned()).toBe(true)
+   await expect.poll(() => node.getProperty('title')).toBe('Expected Title')
 
    // Over this - only use when needed:
    await expect(comfyPage.canvas).toHaveScreenshot('state.png')

browser_tests/assets/cube.obj

@@ -0,0 +1,40 @@
+# Blender 5.2.0 Alpha
+# www.blender.org
+mtllib Untitled.mtl
+o Cube
+v 2.857396 2.486626 -0.081892
+v 2.857396 0.486626 -0.081892
+v 2.857396 2.486626 1.918108
+v 2.857396 0.486626 1.918108
+v 0.857396 2.486626 -0.081892
+v 0.857396 0.486626 -0.081892
+v 0.857396 2.486626 1.918108
+v 0.857396 0.486626 1.918108
+vn -0.0000 1.0000 -0.0000
+vn -0.0000 -0.0000 1.0000
+vn -1.0000 -0.0000 -0.0000
+vn -0.0000 -1.0000 -0.0000
+vn 1.0000 -0.0000 -0.0000
+vn -0.0000 -0.0000 -1.0000
+vt 0.625000 0.500000
+vt 0.875000 0.500000
+vt 0.875000 0.750000
+vt 0.625000 0.750000
+vt 0.375000 0.750000
+vt 0.625000 1.000000
+vt 0.375000 1.000000
+vt 0.375000 0.000000
+vt 0.625000 0.000000
+vt 0.625000 0.250000
+vt 0.375000 0.250000
+vt 0.125000 0.500000
+vt 0.375000 0.500000
+vt 0.125000 0.750000
+s 0
+usemtl Material
+f 1/1/1 5/2/1 7/3/1 3/4/1
+f 4/5/2 3/4/2 7/6/2 8/7/2
+f 8/8/3 7/9/3 5/10/3 6/11/3
+f 6/12/4 2/13/4 4/5/4 8/14/4
+f 2/13/5 1/1/5 3/4/5 4/5/5
+f 6/11/6 5/10/6 1/1/6 2/13/6

browser_tests/fixtures/ComfyMouse.ts

@@ -26,11 +26,10 @@ export class ComfyMouse implements Omit<Mouse, 'move'> {
   static defaultSteps = 5
   static defaultOptions: DragOptions = { steps: ComfyMouse.defaultSteps }
 
-  constructor(readonly comfyPage: ComfyPage) {}
+  readonly mouse: Mouse
 
-  /** The normal Playwright {@link Mouse} property from {@link ComfyPage.page}. */
-  get mouse() {
-    return this.comfyPage.page.mouse
+  constructor(readonly comfyPage: ComfyPage) {
+    this.mouse = comfyPage.page.mouse
   }
 
   async nextFrame() {

browser_tests/fixtures/ComfyPage.ts

@@ -34,6 +34,7 @@ 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'
@@ -72,15 +73,13 @@ 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)
-  }
-
-  get buttons() {
-    return this.sideToolbar.locator('.side-bar-button')
+    this.buttons = this.sideToolbar.locator('.side-bar-button')
   }
 
   get modelLibraryTab() {
@@ -181,6 +180,8 @@ 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[] = []
@@ -223,6 +224,7 @@ 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)
@@ -232,10 +234,7 @@ export class ComfyPage {
     this.assets = new AssetsHelper(page)
     this.assetApi = createAssetHelper(page)
     this.modelLibrary = new ModelLibraryHelper(page)
-  }
-
-  get visibleToasts() {
-    return this.toast.visibleToasts
+    this.cloudAuth = new CloudAuthHelper(page)
   }
 
   async setupUser(username: string) {
@@ -389,9 +388,8 @@ export class ComfyPage {
     await modal.waitFor({ state: 'hidden' })
   }
 
-  /** Get number of DOM widgets on the canvas. */
-  async getDOMWidgetCount() {
-    return await this.page.locator('.dom-widget').count()
+  get domWidgets(): Locator {
+    return this.page.locator('.dom-widget')
   }
 
   async setFocusMode(focusMode: boolean) {
@@ -444,6 +442,10 @@ export const comfyPageFixture = base.extend<{
       console.error(e)
     }
 
+    if (testInfo.tags.includes('@cloud')) {
+      await comfyPage.cloudAuth.mockAuth()
+    }
+
     await comfyPage.setup()
 
     const needsPerf =

browser_tests/fixtures/UserSelectPage.ts

@@ -1,30 +1,22 @@
-import type { Page } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
 import { test as base } from '@playwright/test'
 
 export class UserSelectPage {
+  public readonly selectionUrl: string
+  public readonly container: Locator
+  public readonly newUserInput: Locator
+  public readonly existingUserSelect: Locator
+  public readonly nextButton: Locator
+
   constructor(
     public readonly url: string,
     public readonly page: Page
-  ) {}
-
-  get selectionUrl() {
-    return this.url + '/user-select'
-  }
-
-  get container() {
-    return this.page.locator('#comfy-user-selection')
-  }
-
-  get newUserInput() {
-    return this.container.locator('#new-user-input')
-  }
-
-  get existingUserSelect() {
-    return this.container.locator('#existing-user-select')
-  }
-
-  get nextButton() {
-    return this.container.getByText('Next')
+  ) {
+    this.selectionUrl = url + '/user-select'
+    this.container = page.locator('#comfy-user-selection')
+    this.newUserInput = this.container.locator('#new-user-input')
+    this.existingUserSelect = this.container.locator('#existing-user-select')
+    this.nextButton = this.container.getByText('Next')
   }
 }
 

browser_tests/fixtures/VueNodeHelpers.ts

@@ -7,13 +7,20 @@ import { TestIds } from '@e2e/fixtures/selectors'
 import { VueNodeFixture } from '@e2e/fixtures/utils/vueNodeFixtures'
 
 export class VueNodeHelpers {
-  constructor(private page: Page) {}
-
   /**
    * Get locator for all Vue node components in the DOM
    */
-  get nodes(): Locator {
-    return this.page.locator('[data-node-id]')
+  public readonly nodes: Locator
+  /**
+   * Get locator for selected Vue node components (using visual selection indicators)
+   */
+  public readonly selectedNodes: Locator
+
+  constructor(private page: Page) {
+    this.nodes = page.locator('[data-node-id]')
+    this.selectedNodes = page.locator(
+      '[data-node-id].outline-node-component-outline'
+    )
   }
 
   /**
@@ -23,13 +30,6 @@ 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.
@@ -48,13 +48,6 @@ export class VueNodeHelpers {
     return await this.nodes.count()
   }
 
-  /**
-   * Get count of selected Vue nodes
-   */
-  async getSelectedNodeCount(): Promise<number> {
-    return await this.selectedNodes.count()
-  }
-
   /**
    * Get all Vue node IDs currently in the DOM
    */

browser_tests/fixtures/components/BaseDialog.ts

@@ -25,7 +25,7 @@ export class BaseDialog {
   }
 
   async close(): Promise<void> {
-    await this.closeButton.click({ force: true })
+    await this.closeButton.click()
     await this.waitForHidden()
   }
 }

browser_tests/fixtures/components/ComfyNodeSearchBox.ts

@@ -3,13 +3,11 @@ 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')
-  }
-
-  get header() {
-    return this.root
+    this.header = this.root
       .locator('div')
       .filter({ hasText: 'Add node filter condition' })
   }
@@ -41,6 +39,8 @@ export class ComfyNodeSearchFilterSelectionPanel {
 export class ComfyNodeSearchBox {
   public readonly input: Locator
   public readonly dropdown: Locator
+  public readonly filterButton: Locator
+  public readonly filterChips: Locator
   public readonly filterSelectionPanel: ComfyNodeSearchFilterSelectionPanel
 
   constructor(public readonly page: Page) {
@@ -50,13 +50,15 @@ export class ComfyNodeSearchBox {
     this.dropdown = page.locator(
       '.comfy-vue-node-search-container .p-autocomplete-list'
     )
+    this.filterButton = page.locator(
+      '.comfy-vue-node-search-container .filter-button'
+    )
+    this.filterChips = page.locator(
+      '.comfy-vue-node-search-container .p-autocomplete-chip-item'
+    )
     this.filterSelectionPanel = new ComfyNodeSearchFilterSelectionPanel(page)
   }
 
-  get filterButton() {
-    return this.page.locator('.comfy-vue-node-search-container .filter-button')
-  }
-
   async fillAndSelectFirstNode(
     nodeName: string,
     options?: { suggestionIndex?: number; exact?: boolean }
@@ -78,12 +80,6 @@ export class ComfyNodeSearchBox {
     await this.filterSelectionPanel.addFilter(filterValue, filterType)
   }
 
-  get filterChips() {
-    return this.page.locator(
-      '.comfy-vue-node-search-container .p-autocomplete-chip-item'
-    )
-  }
-
   async removeFilter(index: number) {
     await this.filterChips.nth(index).locator('.p-chip-remove-icon').click()
   }

browser_tests/fixtures/components/ContextMenu.ts

@@ -2,18 +2,14 @@ import { expect } from '@playwright/test'
 import type { Locator, Page } from '@playwright/test'
 
 export class ContextMenu {
-  constructor(public readonly page: Page) {}
+  public readonly primeVueMenu: Locator
+  public readonly litegraphMenu: Locator
+  public readonly menuItems: Locator
 
-  get primeVueMenu() {
-    return this.page.locator('.p-contextmenu, .p-menu')
-  }
-
-  get litegraphMenu() {
-    return this.page.locator('.litemenu')
-  }
-
-  get menuItems() {
-    return this.page.locator('.p-menuitem, .litemenu-entry')
+  constructor(public readonly page: Page) {
+    this.primeVueMenu = page.locator('.p-contextmenu, .p-menu')
+    this.litegraphMenu = page.locator('.litemenu')
+    this.menuItems = page.locator('.p-menuitem, .litemenu-entry')
   }
 
   async clickMenuItem(name: string): Promise<void> {
@@ -65,21 +61,9 @@ 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([
-      waitIfExists(this.primeVueMenu, 'primeVueMenu'),
-      waitIfExists(this.litegraphMenu, 'litegraphMenu')
+      this.primeVueMenu.waitFor({ state: 'hidden' }),
+      this.litegraphMenu.waitFor({ state: 'hidden' })
     ])
   }
 }

browser_tests/fixtures/components/OutputHistory.ts

@@ -0,0 +1,97 @@
+import type { Locator, Page } from '@playwright/test'
+
+import { TestIds } from '../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)
+  }
+}

browser_tests/fixtures/components/SettingDialog.ts

@@ -1,15 +1,22 @@
-import type { Page } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
 
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
 import { BaseDialog } from '@e2e/fixtures/components/BaseDialog'
 
 export class SettingDialog extends BaseDialog {
+  public readonly searchBox: Locator
+  public readonly categories: Locator
+  public readonly contentArea: Locator
+
   constructor(
     page: Page,
     public readonly comfyPage: ComfyPage
   ) {
     super(page, TestIds.dialogs.settings)
+    this.searchBox = this.root.getByPlaceholder(/Search/)
+    this.categories = this.root.locator('nav').getByRole('button')
+    this.contentArea = this.root.getByRole('main')
   }
 
   async open() {
@@ -36,22 +43,10 @@ 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'

browser_tests/fixtures/components/SidebarTab.ts

@@ -5,18 +5,16 @@ import type { WorkspaceStore } from '@e2e/types/globals'
 import { TestIds } from '@e2e/fixtures/selectors'
 
 class SidebarTab {
+  public readonly tabButton: Locator
+  public readonly selectedTabButton: Locator
+
   constructor(
     public readonly page: Page,
     public readonly tabId: string
-  ) {}
-
-  get tabButton() {
-    return this.page.locator(`.${this.tabId}-tab-button`)
-  }
-
-  get selectedTabButton() {
-    return this.page.locator(
-      `.${this.tabId}-tab-button.side-bar-button-selected`
+  ) {
+    this.tabButton = page.locator(`.${tabId}-tab-button`)
+    this.selectedTabButton = page.locator(
+      `.${tabId}-tab-button.side-bar-button-selected`
     )
   }
 
@@ -35,28 +33,19 @@ class SidebarTab {
 }
 
 export class NodeLibrarySidebarTab extends SidebarTab {
+  public readonly nodeLibrarySearchBoxInput: Locator
+  public readonly nodeLibraryTree: Locator
+  public readonly nodePreview: Locator
+  public readonly tabContainer: Locator
+  public readonly newFolderButton: Locator
+
   constructor(public override readonly page: Page) {
     super(page, 'node-library')
-  }
-
-  get nodeLibrarySearchBoxInput() {
-    return this.page.getByPlaceholder('Search Nodes...')
-  }
-
-  get nodeLibraryTree() {
-    return this.page.getByTestId(TestIds.sidebar.nodeLibrary)
-  }
-
-  get nodePreview() {
-    return this.page.locator('.node-lib-node-preview')
-  }
-
-  get tabContainer() {
-    return this.page.locator('.sidebar-content-container')
-  }
-
-  get newFolderButton() {
-    return this.tabContainer.locator('.new-folder-button')
+    this.nodeLibrarySearchBoxInput = page.getByPlaceholder('Search Nodes...')
+    this.nodeLibraryTree = page.getByTestId(TestIds.sidebar.nodeLibrary)
+    this.nodePreview = page.locator('.node-lib-node-preview')
+    this.tabContainer = page.locator('.sidebar-content-container')
+    this.newFolderButton = this.tabContainer.locator('.new-folder-button')
   }
 
   override async open() {
@@ -101,34 +90,25 @@ 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')
-  }
-
-  get searchInput() {
-    return this.page.getByPlaceholder('Search...')
-  }
-
-  get sidebarContent() {
-    return this.page.locator('.sidebar-content-container')
+    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' })
   }
 
   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 })
@@ -154,12 +134,15 @@ 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')
-  }
-
-  get root() {
-    return this.page.getByTestId(TestIds.sidebar.workflows)
+    this.root = page.getByTestId(TestIds.sidebar.workflows)
+    this.activeWorkflowLabel = this.root.locator(
+      '.comfyui-workflows-open .p-tree-node-selected .node-label'
+    )
   }
 
   async getOpenedWorkflowNames() {
@@ -169,9 +152,7 @@ export class WorkflowsSidebarTab extends SidebarTab {
   }
 
   async getActiveWorkflowName() {
-    return await this.root
-      .locator('.comfyui-workflows-open .p-tree-node-selected .node-label')
-      .innerText()
+    return await this.activeWorkflowLabel.innerText()
   }
 
   async getTopLevelSavedWorkflowNames() {
@@ -224,36 +205,27 @@ 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')
-  }
-
-  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')
+    this.searchInput = page.getByPlaceholder('Search Models...')
+    this.modelTree = page.locator('.model-lib-tree-explorer')
+    this.refreshButton = page.getByRole('button', { name: 'Refresh' })
+    this.loadAllFoldersButton = page.getByRole('button', {
+      name: 'Load All Folders'
+    })
+    this.folderNodes = this.modelTree.locator(
+      '.p-tree-node:not(.p-tree-node-leaf)'
+    )
+    this.leafNodes = this.modelTree.locator('.p-tree-node-leaf')
+    this.modelPreview = page.locator('.model-lib-model-preview')
   }
 
   override async open() {
@@ -277,137 +249,95 @@ export class ModelLibrarySidebarTab extends SidebarTab {
 }
 
 export class AssetsSidebarTab extends SidebarTab {
-  constructor(public override readonly page: Page) {
-    super(page, 'assets')
-  }
-
   // --- Tab navigation ---
-
-  get generatedTab() {
-    return this.page.getByRole('tab', { name: 'Generated' })
-  }
-
-  get importedTab() {
-    return this.page.getByRole('tab', { name: 'Imported' })
-  }
+  public readonly generatedTab: Locator
+  public readonly importedTab: Locator
 
   // --- Empty state ---
+  public readonly emptyStateMessage: Locator
 
-  get emptyStateMessage() {
-    return this.page.getByText(
+  // --- 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(
       '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.locator('[role="button"][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)
   }
 
-  // --- 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
-    })
+    return this.assetCards.filter({ 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()
@@ -423,24 +353,20 @@ export class AssetsSidebarTab extends SidebarTab {
     }
     // Wait for all toast elements to fully animate out and detach from DOM
     await expect(this.page.locator('.p-toast-message'))
-      .toHaveCount(0, { timeout: 5000 })
+      .toHaveCount(0)
       .catch(() => {})
   }
 
   async switchToImported() {
     await this.dismissToasts()
     await this.importedTab.click()
-    await expect(this.importedTab).toHaveAttribute('aria-selected', 'true', {
-      timeout: 3000
-    })
+    await expect(this.importedTab).toHaveAttribute('aria-selected', 'true')
   }
 
   async switchToGenerated() {
     await this.dismissToasts()
     await this.generatedTab.click()
-    await expect(this.generatedTab).toHaveAttribute('aria-selected', 'true', {
-      timeout: 3000
-    })
+    await expect(this.generatedTab).toHaveAttribute('aria-selected', 'true')
   }
 
   async openSettingsMenu() {
@@ -463,7 +389,7 @@ export class AssetsSidebarTab extends SidebarTab {
 
   async waitForAssets(count?: number) {
     if (count !== undefined) {
-      await expect(this.assetCards).toHaveCount(count, { timeout: 5000 })
+      await expect(this.assetCards).toHaveCount(count)
     } else {
       await this.assetCards.first().waitFor({ state: 'visible', timeout: 5000 })
     }

browser_tests/fixtures/components/SignInDialog.ts

@@ -10,6 +10,17 @@ 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)
@@ -22,6 +33,22 @@ 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() {
@@ -30,48 +57,4 @@ 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')
-  }
 }

browser_tests/fixtures/components/Topbar.ts

@@ -5,10 +5,12 @@ 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[]> {
@@ -50,10 +52,6 @@ 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}")`)
@@ -107,7 +105,7 @@ export class Topbar {
       { timeout: 3000 }
     )
     // Wait for the dialog to close.
-    await this.getSaveDialog().waitFor({ state: 'hidden', timeout: 500 })
+    await this.getSaveDialog().waitFor({ state: 'hidden' })
 
     // Check if a confirmation dialog appeared (e.g., "Overwrite existing file?")
     // If so, return early to let the test handle the confirmation

browser_tests/fixtures/helpers/AppModeHelper.ts

@@ -3,6 +3,7 @@ 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'
@@ -14,14 +15,66 @@ 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.locator('[data-testid="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 {
@@ -93,61 +146,6 @@ 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 })
-  }
-
-  /** The welcome screen shown when app mode has no outputs or no nodes. */
-  get welcome(): Locator {
-    return this.page.getByTestId(TestIds.appMode.welcome)
-  }
-
-  /** The empty workflow message shown when no nodes exist. */
-  get emptyWorkflowText(): Locator {
-    return this.page.getByTestId(TestIds.appMode.emptyWorkflow)
-  }
-
-  /** The "Build app" button shown when nodes exist but no outputs. */
-  get buildAppButton(): Locator {
-    return this.page.getByTestId(TestIds.appMode.buildApp)
-  }
-
-  /** The "Back to workflow" button on the welcome screen. */
-  get backToWorkflowButton(): Locator {
-    return this.page.getByTestId(TestIds.appMode.backToWorkflow)
-  }
-
-  /** The "Load template" button shown when no nodes exist. */
-  get loadTemplateButton(): Locator {
-    return this.page.getByTestId(TestIds.appMode.loadTemplate)
-  }
-
   /**
    * 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").

browser_tests/fixtures/helpers/BuilderFooterHelper.ts

@@ -4,48 +4,32 @@ import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
 
 export class BuilderFooterHelper {
-  constructor(private readonly comfyPage: ComfyPage) {}
+  public readonly nav: Locator
+  public readonly exitButton: Locator
+  public readonly nextButton: Locator
+  public readonly backButton: Locator
+  public readonly saveButton: Locator
+  public readonly saveGroup: Locator
+  public readonly saveAsButton: Locator
+  public readonly saveAsChevron: Locator
+  public readonly opensAsPopover: Locator
+
+  constructor(private readonly comfyPage: ComfyPage) {
+    this.nav = this.page.getByTestId(TestIds.builder.footerNav)
+    this.exitButton = this.buttonByName('Exit app builder')
+    this.nextButton = this.buttonByName('Next')
+    this.backButton = this.buttonByName('Back')
+    this.saveButton = this.page.getByTestId(TestIds.builder.saveButton)
+    this.saveGroup = this.page.getByTestId(TestIds.builder.saveGroup)
+    this.saveAsButton = this.page.getByTestId(TestIds.builder.saveAsButton)
+    this.saveAsChevron = this.page.getByTestId(TestIds.builder.saveAsChevron)
+    this.opensAsPopover = this.page.getByTestId(TestIds.builder.opensAs)
+  }
 
   private get page(): Page {
     return this.comfyPage.page
   }
 
-  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 })
   }

browser_tests/fixtures/helpers/BuilderSaveAsHelper.ts

@@ -3,73 +3,61 @@ import type { Locator, Page } from '@playwright/test'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 
 export class BuilderSaveAsHelper {
-  constructor(private readonly comfyPage: ComfyPage) {}
+  /** The save-as dialog (scoped by aria-labelledby). */
+  public readonly dialog: Locator
+  /** The post-save success dialog (scoped by aria-labelledby). */
+  public readonly successDialog: Locator
+  public readonly title: Locator
+  public readonly radioGroup: Locator
+  public readonly nameInput: Locator
+  public readonly saveButton: Locator
+  public readonly successMessage: Locator
+  public readonly viewAppButton: Locator
+  public readonly closeButton: Locator
+  /** The X button to dismiss the success dialog without any action. */
+  public readonly dismissButton: Locator
+  public readonly exitBuilderButton: Locator
+  public readonly overwriteDialog: Locator
+  public readonly overwriteButton: Locator
+
+  constructor(private readonly comfyPage: ComfyPage) {
+    this.dialog = this.page.locator('[aria-labelledby="builder-save"]')
+    this.successDialog = this.page.locator(
+      '[aria-labelledby="builder-save-success"]'
+    )
+    this.title = this.dialog.getByText('Save as')
+    this.radioGroup = this.dialog.getByRole('radiogroup')
+    this.nameInput = this.dialog.getByRole('textbox')
+    this.saveButton = this.dialog.getByRole('button', { name: 'Save' })
+    this.successMessage = this.successDialog.getByText('Successfully saved')
+    this.viewAppButton = this.successDialog.getByRole('button', {
+      name: 'View app'
+    })
+    this.closeButton = this.successDialog
+      .getByRole('button', { name: 'Close', exact: true })
+      .filter({ hasText: 'Close' })
+    this.dismissButton = this.successDialog.locator(
+      'button.p-dialog-close-button'
+    )
+    this.exitBuilderButton = this.successDialog.getByRole('button', {
+      name: 'Exit builder'
+    })
+    this.overwriteDialog = this.page.getByRole('dialog', {
+      name: 'Overwrite existing file?'
+    })
+    this.overwriteButton = this.overwriteDialog.getByRole('button', {
+      name: 'Overwrite'
+    })
+  }
 
   private get page(): Page {
     return this.comfyPage.page
   }
 
-  /** 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()

browser_tests/fixtures/helpers/BuilderSelectHelper.ts

@@ -32,7 +32,20 @@ async function dragByIndex(items: Locator, fromIndex: number, toIndex: number) {
 }
 
 export class BuilderSelectHelper {
-  constructor(private readonly comfyPage: ComfyPage) {}
+  /** All IoItem locators in the current step sidebar. */
+  public readonly inputItems: Locator
+  /** All IoItem title locators in the inputs step sidebar. */
+  public readonly inputItemTitles: Locator
+  /** All widget label locators in the preview/arrange sidebar. */
+  public readonly previewWidgetLabels: Locator
+
+  constructor(private readonly comfyPage: ComfyPage) {
+    this.inputItems = this.page.getByTestId(TestIds.builder.ioItem)
+    this.inputItemTitles = this.page.getByTestId(TestIds.builder.ioItemTitle)
+    this.previewWidgetLabels = this.page.getByTestId(
+      TestIds.builder.widgetLabel
+    )
+  }
 
   private get page(): Page {
     return this.comfyPage.page
@@ -43,12 +56,9 @@ export class BuilderSelectHelper {
    * @param title The widget title shown in the IoItem.
    */
   getInputItemMenu(title: string): Locator {
-    return this.page
-      .getByTestId(TestIds.builder.ioItem)
+    return this.inputItems
       .filter({
-        has: this.page
-          .getByTestId(TestIds.builder.ioItemTitle)
-          .getByText(title, { exact: true })
+        has: this.inputItemTitles.getByText(title, { exact: true })
       })
       .getByTestId(TestIds.builder.widgetActionsMenu)
   }
@@ -150,38 +160,19 @@ export class BuilderSelectHelper {
    * Useful for asserting "Widget not visible" on disconnected inputs.
    */
   getInputItemSubtitle(title: string): Locator {
-    return this.page
-      .getByTestId(TestIds.builder.ioItem)
+    return this.inputItems
       .filter({
-        has: this.page
-          .getByTestId(TestIds.builder.ioItemTitle)
-          .getByText(title, { exact: true })
+        has: this.inputItemTitles.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) {
-    const items = this.page.getByTestId(TestIds.builder.ioItem)
-    await dragByIndex(items, fromIndex, toIndex)
+    await dragByIndex(this.inputItems, fromIndex, toIndex)
     await this.comfyPage.nextFrame()
   }
 

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 {
-  constructor(private readonly comfyPage: ComfyPage) {}
+  public readonly toolbar: Locator
+
+  constructor(private readonly comfyPage: ComfyPage) {
+    this.toolbar = this.page.getByRole('navigation', { name: 'App Builder' })
+  }
 
   private get page(): Page {
     return this.comfyPage.page
   }
 
-  get toolbar(): Locator {
-    return this.page.getByRole('navigation', { name: 'App Builder' })
-  }
-
   async goToInputs() {
     await this.toolbar.getByRole('button', { name: 'Inputs' }).click()
     await this.comfyPage.nextFrame()

browser_tests/fixtures/helpers/CloudAuthHelper.ts

@@ -0,0 +1,171 @@
+import type { Page } from '@playwright/test'
+
+/**
+ * Mocks Firebase authentication for cloud E2E tests.
+ *
+ * The cloud build's router guard waits for Firebase `onAuthStateChanged`
+ * to fire, then checks `getAuthHeader()`. In CI no Firebase project is
+ * configured, so the user is never authenticated and the app redirects
+ * to `/cloud/login`.
+ *
+ * This helper seeds Firebase's IndexedDB persistence layer with a mock
+ * user and intercepts the Firebase REST APIs (securetoken, identitytoolkit)
+ * so the SDK believes a user is signed in. Must be called before navigation.
+ */
+export class CloudAuthHelper {
+  constructor(private readonly page: Page) {}
+
+  /**
+   * Set up all auth mocks. Must be called before `comfyPage.setup()`.
+   */
+  async mockAuth(): Promise<void> {
+    await this.seedFirebaseIndexedDB()
+    await this.mockFirebaseEndpoints()
+  }
+
+  /**
+   * Navigate to a lightweight same-origin page to seed Firebase's
+   * IndexedDB persistence with a mock user. This ensures the data
+   * is written before the app loads and Firebase reads it.
+   *
+   * Firebase auth uses `browserLocalPersistence` which stores data in
+   * IndexedDB database `firebaseLocalStorageDb`, object store
+   * `firebaseLocalStorage`, keyed by `firebase:authUser:<apiKey>:<appName>`.
+   */
+  private async seedFirebaseIndexedDB(): Promise<void> {
+    // Navigate to a lightweight endpoint to get a same-origin context
+    await this.page.goto('http://localhost:8188/api/users')
+
+    await this.page.evaluate(() => {
+      const MOCK_USER_DATA = {
+        uid: 'test-user-e2e',
+        email: 'e2e@test.comfy.org',
+        displayName: 'E2E Test User',
+        emailVerified: true,
+        isAnonymous: false,
+        providerData: [
+          {
+            providerId: 'google.com',
+            uid: 'test-user-e2e',
+            displayName: 'E2E Test User',
+            email: 'e2e@test.comfy.org',
+            phoneNumber: null,
+            photoURL: null
+          }
+        ],
+        stsTokenManager: {
+          refreshToken: 'mock-refresh-token',
+          accessToken: 'mock-firebase-id-token',
+          expirationTime: Date.now() + 60 * 60 * 1000
+        },
+        apiKey: 'AIzaSyDa_YMeyzV0SkVe92vBZ1tVikWBmOU5KVE',
+        appName: '[DEFAULT]'
+      }
+
+      const DB_NAME = 'firebaseLocalStorageDb'
+      const STORE_NAME = 'firebaseLocalStorage'
+      const KEY = `firebase:authUser:${MOCK_USER_DATA.apiKey}:${MOCK_USER_DATA.appName}`
+
+      return new Promise<void>((resolve, reject) => {
+        const request = indexedDB.open(DB_NAME)
+        request.onerror = () => reject(request.error)
+        request.onupgradeneeded = () => {
+          const db = request.result
+          if (!db.objectStoreNames.contains(STORE_NAME)) {
+            db.createObjectStore(STORE_NAME)
+          }
+        }
+        request.onsuccess = () => {
+          const db = request.result
+          if (!db.objectStoreNames.contains(STORE_NAME)) {
+            db.close()
+            const upgradeReq = indexedDB.open(DB_NAME, db.version + 1)
+            upgradeReq.onerror = () => reject(upgradeReq.error)
+            upgradeReq.onupgradeneeded = () => {
+              const upgradedDb = upgradeReq.result
+              if (!upgradedDb.objectStoreNames.contains(STORE_NAME)) {
+                upgradedDb.createObjectStore(STORE_NAME)
+              }
+            }
+            upgradeReq.onsuccess = () => {
+              const upgradedDb = upgradeReq.result
+              const tx = upgradedDb.transaction(STORE_NAME, 'readwrite')
+              tx.objectStore(STORE_NAME).put(
+                { fpiVersion: '1', value: MOCK_USER_DATA },
+                KEY
+              )
+              tx.oncomplete = () => {
+                upgradedDb.close()
+                resolve()
+              }
+              tx.onerror = () => reject(tx.error)
+            }
+            return
+          }
+          const tx = db.transaction(STORE_NAME, 'readwrite')
+          tx.objectStore(STORE_NAME).put(
+            { fpiVersion: '1', value: MOCK_USER_DATA },
+            KEY
+          )
+          tx.oncomplete = () => {
+            db.close()
+            resolve()
+          }
+          tx.onerror = () => reject(tx.error)
+        }
+      })
+    })
+  }
+
+  /**
+   * Intercept Firebase Auth REST API endpoints so the SDK can
+   * "refresh" the mock user's token without real credentials.
+   */
+  private async mockFirebaseEndpoints(): Promise<void> {
+    await this.page.route('**/securetoken.googleapis.com/**', (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          access_token: 'mock-access-token',
+          expires_in: '3600',
+          token_type: 'Bearer',
+          refresh_token: 'mock-refresh-token',
+          id_token: 'mock-firebase-id-token',
+          user_id: 'test-user-e2e',
+          project_id: 'dreamboothy-dev'
+        })
+      })
+    )
+
+    await this.page.route('**/identitytoolkit.googleapis.com/**', (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          kind: 'identitytoolkit#GetAccountInfoResponse',
+          users: [
+            {
+              localId: 'test-user-e2e',
+              email: 'e2e@test.comfy.org',
+              displayName: 'E2E Test User',
+              emailVerified: true,
+              validSince: '0',
+              lastLoginAt: String(Date.now()),
+              createdAt: String(Date.now()),
+              lastRefreshAt: new Date().toISOString()
+            }
+          ]
+        })
+      })
+    )
+
+    await this.page.route('**/__/auth/**', (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'text/html',
+        body: '<html><body></body></html>'
+      })
+    )
+  }
+}

browser_tests/fixtures/helpers/ExecutionHelper.ts

@@ -0,0 +1,211 @@
+import type { WebSocketRoute } from '@playwright/test'
+
+import type { RawJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
+import type { ComfyPage } from '../ComfyPage'
+import { createMockJob } from './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 } } }
+      })
+    )
+  }
+}

browser_tests/fixtures/helpers/Load3DFixtures.ts

@@ -0,0 +1,25 @@
+import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import { Load3DHelper } from '@e2e/tests/load3d/Load3DHelper'
+import { Load3DViewerHelper } from '@e2e/tests/load3d/Load3DViewerHelper'
+
+export const load3dTest = comfyPageFixture.extend<{
+  load3d: Load3DHelper
+}>({
+  load3d: async ({ comfyPage }, use) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.workflow.loadWorkflow('3d/load3d_node')
+    await comfyPage.vueNodes.waitForNodes()
+
+    const node = comfyPage.vueNodes.getNodeLocator('1')
+    await use(new Load3DHelper(node))
+  }
+})
+
+export const load3dViewerTest = load3dTest.extend<{
+  viewer: Load3DViewerHelper
+}>({
+  viewer: async ({ comfyPage }, use) => {
+    await comfyPage.settings.setSetting('Comfy.Load3D.3DViewerEnable', true)
+    await use(new Load3DViewerHelper(comfyPage.page))
+  }
+})

browser_tests/fixtures/helpers/NodeOperationsHelper.ts

@@ -8,7 +8,13 @@ import type { Position, Size } from '@e2e/fixtures/types'
 import { NodeReference } from '@e2e/fixtures/utils/litegraphUtils'
 
 export class NodeOperationsHelper {
-  constructor(private comfyPage: ComfyPage) {}
+  public readonly promptDialogInput: Locator
+
+  constructor(private comfyPage: ComfyPage) {
+    this.promptDialogInput = this.page.locator(
+      '.p-dialog-content input[type="text"]'
+    )
+  }
 
   private get page() {
     return this.comfyPage.page
@@ -155,10 +161,6 @@ 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')

browser_tests/fixtures/helpers/SubgraphHelper.ts

@@ -445,7 +445,7 @@ export class SubgraphHelper {
       await this.rightClickOutputSlot(slotName)
     }
     await this.comfyPage.contextMenu.clickLitegraphMenuItem('Remove Slot')
-    await this.comfyPage.nextFrame()
+    await this.comfyPage.contextMenu.waitForHidden()
   }
 
   async findSubgraphNodeId(): Promise<string> {

browser_tests/fixtures/helpers/ToastHelper.ts

@@ -2,20 +2,12 @@ import { expect } from '@playwright/test'
 import type { Locator, Page } from '@playwright/test'
 
 export class ToastHelper {
-  constructor(private readonly page: Page) {}
+  public readonly visibleToasts: Locator
+  public readonly toastErrors: Locator
 
-  get visibleToasts(): Locator {
-    return this.page.locator('.p-toast-message:visible')
-  }
-
-  async getToastErrorCount(): Promise<number> {
-    return await this.page
-      .locator('.p-toast-message.p-toast-message-error')
-      .count()
-  }
-
-  async getVisibleToastCount(): Promise<number> {
-    return await this.visibleToasts.count()
+  constructor(private readonly page: Page) {
+    this.visibleToasts = page.locator('.p-toast-message:visible')
+    this.toastErrors = page.locator('.p-toast-message.p-toast-message-error')
   }
 
   async closeToasts(requireCount = 0): Promise<void> {
@@ -34,6 +26,6 @@ export class ToastHelper {
     }
 
     // Assert all toasts are closed
-    await expect(this.visibleToasts).toHaveCount(0, { timeout: 1000 })
+    await expect(this.visibleToasts).toHaveCount(0)
   }
 }

browser_tests/fixtures/selectors.ts

@@ -63,7 +63,8 @@ export const TestIds = {
     missingMediaStatusCard: 'missing-media-status-card',
     missingMediaConfirmButton: 'missing-media-confirm-button',
     missingMediaCancelButton: 'missing-media-cancel-button',
-    missingMediaLocateButton: 'missing-media-locate-button'
+    missingMediaLocateButton: 'missing-media-locate-button',
+    publishTabPanel: 'publish-tab-panel'
   },
   keybindings: {
     presetMenu: 'keybinding-preset-menu'
@@ -129,6 +130,24 @@ 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',
@@ -154,6 +173,12 @@ export const TestIds = {
   errors: {
     imageLoadError: 'error-loading-image',
     videoLoadError: 'error-loading-video'
+  },
+  loading: {
+    overlay: 'loading-overlay'
+  },
+  load3dViewer: {
+    sidebar: 'load3d-viewer-sidebar'
   }
 } as const
 
@@ -173,6 +198,7 @@ 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<
@@ -184,3 +210,5 @@ 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]

browser_tests/fixtures/utils/customMatchers.ts

@@ -18,7 +18,7 @@ function makeMatcher<T>(
         ? expect(value, 'Node is ' + type).not
         : expect(value, 'Node is not ' + type)
       assertion.toBeTruthy()
-    }).toPass({ timeout: 250, ...options })
+    }).toPass({ timeout: 5000, ...options })
     return {
       pass: !this.isNot,
       message: () => 'Node is ' + (this.isNot ? 'not ' : '') + type
@@ -30,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 = { timeout: 256 }) {
+  async toHaveFocus(locator: Locator, options = {}) {
     await expect
       .poll(
         () => locator.evaluate((el) => el === document.activeElement),

browser_tests/fixtures/utils/vueNodeFixtures.ts

@@ -4,38 +4,26 @@ import { TestIds } from '@e2e/fixtures/selectors'
 
 /** DOM-centric helper for a single Vue-rendered node on the canvas. */
 export class VueNodeFixture {
-  constructor(private readonly locator: Locator) {}
+  public readonly header: Locator
+  public readonly title: Locator
+  public readonly titleInput: Locator
+  public readonly body: Locator
+  public readonly pinIndicator: Locator
+  public readonly collapseButton: Locator
+  public readonly collapseIcon: Locator
+  public readonly root: Locator
 
-  get header(): Locator {
-    return this.locator.locator('[data-testid^="node-header-"]')
-  }
-
-  get title(): Locator {
-    return this.locator.locator('[data-testid="node-title"]')
-  }
-
-  get titleInput(): Locator {
-    return this.locator.locator('[data-testid="node-title-input"]')
-  }
-
-  get body(): Locator {
-    return this.locator.locator('[data-testid^="node-body-"]')
-  }
-
-  get 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
+  constructor(private readonly locator: Locator) {
+    this.header = locator.locator('[data-testid^="node-header-"]')
+    this.title = locator.locator('[data-testid="node-title"]')
+    this.titleInput = locator.locator('[data-testid="node-title-input"]')
+    this.body = locator.locator('[data-testid^="node-body-"]')
+    this.pinIndicator = locator.getByTestId(TestIds.node.pinIndicator)
+    this.collapseButton = locator.locator(
+      '[data-testid="node-collapse-button"]'
+    )
+    this.collapseIcon = this.collapseButton.locator('i')
+    this.root = locator
   }
 
   async getTitle(): Promise<string> {

browser_tests/fixtures/ws.ts

@@ -1,53 +1,31 @@
 import { test as base } from '@playwright/test'
+import type { WebSocketRoute } from '@playwright/test'
 
 export const webSocketFixture = base.extend<{
-  ws: { trigger(data: unknown, url?: string): Promise<void> }
+  getWebSocket: () => Promise<WebSocketRoute>
 }>({
-  ws: [
-    async ({ page }, use) => {
-      // Each time a page loads, to catch navigations
-      page.on('load', async () => {
-        await page.evaluate(function () {
-          // Create a wrapper for WebSocket that stores them globally
-          // so we can look it up to trigger messages
-          const store: Record<string, WebSocket> = (window.__ws__ = {})
-          window.WebSocket = class extends window.WebSocket {
-            constructor(
-              ...rest: ConstructorParameters<typeof window.WebSocket>
-            ) {
-              super(...rest)
-              store[this.url] = this
-            }
-          }
+  getWebSocket: [
+    async ({ context }, use) => {
+      let latest: WebSocketRoute | undefined
+      let resolve: ((ws: WebSocketRoute) => void) | undefined
+
+      await context.routeWebSocket(/\/ws/, (ws) => {
+        const server = ws.connectToServer()
+        server.onMessage((message) => {
+          ws.send(message)
         })
+
+        latest = ws
+        resolve?.(ws)
       })
 
-      await use({
-        async trigger(data, url) {
-          // Trigger a websocket event on the page
-          await page.evaluate(
-            function ([data, url]) {
-              if (!url) {
-                // If no URL specified, use page URL
-                const u = new URL(window.location.href)
-                u.hash = ''
-                u.protocol = 'ws:'
-                u.pathname = '/'
-                url = u.toString() + 'ws'
-              }
-              const ws: WebSocket = window.__ws__![url]
-              ws.dispatchEvent(
-                new MessageEvent('message', {
-                  data
-                })
-              )
-            },
-            [JSON.stringify(data), url]
-          )
-        }
+      await use(() => {
+        if (latest) return Promise.resolve(latest)
+        return new Promise<WebSocketRoute>((r) => {
+          resolve = r
+        })
       })
     },
-    // We need this to run automatically as the first thing so it adds handlers as soon as the page loads
     { auto: true }
   ]
 })

browser_tests/helpers/builderTestUtils.ts

@@ -82,11 +82,9 @@ export async function builderSaveAs(
   viewType: 'App' | 'Node graph' = 'App'
 ) {
   await appMode.footer.saveAsButton.click()
-  await comfyExpect(appMode.saveAs.nameInput).toBeVisible({ timeout: 5000 })
+  await comfyExpect(appMode.saveAs.nameInput).toBeVisible()
   await appMode.saveAs.fillAndSave(workflowName, viewType)
-  await comfyExpect(appMode.saveAs.successMessage).toBeVisible({
-    timeout: 5000
-  })
+  await comfyExpect(appMode.saveAs.successMessage).toBeVisible()
 }
 
 /**
@@ -124,3 +122,21 @@ 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()
+}

browser_tests/helpers/manageGroupNode.ts

@@ -26,9 +26,12 @@ export class ManageGroupNode {
     await this.footer.getByText('Close').click()
   }
 
+  get selectedNodeTypeSelect(): Locator {
+    return this.header.locator('select').first()
+  }
+
   async getSelectedNodeType() {
-    const select = this.header.locator('select').first()
-    return await select.inputValue()
+    return await this.selectedNodeTypeSelect.inputValue()
   }
 
   async selectNode(name: string) {

browser_tests/helpers/promotedWidgets.ts

@@ -1,15 +1,8 @@
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 
-export type PromotedWidgetEntry = [string, string]
+type PromotedWidgetEntry = [string, string]
 
-export interface PromotedWidgetSnapshot {
-  proxyWidgets: PromotedWidgetEntry[]
-  widgetNames: string[]
-}
-
-export function isPromotedWidgetEntry(
-  entry: unknown
-): entry is PromotedWidgetEntry {
+function isPromotedWidgetEntry(entry: unknown): entry is PromotedWidgetEntry {
   return (
     Array.isArray(entry) &&
     entry.length === 2 &&
@@ -18,9 +11,7 @@ export function isPromotedWidgetEntry(
   )
 }
 
-export function normalizePromotedWidgets(
-  value: unknown
-): PromotedWidgetEntry[] {
+function normalizePromotedWidgets(value: unknown): PromotedWidgetEntry[] {
   if (!Array.isArray(value)) return []
   return value.filter(isPromotedWidgetEntry)
 }
@@ -31,34 +22,29 @@ export async function getPromotedWidgets(
 ): Promise<PromotedWidgetEntry[]> {
   const raw = await comfyPage.page.evaluate((id) => {
     const node = window.app!.canvas.graph!.getNodeById(id)
-    return node?.properties?.proxyWidgets ?? []
+    const widgets = node?.widgets ?? []
+
+    // Read the live promoted widget views from the host node instead of the
+    // serialized proxyWidgets snapshot, which can lag behind the current graph
+    // state during promotion and cleanup flows.
+    return widgets.flatMap((widget) => {
+      if (
+        widget &&
+        typeof widget === 'object' &&
+        'sourceNodeId' in widget &&
+        typeof widget.sourceNodeId === 'string' &&
+        'sourceWidgetName' in widget &&
+        typeof widget.sourceWidgetName === 'string'
+      ) {
+        return [[widget.sourceNodeId, widget.sourceWidgetName]]
+      }
+      return []
+    })
   }, nodeId)
 
   return normalizePromotedWidgets(raw)
 }
 
-export async function getPromotedWidgetSnapshot(
-  comfyPage: ComfyPage,
-  nodeId: string
-): Promise<PromotedWidgetSnapshot> {
-  const raw = await comfyPage.page.evaluate((id) => {
-    const node = window.app!.canvas.graph!.getNodeById(id)
-    return {
-      proxyWidgets: node?.properties?.proxyWidgets ?? [],
-      widgetNames: (node?.widgets ?? []).map((widget) => widget.name)
-    }
-  }, nodeId)
-
-  return {
-    proxyWidgets: normalizePromotedWidgets(raw.proxyWidgets),
-    widgetNames: Array.isArray(raw.widgetNames)
-      ? raw.widgetNames.filter(
-          (name): name is string => typeof name === 'string'
-        )
-      : []
-  }
-}
-
 export async function getPromotedWidgetNames(
   comfyPage: ComfyPage,
   nodeId: string
@@ -75,7 +61,7 @@ export async function getPromotedWidgetCount(
   return promotedWidgets.length
 }
 
-export function isPseudoPreviewEntry(entry: PromotedWidgetEntry): boolean {
+function isPseudoPreviewEntry(entry: PromotedWidgetEntry): boolean {
   return entry[1].startsWith('$$')
 }
 
@@ -87,14 +73,6 @@ export async function getPseudoPreviewWidgets(
   return widgets.filter(isPseudoPreviewEntry)
 }
 
-export async function getNonPreviewPromotedWidgets(
-  comfyPage: ComfyPage,
-  nodeId: string
-): Promise<PromotedWidgetEntry[]> {
-  const widgets = await getPromotedWidgets(comfyPage, nodeId)
-  return widgets.filter((entry) => !isPseudoPreviewEntry(entry))
-}
-
 export async function getPromotedWidgetCountByName(
   comfyPage: ComfyPage,
   nodeId: string,

browser_tests/tests/actionbar.spec.ts

@@ -1,7 +1,6 @@
 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'
@@ -18,14 +17,16 @@ test.describe('Actionbar', { tag: '@ui' }, () => {
    */
   test('Does not auto-queue multiple changes at a time', async ({
     comfyPage,
-    ws
+    getWebSocket
   }) => {
+    const ws = await getWebSocket()
+
     // Enable change auto-queue mode
     const queueOpts = await comfyPage.actionbar.queueButton.toggleOptions()
-    expect(await queueOpts.getMode()).toBe('disabled')
+    await expect.poll(() => queueOpts.getMode()).toBe('disabled')
     await queueOpts.setMode('change')
     await comfyPage.nextFrame()
-    expect(await queueOpts.getMode()).toBe('change')
+    await expect.poll(() => queueOpts.getMode()).toBe('change')
     await comfyPage.actionbar.queueButton.toggleOptions()
 
     // Intercept the prompt queue endpoint
@@ -62,17 +63,19 @@ test.describe('Actionbar', { tag: '@ui' }, () => {
     }
 
     // Trigger a status websocket message
-    const triggerStatus = async (queueSize: number) => {
-      await ws.trigger({
-        type: 'status',
-        data: {
-          status: {
-            exec_info: {
-              queue_remaining: queueSize
+    const triggerStatus = (queueSize: number) => {
+      ws.send(
+        JSON.stringify({
+          type: 'status',
+          data: {
+            status: {
+              exec_info: {
+                queue_remaining: queueSize
+              }
             }
           }
-        }
-      } as StatusWsMessage)
+        })
+      )
     }
 
     // Extract the width from the queue response
@@ -104,8 +107,8 @@ test.describe('Actionbar', { tag: '@ui' }, () => {
     ).toBe(1)
 
     // Trigger a status update so auto-queue re-runs
-    await triggerStatus(1)
-    await triggerStatus(0)
+    triggerStatus(1)
+    triggerStatus(0)
 
     // Ensure the queued width is the last queued value
     expect(
@@ -124,6 +127,8 @@ test.describe('Actionbar', { tag: '@ui' }, () => {
         force: true
       }
     )
-    expect(await comfyPage.actionbar.isDocked()).toBe(true)
+    await expect(comfyPage.actionbar.root.locator('.actionbar')).toHaveClass(
+      /static/
+    )
   })
 })

browser_tests/tests/appModeDropdownClipping.spec.ts

@@ -75,9 +75,7 @@ test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
     ]
     await comfyPage.appMode.enterAppModeWithInputs(inputs)
 
-    await expect(comfyPage.appMode.linearWidgets).toBeVisible({
-      timeout: 5000
-    })
+    await expect(comfyPage.appMode.linearWidgets).toBeVisible()
 
     // Scroll to bottom so the codec widget is at the clipping edge
     const widgetList = comfyPage.appMode.linearWidgets
@@ -90,21 +88,25 @@ test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
     await codecSelect.click()
 
     const overlay = comfyPage.page.locator('.p-select-overlay').first()
-    await expect(overlay).toBeVisible({ timeout: 5000 })
+    await expect(overlay).toBeVisible()
 
-    const isInViewport = await overlay.evaluate((el) => {
-      const rect = el.getBoundingClientRect()
-      return (
-        rect.top >= 0 &&
-        rect.left >= 0 &&
-        rect.bottom <= window.innerHeight &&
-        rect.right <= window.innerWidth
+    await expect
+      .poll(() =>
+        overlay.evaluate((el) => {
+          const rect = el.getBoundingClientRect()
+          return (
+            rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <= window.innerHeight &&
+            rect.right <= window.innerWidth
+          )
+        })
       )
-    })
-    expect(isInViewport).toBe(true)
+      .toBe(true)
 
-    const isClipped = await overlay.evaluate(isClippedByAnyAncestor)
-    expect(isClipped).toBe(false)
+    await expect
+      .poll(() => overlay.evaluate(isClippedByAnyAncestor))
+      .toBe(false)
   })
 
   test('FormDropdown popup is not clipped in app mode panel', async ({
@@ -119,9 +121,7 @@ test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
     ]
     await comfyPage.appMode.enterAppModeWithInputs(inputs)
 
-    await expect(comfyPage.appMode.linearWidgets).toBeVisible({
-      timeout: 5000
-    })
+    await expect(comfyPage.appMode.linearWidgets).toBeVisible()
 
     // Scroll to bottom so the image widget is at the clipping edge
     const widgetList = comfyPage.appMode.linearWidgets
@@ -140,20 +140,24 @@ 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({ timeout: 5000 })
+    await expect(popover).toBeVisible()
 
-    const isInViewport = await popover.evaluate((el) => {
-      const rect = el.getBoundingClientRect()
-      return (
-        rect.top >= 0 &&
-        rect.left >= 0 &&
-        rect.bottom <= window.innerHeight &&
-        rect.right <= window.innerWidth
+    await expect
+      .poll(() =>
+        popover.evaluate((el) => {
+          const rect = el.getBoundingClientRect()
+          return (
+            rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <= window.innerHeight &&
+            rect.right <= window.innerWidth
+          )
+        })
       )
-    })
-    expect(isInViewport).toBe(true)
+      .toBe(true)
 
-    const isClipped = await popover.evaluate(isClippedByAnyAncestor)
-    expect(isClipped).toBe(false)
+    await expect
+      .poll(() => popover.evaluate(isClippedByAnyAncestor))
+      .toBe(false)
   })
 })

browser_tests/tests/appModeWelcome.spec.ts

@@ -1,7 +1,7 @@
 import {
   comfyPageFixture as test,
   comfyExpect as expect
-} from '../fixtures/ComfyPage'
+} from '@e2e/fixtures/ComfyPage'
 
 test.describe('App mode welcome states', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {

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({ timeout: 5000 })
+    await expect(menu).toBeVisible()
     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({ timeout: 5000 })
+    await expect(appMode.linearWidgets).toBeVisible()
     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({ timeout: 5000 })
+    await expect(appMode.linearWidgets).toBeVisible()
     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({ timeout: 5000 })
+    await expect(menu).toBeVisible()
     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({ timeout: 5000 })
+    await expect(appMode.linearWidgets).toBeVisible()
     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({ timeout: 5000 })
+    await expect(appMode.linearWidgets).toBeVisible()
 
     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({ timeout: 5000 })
+    await expect(appMode.linearWidgets).toBeVisible()
     await expect(appMode.linearWidgets.getByText('App Mode Seed')).toBeVisible()
   })
 })

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({ timeout: 5000 })
+    await expect(appMode.linearWidgets).toBeVisible()
 
     for (const { nodeId, widgetName, type, fill } of WIDGET_TEST_DATA) {
       const key = `${nodeId}:${widgetName}`

browser_tests/tests/bottomPanelShortcuts.spec.ts

@@ -103,14 +103,15 @@ test.describe('Bottom Panel Shortcuts', { tag: '@ui' }, () => {
 
     const keyBadges = bottomPanel.shortcuts.keyBadges
     await keyBadges.first().waitFor({ state: 'visible' })
-    const count = await keyBadges.count()
-    expect(count).toBeGreaterThanOrEqual(1)
+    await expect.poll(() => keyBadges.count()).toBeGreaterThanOrEqual(1)
 
-    const badgeText = await keyBadges.allTextContents()
-    const hasModifiers = badgeText.some((text) =>
-      ['Ctrl', 'Cmd', 'Shift', 'Alt'].includes(text)
-    )
-    expect(hasModifiers).toBeTruthy()
+    await expect
+      .poll(() => keyBadges.allTextContents())
+      .toEqual(
+        expect.arrayContaining([
+          expect.stringMatching(/^(Ctrl|Cmd|Shift|Alt)$/)
+        ])
+      )
   })
 
   test('should maintain panel state when switching between panels', async ({
@@ -196,8 +197,7 @@ test.describe('Bottom Panel Shortcuts', { tag: '@ui' }, () => {
     ).toBeVisible()
 
     const subcategoryTitles = bottomPanel.shortcuts.subcategoryTitles
-    const titleCount = await subcategoryTitles.count()
-    expect(titleCount).toBeGreaterThanOrEqual(2)
+    await expect.poll(() => subcategoryTitles.count()).toBeGreaterThanOrEqual(2)
   })
 
   test('should open shortcuts panel with Ctrl+Shift+K', async ({

browser_tests/tests/builderReorder.spec.ts

@@ -6,6 +6,7 @@ import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import type { AppModeHelper } from '@e2e/fixtures/helpers/AppModeHelper'
 import {
   builderSaveAs,
+  createAndSaveApp,
   openWorkflowFromSidebar,
   setupBuilder
 } from '@e2e/helpers/builderTestUtils'
@@ -21,7 +22,7 @@ async function saveCloseAndReopenAsApp(
   await appMode.steps.goToPreview()
   await builderSaveAs(appMode, workflowName)
   await appMode.saveAs.closeButton.click()
-  await comfyPage.nextFrame()
+  await expect(appMode.saveAs.successDialog).not.toBeVisible()
 
   await appMode.footer.exitBuilder()
   await openWorkflowFromSidebar(comfyPage, workflowName)
@@ -122,7 +123,7 @@ test.describe('Builder input reordering', { tag: '@ui' }, () => {
     const workflowName = `${Date.now()} reorder-preview`
     await saveCloseAndReopenAsApp(comfyPage, appMode, workflowName)
 
-    await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
+    await expect(appMode.linearWidgets).toBeVisible()
     await expect(appMode.select.previewWidgetLabels).toHaveText([
       'steps',
       'cfg',
@@ -147,11 +148,58 @@ test.describe('Builder input reordering', { tag: '@ui' }, () => {
     const workflowName = `${Date.now()} reorder-persist`
     await saveCloseAndReopenAsApp(comfyPage, appMode, workflowName)
 
-    await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
+    await expect(appMode.linearWidgets).toBeVisible()
     await expect(appMode.select.previewWidgetLabels).toHaveText([
       'steps',
       'cfg',
       'seed'
     ])
   })
+
+  test('Reordering inputs in one app does not corrupt another app', async ({
+    comfyPage
+  }) => {
+    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)
+  })
 })

browser_tests/tests/builderSaveFlow.spec.ts

@@ -3,6 +3,7 @@ import {
   comfyExpect as expect
 } from '@e2e/fixtures/ComfyPage'
 import type { AppModeHelper } from '@e2e/fixtures/helpers/AppModeHelper'
+import type { BuilderSaveAsHelper } from '@e2e/fixtures/helpers/BuilderSaveAsHelper'
 import {
   builderSaveAs,
   openWorkflowFromSidebar,
@@ -20,10 +21,19 @@ async function reSaveAs(
   viewType: 'App' | 'Node graph'
 ) {
   await appMode.footer.openSaveAsFromChevron()
-  await expect(appMode.saveAs.nameInput).toBeVisible({ timeout: 5000 })
+  await expect(appMode.saveAs.nameInput).toBeVisible()
   await appMode.saveAs.fillAndSave(workflowName, viewType)
 }
 
+async function dismissSuccessDialog(
+  saveAs: BuilderSaveAsHelper,
+  button: 'close' | 'dismiss' = 'close'
+) {
+  const btn = button === 'close' ? saveAs.closeButton : saveAs.dismissButton
+  await btn.click()
+  await expect(saveAs.successDialog).not.toBeVisible()
+}
+
 test.describe('Builder save flow', { tag: ['@ui'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.appMode.enableLinearMode()
@@ -38,7 +48,7 @@ test.describe('Builder save flow', { tag: ['@ui'] }, () => {
     await setupBuilder(comfyPage)
     await comfyPage.appMode.footer.saveAsButton.click()
 
-    await expect(saveAs.dialog).toBeVisible({ timeout: 5000 })
+    await expect(saveAs.dialog).toBeVisible()
     await expect(saveAs.nameInput).toBeVisible()
     await expect(saveAs.title).toBeVisible()
     await expect(saveAs.radioGroup).toBeVisible()
@@ -58,7 +68,7 @@ test.describe('Builder save flow', { tag: ['@ui'] }, () => {
     await setupBuilder(comfyPage)
     await comfyPage.appMode.footer.saveAsButton.click()
 
-    await expect(saveAs.dialog).toBeVisible({ timeout: 5000 })
+    await expect(saveAs.dialog).toBeVisible()
     await saveAs.nameInput.fill('')
     await expect(saveAs.saveButton).toBeDisabled()
   })
@@ -68,7 +78,7 @@ test.describe('Builder save flow', { tag: ['@ui'] }, () => {
     await setupBuilder(comfyPage)
     await comfyPage.appMode.footer.saveAsButton.click()
 
-    await expect(saveAs.dialog).toBeVisible({ timeout: 5000 })
+    await expect(saveAs.dialog).toBeVisible()
 
     const appRadio = saveAs.viewTypeRadio('App')
     await expect(appRadio).toHaveAttribute('aria-checked', 'true')
@@ -121,18 +131,17 @@ test.describe('Builder save flow', { tag: ['@ui'] }, () => {
     await setupBuilder(comfyPage)
 
     await builderSaveAs(comfyPage.appMode, `${Date.now()} direct-save`, 'App')
-    await saveAs.closeButton.click()
-    await comfyPage.nextFrame()
+    await dismissSuccessDialog(saveAs)
 
     // Modify the workflow so the save button becomes enabled
     await comfyPage.appMode.steps.goToInputs()
     await comfyPage.appMode.select.deleteInput('seed')
-    await expect(footer.saveButton).toBeEnabled({ timeout: 5000 })
+    await expect(footer.saveButton).toBeEnabled()
 
     await footer.saveButton.click()
     await comfyPage.nextFrame()
 
-    await expect(saveAs.dialog).not.toBeVisible({ timeout: 2000 })
+    await expect(saveAs.dialog).not.toBeVisible()
     await expect(footer.saveButton).toBeDisabled()
   })
 
@@ -143,12 +152,11 @@ test.describe('Builder save flow', { tag: ['@ui'] }, () => {
     await setupBuilder(comfyPage)
 
     await builderSaveAs(comfyPage.appMode, `${Date.now()} split-btn`, 'App')
-    await saveAs.closeButton.click()
-    await comfyPage.nextFrame()
+    await dismissSuccessDialog(saveAs)
 
     await footer.openSaveAsFromChevron()
 
-    await expect(saveAs.title).toBeVisible({ timeout: 5000 })
+    await expect(saveAs.title).toBeVisible()
     await expect(saveAs.nameInput).toBeVisible()
   })
 
@@ -161,8 +169,11 @@ test.describe('Builder save flow', { tag: ['@ui'] }, () => {
     await appMode.enterBuilder()
 
     // State 1: Disabled "Save as" (no outputs selected)
+    await expect(appMode.footer.saveAsButton).toBeVisible()
     const disabledBox = await appMode.footer.saveAsButton.boundingBox()
-    expect(disabledBox).toBeTruthy()
+    if (!disabledBox)
+      throw new Error('saveAsButton boundingBox returned null while visible')
+    const disabledWidth = disabledBox.width
 
     // Select I/O to enable the button
     await appMode.steps.goToInputs()
@@ -171,19 +182,20 @@ test.describe('Builder save flow', { tag: ['@ui'] }, () => {
     await appMode.select.selectOutputNode('Save Image')
 
     // State 2: Enabled "Save as" (unsaved, has outputs)
-    const enabledBox = await appMode.footer.saveAsButton.boundingBox()
-    expect(enabledBox).toBeTruthy()
-    expect(enabledBox!.width).toBe(disabledBox!.width)
+    await expect
+      .poll(
+        async () => (await appMode.footer.saveAsButton.boundingBox())?.width
+      )
+      .toBe(disabledWidth)
 
     // Save the workflow to transition to the Save + chevron state
     await builderSaveAs(appMode, `${Date.now()} width-test`, 'App')
-    await appMode.saveAs.closeButton.click()
-    await comfyPage.nextFrame()
+    await dismissSuccessDialog(appMode.saveAs)
 
     // State 3: Save + chevron button group (saved workflow)
-    const saveButtonGroupBox = await appMode.footer.saveGroup.boundingBox()
-    expect(saveButtonGroupBox).toBeTruthy()
-    expect(saveButtonGroupBox!.width).toBe(disabledBox!.width)
+    await expect
+      .poll(async () => (await appMode.footer.saveGroup.boundingBox())?.width)
+      .toBe(disabledWidth)
   })
 
   test('Connect output popover appears when no outputs selected', async ({
@@ -197,7 +209,7 @@ test.describe('Builder save flow', { tag: ['@ui'] }, () => {
 
     await expect(
       comfyPage.page.getByText('Connect an output', { exact: false })
-    ).toBeVisible({ timeout: 5000 })
+    ).toBeVisible()
   })
 
   test('save as app produces correct extension and linearMode', async ({
@@ -206,11 +218,13 @@ test.describe('Builder save flow', { tag: ['@ui'] }, () => {
     await setupBuilder(comfyPage)
     await builderSaveAs(comfyPage.appMode, `${Date.now()} app-ext`, 'App')
 
-    const path = await comfyPage.workflow.getActiveWorkflowPath()
-    expect(path).toContain('.app.json')
+    await expect
+      .poll(() => comfyPage.workflow.getActiveWorkflowPath())
+      .toContain('.app.json')
 
-    const linearMode = await comfyPage.workflow.getLinearModeFromGraph()
-    expect(linearMode).toBe(true)
+    await expect
+      .poll(() => comfyPage.workflow.getLinearModeFromGraph())
+      .toBe(true)
   })
 
   test('save as node graph produces correct extension and linearMode', async ({
@@ -223,12 +237,15 @@ test.describe('Builder save flow', { tag: ['@ui'] }, () => {
       'Node graph'
     )
 
-    const path = await comfyPage.workflow.getActiveWorkflowPath()
-    expect(path).toMatch(/\.json$/)
-    expect(path).not.toContain('.app.json')
+    await expect(async () => {
+      const path = await comfyPage.workflow.getActiveWorkflowPath()
+      expect(path).toMatch(/\.json$/)
+      expect(path).not.toContain('.app.json')
+    }).toPass({ timeout: 5000 })
 
-    const linearMode = await comfyPage.workflow.getLinearModeFromGraph()
-    expect(linearMode).toBe(false)
+    await expect
+      .poll(() => comfyPage.workflow.getLinearModeFromGraph())
+      .toBe(false)
   })
 
   test('save as app View App button enters app mode', async ({ comfyPage }) => {
@@ -236,11 +253,11 @@ test.describe('Builder save flow', { tag: ['@ui'] }, () => {
     await builderSaveAs(comfyPage.appMode, `${Date.now()} app-view`, 'App')
 
     await comfyPage.appMode.saveAs.viewAppButton.click()
-    await comfyPage.nextFrame()
+    await expect(comfyPage.appMode.saveAs.successDialog).not.toBeVisible()
 
-    expect(await comfyPage.workflow.getActiveWorkflowActiveAppMode()).toBe(
-      'app'
-    )
+    await expect
+      .poll(() => comfyPage.workflow.getActiveWorkflowActiveAppMode())
+      .toBe('app')
   })
 
   test('save as node graph Exit builder exits builder mode', async ({
@@ -254,7 +271,7 @@ test.describe('Builder save flow', { tag: ['@ui'] }, () => {
     )
 
     await comfyPage.appMode.saveAs.exitBuilderButton.click()
-    await comfyPage.nextFrame()
+    await expect(comfyPage.appMode.saveAs.successDialog).not.toBeVisible()
 
     await expect(comfyPage.appMode.steps.toolbar).not.toBeVisible()
   })
@@ -267,27 +284,27 @@ test.describe('Builder save flow', { tag: ['@ui'] }, () => {
 
     const originalName = `${Date.now()} original`
     await builderSaveAs(appMode, originalName, 'App')
-    const originalPath = await comfyPage.workflow.getActiveWorkflowPath()
-    expect(originalPath).toContain('.app.json')
-    await appMode.saveAs.closeButton.click()
-    await comfyPage.nextFrame()
+    await expect
+      .poll(() => comfyPage.workflow.getActiveWorkflowPath())
+      .toContain('.app.json')
+    await dismissSuccessDialog(appMode.saveAs)
 
     // Re-save as node graph — creates a copy
     await reSaveAs(appMode, `${Date.now()} copy`, 'Node graph')
-    await expect(appMode.saveAs.successMessage).toBeVisible({ timeout: 5000 })
+    await expect(appMode.saveAs.successMessage).toBeVisible()
 
-    const newPath = await comfyPage.workflow.getActiveWorkflowPath()
-    expect(newPath).not.toBe(originalPath)
-    expect(newPath).not.toContain('.app.json')
+    await expect
+      .poll(() => comfyPage.workflow.getActiveWorkflowPath())
+      .not.toContain('.app.json')
 
     // Dismiss success dialog, exit app mode, reopen the original
-    await appMode.saveAs.dismissButton.click()
-    await comfyPage.nextFrame()
+    await dismissSuccessDialog(appMode.saveAs, 'dismiss')
     await appMode.toggleAppMode()
     await openWorkflowFromSidebar(comfyPage, originalName)
 
-    const linearMode = await comfyPage.workflow.getLinearModeFromGraph()
-    expect(linearMode).toBe(true)
+    await expect
+      .poll(() => comfyPage.workflow.getLinearModeFromGraph())
+      .toBe(true)
   })
 
   test('save as with same name and same mode overwrites in place', async ({
@@ -298,20 +315,25 @@ test.describe('Builder save flow', { tag: ['@ui'] }, () => {
     await setupBuilder(comfyPage)
 
     await builderSaveAs(appMode, name, 'App')
-    await appMode.saveAs.closeButton.click()
+    await dismissSuccessDialog(appMode.saveAs)
     await comfyPage.nextFrame()
 
+    await expect
+      .poll(() => comfyPage.workflow.getActiveWorkflowPath())
+      .toContain('.app.json')
     const pathAfterFirst = await comfyPage.workflow.getActiveWorkflowPath()
 
     await reSaveAs(appMode, name, 'App')
 
-    await expect(appMode.saveAs.overwriteDialog).toBeVisible({ timeout: 5000 })
+    await expect(appMode.saveAs.overwriteDialog).toBeVisible()
     await appMode.saveAs.overwriteButton.click()
+    await expect(appMode.saveAs.overwriteDialog).not.toBeVisible()
 
-    await expect(appMode.saveAs.successMessage).toBeVisible({ timeout: 5000 })
+    await expect(appMode.saveAs.successMessage).toBeVisible()
 
-    const pathAfterSecond = await comfyPage.workflow.getActiveWorkflowPath()
-    expect(pathAfterSecond).toBe(pathAfterFirst)
+    await expect
+      .poll(() => comfyPage.workflow.getActiveWorkflowPath())
+      .toBe(pathAfterFirst)
   })
 
   test('save as with same name but different mode creates a new file', async ({
@@ -322,32 +344,38 @@ test.describe('Builder save flow', { tag: ['@ui'] }, () => {
     await setupBuilder(comfyPage)
 
     await builderSaveAs(appMode, name, 'App')
+    await expect
+      .poll(() => comfyPage.workflow.getActiveWorkflowPath())
+      .toContain('.app.json')
     const pathAfterFirst = await comfyPage.workflow.getActiveWorkflowPath()
-    expect(pathAfterFirst).toContain('.app.json')
-    await appMode.saveAs.closeButton.click()
-    await comfyPage.nextFrame()
+    await dismissSuccessDialog(appMode.saveAs)
 
     await reSaveAs(appMode, name, 'Node graph')
-    await expect(appMode.saveAs.successMessage).toBeVisible({ timeout: 5000 })
+    await expect(appMode.saveAs.successMessage).toBeVisible()
 
-    const pathAfterSecond = await comfyPage.workflow.getActiveWorkflowPath()
-    expect(pathAfterSecond).not.toBe(pathAfterFirst)
-    expect(pathAfterSecond).toMatch(/\.json$/)
-    expect(pathAfterSecond).not.toContain('.app.json')
+    await expect
+      .poll(() => comfyPage.workflow.getActiveWorkflowPath())
+      .not.toBe(pathAfterFirst)
+    await expect
+      .poll(() => comfyPage.workflow.getActiveWorkflowPath())
+      .toMatch(/\.json$/)
+    await expect
+      .poll(() => comfyPage.workflow.getActiveWorkflowPath())
+      .not.toContain('.app.json')
   })
 
   test('save as app workflow reloads in app mode', async ({ comfyPage }) => {
     const name = `${Date.now()} reload-app`
     await setupBuilder(comfyPage)
     await builderSaveAs(comfyPage.appMode, name, 'App')
-    await comfyPage.appMode.saveAs.dismissButton.click()
-    await comfyPage.nextFrame()
+    await dismissSuccessDialog(comfyPage.appMode.saveAs, 'dismiss')
     await comfyPage.appMode.footer.exitBuilder()
 
     await openWorkflowFromSidebar(comfyPage, name)
 
-    const mode = await comfyPage.workflow.getActiveWorkflowInitialMode()
-    expect(mode).toBe('app')
+    await expect
+      .poll(() => comfyPage.workflow.getActiveWorkflowInitialMode())
+      .toBe('app')
   })
 
   test('save as node graph workflow reloads in node graph mode', async ({
@@ -356,13 +384,13 @@ test.describe('Builder save flow', { tag: ['@ui'] }, () => {
     const name = `${Date.now()} reload-graph`
     await setupBuilder(comfyPage)
     await builderSaveAs(comfyPage.appMode, name, 'Node graph')
-    await comfyPage.appMode.saveAs.dismissButton.click()
-    await comfyPage.nextFrame()
+    await dismissSuccessDialog(comfyPage.appMode.saveAs, 'dismiss')
     await comfyPage.appMode.toggleAppMode()
 
     await openWorkflowFromSidebar(comfyPage, name)
 
-    const mode = await comfyPage.workflow.getActiveWorkflowInitialMode()
-    expect(mode).toBe('graph')
+    await expect
+      .poll(() => comfyPage.workflow.getActiveWorkflowInitialMode())
+      .toBe('graph')
   })
 })

browser_tests/tests/canvasModeSelector.spec.ts

@@ -0,0 +1,275 @@
+import type { Page } from '@playwright/test'
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+
+const getLocators = (page: Page) => ({
+  trigger: page.getByRole('button', { name: 'Canvas Mode' }),
+  menu: page.getByRole('menu', { name: 'Canvas Mode' }),
+  selectItem: page.getByRole('menuitemradio', { name: 'Select' }),
+  handItem: page.getByRole('menuitemradio', { name: 'Hand' })
+})
+
+const MODES = [
+  {
+    label: 'Select',
+    activateCommand: 'Comfy.Canvas.Unlock',
+    isReadOnly: false,
+    iconPattern: /lucide--mouse-pointer-2/
+  },
+  {
+    label: 'Hand',
+    activateCommand: 'Comfy.Canvas.Lock',
+    isReadOnly: true,
+    iconPattern: /lucide--hand/
+  }
+]
+
+test.describe('CanvasModeSelector', { tag: '@canvas' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', true)
+    await comfyPage.command.executeCommand('Comfy.Canvas.Unlock')
+    await comfyPage.nextFrame()
+  })
+
+  test.describe('Trigger button', () => {
+    test('visible in canvas toolbar with ARIA markup', async ({
+      comfyPage
+    }) => {
+      const { trigger } = getLocators(comfyPage.page)
+      await expect(trigger).toBeVisible()
+      await expect(trigger).toHaveAttribute('aria-expanded', 'false')
+    })
+
+    for (const mode of MODES) {
+      test(`shows ${mode.label}-mode icon on trigger button`, async ({
+        comfyPage
+      }) => {
+        await comfyPage.command.executeCommand(mode.activateCommand)
+        await comfyPage.nextFrame()
+        const { trigger } = getLocators(comfyPage.page)
+        const modeIcon = trigger.locator('i[aria-hidden="true"]').first()
+        await expect(modeIcon).toHaveClass(mode.iconPattern)
+      })
+    }
+  })
+
+  test.describe('Popover lifecycle', () => {
+    test('opens when trigger is clicked', async ({ comfyPage }) => {
+      const { trigger, menu } = getLocators(comfyPage.page)
+      await trigger.click()
+      await comfyPage.nextFrame()
+      await expect(menu).toBeVisible()
+      await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+    })
+
+    test('closes when trigger is clicked again', async ({ comfyPage }) => {
+      const { trigger, menu } = getLocators(comfyPage.page)
+      await trigger.click()
+      await comfyPage.nextFrame()
+      await expect(menu).toBeVisible()
+      await trigger.click()
+      await comfyPage.nextFrame()
+      await expect(menu).not.toBeVisible()
+      await expect(trigger).toHaveAttribute('aria-expanded', 'false')
+    })
+
+    test('closes after a mode item is selected', async ({ comfyPage }) => {
+      const { trigger, menu, handItem } = getLocators(comfyPage.page)
+      await trigger.click()
+      await comfyPage.nextFrame()
+      await expect(menu).toBeVisible()
+      await handItem.click()
+      await comfyPage.nextFrame()
+      await expect(menu).not.toBeVisible()
+    })
+
+    test('closes when Escape is pressed', async ({ comfyPage }) => {
+      const { trigger, menu, selectItem } = getLocators(comfyPage.page)
+      await trigger.click()
+      await comfyPage.nextFrame()
+      await expect(menu).toBeVisible()
+      await selectItem.press('Escape')
+      await comfyPage.nextFrame()
+      await expect(menu).not.toBeVisible()
+      await expect(trigger).toHaveAttribute('aria-expanded', 'false')
+    })
+  })
+
+  test.describe('Mode switching', () => {
+    for (const mode of MODES) {
+      test(`clicking "${mode.label}" sets canvas readOnly=${mode.isReadOnly}`, async ({
+        comfyPage
+      }) => {
+        if (!mode.isReadOnly) {
+          await comfyPage.command.executeCommand('Comfy.Canvas.Lock')
+          await comfyPage.nextFrame()
+        }
+        const { trigger, menu, selectItem, handItem } = getLocators(
+          comfyPage.page
+        )
+        const item = mode.isReadOnly ? handItem : selectItem
+        await trigger.click()
+        await comfyPage.nextFrame()
+        await expect(menu).toBeVisible()
+        await item.click()
+        await comfyPage.nextFrame()
+        await expect
+          .poll(() => comfyPage.canvasOps.isReadOnly())
+          .toBe(mode.isReadOnly)
+      })
+    }
+
+    test('clicking the currently active item is a no-op', async ({
+      comfyPage
+    }) => {
+      expect(
+        await comfyPage.canvasOps.isReadOnly(),
+        'Precondition: canvas starts in Select mode'
+      ).toBe(false)
+      const { trigger, menu, selectItem } = getLocators(comfyPage.page)
+      await trigger.click()
+      await comfyPage.nextFrame()
+      await expect(menu).toBeVisible()
+      await selectItem.click()
+      await comfyPage.nextFrame()
+      await expect.poll(() => comfyPage.canvasOps.isReadOnly()).toBe(false)
+    })
+  })
+
+  test.describe('ARIA state', () => {
+    test('aria-checked marks Select active on default load', async ({
+      comfyPage
+    }) => {
+      const { trigger, menu, selectItem, handItem } = getLocators(
+        comfyPage.page
+      )
+      await trigger.click()
+      await comfyPage.nextFrame()
+      await expect(menu).toBeVisible()
+      await expect(selectItem).toHaveAttribute('aria-checked', 'true')
+      await expect(handItem).toHaveAttribute('aria-checked', 'false')
+    })
+
+    for (const mode of MODES) {
+      test(`tabindex=0 is on the active "${mode.label}" item`, async ({
+        comfyPage
+      }) => {
+        await comfyPage.command.executeCommand(mode.activateCommand)
+        await comfyPage.nextFrame()
+        const { trigger, menu, selectItem, handItem } = getLocators(
+          comfyPage.page
+        )
+        await trigger.click()
+        await comfyPage.nextFrame()
+        await expect(menu).toBeVisible()
+
+        const activeItem = mode.isReadOnly ? handItem : selectItem
+        const inactiveItem = mode.isReadOnly ? selectItem : handItem
+
+        await expect(activeItem).toHaveAttribute('tabindex', '0')
+        await expect(inactiveItem).toHaveAttribute('tabindex', '-1')
+      })
+    }
+  })
+
+  test.describe('Keyboard navigation', () => {
+    test('ArrowDown moves focus from Select to Hand', async ({ comfyPage }) => {
+      const { trigger, menu, selectItem, handItem } = getLocators(
+        comfyPage.page
+      )
+      await trigger.click()
+      await comfyPage.nextFrame()
+      await expect(menu).toBeVisible()
+      await selectItem.press('ArrowDown')
+      await expect(handItem).toBeFocused()
+    })
+
+    test('Escape closes popover and restores focus to trigger', async ({
+      comfyPage
+    }) => {
+      const { trigger, menu, selectItem, handItem } = getLocators(
+        comfyPage.page
+      )
+      await trigger.click()
+      await comfyPage.nextFrame()
+      await expect(menu).toBeVisible()
+      await selectItem.press('ArrowDown')
+      await handItem.press('Escape')
+      await comfyPage.nextFrame()
+      await expect(menu).not.toBeVisible()
+      await expect(trigger).toBeFocused()
+    })
+  })
+
+  test.describe('Focus management on open', () => {
+    for (const mode of MODES) {
+      test(`auto-focuses the checked "${mode.label}" item on open`, async ({
+        comfyPage
+      }) => {
+        await comfyPage.command.executeCommand(mode.activateCommand)
+        await comfyPage.nextFrame()
+        const { trigger, menu, selectItem, handItem } = getLocators(
+          comfyPage.page
+        )
+        const item = mode.isReadOnly ? handItem : selectItem
+        await trigger.click()
+        await comfyPage.nextFrame()
+        await expect(menu).toBeVisible()
+        await expect(item).toBeFocused()
+      })
+    }
+  })
+
+  test.describe('Keybinding integration', { tag: '@keyboard' }, () => {
+    test("'H' locks canvas and updates trigger icon to Hand", async ({
+      comfyPage
+    }) => {
+      expect(
+        await comfyPage.canvasOps.isReadOnly(),
+        'Precondition: canvas starts unlocked'
+      ).toBe(false)
+      await comfyPage.canvas.press('KeyH')
+      await comfyPage.nextFrame()
+      expect(await comfyPage.canvasOps.isReadOnly()).toBe(true)
+      const { trigger } = getLocators(comfyPage.page)
+      const modeIcon = trigger.locator('i[aria-hidden="true"]').first()
+      await expect(modeIcon).toHaveClass(/lucide--hand/)
+    })
+
+    test("'V' unlocks canvas and updates trigger icon to Select", async ({
+      comfyPage
+    }) => {
+      await comfyPage.command.executeCommand('Comfy.Canvas.Lock')
+      await comfyPage.nextFrame()
+      expect(
+        await comfyPage.canvasOps.isReadOnly(),
+        'Precondition: canvas starts locked'
+      ).toBe(true)
+      await comfyPage.canvas.press('KeyV')
+      await comfyPage.nextFrame()
+      expect(await comfyPage.canvasOps.isReadOnly()).toBe(false)
+      const { trigger } = getLocators(comfyPage.page)
+      const modeIcon = trigger.locator('i[aria-hidden="true"]').first()
+      await expect(modeIcon).toHaveClass(/lucide--mouse-pointer-2/)
+    })
+  })
+
+  test.describe('Shortcut hint display', () => {
+    test('menu items show non-empty keyboard shortcut text', async ({
+      comfyPage
+    }) => {
+      const { trigger, menu, selectItem, handItem } = getLocators(
+        comfyPage.page
+      )
+      await trigger.click()
+      await comfyPage.nextFrame()
+      await expect(menu).toBeVisible()
+      const selectHint = selectItem.getByTestId('shortcut-hint')
+      const handHint = handItem.getByTestId('shortcut-hint')
+
+      await expect(selectHint).not.toBeEmpty()
+      await expect(handHint).not.toBeEmpty()
+    })
+  })
+})

browser_tests/tests/changeTracker.spec.ts

@@ -1,14 +1,94 @@
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import type { WorkspaceStore } from '@e2e/types/globals'
 import {
   comfyExpect as expect,
   comfyPageFixture as test
 } from '@e2e/fixtures/ComfyPage'
 
+type ChangeTrackerDebugState = {
+  changeCount: number
+  graphMatchesActiveState: boolean
+  isLoadingGraph: boolean
+  isModified: boolean | undefined
+  redoQueueSize: number
+  restoringState: boolean
+  undoQueueSize: number
+}
+
+async function getChangeTrackerDebugState(comfyPage: ComfyPage) {
+  return await comfyPage.page.evaluate(() => {
+    type ChangeTrackerClassLike = {
+      graphEqual: (left: unknown, right: unknown) => boolean
+      isLoadingGraph: boolean
+    }
+
+    type ChangeTrackerLike = {
+      _restoringState: boolean
+      activeState: unknown
+      changeCount: number
+      constructor: ChangeTrackerClassLike
+      redoQueue: unknown[]
+      undoQueue: unknown[]
+    }
+
+    type ActiveWorkflowLike = {
+      changeTracker?: ChangeTrackerLike
+      isModified?: boolean
+    }
+
+    const workflowStore = window.app!.extensionManager as WorkspaceStore
+    const workflow = workflowStore.workflow
+      .activeWorkflow as ActiveWorkflowLike | null
+    const tracker = workflow?.changeTracker
+    if (!workflow || !tracker) {
+      throw new Error('Active workflow change tracker is not available')
+    }
+
+    const currentState = JSON.parse(
+      JSON.stringify(window.app!.rootGraph.serialize())
+    )
+    return {
+      changeCount: tracker.changeCount,
+      graphMatchesActiveState: tracker.constructor.graphEqual(
+        tracker.activeState,
+        currentState
+      ),
+      isLoadingGraph: tracker.constructor.isLoadingGraph,
+      isModified: workflow.isModified,
+      redoQueueSize: tracker.redoQueue.length,
+      restoringState: tracker._restoringState,
+      undoQueueSize: tracker.undoQueue.length
+    } satisfies ChangeTrackerDebugState
+  })
+}
+
+async function waitForChangeTrackerSettled(
+  comfyPage: ComfyPage,
+  expected: Pick<
+    ChangeTrackerDebugState,
+    'isModified' | 'redoQueueSize' | 'undoQueueSize'
+  >
+) {
+  // Visible node flags can flip before undo finishes loadGraphData() and
+  // updates the tracker. Poll the tracker's own settled state so we do not
+  // start the next transaction while checkState() is still gated.
+  await expect
+    .poll(() => getChangeTrackerDebugState(comfyPage))
+    .toMatchObject({
+      changeCount: 0,
+      graphMatchesActiveState: true,
+      isLoadingGraph: false,
+      restoringState: false,
+      ...expected
+    })
+}
+
 async function beforeChange(comfyPage: ComfyPage) {
   await comfyPage.page.evaluate(() => {
     window.app!.canvas!.emitBeforeChange()
   })
 }
+
 async function afterChange(comfyPage: ComfyPage) {
   await comfyPage.page.evaluate(() => {
     window.app!.canvas!.emitAfterChange()
@@ -32,7 +112,7 @@ test.describe('Change Tracker', { tag: '@workflow' }, () => {
 
       // Save, confirm no errors & workflow modified flag removed
       await comfyPage.menu.topbar.saveWorkflow('undo-redo-test')
-      await expect.poll(() => comfyPage.toast.getToastErrorCount()).toBe(0)
+      await expect(comfyPage.toast.toastErrors).toHaveCount(0)
       await expect
         .poll(() => comfyPage.workflow.isCurrentWorkflowModified())
         .toBe(false)
@@ -59,19 +139,19 @@ test.describe('Change Tracker', { tag: '@workflow' }, () => {
 
       await comfyPage.keyboard.undo()
       await expect(node).not.toBeBypassed()
-      await expect
-        .poll(() => comfyPage.workflow.isCurrentWorkflowModified())
-        .toBe(true)
-      await expect.poll(() => comfyPage.workflow.getUndoQueueSize()).toBe(1)
-      await expect.poll(() => comfyPage.workflow.getRedoQueueSize()).toBe(1)
+      await waitForChangeTrackerSettled(comfyPage, {
+        isModified: true,
+        redoQueueSize: 1,
+        undoQueueSize: 1
+      })
 
       await comfyPage.keyboard.undo()
       await expect(node).not.toBeCollapsed()
-      await expect
-        .poll(() => comfyPage.workflow.isCurrentWorkflowModified())
-        .toBe(false)
-      await expect.poll(() => comfyPage.workflow.getUndoQueueSize()).toBe(0)
-      await expect.poll(() => comfyPage.workflow.getRedoQueueSize()).toBe(2)
+      await waitForChangeTrackerSettled(comfyPage, {
+        isModified: false,
+        redoQueueSize: 2,
+        undoQueueSize: 0
+      })
     })
   })
 
@@ -98,6 +178,11 @@ test.describe('Change Tracker', { tag: '@workflow' }, () => {
     await comfyPage.keyboard.undo()
     await expect(node).not.toBeBypassed()
     await expect(node).not.toBeCollapsed()
+    await waitForChangeTrackerSettled(comfyPage, {
+      isModified: false,
+      redoQueueSize: 2,
+      undoQueueSize: 0
+    })
 
     // Prevent clicks registering a double-click
     await comfyPage.canvasOps.clickEmptySpace()
@@ -113,11 +198,21 @@ test.describe('Change Tracker', { tag: '@workflow' }, () => {
 
     // End transaction
     await afterChange(comfyPage)
+    await waitForChangeTrackerSettled(comfyPage, {
+      isModified: true,
+      redoQueueSize: 0,
+      undoQueueSize: 1
+    })
 
     // Ensure undo reverts both changes
     await comfyPage.keyboard.undo()
     await expect(node).not.toBeBypassed()
     await expect(node).not.toBeCollapsed()
+    await waitForChangeTrackerSettled(comfyPage, {
+      isModified: false,
+      redoQueueSize: 1,
+      undoQueueSize: 0
+    })
   })
 
   test('Can nest multiple change transactions without adding undo steps', async ({

browser_tests/tests/changeTrackerLoadGuard.spec.ts

@@ -16,7 +16,7 @@ test.describe(
       comfyPage
     }) => {
       // Tab 0: default workflow (7 nodes)
-      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(7)
+      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(7)
 
       // Save tab 0 so it has a unique name for tab switching
       await comfyPage.menu.topbar.saveWorkflow('workflow-a')
@@ -42,25 +42,21 @@ test.describe(
 
       // Create tab 1: blank workflow (0 nodes)
       await comfyPage.menu.topbar.triggerTopbarCommand(['New'])
-      await comfyPage.nextFrame()
-      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
+      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
 
       // Switch back to tab 0 (workflow-a).
       const tab0 = comfyPage.menu.topbar.getWorkflowTab('workflow-a')
       await tab0.click()
-      await comfyPage.nextFrame()
-      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(7)
+      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(7)
 
       // switch to blank tab and back to verify no corruption
       const tab1 = comfyPage.menu.topbar.getWorkflowTab('Unsaved Workflow')
       await tab1.click()
-      await comfyPage.nextFrame()
-      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
+      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
 
       // switch again and verify no corruption
       await tab0.click()
-      await comfyPage.nextFrame()
-      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(7)
+      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(7)
     })
   }
 )

browser_tests/tests/cloud-asset-default.spec.ts

@@ -0,0 +1,92 @@
+import { expect } from '@playwright/test'
+
+import type { Asset, ListAssetsResponse } from '@comfyorg/ingest-types'
+import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import {
+  STABLE_CHECKPOINT,
+  STABLE_CHECKPOINT_2
+} from '@e2e/fixtures/data/assetFixtures'
+
+function makeAssetsResponse(assets: Asset[]): ListAssetsResponse {
+  return { assets, total: assets.length, has_more: false }
+}
+
+const CLOUD_ASSETS: Asset[] = [STABLE_CHECKPOINT, STABLE_CHECKPOINT_2]
+
+// Stub /api/assets before the app loads. The local ComfyUI backend has no
+// /api/assets endpoint (returns 503), which poisons the assets store on
+// first load. Narrow pattern avoids intercepting static /assets/*.js bundles.
+//
+// TODO: Consider moving this stub into ComfyPage fixture for all @cloud tests.
+const test = comfyPageFixture.extend<{ stubCloudAssets: void }>({
+  stubCloudAssets: [
+    async ({ page }, use) => {
+      const pattern = '**/api/assets?*'
+      await page.route(pattern, (route) =>
+        route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify(makeAssetsResponse(CLOUD_ASSETS))
+        })
+      )
+      await use()
+      await page.unroute(pattern)
+    },
+    { auto: true }
+  ]
+})
+
+test.describe('Asset-supported node default value', { tag: '@cloud' }, () => {
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.nodeOps.clearGraph()
+  })
+
+  test('should use first cloud asset when server default is not in assets', async ({
+    comfyPage
+  }) => {
+    // The default workflow contains a CheckpointLoaderSimple node whose
+    // server default (from object_info) is a local file not in cloud assets.
+    // Wait for the existing node's asset widget to mount, confirming the
+    // assets store has been populated from the stub before adding a new node.
+    await expect
+      .poll(
+        () =>
+          comfyPage.page.evaluate(() => {
+            const node = window.app!.graph.nodes.find(
+              (n: { type: string }) => n.type === 'CheckpointLoaderSimple'
+            )
+            return node?.widgets?.find(
+              (w: { name: string }) => w.name === 'ckpt_name'
+            )?.type
+          }),
+        { timeout: 10_000 }
+      )
+      .toBe('asset')
+
+    // Add a new CheckpointLoaderSimple — should use first cloud asset,
+    // not the server's object_info default.
+    // Production resolves via getAssetFilename (user_metadata.filename →
+    // metadata.filename → asset.name). Test fixtures have no metadata
+    // filename, so asset.name is the resolved value.
+    const nodeId = await comfyPage.page.evaluate(() => {
+      const node = window.LiteGraph!.createNode('CheckpointLoaderSimple')
+      window.app!.graph.add(node!)
+      return node!.id
+    })
+
+    await expect
+      .poll(
+        async () => {
+          return await comfyPage.page.evaluate((id) => {
+            const node = window.app!.graph.getNodeById(id)
+            const widget = node?.widgets?.find(
+              (w: { name: string }) => w.name === 'ckpt_name'
+            )
+            return String(widget?.value ?? '')
+          }, nodeId)
+        },
+        { timeout: 10_000 }
+      )
+      .toBe(CLOUD_ASSETS[0].name)
+  })
+})

browser_tests/tests/collapsedNodeLinks.spec.ts

@@ -35,8 +35,8 @@ test.describe(
       await node.toggleCollapse()
       await comfyPage.nextFrame()
 
+      await expect.poll(async () => await node.boundingBox()).not.toBeNull()
       const box = await node.boundingBox()
-      expect(box).not.toBeNull()
       await comfyPage.page.mouse.move(
         box!.x + box!.width / 2,
         box!.y + box!.height / 2

browser_tests/tests/colorPalette.spec.ts

@@ -157,6 +157,7 @@ test.describe('Color Palette', { tag: ['@screenshot', '@settings'] }, () => {
 
     await comfyPage.workflow.loadWorkflow('nodes/every_node_color')
     await comfyPage.settings.setSetting('Comfy.ColorPalette', 'obsidian_dark')
+    await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot(
       'custom-color-palette-obsidian-dark-all-colors.png'
     )
@@ -177,7 +178,7 @@ test.describe('Color Palette', { tag: ['@screenshot', '@settings'] }, () => {
         window.app!.extensionManager as WorkspaceStore
       ).colorPalette.addCustomColorPalette(p)
     }, customColorPalettes.obsidian_dark)
-    expect(await comfyPage.toast.getToastErrorCount()).toBe(0)
+    await expect(comfyPage.toast.toastErrors).toHaveCount(0)
 
     await comfyPage.settings.setSetting('Comfy.ColorPalette', 'obsidian_dark')
     await comfyPage.nextFrame()
@@ -211,12 +212,14 @@ test.describe(
 
       // Drag mouse to force canvas to redraw
       await comfyPage.page.mouse.move(0, 0)
+      await comfyPage.nextFrame()
 
       await expect(comfyPage.canvas).toHaveScreenshot('node-opacity-0.5.png')
 
       await comfyPage.settings.setSetting('Comfy.Node.Opacity', 1.0)
 
       await comfyPage.page.mouse.move(8, 8)
+      await comfyPage.nextFrame()
       await expect(comfyPage.canvas).toHaveScreenshot('node-opacity-1.png')
     })
 
@@ -225,8 +228,8 @@ test.describe(
     }) => {
       await comfyPage.settings.setSetting('Comfy.Node.Opacity', 0.2)
       await comfyPage.settings.setSetting('Comfy.ColorPalette', 'arc')
-      await comfyPage.nextFrame()
       await comfyPage.page.mouse.move(0, 0)
+      await comfyPage.nextFrame()
       await expect(comfyPage.canvas).toHaveScreenshot(
         'node-opacity-0.2-arc-theme.png'
       )
@@ -238,22 +241,38 @@ test.describe(
       await comfyPage.settings.setSetting('Comfy.Node.Opacity', 0.5)
       await comfyPage.settings.setSetting('Comfy.ColorPalette', 'light')
       await comfyPage.nextFrame()
-      const parsed = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.graph!
-        if (typeof graph.serialize !== 'function') {
-          throw new Error('app.graph.serialize is not available')
-        }
-        return graph.serialize() as {
-          nodes: Array<{ bgcolor?: string; color?: string }>
-        }
-      })
-      expect(parsed.nodes).toBeDefined()
-      expect(Array.isArray(parsed.nodes)).toBe(true)
-      const nodes = parsed.nodes
-      for (const node of nodes) {
-        if (node.bgcolor) expect(node.bgcolor).not.toMatch(/hsla/)
-        if (node.color) expect(node.color).not.toMatch(/hsla/)
-      }
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(() => {
+            const graph = window.app!.graph!
+            if (typeof graph.serialize !== 'function') return undefined
+            const parsed = graph.serialize() as {
+              nodes: Array<{ bgcolor?: string; color?: string }>
+            }
+            return parsed.nodes
+          })
+        )
+        .toBeDefined()
+
+      await expect
+        .poll(async () => {
+          const nodes = await comfyPage.page.evaluate(() => {
+            return (
+              window.app!.graph!.serialize() as {
+                nodes: Array<{ bgcolor?: string; color?: string }>
+              }
+            ).nodes
+          })
+          if (!Array.isArray(nodes)) return 'not an array'
+          for (const node of nodes) {
+            if (node.bgcolor && /hsla/.test(node.bgcolor))
+              return `bgcolor contains hsla: ${node.bgcolor}`
+            if (node.color && /hsla/.test(node.color))
+              return `color contains hsla: ${node.color}`
+          }
+          return 'ok'
+        })
+        .toBe('ok')
     })
 
     test('should lighten node colors when switching to light theme', async ({

browser_tests/tests/commands.spec.ts

@@ -13,7 +13,9 @@ test.describe('Keybindings', { tag: '@keyboard' }, () => {
     })
 
     await comfyPage.command.executeCommand('TestCommand')
-    expect(await comfyPage.page.evaluate(() => window.foo)).toBe(true)
+    await expect
+      .poll(() => comfyPage.page.evaluate(() => window.foo))
+      .toBe(true)
   })
 
   test('Should execute async command', async ({ comfyPage }) => {
@@ -27,7 +29,9 @@ test.describe('Keybindings', { tag: '@keyboard' }, () => {
     })
 
     await comfyPage.command.executeCommand('TestCommand')
-    expect(await comfyPage.page.evaluate(() => window.foo)).toBe(true)
+    await expect
+      .poll(() => comfyPage.page.evaluate(() => window.foo))
+      .toBe(true)
   })
 
   test('Should handle command errors', async ({ comfyPage }) => {
@@ -36,7 +40,7 @@ test.describe('Keybindings', { tag: '@keyboard' }, () => {
     })
 
     await comfyPage.command.executeCommand('TestCommand')
-    expect(await comfyPage.toast.getToastErrorCount()).toBe(1)
+    await expect(comfyPage.toast.toastErrors).toHaveCount(1)
   })
 
   test('Should handle async command errors', async ({ comfyPage }) => {
@@ -49,6 +53,6 @@ test.describe('Keybindings', { tag: '@keyboard' }, () => {
     })
 
     await comfyPage.command.executeCommand('TestCommand')
-    expect(await comfyPage.toast.getToastErrorCount()).toBe(1)
+    await expect(comfyPage.toast.toastErrors).toHaveCount(1)
   })
 })

browser_tests/tests/copyPaste.spec.ts

@@ -149,11 +149,7 @@ test.describe('Copy Paste', { tag: ['@screenshot', '@workflow'] }, () => {
       await comfyPage.canvas.click({ position: { x: 50, y: 500 } })
       await comfyPage.nextFrame()
       await comfyPage.clipboard.paste()
-      await expect
-        .poll(() => comfyPage.nodeOps.getGraphNodesCount(), {
-          timeout: 5_000
-        })
-        .toBe(3)
+      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(3)
 
       // Step 2: Paste image onto selected LoadImage node
       const loadImageNodes =
@@ -171,13 +167,10 @@ test.describe('Copy Paste', { tag: ['@screenshot', '@workflow'] }, () => {
       await uploadPromise
 
       await expect
-        .poll(
-          async () => {
-            const fileWidget = await loadImageNodes[0].getWidget(0)
-            return fileWidget.getValue()
-          },
-          { timeout: 5_000 }
-        )
+        .poll(async () => {
+          const fileWidget = await loadImageNodes[0].getWidget(0)
+          return fileWidget.getValue()
+        })
         .toContain('image32x32')
       await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(3)
 
@@ -194,11 +187,7 @@ test.describe('Copy Paste', { tag: ['@screenshot', '@workflow'] }, () => {
       )
       await uploadPromise2
 
-      await expect
-        .poll(() => comfyPage.nodeOps.getGraphNodesCount(), {
-          timeout: 5_000
-        })
-        .toBe(4)
+      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(4)
       const allLoadImageNodes =
         await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
       expect(allLoadImageNodes).toHaveLength(2)

browser_tests/tests/customIcons.spec.ts

@@ -4,22 +4,19 @@ import type { Locator } from '@playwright/test'
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 async function verifyCustomIconSvg(iconElement: Locator) {
-  const svgVariable = await iconElement.evaluate((element) => {
-    const styles = getComputedStyle(element)
-    return styles.getPropertyValue('--svg')
-  })
-
-  expect(svgVariable).toBeTruthy()
-  const dataUrlMatch = svgVariable.match(
-    /url\("data:image\/svg\+xml,([^"]+)"\)/
-  )
-  expect(dataUrlMatch).toBeTruthy()
-
-  const encodedSvg = dataUrlMatch![1]
-  const decodedSvg = decodeURIComponent(encodedSvg)
-
-  // Check for SVG header to confirm it's a valid SVG
-  expect(decodedSvg).toContain("<svg xmlns='http://www.w3.org/2000/svg'")
+  await expect
+    .poll(async () => {
+      const svgVariable = await iconElement.evaluate((element) =>
+        getComputedStyle(element).getPropertyValue('--svg')
+      )
+      if (!svgVariable) return null
+      const dataUrlMatch = svgVariable.match(
+        /url\("data:image\/svg\+xml,([^"]+)"\)/
+      )
+      if (!dataUrlMatch) return null
+      return decodeURIComponent(dataUrlMatch[1])
+    })
+    .toContain("<svg xmlns='http://www.w3.org/2000/svg'")
 }
 
 test.describe('Custom Icons', { tag: '@settings' }, () => {

browser_tests/tests/defaultKeybindings.spec.ts

@@ -41,11 +41,9 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
         await expect(selectedButton).not.toBeVisible()
 
         await comfyPage.canvas.press(key)
-        await comfyPage.nextFrame()
         await expect(selectedButton).toBeVisible()
 
         await comfyPage.canvas.press(key)
-        await comfyPage.nextFrame()
         await expect(selectedButton).not.toBeVisible()
       })
     }
@@ -58,8 +56,9 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
       await comfyPage.canvas.press('Alt+Equal')
       await comfyPage.nextFrame()
 
-      const newScale = await comfyPage.canvasOps.getScale()
-      expect(newScale).toBeGreaterThan(initialScale)
+      await expect
+        .poll(() => comfyPage.canvasOps.getScale())
+        .toBeGreaterThan(initialScale)
     })
 
     test("'Alt+-' zooms out", async ({ comfyPage }) => {
@@ -68,15 +67,17 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
       await comfyPage.canvas.press('Alt+Minus')
       await comfyPage.nextFrame()
 
-      const newScale = await comfyPage.canvasOps.getScale()
-      expect(newScale).toBeLessThan(initialScale)
+      await expect
+        .poll(() => comfyPage.canvasOps.getScale())
+        .toBeLessThan(initialScale)
     })
 
     test("'.' fits view to nodes", async ({ comfyPage }) => {
       // Set scale very small so fit-view will zoom back to fit nodes
       await comfyPage.canvasOps.setScale(0.1)
-      const scaleBefore = await comfyPage.canvasOps.getScale()
-      expect(scaleBefore).toBeCloseTo(0.1, 1)
+      await expect
+        .poll(() => comfyPage.canvasOps.getScale())
+        .toBeCloseTo(0.1, 1)
 
       // Click canvas to ensure focus is within graph-canvas-container
       await comfyPage.canvas.click({ position: { x: 400, y: 400 } })
@@ -85,29 +86,30 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
       await comfyPage.canvas.press('Period')
       await comfyPage.nextFrame()
 
-      const scaleAfter = await comfyPage.canvasOps.getScale()
-      expect(scaleAfter).toBeGreaterThan(scaleBefore)
+      await expect
+        .poll(() => comfyPage.canvasOps.getScale())
+        .toBeGreaterThan(0.1)
     })
 
     test("'h' locks canvas", async ({ comfyPage }) => {
-      expect(await comfyPage.canvasOps.isReadOnly()).toBe(false)
+      await expect.poll(() => comfyPage.canvasOps.isReadOnly()).toBe(false)
 
       await comfyPage.canvas.press('KeyH')
       await comfyPage.nextFrame()
 
-      expect(await comfyPage.canvasOps.isReadOnly()).toBe(true)
+      await expect.poll(() => comfyPage.canvasOps.isReadOnly()).toBe(true)
     })
 
     test("'v' unlocks canvas", async ({ comfyPage }) => {
       // Lock first
       await comfyPage.command.executeCommand('Comfy.Canvas.Lock')
       await comfyPage.nextFrame()
-      expect(await comfyPage.canvasOps.isReadOnly()).toBe(true)
+      await expect.poll(() => comfyPage.canvasOps.isReadOnly()).toBe(true)
 
       await comfyPage.canvas.press('KeyV')
       await comfyPage.nextFrame()
 
-      expect(await comfyPage.canvasOps.isReadOnly()).toBe(false)
+      await expect.poll(() => comfyPage.canvasOps.isReadOnly()).toBe(false)
     })
   })
 
@@ -122,15 +124,15 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
       await node.click('title')
       await comfyPage.nextFrame()
 
-      expect(await node.isCollapsed()).toBe(false)
+      await expect.poll(() => node.isCollapsed()).toBe(false)
 
       await comfyPage.canvas.press('Alt+KeyC')
       await comfyPage.nextFrame()
-      expect(await node.isCollapsed()).toBe(true)
+      await expect.poll(() => node.isCollapsed()).toBe(true)
 
       await comfyPage.canvas.press('Alt+KeyC')
       await comfyPage.nextFrame()
-      expect(await node.isCollapsed()).toBe(false)
+      await expect.poll(() => node.isCollapsed()).toBe(false)
     })
 
     test("'Ctrl+m' mutes and unmutes selected nodes", async ({ comfyPage }) => {
@@ -147,16 +149,16 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
           return window.app!.canvas.graph!.getNodeById(nodeId)!.mode
         }, node.id)
 
-      expect(await getMode()).toBe(0)
+      await expect.poll(() => getMode()).toBe(0)
 
       await comfyPage.canvas.press('Control+KeyM')
       await comfyPage.nextFrame()
       // NEVER (2) = muted
-      expect(await getMode()).toBe(2)
+      await expect.poll(() => getMode()).toBe(2)
 
       await comfyPage.canvas.press('Control+KeyM')
       await comfyPage.nextFrame()
-      expect(await getMode()).toBe(0)
+      await expect.poll(() => getMode()).toBe(0)
     })
   })
 
@@ -170,12 +172,10 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
 
       // Toggle off with Alt+m
       await comfyPage.page.keyboard.press('Alt+KeyM')
-      await comfyPage.nextFrame()
       await expect(comfyPage.appMode.linearWidgets).not.toBeVisible()
 
       // Toggle on again
       await comfyPage.page.keyboard.press('Alt+KeyM')
-      await comfyPage.nextFrame()
       await expect(comfyPage.appMode.linearWidgets).toBeVisible()
     })
 
@@ -189,11 +189,9 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
       await expect(minimap).toBeVisible()
 
       await comfyPage.page.keyboard.press('Alt+Shift+KeyM')
-      await comfyPage.nextFrame()
       await expect(minimap).not.toBeVisible()
 
       await comfyPage.page.keyboard.press('Alt+Shift+KeyM')
-      await comfyPage.nextFrame()
       await expect(minimap).toBeVisible()
     })
 
@@ -203,11 +201,9 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
       await expect(comfyPage.bottomPanel.root).not.toBeVisible()
 
       await comfyPage.page.keyboard.press('Control+Backquote')
-      await comfyPage.nextFrame()
       await expect(comfyPage.bottomPanel.root).toBeVisible()
 
       await comfyPage.page.keyboard.press('Control+Backquote')
-      await comfyPage.nextFrame()
       await expect(comfyPage.bottomPanel.root).not.toBeVisible()
     })
   })
@@ -254,7 +250,7 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
 
       // The Save As dialog should appear (p-dialog overlay)
       const dialogOverlay = comfyPage.page.locator('.p-dialog-mask')
-      await expect(dialogOverlay).toBeVisible({ timeout: 3000 })
+      await expect(dialogOverlay).toBeVisible()
 
       // Dismiss the dialog
       await comfyPage.page.keyboard.press('Escape')
@@ -278,7 +274,9 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
       await comfyPage.page.keyboard.press('Control+o')
       await comfyPage.nextFrame()
 
-      expect(await comfyPage.page.evaluate(() => window.TestCommand)).toBe(true)
+      await expect
+        .poll(() => comfyPage.page.evaluate(() => window.TestCommand))
+        .toBe(true)
     })
   })
 
@@ -286,8 +284,14 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
     test("'Ctrl+Shift+e' converts selection to subgraph", async ({
       comfyPage
     }) => {
+      await expect
+        .poll(
+          () => comfyPage.nodeOps.getGraphNodesCount(),
+          'Default workflow should have multiple nodes'
+        )
+        .toBeGreaterThan(1)
+
       const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
-      expect(initialCount).toBeGreaterThan(1)
 
       // Select all nodes
       await comfyPage.canvas.press('Control+a')
@@ -299,9 +303,7 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
       // After conversion, node count should decrease
       // (multiple nodes replaced by single subgraph node)
       await expect
-        .poll(() => comfyPage.nodeOps.getGraphNodesCount(), {
-          timeout: 5000
-        })
+        .poll(() => comfyPage.nodeOps.getGraphNodesCount())
         .toBeLessThan(initialCount)
     })
 

browser_tests/tests/dialog.spec.ts

@@ -17,10 +17,9 @@ test.describe('Settings', () => {
     await expect(settingsDialog).toBeVisible()
     const contentArea = settingsDialog.locator('main')
     await expect(contentArea).toBeVisible()
-    const isUsableHeight = await contentArea.evaluate(
-      (el) => el.clientHeight > 30
-    )
-    expect(isUsableHeight).toBeTruthy()
+    await expect
+      .poll(() => contentArea.evaluate((el) => el.clientHeight))
+      .toBeGreaterThan(30)
   })
 
   test('Can open settings with hotkey', async ({ comfyPage }) => {
@@ -39,27 +38,27 @@ test.describe('Settings', () => {
     const maxSpeed = 2.5
     await comfyPage.settings.setSetting('Comfy.Graph.ZoomSpeed', maxSpeed)
     await test.step('Setting should persist', async () => {
-      expect(await comfyPage.settings.getSetting('Comfy.Graph.ZoomSpeed')).toBe(
-        maxSpeed
-      )
+      await expect
+        .poll(() => comfyPage.settings.getSetting('Comfy.Graph.ZoomSpeed'))
+        .toBe(maxSpeed)
     })
   })
 
   test('Should persist keybinding setting', async ({ comfyPage }) => {
     // Open the settings dialog
     await comfyPage.page.keyboard.press('Control+,')
-    await comfyPage.page.waitForSelector('[data-testid="settings-dialog"]')
 
     // Open the keybinding tab
     const settingsDialog = comfyPage.page.locator(
       '[data-testid="settings-dialog"]'
     )
+    await expect(settingsDialog).toBeVisible()
     await settingsDialog
       .locator('nav [role="button"]', { hasText: 'Keybinding' })
       .click()
-    await comfyPage.page.waitForSelector(
-      '[placeholder="Search Keybindings..."]'
-    )
+    await expect(
+      comfyPage.page.getByPlaceholder('Search Keybindings...')
+    ).toBeVisible()
 
     // Focus the 'New Blank Workflow' row
     const newBlankWorkflowRow = comfyPage.page.locator('tr', {
@@ -156,6 +155,6 @@ test.describe('Signin dialog', () => {
     await input.press('Control+v')
     await expect(input).toHaveValue('test_password')
 
-    expect(await comfyPage.nodeOps.getNodeCount()).toBe(nodeNum)
+    await expect.poll(() => comfyPage.nodeOps.getNodeCount()).toBe(nodeNum)
   })
 })

browser_tests/tests/dialogs/managerDialog.spec.ts

@@ -0,0 +1,417 @@
+import { expect } from '@playwright/test'
+
+import type { AlgoliaNodePack } from '@/types/algoliaTypes'
+import type { components as ManagerComponents } from '@/workbench/extensions/manager/types/generatedManagerTypes'
+import type { components as RegistryComponents } from '@comfyorg/registry-types'
+
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { mockSystemStats } from '@e2e/fixtures/data/systemStats'
+
+type InstalledPacksResponse =
+  ManagerComponents['schemas']['InstalledPacksResponse']
+type RegistryNodePack = RegistryComponents['schemas']['Node']
+
+interface AlgoliaSearchResult {
+  hits: Partial<AlgoliaNodePack>[]
+  nbHits: number
+  page: number
+  nbPages: number
+  hitsPerPage: number
+}
+
+interface AlgoliaSearchResponse {
+  results: AlgoliaSearchResult[]
+}
+
+const MOCK_PACK_A: RegistryNodePack = {
+  id: 'test-pack-a',
+  name: 'Test Pack A',
+  description: 'A test custom node pack',
+  downloads: 5000,
+  status: 'NodeStatusActive',
+  publisher: { id: 'test-publisher', name: 'Test Publisher' },
+  latest_version: { version: '1.0.0', status: 'NodeVersionStatusActive' },
+  repository: 'https://github.com/test/pack-a',
+  tags: ['image', 'processing']
+}
+
+const MOCK_PACK_B: RegistryNodePack = {
+  id: 'test-pack-b',
+  name: 'Test Pack B',
+  description: 'Another test custom node pack for testing search',
+  downloads: 3000,
+  status: 'NodeStatusActive',
+  publisher: { id: 'another-publisher', name: 'Another Publisher' },
+  latest_version: { version: '2.1.0', status: 'NodeVersionStatusActive' },
+  repository: 'https://github.com/test/pack-b',
+  tags: ['video', 'generation']
+}
+
+const MOCK_PACK_C: RegistryNodePack = {
+  id: 'test-pack-c',
+  name: 'Test Pack C',
+  description: 'Third test pack',
+  downloads: 100,
+  status: 'NodeStatusActive',
+  publisher: { id: 'test-publisher', name: 'Test Publisher' },
+  latest_version: { version: '0.5.0', status: 'NodeVersionStatusActive' },
+  repository: 'https://github.com/test/pack-c'
+}
+
+const MOCK_INSTALLED_PACKS: InstalledPacksResponse = {
+  'test-pack-a': {
+    ver: '1.0.0',
+    cnr_id: 'test-pack-a',
+    enabled: true
+  },
+  'test-pack-c': {
+    ver: '0.5.0',
+    cnr_id: 'test-pack-c',
+    enabled: false
+  }
+}
+
+const MOCK_HIT_A: Partial<AlgoliaNodePack> = {
+  objectID: 'test-pack-a',
+  id: 'test-pack-a',
+  name: 'Test Pack A',
+  description: 'A test custom node pack',
+  total_install: 5000,
+  status: 'NodeStatusActive',
+  publisher_id: 'test-publisher',
+  latest_version: '1.0.0',
+  latest_version_status: 'NodeVersionStatusActive',
+  repository_url: 'https://github.com/test/pack-a',
+  comfy_nodes: ['TestNodeA1', 'TestNodeA2'],
+  create_time: '2024-01-01T00:00:00Z',
+  update_time: '2024-06-01T00:00:00Z',
+  license: 'MIT',
+  tags: ['image', 'processing']
+}
+
+const MOCK_HIT_B: Partial<AlgoliaNodePack> = {
+  objectID: 'test-pack-b',
+  id: 'test-pack-b',
+  name: 'Test Pack B',
+  description: 'Another test custom node pack for testing search',
+  total_install: 3000,
+  status: 'NodeStatusActive',
+  publisher_id: 'another-publisher',
+  latest_version: '2.1.0',
+  latest_version_status: 'NodeVersionStatusActive',
+  repository_url: 'https://github.com/test/pack-b',
+  comfy_nodes: ['TestNodeB1'],
+  create_time: '2024-02-01T00:00:00Z',
+  update_time: '2024-07-01T00:00:00Z',
+  license: 'Apache-2.0',
+  tags: ['video', 'generation']
+}
+
+const MOCK_HIT_C: Partial<AlgoliaNodePack> = {
+  objectID: 'test-pack-c',
+  id: 'test-pack-c',
+  name: 'Test Pack C',
+  description: 'Third test pack',
+  total_install: 100,
+  status: 'NodeStatusActive',
+  publisher_id: 'test-publisher',
+  latest_version: '0.5.0',
+  latest_version_status: 'NodeVersionStatusActive',
+  repository_url: 'https://github.com/test/pack-c',
+  comfy_nodes: ['TestNodeC1'],
+  create_time: '2024-03-01T00:00:00Z',
+  update_time: '2024-05-01T00:00:00Z',
+  license: 'MIT'
+}
+
+const MOCK_ALGOLIA_RESPONSE: AlgoliaSearchResponse = {
+  results: [
+    {
+      hits: [MOCK_HIT_A, MOCK_HIT_B, MOCK_HIT_C],
+      nbHits: 3,
+      page: 0,
+      nbPages: 1,
+      hitsPerPage: 20
+    }
+  ]
+}
+
+const MOCK_ALGOLIA_PACK_B_ONLY: AlgoliaSearchResponse = {
+  results: [
+    {
+      hits: [MOCK_HIT_B],
+      nbHits: 1,
+      page: 0,
+      nbPages: 1,
+      hitsPerPage: 20
+    }
+  ]
+}
+
+const MOCK_ALGOLIA_EMPTY: AlgoliaSearchResponse = {
+  results: [
+    {
+      hits: [],
+      nbHits: 0,
+      page: 0,
+      nbPages: 0,
+      hitsPerPage: 20
+    }
+  ]
+}
+
+test.describe('ManagerDialog', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    const statsWithManager = {
+      ...mockSystemStats,
+      system: {
+        ...mockSystemStats.system,
+        argv: ['main.py', '--listen', '0.0.0.0', '--enable-manager']
+      }
+    }
+    await comfyPage.page.route('**/system_stats**', async (route) => {
+      await route.fulfill({ json: statsWithManager })
+    })
+
+    await comfyPage.featureFlags.mockServerFeatures({
+      'extension.manager.supports_v4': true
+    })
+
+    await comfyPage.page.route(
+      '**/v2/customnode/installed**',
+      async (route) => {
+        await route.fulfill({ json: MOCK_INSTALLED_PACKS })
+      }
+    )
+
+    await comfyPage.page.route(
+      '**/v2/manager/queue/status**',
+      async (route) => {
+        await route.fulfill({
+          json: {
+            history: {},
+            running_queue: [],
+            pending_queue: [],
+            installed_packs: {}
+          }
+        })
+      }
+    )
+
+    await comfyPage.page.route(
+      '**/v2/manager/queue/history**',
+      async (route) => {
+        await route.fulfill({ json: {} })
+      }
+    )
+
+    await comfyPage.page.route('**/*.algolia.net/**', async (route) => {
+      await route.fulfill({ json: MOCK_ALGOLIA_RESPONSE })
+    })
+
+    await comfyPage.page.route('**/*.algolianet.com/**', async (route) => {
+      await route.fulfill({ json: MOCK_ALGOLIA_RESPONSE })
+    })
+
+    // Mock Comfy Registry API (fallback when Algolia credentials are unavailable)
+    const registryListResponse = {
+      total: 3,
+      nodes: [MOCK_PACK_A, MOCK_PACK_B, MOCK_PACK_C],
+      page: 1,
+      limit: 64,
+      totalPages: 1
+    }
+
+    await comfyPage.page.route(
+      '**/api.comfy.org/nodes/search**',
+      async (route) => {
+        await route.fulfill({ json: registryListResponse })
+      }
+    )
+
+    await comfyPage.page.route(
+      (url) => url.hostname === 'api.comfy.org' && url.pathname === '/nodes',
+      async (route) => {
+        await route.fulfill({ json: registryListResponse })
+      }
+    )
+
+    await comfyPage.page.route(
+      '**/v2/customnode/getmappings**',
+      async (route) => {
+        await route.fulfill({ json: {} })
+      }
+    )
+
+    await comfyPage.page.route(
+      '**/v2/customnode/import_fail_info**',
+      async (route) => {
+        await route.fulfill({ json: {} })
+      }
+    )
+
+    await comfyPage.setup()
+  })
+
+  async function openManagerDialog(comfyPage: ComfyPage) {
+    await comfyPage.command.executeCommand('Comfy.OpenManagerDialog')
+  }
+
+  test('Opens the manager dialog via command', async ({ comfyPage }) => {
+    await openManagerDialog(comfyPage)
+
+    const dialog = comfyPage.page.getByRole('dialog')
+    await expect(dialog).toBeVisible()
+  })
+
+  test('Displays pack cards from search results', async ({ comfyPage }) => {
+    await openManagerDialog(comfyPage)
+
+    const dialog = comfyPage.page.getByRole('dialog')
+    await expect(dialog).toBeVisible()
+
+    await expect(dialog.getByText('Test Pack A')).toBeVisible()
+    await expect(dialog.getByText('Test Pack B')).toBeVisible()
+    await expect(dialog.getByText('Test Pack C')).toBeVisible()
+  })
+
+  test('Search filters displayed packs', async ({ comfyPage }) => {
+    await comfyPage.page.route('**/*.algolia.net/**', async (route) => {
+      await route.fulfill({ json: MOCK_ALGOLIA_PACK_B_ONLY })
+    })
+    await comfyPage.page.route('**/*.algolianet.com/**', async (route) => {
+      await route.fulfill({ json: MOCK_ALGOLIA_PACK_B_ONLY })
+    })
+    await comfyPage.page.route(
+      '**/api.comfy.org/nodes/search**',
+      async (route) => {
+        await route.fulfill({
+          json: {
+            total: 1,
+            nodes: [MOCK_PACK_B],
+            page: 1,
+            limit: 64,
+            totalPages: 1
+          }
+        })
+      }
+    )
+
+    await openManagerDialog(comfyPage)
+
+    const dialog = comfyPage.page.getByRole('dialog')
+    await expect(dialog).toBeVisible()
+
+    const searchInput = dialog.getByPlaceholder(/search/i)
+    await searchInput.fill('Test Pack B')
+
+    await expect(dialog.getByText('Test Pack B')).toBeVisible()
+    await expect(dialog.getByText('Test Pack A')).not.toBeVisible()
+  })
+
+  test('Clicking a pack card opens the info panel', async ({ comfyPage }) => {
+    await comfyPage.page.route(
+      '**/api.comfy.org/nodes/test-pack-a',
+      async (route) => {
+        await route.fulfill({ json: MOCK_PACK_A })
+      }
+    )
+
+    await openManagerDialog(comfyPage)
+
+    const dialog = comfyPage.page.getByRole('dialog')
+    await expect(dialog).toBeVisible()
+
+    await dialog.getByText('Test Pack A').first().click()
+
+    await expect(dialog.getByText('Test Publisher').first()).toBeVisible()
+  })
+
+  test('Left side panel navigation tabs exist', async ({ comfyPage }) => {
+    await openManagerDialog(comfyPage)
+
+    const dialog = comfyPage.page.getByRole('dialog')
+    await expect(dialog).toBeVisible()
+
+    const nav = dialog.locator('nav')
+    await expect(nav.getByText('All Extensions')).toBeVisible()
+    await expect(nav.getByText('Not Installed')).toBeVisible()
+    await expect(nav.getByText('All Installed')).toBeVisible()
+    await expect(nav.getByText('Updates Available')).toBeVisible()
+  })
+
+  test('Switching tabs changes the content view', async ({ comfyPage }) => {
+    await openManagerDialog(comfyPage)
+
+    const dialog = comfyPage.page.getByRole('dialog')
+    await expect(dialog).toBeVisible()
+
+    const nav = dialog.locator('nav')
+    await nav.getByText('All Installed').click()
+
+    await expect(dialog.getByText('Test Pack A')).toBeVisible()
+  })
+
+  test('Closes via Escape key', async ({ comfyPage }) => {
+    await openManagerDialog(comfyPage)
+
+    const dialog = comfyPage.page.getByRole('dialog')
+    await expect(dialog).toBeVisible()
+
+    await comfyPage.page.keyboard.press('Escape')
+    await expect(dialog).not.toBeVisible()
+  })
+
+  test('Empty search shows no results message', async ({ comfyPage }) => {
+    await comfyPage.page.route('**/*.algolia.net/**', async (route) => {
+      await route.fulfill({ json: MOCK_ALGOLIA_EMPTY })
+    })
+    await comfyPage.page.route('**/*.algolianet.com/**', async (route) => {
+      await route.fulfill({ json: MOCK_ALGOLIA_EMPTY })
+    })
+    await comfyPage.page.route(
+      '**/api.comfy.org/nodes/search**',
+      async (route) => {
+        await route.fulfill({
+          json: {
+            total: 0,
+            nodes: [],
+            page: 1,
+            limit: 64,
+            totalPages: 0
+          }
+        })
+      }
+    )
+
+    await openManagerDialog(comfyPage)
+
+    const dialog = comfyPage.page.getByRole('dialog')
+    await expect(dialog).toBeVisible()
+
+    const searchInput = dialog.getByPlaceholder(/search/i)
+    await searchInput.fill('nonexistent-pack-xyz-999')
+
+    await expect(
+      dialog.getByText(/no results found|try a different search/i).first()
+    ).toBeVisible()
+  })
+
+  test('Search mode can be switched between packs and nodes', async ({
+    comfyPage
+  }) => {
+    await openManagerDialog(comfyPage)
+
+    const dialog = comfyPage.page.getByRole('dialog')
+    await expect(dialog).toBeVisible()
+
+    const modeSelector = dialog.getByText('Node Pack').first()
+    await expect(modeSelector).toBeVisible()
+
+    await modeSelector.click()
+    const nodesOption = comfyPage.page.getByRole('option', { name: 'Nodes' })
+    await expect(nodesOption).toBeVisible()
+    await nodesOption.click()
+  })
+})

browser_tests/tests/dialogs/settingsDialog.spec.ts

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
-import { mockSystemStats } from '../../fixtures/data/systemStats'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { mockSystemStats } from '@e2e/fixtures/data/systemStats'
 
 const MOCK_COMFYUI_VERSION = '9.99.0-e2e-test'
 
@@ -145,15 +145,20 @@ test.describe('Settings dialog', { tag: '@ui' }, () => {
       const settingRow = dialog.root.locator(`[data-setting-id="${settingId}"]`)
       await expect(settingRow).toBeVisible()
 
-      // Click the PrimeVue Select to open the dropdown
-      await settingRow.locator('.p-select').click()
-      const overlay = comfyPage.page.locator('.p-select-overlay')
-      await expect(overlay).toBeVisible()
+      // Open the dropdown via its combobox role and verify it expanded.
+      // Retry because the PrimeVue Select may re-render during search
+      // filtering, causing the first click to land on a stale element.
+      const select = settingRow.getByRole('combobox')
+      await expect(async () => {
+        const expanded = await select.getAttribute('aria-expanded')
+        if (expanded !== 'true') await select.click()
+        await expect(select).toHaveAttribute('aria-expanded', 'true')
+      }).toPass({ timeout: 5000 })
 
       // Pick the option that is not the current value
       const targetValue = initialValue === 'Top' ? 'Disabled' : 'Top'
-      await overlay
-        .locator(`.p-select-option-label:text-is("${targetValue}")`)
+      await comfyPage.page
+        .getByRole('option', { name: targetValue, exact: true })
         .click()
 
       await expect

browser_tests/tests/dialogs/shareWorkflowDialog.spec.ts

@@ -0,0 +1,352 @@
+import type { Page } from '@playwright/test'
+import { expect } from '@playwright/test'
+
+import type { AssetInfo } from '@/schemas/apiSchema'
+import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+
+interface PublishRecord {
+  workflow_id: string
+  share_id: string | null
+  listed: boolean
+  publish_time: string | null
+}
+
+const PUBLISHED_RECORD: PublishRecord = {
+  workflow_id: 'wf-1',
+  share_id: 'share-abc',
+  listed: false,
+  publish_time: new Date(Date.now() + 60_000).toISOString()
+}
+
+const PRIVATE_ASSET: AssetInfo = {
+  id: 'asset-1',
+  name: 'photo.png',
+  preview_url: '',
+  storage_url: '',
+  model: false,
+  public: false,
+  in_library: false
+}
+
+const test = comfyPageFixture
+
+/**
+ * Enable the workflow_sharing_enabled server feature flag at runtime.
+ * FeatureFlagHelper.mockServerFeatures() intercepts `/api/features` but the
+ * flags are already loaded by the time tests run, so direct mutation of the
+ * reactive ref is the only reliable approach for server-side flags.
+ */
+async function enableWorkflowSharing(page: Page): Promise<void> {
+  await page.evaluate(() => {
+    const api = window.app!.api
+    api.serverFeatureFlags.value = {
+      ...api.serverFeatureFlags.value,
+      workflow_sharing_enabled: true
+    }
+  })
+}
+
+async function mockPublishStatus(
+  page: Page,
+  record: PublishRecord | null
+): Promise<void> {
+  await page.route('**/api/userdata/*/publish', async (route) => {
+    if (route.request().method() === 'GET') {
+      if (!record || !record.share_id) {
+        await route.fulfill({ status: 404, body: 'Not found' })
+      } else {
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify(record)
+        })
+      }
+    } else {
+      await route.fallback()
+    }
+  })
+}
+
+async function mockPublishWorkflow(
+  page: Page,
+  result: PublishRecord
+): Promise<void> {
+  await page.route('**/api/userdata/*/publish', async (route) => {
+    if (route.request().method() === 'POST') {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(result)
+      })
+    } else {
+      await route.fallback()
+    }
+  })
+}
+
+async function mockShareableAssets(
+  page: Page,
+  assets: AssetInfo[] = []
+): Promise<void> {
+  await page.route('**/api/assets/from-workflow', async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ assets })
+    })
+  })
+}
+
+/**
+ * Dismiss stale PrimeVue dialog masks left by cloud-mode's onboarding flow
+ * or auth-triggered modals by pressing Escape until they clear.
+ */
+async function dismissOverlays(page: Page): Promise<void> {
+  const mask = page.locator('.p-dialog-mask')
+  for (let attempt = 0; attempt < 3; attempt++) {
+    if ((await mask.count()) === 0) break
+    await page.keyboard.press('Escape')
+    await mask
+      .first()
+      .waitFor({ state: 'hidden', timeout: 2000 })
+      .catch(() => {})
+  }
+}
+
+/**
+ * Save the active workflow via the topbar Save menu action.
+ * Mocks the userdata POST endpoint to avoid real server calls in tests.
+ */
+async function saveAndWait(
+  comfyPage: {
+    page: Page
+    menu: { topbar: { saveWorkflow: (name: string) => Promise<void> } }
+  },
+  workflowName: string
+): Promise<void> {
+  const filename =
+    workflowName + (workflowName.endsWith('.json') ? '' : '.json')
+  await comfyPage.page.route(
+    /\/api\/userdata\/workflows(%2F|\/).*$/,
+    async (route) => {
+      if (route.request().method() === 'POST') {
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({
+            path: `workflows/${filename}`,
+            size: 1024,
+            modified: Date.now()
+          })
+        })
+      } else {
+        await route.fallback()
+      }
+    }
+  )
+
+  await comfyPage.menu.topbar.saveWorkflow(workflowName)
+}
+
+async function openShareDialog(page: Page): Promise<void> {
+  await enableWorkflowSharing(page)
+  await dismissOverlays(page)
+  const shareButton = page.getByRole('button', { name: 'Share workflow' })
+  await shareButton.click()
+}
+
+function getShareDialog(page: Page) {
+  return page.getByRole('dialog')
+}
+
+test.describe('Share Workflow Dialog', { tag: '@cloud' }, () => {
+  test('should show unsaved state for a new workflow', async ({
+    comfyPage
+  }) => {
+    const { page } = comfyPage
+
+    await mockPublishStatus(page, null)
+    await mockShareableAssets(page)
+    await openShareDialog(page)
+
+    const dialog = getShareDialog(page)
+    await expect(dialog).toBeVisible()
+    await expect(
+      dialog.getByRole('button', { name: /save workflow/i })
+    ).toBeVisible()
+  })
+
+  test('should show ready state with create link button', async ({
+    comfyPage
+  }) => {
+    const { page } = comfyPage
+    const workflowName = 'share-test-ready'
+
+    await saveAndWait(comfyPage, workflowName)
+
+    await mockPublishStatus(page, null)
+    await mockShareableAssets(page)
+    await openShareDialog(page)
+
+    const dialog = getShareDialog(page)
+    await expect(dialog).toBeVisible()
+    await expect(
+      dialog.getByRole('button', { name: /create a link/i })
+    ).toBeVisible()
+  })
+
+  test('should show shared state with copy URL after publishing', async ({
+    comfyPage
+  }) => {
+    const { page } = comfyPage
+    const workflowName = 'share-test-shared'
+
+    await saveAndWait(comfyPage, workflowName)
+
+    await mockPublishStatus(page, PUBLISHED_RECORD)
+    await mockShareableAssets(page)
+    await openShareDialog(page)
+
+    const dialog = getShareDialog(page)
+    await expect(dialog).toBeVisible()
+    await expect(
+      dialog.getByRole('textbox', { name: /share.*url/i })
+    ).toBeVisible()
+  })
+
+  test('should show stale state with update link button', async ({
+    comfyPage
+  }) => {
+    const { page } = comfyPage
+    const workflowName = 'share-test-stale'
+
+    await saveAndWait(comfyPage, workflowName)
+
+    const staleRecord: PublishRecord = {
+      ...PUBLISHED_RECORD,
+      publish_time: '2020-01-01T00:00:00Z'
+    }
+
+    await mockPublishStatus(page, staleRecord)
+    await mockShareableAssets(page)
+    await openShareDialog(page)
+
+    const dialog = getShareDialog(page)
+    await expect(dialog).toBeVisible()
+    await expect(
+      dialog.getByRole('button', { name: /update\s+link/i })
+    ).toBeVisible()
+  })
+
+  test('should close dialog when close button is clicked', async ({
+    comfyPage
+  }) => {
+    const { page } = comfyPage
+
+    await mockPublishStatus(page, null)
+    await mockShareableAssets(page)
+    await openShareDialog(page)
+
+    const dialog = getShareDialog(page)
+    await expect(dialog).toBeVisible()
+
+    await dialog.getByRole('button', { name: /close/i }).click()
+    await expect(dialog).toBeHidden()
+  })
+
+  test('should create link and transition to shared state', async ({
+    comfyPage
+  }) => {
+    const { page } = comfyPage
+    const workflowName = 'share-test-create'
+
+    await saveAndWait(comfyPage, workflowName)
+
+    await mockPublishStatus(page, null)
+    await mockShareableAssets(page)
+    await mockPublishWorkflow(page, PUBLISHED_RECORD)
+    await openShareDialog(page)
+
+    const dialog = getShareDialog(page)
+    const createButton = dialog.getByRole('button', { name: /create a link/i })
+    await expect(createButton).toBeVisible()
+    await createButton.click()
+
+    await expect(
+      dialog.getByRole('textbox', { name: /share.*url/i })
+    ).toBeVisible()
+  })
+
+  test('should show tab buttons when comfyHubUploadEnabled is true', async ({
+    comfyPage
+  }) => {
+    const { page } = comfyPage
+
+    await page.evaluate(() => {
+      const api = window.app!.api
+      api.serverFeatureFlags.value = {
+        ...api.serverFeatureFlags.value,
+        comfyhub_upload_enabled: true
+      }
+    })
+
+    await mockPublishStatus(page, null)
+    await mockShareableAssets(page)
+    await openShareDialog(page)
+
+    const dialog = getShareDialog(page)
+    await expect(dialog).toBeVisible()
+    await expect(dialog.getByRole('tab', { name: /share/i })).toBeVisible()
+    await expect(dialog.getByRole('tab', { name: /publish/i })).toBeVisible()
+  })
+
+  test('should switch between share link and publish tabs', async ({
+    comfyPage
+  }) => {
+    const { page } = comfyPage
+
+    await page.evaluate(() => {
+      const api = window.app!.api
+      api.serverFeatureFlags.value = {
+        ...api.serverFeatureFlags.value,
+        comfyhub_upload_enabled: true
+      }
+    })
+
+    await mockPublishStatus(page, null)
+    await mockShareableAssets(page)
+    await openShareDialog(page)
+
+    const dialog = getShareDialog(page)
+    await expect(dialog).toBeVisible()
+
+    await dialog.getByRole('tab', { name: /publish/i }).click()
+
+    const publishPanel = dialog.getByTestId(TestIds.dialogs.publishTabPanel)
+    await expect(publishPanel).toBeVisible()
+
+    await dialog.getByRole('tab', { name: /share/i }).click()
+    await expect(publishPanel).toBeHidden()
+  })
+
+  test('should require acknowledgment before publishing private assets', async ({
+    comfyPage
+  }) => {
+    const { page } = comfyPage
+    const workflowName = 'share-test-ack'
+
+    await saveAndWait(comfyPage, workflowName)
+
+    await mockPublishStatus(page, null)
+    await mockShareableAssets(page, [PRIVATE_ASSET])
+    await openShareDialog(page)
+
+    const dialog = getShareDialog(page)
+    const createButton = dialog.getByRole('button', { name: /create a link/i })
+    await expect(createButton).toBeDisabled()
+
+    await dialog.getByRole('checkbox').check()
+    await expect(createButton).toBeEnabled()
+  })
+})

browser_tests/tests/domWidget.spec.ts

@@ -35,14 +35,14 @@ test.describe('DOM Widget', { tag: '@widget' }, () => {
     async ({ comfyPage }) => {
       await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
       await comfyPage.command.executeCommand('Workspace.ToggleFocusMode')
-      await comfyPage.nextFrame()
+      await expect(comfyPage.menu.sideToolbar).not.toBeVisible()
       await expect(comfyPage.canvas).toHaveScreenshot('focus-mode-on.png')
     }
   )
 
   // No DOM widget should be created by creation of interim LGraphNode objects.
   test('Copy node with DOM widget by dragging + alt', async ({ comfyPage }) => {
-    const initialCount = await comfyPage.getDOMWidgetCount()
+    const initialCount = await comfyPage.domWidgets.count()
 
     // TextEncodeNode1
     await comfyPage.page.mouse.move(618, 191)
@@ -52,7 +52,6 @@ test.describe('DOM Widget', { tag: '@widget' }, () => {
     await comfyPage.page.mouse.up()
     await comfyPage.page.keyboard.up('Alt')
 
-    const finalCount = await comfyPage.getDOMWidgetCount()
-    expect(finalCount).toBe(initialCount + 1)
+    await expect(comfyPage.domWidgets).toHaveCount(initialCount + 1)
   })
 })

browser_tests/tests/errorDialog.spec.ts

@@ -100,8 +100,9 @@ test.describe('Error dialog', () => {
     await errorDialog.getByTestId(TestIds.dialogs.errorDialogCopyReport).click()
 
     const reportText = await errorDialog.locator('pre').textContent()
-    const copiedText = await getClipboardText(comfyPage.page)
-    expect(copiedText).toBe(reportText)
+    await expect
+      .poll(async () => await getClipboardText(comfyPage.page))
+      .toBe(reportText)
   })
 
   test('Should open GitHub issues search when "Find Issues" is clicked', async ({

browser_tests/tests/errorOverlay.spec.ts

@@ -47,11 +47,16 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
     test('Should display "Show missing models" button for missing model errors', async ({
       comfyPage
     }) => {
-      const cleanupOk = await comfyPage.page.evaluate(async (url: string) => {
-        const response = await fetch(`${url}/api/devtools/cleanup_fake_model`)
-        return response.ok
-      }, comfyPage.url)
-      expect(cleanupOk).toBeTruthy()
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(async (url: string) => {
+            const response = await fetch(
+              `${url}/api/devtools/cleanup_fake_model`
+            )
+            return response.ok
+          }, comfyPage.url)
+        )
+        .toBeTruthy()
 
       await comfyPage.workflow.loadWorkflow('missing/missing_models')
 
@@ -107,10 +112,10 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
       await comfyPage.nextFrame()
 
       await comfyPage.keyboard.undo()
-      await expect(errorOverlay).not.toBeVisible({ timeout: 5000 })
+      await expect(errorOverlay).not.toBeVisible()
 
       await comfyPage.keyboard.redo()
-      await expect(errorOverlay).not.toBeVisible({ timeout: 5000 })
+      await expect(errorOverlay).not.toBeVisible()
     })
   })
 
@@ -151,6 +156,7 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
 
       await overlay.getByTestId(TestIds.dialogs.errorOverlaySeeErrors).click()
 
+      await expect(overlay).not.toBeVisible()
       await expect(comfyPage.page.getByTestId('properties-panel')).toBeVisible()
     })
 

browser_tests/tests/execution.spec.ts

@@ -49,18 +49,28 @@ test.describe(
       const input = await comfyPage.nodeOps.getNodeRefById(3)
       const output1 = await comfyPage.nodeOps.getNodeRefById(1)
       const output2 = await comfyPage.nodeOps.getNodeRefById(4)
-      expect(await (await input.getWidget(0)).getValue()).toBe('foo')
-      expect(await (await output1.getWidget(0)).getValue()).toBe('')
-      expect(await (await output2.getWidget(0)).getValue()).toBe('')
+      await expect
+        .poll(async () => (await input.getWidget(0)).getValue())
+        .toBe('foo')
+      await expect
+        .poll(async () => (await output1.getWidget(0)).getValue())
+        .toBe('')
+      await expect
+        .poll(async () => (await output2.getWidget(0)).getValue())
+        .toBe('')
 
       await output1.click('title')
 
       await comfyPage.command.executeCommand('Comfy.QueueSelectedOutputNodes')
-      await expect(async () => {
-        expect(await (await input.getWidget(0)).getValue()).toBe('foo')
-        expect(await (await output1.getWidget(0)).getValue()).toBe('foo')
-        expect(await (await output2.getWidget(0)).getValue()).toBe('')
-      }).toPass({ timeout: 2_000 })
+      await expect
+        .poll(async () => (await input.getWidget(0)).getValue())
+        .toBe('foo')
+      await expect
+        .poll(async () => (await output1.getWidget(0)).getValue())
+        .toBe('foo')
+      await expect
+        .poll(async () => (await output2.getWidget(0)).getValue())
+        .toBe('')
     })
   }
 )

browser_tests/tests/extensionAPI.spec.ts

@@ -40,7 +40,9 @@ test.describe('Topbar commands', () => {
     })
 
     await comfyPage.menu.topbar.triggerTopbarCommand(['ext', 'foo-command'])
-    expect(await comfyPage.page.evaluate(() => window.foo)).toBe(true)
+    await expect
+      .poll(() => comfyPage.page.evaluate(() => window.foo))
+      .toBe(true)
   })
 
   test('Should not allow register command defined in other extension', async ({
@@ -60,7 +62,7 @@ test.describe('Topbar commands', () => {
     })
 
     const menuItem = comfyPage.menu.topbar.getMenuItem('ext')
-    expect(await menuItem.count()).toBe(0)
+    await expect(menuItem).toHaveCount(0)
   })
 
   test('Should allow registering keybindings', async ({ comfyPage }) => {
@@ -86,7 +88,9 @@ test.describe('Topbar commands', () => {
     })
 
     await comfyPage.page.keyboard.press('k')
-    expect(await comfyPage.page.evaluate(() => window.TestCommand)).toBe(true)
+    await expect
+      .poll(() => comfyPage.page.evaluate(() => window.TestCommand))
+      .toBe(true)
   })
 
   test.describe('Settings', () => {
@@ -109,16 +113,20 @@ test.describe('Topbar commands', () => {
         })
       })
       // onChange is called when the setting is first added
-      expect(await comfyPage.page.evaluate(() => window.changeCount)).toBe(1)
-      expect(await comfyPage.settings.getSetting('TestSetting')).toBe(
-        'Hello, world!'
-      )
+      await expect
+        .poll(() => comfyPage.page.evaluate(() => window.changeCount))
+        .toBe(1)
+      await expect
+        .poll(() => comfyPage.settings.getSetting('TestSetting'))
+        .toBe('Hello, world!')
 
       await comfyPage.settings.setSetting('TestSetting', 'Hello, universe!')
-      expect(await comfyPage.settings.getSetting('TestSetting')).toBe(
-        'Hello, universe!'
-      )
-      expect(await comfyPage.page.evaluate(() => window.changeCount)).toBe(2)
+      await expect
+        .poll(() => comfyPage.settings.getSetting('TestSetting'))
+        .toBe('Hello, universe!')
+      await expect
+        .poll(() => comfyPage.page.evaluate(() => window.changeCount))
+        .toBe(2)
     })
 
     test('Should allow setting boolean settings', async ({ comfyPage }) => {
@@ -140,17 +148,21 @@ test.describe('Topbar commands', () => {
         })
       })
 
-      expect(await comfyPage.settings.getSetting('Comfy.TestSetting')).toBe(
-        false
-      )
-      expect(await comfyPage.page.evaluate(() => window.changeCount)).toBe(1)
+      await expect
+        .poll(() => comfyPage.settings.getSetting('Comfy.TestSetting'))
+        .toBe(false)
+      await expect
+        .poll(() => comfyPage.page.evaluate(() => window.changeCount))
+        .toBe(1)
 
       await comfyPage.settingDialog.open()
       await comfyPage.settingDialog.toggleBooleanSetting('Comfy.TestSetting')
-      expect(await comfyPage.settings.getSetting('Comfy.TestSetting')).toBe(
-        true
-      )
-      expect(await comfyPage.page.evaluate(() => window.changeCount)).toBe(2)
+      await expect
+        .poll(() => comfyPage.settings.getSetting('Comfy.TestSetting'))
+        .toBe(true)
+      await expect
+        .poll(() => comfyPage.page.evaluate(() => window.changeCount))
+        .toBe(2)
     })
 
     test.describe('Passing through attrs to setting components', () => {
@@ -228,12 +240,15 @@ test.describe('Topbar commands', () => {
             .getByText('TestSetting Test')
             .locator(selector)
 
-          const isDisabled = await component.evaluate((el) =>
-            el.tagName === 'INPUT'
-              ? (el as HTMLInputElement).disabled
-              : el.classList.contains('p-disabled')
-          )
-          expect(isDisabled).toBe(true)
+          await expect
+            .poll(() =>
+              component.evaluate((el) =>
+                el.tagName === 'INPUT'
+                  ? (el as HTMLInputElement).disabled
+                  : el.classList.contains('p-disabled')
+              )
+            )
+            .toBe(true)
         })
       }
     })
@@ -258,7 +273,7 @@ test.describe('Topbar commands', () => {
       await comfyPage.settingDialog.goToAboutPanel()
       const badge = comfyPage.page.locator('.about-badge').last()
       expect(badge).toBeDefined()
-      expect(await badge.textContent()).toContain('Test Badge')
+      await expect(badge).toContainText('Test Badge')
     })
   })
 
@@ -276,11 +291,13 @@ test.describe('Topbar commands', () => {
       })
 
       await comfyPage.nodeOps.fillPromptDialog('Hello, world!')
-      expect(
-        await comfyPage.page.evaluate(
-          () => (window as unknown as Record<string, unknown>)['value']
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(
+            () => (window as unknown as Record<string, unknown>)['value']
+          )
         )
-      ).toBe('Hello, world!')
+        .toBe('Hello, world!')
     })
 
     test('Should allow showing a confirmation dialog', async ({
@@ -298,11 +315,13 @@ test.describe('Topbar commands', () => {
       })
 
       await comfyPage.confirmDialog.click('confirm')
-      expect(
-        await comfyPage.page.evaluate(
-          () => (window as unknown as Record<string, unknown>)['value']
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(
+            () => (window as unknown as Record<string, unknown>)['value']
+          )
         )
-      ).toBe(true)
+        .toBe(true)
     })
 
     test('Should allow dismissing a dialog', async ({ comfyPage }) => {
@@ -319,11 +338,13 @@ test.describe('Topbar commands', () => {
       })
 
       await comfyPage.confirmDialog.click('reject')
-      expect(
-        await comfyPage.page.evaluate(
-          () => (window as unknown as Record<string, unknown>)['value']
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(
+            () => (window as unknown as Record<string, unknown>)['value']
+          )
         )
-      ).toBeNull()
+        .toBeNull()
     })
   })
 
@@ -363,14 +384,16 @@ test.describe('Topbar commands', () => {
       )
       await toolboxButton.click()
 
-      expect(
-        await comfyPage.page.evaluate(
-          () =>
-            (window as unknown as Record<string, unknown>)[
-              'selectionCommandExecuted'
-            ]
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(
+            () =>
+              (window as unknown as Record<string, unknown>)[
+                'selectionCommandExecuted'
+              ]
+          )
         )
-      ).toBe(true)
+        .toBe(true)
     })
   })
 })

browser_tests/tests/featureFlags.spec.ts

@@ -59,31 +59,30 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
       { timeout: 10000 }
     )
 
-    // Get the captured messages
-    const messages = await newPage.evaluate(() => window.__capturedMessages)
-
     // Verify client sent feature flags
-    expect(messages!.clientFeatureFlags).toBeTruthy()
-    expect(messages!.clientFeatureFlags).toHaveProperty('type', 'feature_flags')
-    expect(messages!.clientFeatureFlags).toHaveProperty('data')
-    expect(messages!.clientFeatureFlags!.data).toHaveProperty(
-      'supports_preview_metadata'
-    )
-    expect(
-      typeof messages!.clientFeatureFlags!.data.supports_preview_metadata
-    ).toBe('boolean')
+    await expect(async () => {
+      const flags = await newPage.evaluate(
+        () => window.__capturedMessages?.clientFeatureFlags
+      )
+      expect(flags).not.toBeNull()
+      expect(flags?.type).toBe('feature_flags')
+      expect(flags?.data).not.toBeNull()
+      expect(flags?.data).toHaveProperty('supports_preview_metadata')
+      expect(typeof flags?.data?.supports_preview_metadata).toBe('boolean')
+    }).toPass()
 
     // Verify server sent feature flags back
-    expect(messages!.serverFeatureFlags).toBeTruthy()
-    expect(messages!.serverFeatureFlags).toHaveProperty(
-      'supports_preview_metadata'
-    )
-    expect(typeof messages!.serverFeatureFlags!.supports_preview_metadata).toBe(
-      'boolean'
-    )
-    expect(messages!.serverFeatureFlags).toHaveProperty('max_upload_size')
-    expect(typeof messages!.serverFeatureFlags!.max_upload_size).toBe('number')
-    expect(Object.keys(messages!.serverFeatureFlags!).length).toBeGreaterThan(0)
+    await expect(async () => {
+      const flags = await newPage.evaluate(
+        () => window.__capturedMessages?.serverFeatureFlags
+      )
+      expect(flags).not.toBeNull()
+      expect(flags).toHaveProperty('supports_preview_metadata')
+      expect(typeof flags?.supports_preview_metadata).toBe('boolean')
+      expect(flags).toHaveProperty('max_upload_size')
+      expect(typeof flags?.max_upload_size).toBe('number')
+      expect(Object.keys(flags ?? {}).length).toBeGreaterThan(0)
+    }).toPass()
 
     await newPage.close()
   })
@@ -91,37 +90,44 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
   test('Server feature flags are received and accessible', async ({
     comfyPage
   }) => {
-    // Get the actual server feature flags from the backend
-    const serverFlags = await comfyPage.page.evaluate(() => {
-      return window.app!.api.serverFeatureFlags.value
-    })
-
     // Verify we received real feature flags from the backend
-    expect(serverFlags).toBeTruthy()
-    expect(Object.keys(serverFlags).length).toBeGreaterThan(0)
-
-    // The backend should send feature flags
-    expect(serverFlags).toHaveProperty('supports_preview_metadata')
-    expect(typeof serverFlags.supports_preview_metadata).toBe('boolean')
-    expect(serverFlags).toHaveProperty('max_upload_size')
-    expect(typeof serverFlags.max_upload_size).toBe('number')
+    await expect(async () => {
+      const flags = await comfyPage.page.evaluate(
+        () => window.app!.api.serverFeatureFlags.value
+      )
+      expect(flags).not.toBeNull()
+      expect(Object.keys(flags).length).toBeGreaterThan(0)
+      // The backend should send feature flags
+      expect(flags).toHaveProperty('supports_preview_metadata')
+      expect(typeof flags.supports_preview_metadata).toBe('boolean')
+      expect(flags).toHaveProperty('max_upload_size')
+      expect(typeof flags.max_upload_size).toBe('number')
+    }).toPass()
   })
 
   test('serverSupportsFeature method works with real backend flags', async ({
     comfyPage
   }) => {
     // Test serverSupportsFeature with real backend flags
-    const supportsPreviewMetadata = await comfyPage.page.evaluate(() => {
-      return window.app!.api.serverSupportsFeature('supports_preview_metadata')
-    })
-    // The method should return a boolean based on the backend's value
-    expect(typeof supportsPreviewMetadata).toBe('boolean')
+    await expect
+      .poll(() =>
+        comfyPage.page.evaluate(
+          () =>
+            typeof window.app!.api.serverSupportsFeature(
+              'supports_preview_metadata'
+            )
+        )
+      )
+      .toBe('boolean')
 
     // Test non-existent feature - should always return false
-    const supportsNonExistent = await comfyPage.page.evaluate(() => {
-      return window.app!.api.serverSupportsFeature('non_existent_feature_xyz')
-    })
-    expect(supportsNonExistent).toBe(false)
+    await expect
+      .poll(() =>
+        comfyPage.page.evaluate(() =>
+          window.app!.api.serverSupportsFeature('non_existent_feature_xyz')
+        )
+      )
+      .toBe(false)
 
     // Test that the method only returns true for boolean true values
     const testResults = await comfyPage.page.evaluate(() => {
@@ -160,41 +166,51 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
     comfyPage
   }) => {
     // Test getServerFeature method
-    const previewMetadataValue = await comfyPage.page.evaluate(() => {
-      return window.app!.api.getServerFeature('supports_preview_metadata')
-    })
-    expect(typeof previewMetadataValue).toBe('boolean')
+    await expect
+      .poll(() =>
+        comfyPage.page.evaluate(
+          () =>
+            typeof window.app!.api.getServerFeature('supports_preview_metadata')
+        )
+      )
+      .toBe('boolean')
 
     // Test getting max_upload_size
-    const maxUploadSize = await comfyPage.page.evaluate(() => {
-      return window.app!.api.getServerFeature('max_upload_size')
-    })
-    expect(typeof maxUploadSize).toBe('number')
-    expect(maxUploadSize).toBeGreaterThan(0)
+    await expect(async () => {
+      const maxUpload = await comfyPage.page.evaluate(() =>
+        window.app!.api.getServerFeature('max_upload_size')
+      )
+      expect(typeof maxUpload).toBe('number')
+      expect(maxUpload as number).toBeGreaterThan(0)
+    }).toPass()
 
     // Test getServerFeature with default value for non-existent feature
-    const defaultValue = await comfyPage.page.evaluate(() => {
-      return window.app!.api.getServerFeature(
-        'non_existent_feature_xyz',
-        'default'
+    await expect
+      .poll(() =>
+        comfyPage.page.evaluate(() =>
+          window.app!.api.getServerFeature(
+            'non_existent_feature_xyz',
+            'default'
+          )
+        )
       )
-    })
-    expect(defaultValue).toBe('default')
+      .toBe('default')
   })
 
   test('getServerFeatures returns all backend feature flags', async ({
     comfyPage
   }) => {
     // Test getServerFeatures returns all flags
-    const allFeatures = await comfyPage.page.evaluate(() => {
-      return window.app!.api.getServerFeatures()
-    })
-
-    expect(allFeatures).toBeTruthy()
-    expect(allFeatures).toHaveProperty('supports_preview_metadata')
-    expect(typeof allFeatures.supports_preview_metadata).toBe('boolean')
-    expect(allFeatures).toHaveProperty('max_upload_size')
-    expect(Object.keys(allFeatures).length).toBeGreaterThan(0)
+    await expect(async () => {
+      const features = await comfyPage.page.evaluate(() =>
+        window.app!.api.getServerFeatures()
+      )
+      expect(features).not.toBeNull()
+      expect(features).toHaveProperty('supports_preview_metadata')
+      expect(typeof features.supports_preview_metadata).toBe('boolean')
+      expect(features).toHaveProperty('max_upload_size')
+      expect(Object.keys(features).length).toBeGreaterThan(0)
+    }).toPass()
   })
 
   test('Client feature flags are immutable', async ({ comfyPage }) => {
@@ -324,26 +340,22 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
       }
     )
 
-    // Get readiness state
-    const readiness = await newPage.evaluate(() => {
-      return {
-        ...window.__appReadiness,
-        currentFlags: window.app!.api.serverFeatureFlags.value
-      }
-    })
-
     // Verify feature flags are available
-    expect(readiness.currentFlags).toHaveProperty('supports_preview_metadata')
-    expect(typeof readiness.currentFlags.supports_preview_metadata).toBe(
-      'boolean'
-    )
-    expect(readiness.currentFlags).toHaveProperty('max_upload_size')
+    await expect(async () => {
+      const flags = await newPage.evaluate(
+        () => window.app!.api.serverFeatureFlags.value
+      )
+      expect(flags).toHaveProperty('supports_preview_metadata')
+      expect(typeof flags?.supports_preview_metadata).toBe('boolean')
+      expect(flags).toHaveProperty('max_upload_size')
+    }).toPass()
 
-    // Verify feature flags were received (we detected them via polling)
-    expect(readiness.featureFlagsReceived).toBe(true)
-
-    // Verify API was initialized (feature flags require API)
-    expect(readiness.apiInitialized).toBe(true)
+    // Verify feature flags were received and API was initialized
+    await expect(async () => {
+      const readiness = await newPage.evaluate(() => window.__appReadiness)
+      expect(readiness?.featureFlagsReceived).toBe(true)
+      expect(readiness?.apiInitialized).toBe(true)
+    }).toPass()
 
     await newPage.close()
   })

browser_tests/tests/focusMode.spec.ts

@@ -29,11 +29,9 @@ test.describe('Focus Mode', { tag: '@ui' }, () => {
     await expect(comfyPage.menu.sideToolbar).toBeVisible()
 
     await comfyPage.command.executeCommand('Workspace.ToggleFocusMode')
-    await comfyPage.nextFrame()
     await expect(comfyPage.menu.sideToolbar).not.toBeVisible()
 
     await comfyPage.command.executeCommand('Workspace.ToggleFocusMode')
-    await comfyPage.nextFrame()
     await expect(comfyPage.menu.sideToolbar).toBeVisible()
   })
 

browser_tests/tests/graph.spec.ts

@@ -11,17 +11,19 @@ test.describe('Graph', { tag: ['@smoke', '@canvas'] }, () => {
   // Ref: https://github.com/Comfy-Org/ComfyUI_frontend/issues/3348
   test('Fix link input slots', async ({ comfyPage }) => {
     await comfyPage.workflow.loadWorkflow('inputs/input_order_swap')
-    expect(
-      await comfyPage.page.evaluate(() => {
-        return window.app!.graph!.links.get(1)?.target_slot
-      })
-    ).toBe(1)
+    await expect
+      .poll(() =>
+        comfyPage.page.evaluate(() => {
+          return window.app!.graph!.links.get(1)?.target_slot
+        })
+      )
+      .toBe(1)
   })
 
   test('Validate workflow links', async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.Validation.Workflows', true)
     await comfyPage.workflow.loadWorkflow('links/bad_link')
-    await expect.poll(() => comfyPage.toast.getVisibleToastCount()).toBe(2)
+    await expect(comfyPage.toast.visibleToasts).toHaveCount(2)
   })
 
   // Regression: duplicate links with shifted target_slot (widget-to-input
@@ -36,72 +38,77 @@ test.describe('Graph', { tag: ['@smoke', '@canvas'] }, () => {
   }) => {
     await comfyPage.workflow.loadWorkflow('links/duplicate_links_slot_drift')
 
-    const result = await comfyPage.page.evaluate(() => {
-      const graph = window.app!.graph!
+    function evaluateGraph() {
+      return comfyPage.page.evaluate(() => {
+        const graph = window.app!.graph!
 
-      const subgraph = graph.subgraphs.values().next().value
-      if (!subgraph) return { error: 'No subgraph found' }
+        const subgraph = graph.subgraphs.values().next().value
+        if (!subgraph) return { error: 'No subgraph found' }
 
-      // Node 120 = Switch (CFG), connects to both KSamplerAdvanced 85 and 86
-      const switchCfg = subgraph.getNodeById(120)
-      const ksampler85 = subgraph.getNodeById(85)
-      const ksampler86 = subgraph.getNodeById(86)
-      if (!switchCfg || !ksampler85 || !ksampler86)
-        return { error: 'Required nodes not found' }
+        // Node 120 = Switch (CFG), connects to both KSamplerAdvanced 85 and 86
+        const switchCfg = subgraph.getNodeById(120)
+        const ksampler85 = subgraph.getNodeById(85)
+        const ksampler86 = subgraph.getNodeById(86)
+        if (!switchCfg || !ksampler85 || !ksampler86)
+          return { error: 'Required nodes not found' }
 
-      // Find cfg inputs by name (slot indices shift due to widget-to-input)
-      const cfgInput85 = ksampler85.inputs.find(
-        (i: { name: string }) => i.name === 'cfg'
+        // Find cfg inputs by name (slot indices shift due to widget-to-input)
+        const cfgInput85 = ksampler85.inputs.find(
+          (i: { name: string }) => i.name === 'cfg'
+        )
+        const cfgInput86 = ksampler86.inputs.find(
+          (i: { name: string }) => i.name === 'cfg'
+        )
+        const cfg85Linked = cfgInput85?.link != null
+        const cfg86Linked = cfgInput86?.link != null
+
+        // Verify the surviving links exist in the subgraph link map
+        const cfg85LinkValid =
+          cfg85Linked && subgraph.links.has(cfgInput85!.link!)
+        const cfg86LinkValid =
+          cfg86Linked && subgraph.links.has(cfgInput86!.link!)
+
+        // Switch(CFG) output should have exactly 2 links (one to each KSampler)
+        const switchOutputLinkCount = switchCfg.outputs[0]?.links?.length ?? 0
+
+        // Count links from Switch(CFG) to node 85 cfg (should be 1, not 2)
+        let cfgLinkToNode85Count = 0
+        for (const link of subgraph.links.values()) {
+          if (link.origin_id === 120 && link.target_id === 85)
+            cfgLinkToNode85Count++
+        }
+
+        return {
+          cfg85Linked,
+          cfg86Linked,
+          cfg85LinkValid,
+          cfg86LinkValid,
+          cfg85LinkId: cfgInput85?.link ?? null,
+          cfg86LinkId: cfgInput86?.link ?? null,
+          switchOutputLinkIds: [...(switchCfg.outputs[0]?.links ?? [])],
+          switchOutputLinkCount,
+          cfgLinkToNode85Count
+        }
+      })
+    }
+
+    // Poll graph state once, then assert all properties
+    await expect(async () => {
+      const r = await evaluateGraph()
+      // Both KSamplerAdvanced nodes must have their cfg input connected
+      expect(r.cfg85Linked).toBe(true)
+      expect(r.cfg86Linked).toBe(true)
+      // Links must exist in the subgraph link map
+      expect(r.cfg85LinkValid).toBe(true)
+      expect(r.cfg86LinkValid).toBe(true)
+      // Switch(CFG) output has exactly 2 links (one per KSamplerAdvanced)
+      expect(r.switchOutputLinkCount).toBe(2)
+      // Only 1 link from Switch(CFG) to node 85 (duplicate removed)
+      expect(r.cfgLinkToNode85Count).toBe(1)
+      // Output link IDs must match the input link IDs (source/target integrity)
+      expect(r.switchOutputLinkIds).toEqual(
+        expect.arrayContaining([r.cfg85LinkId, r.cfg86LinkId])
       )
-      const cfgInput86 = ksampler86.inputs.find(
-        (i: { name: string }) => i.name === 'cfg'
-      )
-      const cfg85Linked = cfgInput85?.link != null
-      const cfg86Linked = cfgInput86?.link != null
-
-      // Verify the surviving links exist in the subgraph link map
-      const cfg85LinkValid =
-        cfg85Linked && subgraph.links.has(cfgInput85!.link!)
-      const cfg86LinkValid =
-        cfg86Linked && subgraph.links.has(cfgInput86!.link!)
-
-      // Switch(CFG) output should have exactly 2 links (one to each KSampler)
-      const switchOutputLinkCount = switchCfg.outputs[0]?.links?.length ?? 0
-
-      // Count links from Switch(CFG) to node 85 cfg (should be 1, not 2)
-      let cfgLinkToNode85Count = 0
-      for (const link of subgraph.links.values()) {
-        if (link.origin_id === 120 && link.target_id === 85)
-          cfgLinkToNode85Count++
-      }
-
-      return {
-        cfg85Linked,
-        cfg86Linked,
-        cfg85LinkValid,
-        cfg86LinkValid,
-        cfg85LinkId: cfgInput85?.link ?? null,
-        cfg86LinkId: cfgInput86?.link ?? null,
-        switchOutputLinkIds: [...(switchCfg.outputs[0]?.links ?? [])],
-        switchOutputLinkCount,
-        cfgLinkToNode85Count
-      }
-    })
-
-    expect(result).not.toHaveProperty('error')
-    // Both KSamplerAdvanced nodes must have their cfg input connected
-    expect(result.cfg85Linked).toBe(true)
-    expect(result.cfg86Linked).toBe(true)
-    // Links must exist in the subgraph link map
-    expect(result.cfg85LinkValid).toBe(true)
-    expect(result.cfg86LinkValid).toBe(true)
-    // Switch(CFG) output has exactly 2 links (one per KSamplerAdvanced)
-    expect(result.switchOutputLinkCount).toBe(2)
-    // Only 1 link from Switch(CFG) to node 85 (duplicate removed)
-    expect(result.cfgLinkToNode85Count).toBe(1)
-    // Output link IDs must match the input link IDs (source/target integrity)
-    expect(result.switchOutputLinkIds).toEqual(
-      expect.arrayContaining([result.cfg85LinkId, result.cfg86LinkId])
-    )
+    }).toPass()
   })
 })

browser_tests/tests/graphCanvasMenu.spec.ts

@@ -31,18 +31,18 @@ test.describe('Graph Canvas Menu', { tag: ['@screenshot', '@canvas'] }, () => {
       const hiddenLinkRenderMode = await comfyPage.page.evaluate(() => {
         return window.LiteGraph!.HIDDEN_LINK
       })
-      expect(await comfyPage.settings.getSetting('Comfy.LinkRenderMode')).toBe(
-        hiddenLinkRenderMode
-      )
+      await expect
+        .poll(() => comfyPage.settings.getSetting('Comfy.LinkRenderMode'))
+        .toBe(hiddenLinkRenderMode)
 
       await button.click()
       await comfyPage.nextFrame()
       await expect(comfyPage.canvas).toHaveScreenshot(
         'canvas-with-visible-links.png'
       )
-      expect(
-        await comfyPage.settings.getSetting('Comfy.LinkRenderMode')
-      ).not.toBe(hiddenLinkRenderMode)
+      await expect
+        .poll(() => comfyPage.settings.getSetting('Comfy.LinkRenderMode'))
+        .not.toBe(hiddenLinkRenderMode)
     }
   )
 
@@ -92,7 +92,6 @@ test.describe('Graph Canvas Menu', { tag: ['@screenshot', '@canvas'] }, () => {
     // Click backdrop to close
     const backdrop = comfyPage.page.locator('.fixed.inset-0').first()
     await backdrop.click()
-    await comfyPage.nextFrame()
 
     // Modal should be hidden
     await expect(zoomModal).not.toBeVisible()

browser_tests/tests/groupCopyPaste.spec.ts

@@ -28,17 +28,20 @@ test.describe('Group Copy Paste', { tag: ['@canvas'] }, () => {
     await comfyPage.clipboard.paste()
     await comfyPage.nextFrame()
 
-    const positions = await comfyPage.page.evaluate(() =>
-      window.app!.graph.groups.map((g: { pos: number[] }) => ({
-        x: g.pos[0],
-        y: g.pos[1]
-      }))
-    )
+    const getGroupPositions = () =>
+      comfyPage.page.evaluate(() =>
+        window.app!.graph.groups.map((g: { pos: number[] }) => ({
+          x: g.pos[0],
+          y: g.pos[1]
+        }))
+      )
 
-    expect(positions).toHaveLength(2)
-    const dx = Math.abs(positions[0].x - positions[1].x)
-    const dy = Math.abs(positions[0].y - positions[1].y)
-    expect(dx).toBeCloseTo(50, 0)
-    expect(dy).toBeCloseTo(15, 0)
+    await expect.poll(getGroupPositions).toHaveLength(2)
+
+    await expect(async () => {
+      const positions = await getGroupPositions()
+      expect(Math.abs(positions[0].x - positions[1].x)).toBeCloseTo(50, 0)
+      expect(Math.abs(positions[0].y - positions[1].y)).toBeCloseTo(15, 0)
+    }).toPass({ timeout: 5000 })
   })
 })