feat: video trim, deploy video-script, require videoScript, verdict mismatch

1. ffmpeg -ss 7: trim ComfyUI loading screen from demo video
2. Deploy video-script.spec.ts to report site + show in HTML
3. videoScript is REQUIRED when verdict=REPRODUCED (prompt + tool desc)
4. Log warning when E2E and video review verdicts disagree

.agents/checks/adr-compliance.md

@@ -0,0 +1,118 @@
+---
+name: adr-compliance
+description: Checks code changes against Architecture Decision Records, with emphasis on ECS (ADR 0008) and command-pattern (ADR 0003) compliance
+severity-default: medium
+tools: [Read, Grep, glob]
+---
+
+Check that code changes are consistent with the project's Architecture Decision Records in `docs/adr/`.
+
+## Priority 1: ECS and Command-Pattern Compliance (ADR 0008 + ADR 0003)
+
+These are the primary architectural guardrails. Every entity/litegraph change must be checked against them.
+
+### Command Pattern (ADR 0003)
+
+All entity state mutations MUST be expressible as **serializable, idempotent, deterministic commands**. This is required for CRDT sync, undo/redo, cross-environment portability, and gateway backends.
+
+Flag:
+
+- **Direct spatial mutation** — `node.pos = ...`, `node.size = ...`, `group.pos = ...` outside of a store or command. All spatial data flows through `layoutStore` commands.
+- **Imperative fire-and-forget mutation** — Any new API that mutates entity state as a side effect rather than producing a serializable command object. Systems should produce command batches, not execute mutations directly.
+- **Void-returning mutation APIs** — New entity mutation functions that return `void` instead of a result type (`{ status: 'applied' | 'rejected' | 'no-op' }`). Commands need error/rejection semantics.
+- **Auto-incrementing IDs in new entity code** — New entity creation using auto-increment counters without acknowledging the CRDT collision problem. Concurrent environments need globally unique, stable identifiers.
+
+### ECS Architecture (ADR 0008)
+
+The graph domain model is migrating to ECS. New code must not make the migration harder.
+
+Flag:
+
+- **God-object growth** — New methods/properties added to `LGraphNode` (~4k lines), `LGraphCanvas` (~9k lines), `LGraph` (~3k lines), or `Subgraph`. Extract to systems, stores, or composables instead.
+- **Mixed data and behavior** — New component-like data structures that contain methods or back-references to parent entities. ECS components are plain data objects.
+- **New circular entity dependencies** — New circular imports between `LGraph` ↔ `Subgraph`, `LGraphNode` ↔ `LGraphCanvas`, or similar entity classes.
+- **Direct `graph._version++`** — Mutating the private version counter directly instead of through a public API. Extensions already depend on this side-channel; it must become a proper API.
+
+### Centralized Registries and ECS-Style Access
+
+All entity data access should move toward centralized query patterns, not instance property access.
+
+Flag:
+
+- **New instance method/property patterns** — Adding `node.someProperty` or `node.someMethod()` for data that should be a component in the World, queried via `world.getComponent(entityId, ComponentType)`.
+- **OOP inheritance for entity modeling** — Extending entity classes with new subclasses instead of composing behavior through components and systems.
+- **Scattered state** — New entity state stored in multiple locations (class properties, stores, local variables) instead of being consolidated in the World or in a single store.
+
+### Extension Ecosystem Impact
+
+Entity API changes affect 40+ custom node repos. Changes to these patterns require an extension migration path.
+
+Flag when changed without migration guidance:
+
+- `onConnectionsChange`, `onRemoved`, `onAdded`, `onConfigure` callbacks
+- `onConnectInput` / `onConnectOutput` validation hooks
+- `onWidgetChanged` handlers
+- `node.widgets.find(w => w.name === ...)` patterns
+- `node.serialize` overrides
+- `graph._version++` direct mutation
+- `getNodeById` usage patterns
+
+## Priority 2: General ADR Compliance
+
+For all other ADRs, iterate through each file in `docs/adr/` and extract the core lesson. Ensure changed code does not contradict accepted ADRs. Flag contradictions with proposed ADRs as directional guidance.
+
+### How to Apply
+
+1. Read `docs/adr/README.md` to get the full ADR index
+2. For each ADR, read the Decision and Consequences sections
+3. Check the diff against each ADR's constraints
+4. Only flag ACTUAL violations in changed code, not pre-existing patterns
+
+### Skip List
+
+These ADRs can be skipped for most reviews (they cover completed or narrow-scope decisions):
+
+- **ADR 0004** (Rejected — Fork PrimeVue) — only relevant if someone proposes forking PrimeVue again
+
+## How to Check
+
+1. Identify changed files in the entity/litegraph layer: `src/lib/litegraph/`, `src/ecs/`, `src/platform/`, entity-related stores
+2. For Priority 1 patterns, use targeted searches:
+
+   ```
+   # Direct position mutation
+   Grep: pattern="\.pos\s*=" path="src/lib/litegraph"
+   Grep: pattern="\.size\s*=" path="src/lib/litegraph"
+
+   # God object growth (new methods)
+   Grep: pattern="(class LGraphNode|class LGraphCanvas|class LGraph\b)" path="src/lib/litegraph"
+
+   # Version mutation
+   Grep: pattern="_version\+\+" path="src/lib/litegraph"
+
+   # Extension callback changes
+   Grep: pattern="on(ConnectionsChange|Removed|Added|Configure|ConnectInput|ConnectOutput|WidgetChanged)" path="src/lib/litegraph"
+   ```
+
+3. For Priority 2, read `docs/adr/` files and check for contradictions
+
+## Severity Guidelines
+
+| Issue                                                    | Severity |
+| -------------------------------------------------------- | -------- |
+| Imperative mutation API without command-pattern wrapper  | high     |
+| New god-object method on LGraphNode/LGraphCanvas/LGraph  | high     |
+| Breaking extension callback without migration path       | high     |
+| New circular entity dependency                           | high     |
+| Direct spatial mutation bypassing command pattern        | medium   |
+| Mixed data/behavior in component-like structures         | medium   |
+| New OOP inheritance pattern for entities                 | medium   |
+| Contradicts accepted ADR direction                       | medium   |
+| Contradicts proposed ADR direction without justification | low      |
+
+## Rules
+
+- Only flag ACTUAL violations in changed code, not pre-existing patterns
+- If a change explicitly acknowledges an ADR tradeoff in comments or PR description, lower severity
+- Proposed ADRs carry less weight than accepted ones — flag as directional guidance
+- Reference the specific ADR number in every finding

.agents/checks/playwright-e2e.md

@@ -0,0 +1,74 @@
+---
+name: playwright-e2e
+description: Reviews Playwright E2E test code for ComfyUI-specific patterns, flakiness risks, and fixture misuse
+severity-default: medium
+tools: [Read, Grep]
+---
+
+You are reviewing Playwright E2E test code in `browser_tests/`. Focus on issues a **reviewer** would catch that an author might miss — flakiness risks, fixture misuse, test isolation problems, and convention violations.
+
+Reference docs (read if you need full context):
+
+- `browser_tests/README.md` — setup, patterns, screenshot workflow
+- `browser_tests/AGENTS.md` — directory structure, fixture overview
+- `docs/guidance/playwright.md` — type assertion rules, test tags, forbidden patterns
+- `.claude/skills/writing-playwright-tests/SKILL.md` — anti-patterns, retry patterns, Vue Nodes vs LiteGraph decision guide
+
+## Checks
+
+### Flakiness Risks (Major)
+
+1. **`waitForTimeout` usage** — Always wrong. Must use retrying assertions (`toBeVisible`, `toHaveText`), `expect.poll()`, or `expect().toPass()`. See retry patterns in `.claude/skills/writing-playwright-tests/SKILL.md`.
+
+2. **Missing `nextFrame()` after canvas ops** — Any `drag`, `click` on canvas, `resizeNode`, `pan`, `zoom`, or programmatic graph mutation via `page.evaluate` that changes visual state needs `await comfyPage.nextFrame()` before assertions. `loadWorkflow()` does NOT need it. Prefer encapsulating `nextFrame()` calls inside Page Object methods so tests don't manage frame timing directly.
+
+3. **Keyboard actions without prior focus** — `page.keyboard.press()` without a preceding `comfyPage.canvas.click()` or element `.focus()` will silently send keys to nothing.
+
+4. **Coordinate-based interactions where node refs exist** — Raw `{ x, y }` clicks on canvas are fragile. If the test targets a node, use `comfyPage.nodeOps.getNodeRefById()` / `getNodeRefsByTitle()` / `getNodeRefsByType()` instead.
+
+5. **Shared mutable state between tests** — Variables declared outside `test()` blocks, `let` state mutated across tests, or tests depending on execution order. Each test must be independently runnable.
+
+6. **Missing cleanup of server-persisted state** — Settings changed via `comfyPage.settings.setSetting()` persist across tests. Must be reset in `afterEach` or at test start. Same for uploaded files or saved workflows. Prefer moving cleanup into [fixture options](https://playwright.dev/docs/test-fixtures#fixtures-options) so individual tests don't manage reset logic.
+
+7. **Double-click without `{ delay }` option** — `dblclick()` without `{ delay: 5 }` or similar can be too fast for the canvas event handler.
+
+### Fixture & API Misuse (Medium)
+
+8. **Reimplementing existing fixture helpers** — Before flagging, grep `browser_tests/fixtures/` for the functionality. Common missed helpers:
+   - `comfyPage.command.executeCommand()` for menu/command actions
+   - `comfyPage.workflow.loadWorkflow()` for loading test workflows
+   - `comfyPage.canvasOps.resetView()` for view reset
+   - `comfyPage.settings.setSetting()` for settings
+   - Component page objects in `browser_tests/fixtures/components/`
+
+9. **Building workflows programmatically when a JSON asset would work** — Complex `page.evaluate` chains to construct a graph should use a premade JSON workflow in `browser_tests/assets/` loaded via `comfyPage.workflow.loadWorkflow()`.
+
+10. **Selectors not using `TestIds`** — Hard-coded `data-testid` strings should reference `browser_tests/fixtures/selectors.ts` when a matching entry exists. Check `selectors.ts` before flagging.
+
+### Convention Violations (Minor)
+
+11. **Missing test tags** — Every `test.describe` should have `tag` with at least one of: `@smoke`, `@slow`, `@screenshot`, `@canvas`, `@node`, `@widget`, `@mobile`, `@2x`. See `.claude/skills/writing-playwright-tests/SKILL.md` for when to use each.
+
+12. **`as any` type assertions** — Forbidden in E2E tests. Use specific type assertions or test-local type helpers. See `docs/guidance/playwright.md` for acceptable patterns.
+
+13. **Screenshot tests without masking dynamic content** — Timestamps, version numbers, or other non-deterministic content in screenshots will cause flakes. Use `mask` option.
+
+14. **`test.describe` without `afterEach` cleanup when canvas state changes** — Tests that manipulate canvas view (drag, zoom, pan) should include `afterEach` with `comfyPage.canvasOps.resetView()`. Prefer moving canvas reset into the fixture so individual tests don't manage cleanup.
+
+15. **Debug helpers left in committed code** — `debugAddMarker`, `debugAttachScreenshot`, `debugShowCanvasOverlay`, `debugGetCanvasDataURL` are for local debugging only.
+
+### Test Design (Nitpick)
+
+16. **Screenshot-only assertions where functional assertions are possible** — Prefer `expect(await node.isPinned()).toBe(true)` over screenshot comparison when testing non-visual behavior.
+
+17. **Overly large test workflows** — Test should load the minimal workflow needed. If a test only needs one node, don't load the full default graph.
+
+18. **Vue Nodes / LiteGraph mismatch** — If testing Vue-rendered node UI (DOM widgets, CSS states), should use `comfyPage.vueNodes.*`. If testing canvas interactions/connections, should use `comfyPage.nodeOps.*`. Mixing both in one test is a smell.
+
+## Rules
+
+- Only review `.spec.ts` files and supporting code in `browser_tests/`
+- Do NOT flag patterns in fixture/helper code (`browser_tests/fixtures/`) — those are shared infrastructure with different rules
+- "Major" for flakiness risks (items 1-7), "medium" for fixture misuse (8-10), "minor" for convention violations (11-15), "nitpick" for test design (16-18)
+- When flagging missing fixture usage (item 8), confirm the helper exists by checking the fixture code — don't assume
+- Existing tests that predate conventions are acceptable to modify but not required to fix

.claude/commands/adr-compliance-audit.md

@@ -0,0 +1,94 @@
+# ADR Compliance Audit
+
+Audit the current changes (or a specified PR) for compliance with Architecture Decision Records.
+
+## Step 1: Gather the Diff
+
+- If a PR number is provided, run: `gh pr diff $PR_NUMBER`
+- Otherwise, run: `git diff origin/main...HEAD` (or `git diff --cached` for staged changes)
+
+## Step 2: Priority 1 — ECS and Command-Pattern Compliance
+
+Read these documents for context:
+
+```
+docs/adr/0003-crdt-based-layout-system.md
+docs/adr/0008-entity-component-system.md
+docs/architecture/ecs-target-architecture.md
+docs/architecture/ecs-migration-plan.md
+docs/architecture/appendix-critical-analysis.md
+```
+
+### Check A: Command Pattern (ADR 0003)
+
+Every entity state mutation must be a **serializable, idempotent, deterministic command** — replayable, undoable, transmittable over CRDT.
+
+Flag:
+
+1. **Direct spatial mutation** — `node.pos = ...`, `node.size = ...`, `group.pos = ...` outside a store/command
+2. **Imperative fire-and-forget APIs** — Functions that mutate entity state as side effects rather than producing serializable command objects. Systems should produce command batches, not execute mutations directly.
+3. **Void-returning mutation APIs** — Entity mutations returning `void` instead of `{ status: 'applied' | 'rejected' | 'no-op' }`
+4. **Auto-increment IDs** — New entity creation via counters without addressing CRDT collision. Concurrent environments need globally unique identifiers.
+5. **Missing transaction semantics** — Multi-entity operations without atomic grouping (e.g., node removal = 10+ deletes with no rollback on failure)
+
+### Check B: ECS Architecture (ADR 0008)
+
+Flag:
+
+1. **God-object growth** — New methods/properties on `LGraphNode`, `LGraphCanvas`, `LGraph`, `Subgraph`
+2. **Mixed data/behavior** — Component-like structures with methods or back-references
+3. **OOP instance patterns** — New `node.someProperty` or `node.someMethod()` for data that should be a World component
+4. **OOP inheritance** — New entity subclasses instead of component composition
+5. **Circular entity deps** — New `LGraph` ↔ `Subgraph`, `LGraphNode` ↔ `LGraphCanvas` circular imports
+6. **Direct `_version++`** — Mutating private version counter instead of through public API
+
+### Check C: Extension Ecosystem Impact
+
+If any of these patterns are changed, flag and require migration guidance:
+
+- `onConnectionsChange`, `onRemoved`, `onAdded`, `onConfigure` callbacks
+- `onConnectInput` / `onConnectOutput` validation hooks
+- `onWidgetChanged` handlers
+- `node.widgets.find(w => w.name === ...)` access patterns
+- `node.serialize` overrides
+- `graph._version++` direct mutation
+
+Reference: 40+ custom node repos depend on these (rgthree-comfy, ComfyUI-Impact-Pack, cg-use-everywhere, etc.)
+
+## Step 3: Priority 2 — General ADR Compliance
+
+1. Read `docs/adr/README.md` for the full ADR index
+2. For each ADR (except skip list), read the Decision section
+3. Check the diff for contradictions
+4. Only flag ACTUAL violations in changed code
+
+**Skip list**: ADR 0004 (Rejected — Fork PrimeVue)
+
+## Step 4: Generate Report
+
+```
+## ADR Compliance Audit Report
+
+### Summary
+- Files audited: N
+- Priority 1 findings: N (command-pattern: N, ECS: N, ecosystem: N)
+- Priority 2 findings: N
+
+### Priority 1: Command Pattern & ECS
+(List each with ADR reference, file, line, description)
+
+### Priority 1: Extension Ecosystem Impact
+(List each changed callback/API with affected custom node repos)
+
+### Priority 2: General ADR Compliance
+(List each with ADR reference, file, line, description)
+
+### Compliant Patterns
+(Note changes that positively align with ADR direction)
+```
+
+## Severity
+
+- **Must fix**: Contradicts accepted ADR, or introduces imperative mutation API without command-pattern wrapper, or breaks extension callback without migration path
+- **Should discuss**: Contradicts proposed ADR direction — either align or propose ADR amendment
+- **Note**: Surfaces open architectural question not yet addressed by ADRs

.claude/skills/adding-deprecation-warnings/SKILL.md

@@ -0,0 +1,84 @@
+---
+name: adding-deprecation-warnings
+description: 'Adds deprecation warnings for renamed or removed properties/APIs. Searches custom node ecosystem for usage, applies defineDeprecatedProperty helper, adds JSDoc. Triggers on: deprecate, deprecation warning, rename property, backward compatibility.'
+---
+
+# Adding Deprecation Warnings
+
+Adds backward-compatible deprecation warnings for renamed or removed
+properties using the `defineDeprecatedProperty` helper in
+`src/lib/litegraph/src/utils/feedback.ts`.
+
+## When to Use
+
+- A property or API has been renamed and custom nodes still use the old name
+- A property is being removed but needs a grace period
+- Backward compatibility must be preserved while nudging adoption
+
+## Steps
+
+### 1. Search the Custom Node Ecosystem
+
+Before implementing, assess impact by searching for usage of the
+deprecated property across ComfyUI custom nodes:
+
+```text
+Use the comfy_codesearch tool to search for the old property name.
+Search for both `widget.oldProp` and just `oldProp` to catch all patterns.
+```
+
+Document the usage patterns found (property access, truthiness checks,
+caching to local vars, style mutation, etc.) — these all must continue
+working.
+
+### 2. Apply the Deprecation
+
+Use `defineDeprecatedProperty` from `src/lib/litegraph/src/utils/feedback.ts`:
+
+```typescript
+import { defineDeprecatedProperty } from '@/lib/litegraph/src/utils/feedback'
+
+/** @deprecated Use {@link obj.newProp} instead. */
+defineDeprecatedProperty(
+  obj,
+  'oldProp',
+  'newProp',
+  'obj.oldProp is deprecated. Use obj.newProp instead.'
+)
+```
+
+### 3. Checklist
+
+- [ ] Ecosystem search completed — all usage patterns are compatible
+- [ ] `defineDeprecatedProperty` call added after the new property is assigned
+- [ ] JSDoc `@deprecated` tag added above the call for IDE support
+- [ ] Warning message names both old and new property clearly
+- [ ] `pnpm typecheck` passes
+- [ ] `pnpm lint` passes
+
+### 4. PR Comment
+
+Add a PR comment summarizing the ecosystem search results: which repos
+use the deprecated property, what access patterns were found, and
+confirmation that all patterns are compatible with the ODP getter/setter.
+
+## How `defineDeprecatedProperty` Works
+
+- Creates an `Object.defineProperty` getter/setter on the target object
+- Getter returns `this[currentKey]`, setter assigns `this[currentKey]`
+- Both log via `warnDeprecated`, which deduplicates (once per unique
+  message per session via a `Set`)
+- `enumerable: false` keeps the alias out of `Object.keys()` / `for...in`
+  / `JSON.stringify`
+- `configurable: true` allows further redefinition if needed
+
+## Edge Cases
+
+- **Truthiness checks** (`if (widget.oldProp)`) — works, getter fires
+- **Caching to local var** (`const el = widget.oldProp`) — works, warns
+  once then the cached ref is used directly
+- **Style/property mutation** (`widget.oldProp.style.color = 'red'`) —
+  works, getter returns the real object
+- **Serialization** (`JSON.stringify`) — `enumerable: false` excludes it
+- **Heavy access in loops** — `warnDeprecated` deduplicates, only warns
+  once per session regardless of call count

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

@@ -11,10 +11,11 @@ Cherry-pick backport management for Comfy-Org/ComfyUI_frontend stable release br
 
 1. **Discover** — Collect candidates from Slack bot + git log gap (`reference/discovery.md`)
 2. **Analyze** — Categorize MUST/SHOULD/SKIP, check deps (`reference/analysis.md`)
-3. **Plan** — Order by dependency (leaf fixes first), group into waves per branch
-4. **Execute** — Label-driven automation → worktree fallback for conflicts (`reference/execution.md`)
-5. **Verify** — After each wave, verify branch integrity before proceeding
-6. **Log & Report** — Generate session report with mermaid diagram (`reference/logging.md`)
+3. **Human Review** — Present candidates in batches for interactive approval (see Interactive Approval Flow)
+4. **Plan** — Order by dependency (leaf fixes first), group into waves per branch
+5. **Execute** — Label-driven automation → worktree fallback for conflicts (`reference/execution.md`)
+6. **Verify** — After each wave, verify branch integrity before proceeding
+7. **Log & Report** — Generate session report (`reference/logging.md`)
 
 ## System Context
 
@@ -37,16 +38,29 @@ Cherry-pick backport management for Comfy-Org/ComfyUI_frontend stable release br
 
 **Critical: Match PRs to the correct target branches.**
 
-| Branch prefix | Scope                          | Example                                   |
-| ------------- | ------------------------------ | ----------------------------------------- |
-| `cloud/*`     | Cloud-hosted ComfyUI only      | App mode, cloud auth, cloud-specific UI   |
-| `core/*`      | Local/self-hosted ComfyUI only | Core editor, local workflows, node system |
+| Branch prefix | Scope                          | Example                                           |
+| ------------- | ------------------------------ | ------------------------------------------------- |
+| `cloud/*`     | Cloud-hosted ComfyUI only      | Team workspaces, cloud queue, cloud-only login    |
+| `core/*`      | Local/self-hosted ComfyUI only | Core editor, local workflows, node system         |
+| Both          | Shared infrastructure          | App mode, Firebase auth (API nodes), payment URLs |
 
-**⚠️ NEVER backport cloud-only PRs to `core/*` branches.** Cloud-only changes (app mode, cloud auth, cloud billing UI, cloud-specific API calls) are irrelevant to local users and waste effort. Before backporting any PR to a `core/*` branch, check:
+### What Goes Where
 
-- Does the PR title/description mention "app mode", "cloud", or cloud-specific features?
-- Does the PR only touch files like `appModeStore.ts`, cloud auth, or cloud-specific components?
-- If yes → skip for `core/*` branches (may still apply to `cloud/*` branches)
+**Both core + cloud:**
+
+- **App mode** PRs — app mode is NOT cloud-only
+- **Firebase auth** PRs — Firebase auth is on core for API nodes
+- **Payment redirect** PRs — payment infrastructure shared
+- **Bug fixes** touching shared components
+
+**Cloud-only (skip for core):**
+
+- Team workspaces
+- Cloud queue virtualization
+- Hide API key login
+- Cloud-specific UI behind cloud feature flags
+
+**⚠️ NEVER backport cloud-only PRs to `core/*` branches.** But do NOT assume "app mode" or "Firebase" = cloud-only. Check the actual files changed.
 
 ## ⚠️ Gotchas (Learn from Past Sessions)
 
@@ -67,6 +81,32 @@ The `pr-backport.yaml` action reports more conflicts than reality. `git cherry-p
 
 12 or 27 conflicting files can be trivial (snapshots, new files). **Categorize conflicts first**, then decide. See Conflict Triage below.
 
+### Accept-Theirs Can Produce Broken Hybrids
+
+When a PR **rewrites a component** (e.g., PrimeVue → Reka UI), the accept-theirs regex produces a broken mix of old and new code. The template may reference new APIs while the script still has old imports, or vice versa.
+
+**Detection:** Content conflicts with 4+ conflict markers in a single `.vue` file, especially when imports change between component libraries.
+
+**Fix:** Instead of accept-theirs regex, use `git show MERGE_SHA:path/to/file > path/to/file` to get the complete correct version from the merge commit on main. This bypasses the conflict entirely.
+
+### Cherry-Picks Can Reference Missing Dependencies
+
+When PR A on main depends on code introduced by PR B (which was merged before A), cherry-picking A brings in code that references B's additions. The cherry-pick succeeds but the branch is broken.
+
+**Common pattern:** Composables, component files, or type definitions introduced by an earlier PR and used by the cherry-picked PR.
+
+**Detection:** `pnpm typecheck` fails with "Cannot find module" or "is not defined" errors after cherry-pick.
+
+**Fix:** Use `git show MERGE_SHA:path/to/missing/file > path/to/missing/file` to bring the missing files from main. Always verify with typecheck.
+
+### Use `--no-verify` for Worktree Pushes
+
+Husky hooks fail in worktrees (can't find lint-staged config). Always use `git push --no-verify` and `git commit --no-verify` when working in `/tmp/` worktrees.
+
+### Automation Success Varies Wildly by Branch
+
+In the 2026-04-06 session: core/1.42 got 18/26 auto-PRs, cloud/1.42 got only 1/25. The cloud branch has more divergence. **Always plan for manual fallback** — don't assume automation will handle most PRs.
+
 ## Conflict Triage
 
 **Always categorize before deciding to skip. High conflict count ≠ hard conflicts.**
@@ -77,6 +117,8 @@ The `pr-backport.yaml` action reports more conflicts than reality. `git cherry-p
 | **Modify/delete (new file)** | PR introduces files not on target    | `git add $FILE` — keep the new file                             |
 | **Modify/delete (removed)**  | Target removed files the PR modifies | `git rm $FILE` — file no longer relevant                        |
 | **Content conflicts**        | Marker-based (`<<<<<<<`)             | Accept theirs via python regex (see below)                      |
+| **Component rewrites**       | 4+ markers in `.vue`, library change | Use `git show SHA:path > path` — do NOT accept-theirs           |
+| **Import-only conflicts**    | Only import lines differ             | Keep both imports if both used; remove unused after             |
 | **Add/add**                  | Both sides added same file           | Accept theirs, verify no logic conflict                         |
 | **Locale/JSON files**        | i18n key additions                   | Accept theirs, validate JSON after                              |
 
@@ -103,7 +145,7 @@ Skip these without discussion:
 - **Test-only / lint rule changes** — Not user-facing
 - **Revert pairs** — If PR A reverted by PR B, skip both. If fixed version (PR C) exists, backport only C.
 - **Features not on target branch** — e.g., Painter, GLSLShader, appModeStore on core/1.40
-- **Cloud-only PRs on core/\* branches** — App mode, cloud auth, cloud billing. These only affect cloud-hosted ComfyUI.
+- **Cloud-only PRs on core/\* branches** — Team workspaces, cloud queue, cloud-only login. (Note: app mode and Firebase auth are NOT cloud-only — see Branch Scope Rules)
 
 ## Wave Verification
 
@@ -122,6 +164,18 @@ git worktree remove /tmp/verify-TARGET --force
 
 If typecheck or tests fail, stop and investigate before continuing. A broken branch after wave N means all subsequent waves will compound the problem.
 
+### Fix PRs Are Normal
+
+Expect to create 1 fix PR per branch after verification. Common issues:
+
+1. **Component rewrite hybrids** — accept-theirs produced broken `.vue` files. Fix: overwrite with correct version from merge commit via `git show SHA:path > path`
+2. **Missing dependency files** — cherry-pick brought in code referencing composables/components not on the branch. Fix: add missing files from merge commit
+3. **Missing type properties** — cherry-picked code uses interface properties not yet on the branch (e.g., `key` on `ConfirmDialogOptions`). Fix: add the property to the interface
+4. **Unused imports** — conflict resolution kept imports that the branch doesn't use. Fix: remove unused imports
+5. **Wrong types from conflict resolution** — e.g., `{ top: number; right: number }` vs `{ top: number; left: number }`. Fix: match the return type of the actual function
+
+Create a fix PR on a branch from the target, verify typecheck passes, then merge with `--squash --admin`.
+
 ### Never Admin-Merge Without CI
 
 In a previous bulk session, all 69 backport PRs were merged with `gh pr merge --squash --admin`, bypassing required CI checks. This shipped 3 test failures to a release branch. **Lesson: `--admin` skips all branch protection, including required status checks.** Only use `--admin` after confirming CI has passed (e.g., `gh pr checks $PR` shows all green), or rely on auto-merge (`--auto --squash`) which waits for CI by design.
@@ -135,6 +189,43 @@ Large backport sessions (50+ PRs) are expensive and error-prone. Prefer continuo
 - Reserve session-style bulk backporting for catching up after gaps
 - When a release branch is created, immediately start the continuous process
 
+## Interactive Approval Flow
+
+After analysis, present ALL candidates (MUST, SHOULD, and borderline) to the human for interactive review before execution. Do not write a static decisions.md — collect approvals in conversation.
+
+### Batch Presentation
+
+Present PRs in batches of 5-10, grouped by theme (visual bugs, interaction bugs, cloud/auth, data correctness, etc.). Use this table format:
+
+```
+ #  | PR     | Title                                    | Target        | Rec  | Context
+----+--------+------------------------------------------+---------------+------+--------
+ 1  | #12345 | fix: broken thing                        | core+cloud/42 | Y    | Description here. Why it matters. Agent reasoning.
+ 2  | #12346 | fix: another issue                       | core/42       | N    | Only affects removed feature. Not on target branch.
+```
+
+Each row includes:
+
+- PR number and title
+- Target branches
+- Agent recommendation: `Rec: Y` or `Rec: N` with brief reasoning
+- 2-3 sentence context: what the PR does, why it matters (or doesn't)
+
+### Human Response Format
+
+- `Y` — approve for backport
+- `N` — skip
+- `?` — investigate (agent shows PR description, files changed, detailed take, then re-asks)
+- Any freeform question or comment triggers discussion before moving on
+- Bulk responses accepted (e.g. `1 Y, 2 Y, 3 N, 4 ?`)
+
+### Rules
+
+- ALL candidates are reviewed, not just MUST items
+- When human responds `?`, show the PR description, files changed, and agent's detailed analysis, then re-ask for their decision
+- When human asks a question about a PR, answer with context and recommendation, then wait for their decision
+- Do not proceed to execution until all batches are reviewed and every candidate has a Y or N
+
 ## Quick Reference
 
 ### Label-Driven Automation (default path)
@@ -150,13 +241,96 @@ gh api repos/Comfy-Org/ComfyUI_frontend/issues/$PR/labels \
 ```bash
 git worktree add /tmp/backport-$BRANCH origin/$BRANCH
 cd /tmp/backport-$BRANCH
+
+# For each PR:
+git fetch origin $BRANCH
 git checkout -b backport-$PR-to-$BRANCH origin/$BRANCH
 git cherry-pick -m 1 $MERGE_SHA
-# Resolve conflicts, push, create PR, merge
+# Resolve conflicts (see Conflict Triage)
+git push origin backport-$PR-to-$BRANCH --no-verify
+gh pr create --base $BRANCH --head backport-$PR-to-$BRANCH \
+  --title "[backport $BRANCH] $TITLE (#$PR)" \
+  --body "Backport of #$PR. [conflict notes]"
+gh pr merge $NEW_PR --squash --admin
+sleep 25
 ```
 
+### Efficient Batch: Test-Then-Resolve Pattern
+
+When many PRs need manual cherry-pick (e.g., cloud branches), test all first:
+
+```bash
+cd /tmp/backport-$BRANCH
+for pr in "${ORDER[@]}"; do
+  git checkout -b test-$pr origin/$BRANCH
+  if git cherry-pick -m 1 $SHA 2>/dev/null; then
+    echo "CLEAN: $pr"
+  else
+    echo "CONFLICT: $pr"
+    git cherry-pick --abort
+  fi
+  git checkout --detach HEAD
+  git branch -D test-$pr
+done
+```
+
+Then process clean PRs in a batch loop, conflicts individually.
+
 ### PR Title Convention
 
 ```
 [backport TARGET_BRANCH] Original Title (#ORIGINAL_PR)
 ```
+
+## Final Deliverables (Slack-Compatible)
+
+After execution completes, generate two files in `~/temp/backport-session/`. Both must be **Slack-compatible plain text** — no emojis, no markdown tables, no headers (`#`), no bold (`**`), no inline code. Use plain dashes, indentation, and line breaks only.
+
+### 1. Author Accountability Report
+
+File: `backport-author-accountability.md`
+
+Lists all backported PRs grouped by original author (via `gh pr view $PR --json author`). Surfaces who should be self-labeling.
+
+```
+Backport Session YYYY-MM-DD -- PRs that should have been labeled by authors
+
+- author-login
+    - #1234 fix: short title
+    - #5678 fix: another title
+- other-author
+    - #9012 fix: some other fix
+```
+
+Authors sorted alphabetically, 4-space indent for nested items.
+
+### 2. Slack Status Update
+
+File: `slack-status-update.md`
+
+A shareable summary of the session. Structure:
+
+```
+Backport session complete -- YYYY-MM-DD
+
+[1-sentence summary: N PRs backported to which branches. All pass typecheck.]
+
+Branches updated:
+- core/X.XX: N PRs + N fix PRs (N auto, N manual)
+- cloud/X.XX: N PRs + N fix PRs (N auto, N manual)
+- ...
+
+N total PRs created and merged (N backports + N fix PRs).
+
+Notable fixes included:
+- [category]: [list of fixes]
+- ...
+
+Conflict patterns encountered:
+- [pattern and how it was resolved]
+- ...
+
+N authors had PRs backported. See author accountability list for details.
+```
+
+No emojis, no tables, no bold, no headers. Plain text that pastes cleanly into Slack.

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

@@ -23,10 +23,10 @@ For SHOULD items with conflicts: if conflict resolution requires more than trivi
 
 **Before categorizing, filter by branch scope:**
 
-| Target branch | Skip if PR is...                                                    |
-| ------------- | ------------------------------------------------------------------- |
-| `core/*`      | Cloud-only (app mode, cloud auth, cloud billing, cloud-specific UI) |
-| `cloud/*`     | Local-only features not present on cloud branch                     |
+| Target branch | Skip if PR is...                                                                                                  |
+| ------------- | ----------------------------------------------------------------------------------------------------------------- |
+| `core/*`      | Cloud-only (team workspaces, cloud queue, cloud-only login). Note: app mode and Firebase auth are NOT cloud-only. |
+| `cloud/*`     | Local-only features not present on cloud branch                                                                   |
 
 Cloud-only PRs backported to `core/*` are wasted effort — `core/*` branches serve local/self-hosted users who never see cloud features. Check PR titles, descriptions, and files changed for cloud-specific indicators.
 
@@ -61,8 +61,6 @@ done
 
 ## Human Review Checkpoint
 
-Present decisions.md before execution. Include:
+Use the Interactive Approval Flow (see SKILL.md) to review all candidates interactively. Do not write a static decisions.md for the human to edit — instead, present batches of 5-10 PRs with context and recommendations, and collect Y/N/? responses in conversation.
 
-1. All MUST/SHOULD/SKIP categorizations with rationale
-2. Questions for human (feature existence, scope, deps)
-3. Estimated effort per branch
+All candidates must be reviewed (MUST, SHOULD, and borderline items), not just a subset.

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

@@ -73,14 +73,22 @@ for PR in ${CONFLICT_PRS[@]}; do
   git cherry-pick -m 1 $MERGE_SHA
 
   # If conflict — NEVER skip based on file count alone!
-  # Categorize conflicts first: binary PNGs, modify/delete, content, add/add
+  # Categorize conflicts first: binary PNGs, modify/delete, content, add/add, component rewrites
   # See SKILL.md Conflict Triage table for resolution per type.
 
+  # For component rewrites (4+ markers in a .vue file, library migration):
+  # DO NOT use accept-theirs regex — it produces broken hybrids.
+  # Instead, use the complete file from the merge commit:
+  # git show $MERGE_SHA:path/to/file > path/to/file
+
+  # For simple content conflicts, accept theirs:
+  # python3 -c "import re; ..."
+
   # Resolve all conflicts, then:
   git add .
   GIT_EDITOR=true git cherry-pick --continue
 
-  git push origin backport-$PR-to-TARGET
+  git push origin backport-$PR-to-TARGET --no-verify
   NEW_PR=$(gh pr create --base TARGET_BRANCH --head backport-$PR-to-TARGET \
     --title "[backport TARGET] TITLE (#$PR)" \
     --body "Backport of #$PR..." | grep -oP '\d+$')
@@ -114,7 +122,30 @@ source ~/.nvm/nvm.sh && nvm use 24 && pnpm install && pnpm typecheck && pnpm tes
 git worktree remove /tmp/verify-TARGET --force
 ```
 
-If verification fails, stop and fix before proceeding to the next wave. Do not compound problems across waves.
+If verification fails, **do not skip** — create a fix PR:
+
+```bash
+# Stay in the verify worktree
+git checkout -b fix-backport-TARGET origin/TARGET_BRANCH
+
+# Common fixes:
+# 1. Component rewrite hybrids: overwrite with merge commit version
+git show MERGE_SHA:path/to/Component.vue > path/to/Component.vue
+
+# 2. Missing dependency files
+git show MERGE_SHA:path/to/missing.ts > path/to/missing.ts
+
+# 3. Missing type properties: edit the interface
+# 4. Unused imports: delete the import lines
+
+git add -A
+git commit --no-verify -m "fix: resolve backport typecheck issues on TARGET"
+git push origin fix-backport-TARGET --no-verify
+gh pr create --base TARGET --head fix-backport-TARGET --title "fix: resolve backport typecheck issues on TARGET" --body "..."
+gh pr merge $PR --squash --admin
+```
+
+Do not proceed to the next branch until typecheck passes.
 
 ## Conflict Resolution Patterns
 
@@ -142,7 +173,35 @@ git rm $FILE
 git checkout --theirs $FILE && git add $FILE
 ```
 
-### 4. Locale Files
+### 4. Component Rewrites (DO NOT accept-theirs)
+
+When a PR completely rewrites a component (e.g., PrimeVue → Reka UI), accept-theirs produces
+a broken hybrid with mismatched template/script sections.
+
+```bash
+# Use the complete correct file from the merge commit instead:
+git show $MERGE_SHA:src/components/input/MultiSelect.vue > src/components/input/MultiSelect.vue
+git show $MERGE_SHA:src/components/input/SingleSelect.vue > src/components/input/SingleSelect.vue
+git add src/components/input/MultiSelect.vue src/components/input/SingleSelect.vue
+```
+
+**Detection:** 4+ conflict markers in a single `.vue` file, imports changing between component
+libraries (PrimeVue → Reka UI, etc.), template structure completely different on each side.
+
+### 5. Missing Dependencies After Cherry-Pick
+
+Cherry-picks can succeed but leave the branch broken because the PR's code on main
+references composables/components introduced by an earlier PR.
+
+```bash
+# Add the missing file from the merge commit:
+git show $MERGE_SHA:src/composables/queue/useJobDetailsHover.ts > src/composables/queue/useJobDetailsHover.ts
+git show $MERGE_SHA:src/components/builder/BuilderSaveDialogContent.vue > src/components/builder/BuilderSaveDialogContent.vue
+```
+
+**Detection:** `pnpm typecheck` fails with "Cannot find module" or "X is not defined" after cherry-pick succeeds cleanly.
+
+### 6. Locale Files
 
 Usually adding new i18n keys — accept theirs, validate JSON:
 
@@ -176,8 +235,14 @@ gh pr checks $PR --watch --fail-fast && gh pr merge $PR --squash --admin
 8. **Always validate JSON** after resolving locale file conflicts
 9. **Dep refresh PRs** — skip on stable branches. Risk of transitive dep regressions outweighs audit cleanup. Cherry-pick individual CVE fixes instead.
 10. **Verify after each wave** — run `pnpm typecheck && pnpm test:unit` on the target branch after merging a batch. Catching breakage early prevents compounding errors.
-11. **Cloud-only PRs don't belong on core/\* branches** — app mode, cloud auth, and cloud-specific UI changes are irrelevant to local users. Always check PR scope against branch scope before backporting.
+11. **App mode and Firebase auth are NOT cloud-only** — they go to both core and cloud branches. Only team workspaces, cloud queue, and cloud-specific login are cloud-only.
 12. **Never admin-merge without CI** — `--admin` bypasses all branch protections including required status checks. A bulk session of 69 admin-merges shipped 3 test failures. Always wait for CI to pass first, or use `--auto --squash` which waits by design.
+13. **Accept-theirs regex breaks component rewrites** — when a PR migrates between component libraries (PrimeVue → Reka UI), the regex produces a broken hybrid. Use `git show SHA:path > path` to get the complete correct version instead.
+14. **Cherry-picks can silently bring in missing-dependency code** — if PR A references a composable introduced by PR B, cherry-picking A succeeds but typecheck fails. Always run typecheck after each wave and add missing files from the merge commit.
+15. **Fix PRs are expected** — plan for 1 fix PR per branch to resolve typecheck issues from conflict resolutions. This is normal, not a failure.
+16. **Use `--no-verify` in worktrees** — husky hooks fail in `/tmp/` worktrees. Always push/commit with `--no-verify`.
+17. **Automation success varies by branch** — core/1.42 got 18/26 auto-PRs (69%), cloud/1.42 got 1/25 (4%). Cloud branches diverge more. Plan for manual fallback.
+18. **Test-then-resolve pattern** — for branches with low automation success, run a dry-run loop to classify clean vs conflict PRs before processing. This is much faster than resolving conflicts serially.
 
 ## CI Failure Triage
 

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

@@ -2,26 +2,25 @@
 
 ## During Execution
 
-Maintain `execution-log.md` with per-branch tables:
+Maintain `execution-log.md` with per-branch tables (this is internal, markdown tables are fine here):
 
 ```markdown
-| PR#   | Title | CI Status                      | Status                            | Backport PR | Notes   |
-| ----- | ----- | ------------------------------ | --------------------------------- | ----------- | ------- |
-| #XXXX | Title | ✅ Pass / ❌ Fail / ⏳ Pending | ✅ Merged / ⏭️ Skip / ⏸️ Deferred | #YYYY       | Details |
+| PR#   | Title | Status | Backport PR | Notes   |
+| ----- | ----- | ------ | ----------- | ------- |
+| #XXXX | Title | merged | #YYYY       | Details |
 ```
 
 ## Wave Verification Log
 
-Track verification results per wave:
+Track verification results per wave within execution-log.md:
 
 ```markdown
-## Wave N Verification — TARGET_BRANCH
+Wave N Verification -- TARGET_BRANCH
 
 - PRs merged: #A, #B, #C
-- Typecheck: ✅ Pass / ❌ Fail
-- Unit tests: ✅ Pass / ❌ Fail
+- Typecheck: pass / fail
+- Fix PR: #YYYY (if needed)
 - Issues found: (if any)
-- Human review needed: (list any non-trivial conflict resolutions)
 ```
 
 ## Session Report Template
@@ -63,40 +62,42 @@ Track verification results per wave:
 - Feature branches that need tracking for future sessions?
 ```
 
-## Final Deliverable: Visual Summary
+## Final Deliverables
 
-At session end, generate a **mermaid diagram** showing all backported PRs organized by target branch and category (MUST/SHOULD), plus a summary table. Present this to the user as the final output.
+After all branches are complete and verified, generate these files in `~/temp/backport-session/`:
 
-```mermaid
-graph TD
-    subgraph branch1["☁️ cloud/X.XX — N PRs"]
-        C1["#XXXX title"]
-        C2["#XXXX title"]
-    end
+### 1. execution-log.md (internal)
 
-    subgraph branch2must["🔴 core/X.XX MUST — N PRs"]
-        M1["#XXXX title"]
-    end
+Per-branch tables with PR#, title, status, backport PR#, notes. Markdown tables are fine — this is for internal tracking, not Slack.
 
-    subgraph branch2should["🟡 core/X.XX SHOULD — N PRs"]
-        S1["#XXXX-#XXXX N auto-merged"]
-        S2["#XXXX-#XXXX N manual picks"]
-    end
+### 2. backport-author-accountability.md (Slack-compatible)
 
-    classDef cloudStyle fill:#1a3a5c,stroke:#4da6ff,color:#e0f0ff
-    classDef coreStyle fill:#1a4a2e,stroke:#4dff88,color:#e0ffe8
-    classDef mustStyle fill:#5c1a1a,stroke:#ff4d4d,color:#ffe0e0
-    classDef shouldStyle fill:#4a3a1a,stroke:#ffcc4d,color:#fff5e0
-```
+See SKILL.md "Final Deliverables" section. Plain text, no emojis/tables/headers/bold. Authors sorted alphabetically with PRs nested under each.
 
-Use the `mermaid` tool to render this diagram and present it alongside the summary table as the session's final deliverable.
+### 3. slack-status-update.md (Slack-compatible)
+
+See SKILL.md "Final Deliverables" section. Plain text summary that pastes cleanly into Slack. Includes branch counts, notable fixes, conflict patterns, author count.
+
+## Slack Formatting Rules
+
+Both shareable files (author accountability + status update) must follow these rules:
+
+- No emojis (no checkmarks, no arrows, no icons)
+- No markdown tables (use plain lists with dashes)
+- No headers (no # or ##)
+- No bold (\*_) or italic (_)
+- No inline code backticks
+- Use -- instead of em dash
+- Use plain dashes (-) for lists with 4-space indent for nesting
+- Line breaks between sections for readability
+
+These files should paste directly into a Slack message and look clean.
 
 ## Files to Track
 
-- `candidate_list.md` — all candidates per branch
-- `decisions.md` — MUST/SHOULD/SKIP with rationale
-- `wave-plan.md` — execution order
-- `execution-log.md` — real-time status
-- `backport-session-report.md` — final summary
+All in `~/temp/backport-session/`:
 
-All in `~/temp/backport-session/`.
+- `execution-plan.md` -- approved PRs with merge SHAs (input)
+- `execution-log.md` -- real-time status with per-branch tables (internal)
+- `backport-author-accountability.md` -- PRs grouped by author (Slack-compatible)
+- `slack-status-update.md` -- session summary (Slack-compatible)

.claude/skills/comfy-qa/REPRODUCE.md

@@ -0,0 +1,278 @@
+---
+name: reproduce-issue
+description: 'Reproduce a GitHub issue by researching prerequisites, setting up the environment (custom nodes, workflows, settings), and interactively exploring ComfyUI via playwright-cli until the bug is confirmed. Then records a clean demo video.'
+---
+
+# Issue Reproduction Skill
+
+Reproduce a reported GitHub issue against a running ComfyUI instance. This skill uses an interactive, agent-driven approach — not a static script. You will research, explore, retry, and adapt until the bug is reproduced, then record a clean demo.
+
+## Architecture
+
+Two videos are produced:
+
+1. **Research video** — the full exploration session: installing deps, trying things, failing, retrying, figuring out the bug. Valuable for debugging context.
+2. **Reproduce video** — a clean, minimal recording of just the reproduction steps. This is the demo you'd attach to the issue.
+
+```
+Phase 1: Research       → Read issue, understand prerequisites
+Phase 2: Environment    → Install custom nodes, load workflows, configure settings
+Phase 3: Explore        → [VIDEO 1: research] Interactively try to reproduce (retries OK)
+Phase 4: Record         → [VIDEO 2: reproduce] Clean recording of just the minimal repro steps
+Phase 5: Report         → Generate a structured reproduction report
+```
+
+## Prerequisites
+
+- ComfyUI server running (ask user for URL, default: `http://127.0.0.1:8188`)
+- `playwright-cli` installed: `npm install -g @playwright/cli@latest`
+- `gh` CLI (authenticated, for reading issues)
+- ComfyUI backend with Python environment (for installing custom nodes)
+
+## Phase 1: Research the Issue
+
+1. Fetch the issue details:
+
+   ```bash
+   gh issue view <number> --repo Comfy-Org/ComfyUI_frontend --json title,body,comments
+   ```
+
+2. Extract from the issue body:
+   - **Reproduction steps** (the exact sequence)
+   - **Prerequisites**: specific workflows, custom nodes, settings, models
+   - **Environment**: OS, browser, ComfyUI version
+   - **Media**: screenshots or videos showing the bug
+
+3. Search the codebase for related code:
+   - Find the feature/component mentioned in the issue
+   - Understand how it works currently
+   - Identify what state the UI needs to be in
+
+## Phase 2: Environment Setup
+
+Set up everything the issue requires BEFORE attempting reproduction.
+
+### Custom Nodes
+
+If the issue mentions custom nodes:
+
+```bash
+# Find the custom node repo
+# Clone into ComfyUI's custom_nodes directory
+cd <comfyui_path>/custom_nodes
+git clone <custom_node_repo_url>
+
+# Install dependencies if needed
+cd <custom_node_name>
+pip install -r requirements.txt 2>/dev/null || true
+
+# Restart ComfyUI server to load the new nodes
+```
+
+### Workflows
+
+If the issue references a specific workflow:
+
+```bash
+# Download workflow JSON if a URL is provided
+curl -L "<workflow_url>" -o /tmp/test-workflow.json
+
+# Load it via the API
+curl -X POST http://127.0.0.1:8188/api/workflow \
+  -H "Content-Type: application/json" \
+  -d @/tmp/test-workflow.json
+```
+
+Or load via playwright-cli:
+
+```bash
+playwright-cli goto "http://127.0.0.1:8188"
+# Drag-and-drop or use File > Open to load the workflow
+```
+
+### Settings
+
+If the issue requires specific settings:
+
+```bash
+# Use playwright-cli to open settings and change them
+playwright-cli press "Control+,"
+playwright-cli snapshot
+# Find and modify the relevant setting
+```
+
+## Phase 3: Interactive Exploration — Research Video
+
+Start recording the **research video** (Video 1). This captures the full exploration — mistakes, retries, dead ends — all valuable context.
+
+```bash
+# Open browser and start video recording
+playwright-cli open "http://127.0.0.1:8188"
+playwright-cli video-start
+
+# Take a snapshot to see current state
+playwright-cli snapshot
+
+# Interact based on what you see
+playwright-cli click <ref>
+playwright-cli fill <ref> "text"
+playwright-cli press "Control+s"
+
+# Check results
+playwright-cli snapshot
+playwright-cli screenshot --filename=/tmp/qa/research-step-1.png
+```
+
+### Key Principles
+
+- **Observe before acting**: Always `snapshot` before interacting
+- **Retry and adapt**: If a step fails, try a different approach
+- **Document what works**: Keep notes on which steps trigger the bug
+- **Don't give up**: Try multiple approaches if the first doesn't work
+- **Establish prerequisites**: Many bugs require specific UI state:
+  - Save a workflow first (File > Save)
+  - Make changes to dirty the workflow
+  - Open multiple tabs
+  - Add specific node types
+  - Change settings
+  - Resize the window
+
+### Common ComfyUI Interactions via playwright-cli
+
+| Action              | Command                                                        |
+| ------------------- | -------------------------------------------------------------- |
+| Open hamburger menu | `playwright-cli click` on the C logo button                    |
+| Navigate menu       | `playwright-cli hover <ref>` then `playwright-cli click <ref>` |
+| Add node            | Double-click canvas → type node name → select from results     |
+| Connect nodes       | Drag from output slot to input slot                            |
+| Save workflow       | `playwright-cli press "Control+s"`                             |
+| Save As             | Menu > File > Save As                                          |
+| Select node         | Click on the node                                              |
+| Delete node         | Select → `playwright-cli press "Delete"`                       |
+| Right-click menu    | `playwright-cli click <ref> --button right`                    |
+| Keyboard shortcut   | `playwright-cli press "Control+z"`                             |
+
+## Phase 4: Record Clean Demo — Reproduce Video (max 5 minutes)
+
+Once the bug is confirmed, **stop the research video** and **close the research browser**:
+
+```bash
+playwright-cli video-stop
+playwright-cli close
+```
+
+Now start a **fresh browser session** for the clean reproduce video (Video 2).
+
+**IMPORTANT constraints:**
+
+- **Max 5 minutes** — the reproduce video must be short and focused
+- **No environment setup** — server, user, custom nodes are already set up from Phase 3. Just log in and go.
+- **No exploration** — you already know the exact steps. Execute them quickly and precisely.
+- **Start video recording immediately**, execute steps, stop. Don't leave the recording running while thinking.
+
+1. **Open browser and start recording**:
+
+   ```bash
+   playwright-cli open "http://127.0.0.1:8188"
+   playwright-cli video-start
+   ```
+
+2. **Execute only the minimal reproduction steps** — no exploration, no mistakes. Just the clean sequence that demonstrates the bug. You already know exactly what works from Phase 3.
+
+3. **Take key screenshots** at critical moments:
+
+   ```bash
+   playwright-cli screenshot --filename=/tmp/qa/before-bug.png
+   # ... trigger the bug ...
+   playwright-cli screenshot --filename=/tmp/qa/bug-visible.png
+   ```
+
+4. **Stop recording and close** immediately after the bug is demonstrated:
+   ```bash
+   playwright-cli video-stop
+   playwright-cli close
+   ```
+
+## Phase 5: Generate Report
+
+Create a reproduction report at `tmp/qa/reproduce-report.md`:
+
+```markdown
+# Issue Reproduction Report
+
+- **Issue**: <issue_url>
+- **Title**: <issue_title>
+- **Date**: <today>
+- **Status**: Reproduced / Not Reproduced / Partially Reproduced
+
+## Environment
+
+- ComfyUI Server: <url>
+- OS: <os>
+- Custom Nodes Installed: <list or "none">
+- Settings Changed: <list or "none">
+
+## Prerequisites
+
+List everything that had to be set up before the bug could be triggered:
+
+1. ...
+2. ...
+
+## Reproduction Steps
+
+Minimal steps to reproduce (the clean sequence):
+
+1. ...
+2. ...
+3. ...
+
+## Expected Behavior
+
+<from the issue>
+
+## Actual Behavior
+
+<what actually happened>
+
+## Evidence
+
+- Research video: `research-video/video.webm` (full exploration session)
+- Reproduce video: `reproduce-video/video.webm` (clean minimal repro)
+- Screenshots: `before-bug.png`, `bug-visible.png`
+
+## Root Cause Analysis (if identified)
+
+<code pointers, hypothesis about what's going wrong>
+
+## Notes
+
+<any additional observations, workarounds discovered, related issues>
+```
+
+## Handling Failures
+
+If the bug **cannot be reproduced**:
+
+1. Document what you tried and why it didn't work
+2. Check if the issue was already fixed (search git log for related commits)
+3. Check if it's environment-specific (OS, browser, specific version)
+4. Set report status to "Not Reproduced" with detailed notes
+5. The report is still valuable — it saves others from repeating the same investigation
+
+## CI Integration
+
+In CI, this skill runs as a Claude Code agent with:
+
+- `ANTHROPIC_API_KEY` for Claude
+- `GEMINI_API_KEY` for initial issue analysis (optional)
+- ComfyUI server pre-started in the container
+- `playwright-cli` pre-installed
+
+The CI workflow:
+
+1. Gemini generates a reproduce guide (markdown) from the issue
+2. Claude agent receives the guide and runs this skill
+3. Claude explores interactively, installs dependencies, retries
+4. Claude records a clean demo once reproduced
+5. Video and report are uploaded as artifacts

.claude/skills/comfy-qa/SKILL.md

@@ -0,0 +1,283 @@
+---
+name: comfy-qa
+description: 'Comprehensive QA of ComfyUI frontend. Navigates all routes, tests all interactive features using playwright-cli, generates a report, and submits a draft PR. Works in CI and local environments, cross-platform.'
+---
+
+# ComfyUI Frontend QA Skill
+
+Automated quality assurance for the ComfyUI frontend. The pipeline reproduces reported bugs using Playwright E2E tests, records video evidence, and deploys reports to Cloudflare Pages.
+
+## Architecture Overview
+
+The QA pipeline uses a **three-phase approach**:
+
+1. **RESEARCH** — Claude writes Playwright E2E tests to reproduce bugs (assertion-backed, no hallucination)
+2. **REPRODUCE** — Deterministic replay of the research test with video recording
+3. **REPORT** — Deploy results to Cloudflare Pages with badge, video, and verdict
+
+### Key Design Decision
+
+Earlier iterations used AI vision (Gemini) to drive a browser and judge results from video. This was abandoned after discovering **AI reviewers hallucinate** — Gemini reported "REPRODUCED" when videos showed idle screens. The current approach uses **Playwright assertions** as the source of truth: if the test passes, the bug is proven.
+
+## Prerequisites
+
+- Node.js 22+
+- `pnpm` package manager
+- `gh` CLI (authenticated)
+- Playwright browsers: `npx playwright install chromium`
+- Environment variables:
+  - `GEMINI_API_KEY` — for PR analysis and video review
+  - `ANTHROPIC_API_KEY` — for Claude Agent SDK (research phase)
+  - `CLOUDFLARE_API_TOKEN` + `CLOUDFLARE_ACCOUNT_ID` — for report deployment
+
+## Pipeline Scripts
+
+| Script                            | Role                                                    | Model                         |
+| --------------------------------- | ------------------------------------------------------- | ----------------------------- |
+| `scripts/qa-analyze-pr.ts`        | Deep PR/issue analysis → QA guide                       | gemini-3.1-pro-preview        |
+| `scripts/qa-agent.ts`             | Research phase: Claude writes E2E tests                 | claude-sonnet-4-6 (Agent SDK) |
+| `scripts/qa-record.ts`            | Before/after video recording with Gemini-driven actions | gemini-3.1-pro-preview        |
+| `scripts/qa-reproduce.ts`         | Deterministic replay with narration                     | gemini-3-flash-preview        |
+| `scripts/qa-video-review.ts`      | Video comparison review                                 | gemini-3-flash-preview        |
+| `scripts/qa-generate-test.ts`     | Regression test generation from QA report               | gemini-3-flash-preview        |
+| `scripts/qa-deploy-pages.sh`      | Deploy to Cloudflare Pages + badge                      | —                             |
+| `scripts/qa-batch.sh`             | Batch-trigger QA for multiple issues                    | —                             |
+| `scripts/qa-report-template.html` | Report site (light/dark, seekbar, copy badge)           | —                             |
+
+## Triggering QA
+
+### Via GitHub Labels
+
+- **`qa-changes`** — Focused QA on a PR (Linux-only, before/after comparison)
+- **`qa-full`** — Full QA (3-OS matrix, after-only)
+- **`qa-issue`** — Reproduce a bug from an issue
+
+### Via Batch Script
+
+```bash
+# Trigger QA for specific issue numbers
+./scripts/qa-batch.sh 10394 10238 9996
+
+# From a triage file (top 5 Tier 1 issues)
+./scripts/qa-batch.sh --from tmp/issues.md --top 5
+
+# Preview without pushing
+./scripts/qa-batch.sh --dry-run 10394
+
+# Clean up old trigger branches
+./scripts/qa-batch.sh --cleanup
+```
+
+### Via Workflow Dispatch
+
+Go to Actions → "PR: QA" → Run workflow → choose mode (focused/full).
+
+## CI Workflow (`.github/workflows/pr-qa.yaml`)
+
+```
+resolve-matrix → analyze-pr ──┐
+                               ├→ qa-before (main branch, worktree build)
+                               ├→ qa-after  (PR branch)
+                               └→ report (video review, deploy, comment)
+```
+
+Before/after jobs run **in parallel** on separate runners for clean isolation.
+
+### Issue Reproduce Mode
+
+For issues (not PRs), the pipeline:
+
+1. Fetches the issue body and comments
+2. Runs `qa-analyze-pr.ts --type issue` to generate a QA guide
+3. Runs the research phase (Claude writes E2E test to reproduce)
+4. Records video of the test execution
+5. Posts results as a comment on the issue
+
+## Running Locally
+
+### Step 1: Environment Setup
+
+```bash
+# Ensure ComfyUI server is running
+# Default: http://127.0.0.1:8188
+
+# Install Playwright browsers
+npx playwright install chromium
+```
+
+### Step 2: Analyze the Issue/PR
+
+```bash
+# For a PR
+pnpm exec tsx scripts/qa-analyze-pr.ts \
+  --pr-number 10394 \
+  --repo Comfy-Org/ComfyUI_frontend \
+  --output-dir qa-guides
+
+# For an issue
+pnpm exec tsx scripts/qa-analyze-pr.ts \
+  --pr-number 10394 \
+  --repo Comfy-Org/ComfyUI_frontend \
+  --output-dir qa-guides \
+  --type issue
+```
+
+### Step 3: Record Before/After
+
+```bash
+# Before (main branch)
+pnpm exec tsx scripts/qa-record.ts \
+  --mode before \
+  --diff /tmp/pr-diff.txt \
+  --output-dir /tmp/qa-before \
+  --qa-guide qa-guides/qa-guide-1.json
+
+# After (PR branch)
+pnpm exec tsx scripts/qa-record.ts \
+  --mode after \
+  --diff /tmp/pr-diff.txt \
+  --output-dir /tmp/qa-after \
+  --qa-guide qa-guides/qa-guide-1.json
+```
+
+### Step 4: Review Videos
+
+```bash
+pnpm exec tsx scripts/qa-video-review.ts \
+  --artifacts-dir /tmp/qa-artifacts \
+  --video-file qa-session.mp4 \
+  --before-video qa-before-session.mp4 \
+  --output-dir /tmp/video-reviews \
+  --pr-context /tmp/pr-context.txt
+```
+
+## Research Phase Details (`qa-agent.ts`)
+
+Claude receives:
+
+- The issue description and comments
+- A QA guide from `qa-analyze-pr.ts`
+- An accessibility tree snapshot of the current UI
+
+Claude's tools:
+
+- **`inspect(selector?)`** — Read a11y tree to discover element selectors
+- **`writeTest(code)`** — Write a Playwright `.spec.ts` file
+- **`runTest()`** — Execute the test and get pass/fail + errors
+- **`done(verdict, summary, evidence, testCode)`** — Finish with verdict
+
+The test uses the project's Playwright fixtures (`comfyPageFixture`), giving access to `comfyPage.page`, `comfyPage.menu`, `comfyPage.settings`, etc.
+
+### Verdict Logic
+
+- **REPRODUCED** — Test passes (asserting the bug exists) → bug is proven
+- **NOT_REPRODUCIBLE** — Claude exhausted attempts, test cannot pass
+- **INCONCLUSIVE** — Agent timed out or encountered infrastructure issues
+
+Auto-completion: if a test passed but `done()` was never called, the pipeline auto-completes with REPRODUCED.
+
+## Manual QA (Fallback)
+
+When the automated pipeline isn't suitable (e.g., visual-only bugs, complex multi-step interactions), use **playwright-cli** for manual browser interaction:
+
+```bash
+# Install
+npm install -g @playwright/cli@latest
+
+# Open browser and navigate
+playwright-cli open http://127.0.0.1:8188
+
+# Get element references
+playwright-cli snapshot
+
+# Interact
+playwright-cli click e1
+playwright-cli fill e2 "test text"
+playwright-cli press Escape
+playwright-cli screenshot --filename=f.png
+```
+
+Snapshots return element references (`e1`, `e2`, …). Always run `snapshot` after navigation to refresh refs.
+
+## Manual QA Test Plan
+
+When performing manual QA (either via playwright-cli or the automated pipeline), systematically test each area below.
+
+### Application Load & Routes
+
+| Test              | Steps                                                        |
+| ----------------- | ------------------------------------------------------------ |
+| Root route loads  | Navigate to `/` — GraphView should render with canvas        |
+| User select route | Navigate to `/user-select` — user selection UI should appear |
+| 404 handling      | Navigate to `/nonexistent` — should handle gracefully        |
+
+### Canvas & Graph View
+
+| Test                      | Steps                                                          |
+| ------------------------- | -------------------------------------------------------------- |
+| Canvas renders            | The LiteGraph canvas is visible and interactive                |
+| Pan canvas                | Click and drag on empty canvas area                            |
+| Zoom in/out               | Use scroll wheel or Alt+=/Alt+-                                |
+| Add node via double-click | Double-click canvas to open search, type "KSampler", select it |
+| Delete node               | Select a node, press Delete key                                |
+| Connect nodes             | Drag from output slot to input slot                            |
+| Copy/Paste                | Select nodes, Ctrl+C then Ctrl+V                               |
+| Undo/Redo                 | Make changes, Ctrl+Z to undo, Ctrl+Y to redo                   |
+| Context menus             | Right-click node vs empty canvas — different menus             |
+
+### Sidebar Tabs
+
+| Test              | Steps                                 |
+| ----------------- | ------------------------------------- |
+| Workflows tab     | Press W — workflows sidebar opens     |
+| Node Library tab  | Press N — node library opens          |
+| Model Library tab | Press M — model library opens         |
+| Tab toggle        | Press same key again — sidebar closes |
+| Search in sidebar | Type in search box — results filter   |
+
+### Settings Dialog
+
+| Test             | Steps                                                |
+| ---------------- | ---------------------------------------------------- |
+| Open settings    | Press Ctrl+, or click settings button                |
+| Change a setting | Toggle a boolean setting — it persists after closing |
+| Search settings  | Type in settings search box — results filter         |
+| Close settings   | Press Escape or click close button                   |
+
+### Execution & Queue
+
+| Test           | Steps                                                 |
+| -------------- | ----------------------------------------------------- |
+| Queue prompt   | Load default workflow, click Queue — execution starts |
+| Queue progress | Progress indicator shows during execution             |
+| Interrupt      | Press Ctrl+Alt+Enter during execution — interrupts    |
+
+## Report Site
+
+Deployed to Cloudflare Pages at `https://comfy-qa.pages.dev/<branch>/`.
+
+Features:
+
+- Light/dark theme
+- Seekable video player with preload
+- Copy badge button (markdown)
+- Date-stamped badges (e.g., `QA0327`)
+- Vertical box badge for issues and PRs
+
+## Known Issues & Troubleshooting
+
+See `docs/qa/TROUBLESHOOTING.md` for common failures:
+
+- `set -euo pipefail` + grep with no match → append `|| true`
+- `__name is not defined` in `page.evaluate` → use `addScriptTag`
+- Cursor not visible in videos → monkey-patch `page.mouse` methods
+- Agent not calling `done()` → auto-complete from passing test
+
+## Backlog
+
+See `docs/qa/backlog.md` for planned improvements:
+
+- **Type B comparison**: Different commits for regression detection
+- **Type C comparison**: Cross-browser testing
+- **Pre-seed assets**: Upload test images before recording
+- **Lazy a11y tree**: Reduce token usage with `inspect(selector)` vs full dump

.claude/skills/comfy-qa/scripts/qa-agent.ts

@@ -0,0 +1,668 @@
+#!/usr/bin/env tsx
+/**
+ * QA Research Phase — Claude writes & debugs E2E tests to reproduce bugs
+ *
+ * Instead of driving a browser interactively, Claude:
+ * 1. Reads the issue + a11y snapshot of the UI
+ * 2. Writes a Playwright E2E test (.spec.ts) that reproduces the bug
+ * 3. Runs the test → reads errors → rewrites → repeats until it works
+ * 4. Outputs the passing test + verdict
+ *
+ * Tools:
+ *   - inspect(selector) — read a11y tree to understand UI state
+ *   - writeTest(code) — write a Playwright test file
+ *   - runTest() — execute the test and get results
+ *   - done(verdict, summary, testCode) — finish with the working test
+ */
+
+import type { Page } from '@playwright/test'
+/* eslint-disable import-x/no-unresolved */
+// @ts-expect-error — claude-agent-sdk has no type declarations for vue-tsc
+import { query, tool, createSdkMcpServer } from '@anthropic-ai/claude-agent-sdk'
+/* eslint-enable import-x/no-unresolved */
+import { z } from 'zod'
+import { mkdirSync, readFileSync, writeFileSync } from 'fs'
+import { execSync } from 'child_process'
+
+// ── Types ──
+
+interface ResearchOptions {
+  page: Page
+  issueContext: string
+  qaGuide: string
+  outputDir: string
+  serverUrl: string
+  anthropicApiKey?: string
+  maxTurns?: number
+  timeBudgetMs?: number
+}
+
+export type ReproMethod = 'e2e_test' | 'video' | 'both' | 'none'
+
+export interface ResearchResult {
+  verdict: 'REPRODUCED' | 'NOT_REPRODUCIBLE' | 'INCONCLUSIVE'
+  reproducedBy: ReproMethod
+  summary: string
+  evidence: string
+  testCode: string
+  videoScript?: string
+  log: Array<{
+    turn: number
+    timestampMs: number
+    toolName: string
+    toolInput: unknown
+    toolResult: string
+  }>
+}
+
+// ── Main research function ──
+
+export async function runResearchPhase(
+  opts: ResearchOptions
+): Promise<ResearchResult> {
+  const { page, issueContext, qaGuide, outputDir, serverUrl, anthropicApiKey } =
+    opts
+  const maxTurns = opts.maxTurns ?? 50
+
+  let agentDone = false
+  let finalVerdict: ResearchResult['verdict'] = 'INCONCLUSIVE'
+  let finalReproducedBy: ReproMethod = 'none'
+  let finalSummary = 'Agent did not complete'
+  let finalEvidence = ''
+  let finalTestCode = ''
+  let finalVideoScript = ''
+  let turnCount = 0
+  let lastPassedTurn = -1
+  const startTime = Date.now()
+  const researchLog: ResearchResult['log'] = []
+
+  const testDir = `${outputDir}/research`
+  mkdirSync(testDir, { recursive: true })
+  const testPath = `${testDir}/reproduce.spec.ts`
+
+  // Get initial a11y snapshot for context
+  let initialA11y = ''
+  try {
+    initialA11y = await page.locator('body').ariaSnapshot({ timeout: 5000 })
+    initialA11y = initialA11y.slice(0, 3000)
+  } catch {
+    initialA11y = '(could not capture initial a11y snapshot)'
+  }
+
+  // ── Tool: inspect ──
+  const inspectTool = tool(
+    'inspect',
+    'Read the current accessibility tree to understand UI state. Use this to discover element names, roles, and selectors for your test.',
+    {
+      selector: z
+        .string()
+        .optional()
+        .describe(
+          'Optional filter — only show elements matching this name/role. Omit for full tree.'
+        )
+    },
+    async (args: { selector?: string }) => {
+      let resultText: string
+      try {
+        const ariaText = await page
+          .locator('body')
+          .ariaSnapshot({ timeout: 5000 })
+        if (args.selector) {
+          const lines = ariaText.split('\n')
+          const matches = lines.filter((l: string) =>
+            l.toLowerCase().includes(args.selector!.toLowerCase())
+          )
+          resultText =
+            matches.length > 0
+              ? `Found "${args.selector}":\n${matches.slice(0, 15).join('\n')}`
+              : `"${args.selector}" not found. Full tree:\n${ariaText.slice(0, 2000)}`
+        } else {
+          resultText = ariaText.slice(0, 3000)
+        }
+      } catch (e) {
+        resultText = `inspect failed: ${e instanceof Error ? e.message : e}`
+      }
+
+      researchLog.push({
+        turn: turnCount,
+        timestampMs: Date.now() - startTime,
+        toolName: 'inspect',
+        toolInput: args,
+        toolResult: resultText.slice(0, 500)
+      })
+
+      return { content: [{ type: 'text' as const, text: resultText }] }
+    }
+  )
+
+  // ── Tool: readFixture ──
+  const readFixtureTool = tool(
+    'readFixture',
+    'Read a fixture or helper file from browser_tests/fixtures/ to understand the API. Use this to discover available methods on comfyPage helpers before writing your test.',
+    {
+      path: z
+        .string()
+        .describe(
+          'Relative path within browser_tests/fixtures/, e.g. "helpers/CanvasHelper.ts" or "components/Topbar.ts" or "ComfyPage.ts"'
+        )
+    },
+    async (args: { path: string }) => {
+      let resultText: string
+      try {
+        const fullPath = `${projectRoot}/browser_tests/fixtures/${args.path}`
+        const content = readFileSync(fullPath, 'utf-8')
+        resultText = content.slice(0, 4000)
+        if (content.length > 4000) {
+          resultText += `\n\n... (truncated, ${content.length} total chars)`
+        }
+      } catch (e) {
+        resultText = `Could not read fixture: ${e instanceof Error ? e.message : e}`
+      }
+
+      researchLog.push({
+        turn: turnCount,
+        timestampMs: Date.now() - startTime,
+        toolName: 'readFixture',
+        toolInput: args,
+        toolResult: resultText.slice(0, 500)
+      })
+
+      return { content: [{ type: 'text' as const, text: resultText }] }
+    }
+  )
+
+  // ── Tool: readTest ──
+  const readTestTool = tool(
+    'readTest',
+    'Read an existing E2E test file from browser_tests/tests/ to learn patterns and conventions used in this project.',
+    {
+      path: z
+        .string()
+        .describe(
+          'Relative path within browser_tests/tests/, e.g. "workflow.spec.ts" or "subgraph.spec.ts"'
+        )
+    },
+    async (args: { path: string }) => {
+      let resultText: string
+      try {
+        const fullPath = `${projectRoot}/browser_tests/tests/${args.path}`
+        const content = readFileSync(fullPath, 'utf-8')
+        resultText = content.slice(0, 4000)
+        if (content.length > 4000) {
+          resultText += `\n\n... (truncated, ${content.length} total chars)`
+        }
+      } catch (e) {
+        // List available test files if the path doesn't exist
+        try {
+          const { readdirSync } = await import('fs')
+          const files = readdirSync(`${projectRoot}/browser_tests/tests/`)
+            .filter((f: string) => f.endsWith('.spec.ts'))
+            .slice(0, 30)
+          resultText = `File not found: ${args.path}\n\nAvailable test files:\n${files.join('\n')}`
+        } catch {
+          resultText = `Could not read test: ${e instanceof Error ? e.message : e}`
+        }
+      }
+
+      researchLog.push({
+        turn: turnCount,
+        timestampMs: Date.now() - startTime,
+        toolName: 'readTest',
+        toolInput: args,
+        toolResult: resultText.slice(0, 500)
+      })
+
+      return { content: [{ type: 'text' as const, text: resultText }] }
+    }
+  )
+
+  // ── Tool: writeTest ──
+  const writeTestTool = tool(
+    'writeTest',
+    'Write a Playwright E2E test file that reproduces the bug. The test should assert the broken behavior exists.',
+    {
+      code: z
+        .string()
+        .describe('Complete Playwright test file content (.spec.ts)')
+    },
+    async (args: { code: string }) => {
+      writeFileSync(testPath, args.code)
+
+      researchLog.push({
+        turn: turnCount,
+        timestampMs: Date.now() - startTime,
+        toolName: 'writeTest',
+        toolInput: { path: testPath, codeLength: args.code.length },
+        toolResult: `Test written to ${testPath} (${args.code.length} chars)`
+      })
+
+      return {
+        content: [
+          {
+            type: 'text' as const,
+            text: `Test written to ${testPath}. Use runTest() to execute it.`
+          }
+        ]
+      }
+    }
+  )
+
+  // ── Tool: runTest ──
+  // Place test in browser_tests/ so Playwright config finds fixtures
+  const projectRoot = process.cwd()
+  const browserTestPath = `${projectRoot}/browser_tests/tests/qa-reproduce.spec.ts`
+
+  const runTestTool = tool(
+    'runTest',
+    'Run the Playwright test and get results. Returns stdout/stderr including assertion errors.',
+    {},
+    async () => {
+      turnCount++
+      // Copy the test to browser_tests/tests/ where Playwright expects it
+      const { copyFileSync } = await import('fs')
+      try {
+        copyFileSync(testPath, browserTestPath)
+      } catch {
+        // directory may not exist
+        mkdirSync(`${projectRoot}/browser_tests/tests`, { recursive: true })
+        copyFileSync(testPath, browserTestPath)
+      }
+
+      let resultText: string
+      try {
+        const output = execSync(
+          `cd "${projectRoot}" && npx playwright test browser_tests/tests/qa-reproduce.spec.ts --reporter=list --timeout=30000 --retries=0 --workers=1 2>&1`,
+          {
+            timeout: 90000,
+            encoding: 'utf-8',
+            env: {
+              ...process.env,
+              COMFYUI_BASE_URL: serverUrl
+            }
+          }
+        )
+        resultText = `TEST PASSED:\n${output.slice(-1500)}`
+      } catch (e) {
+        const err = e as { stdout?: string; stderr?: string; message?: string }
+        const output = (err.stdout || '') + '\n' + (err.stderr || '')
+        resultText = `TEST FAILED:\n${output.slice(-2000)}`
+      }
+
+      researchLog.push({
+        turn: turnCount,
+        timestampMs: Date.now() - startTime,
+        toolName: 'runTest',
+        toolInput: { testPath },
+        toolResult: resultText.slice(0, 1000)
+      })
+
+      // Auto-save passing test code for fallback completion — but only if
+      // the test contains a bug-specific assertion (not just a discovery/debug test)
+      if (resultText.startsWith('TEST PASSED')) {
+        try {
+          const code = readFileSync(browserTestPath, 'utf-8')
+          const hasBugAssertion =
+            /expect\s*\(/.test(code) &&
+            !/^\s*expect\([^)]+\)\.toBeDefined\(\)/m.test(code) &&
+            !/^\s*expect\([^)]+\)\.toBeGreaterThan\(0\)/m.test(code) &&
+            !/Inspect|Find|Debug|discover/i.test(
+              code.match(/test\(['"`]([^'"`]+)/)?.[1] ?? ''
+            )
+          if (hasBugAssertion) {
+            finalTestCode = code
+            lastPassedTurn = turnCount
+          }
+        } catch {
+          // ignore
+        }
+        resultText +=
+          '\n\n⚠️ Test PASSED — call done() now with verdict REPRODUCED and the test code. Do NOT write more tests.'
+      }
+
+      return { content: [{ type: 'text' as const, text: resultText }] }
+    }
+  )
+
+  // ── Tool: done ──
+  const doneTool = tool(
+    'done',
+    'Finish research with verdict and the final test code.',
+    {
+      verdict: z.enum(['REPRODUCED', 'NOT_REPRODUCIBLE', 'INCONCLUSIVE']),
+      reproducedBy: z
+        .enum(['e2e_test', 'video', 'both', 'none'])
+        .describe(
+          'How the bug was proven: e2e_test = Playwright assertion passed, video = visual evidence only, both = both methods, none = not reproduced'
+        ),
+      summary: z.string().describe('What you found and why'),
+      evidence: z.string().describe('Test output that proves the verdict'),
+      testCode: z
+        .string()
+        .describe(
+          'Final Playwright test code. If REPRODUCED, this test asserts the bug exists and passes.'
+        ),
+      videoScript: z
+        .string()
+        .optional()
+        .describe(
+          'Demowright video script for Phase 2 demo recording. REQUIRED when verdict is REPRODUCED. A separate test file using createVideoScript with title, segments, and outro. Do NOT include demowright imports in testCode.'
+        )
+    },
+    async (args: {
+      verdict: ResearchResult['verdict']
+      reproducedBy: ReproMethod
+      summary: string
+      evidence: string
+      testCode: string
+      videoScript?: string
+    }) => {
+      agentDone = true
+      finalVerdict = args.verdict
+      finalReproducedBy = args.reproducedBy
+      finalSummary = args.summary
+      finalEvidence = args.evidence
+      finalTestCode = args.testCode
+      finalVideoScript = args.videoScript ?? ''
+      writeFileSync(testPath, args.testCode)
+      if (args.videoScript) {
+        writeFileSync(`${outputDir}/video-script.spec.ts`, args.videoScript)
+      }
+      return {
+        content: [
+          { type: 'text' as const, text: `Research complete: ${args.verdict}` }
+        ]
+      }
+    }
+  )
+
+  // ── MCP Server ──
+  const server = createSdkMcpServer({
+    name: 'qa-research',
+    version: '1.0.0',
+    tools: [
+      inspectTool,
+      readFixtureTool,
+      readTestTool,
+      writeTestTool,
+      runTestTool,
+      doneTool
+    ]
+  })
+
+  // ── System prompt ──
+  const systemPrompt = `You are a senior QA engineer who writes Playwright E2E tests to reproduce reported bugs.
+
+## Your tools
+- inspect(selector?) — Read the accessibility tree to understand the current UI. Use to discover selectors, element names, and UI state.
+- readFixture(path) — Read fixture source code from browser_tests/fixtures/. Use to discover available methods. E.g. "helpers/CanvasHelper.ts", "components/Topbar.ts", "ComfyPage.ts"
+- readTest(path) — Read an existing test from browser_tests/tests/ to learn patterns. E.g. "workflow.spec.ts". Pass any name to list available files.
+- writeTest(code) — Write a Playwright test file (.spec.ts)
+- runTest() — Execute the test and get results (pass/fail + errors)
+- done(verdict, summary, evidence, testCode) — Finish with the final test
+
+## Workflow
+1. Read the issue description carefully
+2. Use inspect() to understand the current UI state and discover element selectors
+3. If unsure about the fixture API, use readFixture() to read the relevant helper source code
+4. If unsure about test patterns, use readTest() to read an existing test for reference
+5. Write a Playwright test that:
+   - Performs the exact reproduction steps from the issue
+   - Asserts the BROKEN behavior (the bug) — so the test PASSES when the bug exists
+6. Run the test with runTest()
+7. If it fails: read the error, fix the test, run again (max 5 attempts)
+8. Call done() with the final verdict and test code
+
+## Test writing guidelines
+- Import the project fixture: \`import { comfyPageFixture as test } from '../fixtures/ComfyPage'\`
+- Import expect: \`import { expect } from '@playwright/test'\`
+- The fixture provides \`comfyPage\` which has all the helpers listed below
+- If the bug IS present, the test should PASS. If the bug is fixed, the test would FAIL.
+- Keep tests focused and minimal — test ONLY the reported bug
+- Write ONE test, not multiple. Focus on the single clearest reproduction.
+- The test file will be placed in browser_tests/tests/qa-reproduce.spec.ts
+- Use \`comfyPage.nextFrame()\` after interactions that trigger UI updates
+- NEVER use \`page.waitForTimeout()\` — use Locator actions and retrying assertions instead
+- ALWAYS call done() when finished, even if the test passed — do not keep iterating after a passing test
+- Use \`expect.poll()\` for async assertions: \`await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(8)\`
+- CRITICAL: Your assertions must be SPECIFIC TO THE BUG. A test that asserts \`expect(count).toBeGreaterThan(0)\` proves nothing — it would pass even without the bug. Instead assert the exact broken state, e.g. \`expect(clonedWidgets).toHaveLength(0)\` (missing widgets) or \`expect(zIndex).toBeLessThan(parentZIndex)\` (wrong z-order). If a test passes trivially, it's a false positive.
+- NEVER write "debug", "discovery", or "inspect node types" tests. These waste turns and produce false REPRODUCED verdicts. If you need to discover node type names, use inspect() or readFixture() — not a passing test.
+- If you cannot write a bug-specific assertion, call done() with verdict NOT_REPRODUCIBLE and explain why.
+
+## ComfyPage Fixture API Reference
+
+### Core properties
+- \`comfyPage.page\` — raw Playwright Page
+- \`comfyPage.canvas\` — Locator for #graph-canvas
+- \`comfyPage.queueButton\` — "Queue Prompt" button
+- \`comfyPage.runButton\` — "Run" button (new UI)
+- \`comfyPage.confirmDialog\` — ConfirmDialog (has .confirm, .delete, .overwrite, .reject locators + .click(name) method)
+- \`comfyPage.nextFrame()\` — wait for next requestAnimationFrame
+- \`comfyPage.setup()\` — navigate + wait for app ready (called automatically by fixture)
+
+### Menu (comfyPage.menu)
+- \`comfyPage.menu.topbar\` — Topbar helper:
+  - \`.triggerTopbarCommand(['File', 'Save As'])\` — navigate menu hierarchy
+  - \`.openTopbarMenu()\` / \`.closeTopbarMenu()\` — open/close hamburger
+  - \`.openSubmenu('File')\` — hover to open submenu, returns submenu Locator
+  - \`.getTabNames()\` — get all open workflow tab names
+  - \`.getActiveTabName()\` — get active tab name
+  - \`.getWorkflowTab(name)\` — get tab Locator
+  - \`.closeWorkflowTab(name)\` — close a tab
+  - \`.saveWorkflow(name)\` / \`.saveWorkflowAs(name)\` / \`.exportWorkflow(name)\`
+  - \`.switchTheme('dark' | 'light')\`
+- \`comfyPage.menu.workflowsTab\` — WorkflowsSidebarTab:
+  - \`.open()\` / \`.close()\` — toggle workflows sidebar
+  - \`.getTopLevelSavedWorkflowNames()\` — list saved workflow names
+- \`comfyPage.menu.nodeLibraryTab\` — NodeLibrarySidebarTab
+- \`comfyPage.menu.assetsTab\` — AssetsSidebarTab
+
+### Canvas (comfyPage.canvasOps)
+- \`.click({x, y})\` — click at position on canvas
+- \`.rightClick(x, y)\` — right-click (opens context menu)
+- \`.doubleClick()\` — double-click canvas (opens node search)
+- \`.clickEmptySpace()\` — click known empty area
+- \`.dragAndDrop(source, target)\` — drag from source to target position
+- \`.pan(offset, safeSpot?)\` — pan canvas by offset
+- \`.zoom(deltaY, steps?)\` — zoom via scroll wheel
+- \`.resetView()\` — reset zoom/pan to default
+- \`.getScale()\` / \`.setScale(n)\` — get/set canvas zoom
+- \`.getNodeCenterByTitle(title)\` — get screen coords of node center
+- \`.disconnectEdge()\` / \`.connectEdge()\` — default graph edge operations
+
+### Node Operations (comfyPage.nodeOps)
+- \`.getGraphNodesCount()\` — count all nodes
+- \`.getSelectedGraphNodesCount()\` — count selected nodes
+- \`.getNodes()\` — get all nodes
+- \`.getFirstNodeRef()\` — get NodeReference for first node
+- \`.getNodeRefById(id)\` — get NodeReference by ID
+- \`.getNodeRefsByType(type)\` — get all nodes of a type
+- \`.waitForGraphNodes(count)\` — wait until node count matches
+
+### Settings (comfyPage.settings)
+- \`.setSetting(id, value)\` — change a ComfyUI setting
+- \`.getSetting(id)\` — read current setting value
+
+### Keyboard (comfyPage.keyboard)
+- \`.undo()\` / \`.redo()\` — Ctrl+Z / Ctrl+Y
+- \`.bypass()\` — Ctrl+B
+- \`.selectAll()\` — Ctrl+A
+- \`.ctrlSend(key)\` — send Ctrl+key
+
+### Workflow (comfyPage.workflow)
+- \`.loadWorkflow(name)\` — load from browser_tests/assets/{name}.json
+- \`.setupWorkflowsDirectory(structure)\` — setup test directory
+- \`.deleteWorkflow(name)\`
+- \`.isCurrentWorkflowModified()\` — check dirty state
+
+### Context Menu (comfyPage.contextMenu)
+- \`.openFor(locator)\` — right-click locator and wait for menu
+- \`.clickMenuItem(name)\` — click a menu item by name
+- \`.isVisible()\` — check if context menu is showing
+- \`.assertHasItems(items)\` — assert menu contains items
+
+### Other helpers
+- \`comfyPage.settingDialog\` — SettingDialog component
+- \`comfyPage.searchBox\` / \`comfyPage.searchBoxV2\` — node search
+- \`comfyPage.toast\` — ToastHelper (\`.visibleToasts\`)
+- \`comfyPage.subgraph\` — SubgraphHelper
+- \`comfyPage.vueNodes\` — VueNodeHelpers
+- \`comfyPage.bottomPanel\` — BottomPanel
+- \`comfyPage.clipboard\` — ClipboardHelper
+- \`comfyPage.dragDrop\` — DragDropHelper
+
+### Available fixture files (use readFixture to explore)
+- ComfyPage.ts — main fixture with all helpers
+- helpers/CanvasHelper.ts, NodeOperationsHelper.ts, WorkflowHelper.ts
+- helpers/KeyboardHelper.ts, SettingsHelper.ts, SubgraphHelper.ts
+- components/Topbar.ts, ContextMenu.ts, SettingDialog.ts, SidebarTab.ts
+
+## Video Script (IMPORTANT — provide via done() tool)
+
+When calling done(), provide a \`videoScript\` parameter with a SEPARATE test file that uses demowright's createVideoScript.
+Do NOT put demowright imports in testCode — they won't resolve in Phase 1.
+
+The videoScript is a complete, standalone Playwright test file for Phase 2 demo recording:
+
+\`\`\`typescript
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { createVideoScript } from 'demowright/video-script'
+
+test('Demo: Bug Title', async ({ comfyPage }) => {
+  // IMPORTANT: ALL setup code MUST go here BEFORE createVideoScript()
+  // so the title card is the FIRST thing viewers see in the video
+  await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+  await comfyPage.workflow.setupWorkflowsDirectory({})
+
+  const script = createVideoScript()
+    .title('Bug Title Here', { subtitle: 'Issue #NNNN', durationMs: 4000 })
+    .segment('Step 1: description of what we do', async (pace) => {
+      await pace()  // narration finishes FIRST
+      await comfyPage.menu.topbar.saveWorkflow('name')  // THEN action
+      await comfyPage.page.waitForTimeout(2000)  // pause for viewer
+    })
+    .segment('Bug evidence: what we see proves the bug', async (pace) => {
+      await pace()
+      await comfyPage.page.waitForTimeout(5000)  // hold on evidence
+    })
+    .outro({ text: 'Bug Reproduced', subtitle: 'Summary' })
+
+  await script.render(comfyPage.page)
+})
+\`\`\`
+
+Key API:
+- \`.title(text, {subtitle?, durationMs?})\` — title card (4s default)
+- \`.segment(narrationText, async (pace) => { await pace(); ...actions... })\` — TTS narrated step
+- \`.outro({text?, subtitle?, durationMs?})\` — ending card
+- \`pace()\` — wait for narration audio to finish
+
+CRITICAL TIMING: Call \`await pace()\` FIRST in each segment, BEFORE the Playwright actions.
+This makes the narration play and finish, THEN the actions execute — so viewers hear what's about
+to happen before it happens. Pattern:
+
+\`\`\`typescript
+.segment('Now we save the workflow as a new name', async (pace) => {
+  await pace()  // narration finishes first
+  await comfyPage.menu.topbar.saveWorkflowAs('new-name')  // then action happens
+  await comfyPage.page.waitForTimeout(2000)  // pause so viewer sees the result
+})
+\`\`\`
+
+IMPORTANT RULES for videoScript:
+1. You MUST provide videoScript when verdict is REPRODUCED — every reproduced bug needs a narrated demo
+2. ALL setup code (setSetting, setupWorkflowsDirectory) goes BEFORE createVideoScript() — title card must be first thing in video
+3. Call \`await pace()\` FIRST in each segment callback, BEFORE actions
+4. Add \`waitForTimeout(2000)\` after each action so viewers can see the result
+5. Final evidence segment: hold for 5+ seconds
+6. Reproduce the same steps as testCode but slower with clear narration
+
+## Current UI state (accessibility tree)
+${initialA11y}
+
+${qaGuide ? `## QA Analysis Guide\n${qaGuide}\n` : ''}
+## Issue to Reproduce
+${issueContext}`
+
+  // ── Run the agent ──
+  console.warn('Starting research phase (Claude writes E2E tests)...')
+
+  try {
+    for await (const message of query({
+      prompt:
+        'Write a Playwright E2E test that reproduces the reported bug. Use inspect() to discover selectors, readFixture() or readTest() if you need to understand the fixture API or see existing test patterns, writeTest() to write the test, runTest() to execute it. Iterate until it works or you determine the bug cannot be reproduced.',
+      options: {
+        model: 'claude-sonnet-4-6',
+        systemPrompt,
+        ...(anthropicApiKey ? { apiKey: anthropicApiKey } : {}),
+        maxTurns,
+        mcpServers: { 'qa-research': server },
+        allowedTools: [
+          'mcp__qa-research__inspect',
+          'mcp__qa-research__readFixture',
+          'mcp__qa-research__readTest',
+          'mcp__qa-research__writeTest',
+          'mcp__qa-research__runTest',
+          'mcp__qa-research__done'
+        ]
+      }
+    })) {
+      if (message.type === 'assistant' && message.message?.content) {
+        for (const block of message.message.content) {
+          if ('text' in block && block.text) {
+            console.warn(`  Claude: ${block.text.slice(0, 200)}`)
+          }
+          if ('name' in block) {
+            console.warn(
+              `  Tool: ${block.name}(${JSON.stringify(block.input).slice(0, 100)})`
+            )
+          }
+        }
+      }
+      if (agentDone) break
+    }
+  } catch (e) {
+    const errMsg = e instanceof Error ? e.message : String(e)
+    console.warn(`Research error: ${errMsg}`)
+
+    // Detect billing/auth errors and surface them clearly
+    if (
+      errMsg.includes('Credit balance is too low') ||
+      errMsg.includes('insufficient_quota') ||
+      errMsg.includes('rate_limit')
+    ) {
+      finalSummary = `API error: ${errMsg.slice(0, 200)}`
+      finalEvidence = 'Agent could not start due to API billing/auth issue'
+      console.warn(
+        '::error::Anthropic API credits exhausted — cannot run research phase'
+      )
+    }
+  }
+
+  // Auto-complete: if a test passed but done() was never called, use the passing test
+  if (!agentDone && lastPassedTurn >= 0 && finalTestCode) {
+    console.warn(
+      `Auto-completing: test passed at turn ${lastPassedTurn} but done() was not called`
+    )
+    finalVerdict = 'REPRODUCED'
+    finalReproducedBy = 'e2e_test'
+    finalSummary = `Test passed at turn ${lastPassedTurn} (auto-completed — agent did not call done())`
+    finalEvidence = `Test passed with exit code 0`
+  }
+
+  const result: ResearchResult = {
+    verdict: finalVerdict,
+    reproducedBy: finalReproducedBy,
+    summary: finalSummary,
+    evidence: finalEvidence,
+    testCode: finalTestCode,
+    videoScript: finalVideoScript || undefined,
+    log: researchLog
+  }
+
+  writeFileSync(`${testDir}/research-log.json`, JSON.stringify(result, null, 2))
+  console.warn(
+    `Research complete: ${finalVerdict} (${researchLog.length} tool calls)`
+  )
+
+  return result
+}

.claude/skills/comfy-qa/scripts/qa-analyze-pr.test.ts

@@ -0,0 +1,84 @@
+import { describe, expect, it } from 'vitest'
+
+import { extractMediaUrls } from './qa-analyze-pr'
+
+describe('extractMediaUrls', () => {
+  it('extracts markdown image URLs', () => {
+    const text = '![screenshot](https://example.com/image.png)'
+    expect(extractMediaUrls(text)).toEqual(['https://example.com/image.png'])
+  })
+
+  it('extracts multiple markdown images', () => {
+    const text = [
+      '![before](https://example.com/before.png)',
+      'Some text',
+      '![after](https://example.com/after.jpg)'
+    ].join('\n')
+    expect(extractMediaUrls(text)).toEqual([
+      'https://example.com/before.png',
+      'https://example.com/after.jpg'
+    ])
+  })
+
+  it('extracts raw URLs with media extensions', () => {
+    const text = 'Check this: https://cdn.example.com/demo.mp4 for details'
+    expect(extractMediaUrls(text)).toEqual(['https://cdn.example.com/demo.mp4'])
+  })
+
+  it('extracts GitHub user-attachments URLs', () => {
+    const text =
+      'https://github.com/user-attachments/assets/abc12345-6789-0def-1234-567890abcdef'
+    expect(extractMediaUrls(text)).toEqual([
+      'https://github.com/user-attachments/assets/abc12345-6789-0def-1234-567890abcdef'
+    ])
+  })
+
+  it('extracts private-user-images URLs', () => {
+    const text =
+      'https://private-user-images.githubusercontent.com/12345/abcdef-1234?jwt=token123'
+    expect(extractMediaUrls(text)).toEqual([
+      'https://private-user-images.githubusercontent.com/12345/abcdef-1234?jwt=token123'
+    ])
+  })
+
+  it('extracts URLs with query parameters', () => {
+    const text = 'https://example.com/image.png?w=800&h=600'
+    expect(extractMediaUrls(text)).toEqual([
+      'https://example.com/image.png?w=800&h=600'
+    ])
+  })
+
+  it('deduplicates URLs', () => {
+    const text = [
+      '![img](https://example.com/same.png)',
+      '![img2](https://example.com/same.png)',
+      'Also https://example.com/same.png'
+    ].join('\n')
+    expect(extractMediaUrls(text)).toEqual(['https://example.com/same.png'])
+  })
+
+  it('returns empty array for empty input', () => {
+    expect(extractMediaUrls('')).toEqual([])
+  })
+
+  it('returns empty array for text with no media URLs', () => {
+    expect(extractMediaUrls('Just some text without any URLs')).toEqual([])
+  })
+
+  it('handles mixed media types', () => {
+    const text = [
+      '![screen](https://example.com/screenshot.png)',
+      'Video: https://example.com/demo.webm',
+      '![gif](https://example.com/animation.gif)'
+    ].join('\n')
+    const urls = extractMediaUrls(text)
+    expect(urls).toContain('https://example.com/screenshot.png')
+    expect(urls).toContain('https://example.com/demo.webm')
+    expect(urls).toContain('https://example.com/animation.gif')
+  })
+
+  it('ignores non-http URLs in markdown', () => {
+    const text = '![local](./local-image.png)'
+    expect(extractMediaUrls(text)).toEqual([])
+  })
+})

.claude/skills/comfy-qa/scripts/qa-analyze-pr.ts

@@ -0,0 +1,799 @@
+#!/usr/bin/env tsx
+/**
+ * QA PR Analysis Script
+ *
+ * Deeply analyzes a PR using Gemini Pro to generate targeted QA guides
+ * for before/after recording sessions. Fetches PR thread, extracts media,
+ * and produces structured test plans.
+ *
+ * Usage:
+ *   pnpm exec tsx scripts/qa-analyze-pr.ts \
+ *     --pr-number 10270 \
+ *     --repo owner/repo \
+ *     --output-dir qa-guides/ \
+ *     [--model gemini-3.1-pro-preview]
+ *
+ * Env: GEMINI_API_KEY (required)
+ */
+
+import { execSync } from 'node:child_process'
+import { mkdirSync, readFileSync, writeFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+import { GoogleGenerativeAI } from '@google/generative-ai'
+
+// ── Types ──
+
+interface QaGuideStep {
+  action: string
+  description: string
+  expected_before?: string
+  expected_after?: string
+}
+
+interface QaGuide {
+  summary: string
+  test_focus: string
+  prerequisites: string[]
+  steps: QaGuideStep[]
+  visual_checks: string[]
+}
+
+interface PrThread {
+  title: string
+  body: string
+  labels: string[]
+  issueComments: string[]
+  reviewComments: string[]
+  reviews: string[]
+  diff: string
+}
+
+type TargetType = 'pr' | 'issue'
+
+interface Options {
+  prNumber: string
+  repo: string
+  outputDir: string
+  model: string
+  apiKey: string
+  mediaBudgetBytes: number
+  maxVideoBytes: number
+  type: TargetType
+}
+
+// ── CLI parsing ──
+
+function parseArgs(): Options {
+  const args = process.argv.slice(2)
+  const opts: Partial<Options> = {
+    model: 'gemini-3.1-pro-preview',
+    apiKey: process.env.GEMINI_API_KEY || '',
+    mediaBudgetBytes: 20 * 1024 * 1024,
+    maxVideoBytes: 10 * 1024 * 1024,
+    type: 'pr'
+  }
+
+  for (let i = 0; i < args.length; i++) {
+    switch (args[i]) {
+      case '--pr-number':
+        opts.prNumber = args[++i]
+        break
+      case '--repo':
+        opts.repo = args[++i]
+        break
+      case '--output-dir':
+        opts.outputDir = args[++i]
+        break
+      case '--model':
+        opts.model = args[++i]
+        break
+      case '--type':
+        opts.type = args[++i] as TargetType
+        break
+      case '--help':
+        console.warn(
+          'Usage: qa-analyze-pr.ts --pr-number <num> --repo <owner/repo> --output-dir <path> [--model <model>] [--type pr|issue]'
+        )
+        process.exit(0)
+    }
+  }
+
+  if (!opts.prNumber || !opts.repo || !opts.outputDir) {
+    console.error(
+      'Required: --pr-number <num> --repo <owner/repo> --output-dir <path>'
+    )
+    process.exit(1)
+  }
+
+  if (!opts.apiKey) {
+    console.error('GEMINI_API_KEY environment variable is required')
+    process.exit(1)
+  }
+
+  return opts as Options
+}
+
+// ── PR thread fetching ──
+
+function ghExec(cmd: string): string {
+  try {
+    return execSync(cmd, {
+      encoding: 'utf-8',
+      timeout: 30_000,
+      stdio: ['pipe', 'pipe', 'pipe']
+    }).trim()
+  } catch (err) {
+    console.warn(`gh command failed: ${cmd}`)
+    console.warn((err as Error).message)
+    return ''
+  }
+}
+
+function fetchPrThread(prNumber: string, repo: string): PrThread {
+  console.warn('Fetching PR thread...')
+
+  const prView = ghExec(
+    `gh pr view ${prNumber} --repo ${repo} --json title,body,labels`
+  )
+  const prData = prView
+    ? JSON.parse(prView)
+    : { title: '', body: '', labels: [] }
+
+  const issueCommentsRaw = ghExec(
+    `gh api repos/${repo}/issues/${prNumber}/comments --paginate`
+  )
+  const issueComments: string[] = issueCommentsRaw
+    ? JSON.parse(issueCommentsRaw).map((c: { body: string }) => c.body)
+    : []
+
+  const reviewCommentsRaw = ghExec(
+    `gh api repos/${repo}/pulls/${prNumber}/comments --paginate`
+  )
+  const reviewComments: string[] = reviewCommentsRaw
+    ? JSON.parse(reviewCommentsRaw).map((c: { body: string }) => c.body)
+    : []
+
+  const reviewsRaw = ghExec(
+    `gh api repos/${repo}/pulls/${prNumber}/reviews --paginate`
+  )
+  const reviews: string[] = reviewsRaw
+    ? JSON.parse(reviewsRaw)
+        .filter((r: { body: string }) => r.body)
+        .map((r: { body: string }) => r.body)
+    : []
+
+  const diff = ghExec(`gh pr diff ${prNumber} --repo ${repo}`)
+
+  console.warn(
+    `PR #${prNumber}: "${prData.title}" | ` +
+      `${issueComments.length} issue comments, ` +
+      `${reviewComments.length} review comments, ` +
+      `${reviews.length} reviews, ` +
+      `diff: ${diff.length} chars`
+  )
+
+  return {
+    title: prData.title || '',
+    body: prData.body || '',
+    labels: (prData.labels || []).map((l: { name: string }) => l.name),
+    issueComments,
+    reviewComments,
+    reviews,
+    diff
+  }
+}
+
+interface IssueThread {
+  title: string
+  body: string
+  labels: string[]
+  comments: string[]
+}
+
+function fetchIssueThread(issueNumber: string, repo: string): IssueThread {
+  console.warn('Fetching issue thread...')
+
+  const issueView = ghExec(
+    `gh issue view ${issueNumber} --repo ${repo} --json title,body,labels`
+  )
+  const issueData = issueView
+    ? JSON.parse(issueView)
+    : { title: '', body: '', labels: [] }
+
+  const commentsRaw = ghExec(
+    `gh api repos/${repo}/issues/${issueNumber}/comments --paginate`
+  )
+  const comments: string[] = commentsRaw
+    ? JSON.parse(commentsRaw).map((c: { body: string }) => c.body)
+    : []
+
+  console.warn(
+    `Issue #${issueNumber}: "${issueData.title}" | ` +
+      `${comments.length} comments`
+  )
+
+  return {
+    title: issueData.title || '',
+    body: issueData.body || '',
+    labels: (issueData.labels || []).map((l: { name: string }) => l.name),
+    comments
+  }
+}
+
+// ── Media extraction ──
+
+const MEDIA_EXTENSIONS = /\.(png|jpg|jpeg|gif|webp|mp4|webm|mov)$/i
+
+const MEDIA_URL_PATTERNS = [
+  // Markdown images: ![alt](url)
+  /!\[[^\]]*\]\(([^)]+)\)/g,
+  // GitHub user-attachments
+  /https:\/\/github\.com\/user-attachments\/assets\/[a-f0-9-]+/g,
+  // Private user images
+  /https:\/\/private-user-images\.githubusercontent\.com\/[^\s)"]+/g,
+  // Raw URLs with media extensions (standalone or in text)
+  /(?<!="|=')https?:\/\/[^\s)<>"]+\.(?:png|jpg|jpeg|gif|webp|mp4|webm|mov)(?:\?[^\s)<>"]*)?/gi
+]
+
+export function extractMediaUrls(text: string): string[] {
+  if (!text) return []
+
+  const urls = new Set<string>()
+
+  for (const pattern of MEDIA_URL_PATTERNS) {
+    // Reset lastIndex for global patterns
+    pattern.lastIndex = 0
+    let match: RegExpExecArray | null
+    while ((match = pattern.exec(text)) !== null) {
+      // For markdown images, the URL is in capture group 1
+      const url = match[1] || match[0]
+      // Clean trailing markdown/html artifacts
+      const cleaned = url.replace(/[)>"'\s]+$/, '')
+      if (cleaned.startsWith('http')) {
+        urls.add(cleaned)
+      }
+    }
+  }
+
+  return [...urls]
+}
+
+// ── Media downloading ──
+
+const ALLOWED_MEDIA_DOMAINS = [
+  'github.com',
+  'raw.githubusercontent.com',
+  'user-images.githubusercontent.com',
+  'private-user-images.githubusercontent.com',
+  'objects.githubusercontent.com',
+  'github.githubassets.com'
+]
+
+function isAllowedMediaDomain(url: string): boolean {
+  try {
+    const hostname = new URL(url).hostname
+    return ALLOWED_MEDIA_DOMAINS.some(
+      (domain) => hostname === domain || hostname.endsWith(`.${domain}`)
+    )
+  } catch {
+    return false
+  }
+}
+
+async function downloadMedia(
+  urls: string[],
+  outputDir: string,
+  budgetBytes: number,
+  maxVideoBytes: number
+): Promise<Array<{ path: string; mimeType: string }>> {
+  const downloaded: Array<{ path: string; mimeType: string }> = []
+  let totalBytes = 0
+
+  const mediaDir = resolve(outputDir, 'media')
+  mkdirSync(mediaDir, { recursive: true })
+
+  for (const url of urls) {
+    if (totalBytes >= budgetBytes) {
+      console.warn(
+        `Media budget exhausted (${totalBytes} bytes), skipping rest`
+      )
+      break
+    }
+
+    if (!isAllowedMediaDomain(url)) {
+      console.warn(`Skipping non-GitHub URL: ${url.slice(0, 80)}`)
+      continue
+    }
+
+    try {
+      const response = await fetch(url, {
+        signal: AbortSignal.timeout(15_000),
+        headers: { Accept: 'image/*,video/*' },
+        redirect: 'follow'
+      })
+
+      if (!response.ok) {
+        console.warn(`Failed to download ${url}: ${response.status}`)
+        continue
+      }
+
+      const contentLength = response.headers.get('content-length')
+      if (contentLength) {
+        const declaredSize = Number.parseInt(contentLength, 10)
+        if (declaredSize > budgetBytes - totalBytes) {
+          console.warn(
+            `Content-Length ${declaredSize} would exceed budget, skipping ${url}`
+          )
+          continue
+        }
+      }
+
+      const contentType = response.headers.get('content-type') || ''
+      const buffer = Buffer.from(await response.arrayBuffer())
+
+      // Skip oversized videos
+      const isVideo =
+        contentType.startsWith('video/') || /\.(mp4|webm|mov)$/i.test(url)
+      if (isVideo && buffer.length > maxVideoBytes) {
+        console.warn(
+          `Skipping large video ${url} (${(buffer.length / 1024 / 1024).toFixed(1)}MB > ${(maxVideoBytes / 1024 / 1024).toFixed(0)}MB cap)`
+        )
+        continue
+      }
+
+      if (totalBytes + buffer.length > budgetBytes) {
+        console.warn(`Would exceed budget, skipping ${url}`)
+        continue
+      }
+
+      const ext = guessExtension(url, contentType)
+      const filename = `media-${downloaded.length}${ext}`
+      const filepath = resolve(mediaDir, filename)
+      writeFileSync(filepath, buffer)
+      totalBytes += buffer.length
+
+      const mimeType = contentType.split(';')[0].trim() || guessMimeType(ext)
+
+      downloaded.push({ path: filepath, mimeType })
+      console.warn(
+        `Downloaded: ${url.slice(0, 80)}... (${(buffer.length / 1024).toFixed(0)}KB)`
+      )
+    } catch (err) {
+      console.warn(`Failed to download ${url}: ${(err as Error).message}`)
+    }
+  }
+
+  console.warn(
+    `Downloaded ${downloaded.length}/${urls.length} media files ` +
+      `(${(totalBytes / 1024 / 1024).toFixed(1)}MB)`
+  )
+  return downloaded
+}
+
+function guessExtension(url: string, contentType: string): string {
+  const urlMatch = url.match(MEDIA_EXTENSIONS)
+  if (urlMatch) return urlMatch[0].toLowerCase()
+
+  const typeMap: Record<string, string> = {
+    'image/png': '.png',
+    'image/jpeg': '.jpg',
+    'image/gif': '.gif',
+    'image/webp': '.webp',
+    'video/mp4': '.mp4',
+    'video/webm': '.webm'
+  }
+  return typeMap[contentType.split(';')[0]] || '.bin'
+}
+
+function guessMimeType(ext: string): string {
+  const map: Record<string, string> = {
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.gif': 'image/gif',
+    '.webp': 'image/webp',
+    '.mp4': 'video/mp4',
+    '.webm': 'video/webm',
+    '.mov': 'video/quicktime'
+  }
+  return map[ext] || 'application/octet-stream'
+}
+
+// ── Gemini analysis ──
+
+function buildIssueAnalysisPrompt(issue: IssueThread): string {
+  const allText = [
+    `# Issue: ${issue.title}`,
+    '',
+    '## Description',
+    issue.body,
+    '',
+    issue.comments.length > 0
+      ? `## Comments\n${issue.comments.join('\n\n---\n\n')}`
+      : ''
+  ]
+    .filter(Boolean)
+    .join('\n')
+
+  return `You are a senior QA engineer analyzing a bug report for ComfyUI frontend — a node-based visual workflow editor for AI image generation (Vue 3 + TypeScript).
+
+The UI has:
+- A large canvas (1280x720 viewport) showing a node graph centered at ~(640, 400)
+- Nodes are boxes with input/output slots connected by wires
+- A hamburger menu (top-left C logo) with File, Edit, Help submenus
+- Sidebars (Workflows, Node Library, Models)
+- A topbar with workflow tabs and Queue button
+- The default workflow loads with these nodes (approximate center coordinates):
+  - Load Checkpoint (~150, 300), CLIP Text Encode x2 (~450, 250 and ~450, 450)
+  - Empty Latent Image (~450, 600), KSampler (~750, 350), VAE Decode (~1000, 350), Save Image (~1200, 350)
+- Right-clicking ON a node shows node actions (Clone, Bypass, Convert, etc.)
+- Right-clicking on EMPTY canvas shows Add Node menu — different from node context menu
+
+Your task: Generate a DETAILED reproduction guide (8-15 steps) to trigger this bug on main.
+
+${allText}
+
+## Available test actions
+Each step must use one of these actions:
+
+### Menu actions
+- "openMenu" — clicks the Comfy hamburger menu (top-left C logo)
+- "hoverMenuItem" — hovers a top-level menu item to open submenu (label required)
+- "clickMenuItem" — clicks an item in the visible submenu (label required)
+
+### Element actions (by visible text)
+- "click" — clicks an element by visible text (text required)
+- "rightClick" — right-clicks an element to open context menu (text required)
+- "doubleClick" — double-clicks an element or coordinates (text or x,y)
+- "fillDialog" — fills dialog input and presses Enter (text required)
+- "pressKey" — presses a keyboard key (key required: Escape, Tab, Delete, Enter, etc.)
+
+### Canvas actions (by coordinates — viewport is 1280x720)
+- "clickCanvas" — click at coordinates (x, y required)
+- "rightClickCanvas" — right-click at coordinates (x, y required)
+- "doubleClick" — double-click at coordinates to open node search (x, y)
+- "dragCanvas" — drag from one point to another (fromX, fromY, toX, toY)
+- "scrollCanvas" — scroll wheel for zoom (x, y, deltaY: negative=zoom in, positive=zoom out)
+
+### Utility
+- "wait" — waits briefly (ms required, max 3000)
+- "screenshot" — takes a screenshot (name required)
+
+## Common ComfyUI interactions
+- Right-click a node → context menu with Clone, Bypass, Remove, Colors, etc.
+- Double-click empty canvas → opens node search dialog
+- Ctrl+C / Ctrl+V → copy/paste selected nodes
+- Delete key → remove selected node
+- Ctrl+G → group selected nodes
+- Drag from output slot to input slot → create connection
+- Click a node to select it, Shift+click for multi-select
+
+## Output format
+Return a JSON object with exactly one key: "reproduce", containing:
+{
+  "summary": "One sentence: what bug this issue reports",
+  "test_focus": "Specific behavior to reproduce",
+  "prerequisites": ["e.g. Load default workflow"],
+  "steps": [
+    {
+      "action": "clickCanvas",
+      "description": "Click on first node to select it",
+      "expected_before": "What should happen if the bug is present"
+    }
+  ],
+  "visual_checks": ["Specific visual evidence of the bug to look for"]
+}
+
+## Rules
+- Generate 8-15 DETAILED steps that actually trigger the reported bug.
+- Follow the issue's reproduction steps PRECISELY — translate them into available actions.
+- Use canvas coordinates for node interactions (nodes are typically in the center area 300-900 x 200-500).
+- Take screenshots BEFORE and AFTER critical actions to capture the bug state.
+- Do NOT just open a menu and screenshot — actually perform the full reproduction sequence.
+- Do NOT include login steps.
+- Output ONLY valid JSON, no markdown fences or explanation.`
+}
+
+function buildAnalysisPrompt(thread: PrThread): string {
+  const allText = [
+    `# PR: ${thread.title}`,
+    '',
+    '## Description',
+    thread.body,
+    '',
+    thread.issueComments.length > 0
+      ? `## Issue Comments\n${thread.issueComments.join('\n\n---\n\n')}`
+      : '',
+    thread.reviewComments.length > 0
+      ? `## Review Comments\n${thread.reviewComments.join('\n\n---\n\n')}`
+      : '',
+    thread.reviews.length > 0
+      ? `## Reviews\n${thread.reviews.join('\n\n---\n\n')}`
+      : '',
+    '',
+    '## Diff (truncated)',
+    '```',
+    thread.diff.slice(0, 8000),
+    '```'
+  ]
+    .filter(Boolean)
+    .join('\n')
+
+  return `You are a senior QA engineer analyzing a pull request for ComfyUI frontend (a Vue 3 + TypeScript web application for AI image generation workflows).
+
+Your task: Generate TWO targeted QA test guides — one for BEFORE the PR (main branch) and one for AFTER (PR branch).
+
+${allText}
+
+## Available test actions
+Each step must use one of these actions:
+- "openMenu" — clicks the Comfy hamburger menu (top-left C logo)
+- "hoverMenuItem" — hovers a top-level menu item to open submenu (label required)
+- "clickMenuItem" — clicks an item in the visible submenu (label required)
+- "fillDialog" — fills dialog input and presses Enter (text required)
+- "pressKey" — presses a keyboard key (key required)
+- "click" — clicks an element by visible text (text required)
+- "wait" — waits briefly (ms required, max 3000)
+- "screenshot" — takes a screenshot (name required)
+
+## Output format
+Return a JSON object with exactly two keys: "before" and "after", each containing:
+{
+  "summary": "One sentence: what this PR changes",
+  "test_focus": "Specific behaviors to verify in this recording",
+  "prerequisites": ["e.g. Load default workflow"],
+  "steps": [
+    {
+      "action": "openMenu",
+      "description": "Open the main menu to check file options",
+      "expected_before": "Old behavior description (before key only)",
+      "expected_after": "New behavior description (after key only)"
+    }
+  ],
+  "visual_checks": ["Specific visual elements to look for"]
+}
+
+## Rules
+- BEFORE guide: 2-4 steps, under 15 seconds. Show OLD/missing behavior.
+- AFTER guide: 3-6 steps, under 30 seconds. Prove the fix/feature works.
+- Focus on the SPECIFIC behavior changed by this PR, not generic testing.
+- Use information from PR description, screenshots, and comments to understand intended behavior.
+- Include at least one screenshot step in each guide.
+- Do NOT include login steps.
+- Menu pattern: openMenu -> hoverMenuItem -> clickMenuItem or screenshot.
+- Output ONLY valid JSON, no markdown fences or explanation.`
+}
+
+async function analyzeWithGemini(
+  thread: PrThread,
+  media: Array<{ path: string; mimeType: string }>,
+  model: string,
+  apiKey: string
+): Promise<{ before: QaGuide; after: QaGuide }> {
+  const genAI = new GoogleGenerativeAI(apiKey)
+  const geminiModel = genAI.getGenerativeModel({ model })
+
+  const prompt = buildAnalysisPrompt(thread)
+
+  const parts: Array<
+    { text: string } | { inlineData: { mimeType: string; data: string } }
+  > = [{ text: prompt }]
+
+  // Add media as inline data
+  for (const item of media) {
+    try {
+      const buffer = readFileSync(item.path)
+      parts.push({
+        inlineData: {
+          mimeType: item.mimeType,
+          data: buffer.toString('base64')
+        }
+      })
+    } catch (err) {
+      console.warn(
+        `Failed to read media ${item.path}: ${(err as Error).message}`
+      )
+    }
+  }
+
+  console.warn(
+    `Sending to ${model}: ${prompt.length} chars text, ${media.length} media files`
+  )
+
+  const result = await geminiModel.generateContent({
+    contents: [{ role: 'user', parts }],
+    generationConfig: {
+      temperature: 0.2,
+      maxOutputTokens: 8192,
+      responseMimeType: 'application/json'
+    }
+  })
+
+  let text = result.response.text()
+  // Strip markdown fences if present
+  text = text
+    .replace(/^```(?:json)?\n?/gm, '')
+    .replace(/```$/gm, '')
+    .trim()
+
+  console.warn('Gemini response received')
+  console.warn('Raw response (first 500 chars):', text.slice(0, 500))
+  const parsed = JSON.parse(text)
+
+  // Handle different response shapes from Gemini
+  let before: QaGuide
+  let after: QaGuide
+
+  if (Array.isArray(parsed) && parsed.length >= 2) {
+    // Array format: [before, after]
+    before = parsed[0]
+    after = parsed[1]
+  } else if (parsed.before && parsed.after) {
+    // Object format: { before, after }
+    before = parsed.before
+    after = parsed.after
+  } else {
+    // Try nested wrapper keys
+    const inner = parsed.qa_guide ?? parsed.guides ?? parsed
+    if (inner.before && inner.after) {
+      before = inner.before
+      after = inner.after
+    } else {
+      console.warn(
+        'Full response:',
+        JSON.stringify(parsed, null, 2).slice(0, 2000)
+      )
+      throw new Error(
+        `Unexpected response shape. Got keys: ${Object.keys(parsed).join(', ')}`
+      )
+    }
+  }
+
+  return { before, after }
+}
+
+async function analyzeIssueWithGemini(
+  issue: IssueThread,
+  media: Array<{ path: string; mimeType: string }>,
+  model: string,
+  apiKey: string
+): Promise<QaGuide> {
+  const genAI = new GoogleGenerativeAI(apiKey)
+  const geminiModel = genAI.getGenerativeModel({ model })
+
+  const prompt = buildIssueAnalysisPrompt(issue)
+
+  const parts: Array<
+    { text: string } | { inlineData: { mimeType: string; data: string } }
+  > = [{ text: prompt }]
+
+  for (const item of media) {
+    try {
+      const buffer = readFileSync(item.path)
+      parts.push({
+        inlineData: {
+          mimeType: item.mimeType,
+          data: buffer.toString('base64')
+        }
+      })
+    } catch (err) {
+      console.warn(
+        `Failed to read media ${item.path}: ${(err as Error).message}`
+      )
+    }
+  }
+
+  console.warn(
+    `Sending to ${model}: ${prompt.length} chars text, ${media.length} media files`
+  )
+
+  const result = await geminiModel.generateContent({
+    contents: [{ role: 'user', parts }],
+    generationConfig: {
+      temperature: 0.2,
+      maxOutputTokens: 8192,
+      responseMimeType: 'application/json'
+    }
+  })
+
+  let text = result.response.text()
+  text = text
+    .replace(/^```(?:json)?\n?/gm, '')
+    .replace(/```$/gm, '')
+    .trim()
+
+  console.warn('Gemini response received')
+  console.warn('Raw response (first 500 chars):', text.slice(0, 500))
+  const parsed = JSON.parse(text)
+
+  const guide: QaGuide =
+    parsed.reproduce ?? parsed.qa_guide?.reproduce ?? parsed
+  return guide
+}
+
+// ── Main ──
+
+async function main() {
+  const opts = parseArgs()
+  mkdirSync(opts.outputDir, { recursive: true })
+
+  if (opts.type === 'issue') {
+    await analyzeIssue(opts)
+  } else {
+    await analyzePr(opts)
+  }
+}
+
+async function analyzeIssue(opts: Options) {
+  const issue = fetchIssueThread(opts.prNumber, opts.repo)
+
+  const allText = [issue.body, ...issue.comments].join('\n')
+  const mediaUrls = extractMediaUrls(allText)
+  console.warn(`Found ${mediaUrls.length} media URLs`)
+
+  const media = await downloadMedia(
+    mediaUrls,
+    opts.outputDir,
+    opts.mediaBudgetBytes,
+    opts.maxVideoBytes
+  )
+
+  const guide = await analyzeIssueWithGemini(
+    issue,
+    media,
+    opts.model,
+    opts.apiKey
+  )
+
+  const beforePath = resolve(opts.outputDir, 'qa-guide-before.json')
+  writeFileSync(beforePath, JSON.stringify(guide, null, 2))
+
+  console.warn(`Wrote QA guide:`)
+  console.warn(`  Reproduce: ${beforePath}`)
+}
+
+async function analyzePr(opts: Options) {
+  const thread = fetchPrThread(opts.prNumber, opts.repo)
+
+  const allText = [
+    thread.body,
+    ...thread.issueComments,
+    ...thread.reviewComments,
+    ...thread.reviews
+  ].join('\n')
+  const mediaUrls = extractMediaUrls(allText)
+  console.warn(`Found ${mediaUrls.length} media URLs`)
+
+  const media = await downloadMedia(
+    mediaUrls,
+    opts.outputDir,
+    opts.mediaBudgetBytes,
+    opts.maxVideoBytes
+  )
+
+  const guides = await analyzeWithGemini(thread, media, opts.model, opts.apiKey)
+
+  const beforePath = resolve(opts.outputDir, 'qa-guide-before.json')
+  const afterPath = resolve(opts.outputDir, 'qa-guide-after.json')
+  writeFileSync(beforePath, JSON.stringify(guides.before, null, 2))
+  writeFileSync(afterPath, JSON.stringify(guides.after, null, 2))
+
+  console.warn(`Wrote QA guides:`)
+  console.warn(`  Before: ${beforePath}`)
+  console.warn(`  After:  ${afterPath}`)
+}
+
+function isExecutedAsScript(metaUrl: string): boolean {
+  const modulePath = fileURLToPath(metaUrl)
+  const scriptPath = process.argv[1] ? resolve(process.argv[1]) : ''
+  return modulePath === scriptPath
+}
+
+if (isExecutedAsScript(import.meta.url)) {
+  main().catch((err) => {
+    console.error('PR analysis failed:', err)
+    process.exit(1)
+  })
+}

.claude/skills/comfy-qa/scripts/qa-deploy-pages.sh

@@ -0,0 +1,413 @@
+#!/usr/bin/env bash
+# Deploy QA report to Cloudflare Pages.
+# Expected env vars: CLOUDFLARE_API_TOKEN, CLOUDFLARE_ACCOUNT_ID, RAW_BRANCH,
+#   BEFORE_SHA, AFTER_SHA, TARGET_NUM, TARGET_TYPE, REPO, RUN_ID
+# Writes outputs to GITHUB_OUTPUT: badge_status, url
+set -euo pipefail
+
+npm install -g wrangler@4.74.0 >/dev/null 2>&1
+
+DEPLOY_DIR=$(mktemp -d)
+mkdir -p "$DEPLOY_DIR"
+
+for os in Linux macOS Windows; do
+  DIR="qa-artifacts/qa-report-${os}-${RUN_ID}"
+  for prefix in qa qa-before; do
+    VID="${DIR}/${prefix}-session.mp4"
+    if [ -f "$VID" ]; then
+      DEST="$DEPLOY_DIR/${prefix}-${os}.mp4"
+      cp "$VID" "$DEST"
+      echo "Found ${prefix} ${os} video ($(du -h "$VID" | cut -f1))"
+    fi
+  done
+  # Copy multi-pass session videos (qa-session-1, qa-session-2, etc.)
+  for numbered in "$DIR"/qa-session-[0-9].mp4; do
+    [ -f "$numbered" ] || continue
+    NUM=$(basename "$numbered" | sed 's/qa-session-\([0-9]\).mp4/\1/')
+    DEST="$DEPLOY_DIR/qa-${os}-pass${NUM}.mp4"
+    cp "$numbered" "$DEST"
+    echo "Found pass ${NUM} ${os} video ($(du -h "$numbered" | cut -f1))"
+  done
+  # Generate GIF thumbnail from after video (or first pass)
+  THUMB_SRC="$DEPLOY_DIR/qa-${os}.mp4"
+  [ ! -f "$THUMB_SRC" ] && THUMB_SRC="$DEPLOY_DIR/qa-${os}-pass1.mp4"
+  if [ -f "$THUMB_SRC" ]; then
+    ffmpeg -y -ss 10 -i "$THUMB_SRC" -t 8 \
+      -vf "fps=8,scale=480:-1:flags=lanczos,split[s0][s1];[s0]palettegen=max_colors=64[p];[s1][p]paletteuse=dither=bayer" \
+      -loop 0 "$DEPLOY_DIR/qa-${os}-thumb.gif" 2>/dev/null \
+    || echo "GIF generation failed for ${os} (non-fatal)"
+  fi
+done
+
+# Build video cards and report sections
+CARDS=""
+# shellcheck disable=SC2034 # accessed via eval
+ICONS_Linux="🐧" ICONS_macOS="🍎" ICONS_Windows="🪟"
+CARD_COUNT=0
+DL_ICON="<svg width=14 height=14 viewBox='0 0 24 24' fill=none stroke=currentColor stroke-width=2><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1=12 y1=15 x2=12 y2=3'/></svg>"
+
+for os in Linux macOS Windows; do
+  eval "ICON=\$ICONS_${os}"
+  OS_LOWER=$(echo "$os" | tr '[:upper:]' '[:lower:]')
+  HAS_BEFORE=$([ -f "$DEPLOY_DIR/qa-before-${os}.mp4" ] && echo 1 || echo 0)
+  HAS_AFTER=$( { [ -f "$DEPLOY_DIR/qa-${os}.mp4" ] || [ -f "$DEPLOY_DIR/qa-${os}-pass1.mp4" ]; } && echo 1 || echo 0)
+  [ "$HAS_AFTER" = "0" ] && continue
+
+  # Collect all reports for this platform (single + multi-pass)
+  REPORT_FILES=""
+  REPORT_LINK=""
+  REPORT_HTML=""
+  for rpt in "video-reviews/${OS_LOWER}-qa-video-report.md" "video-reviews/${OS_LOWER}-pass"*-qa-video-report.md; do
+    [ -f "$rpt" ] && REPORT_FILES="${REPORT_FILES} ${rpt}"
+  done
+
+  if [ -n "$REPORT_FILES" ]; then
+    # Concatenate all reports into one combined report file
+    COMBINED_MD=""
+    for rpt in $REPORT_FILES; do
+      cp "$rpt" "$DEPLOY_DIR/$(basename "$rpt")"
+      RPT_MD=$(sed 's/&/\&amp;/g; s/</\&lt;/g; s/>/\&gt;/g' "$rpt")
+      [ -n "$COMBINED_MD" ] && COMBINED_MD="${COMBINED_MD}&#10;&#10;---&#10;&#10;"
+      COMBINED_MD="${COMBINED_MD}${RPT_MD}"
+    done
+    FIRST_REPORT=$(echo "$REPORT_FILES" | awk '{print $1}')
+    FIRST_BASENAME=$(basename "$FIRST_REPORT")
+    REPORT_LINK="<a class=dl href=${FIRST_BASENAME}><svg width=14 height=14 viewBox='0 0 24 24' fill=none stroke=currentColor stroke-width=2><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1=16 y1=13 x2=8 y2=13/><line x1=16 y1=17 x2=8 y2=17'/></svg>Report</a>"
+    REPORT_HTML="<details class=report open><summary><svg width=14 height=14 viewBox='0 0 24 24' fill=none stroke=currentColor stroke-width=2><circle cx=12 cy=12 r=10/><line x1=12 y1=16 x2=12 y2=12/><line x1=12 y1=8 x2=12.01 y2=8'/></svg> AI Comparative Review</summary><div class=report-body data-md>${COMBINED_MD}</div></details>"
+  fi
+
+  if [ "$HAS_BEFORE" = "1" ]; then
+    CARDS="${CARDS}<div class='card reveal' style='--i:${CARD_COUNT}'><div class=card-header><span class=platform><span class=icon>${ICON}</span>${os}</span><span class=links>${REPORT_LINK}</span></div><div class=comparison><div class=comp-panel><div class=comp-label>Before <span class=comp-tag>main</span></div><div class=video-wrap><video controls autoplay preload=auto><source src=qa-before-${os}.mp4 type=video/mp4></video></div><div class=comp-dl><a class=dl href=qa-before-${os}.mp4 download>${DL_ICON}Before</a></div></div><div class=comp-panel><div class=comp-label>After <span class=comp-tag>PR</span></div><div class=video-wrap><video controls autoplay preload=auto><source src=qa-${os}.mp4 type=video/mp4></video></div><div class=comp-dl><a class=dl href=qa-${os}.mp4 download>${DL_ICON}After</a></div></div></div>${REPORT_HTML}</div>"
+  elif [ -f "$DEPLOY_DIR/qa-${os}.mp4" ]; then
+    CARDS="${CARDS}<div class='card reveal' style='--i:${CARD_COUNT}'><div class=video-wrap><video controls autoplay preload=auto><source src=qa-${os}.mp4 type=video/mp4></video></div><div class=card-body><span class=platform><span class=icon>${ICON}</span>${os}</span><span class=links><a class=dl href=qa-${os}.mp4 download>${DL_ICON}Download</a>${REPORT_LINK}</span></div>${REPORT_HTML}</div>"
+  else
+    PASS_VIDEOS=""
+    for pass_vid in "$DEPLOY_DIR/qa-${os}-pass"[0-9].mp4; do
+      [ -f "$pass_vid" ] || continue
+      PASS_NUM=$(basename "$pass_vid" | sed "s/qa-${os}-pass\([0-9]\).mp4/\1/")
+      PASS_VIDEOS="${PASS_VIDEOS}<div class=comp-panel><div class=comp-label>Pass ${PASS_NUM}</div><div class=video-wrap><video controls autoplay preload=auto><source src=qa-${os}-pass${PASS_NUM}.mp4 type=video/mp4></video></div><div class=comp-dl><a class=dl href=qa-${os}-pass${PASS_NUM}.mp4 download>${DL_ICON}Pass ${PASS_NUM}</a></div></div>"
+    done
+    CARDS="${CARDS}<div class='card reveal' style='--i:${CARD_COUNT}'><div class=card-header><span class=platform><span class=icon>${ICON}</span>${os}</span><span class=links>${REPORT_LINK}</span></div><div class=comparison>${PASS_VIDEOS}</div>${REPORT_HTML}</div>"
+  fi
+  CARD_COUNT=$((CARD_COUNT + 1))
+done
+
+# Build commit info and target link for the report header
+COMMIT_HTML=""
+REPO_URL="https://github.com/${REPO}"
+if [ -n "${TARGET_NUM:-}" ]; then
+  if [ "$TARGET_TYPE" = "issue" ]; then
+    COMMIT_HTML="<a href=${REPO_URL}/issues/${TARGET_NUM} class=sha title='Issue'>Issue #${TARGET_NUM}</a>"
+  else
+    COMMIT_HTML="<a href=${REPO_URL}/pull/${TARGET_NUM} class=sha title='Pull Request'>PR #${TARGET_NUM}</a>"
+  fi
+fi
+if [ -n "${BEFORE_SHA:-}" ]; then
+  SHORT_BEFORE="${BEFORE_SHA:0:7}"
+  COMMIT_HTML="${COMMIT_HTML:+${COMMIT_HTML} &middot; }<a href=${REPO_URL}/commit/${BEFORE_SHA} class=sha title='main branch'>main @ ${SHORT_BEFORE}</a>"
+fi
+if [ -n "${AFTER_SHA:-}" ]; then
+  SHORT_AFTER="${AFTER_SHA:0:7}"
+  AFTER_LABEL="PR"
+  [ -n "${TARGET_NUM:-}" ] && AFTER_LABEL="#${TARGET_NUM}"
+  COMMIT_HTML="${COMMIT_HTML:+${COMMIT_HTML} &middot; }<a href=${REPO_URL}/commit/${AFTER_SHA} class=sha title='PR head commit'>${AFTER_LABEL} @ ${SHORT_AFTER}</a>"
+fi
+if [ -n "${PIPELINE_SHA:-}" ]; then
+  SHORT_PIPE="${PIPELINE_SHA:0:7}"
+  COMMIT_HTML="${COMMIT_HTML:+${COMMIT_HTML} &middot; }<a href=${REPO_URL}/commit/${PIPELINE_SHA} class=sha title='QA pipeline version'>QA @ ${SHORT_PIPE}</a>"
+fi
+[ -n "$COMMIT_HTML" ] && COMMIT_HTML=" &middot; ${COMMIT_HTML}"
+
+RUN_LINK=""
+if [ -n "${RUN_URL:-}" ]; then
+  RUN_LINK=" &middot; <a href=\"${RUN_URL}\" class=sha title=\"GitHub Actions run\">CI Job</a>"
+fi
+
+# Timing info
+DEPLOY_TIME=$(date -u '+%Y-%m-%d %H:%M UTC')
+TIMING_HTML=""
+if [ -n "${RUN_START_TIME:-}" ]; then
+  TIMING_HTML=" &middot; <span class=sha title='Pipeline timing'>${RUN_START_TIME} &rarr; ${DEPLOY_TIME}</span>"
+fi
+
+# Generate index.html from template
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+TEMPLATE="$SCRIPT_DIR/qa-report-template.html"
+
+# Write dynamic content to temp files for safe substitution
+# Cloudflare Pages _headers file — enable range requests for video seeking
+cat > "$DEPLOY_DIR/_headers" <<'HEADERSEOF'
+/*.mp4
+  Accept-Ranges: bytes
+  Cache-Control: public, max-age=86400
+HEADERSEOF
+
+# Build purpose description from pr-context.txt
+PURPOSE_HTML=""
+if [ -f pr-context.txt ]; then
+  # Extract title line and first paragraph of description
+  PR_TITLE=$(grep -m1 '^Title:' pr-context.txt 2>/dev/null | sed 's/^Title: //' || true)
+  if [ "$TARGET_TYPE" = "issue" ]; then
+    PURPOSE_LABEL="Issue #${TARGET_NUM}"
+    PURPOSE_VERB="reports"
+  else
+    PURPOSE_LABEL="PR #${TARGET_NUM}"
+    PURPOSE_VERB="aims to"
+  fi
+  # Get first ~300 chars of description body (after "Description:" line)
+  PR_DESC=$(sed -n '/^Description:/,/^###/p' pr-context.txt 2>/dev/null | grep -v '^Description:\|^###' | head -5 | sed 's/&/\&amp;/g; s/</\&lt;/g; s/>/\&gt;/g' | tr '\n' ' ' | head -c 400 || true)
+  [ -z "$PR_DESC" ] && PR_DESC=$(sed -n '3,8p' pr-context.txt 2>/dev/null | sed 's/&/\&amp;/g; s/</\&lt;/g; s/>/\&gt;/g' | tr '\n' ' ' | head -c 400 || true)
+  # Build requirements from QA guide JSON
+  REQS_HTML=""
+  QA_GUIDE=$(ls qa-guides/qa-guide-*.json 2>/dev/null | head -1 || true)
+  if [ -f "$QA_GUIDE" ]; then
+    PREREQS=$(python3 -c "
+import json, sys, html
+try:
+  g = json.load(open(sys.argv[1]))
+  prereqs = g.get('prerequisites', [])
+  steps = g.get('steps', [])
+  focus = g.get('test_focus', '')
+  parts = []
+  if focus:
+    parts.append('<strong>Test focus:</strong> ' + html.escape(focus))
+  if prereqs:
+    parts.append('<strong>Prerequisites:</strong> ' + ', '.join(html.escape(p) for p in prereqs))
+  if steps:
+    parts.append('<strong>Steps:</strong> ' + ' → '.join(html.escape(s.get('description', str(s))) for s in steps[:6]))
+    if len(steps) > 6:
+      parts[-1] += ' → ...'
+  print('<br>'.join(parts))
+except: pass
+" "$QA_GUIDE" 2>/dev/null)
+    [ -n "$PREREQS" ] && REQS_HTML="<div class=purpose-reqs>${PREREQS}</div>"
+  fi
+
+  PURPOSE_HTML="<div class=purpose><div class=purpose-label>${PURPOSE_LABEL} ${PURPOSE_VERB}</div><strong>${PR_TITLE}</strong><br>${PR_DESC}${REQS_HTML}</div>"
+fi
+
+echo -n "$COMMIT_HTML" > "$DEPLOY_DIR/.commit_html"
+echo -n "$CARDS" > "$DEPLOY_DIR/.cards_html"
+echo -n "$RUN_LINK" > "$DEPLOY_DIR/.run_link"
+# Badge HTML with copy button (placeholder URL filled after deploy)
+echo -n '<div class="badge-bar"><img src="badge.svg" alt="QA Badge" class="badge-img"/><button class="copy-badge" title="Copy badge markdown" onclick="copyBadge()"><svg width=14 height=14 viewBox="0 0 24 24" fill=none stroke=currentColor stroke-width=2><rect x=9 y=9 width=13 height=13 rx=2/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button></div>' > "$DEPLOY_DIR/.badge_html"
+echo -n "${TIMING_HTML:-}" > "$DEPLOY_DIR/.timing_html"
+echo -n "$PURPOSE_HTML" > "$DEPLOY_DIR/.purpose_html"
+python3 -c "
+import sys, pathlib
+d = pathlib.Path(sys.argv[1])
+t = pathlib.Path(sys.argv[2]).read_text()
+t = t.replace('{{COMMIT_HTML}}', (d / '.commit_html').read_text())
+t = t.replace('{{CARDS}}', (d / '.cards_html').read_text())
+t = t.replace('{{RUN_LINK}}', (d / '.run_link').read_text())
+t = t.replace('{{BADGE_HTML}}', (d / '.badge_html').read_text())
+t = t.replace('{{TIMING_HTML}}', (d / '.timing_html').read_text())
+t = t.replace('{{PURPOSE_HTML}}', (d / '.purpose_html').read_text())
+sys.stdout.write(t)
+" "$DEPLOY_DIR" "$TEMPLATE" > "$DEPLOY_DIR/index.html"
+rm -f "$DEPLOY_DIR/.commit_html" "$DEPLOY_DIR/.cards_html" "$DEPLOY_DIR/.run_link" "$DEPLOY_DIR/.badge_html" "$DEPLOY_DIR/.timing_html" "$DEPLOY_DIR/.purpose_html"
+
+cat > "$DEPLOY_DIR/404.html" <<'ERROREOF'
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>404</title>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel=stylesheet>
+<style>:root{--bg:oklch(8% 0.02 265);--fg:oklch(45% 0.01 265);--err:oklch(62% 0.22 25)}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg);color:var(--fg);font-family:'Inter',system-ui,sans-serif;display:flex;align-items:center;justify-content:center;min-height:100vh}div{text-align:center}h1{color:var(--err);font-size:clamp(3rem,8vw,5rem);font-weight:700;letter-spacing:-.04em;margin-bottom:.5rem}p{font-size:1rem;max-width:32ch;line-height:1.5}</style>
+</head><body><div><h1>404</h1><p>File not found. The QA recording may have failed or been cancelled.</p></div></body></html>
+ERROREOF
+
+# Copy research log to deploy dir if it exists
+for rlog in qa-artifacts/*/research/research-log.json qa-artifacts/*/*/research/research-log.json qa-artifacts/before/*/research/research-log.json; do
+  if [ -f "$rlog" ]; then
+    cp "$rlog" "$DEPLOY_DIR/research-log.json"
+    echo "Found research log: $rlog"
+    break
+  fi
+done
+
+# Copy generated test code to deploy dir
+for tfile in qa-artifacts/*/research/reproduce.spec.ts qa-artifacts/*/*/research/reproduce.spec.ts qa-artifacts/before/*/research/reproduce.spec.ts; do
+  if [ -f "$tfile" ]; then
+    cp "$tfile" "$DEPLOY_DIR/reproduce.spec.ts"
+    echo "Found test code: $tfile"
+    break
+  fi
+done
+
+# Copy video script if available
+for vsfile in qa-artifacts/*/video-script.spec.ts qa-artifacts/*/*/video-script.spec.ts qa-artifacts/before/*/video-script.spec.ts; do
+  if [ -f "$vsfile" ]; then
+    cp "$vsfile" "$DEPLOY_DIR/video-script.spec.ts"
+    echo "Found video script: $vsfile"
+    break
+  fi
+done
+
+# Generate badge SVGs into deploy dir
+# Priority: research-log.json verdict (a11y-verified) > video review verdict (AI interpretation)
+REPRO_COUNT=0 INCONC_COUNT=0 NOT_REPRO_COUNT=0 TOTAL_REPORTS=0
+
+# Try research log first (ground truth from a11y assertions)
+RESEARCH_VERDICT=""
+REPRO_METHOD=""
+if [ -f "$DEPLOY_DIR/research-log.json" ]; then
+  RESEARCH_VERDICT=$(python3 -c "import json,sys; d=json.load(open(sys.argv[1])); print(d.get('verdict',''))" "$DEPLOY_DIR/research-log.json" 2>/dev/null || true)
+  REPRO_METHOD=$(python3 -c "import json,sys; d=json.load(open(sys.argv[1])); print(d.get('reproducedBy','none'))" "$DEPLOY_DIR/research-log.json" 2>/dev/null || true)
+  echo "Research verdict (a11y-verified): ${RESEARCH_VERDICT:-none} (by: ${REPRO_METHOD:-none})"
+  if [ -n "$RESEARCH_VERDICT" ]; then
+    TOTAL_REPORTS=1
+    case "$RESEARCH_VERDICT" in
+      REPRODUCED) REPRO_COUNT=1 ;;
+      NOT_REPRODUCIBLE) NOT_REPRO_COUNT=1 ;;
+      INCONCLUSIVE) INCONC_COUNT=1 ;;
+    esac
+  fi
+fi
+
+# Check video review verdicts (always, not just as fallback)
+VIDEO_REPRODUCED=false
+if [ -d video-reviews ]; then
+  for rpt in video-reviews/*-qa-video-report.md; do
+    [ -f "$rpt" ] || continue
+    VERDICT_JSON=$(grep -oP '"verdict":\s*"[A-Z_]+' "$rpt" 2>/dev/null | tail -1 | grep -oP '[A-Z_]+$' || true)
+
+    if [ -n "$VERDICT_JSON" ]; then
+      echo "Video review verdict: $VERDICT_JSON ($(basename "$rpt"))"
+      [ "$VERDICT_JSON" = "REPRODUCED" ] && VIDEO_REPRODUCED=true
+      # Only count video as separate report if no research log
+      if [ -z "$RESEARCH_VERDICT" ]; then
+        TOTAL_REPORTS=$((TOTAL_REPORTS + 1))
+        case "$VERDICT_JSON" in
+          REPRODUCED) REPRO_COUNT=$((REPRO_COUNT + 1)) ;;
+          NOT_REPRODUCIBLE) NOT_REPRO_COUNT=$((NOT_REPRO_COUNT + 1)) ;;
+          INCONCLUSIVE) INCONC_COUNT=$((INCONC_COUNT + 1)) ;;
+        esac
+      fi
+    elif [ -z "$RESEARCH_VERDICT" ]; then
+      TOTAL_REPORTS=$((TOTAL_REPORTS + 1))
+      # Fallback: grep Summary section (for older reports without ## Verdict)
+      SUMM=$(sed -n '/^## Summary/,/^## /p' "$rpt" 2>/dev/null | head -15)
+      if echo "$SUMM" | grep -iq 'INCONCLUSIVE'; then
+        INCONC_COUNT=$((INCONC_COUNT + 1))
+      elif echo "$SUMM" | grep -iq 'not reproduced\|could not reproduce\|could not be confirmed\|unable to reproduce\|fails\? to reproduce\|fails\? to perform\|was NOT\|NOT visible\|not observed\|fail.* to demonstrate\|does not demonstrate\|steps were not performed\|never.*tested\|never.*accessed\|not.* confirmed'; then
+        NOT_REPRO_COUNT=$((NOT_REPRO_COUNT + 1))
+      elif echo "$SUMM" | grep -iq 'reproduc\|confirm'; then
+        REPRO_COUNT=$((REPRO_COUNT + 1))
+        VIDEO_REPRODUCED=true
+      fi
+    fi
+  done
+fi
+
+# Upgrade reproduction method to "both" when E2E and video agree
+if [ "$REPRO_METHOD" = "e2e_test" ] && [ "$VIDEO_REPRODUCED" = "true" ]; then
+  REPRO_METHOD="both"
+  echo "Upgraded reproducedBy to 'both' (E2E + video review agree)"
+elif [ -z "$RESEARCH_VERDICT" ] && [ "$VIDEO_REPRODUCED" = "true" ]; then
+  REPRO_METHOD="video"
+fi
+FAIL_COUNT=$((TOTAL_REPORTS - REPRO_COUNT - NOT_REPRO_COUNT))
+[ "$FAIL_COUNT" -lt 0 ] && FAIL_COUNT=0
+echo "DEBUG verdict: repro=${REPRO_COUNT} not_repro=${NOT_REPRO_COUNT} inconc=${INCONC_COUNT} fail=${FAIL_COUNT} total=${TOTAL_REPORTS}"
+
+# Warn on verdict mismatch between E2E and video review
+if [ -n "$RESEARCH_VERDICT" ]; then
+  VIDEO_VERDICT=$(grep -oP '"verdict":\s*"[A-Z_]+' video-reviews/*-qa-video-report.md 2>/dev/null | tail -1 | grep -oP '[A-Z_]+$' || true)
+  if [ -n "$VIDEO_VERDICT" ] && [ "$RESEARCH_VERDICT" != "$VIDEO_VERDICT" ]; then
+    echo "⚠ Verdict mismatch: E2E=$RESEARCH_VERDICT vs Video=$VIDEO_VERDICT (E2E takes priority)"
+  fi
+fi
+
+echo "Verdict: ${REPRO_COUNT}✓ ${NOT_REPRO_COUNT}✗ ${FAIL_COUNT}⚠ / ${TOTAL_REPORTS}"
+
+# Badge text:
+#   Single pass: "REPRODUCED" / "NOT REPRODUCIBLE" / "INCONCLUSIVE"
+#   Multi pass:  "2✓ 0✗ 1⚠ / 3" with color based on dominant result
+REPRO_RESULT="" REPRO_COLOR="#9f9f9f"
+if [ "$TOTAL_REPORTS" -le 1 ]; then
+  # Single report — simple label
+  if [ "$REPRO_COUNT" -gt 0 ]; then
+    REPRO_RESULT="REPRODUCED" REPRO_COLOR="#2196f3"
+  elif [ "$NOT_REPRO_COUNT" -gt 0 ]; then
+    REPRO_RESULT="NOT REPRODUCIBLE" REPRO_COLOR="#9f9f9f"
+  elif [ "$FAIL_COUNT" -gt 0 ]; then
+    REPRO_RESULT="INCONCLUSIVE" REPRO_COLOR="#9f9f9f"
+  fi
+else
+  # Multi pass — show breakdown: X✓ Y✗ Z⚠ / N
+  PARTS=""
+  [ "$REPRO_COUNT" -gt 0 ] && PARTS="${REPRO_COUNT}✓"
+  [ "$NOT_REPRO_COUNT" -gt 0 ] && PARTS="${PARTS:+${PARTS} }${NOT_REPRO_COUNT}✗"
+  [ "$FAIL_COUNT" -gt 0 ] && PARTS="${PARTS:+${PARTS} }${FAIL_COUNT}⚠"
+  REPRO_RESULT="${PARTS} / ${TOTAL_REPORTS}"
+  # Color based on best outcome
+  if [ "$REPRO_COUNT" -gt 0 ]; then
+    REPRO_COLOR="#2196f3"
+  elif [ "$NOT_REPRO_COUNT" -gt 0 ]; then
+    REPRO_COLOR="#9f9f9f"
+  fi
+fi
+
+# Badge label: #NUM QA0327 (with today's date)
+QA_DATE=$(date -u '+%m%d')
+BADGE_LABEL="QA${QA_DATE}"
+[ -n "${TARGET_NUM:-}" ] && BADGE_LABEL="#${TARGET_NUM} QA${QA_DATE}"
+
+# For PRs, also extract fix quality from Overall Risk section
+FIX_RESULT="" FIX_COLOR="#4c1"
+if [ "$TARGET_TYPE" != "issue" ]; then
+  # Try structured JSON risk first
+  ALL_RISKS=$(grep -ohP '"risk":\s*"[a-z]+' video-reviews/*.md 2>/dev/null | grep -oP '[a-z]+$' || true)
+  if [ -n "$ALL_RISKS" ]; then
+    # Use worst risk across all reports
+    if echo "$ALL_RISKS" | grep -q 'high'; then
+      FIX_RESULT="MAJOR ISSUES" FIX_COLOR="#e05d44"
+    elif echo "$ALL_RISKS" | grep -q 'medium'; then
+      FIX_RESULT="MINOR ISSUES" FIX_COLOR="#dfb317"
+    elif echo "$ALL_RISKS" | grep -q 'low'; then
+      FIX_RESULT="APPROVED" FIX_COLOR="#4c1"
+    fi
+  else
+    # Fallback: grep Overall Risk section
+    RISK_TEXT=""
+    if [ -d video-reviews ]; then
+      RISK_TEXT=$(sed -n '/^## Overall Risk/,/^## /p' video-reviews/*.md 2>/dev/null | sed 's/\*//g' | head -20 || true)
+    fi
+    RISK_FIRST=$(echo "$RISK_TEXT" | grep -oiP '^\s*(high|medium|moderate|low|minimal|critical)' | head -1 | tr '[:upper:]' '[:lower:]' || true)
+    if [ -n "$RISK_FIRST" ]; then
+      case "$RISK_FIRST" in
+        *low*|*minimal*) FIX_RESULT="APPROVED" FIX_COLOR="#4c1" ;;
+        *medium*|*moderate*) FIX_RESULT="MINOR ISSUES" FIX_COLOR="#dfb317" ;;
+        *high*|*critical*) FIX_RESULT="MAJOR ISSUES" FIX_COLOR="#e05d44" ;;
+      esac
+    elif echo "$RISK_TEXT" | grep -iq 'no.*risk\|approved\|looks good'; then
+      FIX_RESULT="APPROVED" FIX_COLOR="#4c1"
+    fi
+  fi
+fi
+
+# Always use vertical box badge
+/tmp/gen-badge-box.sh "$DEPLOY_DIR/badge.svg" "$BADGE_LABEL" \
+  "$REPRO_COUNT" "$NOT_REPRO_COUNT" "$FAIL_COUNT" "$TOTAL_REPORTS" \
+  "$FIX_RESULT" "$FIX_COLOR" "$REPRO_METHOD"
+BADGE_STATUS="${REPRO_RESULT:-UNKNOWN}${FIX_RESULT:+ | Fix: ${FIX_RESULT}}"
+echo "badge_status=${BADGE_STATUS:-FINISHED}" >> "$GITHUB_OUTPUT"
+
+# Remove files exceeding Cloudflare Pages 25MB limit to prevent silent deploy failures
+MAX_SIZE=$((25 * 1024 * 1024))
+find "$DEPLOY_DIR" -type f -size +${MAX_SIZE}c | while read -r big_file; do
+  SIZE_MB=$(( $(stat -c%s "$big_file") / 1024 / 1024 ))
+  echo "Removing oversized file: $(basename "$big_file") (${SIZE_MB}MB > 25MB limit)"
+  rm "$big_file"
+done
+
+BRANCH=$(echo "$RAW_BRANCH" | sed 's/[^a-zA-Z0-9-]/-/g' | sed 's/--*/-/g' | sed 's/^-//;s/-$//' | cut -c1-28)
+
+DEPLOY_OUTPUT=$(wrangler pages deploy "$DEPLOY_DIR" \
+  --project-name="comfy-qa" \
+  --branch="$BRANCH" 2>&1) || true
+echo "$DEPLOY_OUTPUT" | tail -5
+
+URL=$(echo "$DEPLOY_OUTPUT" | grep -oE 'https://[a-zA-Z0-9.-]+\.pages\.dev\S*' | head -1 || true)
+FALLBACK_URL="https://${BRANCH}.comfy-qa.pages.dev"
+
+echo "url=${URL:-$FALLBACK_URL}" >> "$GITHUB_OUTPUT"
+echo "Deployed to: ${URL:-$FALLBACK_URL}"

.claude/skills/comfy-qa/scripts/qa-generate-test.ts

@@ -0,0 +1,208 @@
+#!/usr/bin/env tsx
+/**
+ * Generates a Playwright regression test (.spec.ts) from a QA report + PR diff.
+ * Uses Gemini to produce a test that asserts UIUX behavior verified during QA.
+ *
+ * Usage:
+ *   pnpm exec tsx scripts/qa-generate-test.ts \
+ *     --qa-report <path>       QA video review report (markdown)
+ *     --pr-diff <path>         PR diff file
+ *     --output <path>          Output .spec.ts file path
+ *     --model <name>           Gemini model (default: gemini-3-flash-preview)
+ */
+import { readFile, writeFile } from 'node:fs/promises'
+import { basename, resolve } from 'node:path'
+
+import { GoogleGenerativeAI } from '@google/generative-ai'
+
+interface CliOptions {
+  qaReport: string
+  prDiff: string
+  output: string
+  model: string
+}
+
+const DEFAULTS: CliOptions = {
+  qaReport: '',
+  prDiff: '',
+  output: '',
+  model: 'gemini-3-flash-preview'
+}
+
+// ── Fixture API reference for the prompt ────────────────────────────
+const FIXTURE_API = `
+## ComfyUI Playwright Test Fixture API
+
+Import pattern:
+\`\`\`typescript
+import { expect } from '@playwright/test'
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+\`\`\`
+
+### Available helpers on \`comfyPage\`:
+- \`comfyPage.page\` — raw Playwright Page
+- \`comfyPage.menu.topbar\` — Topbar helper:
+  - \`.getTabNames(): Promise<string[]>\` — get all open tab names
+  - \`.getActiveTabName(): Promise<string>\` — get active tab name
+  - \`.saveWorkflow(name)\` — Save via File > Save dialog
+  - \`.saveWorkflowAs(name)\` — Save via File > Save As dialog
+  - \`.exportWorkflow(name)\` — Export via File > Export dialog
+  - \`.triggerTopbarCommand(path: string[])\` — e.g. ['File', 'Save As']
+  - \`.getWorkflowTab(name)\` — get a tab locator by name
+  - \`.closeWorkflowTab(name)\` — close a tab
+  - \`.openTopbarMenu()\` — open the hamburger menu
+  - \`.openSubmenu(label)\` — hover to open a submenu
+- \`comfyPage.menu.workflowsTab\` — Workflows sidebar:
+  - \`.open()\` / \`.close()\` — toggle sidebar
+  - \`.getTopLevelSavedWorkflowNames()\` — list saved workflows
+  - \`.getPersistedItem(name)\` — get a workflow item locator
+- \`comfyPage.workflow\` — WorkflowHelper:
+  - \`.loadWorkflow(name)\` — load from browser_tests/assets/{name}.json
+  - \`.setupWorkflowsDirectory(structure)\` — setup test directory
+  - \`.deleteWorkflow(name)\` — delete a workflow
+  - \`.isCurrentWorkflowModified(): Promise<boolean>\` — check dirty state
+  - \`.getUndoQueueSize()\` / \`.getRedoQueueSize()\`
+- \`comfyPage.settings.setSetting(key, value)\` — change settings
+- \`comfyPage.keyboard\` — KeyboardHelper:
+  - \`.undo()\` / \`.redo()\` / \`.bypass()\`
+- \`comfyPage.nodeOps\` — NodeOperationsHelper
+- \`comfyPage.canvas\` — CanvasHelper
+- \`comfyPage.contextMenu\` — ContextMenu
+- \`comfyPage.toast\` — ToastHelper
+- \`comfyPage.confirmDialog\` — confirmation dialog
+- \`comfyPage.nextFrame()\` — wait for Vue re-render
+
+### Test patterns:
+- Use \`test.describe('Name', { tag: '@ui' }, () => { ... })\` for UI tests
+- Use \`test.beforeEach\` to set up common state (settings, workflow dir)
+- Use \`expect(locator).toHaveScreenshot('name.png')\` for visual assertions
+- Use \`expect(locator).toBeVisible()\` / \`.toHaveText()\` for behavioral assertions
+- Use \`comfyPage.workflow.setupWorkflowsDirectory({})\` to ensure clean state
+`
+
+// ── Prompt builder ──────────────────────────────────────────────────
+function buildPrompt(qaReport: string, prDiff: string): string {
+  return `You are a Playwright test generator for the ComfyUI frontend.
+
+Your task: Generate a single .spec.ts regression test file that asserts the UIUX behavior
+described in the QA report below. The test must:
+
+1. Use the ComfyUI Playwright fixture API (documented below)
+2. Test UIUX behavior ONLY — element visibility, tab names, dialog states, workflow states
+3. NOT test code implementation details
+4. Be concise — only test the behavior that the PR changed
+5. Follow existing test conventions (see API reference)
+
+${FIXTURE_API}
+
+## QA Video Review Report
+${qaReport}
+
+## PR Diff (for context on what changed)
+${prDiff.slice(0, 8000)}
+
+## Output Requirements
+- Output ONLY the .spec.ts file content — no markdown fences, no explanations
+- Start with imports, end with closing brace
+- Use descriptive test names that explain the expected behavior
+- Add screenshot assertions where visual verification matters
+- Keep it focused: 2-5 test cases covering the core behavioral change
+- Use \`test.beforeEach\` for common setup (settings, workflow directory)
+- Tag the describe block with \`{ tag: '@ui' }\` or \`{ tag: '@workflow' }\` as appropriate
+`
+}
+
+// ── Gemini call ─────────────────────────────────────────────────────
+async function generateTest(
+  qaReport: string,
+  prDiff: string,
+  model: string
+): Promise<string> {
+  const apiKey = process.env.GEMINI_API_KEY
+  if (!apiKey) throw new Error('GEMINI_API_KEY env var required')
+
+  const genAI = new GoogleGenerativeAI(apiKey)
+  const genModel = genAI.getGenerativeModel({ model })
+
+  const prompt = buildPrompt(qaReport, prDiff)
+  console.warn(`Sending prompt to ${model} (${prompt.length} chars)...`)
+
+  const result = await genModel.generateContent({
+    contents: [{ role: 'user', parts: [{ text: prompt }] }],
+    generationConfig: {
+      temperature: 0.2,
+      maxOutputTokens: 8192
+    }
+  })
+
+  const text = result.response.text()
+
+  // Strip markdown fences if model wraps output
+  return text
+    .replace(/^```(?:typescript|ts)?\n?/, '')
+    .replace(/\n?```$/, '')
+    .trim()
+}
+
+// ── CLI ─────────────────────────────────────────────────────────────
+function parseArgs(): CliOptions {
+  const args = process.argv.slice(2)
+  const opts = { ...DEFAULTS }
+
+  for (let i = 0; i < args.length; i++) {
+    switch (args[i]) {
+      case '--qa-report':
+        opts.qaReport = args[++i]
+        break
+      case '--pr-diff':
+        opts.prDiff = args[++i]
+        break
+      case '--output':
+        opts.output = args[++i]
+        break
+      case '--model':
+        opts.model = args[++i]
+        break
+      case '--help':
+        console.warn(`Usage:
+  pnpm exec tsx scripts/qa-generate-test.ts [options]
+
+Options:
+  --qa-report <path>   QA video review report (markdown) [required]
+  --pr-diff <path>     PR diff file [required]
+  --output <path>      Output .spec.ts path [required]
+  --model <name>       Gemini model (default: gemini-3-flash-preview)`)
+        process.exit(0)
+    }
+  }
+
+  if (!opts.qaReport || !opts.prDiff || !opts.output) {
+    console.error('Missing required args. Run with --help for usage.')
+    process.exit(1)
+  }
+
+  return opts
+}
+
+async function main() {
+  const opts = parseArgs()
+
+  const qaReport = await readFile(resolve(opts.qaReport), 'utf-8')
+  const prDiff = await readFile(resolve(opts.prDiff), 'utf-8')
+
+  console.warn(
+    `QA report: ${basename(opts.qaReport)} (${qaReport.length} chars)`
+  )
+  console.warn(`PR diff: ${basename(opts.prDiff)} (${prDiff.length} chars)`)
+
+  const testCode = await generateTest(qaReport, prDiff, opts.model)
+
+  const outputPath = resolve(opts.output)
+  await writeFile(outputPath, testCode + '\n')
+  console.warn(`Generated test: ${outputPath} (${testCode.length} chars)`)
+}
+
+main().catch((err) => {
+  console.error(err)
+  process.exit(1)
+})

.claude/skills/comfy-qa/scripts/qa-report-template.html

@@ -0,0 +1,158 @@
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>QA Session Recordings</title>
+<link rel=preconnect href=https://fonts.googleapis.com><link rel=preconnect href=https://fonts.gstatic.com crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+<style>
+:root{--bg:oklch(97% 0.01 265);--surface:oklch(100% 0 0);--surface-up:oklch(94% 0.01 265);--fg:oklch(15% 0.02 265);--fg-muted:oklch(40% 0.01 265);--fg-dim:oklch(55% 0.01 265);--primary:oklch(50% 0.21 265);--primary-up:oklch(45% 0.21 265);--primary-glow:oklch(55% 0.15 265);--ok:oklch(45% 0.18 155);--err:oklch(50% 0.22 25);--border:oklch(85% 0.01 265);--border-faint:oklch(90% 0.01 265);--r:0.75rem;--r-lg:1rem;--ease-out:cubic-bezier(0.22,1,0.36,1);--dur-base:250ms;--dur-slow:500ms;--font:'Inter',system-ui,sans-serif;--font-mono:'JetBrains Mono',monospace}
+@media(prefers-color-scheme:dark){:root{--bg:oklch(8% 0.02 265);--surface:oklch(12% 0.02 265);--surface-up:oklch(16% 0.02 265);--fg:oklch(96% 0.01 95);--fg-muted:oklch(65% 0.01 265);--fg-dim:oklch(45% 0.01 265);--primary:oklch(62% 0.21 265);--primary-up:oklch(68% 0.21 265);--primary-glow:oklch(62% 0.15 265);--ok:oklch(62% 0.18 155);--err:oklch(62% 0.22 25);--border:oklch(22% 0.02 265);--border-faint:oklch(15% 0.01 265)}}
+*{margin:0;padding:0;box-sizing:border-box}
+body{background:var(--bg);color:var(--fg);font-family:var(--font);min-height:100vh;padding:clamp(1.5rem,4vw,3rem) clamp(1rem,3vw,2rem);position:relative}
+@media(prefers-color-scheme:dark){body::after{content:'';position:fixed;inset:0;pointer-events:none;opacity:.03;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}}
+.container{max-width:1200px;margin:0 auto}
+header{display:flex;align-items:center;gap:1rem;margin-bottom:clamp(1.5rem,4vw,3rem);padding-bottom:1.25rem;border-bottom:1px solid var(--border)}
+.header-icon{width:36px;height:36px;display:grid;place-items:center;background:linear-gradient(135deg,oklch(100% 0 0/.06),oklch(100% 0 0/.02));backdrop-filter:blur(12px);border:1px solid oklch(100% 0 0/.1);border-radius:var(--r);flex-shrink:0}
+.header-icon svg{color:var(--primary)}
+h1{font-size:clamp(1.25rem,2.5vw,1.625rem);font-weight:700;letter-spacing:-.03em;background:linear-gradient(135deg,var(--fg),var(--fg-muted));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
+.meta{color:var(--fg-dim);font-size:.8125rem;margin-top:.15rem;letter-spacing:.01em}
+.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(480px,100%),1fr));gap:1.5rem}
+.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
+.card:hover{border-color:var(--primary);box-shadow:0 4px 16px oklch(0% 0 0/.1);transform:translateY(-2px)}
+.video-wrap{position:relative;background:var(--surface);border-bottom:1px solid var(--border-faint)}
+.video-wrap video{width:100%;display:block;aspect-ratio:16/9;object-fit:contain}
+.card-body{padding:.75rem 1rem;display:flex;align-items:center;justify-content:space-between}
+.platform{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.9375rem;letter-spacing:-.01em}
+.icon{font-size:1.125rem}
+.links{display:flex;gap:.5rem}
+.dl{color:var(--fg-muted);text-decoration:none;font-size:.75rem;font-weight:500;display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .6rem;border-radius:9999px;border:1px solid var(--border);background:oklch(100% 0 0/.03);transition:all var(--dur-base) var(--ease-out)}
+.dl:hover{color:var(--primary-up);border-color:var(--primary);background:oklch(62% 0.21 265/.08)}
+.badge{font-size:.6875rem;font-weight:600;padding:.2rem .625rem;border-radius:9999px;text-transform:uppercase;letter-spacing:.05em}
+.card-header{padding:.75rem 1rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-faint)}
+.comparison{display:grid;grid-template-columns:1fr 1fr;gap:0}
+.comp-panel{border-right:1px solid var(--border-faint)}
+.comp-panel:last-child{border-right:none}
+.comp-label{padding:.4rem .75rem;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-muted);background:var(--surface);display:flex;align-items:center;gap:.4rem}
+.comp-tag{font-size:.6rem;padding:.1rem .4rem;border-radius:9999px;font-weight:600}
+.comp-panel:first-child .comp-tag{background:oklch(65% 0.01 265/.15);color:var(--fg-muted);border:1px solid var(--border)}
+.comp-panel:last-child .comp-tag{background:oklch(62% 0.18 155/.15);color:var(--ok);border:1px solid oklch(62% 0.18 155/.25)}
+.comp-dl{padding:.4rem .75rem;display:flex;justify-content:center}
+.report{border-top:1px solid var(--border-faint);padding:.75rem 1rem;font-size:.8125rem}
+.report summary{cursor:pointer;color:var(--fg-muted);font-weight:500;display:flex;align-items:center;gap:.4rem;user-select:none;transition:color var(--dur-base) var(--ease-out)}
+.report summary:hover{color:var(--fg)}
+.report summary svg{flex-shrink:0;opacity:.5}
+.report[open] summary{margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid var(--border-faint)}
+.report-body{line-height:1.7;color:oklch(80% 0.01 265);overflow-x:auto}
+.report-body h1,.report-body h2{margin:1.25rem 0 .5rem;color:var(--fg);font-size:1rem;font-weight:600;letter-spacing:-.02em;border-bottom:1px solid var(--border-faint);padding-bottom:.4rem}
+.report-body h3{margin:.75rem 0 .4rem;color:var(--fg);font-size:.875rem;font-weight:600}
+.report-body p{margin:.4rem 0}
+.report-body ul,.report-body ol{margin:.4rem 0 .4rem 1.5rem}
+.report-body li{margin:.25rem 0}
+.report-body code{background:var(--surface-up);padding:.125rem .375rem;border-radius:.25rem;font-size:.7rem;font-family:var(--font-mono);border:1px solid var(--border-faint)}
+.report-body h3+p>code:first-child{background:oklch(62% 0.22 25/.15);color:var(--err);border-color:oklch(62% 0.22 25/.25)}
+.report-body h3+p>code:nth-child(2){background:oklch(62% 0.21 265/.15);color:var(--primary-up);border-color:oklch(62% 0.21 265/.25)}
+.report-body h3+p>code:nth-child(3){background:oklch(65% 0.01 265/.15);color:var(--fg-muted);border-color:var(--border)}
+.report-body table{width:100%;border-collapse:collapse;margin:.75rem 0;font-size:.75rem;border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
+.report-body th,.report-body td{border:1px solid var(--border-faint);padding:.5rem .75rem;text-align:left;vertical-align:top;word-wrap:break-word}
+.report-body th{background:var(--surface-up);color:var(--fg);font-weight:600;font-size:.6875rem;text-transform:uppercase;letter-spacing:.05em;position:sticky;top:0;white-space:nowrap}
+.report-body tr:nth-child(even){background:color-mix(in oklch,var(--surface) 50%,transparent)}
+.report-body tr:hover{background:color-mix(in oklch,var(--surface-up) 50%,transparent)}
+.report-body strong{color:var(--fg)}
+.report-body hr{border:none;border-top:1px solid var(--border-faint);margin:1rem 0}
+@keyframes fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
+.reveal{animation:fade-up var(--dur-slow) var(--ease-out) both;animation-delay:calc(var(--i,0) * 120ms)}
+@media(prefers-reduced-motion:reduce){.reveal{animation:none}}
+@media(max-width:480px){.grid{grid-template-columns:1fr}.card-body{flex-wrap:wrap;gap:.5rem}}
+.sha{color:var(--primary);text-decoration:none;font-family:var(--font-mono);font-size:.75rem;font-weight:500;padding:.1rem .4rem;border-radius:.25rem;background:oklch(62% 0.21 265/.08);border:1px solid oklch(62% 0.21 265/.15);transition:all var(--dur-base) var(--ease-out)}
+.sha:hover{background:oklch(62% 0.21 265/.15);border-color:var(--primary)}
+.badge-bar{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}
+.badge-img{height:20px;display:block}
+.copy-badge{background:oklch(100% 0 0/.06);border:1px solid var(--border);color:var(--fg-muted);padding:.3rem .4rem;border-radius:var(--r);cursor:pointer;display:inline-flex;align-items:center;transition:all var(--dur-base) var(--ease-out)}
+.copy-badge:hover{color:var(--primary-up);border-color:var(--primary);background:oklch(62% 0.21 265/.1)}
+.copy-badge.copied{color:var(--ok);border-color:var(--ok)}
+.vseek{width:100%;padding:0 .75rem;background:var(--surface);border-top:1px solid var(--border-faint);position:relative;height:24px;display:flex;align-items:center}
+.vseek input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--border);border-radius:2px;outline:none;cursor:pointer;position:relative;z-index:2}
+.vseek input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--primary);cursor:pointer;border:2px solid var(--bg);box-shadow:0 0 4px oklch(0% 0 0/.3)}
+.vseek input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--primary);cursor:pointer;border:2px solid var(--bg)}
+.vseek .vbuf{position:absolute;left:.75rem;right:.75rem;height:4px;border-radius:2px;pointer-events:none;top:50%;transform:translateY(-50%)}
+.vseek .vbuf-bar{height:100%;background:oklch(62% 0.21 265/.25);border-radius:2px;transition:width 200ms linear}
+.vctrl{display:flex;align-items:center;gap:.375rem;padding:.5rem .75rem;background:var(--surface);border-top:1px solid var(--border-faint);flex-wrap:wrap}
+.vctrl button{background:oklch(100% 0 0/.06);border:1px solid var(--border);color:var(--fg-muted);font-size:.6875rem;font-weight:600;font-family:var(--font-mono);padding:.25rem .5rem;border-radius:.25rem;cursor:pointer;transition:all var(--dur-base) var(--ease-out);white-space:nowrap}
+.vctrl button:hover{color:var(--primary-up);border-color:var(--primary);background:oklch(62% 0.21 265/.1)}
+.vctrl button.active{color:var(--primary);border-color:var(--primary);background:oklch(62% 0.21 265/.15)}
+.vctrl .vtime{font-family:var(--font-mono);font-size:.6875rem;color:var(--fg-dim);min-width:10ch;text-align:center}
+.vctrl .vsep{width:1px;height:1rem;background:var(--border);flex-shrink:0}
+.vctrl .vhint{font-size:.6rem;color:var(--fg-dim);margin-left:auto}
+.purpose{background:linear-gradient(135deg,oklch(100% 0 0/.04),oklch(100% 0 0/.02));border:1px solid oklch(100% 0 0/.08);border-radius:var(--r-lg);padding:1rem 1.25rem;margin-bottom:1.5rem;font-size:.85rem;line-height:1.7;color:oklch(80% 0.01 265)}
+.purpose strong{color:var(--fg);font-weight:600}
+.purpose .purpose-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-muted);margin-bottom:.4rem}
+.purpose .purpose-reqs{margin-top:.75rem;padding-top:.75rem;border-top:1px solid oklch(100% 0 0/.06);font-size:.8rem;color:oklch(70% 0.01 265);line-height:1.8}
+</style></head><body><div class=container>
+<header><div class=header-icon><svg width=20 height=20 viewBox="0 0 24 24" fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><polygon points="23 7 16 12 23 17 23 7"/><rect x=1 y=5 width=15 height=14 rx=2 ry=2/></svg></div><div><h1>QA Session Recordings</h1><div class=meta>ComfyUI Frontend &middot; Automated QA{{COMMIT_HTML}}{{RUN_LINK}}{{TIMING_HTML}}</div>{{BADGE_HTML}}</div></header>
+{{PURPOSE_HTML}}<div class=grid>{{CARDS}}</div>
+<div id=research-section style="margin-top:2rem"></div>
+</div><script>
+// Load research-log.json and reproduce.spec.ts if available
+(async()=>{
+  const sec=document.getElementById('research-section');
+  try{
+    const [logRes,testRes,vsRes]=await Promise.allSettled([fetch('research-log.json'),fetch('reproduce.spec.ts'),fetch('video-script.spec.ts')]);
+    let html='';
+    if(logRes.status==='fulfilled'&&logRes.value.ok){
+      const log=await logRes.value.json();
+      html+=`<details style="margin-bottom:1.5rem"><summary style="cursor:pointer;font-weight:600;font-size:1rem;padding:.75rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)">Research Log &mdash; ${log.verdict||'?'} (${log.toolCalls||'?'} tool calls, ${((log.elapsedMs||0)/1000).toFixed(1)}s)</summary><div style="padding:1rem;background:var(--surface);border:1px solid var(--border);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);overflow:auto;max-height:600px"><pre style="font-family:var(--font-mono);font-size:.8rem;line-height:1.6;white-space:pre-wrap">${JSON.stringify(log,null,2)}</pre></div></details>`;
+    }
+    if(testRes.status==='fulfilled'&&testRes.value.ok){
+      const code=await testRes.value.text();
+      html+=`<details><summary style="cursor:pointer;font-weight:600;font-size:1rem;padding:.75rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)">E2E Test Code (reproduce.spec.ts)</summary><div style="padding:1rem;background:var(--surface);border:1px solid var(--border);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);overflow:auto;max-height:600px"><pre style="font-family:var(--font-mono);font-size:.8rem;line-height:1.6;white-space:pre-wrap">${code.replace(/</g,'&lt;').replace(/>/g,'&gt;')}</pre></div></details>`;
+    }
+    if(vsRes.status==='fulfilled'&&vsRes.value.ok){
+      const vsCode=await vsRes.value.text();
+      html+=`<details style="margin-top:1rem"><summary style="cursor:pointer;font-weight:600;font-size:1rem;padding:.75rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)">Video Script (video-script.spec.ts)</summary><div style="padding:1rem;background:var(--surface);border:1px solid var(--border);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);overflow:auto;max-height:600px"><pre style="font-family:var(--font-mono);font-size:.8rem;line-height:1.6;white-space:pre-wrap">${vsCode.replace(/</g,'&lt;').replace(/>/g,'&gt;')}</pre></div></details>`;
+    }
+    if(html)sec.innerHTML=html;
+  }catch(e){console.warn('research load failed',e)}
+})();
+</script><script>
+function copyBadge(){const u=location.href.replace(/\/[^/]*$/,'/');const b=u+'badge.svg';const md='[![QA Badge]('+b+')]('+u+')';navigator.clipboard.writeText(md).then(()=>{const btn=document.querySelector('.copy-badge');btn.classList.add('copied');btn.innerHTML='<svg width=14 height=14 viewBox="0 0 24 24" fill=none stroke=currentColor stroke-width=2><polyline points="20 6 9 17 4 12"/></svg>';setTimeout(()=>{btn.classList.remove('copied');btn.innerHTML='<svg width=14 height=14 viewBox="0 0 24 24" fill=none stroke=currentColor stroke-width=2><rect x=9 y=9 width=13 height=13 rx=2/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>'},2000)})}
+document.querySelectorAll('[data-md]').forEach(el=>{const t=el.textContent;el.removeAttribute('data-md');el.innerHTML=marked.parse(t)});
+const FPS=30,FT=1/FPS,SPEEDS=[0.1,0.25,0.5,1,1.5,2];
+document.querySelectorAll('.video-wrap video').forEach(v=>{
+  v.playbackRate=0.5;
+  const c=document.createElement('div');c.className='vctrl';
+  const btn=(label,fn)=>{const b=document.createElement('button');b.textContent=label;b.onclick=fn;c.appendChild(b);return b};
+  const sep=()=>{const s=document.createElement('div');s.className='vsep';c.appendChild(s)};
+  const time=document.createElement('span');time.className='vtime';time.textContent='0:00.000';
+  btn('\u23EE',()=>{v.currentTime=0});
+  btn('\u25C0\u25C0',()=>{v.currentTime=Math.max(0,v.currentTime-FT*10)});
+  btn('\u25C0',()=>{v.pause();v.currentTime=Math.max(0,v.currentTime-FT)});
+  const playBtn=btn('\u25B6',()=>{v.paused?v.play():v.pause()});
+  btn('\u25B6\u25B6',()=>{v.pause();v.currentTime+=FT});
+  btn('\u25B6\u25B6\u25B6',()=>{v.currentTime+=FT*10});
+  sep();
+  const spdBtns=SPEEDS.map(s=>{const b=btn(s+'x',()=>{v.playbackRate=s;spdBtns.forEach(x=>x.classList.remove('active'));b.classList.add('active')});if(s===0.5)b.classList.add('active');return b});
+  sep();c.appendChild(time);
+  const hint=document.createElement('span');hint.className='vhint';hint.textContent='\u2190\u2192 frame \u2022 space play';c.appendChild(hint);
+  // Custom seekbar — works even without server range request support
+  const seekWrap=document.createElement('div');seekWrap.className='vseek';
+  const seekBar=document.createElement('input');seekBar.type='range';seekBar.min=0;seekBar.max=1000;seekBar.value=0;seekBar.step=1;
+  const bufWrap=document.createElement('div');bufWrap.className='vbuf';
+  const bufBar=document.createElement('div');bufBar.className='vbuf-bar';bufBar.style.width='0%';
+  bufWrap.appendChild(bufBar);seekWrap.appendChild(bufWrap);seekWrap.appendChild(seekBar);
+  let seeking=false;
+  seekBar.oninput=()=>{seeking=true;if(v.duration){v.currentTime=v.duration*(seekBar.value/1000)}};
+  seekBar.onchange=()=>{seeking=false};
+  v.closest('.video-wrap').after(seekWrap);
+  seekWrap.after(c);
+  v.ontimeupdate=()=>{
+    const m=Math.floor(v.currentTime/60),s=Math.floor(v.currentTime%60),ms=Math.floor((v.currentTime%1)*1000);
+    time.textContent=m+':'+(s<10?'0':'')+s+'.'+String(ms).padStart(3,'0');
+    if(!seeking&&v.duration){seekBar.value=Math.round((v.currentTime/v.duration)*1000)}
+  };
+  v.onprogress=v.onloadeddata=()=>{if(v.buffered.length&&v.duration){bufBar.style.width=(v.buffered.end(v.buffered.length-1)/v.duration*100)+'%'}};
+  v.onplay=()=>{playBtn.textContent='\u23F8'};v.onpause=()=>{playBtn.textContent='\u25B6'};
+  v.parentElement.addEventListener('keydown',e=>{
+    if(e.key==='ArrowLeft'){e.preventDefault();v.pause();v.currentTime=Math.max(0,v.currentTime-FT)}
+    if(e.key==='ArrowRight'){e.preventDefault();v.pause();v.currentTime+=FT}
+    if(e.key===' '){e.preventDefault();v.paused?v.play():v.pause()}
+  });
+  v.parentElement.setAttribute('tabindex','0');
+});
+</script></body></html>

.claude/skills/comfy-qa/scripts/qa-reproduce.ts

@@ -0,0 +1,253 @@
+#!/usr/bin/env tsx
+/**
+ * QA Reproduce Phase — Deterministic replay of research plan with narration
+ *
+ * Takes a reproduction plan from the research phase and replays it:
+ * 1. Execute each action deterministically (no AI decisions)
+ * 2. Capture a11y snapshot before/after each action
+ * 3. Gemini describes what visually changed (narration for humans)
+ * 4. Output: narration-log.json with full evidence chain
+ */
+
+import type { Page } from '@playwright/test'
+import { GoogleGenerativeAI } from '@google/generative-ai'
+import { mkdirSync, writeFileSync } from 'fs'
+
+import type { ActionResult } from './qa-record.js'
+
+// ── Types ──
+
+interface ReproductionStep {
+  action: Record<string, unknown> & { action: string }
+  expectedAssertion: string
+}
+
+interface NarrationEntry {
+  step: number
+  action: string
+  params: Record<string, unknown>
+  result: ActionResult
+  a11yBefore: unknown
+  a11yAfter: unknown
+  assertionExpected: string
+  assertionPassed: boolean
+  assertionActual: string
+  geminiNarration: string
+  timestampMs: number
+}
+
+export interface NarrationLog {
+  entries: NarrationEntry[]
+  allAssertionsPassed: boolean
+}
+
+interface ReproduceOptions {
+  page: Page
+  plan: ReproductionStep[]
+  geminiApiKey: string
+  outputDir: string
+}
+
+// ── A11y helpers ──
+
+interface A11yNode {
+  role: string
+  name: string
+  value?: string
+  checked?: boolean
+  disabled?: boolean
+  expanded?: boolean
+  children?: A11yNode[]
+}
+
+function searchA11y(node: A11yNode | null, selector: string): A11yNode | null {
+  if (!node) return null
+  const sel = selector.toLowerCase()
+  if (
+    node.name?.toLowerCase().includes(sel) ||
+    node.role?.toLowerCase().includes(sel)
+  ) {
+    return node
+  }
+  if (node.children) {
+    for (const child of node.children) {
+      const found = searchA11y(child, selector)
+      if (found) return found
+    }
+  }
+  return null
+}
+
+function summarizeA11y(node: A11yNode | null): string {
+  if (!node) return 'null'
+  const parts = [`role=${node.role}`, `name="${node.name}"`]
+  if (node.value !== undefined) parts.push(`value="${node.value}"`)
+  if (node.checked !== undefined) parts.push(`checked=${node.checked}`)
+  if (node.disabled) parts.push('disabled')
+  if (node.expanded !== undefined) parts.push(`expanded=${node.expanded}`)
+  return `{${parts.join(', ')}}`
+}
+
+// ── Subtitle overlay ──
+
+async function showSubtitle(page: Page, text: string, step: number) {
+  const encoded = encodeURIComponent(
+    text.slice(0, 120).replace(/'/g, "\\'").replace(/\n/g, ' ')
+  )
+  await page.addScriptTag({
+    content: `(function(){
+      var id='qa-subtitle';
+      var el=document.getElementById(id);
+      if(!el){
+        el=document.createElement('div');
+        el.id=id;
+        Object.assign(el.style,{position:'fixed',bottom:'32px',left:'50%',transform:'translateX(-50%)',zIndex:'2147483646',maxWidth:'90%',padding:'6px 14px',borderRadius:'6px',background:'rgba(0,0,0,0.8)',color:'rgba(255,255,255,0.95)',fontSize:'12px',fontFamily:'system-ui,sans-serif',fontWeight:'400',lineHeight:'1.4',pointerEvents:'none',textAlign:'center',whiteSpace:'normal'});
+        document.body.appendChild(el);
+      }
+      el.textContent='['+${step}+'] '+decodeURIComponent('${encoded}');
+    })()`
+  })
+}
+
+// ── Gemini visual narration ──
+
+async function geminiDescribe(
+  page: Page,
+  geminiApiKey: string,
+  focus: string
+): Promise<string> {
+  try {
+    const screenshot = await page.screenshot({ type: 'jpeg', quality: 70 })
+    const genAI = new GoogleGenerativeAI(geminiApiKey)
+    const model = genAI.getGenerativeModel({ model: 'gemini-3-flash-preview' })
+
+    const result = await model.generateContent([
+      {
+        text: `Describe in 1-2 sentences what you see on this ComfyUI screen. Focus on: ${focus}. Be factual — only describe what is visible.`
+      },
+      {
+        inlineData: {
+          mimeType: 'image/jpeg',
+          data: screenshot.toString('base64')
+        }
+      }
+    ])
+    return result.response.text().trim()
+  } catch (e) {
+    return `(Gemini narration failed: ${e instanceof Error ? e.message.slice(0, 50) : e})`
+  }
+}
+
+// ── Main reproduce function ──
+
+export async function runReproducePhase(
+  opts: ReproduceOptions
+): Promise<NarrationLog> {
+  const { page, plan, geminiApiKey, outputDir } = opts
+  const { executeAction } = await import('./qa-record.js')
+
+  const narrationDir = `${outputDir}/narration`
+  mkdirSync(narrationDir, { recursive: true })
+
+  const entries: NarrationEntry[] = []
+  const startMs = Date.now()
+
+  console.warn(`Reproduce phase: replaying ${plan.length} steps...`)
+
+  for (let i = 0; i < plan.length; i++) {
+    const step = plan[i]
+    const actionObj = step.action
+    const elapsed = Date.now() - startMs
+
+    // Show subtitle
+    await showSubtitle(page, `Step ${i + 1}: ${actionObj.action}`, i + 1)
+    console.warn(`  [${i + 1}/${plan.length}] ${actionObj.action}`)
+
+    // Capture a11y BEFORE
+    const a11yBefore = await page
+      .locator('body')
+      .ariaSnapshot({ timeout: 3000 })
+      .catch(() => null)
+
+    // Execute action
+    const result = await executeAction(
+      page,
+      actionObj as Parameters<typeof executeAction>[1],
+      outputDir
+    )
+    await new Promise((r) => setTimeout(r, 500))
+
+    // Capture a11y AFTER
+    const a11yAfter = await page
+      .locator('body')
+      .ariaSnapshot({ timeout: 3000 })
+      .catch(() => null)
+
+    // Check assertion
+    let assertionPassed = false
+    let assertionActual = ''
+    if (step.expectedAssertion) {
+      // Parse the expected assertion — e.g. "Settings dialog: visible" or "tab count: 2"
+      const parts = step.expectedAssertion.split(':').map((s) => s.trim())
+      const selectorName = parts[0]
+      const expectedState = parts.slice(1).join(':').trim()
+
+      const found = searchA11y(a11yAfter as A11yNode | null, selectorName)
+      assertionActual = found ? summarizeA11y(found) : 'NOT FOUND'
+
+      if (expectedState === 'visible' || expectedState === 'exists') {
+        assertionPassed = found !== null
+      } else if (expectedState === 'hidden' || expectedState === 'gone') {
+        assertionPassed = found === null
+      } else {
+        // Generic: check if the actual state contains the expected text
+        assertionPassed = assertionActual
+          .toLowerCase()
+          .includes(expectedState.toLowerCase())
+      }
+
+      console.warn(
+        `    Assertion: "${step.expectedAssertion}" → ${assertionPassed ? '✓ PASS' : '✗ FAIL'} (actual: ${assertionActual})`
+      )
+    }
+
+    // Gemini narration (visual description for humans)
+    const geminiNarration = await geminiDescribe(
+      page,
+      geminiApiKey,
+      `What changed after ${actionObj.action}?`
+    )
+
+    entries.push({
+      step: i + 1,
+      action: actionObj.action,
+      params: actionObj,
+      result,
+      a11yBefore,
+      a11yAfter,
+      assertionExpected: step.expectedAssertion,
+      assertionPassed,
+      assertionActual,
+      geminiNarration,
+      timestampMs: elapsed
+    })
+  }
+
+  // Final screenshot
+  await page.screenshot({ path: `${outputDir}/reproduce-final.png` })
+
+  const log: NarrationLog = {
+    entries,
+    allAssertionsPassed: entries.every((e) => e.assertionPassed)
+  }
+
+  writeFileSync(
+    `${narrationDir}/narration-log.json`,
+    JSON.stringify(log, null, 2)
+  )
+  console.warn(
+    `Reproduce phase complete: ${entries.filter((e) => e.assertionPassed).length}/${entries.length} assertions passed`
+  )
+
+  return log
+}

.claude/skills/comfy-qa/scripts/qa-video-review.test.ts

@@ -0,0 +1,150 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  extractPlatformFromArtifactDirName,
+  pickLatestVideosByPlatform,
+  selectVideoCandidateByFile
+} from './qa-video-review'
+
+describe('extractPlatformFromArtifactDirName', () => {
+  it('extracts and normalizes known qa artifact directory names', () => {
+    expect(
+      extractPlatformFromArtifactDirName('qa-report-Windows-22818315023')
+    ).toBe('windows')
+    expect(
+      extractPlatformFromArtifactDirName('qa-report-macOS-22818315023')
+    ).toBe('macos')
+    expect(
+      extractPlatformFromArtifactDirName('qa-report-Linux-22818315023')
+    ).toBe('linux')
+  })
+
+  it('falls back to slugifying unknown directory names', () => {
+    expect(extractPlatformFromArtifactDirName('custom platform run')).toBe(
+      'custom-platform-run'
+    )
+  })
+})
+
+describe('pickLatestVideosByPlatform', () => {
+  it('keeps only the latest candidate per platform', () => {
+    const selected = pickLatestVideosByPlatform([
+      {
+        platformName: 'windows',
+        videoPath: '/tmp/windows-old.mp4',
+        mtimeMs: 100
+      },
+      {
+        platformName: 'windows',
+        videoPath: '/tmp/windows-new.mp4',
+        mtimeMs: 200
+      },
+      {
+        platformName: 'linux',
+        videoPath: '/tmp/linux.mp4',
+        mtimeMs: 150
+      }
+    ])
+
+    expect(selected).toEqual([
+      {
+        platformName: 'linux',
+        videoPath: '/tmp/linux.mp4',
+        mtimeMs: 150
+      },
+      {
+        platformName: 'windows',
+        videoPath: '/tmp/windows-new.mp4',
+        mtimeMs: 200
+      }
+    ])
+  })
+})
+
+describe('selectVideoCandidateByFile', () => {
+  it('selects a single candidate by artifacts-relative path', () => {
+    const selected = selectVideoCandidateByFile(
+      [
+        {
+          platformName: 'windows',
+          videoPath: '/tmp/qa-artifacts/qa-report-Windows-1/qa-session.mp4',
+          mtimeMs: 100
+        },
+        {
+          platformName: 'linux',
+          videoPath: '/tmp/qa-artifacts/qa-report-Linux-1/qa-session.mp4',
+          mtimeMs: 200
+        }
+      ],
+      {
+        artifactsDir: '/tmp/qa-artifacts',
+        videoFile: 'qa-report-Linux-1/qa-session.mp4'
+      }
+    )
+
+    expect(selected).toEqual({
+      platformName: 'linux',
+      videoPath: '/tmp/qa-artifacts/qa-report-Linux-1/qa-session.mp4',
+      mtimeMs: 200
+    })
+  })
+
+  it('throws when basename matches multiple videos', () => {
+    expect(() =>
+      selectVideoCandidateByFile(
+        [
+          {
+            platformName: 'windows',
+            videoPath: '/tmp/qa-artifacts/qa-report-Windows-1/qa-session.mp4',
+            mtimeMs: 100
+          },
+          {
+            platformName: 'linux',
+            videoPath: '/tmp/qa-artifacts/qa-report-Linux-1/qa-session.mp4',
+            mtimeMs: 200
+          }
+        ],
+        {
+          artifactsDir: '/tmp/qa-artifacts',
+          videoFile: 'qa-session.mp4'
+        }
+      )
+    ).toThrow('matched 2 videos')
+  })
+
+  it('throws when there is no matching video', () => {
+    expect(() =>
+      selectVideoCandidateByFile(
+        [
+          {
+            platformName: 'windows',
+            videoPath: '/tmp/qa-artifacts/qa-report-Windows-1/qa-session.mp4',
+            mtimeMs: 100
+          }
+        ],
+        {
+          artifactsDir: '/tmp/qa-artifacts',
+          videoFile: 'qa-report-macOS-1/qa-session.mp4'
+        }
+      )
+    ).toThrow('No video matched')
+  })
+
+  it('throws when video file is missing', () => {
+    expect(() =>
+      selectVideoCandidateByFile(
+        [
+          {
+            platformName: 'windows',
+            videoPath: '/tmp/qa-artifacts/qa-report-Windows-1/qa-session.mp4',
+            mtimeMs: 100
+          }
+        ],
+        {
+          artifactsDir: '/tmp/qa-artifacts',
+          videoFile: '   '
+        }
+      )
+    ).toThrow('--video-file is required')
+  })
+})

.claude/skills/comfy-qa/scripts/qa-video-review.ts

@@ -0,0 +1,771 @@
+#!/usr/bin/env tsx
+import { mkdir, readFile, stat, writeFile } from 'node:fs/promises'
+import { basename, dirname, extname, relative, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+import { GoogleGenerativeAI } from '@google/generative-ai'
+import { globSync } from 'glob'
+
+interface CliOptions {
+  artifactsDir: string
+  videoFile: string
+  beforeVideo: string
+  outputDir: string
+  model: string
+  requestTimeoutMs: number
+  dryRun: boolean
+  prContext: string
+  targetUrl: string
+  passLabel: string
+}
+
+interface VideoCandidate {
+  platformName: string
+  videoPath: string
+  mtimeMs: number
+}
+
+const DEFAULT_OPTIONS: CliOptions = {
+  artifactsDir: './tmp/qa-artifacts',
+  videoFile: '',
+  beforeVideo: '',
+  outputDir: './tmp',
+  model: 'gemini-3-flash-preview',
+  requestTimeoutMs: 300_000,
+  dryRun: false,
+  prContext: '',
+  targetUrl: '',
+  passLabel: ''
+}
+
+const USAGE = `Usage:
+  pnpm exec tsx scripts/qa-video-review.ts [options]
+
+Options:
+  --artifacts-dir <path>        Artifacts root directory
+                                 (default: ./tmp/qa-artifacts)
+  --video-file <name-or-path>   Video file to analyze (required)
+                                 (supports basename or relative/absolute path)
+  --before-video <path>         Before video (main branch) for comparison
+                                 When provided, sends both videos to Gemini
+                                 for comparative before/after analysis
+  --output-dir <path>           Output directory for markdown reports
+                                 (default: ./tmp)
+  --model <name>                Gemini model
+                                 (default: gemini-3-flash-preview)
+  --request-timeout-ms <n>      Request timeout in milliseconds
+                                 (default: 300000)
+  --pr-context <file>           File with PR context (title, body, diff)
+                                 for PR-aware review
+  --target-url <url>            Issue or PR URL to include in the report
+  --pass-label <label>          Label for multi-pass reports (e.g. pass1)
+                                 Output becomes {platform}-{label}-qa-video-report.md
+  --dry-run                     Discover videos and output targets only
+  --help                        Show this help text
+
+Environment:
+  GEMINI_API_KEY                Required unless --dry-run
+`
+
+function parsePositiveInteger(rawValue: string, flagName: string): number {
+  const parsedValue = Number.parseInt(rawValue, 10)
+  if (!Number.isInteger(parsedValue) || parsedValue <= 0) {
+    throw new Error(`Invalid value for ${flagName}: "${rawValue}"`)
+  }
+  return parsedValue
+}
+
+function parseCliOptions(args: string[]): CliOptions {
+  const options: CliOptions = { ...DEFAULT_OPTIONS }
+
+  for (let index = 0; index < args.length; index += 1) {
+    const argument = args[index]
+    const nextValue = args[index + 1]
+    const requireValue = (flagName: string): string => {
+      if (!nextValue || nextValue.startsWith('--')) {
+        throw new Error(`Missing value for ${flagName}`)
+      }
+      index += 1
+      return nextValue
+    }
+
+    if (argument === '--help') {
+      process.stdout.write(USAGE)
+      process.exit(0)
+    }
+
+    if (argument === '--artifacts-dir') {
+      options.artifactsDir = requireValue(argument)
+      continue
+    }
+
+    if (argument === '--video-file') {
+      options.videoFile = requireValue(argument)
+      continue
+    }
+
+    if (argument === '--output-dir') {
+      options.outputDir = requireValue(argument)
+      continue
+    }
+
+    if (argument === '--model') {
+      options.model = requireValue(argument)
+      continue
+    }
+
+    if (argument === '--request-timeout-ms') {
+      options.requestTimeoutMs = parsePositiveInteger(
+        requireValue(argument),
+        argument
+      )
+      continue
+    }
+
+    if (argument === '--before-video') {
+      options.beforeVideo = requireValue(argument)
+      continue
+    }
+
+    if (argument === '--pr-context') {
+      options.prContext = requireValue(argument)
+      continue
+    }
+
+    if (argument === '--target-url') {
+      options.targetUrl = requireValue(argument)
+      continue
+    }
+
+    if (argument === '--pass-label') {
+      options.passLabel = requireValue(argument)
+      continue
+    }
+
+    if (argument === '--dry-run') {
+      options.dryRun = true
+      continue
+    }
+
+    throw new Error(`Unknown argument: ${argument}`)
+  }
+
+  return options
+}
+
+function normalizePlatformName(value: string): string {
+  const slug = value
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+
+  return slug.length > 0 ? slug : 'unknown-platform'
+}
+
+export function extractPlatformFromArtifactDirName(dirName: string): string {
+  const matchedValue = dirName.match(/^qa-report-(.+?)(?:-\d+)?$/i)?.[1]
+  return normalizePlatformName(matchedValue ?? dirName)
+}
+
+function extractPlatformFromVideoPath(videoPath: string): string {
+  const artifactDirName = basename(dirname(videoPath))
+  return extractPlatformFromArtifactDirName(artifactDirName)
+}
+
+export function pickLatestVideosByPlatform(
+  candidates: VideoCandidate[]
+): VideoCandidate[] {
+  const latestByPlatform = new Map<string, VideoCandidate>()
+
+  for (const candidate of candidates) {
+    const current = latestByPlatform.get(candidate.platformName)
+    if (!current || candidate.mtimeMs > current.mtimeMs) {
+      latestByPlatform.set(candidate.platformName, candidate)
+    }
+  }
+
+  return [...latestByPlatform.values()].sort((a, b) =>
+    a.platformName.localeCompare(b.platformName)
+  )
+}
+
+function toProjectRelativePath(targetPath: string): string {
+  const relativePath = relative(process.cwd(), targetPath)
+  if (relativePath.startsWith('.')) {
+    return relativePath
+  }
+  return `./${relativePath}`
+}
+
+function errorToString(error: unknown): string {
+  return error instanceof Error ? error.message : String(error)
+}
+
+function normalizePathForMatch(value: string): string {
+  return value.replaceAll('\\', '/').replace(/^\.\/+/, '')
+}
+
+export function selectVideoCandidateByFile(
+  candidates: VideoCandidate[],
+  options: { artifactsDir: string; videoFile: string }
+): VideoCandidate {
+  const requestedValue = options.videoFile.trim()
+  if (requestedValue.length === 0) {
+    throw new Error('--video-file is required')
+  }
+
+  const artifactsRoot = resolve(options.artifactsDir)
+  const requestedAbsolutePath = resolve(requestedValue)
+  const requestedPathKey = normalizePathForMatch(requestedValue)
+
+  const matches = candidates.filter((candidate) => {
+    const candidateAbsolutePath = resolve(candidate.videoPath)
+    if (candidateAbsolutePath === requestedAbsolutePath) {
+      return true
+    }
+
+    const candidateBaseName = basename(candidate.videoPath)
+    if (candidateBaseName === requestedValue) {
+      return true
+    }
+
+    const relativeToCwd = normalizePathForMatch(
+      relative(process.cwd(), candidateAbsolutePath)
+    )
+    if (relativeToCwd === requestedPathKey) {
+      return true
+    }
+
+    const relativeToArtifacts = normalizePathForMatch(
+      relative(artifactsRoot, candidateAbsolutePath)
+    )
+    return relativeToArtifacts === requestedPathKey
+  })
+
+  if (matches.length === 1) {
+    return matches[0]
+  }
+
+  if (matches.length === 0) {
+    const availableVideos = candidates.map((candidate) =>
+      toProjectRelativePath(candidate.videoPath)
+    )
+    throw new Error(
+      [
+        `No video matched --video-file "${options.videoFile}".`,
+        'Available videos:',
+        ...availableVideos.map((videoPath) => `- ${videoPath}`)
+      ].join('\n')
+    )
+  }
+
+  throw new Error(
+    [
+      `--video-file "${options.videoFile}" matched ${matches.length} videos.`,
+      'Please pass a more specific path.',
+      ...matches.map((match) => `- ${toProjectRelativePath(match.videoPath)}`)
+    ].join('\n')
+  )
+}
+
+async function collectVideoCandidates(
+  artifactsDir: string
+): Promise<VideoCandidate[]> {
+  const absoluteArtifactsDir = resolve(artifactsDir)
+  const videoPaths = globSync('**/qa-session{,-[0-9]}.mp4', {
+    cwd: absoluteArtifactsDir,
+    absolute: true,
+    nodir: true
+  }).sort()
+
+  const candidates = await Promise.all(
+    videoPaths.map(async (videoPath) => {
+      const videoStat = await stat(videoPath)
+      return {
+        platformName: extractPlatformFromVideoPath(videoPath),
+        videoPath,
+        mtimeMs: videoStat.mtimeMs
+      }
+    })
+  )
+
+  return candidates
+}
+
+function getMimeType(filePath: string): string {
+  const ext = extname(filePath).toLowerCase()
+  const mimeMap: Record<string, string> = {
+    '.mp4': 'video/mp4',
+    '.webm': 'video/webm',
+    '.mov': 'video/quicktime',
+    '.avi': 'video/x-msvideo',
+    '.mkv': 'video/x-matroska',
+    '.m4v': 'video/mp4'
+  }
+  return mimeMap[ext] || 'video/mp4'
+}
+
+function buildReviewPrompt(options: {
+  platformName: string
+  videoPath: string
+  prContext: string
+  isComparative: boolean
+}): string {
+  const { platformName, videoPath, prContext, isComparative } = options
+
+  if (isComparative) {
+    return buildComparativePrompt(platformName, videoPath, prContext)
+  }
+
+  return buildSingleVideoPrompt(platformName, videoPath, prContext)
+}
+
+function buildComparativePrompt(
+  platformName: string,
+  videoPath: string,
+  prContext: string
+): string {
+  const lines = [
+    'You are a senior QA engineer performing a BEFORE/AFTER comparison review.',
+    '',
+    'You are given TWO videos:',
+    '- **Video 1 (BEFORE)**: The main branch BEFORE the PR. This shows the OLD behavior.',
+    '- **Video 2 (AFTER)**: The PR branch AFTER the changes. This shows the NEW behavior.',
+    '',
+    'Both videos show the same test steps executed on different code versions.',
+    ''
+  ]
+
+  if (prContext) {
+    lines.push('## PR Context', prContext, '')
+  }
+
+  lines.push(
+    '## Your Task',
+    `Platform: "${platformName}". After video: ${toProjectRelativePath(videoPath)}.`,
+    '',
+    '1. **BEFORE video**: Does it demonstrate the old behavior or bug that the PR aims to fix?',
+    '   Describe what you observe — this establishes the baseline.',
+    '2. **AFTER video**: Does it prove the PR fix works? Is the intended new behavior visible?',
+    '3. **Comparison**: What specifically changed between before and after?',
+    '4. **Regressions**: Did the PR introduce any new problems visible in the AFTER video',
+    '   that were NOT present in the BEFORE video?',
+    '',
+    'Note: Brief black frames during page transitions are NORMAL.',
+    'Note: Small cyan/purple dashed labels prefixed with "QA:" are annotations placed by the automated test script — they are NOT part of the application UI. Do not treat them as bugs or evidence.',
+    'Report only concrete, visible differences. Avoid speculation.',
+    '',
+    'Return markdown with these sections exactly:',
+    '## Summary',
+    '(What the PR changes, whether BEFORE confirms the old behavior, whether AFTER proves the fix)',
+    '',
+    '## Behavior Changes',
+    'Summarize ALL behavioral differences as a markdown TABLE:',
+    '| Behavior | Before (main) | After (PR) | Verdict |',
+    '',
+    '- **Behavior**: short name for the behavior (e.g. "Save shortcut label", "Menu hover style")',
+    '- **Before (main)**: how it works/looks in the BEFORE video',
+    '- **After (PR)**: how it works/looks in the AFTER video',
+    '- **Verdict**: `Fixed`, `Improved`, `Changed`, `Regression`, or `No Change`',
+    '',
+    'One row per distinct behavior. Include both changed AND unchanged key behaviors',
+    'that were tested, so reviewers can confirm nothing was missed.',
+    '',
+    '## Timeline Comparison',
+    'Present a chronological frame-by-frame comparison as a markdown TABLE:',
+    '| Time | Type | Severity | Before (main) | After (PR) |',
+    '',
+    '- **Time**: timestamp or range from the videos (e.g. `0:05-0:08`)',
+    '- **Type**: category such as `Visual`, `Behavior`, `Layout`, `Text`, `Animation`, `Menu`, `State`',
+    '- **Severity**: `None` (neutral change), `Fixed` (bug resolved), `Regression`, `Minor`, `Major`',
+    '- **Before (main)**: what is observed in the BEFORE video at that time',
+    '- **After (PR)**: what is observed in the AFTER video at that time',
+    '',
+    'Include one row per distinct observable difference. If behavior is identical at a timestamp,',
+    'omit that row. Focus on meaningful differences, not narrating every frame.',
+    '',
+    '## Confirmed Issues',
+    'For each issue, use this exact format:',
+    '',
+    '### [Short issue title]',
+    '`SEVERITY` `TIMESTAMP` `Confidence: LEVEL`',
+    '',
+    '[Description — specify whether it appears in BEFORE, AFTER, or both]',
+    '',
+    '**Evidence:** [What you observed at the given timestamp in which video]',
+    '',
+    '**Suggested Fix:** [Actionable recommendation]',
+    '',
+    '---',
+    '',
+    '## Possible Issues (Needs Human Verification)',
+    '## Overall Risk',
+    '(Assess whether the PR achieves its goal based on the before/after comparison)',
+    '',
+    '## Verdict',
+    'End your report with this EXACT JSON block (no markdown fence):',
+    '{"verdict": "REPRODUCED" | "NOT_REPRODUCIBLE" | "INCONCLUSIVE", "risk": "low" | "medium" | "high", "confidence": "high" | "medium" | "low"}',
+    '- REPRODUCED: the before video confirms the old behavior and the after video shows the fix working',
+    '- NOT_REPRODUCIBLE: the before video does not show the reported bug',
+    '- INCONCLUSIVE: the videos do not adequately demonstrate the behavior change'
+  )
+
+  return lines.filter(Boolean).join('\n')
+}
+
+function buildSingleVideoPrompt(
+  platformName: string,
+  videoPath: string,
+  prContext: string
+): string {
+  const lines = [
+    'You are a senior QA engineer reviewing a UI test session recording.',
+    '',
+    '## ANTI-HALLUCINATION RULES (READ FIRST)',
+    '- Describe ONLY what you can directly observe in the video frames',
+    '- NEVER infer or assume what "must have happened" between frames',
+    '- If a step is not visible in the video, say "NOT SHOWN" — do not guess',
+    '- Your job is to be a CAMERA — report facts, not interpretations',
+    ''
+  ]
+
+  const isIssueContext =
+    prContext &&
+    /^### Issue #|^Title:.*\bbug\b|^This video attempts to reproduce/im.test(
+      prContext
+    )
+
+  if (prContext) {
+    lines.push(
+      '## Phase 1: Blind Observation (describe what you SEE and HEAR)',
+      'First, describe every UI interaction chronologically WITHOUT knowing the expected outcome:',
+      '- What elements does the user click/hover/type?',
+      '- What dialogs/menus open and close?',
+      '- What keyboard indicators appear? (look for subtitle overlays)',
+      '- What is the BEFORE state and AFTER state of each action?',
+      '- **Audio**: Does the video have a TTS narration audio track? If yes, transcribe what the voice says. This narration describes the bug being reproduced.',
+      '',
+      '## Phase 2: Compare against expected behavior',
+      'Now compare your observations against the context below.',
+      'Only claim a match if your Phase 1 observations EXPLICITLY support it.',
+      ''
+    )
+
+    if (isIssueContext) {
+      lines.push(
+        '## Issue Context',
+        prContext,
+        '',
+        '## Comparison Questions',
+        '1. Did the video perform the reproduction steps described in the issue?',
+        '2. Did your Phase 1 observations show the reported bug behavior?',
+        '3. If the steps were not performed or the bug was not visible, say INCONCLUSIVE.',
+        ''
+      )
+    } else {
+      lines.push(
+        '## PR Context',
+        prContext,
+        '',
+        '## Comparison Questions',
+        '1. Did the video test the specific behavior the PR changes?',
+        '2. Did your Phase 1 observations show the expected before/after difference?',
+        '3. If the test was incomplete or inconclusive, say so honestly.',
+        ''
+      )
+    }
+  }
+
+  lines.push(
+    `Review this QA session video for platform "${platformName}".`,
+    `Source video: ${toProjectRelativePath(videoPath)}.`,
+    'The video shows the full test session — analyze it chronologically.',
+    'Focus on UI regressions, broken states, visual glitches, unreadable text, missing labels/i18n, and clear workflow failures.',
+    'Note: Brief black frames during page transitions are NORMAL and should NOT be reported as issues.',
+    'Note: Small cyan/purple dashed labels prefixed with "QA:" are annotations placed by the automated test script — they are NOT part of the application UI. Do not treat them as bugs or evidence.',
+    'Report only concrete, visible problems and avoid speculation.',
+    'If confidence is low, mark it explicitly.',
+    '',
+    'Return markdown with these sections exactly:',
+    '## Summary',
+    isIssueContext
+      ? '(Explain what bug was reported and whether the video confirms it is reproducible)'
+      : prContext
+        ? '(Explain what the PR intended and whether the video confirms it works)'
+        : '',
+    '## Confirmed Issues',
+    'For each confirmed issue, use this exact format (one block per issue):',
+    '',
+    '### [Short issue title]',
+    '`HIGH` `01:03` `Confidence: High`',
+    '',
+    '[Description of the issue — what went wrong and what was expected]',
+    '',
+    '**Evidence:** [What you observed in the video at the given timestamp]',
+    '',
+    '**Suggested Fix:** [Actionable recommendation]',
+    '',
+    '---',
+    '',
+    'The first line after the heading MUST be exactly three backtick-wrapped labels:',
+    '`SEVERITY` `TIMESTAMP` `Confidence: LEVEL`',
+    'Do NOT use a table for issues — use the block format above.',
+    '## Possible Issues (Needs Human Verification)',
+    '## Overall Risk',
+    '',
+    '## Narration',
+    'If the video contains a TTS audio narration track, transcribe it here.',
+    'If there is no audio or the video is silent, write "No narration detected."',
+    '',
+    '## Verdict',
+    'End your report with this EXACT JSON block (no markdown fence):',
+    '{"verdict": "REPRODUCED" | "NOT_REPRODUCIBLE" | "INCONCLUSIVE", "risk": "low" | "medium" | "high" | null, "confidence": "high" | "medium" | "low", "narrationDetected": true | false}',
+    '- REPRODUCED: the bug/behavior is clearly visible in the video',
+    '- NOT_REPRODUCIBLE: the steps were performed correctly but the bug was not observed',
+    '- INCONCLUSIVE: the reproduction steps were not performed or the video is insufficient',
+    '- narrationDetected: true if you heard TTS voice narration in the video, false if silent'
+  )
+
+  return lines.filter(Boolean).join('\n')
+}
+
+const MAX_VIDEO_BYTES = 100 * 1024 * 1024
+
+async function readVideoFile(videoPath: string): Promise<Buffer> {
+  const fileStat = await stat(videoPath)
+  if (fileStat.size > MAX_VIDEO_BYTES) {
+    throw new Error(
+      `Video ${basename(videoPath)} is ${formatBytes(fileStat.size)}, exceeds ${formatBytes(MAX_VIDEO_BYTES)} limit`
+    )
+  }
+  return readFile(videoPath)
+}
+
+async function requestGeminiReview(options: {
+  apiKey: string
+  model: string
+  platformName: string
+  videoPath: string
+  beforeVideoPath: string
+  timeoutMs: number
+  prContext: string
+}): Promise<string> {
+  const genAI = new GoogleGenerativeAI(options.apiKey)
+  const model = genAI.getGenerativeModel({ model: options.model })
+
+  const isComparative = options.beforeVideoPath.length > 0
+  const prompt = buildReviewPrompt({
+    platformName: options.platformName,
+    videoPath: options.videoPath,
+    prContext: options.prContext,
+    isComparative
+  })
+
+  const parts: Array<
+    { text: string } | { inlineData: { mimeType: string; data: string } }
+  > = [{ text: prompt }]
+
+  if (isComparative) {
+    const beforeBuffer = await readVideoFile(options.beforeVideoPath)
+    parts.push(
+      { text: 'Video 1 — BEFORE (main branch):' },
+      {
+        inlineData: {
+          mimeType: getMimeType(options.beforeVideoPath),
+          data: beforeBuffer.toString('base64')
+        }
+      }
+    )
+  }
+
+  const afterBuffer = await readVideoFile(options.videoPath)
+  if (isComparative) {
+    parts.push({ text: 'Video 2 — AFTER (PR branch):' })
+  }
+  parts.push({
+    inlineData: {
+      mimeType: getMimeType(options.videoPath),
+      data: afterBuffer.toString('base64')
+    }
+  })
+
+  const result = await model.generateContent(parts, {
+    timeout: options.timeoutMs
+  })
+  const response = result.response
+  const text = response.text()
+
+  if (!text || text.trim().length === 0) {
+    throw new Error('Gemini API returned no output text')
+  }
+
+  return text.trim()
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}
+
+function buildReportMarkdown(input: {
+  platformName: string
+  model: string
+  videoPath: string
+  videoSizeBytes: number
+  beforeVideoPath?: string
+  beforeVideoSizeBytes?: number
+  reviewText: string
+  targetUrl?: string
+}): string {
+  const headerLines = [
+    `# ${input.platformName} QA Video Report`,
+    '',
+    `- Generated at: ${new Date().toISOString()}`,
+    `- Model: \`${input.model}\``
+  ]
+
+  if (input.targetUrl) {
+    headerLines.push(`- Target: ${input.targetUrl}`)
+  }
+
+  if (input.beforeVideoPath) {
+    headerLines.push(
+      `- Before video: \`${toProjectRelativePath(input.beforeVideoPath)}\` (${formatBytes(input.beforeVideoSizeBytes ?? 0)})`,
+      `- After video: \`${toProjectRelativePath(input.videoPath)}\` (${formatBytes(input.videoSizeBytes)})`,
+      '- Mode: **Comparative (before/after)**'
+    )
+  } else {
+    headerLines.push(
+      `- Source video: \`${toProjectRelativePath(input.videoPath)}\``,
+      `- Video size: ${formatBytes(input.videoSizeBytes)}`
+    )
+  }
+
+  headerLines.push('', '## AI Review', '')
+  return `${headerLines.join('\n')}${input.reviewText.trim()}\n`
+}
+
+async function reviewVideo(
+  video: VideoCandidate,
+  options: CliOptions,
+  apiKey: string
+): Promise<void> {
+  let prContext = ''
+  if (options.prContext) {
+    try {
+      prContext = await readFile(options.prContext, 'utf-8')
+      process.stdout.write(
+        `[${video.platformName}] Loaded PR context from ${options.prContext}\n`
+      )
+    } catch {
+      process.stdout.write(
+        `[${video.platformName}] Warning: Could not read PR context file ${options.prContext}\n`
+      )
+    }
+  }
+
+  const beforeVideoPath = options.beforeVideo
+    ? resolve(options.beforeVideo)
+    : ''
+
+  if (beforeVideoPath) {
+    const beforeStat = await stat(beforeVideoPath)
+    process.stdout.write(
+      `[${video.platformName}] Before video: ${toProjectRelativePath(beforeVideoPath)} (${formatBytes(beforeStat.size)})\n`
+    )
+  }
+
+  process.stdout.write(
+    `[${video.platformName}] Sending ${beforeVideoPath ? '2 videos (comparative)' : 'video'} to ${options.model}\n`
+  )
+
+  const reviewText = await requestGeminiReview({
+    apiKey,
+    model: options.model,
+    platformName: video.platformName,
+    videoPath: video.videoPath,
+    beforeVideoPath,
+    timeoutMs: options.requestTimeoutMs,
+    prContext
+  })
+
+  const videoStat = await stat(video.videoPath)
+  const passSegment = options.passLabel ? `-${options.passLabel}` : ''
+  const outputPath = resolve(
+    options.outputDir,
+    `${video.platformName}${passSegment}-qa-video-report.md`
+  )
+
+  const reportInput: Parameters<typeof buildReportMarkdown>[0] = {
+    platformName: video.platformName,
+    model: options.model,
+    videoPath: video.videoPath,
+    videoSizeBytes: videoStat.size,
+    reviewText,
+    targetUrl: options.targetUrl || undefined
+  }
+
+  if (beforeVideoPath) {
+    const beforeStat = await stat(beforeVideoPath)
+    reportInput.beforeVideoPath = beforeVideoPath
+    reportInput.beforeVideoSizeBytes = beforeStat.size
+  }
+
+  const reportMarkdown = buildReportMarkdown(reportInput)
+
+  await mkdir(dirname(outputPath), { recursive: true })
+  await writeFile(outputPath, reportMarkdown, 'utf-8')
+
+  process.stdout.write(
+    `[${video.platformName}] Wrote ${toProjectRelativePath(outputPath)}\n`
+  )
+}
+
+function isExecutedAsScript(metaUrl: string): boolean {
+  const modulePath = fileURLToPath(metaUrl)
+  const scriptPath = process.argv[1] ? resolve(process.argv[1]) : ''
+  return modulePath === scriptPath
+}
+
+async function main(): Promise<void> {
+  const options = parseCliOptions(process.argv.slice(2))
+  const candidates = await collectVideoCandidates(options.artifactsDir)
+
+  if (candidates.length === 0) {
+    process.stdout.write(
+      `No qa-session.mp4 files found under ${toProjectRelativePath(resolve(options.artifactsDir))}\n`
+    )
+    return
+  }
+
+  const selectedVideo = selectVideoCandidateByFile(candidates, {
+    artifactsDir: options.artifactsDir,
+    videoFile: options.videoFile
+  })
+
+  process.stdout.write(
+    `Selected ${selectedVideo.platformName}: ${toProjectRelativePath(selectedVideo.videoPath)}\n`
+  )
+
+  if (options.dryRun) {
+    process.stdout.write('\nDry run mode enabled, no API calls were made.\n')
+    return
+  }
+
+  const apiKey = process.env.GEMINI_API_KEY
+  if (!apiKey) {
+    throw new Error('GEMINI_API_KEY is required unless --dry-run is set')
+  }
+
+  await reviewVideo(selectedVideo, options, apiKey)
+}
+
+if (isExecutedAsScript(import.meta.url)) {
+  void main().catch((error: unknown) => {
+    const message = errorToString(error)
+    process.stderr.write(`qa-video-review failed: ${message}\n`)
+    process.exit(1)
+  })
+}

.claude/skills/comfy-qa/scripts/qa.ts

@@ -0,0 +1,513 @@
+#!/usr/bin/env tsx
+/**
+ * QA CLI — simplified entry point for local & CI QA runs
+ *
+ * Usage:
+ *   pnpm qa 10253                         # auto-detects issue vs PR
+ *   pnpm qa https://github.com/.../pull/10270
+ *   pnpm qa 10270 -t base                 # test PR base (reproduce bug)
+ *   pnpm qa 10270 -t both                 # test base + head
+ *   pnpm qa --uncommitted                 # test local uncommitted changes
+ *
+ * Automatically loads .env.local / .env for GEMINI_API_KEY, ANTHROPIC_API_KEY.
+ * Results are written to .comfy-qa/<number>/ by default.
+ */
+
+import { parseArgs } from 'node:util'
+import { config } from 'dotenv'
+import { existsSync, mkdirSync, writeFileSync } from 'fs'
+import { dirname, resolve } from 'path'
+import { execSync, spawn, spawnSync } from 'child_process'
+import { fileURLToPath } from 'url'
+
+// ── Constants ──
+
+const SCRIPT_DIR = dirname(fileURLToPath(import.meta.url))
+const RECORD_SCRIPT = resolve(SCRIPT_DIR, 'qa-record.ts')
+const DEFAULT_REPO = 'Comfy-Org/ComfyUI_frontend'
+const VALID_TARGETS = ['head', 'base', 'both'] as const
+const CLOUD_FALLBACK_URL = 'https://testcloud.comfy.org/'
+type PrTarget = (typeof VALID_TARGETS)[number]
+type TargetType = 'issue' | 'pr'
+
+// ── Load .env.local / .env ──
+
+for (const f of ['.env.local', '.env']) {
+  if (existsSync(f)) {
+    config({ path: f })
+    break
+  }
+}
+
+// ── Parse CLI ──
+
+const { values, positionals } = tryParseArgs()
+
+if (values.help) {
+  printUsage()
+  process.exit(0)
+}
+
+const serverUrl =
+  values.url || process.env.DEV_SERVER_COMFYUI_URL || 'http://127.0.0.1:8188'
+
+const prTarget = values.target as PrTarget
+if (!VALID_TARGETS.includes(prTarget)) {
+  console.error(
+    `Invalid --target "${prTarget}". Must be one of: ${VALID_TARGETS.join(', ')}`
+  )
+  process.exit(1)
+}
+
+// ── Ensure server is reachable (may fall back to cloud) ──
+
+const resolvedServerUrl = await ensureServer(serverUrl)
+
+// ── Dispatch by mode ──
+
+if (values.uncommitted) {
+  runUncommitted()
+} else {
+  const input = positionals[0]
+  if (!input) {
+    printUsage()
+    process.exit(1)
+  }
+  runTarget(input)
+}
+
+// ── Mode: uncommitted changes ──
+
+function runUncommitted(): never {
+  const diff = shell('git diff && git diff --staged')
+  if (!diff.trim()) {
+    console.error('No uncommitted changes found')
+    process.exit(1)
+  }
+
+  const outputDir = resolveOutputDir('.comfy-qa/local')
+  const diffFile = writeTmpFile(outputDir, 'uncommitted.diff', diff)
+
+  logHeader({ label: 'uncommitted changes', outputDir })
+  const code = runQaRecord('after', diffFile, outputDir)
+  exit(code, outputDir)
+}
+
+// ── Mode: issue or PR by number/URL ──
+
+function runTarget(input: string): never {
+  const { targetType, number, repo } = resolveTarget(input)
+  const outputDir = resolveOutputDir(`.comfy-qa/${number}`)
+
+  logHeader({
+    label: `${targetType} #${number} (${repo})`,
+    outputDir,
+    extra: targetType === 'pr' ? `Target:    ${prTarget}` : undefined
+  })
+
+  const diffFile =
+    targetType === 'issue'
+      ? fetchIssue(number, repo, outputDir)
+      : fetchPR(number, repo, outputDir)
+
+  let exitCode: number
+  if (targetType === 'issue') {
+    exitCode = runQaRecord('reproduce', diffFile, outputDir)
+  } else if (prTarget === 'both') {
+    exitCode = runPrBoth(diffFile, outputDir)
+  } else if (prTarget === 'base') {
+    exitCode = runQaRecord('before', diffFile, outputDir)
+  } else {
+    exitCode = runQaRecord('after', diffFile, outputDir)
+  }
+
+  exit(exitCode, outputDir)
+}
+
+// ── PR both phases ──
+
+function runPrBoth(diffFile: string, outputDir: string): number {
+  console.warn('\n=== Phase 1: Reproduce bug on base ===')
+  const baseDir = resolve(outputDir, 'base')
+  mkdirSync(baseDir, { recursive: true })
+  const baseCode = runQaRecord('before', diffFile, baseDir)
+  if (baseCode !== 0) {
+    console.warn('Base phase failed, continuing to head...')
+  }
+
+  console.warn('\n=== Phase 2: Demonstrate fix on head ===')
+  const headDir = resolve(outputDir, 'head')
+  mkdirSync(headDir, { recursive: true })
+  return runQaRecord('after', diffFile, headDir)
+}
+
+// ── Target resolution ──
+
+function resolveTarget(input: string): {
+  targetType: TargetType
+  number: string
+  repo: string
+} {
+  const urlMatch = input.match(
+    /github\.com\/([^/]+\/[^/]+)\/(issues|pull)\/(\d+)/
+  )
+
+  if (urlMatch) {
+    return {
+      repo: urlMatch[1],
+      targetType: urlMatch[2] === 'pull' ? 'pr' : 'issue',
+      number: urlMatch[3]
+    }
+  }
+
+  if (/^\d+$/.test(input)) {
+    return {
+      repo: DEFAULT_REPO,
+      targetType: detectType(input, DEFAULT_REPO),
+      number: input
+    }
+  }
+
+  console.error(`Cannot parse target: ${input}`)
+  console.error('Expected a GitHub URL or issue/PR number')
+  printUsage()
+  process.exit(1)
+}
+
+function detectType(number: string, repo: string): TargetType {
+  try {
+    const result = execSync(
+      `gh api repos/${repo}/issues/${number} --jq 'has("pull_request")'`,
+      { encoding: 'utf-8', timeout: 15000, stdio: ['pipe', 'pipe', 'pipe'] }
+    )
+    return result.trim() === 'true' ? 'pr' : 'issue'
+  } catch {
+    return 'issue'
+  }
+}
+
+// ── Data fetching ──
+
+function fetchIssue(number: string, repo: string, outputDir: string): string {
+  console.warn(`Fetching issue #${number}...`)
+  const body = shell(
+    `gh issue view ${number} --repo ${repo} --json title,body,labels --jq '"Title: " + .title + "\\n\\nLabels: " + ([.labels[].name] | join(", ")) + "\\n\\n" + .body'`
+  )
+  return writeTmpFile(outputDir, `issue-${number}.txt`, body)
+}
+
+function fetchPR(number: string, repo: string, outputDir: string): string {
+  console.warn(`Fetching PR #${number}...`)
+  const prJson = shell(
+    `gh pr view ${number} --repo ${repo} --json title,body,baseRefName,headRefName,baseRefOid,headRefOid`
+  )
+  const pr = JSON.parse(prJson) as {
+    title: string
+    body: string
+    baseRefName: string
+    headRefName: string
+    baseRefOid: string
+    headRefOid: string
+  }
+
+  console.warn(`  Base: ${pr.baseRefName} (${pr.baseRefOid.slice(0, 8)})`)
+  console.warn(`  Head: ${pr.headRefName} (${pr.headRefOid.slice(0, 8)})`)
+
+  let diff = ''
+  try {
+    diff = shell(`gh pr diff ${number} --repo ${repo}`)
+  } catch {
+    console.warn('Could not fetch PR diff')
+  }
+
+  writeTmpFile(
+    outputDir,
+    'refs.json',
+    JSON.stringify(
+      {
+        base: { ref: pr.baseRefName, sha: pr.baseRefOid },
+        head: { ref: pr.headRefName, sha: pr.headRefOid }
+      },
+      null,
+      2
+    )
+  )
+
+  return writeTmpFile(
+    outputDir,
+    `pr-${number}.txt`,
+    `Title: ${pr.title}\n\n${pr.body}\n\n--- DIFF ---\n\n${diff}`
+  )
+}
+
+// ── QA record runner ──
+
+function runQaRecord(
+  mode: string,
+  diffFile: string,
+  outputDir: string
+): number {
+  console.warn(`\nStarting QA ${mode} mode...\n`)
+  const r = spawnSync(
+    'pnpm',
+    [
+      'exec',
+      'tsx',
+      RECORD_SCRIPT,
+      '--mode',
+      mode,
+      '--diff',
+      diffFile,
+      '--output-dir',
+      outputDir,
+      '--url',
+      resolvedServerUrl
+    ],
+    { stdio: 'inherit', env: process.env }
+  )
+  return r.status ?? 1
+}
+
+// ── Server management ──
+
+async function ensureServer(url: string): Promise<string> {
+  if (await isReachable(url)) {
+    console.warn(`Server OK: ${url}`)
+    return url
+  }
+
+  console.warn(`Server not reachable at ${url}, attempting auto-start...`)
+  const port = new URL(url).port || '8188'
+
+  // Strategy 1: comfy-cli (pip install comfy-cli)
+  try {
+    execSync('which comfy', { stdio: 'pipe' })
+    console.warn('Starting ComfyUI via comfy-cli...')
+    const proc = spawn(
+      'comfy',
+      ['launch', '--background', '--', '--cpu', '--port', port],
+      {
+        stdio: 'ignore',
+        detached: true
+      }
+    )
+    proc.unref()
+    await waitForServer(url, 120000)
+    return url
+  } catch {
+    // comfy-cli not available
+  }
+
+  // Strategy 2: python main.py from TEST_COMFYUI_DIR or .comfy-qa/ComfyUI
+  const comfyDir = findComfyUIDir()
+  if (comfyDir) {
+    console.warn(`Starting ComfyUI from ${comfyDir}...`)
+    const proc = spawn('python', ['main.py', '--cpu', '--port', port], {
+      cwd: comfyDir,
+      stdio: 'ignore',
+      detached: true
+    })
+    proc.unref()
+    await waitForServer(url, 120000)
+    return url
+  }
+
+  // Strategy 3: clone ComfyUI and start
+  const cloneDir = resolve('.comfy-qa/ComfyUI')
+  if (!existsSync(resolve(cloneDir, 'main.py'))) {
+    console.warn('No ComfyUI installation found, cloning...')
+    try {
+      execSync(
+        `git clone --depth 1 https://github.com/comfyanonymous/ComfyUI.git "${cloneDir}"`,
+        { stdio: 'inherit', timeout: 120000 }
+      )
+      console.warn('Installing ComfyUI dependencies...')
+      execSync('pip install -r requirements.txt', {
+        cwd: cloneDir,
+        stdio: 'inherit',
+        timeout: 300000
+      })
+    } catch (err) {
+      console.warn(
+        `Clone/install failed: ${err instanceof Error ? err.message : err}`
+      )
+    }
+  }
+  if (existsSync(resolve(cloneDir, 'main.py'))) {
+    console.warn(`Starting ComfyUI from ${cloneDir}...`)
+    const proc = spawn('python', ['main.py', '--cpu', '--port', port], {
+      cwd: cloneDir,
+      stdio: 'ignore',
+      detached: true
+    })
+    proc.unref()
+    await waitForServer(url, 120000)
+    return url
+  }
+
+  // Strategy 4: fallback to testcloud
+  console.warn(`Local server failed. Falling back to ${CLOUD_FALLBACK_URL}`)
+  if (await isReachable(CLOUD_FALLBACK_URL)) {
+    console.warn(`Cloud server OK: ${CLOUD_FALLBACK_URL}`)
+    return CLOUD_FALLBACK_URL
+  }
+
+  console.error(`
+No ComfyUI server available. Tried:
+  1. ${url} (not reachable)
+  2. comfy-cli (not installed)
+  3. Local ComfyUI installation (not found)
+  4. ${CLOUD_FALLBACK_URL} (not reachable)
+
+Install: pip install comfy-cli && comfy install && comfy launch --cpu
+`)
+  process.exit(1)
+}
+
+function findComfyUIDir(): string | undefined {
+  const candidates = [
+    process.env.TEST_COMFYUI_DIR,
+    resolve('.comfy-qa/ComfyUI'),
+    '/home/ComfyUI'
+  ]
+  return candidates.find((d) => d && existsSync(resolve(d, 'main.py')))
+}
+
+async function isReachable(url: string): Promise<boolean> {
+  try {
+    const controller = new AbortController()
+    const timeout = setTimeout(() => controller.abort(), 5000)
+    const res = await fetch(url, { signal: controller.signal })
+    clearTimeout(timeout)
+    return res.ok || res.status === 200 || res.status === 304
+  } catch {
+    return false
+  }
+}
+
+async function waitForServer(url: string, timeoutMs: number): Promise<void> {
+  const start = Date.now()
+  while (Date.now() - start < timeoutMs) {
+    if (await isReachable(url)) {
+      console.warn('Server is ready')
+      return
+    }
+    await new Promise((r) => setTimeout(r, 2000))
+  }
+  console.error(`Server did not start within ${timeoutMs / 1000}s`)
+  process.exit(1)
+}
+
+// ── Utilities ──
+
+function shell(cmd: string): string {
+  return execSync(cmd, { encoding: 'utf-8', timeout: 30000 })
+}
+
+function writeTmpFile(
+  outputDir: string,
+  filename: string,
+  content: string
+): string {
+  const tmpDir = resolve(outputDir, '.tmp')
+  mkdirSync(tmpDir, { recursive: true })
+  const filePath = resolve(tmpDir, filename)
+  writeFileSync(filePath, content)
+  return filePath
+}
+
+function resolveOutputDir(defaultPath: string): string {
+  const dir = values.output ? resolve(values.output) : resolve(defaultPath)
+  mkdirSync(dir, { recursive: true })
+  return dir
+}
+
+function logHeader(opts: { label: string; outputDir: string; extra?: string }) {
+  console.warn(`QA target: ${opts.label}`)
+  console.warn(`Output:    ${opts.outputDir}`)
+  console.warn(`Server:    ${resolvedServerUrl}`)
+  if (values.ref) console.warn(`Ref:       ${values.ref}`)
+  if (opts.extra) console.warn(opts.extra)
+}
+
+function exit(code: number, outputDir: string): never {
+  console.warn('\n=== QA Complete ===')
+  console.warn(`Results: ${outputDir}`)
+  try {
+    console.warn(shell(`ls -la "${outputDir}"`))
+  } catch {
+    // not critical
+  }
+  process.exit(code)
+}
+
+function tryParseArgs() {
+  try {
+    const parsed = parseArgs({
+      args: process.argv.slice(2),
+      options: {
+        target: { type: 'string', short: 't', default: 'head' },
+        uncommitted: { type: 'boolean', default: false },
+        url: { type: 'string', default: '' },
+        ref: { type: 'string', default: '' },
+        output: { type: 'string', short: 'o', default: '' },
+        help: { type: 'boolean', short: 'h', default: false }
+      },
+      allowPositionals: true,
+      strict: true
+    })
+    return {
+      values: parsed.values as {
+        target: string
+        uncommitted: boolean
+        url: string
+        ref: string
+        output: string
+        help: boolean
+      },
+      positionals: parsed.positionals
+    }
+  } catch (err) {
+    console.error(`Error: ${err instanceof Error ? err.message : err}\n`)
+    printUsage()
+    process.exit(1)
+  }
+}
+
+function printUsage() {
+  console.warn(`
+QA CLI — Reproduce issues & test PRs for ComfyUI frontend
+
+Usage:
+  pnpm qa <number|url> [options]
+  pnpm qa --uncommitted
+
+Targets:
+  10253              Number (auto-detects issue vs PR via gh CLI)
+  https://github.com/Comfy-Org/ComfyUI_frontend/issues/10253
+  https://github.com/Comfy-Org/ComfyUI_frontend/pull/10270
+
+Options:
+  -t, --target <head|base|both>
+                     For PRs: which ref to test (default: head)
+                       head  — test the fix (PR head)
+                       base  — reproduce the bug (PR base)
+                       both  — base then head
+  --uncommitted      Test local uncommitted changes
+  --url <url>        ComfyUI server URL (default: from .env or http://127.0.0.1:8188)
+  --ref <ref>        Git ref to test against
+  -o, --output <dir> Override output directory (default: .comfy-qa/<number>)
+  -h, --help         Show this help
+
+Environment (auto-loaded from .env.local or .env):
+  GEMINI_API_KEY     Required — used for PR analysis, video review, TTS
+  ANTHROPIC_API_KEY  Optional locally — Claude Agent SDK auto-detects Claude Code session
+
+Examples:
+  pnpm qa 10253                  # reproduce an issue
+  pnpm qa 10270                  # test PR head (the fix)
+  pnpm qa 10270 -t base          # reproduce bug on PR base
+  pnpm qa 10270 -t both          # test base + head
+  pnpm qa --uncommitted          # test local changes
+`)
+}

.claude/skills/contain-audit/SKILL.md

@@ -0,0 +1,99 @@
+---
+name: contain-audit
+description: 'Detect DOM elements where CSS contain:layout+style would improve rendering performance. Runs a Playwright-based audit on a large workflow, scores candidates by subtree size and sizing constraints, measures performance impact, and generates a ranked report.'
+---
+
+# CSS Containment Audit
+
+Automatically finds DOM elements where adding `contain: layout style` would reduce browser recalculation overhead.
+
+## What It Does
+
+1. Loads a large workflow (245 nodes) in a real browser
+2. Walks the DOM tree and scores every element as a containment candidate
+3. For each high-scoring candidate, applies `contain: layout style` via JavaScript
+4. Measures rendering performance (style recalcs, layouts, task duration) before and after
+5. Takes before/after screenshots to detect visual breakage
+6. Generates a ranked report with actionable recommendations
+
+## When to Use
+
+- After adding new Vue components to the node rendering pipeline
+- When investigating rendering performance on large workflows
+- Before and after refactoring node DOM structure
+- As part of periodic performance audits
+
+## How to Run
+
+```bash
+# Start the dev server first
+pnpm dev &
+
+# Run the audit (uses the @audit tag, not included in normal CI runs)
+pnpm exec playwright test browser_tests/tests/containAudit.spec.ts --project=audit
+
+# View the HTML report
+pnpm exec playwright show-report
+```
+
+## How to Read Results
+
+The audit outputs a table to the console:
+
+```text
+CSS Containment Audit Results
+=======================================================
+Rank | Selector                        | Subtree | Score | DRecalcs | DLayouts | Visual
+  1  | [data-testid="node-inner-wrap"] |     18  |  72   |    -34%  |    -12%  |   OK
+  2  | .node-body                      |     12  |  48   |     -8%  |     -3%  |   OK
+  3  | .node-header                    |      4  |  16   |     +1%  |      0%  |   OK
+```
+
+- **Subtree**: Number of descendant elements (higher = more to skip)
+- **Score**: Composite heuristic score (subtree size x sizing constraint bonus)
+- **DRecalcs / DLayouts**: Change in style recalcs / layout counts vs baseline (negative = improvement)
+- **Visual**: OK if no pixel change, DIFF if screenshot differs (may include subpixel noise — verify manually)
+
+## Candidate Scoring
+
+An element is a good containment candidate when:
+
+1. **Large subtree** -- many descendants that the browser can skip recalculating
+2. **Externally constrained size** -- width/height determined by CSS variables, flex, or explicit values (not by content)
+3. **No existing containment** -- `contain` is not already applied
+4. **Not a leaf** -- has at least a few child elements
+
+Elements that should NOT get containment:
+
+- Elements whose children overflow visually beyond bounds (e.g., absolute-positioned overlays with negative inset)
+- Elements whose height is determined by content and affects sibling layout
+- Very small subtrees (overhead of containment context outweighs benefit)
+
+## Limitations
+
+- Cannot fully guarantee `contain` safety -- visual review of screenshots is required
+- Performance measurements have natural variance; run multiple times for confidence
+- Only tests idle and pan scenarios; widget interactions may differ
+- The audit modifies styles at runtime via JS, which doesn't account for Tailwind purging or build-time optimizations
+
+## Example PR
+
+[#9946 — fix: add CSS contain:layout contain:style to node inner wrapper](https://github.com/Comfy-Org/ComfyUI_frontend/pull/9946)
+
+This PR added `contain-layout contain-style` to the node inner wrapper div in `LGraphNode.vue`. The audit tool would have flagged this element as a high-scoring candidate because:
+
+- **Large subtree** (18+ descendants: header, slots, widgets, content, badges)
+- **Externally constrained size** (`w-(--node-width)`, `flex-1` — dimensions set by CSS variables and flex parent)
+- **Natural isolation boundary** between frequently-changing content (widgets) and infrequently-changing overlays (selection outlines, borders)
+
+The actual change was a single line: adding `'contain-layout contain-style'` to the inner wrapper's class list at `src/renderer/extensions/vueNodes/components/LGraphNode.vue:79`.
+
+## Reference
+
+| Resource          | Path                                                    |
+| ----------------- | ------------------------------------------------------- |
+| Audit test        | `browser_tests/tests/containAudit.spec.ts`              |
+| PerformanceHelper | `browser_tests/fixtures/helpers/PerformanceHelper.ts`   |
+| Perf tests        | `browser_tests/tests/performance.spec.ts`               |
+| Large workflow    | `browser_tests/assets/large-graph-workflow.json`        |
+| Example PR        | https://github.com/Comfy-Org/ComfyUI_frontend/pull/9946 |

.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.

.coderabbit.yaml

@@ -28,3 +28,21 @@ reviews:
           3. The PR description includes a concrete, non-placeholder explanation of why an end-to-end regression test was not added.
 
           Fail otherwise. When failing, mention which bug-fix signal you found and ask the author to either add or update a Playwright regression test under `browser_tests/` or add a concrete explanation in the PR description of why an end-to-end regression test is not practical.
+      - name: ADR compliance for entity/litegraph changes
+        mode: warning
+        instructions: |
+          Use only PR metadata already available in the review context: the changed-file list relative to the PR base, the PR description, and the diff content. Do not rely on shell commands.
+
+          This check applies ONLY when the PR modifies files under `src/lib/litegraph/`, `src/ecs/`, or files related to graph entities (nodes, links, widgets, slots, reroutes, groups, subgraphs).
+
+          If none of those paths appear in the changed files, pass immediately.
+
+          When applicable, check for:
+          1. **Command pattern (ADR 0003)**: Entity state mutations must be serializable, idempotent, deterministic commands — not imperative fire-and-forget side effects. Flag direct spatial mutation (`node.pos =`, `node.size =`, `group.pos =`) outside of a store or command, and any new void-returning mutation API that should produce a command object.
+          2. **God-object growth (ADR 0008)**: New methods/properties added to `LGraphNode`, `LGraphCanvas`, `LGraph`, or `Subgraph` that add responsibilities rather than extracting/migrating existing ones.
+          3. **ECS data/behavior separation (ADR 0008)**: Component-like data structures that contain methods or back-references to parent entities. ECS components must be plain data. New OOP instance patterns (`node.someProperty`, `node.someMethod()`) for data that should be a World component.
+          4. **Extension ecosystem (ADR 0008)**: Changes to extension-facing callbacks (`onConnectionsChange`, `onRemoved`, `onAdded`, `onConfigure`, `onConnectInput/Output`, `onWidgetChanged`), `node.widgets` access, `node.serialize` overrides, or `graph._version++` without migration guidance. These affect 40+ custom node repos.
+
+          Pass if none of these patterns are found in the diff.
+
+          When warning, reference the specific ADR by number and link to `docs/adr/` for context. Frame findings as directional guidance since ADR 0003 and 0008 are in Proposed status.

.env_example

@@ -46,3 +46,11 @@ ALGOLIA_API_KEY=684d998c36b67a9a9fce8fc2d8860579
 # SENTRY_ORG=comfy-org
 # SENTRY_PROJECT=cloud-frontend-staging
 # SENTRY_PROJECT_PROD= # prod project slug for sourcemap uploads
+
+# ── QA Skill (scripts/qa-record.ts) ──
+# Required for automated bug reproduction via `pnpm exec tsx scripts/qa-record.ts`
+# GEMINI_API_KEY is required — used for PR analysis, video review, and TTS narration
+GEMINI_API_KEY=
+# ANTHROPIC_API_KEY is optional locally — Claude Agent SDK auto-detects Claude Code session
+# Required in CI (set as GitHub Actions secret)
+# ANTHROPIC_API_KEY=

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

@@ -13,8 +13,6 @@ runs:
     # Install pnpm, Node.js, build frontend
     - name: Install pnpm
       uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-      with:
-        version: 10
 
     - name: Setup Node.js
       uses: actions/setup-node@v6

.github/workflows/api-update-electron-api-types.yaml

@@ -17,8 +17,6 @@ jobs:
 
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v6

.github/workflows/api-update-manager-api-types.yaml

@@ -22,8 +22,6 @@ jobs:
 
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v6

.github/workflows/api-update-registry-api-types.yaml

@@ -1,109 +0,0 @@
-# Description: When upstream comfy-api is updated, click dispatch to update the TypeScript type definitions in this repo
-name: 'Api: Update Registry API Types'
-
-on:
-  # Manual trigger
-  workflow_dispatch:
-
-  # Triggered from comfy-api repo
-  repository_dispatch:
-    types: [comfy-api-updated]
-
-jobs:
-  update-registry-types:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-      pull-requests: write
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v6
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v6
-        with:
-          node-version-file: '.nvmrc'
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Checkout comfy-api repository
-        uses: actions/checkout@v6
-        with:
-          repository: Comfy-Org/comfy-api
-          path: comfy-api
-          token: ${{ secrets.COMFY_API_PAT }}
-          clean: true
-
-      - name: Get API commit information
-        id: api-info
-        run: |
-          cd comfy-api
-          API_COMMIT=$(git rev-parse --short HEAD)
-          echo "commit=${API_COMMIT}" >> $GITHUB_OUTPUT
-          cd ..
-
-      - name: Generate API types
-        run: |
-          echo "Generating TypeScript types from comfy-api@${{ steps.api-info.outputs.commit }}..."
-          mkdir -p ./packages/registry-types/src
-          pnpm dlx openapi-typescript ./comfy-api/openapi.yml --output ./packages/registry-types/src/comfyRegistryTypes.ts
-
-      - name: Validate generated types
-        run: |
-          if [ ! -f ./packages/registry-types/src/comfyRegistryTypes.ts ]; then
-            echo "Error: Types file was not generated."
-            exit 1
-          fi
-
-          # Check if file is not empty
-          if [ ! -s ./packages/registry-types/src/comfyRegistryTypes.ts ]; then
-            echo "Error: Generated types file is empty."
-            exit 1
-          fi
-
-      - name: Lint generated types
-        run: |
-          echo "Linting generated Comfy Registry API types..."
-          pnpm lint:fix:no-cache -- ./packages/registry-types/src/comfyRegistryTypes.ts
-
-      - name: Check for changes
-        id: check-changes
-        run: |
-          if [[ -z $(git status --porcelain ./packages/registry-types/src/comfyRegistryTypes.ts) ]]; then
-            echo "No changes to Comfy Registry API types detected."
-            echo "changed=false" >> $GITHUB_OUTPUT
-            exit 0
-          else
-            echo "Changes detected in Comfy Registry API types."
-            echo "changed=true" >> $GITHUB_OUTPUT
-          fi
-
-      - name: Create Pull Request
-        if: steps.check-changes.outputs.changed == 'true'
-        uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0 # v8.1.0
-        with:
-          token: ${{ secrets.PR_GH_TOKEN }}
-          commit-message: '[chore] Update Comfy Registry API types from comfy-api@${{ steps.api-info.outputs.commit }}'
-          title: '[chore] Update Comfy Registry API types from comfy-api@${{ steps.api-info.outputs.commit }}'
-          body: |
-            ## Automated API Type Update
-
-            This PR updates the Comfy Registry API types from the latest comfy-api OpenAPI specification.
-
-            - API commit: ${{ steps.api-info.outputs.commit }}
-            - Generated on: ${{ github.event.repository.updated_at }}
-
-            These types are automatically generated using openapi-typescript.
-          branch: update-registry-types-${{ steps.api-info.outputs.commit }}
-          base: main
-          labels: CNR
-          delete-branch: true
-          add-paths: |
-            packages/registry-types/src/comfyRegistryTypes.ts

.github/workflows/ci-dist-telemetry-scan.yaml

@@ -20,8 +20,6 @@ jobs:
 
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
 
       - name: Use Node.js
         uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0

.github/workflows/ci-oss-assets-validation.yaml

@@ -21,8 +21,6 @@ jobs:
 
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
 
       - name: Use Node.js
         uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
@@ -76,8 +74,6 @@ jobs:
 
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
 
       - name: Use Node.js
         uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
@@ -99,7 +95,7 @@ jobs:
           if npx license-checker-rseidelsohn@4 \
             --production \
             --summary \
-            --excludePackages '@comfyorg/comfyui-frontend;@comfyorg/design-system;@comfyorg/registry-types;@comfyorg/shared-frontend-utils;@comfyorg/tailwind-utils;@comfyorg/comfyui-electron-types' \
+            --excludePackages '@comfyorg/comfyui-frontend;@comfyorg/design-system;@comfyorg/ingest-types;@comfyorg/registry-types;@comfyorg/shared-frontend-utils;@comfyorg/tailwind-utils;@comfyorg/comfyui-electron-types' \
             --clarificationsFile .github/license-clarifications.json \
             --onlyAllow 'MIT;MIT*;Apache-2.0;BSD-2-Clause;BSD-3-Clause;ISC;0BSD;BlueOak-1.0.0;Python-2.0;CC0-1.0;Unlicense;(MIT OR Apache-2.0);(MIT OR GPL-3.0);(Apache-2.0 OR MIT);(MPL-2.0 OR Apache-2.0);CC-BY-4.0;CC-BY-3.0;GPL-3.0-only'; then
             echo ''

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

@@ -33,6 +33,20 @@ jobs:
           path: dist/
           retention-days: 1
 
+      # Build cloud distribution for @cloud tagged tests
+      # NX_SKIP_NX_CACHE=true is required because `nx build` was already run
+      # for the OSS distribution above. Without skipping cache, Nx returns
+      # the cached OSS build since env vars aren't part of the cache key.
+      - name: Build cloud frontend
+        run: NX_SKIP_NX_CACHE=true pnpm build:cloud
+
+      - name: Upload cloud frontend
+        uses: actions/upload-artifact@v6
+        with:
+          name: frontend-dist-cloud
+          path: dist/
+          retention-days: 1
+
   # Sharded chromium tests
   playwright-tests-chromium-sharded:
     needs: setup
@@ -97,14 +111,14 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        browser: [chromium-2x, chromium-0.5x, mobile-chrome]
+        browser: [chromium-2x, chromium-0.5x, mobile-chrome, cloud]
     steps:
       - name: Checkout repository
         uses: actions/checkout@v6
       - name: Download built frontend
         uses: actions/download-artifact@v7
         with:
-          name: frontend-dist
+          name: ${{ matrix.browser == 'cloud' && 'frontend-dist-cloud' || 'frontend-dist' }}
           path: dist/
 
       - name: Start ComfyUI server

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

@@ -1,4 +1,4 @@
-# Description: Unit and component testing with Vitest
+# Description: Unit and component testing with Vitest + coverage reporting
 name: 'CI: Tests Unit'
 
 on:
@@ -23,5 +23,13 @@ jobs:
       - name: Setup frontend
         uses: ./.github/actions/setup-frontend
 
-      - name: Run Vitest tests
-        run: pnpm test:unit
+      - name: Run Vitest tests with coverage
+        run: pnpm test:coverage
+
+      - name: Upload coverage to Codecov
+        if: always()
+        uses: codecov/codecov-action@1af58845a975a7985b0beb0cbe6fbbb71a41dbad # v5.5.3
+        with:
+          files: coverage/lcov.info
+          token: ${{ secrets.CODECOV_TOKEN }}
+          fail_ci_if_error: false

.github/workflows/ci-website-build.yaml

@@ -0,0 +1,33 @@
+# Description: Build and validate the marketing website (apps/website)
+name: 'CI: Website Build'
+
+on:
+  push:
+    branches: [main, master, website/*]
+    paths:
+      - 'apps/website/**'
+      - 'packages/design-system/**'
+      - 'pnpm-lock.yaml'
+  pull_request:
+    branches-ignore: [wip/*, draft/*, temp/*]
+    paths:
+      - 'apps/website/**'
+      - 'packages/design-system/**'
+      - 'pnpm-lock.yaml'
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Setup frontend
+        uses: ./.github/actions/setup-frontend
+
+      - name: Build website
+        run: pnpm --filter @comfyorg/website build

.github/workflows/pr-claude-review.yaml

@@ -30,8 +30,6 @@ jobs:
 
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v6

.github/workflows/publish-desktop-ui.yaml

@@ -85,8 +85,6 @@ jobs:
 
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v6

.github/workflows/release-biweekly-comfyui.yaml

@@ -76,8 +76,6 @@ jobs:
 
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v6
@@ -203,8 +201,6 @@ jobs:
 
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
 
       - uses: actions/setup-node@v6
         with:

.github/workflows/release-draft-create.yaml

@@ -20,10 +20,10 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v6
+
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
+
       - uses: actions/setup-node@v6
         with:
           node-version-file: '.nvmrc'

.github/workflows/release-npm-types.yaml

@@ -76,8 +76,6 @@ jobs:
 
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v6

.github/workflows/release-pypi-dev.yaml

@@ -16,10 +16,10 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v6
+
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
+
       - uses: actions/setup-node@v6
         with:
           node-version-file: '.nvmrc'

.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

.github/workflows/version-bump-desktop-ui.yaml

@@ -52,8 +52,6 @@ jobs:
 
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v6

.github/workflows/weekly-docs-check.yaml

@@ -30,8 +30,6 @@ jobs:
 
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v6

.gitignore

@@ -67,6 +67,9 @@ dist.zip
 /temp/
 /tmp/
 
+# QA local output
+/.comfy-qa/
+
 # Generated JSON Schemas
 /schemas/
 

.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.
@@ -208,7 +214,7 @@ See @docs/testing/\*.md for detailed patterns.
 3. Keep your module mocks contained  
    Do not use global mutable state within the test file  
    Use `vi.hoisted()` if necessary to allow for per-test Arrange phase manipulation of deeper mock state
-4. For Component testing, use [Vue Test Utils](https://test-utils.vuejs.org/) and especially follow the advice [about making components easy to test](https://test-utils.vuejs.org/guide/essentials/easy-to-test.html)
+4. For Component testing, prefer [@testing-library/vue](https://testing-library.com/docs/vue-testing-library/intro/) with `@testing-library/user-event` for user-centric, behavioral tests. [Vue Test Utils](https://test-utils.vuejs.org/) is also accepted, especially for tests that need direct access to the component wrapper (e.g., `findComponent`, `emitted()`). Follow the advice [about making components easy to test](https://test-utils.vuejs.org/guide/essentials/easy-to-test.html)
 5. Aim for behavioral coverage of critical and new features
 
 ### Playwright / Browser / E2E Tests
@@ -216,6 +222,7 @@ See @docs/testing/\*.md for detailed patterns.
 1. Follow the Best Practices described [in the Playwright documentation](https://playwright.dev/docs/best-practices)
 2. Do not use waitForTimeout, use Locator actions and [retrying assertions](https://playwright.dev/docs/test-assertions#auto-retrying-assertions)
 3. Tags like `@mobile`, `@2x` are respected by config and should be used for relevant tests
+4. Type all API mock responses in `route.fulfill()` using generated types or schemas from `packages/ingest-types`, `packages/registry-types`, `src/workbench/extensions/manager/types/generatedManagerTypes.ts`, or `src/schemas/` — see `docs/guidance/playwright.md` for the full source-of-truth table
 
 ## External Resources
 
@@ -225,12 +232,25 @@ 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>
 - Nx: <https://nx.dev/docs/reference/nx-commands>
 - [Practical Test Pyramid](https://martinfowler.com/articles/practical-test-pyramid.html)
 
+## Architecture Decision Records
+
+All architectural decisions are documented in `docs/adr/`. Code changes must be consistent with accepted ADRs. Proposed ADRs indicate design direction and should be treated as guidance. See `.agents/checks/adr-compliance.md` for automated validation rules.
+
+### Entity Architecture Constraints (ADR 0003 + ADR 0008)
+
+1. **Command pattern for all mutations**: Every entity state change must be a serializable, idempotent, deterministic command — replayable, undoable, and transmittable over CRDT. No imperative fire-and-forget mutation APIs. Systems produce command batches, not direct side effects.
+2. **Centralized registries and ECS-style access**: Entity data lives in the World (centralized registry), queried via `world.getComponent(entityId, ComponentType)`. Do not add new instance properties/methods to entity classes. Do not use OOP inheritance for entity modeling.
+3. **No god-object growth**: Do not add methods to `LGraphNode`, `LGraphCanvas`, `LGraph`, or `Subgraph`. Extract to systems, stores, or composables.
+4. **Plain data components**: ECS components are plain data objects — no methods, no back-references to parent entities. Behavior belongs in systems (pure functions).
+5. **Extension ecosystem impact**: Changes to entity callbacks (`onConnectionsChange`, `onRemoved`, `onAdded`, `onConnectInput/Output`, `onConfigure`, `onWidgetChanged`), `node.widgets` access, `node.serialize`, or `graph._version++` affect 40+ custom node repos and require migration guidance.
+
 ## Project Philosophy
 
 - Follow good software engineering principles

CODEOWNERS

@@ -41,12 +41,49 @@
 /src/components/templates/                        @Myestery @christian-byrne @comfyui-wiki
 
 # Mask Editor
-/src/extensions/core/maskeditor.ts                @trsommer @brucew4yn3rp
-/src/extensions/core/maskEditorLayerFilenames.ts  @trsommer @brucew4yn3rp
+/src/extensions/core/maskeditor.ts                @trsommer @brucew4yn3rp @jtydhr88
+/src/extensions/core/maskEditorLayerFilenames.ts  @trsommer @brucew4yn3rp @jtydhr88
+/src/components/maskeditor/                       @trsommer @brucew4yn3rp @jtydhr88
+/src/composables/maskeditor/                      @trsommer @brucew4yn3rp @jtydhr88
+/src/stores/maskEditorStore.ts                    @trsommer @brucew4yn3rp @jtydhr88
+/src/stores/maskEditorDataStore.ts                @trsommer @brucew4yn3rp @jtydhr88
+
+# Image Crop
+/src/extensions/core/imageCrop.ts                 @jtydhr88
+/src/components/imagecrop/                        @jtydhr88
+/src/composables/useImageCrop.ts                  @jtydhr88
+/src/lib/litegraph/src/widgets/ImageCropWidget.ts @jtydhr88
+
+# Image Compare
+/src/extensions/core/imageCompare.ts              @jtydhr88
+/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue       @jtydhr88
+/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.test.ts   @jtydhr88
+/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.stories.ts @jtydhr88
+/src/renderer/extensions/vueNodes/widgets/composables/useImageCompareWidget.ts    @jtydhr88
+/src/lib/litegraph/src/widgets/ImageCompareWidget.ts @jtydhr88
+
+# Painter
+/src/extensions/core/painter.ts                   @jtydhr88
+/src/components/painter/                           @jtydhr88
+/src/composables/painter/                          @jtydhr88
+/src/renderer/extensions/vueNodes/widgets/composables/usePainterWidget.ts @jtydhr88
+/src/lib/litegraph/src/widgets/PainterWidget.ts   @jtydhr88
+
+# GLSL
+/src/renderer/glsl/                               @jtydhr88 @pythongosssss @christian-byrne
 
 # 3D
 /src/extensions/core/load3d.ts                    @jtydhr88
+/src/extensions/core/load3dLazy.ts                @jtydhr88
+/src/extensions/core/load3d/                      @jtydhr88
 /src/components/load3d/                           @jtydhr88
+/src/composables/useLoad3d.ts                     @jtydhr88
+/src/composables/useLoad3d.test.ts                @jtydhr88
+/src/composables/useLoad3dDrag.ts                 @jtydhr88
+/src/composables/useLoad3dDrag.test.ts            @jtydhr88
+/src/composables/useLoad3dViewer.ts               @jtydhr88
+/src/composables/useLoad3dViewer.test.ts          @jtydhr88
+/src/services/load3dService.ts                    @jtydhr88
 
 # Manager
 /src/workbench/extensions/manager/                @viva-jinyi @christian-byrne @ltdrdata

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/astro.config.ts

@@ -1,11 +1,12 @@
 import { defineConfig } from 'astro/config'
+import sitemap from '@astrojs/sitemap'
 import vue from '@astrojs/vue'
 import tailwindcss from '@tailwindcss/vite'
 
 export default defineConfig({
   site: 'https://comfy.org',
   output: 'static',
-  integrations: [vue()],
+  integrations: [vue(), sitemap()],
   vite: {
     plugins: [tailwindcss()]
   },

apps/website/package.json

@@ -9,6 +9,7 @@
     "preview": "astro preview"
   },
   "dependencies": {
+    "@astrojs/sitemap": "catalog:",
     "@comfyorg/design-system": "workspace:*",
     "@vercel/analytics": "catalog:",
     "vue": "catalog:"

apps/website/public/icons/social/discord.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.492c-1.53-.69-3.17-1.2-4.885-1.49a.075.075 0 0 0-.079.036c-.21.369-.444.85-.608 1.23a18.566 18.566 0 0 0-5.487 0 12.36 12.36 0 0 0-.617-1.23A.077.077 0 0 0 8.562 3c-1.714.29-3.354.8-4.885 1.491a.07.07 0 0 0-.032.027C.533 9.093-.32 13.555.099 17.961a.08.08 0 0 0 .031.055 20.03 20.03 0 0 0 5.993 2.98.078.078 0 0 0 .084-.026c.462-.62.874-1.275 1.226-1.963.021-.04.001-.088-.041-.104a13.201 13.201 0 0 1-1.872-.878.075.075 0 0 1-.008-.125c.126-.093.252-.19.372-.287a.075.075 0 0 1 .078-.01c3.927 1.764 8.18 1.764 12.061 0a.075.075 0 0 1 .079.009c.12.098.245.195.372.288a.075.075 0 0 1-.006.125c-.598.344-1.22.635-1.873.877a.075.075 0 0 0-.041.105c.36.687.772 1.341 1.225 1.962a.077.077 0 0 0 .084.028 19.963 19.963 0 0 0 6.002-2.981.076.076 0 0 0 .032-.054c.5-5.094-.838-9.52-3.549-13.442a.06.06 0 0 0-.031-.028ZM8.02 15.278c-1.182 0-2.157-1.069-2.157-2.38 0-1.312.956-2.38 2.157-2.38 1.21 0 2.176 1.077 2.157 2.38 0 1.312-.956 2.38-2.157 2.38Zm7.975 0c-1.183 0-2.157-1.069-2.157-2.38 0-1.312.955-2.38 2.157-2.38 1.21 0 2.176 1.077 2.157 2.38 0 1.312-.946 2.38-2.157 2.38Z"/></svg>

apps/website/public/icons/social/github.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z"/></svg>

apps/website/public/icons/social/instagram.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069ZM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0Zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324ZM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881Z"/></svg>

apps/website/public/icons/social/linkedin.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286ZM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065Zm1.782 13.019H3.555V9h3.564v11.452ZM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003Z"/></svg>

apps/website/public/icons/social/reddit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm5.8 11.33c.02.16.03.33.03.5 0 2.55-2.97 4.63-6.63 4.63-3.65 0-6.62-2.07-6.62-4.63 0-.17.01-.34.03-.5a1.58 1.58 0 0 1-.63-1.27c0-.88.72-1.59 1.6-1.59.44 0 .83.18 1.12.46 1.1-.79 2.62-1.3 4.31-1.37l.73-3.44a.32.32 0 0 1 .39-.24l2.43.52a1.13 1.13 0 0 1 2.15.36 1.13 1.13 0 0 1-1.13 1.12 1.13 1.13 0 0 1-1.08-.82l-2.16-.46-.65 3.07c1.65.09 3.14.59 4.22 1.36.29-.28.69-.46 1.13-.46.88 0 1.6.71 1.6 1.59 0 .52-.25.97-.63 1.27ZM9.5 13.5c0 .63.51 1.13 1.13 1.13s1.12-.5 1.12-1.13-.5-1.12-1.12-1.12-1.13.5-1.13 1.12Zm5.75 2.55c-.69.69-2 .73-3.25.73s-2.56-.04-3.25-.73a.32.32 0 1 1 .45-.45c.44.44 1.37.6 2.8.6 1.43 0 2.37-.16 2.8-.6a.32.32 0 1 1 .45.45Zm-.37-1.42c.62 0 1.13-.5 1.13-1.13 0-.62-.51-1.12-1.13-1.12-.63 0-1.13.5-1.13 1.12 0 .63.5 1.13 1.13 1.13Z"/></svg>

apps/website/public/icons/social/x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>

apps/website/public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://comfy.org/sitemap-index.xml

apps/website/src/components/AcademySection.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Locale } from '../i18n/translations'
+import { t } from '../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const features = computed(() => [
+  { icon: '📚', label: t('academy.tutorials', locale) },
+  { icon: '🎥', label: t('academy.videos', locale) },
+  { icon: '🛠️', label: t('academy.projects', locale) }
+])
+</script>
+
+<template>
+  <section class="bg-charcoal-800 py-24">
+    <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"
+      >
+        {{ t('academy.badge', locale) }}
+      </span>
+
+      <h2 class="mt-6 text-3xl font-bold text-white">
+        {{ t('academy.heading', locale) }}
+      </h2>
+
+      <p class="mt-4 text-smoke-700">
+        {{ t('academy.body', locale) }}
+      </p>
+
+      <!-- Feature bullets -->
+      <div class="mt-8 flex flex-wrap items-center justify-center gap-8">
+        <div
+          v-for="feature in features"
+          :key="feature.label"
+          class="flex items-center gap-2 text-sm text-white"
+        >
+          <span aria-hidden="true">{{ feature.icon }}</span>
+          <span>{{ feature.label }}</span>
+        </div>
+      </div>
+
+      <!-- CTA -->
+      <a
+        href="/academy"
+        class="mt-8 inline-block rounded-full bg-brand-yellow px-8 py-3 text-sm font-semibold text-black transition-opacity hover:opacity-90"
+      >
+        {{ t('academy.cta', locale) }}
+      </a>
+    </div>
+  </section>
+</template>

apps/website/src/components/CTASection.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Locale } from '../i18n/translations'
+import { t } from '../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const cards = computed(() => [
+  {
+    icon: '🖥️',
+    title: t('cta.desktop.title', locale),
+    description: t('cta.desktop.desc', locale),
+    cta: t('cta.desktop.cta', locale),
+    href: '/download',
+    outlined: false
+  },
+  {
+    icon: '☁️',
+    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: 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">
+        {{ t('cta.heading', locale) }}
+      </h2>
+
+      <!-- CTA cards -->
+      <div class="mt-12 grid grid-cols-1 gap-6 md:grid-cols-3">
+        <a
+          v-for="card in cards"
+          :key="card.title"
+          :href="card.href"
+          class="flex flex-1 flex-col items-center rounded-xl border border-white/10 bg-charcoal-600 p-8 text-center transition-colors hover:border-brand-yellow"
+        >
+          <span class="text-4xl" aria-hidden="true">{{ card.icon }}</span>
+          <h3 class="mt-4 text-xl font-semibold text-white">
+            {{ card.title }}
+          </h3>
+          <p class="mt-2 text-sm text-smoke-700">
+            {{ card.description }}
+          </p>
+          <span
+            class="mt-6 inline-block rounded-full px-6 py-2 text-sm font-semibold transition-opacity hover:opacity-90"
+            :class="
+              card.outlined
+                ? 'border border-brand-yellow text-brand-yellow'
+                : 'bg-brand-yellow text-black'
+            "
+          >
+            {{ card.cta }}
+          </span>
+        </a>
+      </div>
+    </div>
+  </section>
+</template>

apps/website/src/components/CaseStudySpotlight.vue

@@ -0,0 +1,77 @@
+<!-- TODO: Replace placeholder content with real quotes and case studies -->
+<script setup lang="ts">
+const studies = [
+  {
+    title: 'New Pipelines with Chord Mode',
+    body: 'For AI-assisted texture and environment generation across studio pipelines.',
+    highlight: false,
+    gridClass: 'md:row-span-2'
+  },
+  {
+    title: 'AI-Assisted Texture and Environment',
+    body: 'For AI-assisted texture and environment generation across studio pipelines.',
+    highlight: false,
+    gridClass: 'min-h-[300px] lg:col-span-2'
+  },
+  {
+    title: 'Open-sourced the Chord Mode',
+    body: 'For AI-assisted texture and environment generation across studio pipelines.',
+    highlight: false,
+    gridClass: 'min-h-[200px]'
+  },
+  {
+    title: 'Environment Generation',
+    body: 'For AI-assisted texture and environment generation across studio pipelines.',
+    highlight: true,
+    gridClass: 'min-h-[200px]'
+  }
+]
+</script>
+
+<template>
+  <section class="bg-black px-6 py-24">
+    <div class="mx-auto max-w-7xl">
+      <header class="mb-12">
+        <h2 class="text-3xl font-bold text-white">Customer Stories</h2>
+        <p class="mt-2 text-smoke-700">
+          See how leading studios use Comfy in production
+        </p>
+      </header>
+
+      <!-- Bento grid -->
+      <div
+        class="relative grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"
+      >
+        <article
+          v-for="study in studies"
+          :key="study.title"
+          class="flex flex-col justify-end rounded-2xl border border-brand-yellow/30 p-6"
+          :class="[
+            study.gridClass,
+            study.highlight ? 'bg-brand-yellow' : 'bg-charcoal-600'
+          ]"
+        >
+          <h3
+            class="font-semibold"
+            :class="study.highlight ? 'text-black' : 'text-white'"
+          >
+            {{ study.title }}
+          </h3>
+          <p
+            class="mt-2 text-sm"
+            :class="study.highlight ? 'text-black/70' : 'text-smoke-700'"
+          >
+            {{ study.body }}
+          </p>
+          <a
+            href="/case-studies"
+            class="mt-4 text-sm underline"
+            :class="study.highlight ? 'text-black' : 'text-brand-yellow'"
+          >
+            READ CASE STUDY
+          </a>
+        </article>
+      </div>
+    </div>
+  </section>
+</template>

apps/website/src/components/GetStartedSection.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Locale } from '../i18n/translations'
+import { t } from '../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const steps = computed(() => [
+  {
+    number: '1',
+    title: t('getStarted.step1.title', locale),
+    description: t('getStarted.step1.desc', locale)
+  },
+  {
+    number: '2',
+    title: t('getStarted.step2.title', locale),
+    description: t('getStarted.step2.desc', locale)
+  },
+  {
+    number: '3',
+    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">
+        {{ t('getStarted.heading', locale) }}
+      </h2>
+      <p class="mt-4 text-smoke-700">
+        {{ t('getStarted.subheading', locale) }}
+      </p>
+
+      <!-- Steps -->
+      <div class="mt-16 grid grid-cols-1 gap-8 md:grid-cols-3">
+        <div v-for="(step, index) in steps" :key="step.number" class="relative">
+          <!-- 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"
+          />
+
+          <div class="relative">
+            <span class="text-6xl font-bold text-brand-yellow/20">
+              {{ step.number }}
+            </span>
+            <h3 class="mt-2 text-xl font-semibold text-white">
+              {{ step.title }}
+            </h3>
+            <p class="mt-2 text-sm text-smoke-700">
+              {{ step.description }}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <!-- CTA -->
+      <a
+        href="/download"
+        class="mt-12 inline-block rounded-full bg-brand-yellow px-8 py-3 text-sm font-semibold text-black transition-opacity hover:opacity-90"
+      >
+        {{ t('getStarted.cta', locale) }}
+      </a>
+    </div>
+  </section>
+</template>

apps/website/src/components/HeroSection.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { Locale } from '../i18n/translations'
+import { t } from '../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const ctaButtons = computed(() => [
+  {
+    label: t('hero.cta.getStarted', locale),
+    href: 'https://app.comfy.org',
+    variant: 'solid' as const
+  },
+  {
+    label: t('hero.cta.learnMore', locale),
+    href: '/about',
+    variant: 'outline' as const
+  }
+])
+</script>
+
+<template>
+  <section
+    class="relative flex min-h-screen items-center overflow-hidden bg-black pt-16"
+  >
+    <div
+      class="mx-auto flex w-full max-w-7xl flex-col items-center gap-12 px-6 md:flex-row md:gap-0"
+    >
+      <!-- Left: C Monogram -->
+      <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]"
+          >
+            <!-- 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"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 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"
+        >
+          {{ t('hero.headline', locale) }}
+        </h1>
+
+        <p class="mt-6 max-w-lg text-lg text-smoke-700">
+          {{ t('hero.subheadline', locale) }}
+        </p>
+
+        <div class="mt-8 flex flex-wrap gap-4">
+          <a
+            v-for="btn in ctaButtons"
+            :key="btn.label"
+            :href="btn.href"
+            class="rounded-full px-8 py-3 text-sm font-semibold transition-opacity hover:opacity-90"
+            :class="
+              btn.variant === 'solid'
+                ? 'bg-brand-yellow text-black'
+                : 'border border-brand-yellow text-brand-yellow'
+            "
+          >
+            {{ btn.label }}
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

apps/website/src/components/ManifestoSection.vue

@@ -0,0 +1,31 @@
+<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">
+      <!-- Decorative quote mark -->
+      <span class="text-6xl text-brand-yellow opacity-30" aria-hidden="true">
+        &laquo;
+      </span>
+
+      <h2 class="text-4xl font-bold text-white md:text-5xl">
+        {{ t('manifesto.heading', locale) }}
+      </h2>
+
+      <p class="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-smoke-700">
+        {{ t('manifesto.body', locale) }}
+      </p>
+
+      <!-- Separator line -->
+      <div
+        class="mx-auto mt-8 h-0.5 w-24 bg-brand-yellow opacity-30"
+        aria-hidden="true"
+      />
+    </div>
+  </section>
+</template>

apps/website/src/components/ProductShowcase.vue

@@ -0,0 +1,65 @@
+<!-- TODO: Replace with actual workflow demo content -->
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Locale } from '../i18n/translations'
+import { t } from '../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const features = computed(() => [
+  t('showcase.nodeEditor', locale),
+  t('showcase.realTimePreview', locale),
+  t('showcase.versionControl', locale)
+])
+</script>
+
+<template>
+  <section class="bg-charcoal-800 py-24">
+    <div class="mx-auto max-w-7xl px-6">
+      <!-- Section header -->
+      <div class="text-center">
+        <h2 class="text-3xl font-bold text-white">
+          {{ t('showcase.heading', locale) }}
+        </h2>
+        <p class="mx-auto mt-4 max-w-2xl text-smoke-700">
+          {{ t('showcase.subheading', locale) }}
+        </p>
+      </div>
+
+      <!-- Placeholder video area -->
+      <div
+        class="mt-12 flex aspect-video items-center justify-center rounded-2xl border border-white/10 bg-charcoal-600"
+      >
+        <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"
+            aria-hidden="true"
+          >
+            <div
+              class="ml-1 h-0 w-0 border-y-8 border-l-[14px] border-y-transparent border-l-white"
+            />
+          </div>
+          <p class="text-sm text-smoke-700">
+            {{ t('showcase.placeholder', locale) }}
+          </p>
+        </div>
+      </div>
+
+      <!-- Feature labels -->
+      <div class="mt-8 flex flex-wrap items-center justify-center gap-6">
+        <div
+          v-for="feature in features"
+          :key="feature"
+          class="flex items-center gap-2"
+        >
+          <span
+            class="h-2 w-2 rounded-full bg-brand-yellow"
+            aria-hidden="true"
+          />
+          <span class="text-sm text-smoke-700">{{ feature }}</span>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

apps/website/src/components/SiteFooter.vue

@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { Locale } from '../i18n/translations'
+import { localePath, t } from '../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const columns = computed(() => [
+  {
+    title: t('footer.product', locale),
+    links: [
+      {
+        label: t('footer.comfyDesktop', locale),
+        href: localePath('/download', locale)
+      },
+      { label: t('footer.comfyCloud', locale), href: 'https://app.comfy.org' },
+      { label: t('footer.comfyHub', locale), href: 'https://hub.comfy.org' },
+      {
+        label: t('footer.pricing', locale),
+        href: localePath('/pricing', locale)
+      }
+    ]
+  },
+  {
+    title: t('footer.resources', locale),
+    links: [
+      {
+        label: t('footer.documentation', locale),
+        href: 'https://docs.comfy.org'
+      },
+      { label: t('footer.blog', locale), href: 'https://blog.comfy.org' },
+      {
+        label: t('footer.gallery', locale),
+        href: localePath('/gallery', locale)
+      },
+      {
+        label: t('footer.github', locale),
+        href: 'https://github.com/comfyanonymous/ComfyUI'
+      }
+    ]
+  },
+  {
+    title: t('footer.company', locale),
+    links: [
+      { label: t('footer.about', locale), href: localePath('/about', locale) },
+      {
+        label: t('footer.careers', locale),
+        href: localePath('/careers', locale)
+      },
+      {
+        label: t('footer.enterprise', locale),
+        href: localePath('/enterprise', locale)
+      }
+    ]
+  },
+  {
+    title: t('footer.legal', locale),
+    links: [
+      {
+        label: t('footer.terms', locale),
+        href: localePath('/terms-of-service', locale)
+      },
+      {
+        label: t('footer.privacy', locale),
+        href: localePath('/privacy-policy', locale)
+      }
+    ]
+  }
+])
+
+const socials = [
+  {
+    label: 'GitHub',
+    href: 'https://github.com/comfyanonymous/ComfyUI',
+    icon: '/icons/social/github.svg'
+  },
+  {
+    label: 'Discord',
+    href: 'https://discord.gg/comfyorg',
+    icon: '/icons/social/discord.svg'
+  },
+  {
+    label: 'X',
+    href: 'https://x.com/comaboratory',
+    icon: '/icons/social/x.svg'
+  },
+  {
+    label: 'Reddit',
+    href: 'https://reddit.com/r/comfyui',
+    icon: '/icons/social/reddit.svg'
+  },
+  {
+    label: 'LinkedIn',
+    href: 'https://linkedin.com/company/comfyorg',
+    icon: '/icons/social/linkedin.svg'
+  },
+  {
+    label: 'Instagram',
+    href: 'https://instagram.com/comfyorg',
+    icon: '/icons/social/instagram.svg'
+  }
+]
+</script>
+
+<template>
+  <footer class="border-t border-white/10 bg-black">
+    <div
+      class="mx-auto grid max-w-7xl gap-8 px-6 py-16 sm:grid-cols-2 lg:grid-cols-5"
+    >
+      <!-- Brand -->
+      <div class="lg:col-span-1">
+        <!-- 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">
+          {{ t('footer.tagline', locale) }}
+        </p>
+      </div>
+
+      <!-- Link columns -->
+      <nav
+        v-for="column in columns"
+        :key="column.title"
+        :aria-label="column.title"
+        class="flex flex-col gap-3"
+      >
+        <h3 class="text-sm font-semibold text-white">{{ column.title }}</h3>
+        <a
+          v-for="link in column.links"
+          :key="link.href"
+          :href="link.href"
+          :target="link.href.startsWith('http') ? '_blank' : undefined"
+          :rel="
+            link.href.startsWith('http') ? 'noopener noreferrer' : undefined
+          "
+          class="text-sm text-smoke-700 transition-colors hover:text-white"
+        >
+          {{ link.label }}
+        </a>
+      </nav>
+    </div>
+
+    <!-- Bottom bar -->
+    <div class="border-t border-white/10">
+      <div
+        class="mx-auto flex max-w-7xl flex-col items-center justify-between gap-4 p-6 sm:flex-row"
+      >
+        <p class="text-sm text-smoke-700">
+          &copy; {{ new Date().getFullYear() }}
+          {{ t('footer.copyright', locale) }}
+        </p>
+
+        <!-- Social icons -->
+        <div class="flex items-center gap-4">
+          <a
+            v-for="social in socials"
+            :key="social.label"
+            :href="social.href"
+            :aria-label="social.label"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-smoke-700 transition-colors hover:text-white"
+          >
+            <span
+              class="inline-block size-5 bg-current"
+              :style="{
+                maskImage: `url(${social.icon})`,
+                maskSize: 'contain',
+                maskRepeat: 'no-repeat',
+                WebkitMaskImage: `url(${social.icon})`,
+                WebkitMaskSize: 'contain',
+                WebkitMaskRepeat: 'no-repeat'
+              }"
+              aria-hidden="true"
+            />
+          </a>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>

apps/website/src/components/SiteNav.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+
+import type { Locale } from '../i18n/translations'
+import { localePath, t } from '../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const mobileMenuOpen = ref(false)
+const currentPath = ref('')
+
+const navLinks = computed(() => [
+  {
+    label: t('nav.enterprise', locale),
+    href: localePath('/enterprise', locale)
+  },
+  { label: t('nav.gallery', locale), href: localePath('/gallery', locale) },
+  { label: t('nav.about', locale), href: localePath('/about', locale) },
+  { label: t('nav.careers', locale), href: localePath('/careers', locale) }
+])
+
+const ctaLinks = [
+  {
+    label: 'COMFY CLOUD',
+    href: 'https://app.comfy.org',
+    primary: true
+  },
+  {
+    label: 'COMFY HUB',
+    href: 'https://hub.comfy.org',
+    primary: false
+  }
+]
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape' && mobileMenuOpen.value) {
+    mobileMenuOpen.value = false
+  }
+}
+
+function onAfterSwap() {
+  mobileMenuOpen.value = false
+  currentPath.value = window.location.pathname
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', onKeydown)
+  document.addEventListener('astro:after-swap', onAfterSwap)
+  currentPath.value = window.location.pathname
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', onKeydown)
+  document.removeEventListener('astro:after-swap', onAfterSwap)
+})
+</script>
+
+<template>
+  <nav
+    class="fixed 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 -->
+      <!-- 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">
+        <a
+          v-for="link in navLinks"
+          :key="link.href"
+          :href="link.href"
+          :aria-current="currentPath === link.href ? 'page' : undefined"
+          class="text-sm font-medium tracking-wide text-white transition-colors hover:text-brand-yellow"
+        >
+          {{ link.label }}
+        </a>
+
+        <div class="flex items-center gap-3">
+          <a
+            v-for="cta in ctaLinks"
+            :key="cta.href"
+            :href="cta.href"
+            :class="
+              cta.primary
+                ? 'bg-brand-yellow text-black 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"
+          >
+            {{ cta.label }}
+          </a>
+        </div>
+      </div>
+
+      <!-- Mobile hamburger -->
+      <button
+        class="flex flex-col gap-1.5 md:hidden"
+        :aria-label="t('nav.toggleMenu', locale)"
+        aria-controls="site-mobile-menu"
+        :aria-expanded="mobileMenuOpen"
+        @click="mobileMenuOpen = !mobileMenuOpen"
+      >
+        <span
+          class="block h-0.5 w-6 bg-white transition-transform"
+          :class="mobileMenuOpen && 'translate-y-2 rotate-45'"
+        />
+        <span
+          class="block h-0.5 w-6 bg-white transition-opacity"
+          :class="mobileMenuOpen && 'opacity-0'"
+        />
+        <span
+          class="block h-0.5 w-6 bg-white transition-transform"
+          :class="mobileMenuOpen && '-translate-y-2 -rotate-45'"
+        />
+      </button>
+    </div>
+
+    <!-- Mobile menu -->
+    <div
+      v-show="mobileMenuOpen"
+      id="site-mobile-menu"
+      class="border-t border-white/10 bg-black px-6 pb-6 md:hidden"
+    >
+      <div class="flex flex-col gap-4 pt-4">
+        <a
+          v-for="link in navLinks"
+          :key="link.href"
+          :href="link.href"
+          :aria-current="currentPath === link.href ? 'page' : undefined"
+          class="text-sm font-medium tracking-wide text-white transition-colors hover:text-brand-yellow"
+          @click="mobileMenuOpen = false"
+        >
+          {{ link.label }}
+        </a>
+
+        <div class="flex flex-col gap-3 pt-2">
+          <a
+            v-for="cta in ctaLinks"
+            :key="cta.href"
+            :href="cta.href"
+            :class="
+              cta.primary
+                ? 'bg-brand-yellow text-black 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"
+          >
+            {{ cta.label }}
+          </a>
+        </div>
+      </div>
+    </div>
+  </nav>
+</template>

apps/website/src/components/SocialProofBar.vue

@@ -0,0 +1,64 @@
+<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',
+  'Nike',
+  'HP',
+  'Autodesk',
+  'Apple',
+  'Ubisoft',
+  'Lucid',
+  'Amazon',
+  'Netflix',
+  'Pixomondo',
+  'EA'
+]
+
+const metrics = computed(() => [
+  { value: '60K+', label: t('social.customNodes', locale) },
+  { value: '106K+', label: t('social.githubStars', locale) },
+  { value: '500K+', label: t('social.communityMembers', locale) }
+])
+</script>
+
+<template>
+  <section class="border-y border-white/10 bg-black py-16">
+    <div class="mx-auto max-w-7xl px-6">
+      <!-- Heading -->
+      <p
+        class="text-center text-xs font-medium uppercase tracking-widest text-smoke-700"
+      >
+        {{ t('social.heading', locale) }}
+      </p>
+
+      <!-- Logo row -->
+      <div
+        class="mt-10 flex flex-wrap items-center justify-center gap-4 md:gap-6"
+      >
+        <span
+          v-for="company in logos"
+          :key="company"
+          class="rounded-full border border-white/10 px-6 py-2 text-sm text-smoke-700"
+        >
+          {{ company }}
+        </span>
+      </div>
+
+      <!-- Metrics row -->
+      <div
+        class="mt-14 flex flex-col items-center justify-center gap-10 sm:flex-row sm:gap-12"
+      >
+        <div v-for="metric in metrics" :key="metric.label" class="text-center">
+          <p class="text-3xl font-bold text-white">{{ metric.value }}</p>
+          <p class="mt-1 text-sm text-smoke-700">{{ metric.label }}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

apps/website/src/components/TestimonialsSection.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import type { Locale } from '../i18n/translations'
+import { t } from '../i18n/translations'
+
+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 = [
+  {
+    quote:
+      'Comfy has transformed our VFX pipeline. The node-based approach gives us unprecedented control over every step of the generation process.',
+    name: 'Sarah Chen',
+    title: 'Lead Technical Artist',
+    company: 'Studio Alpha',
+    industry: 'VFX' as const
+  },
+  {
+    quote:
+      'The level of control over AI generation is unmatched. We can iterate on game assets faster than ever before.',
+    name: 'Marcus Rivera',
+    title: 'Creative Director',
+    company: 'PixelForge',
+    industry: 'Gaming' as const
+  },
+  {
+    quote:
+      'We\u2019ve cut our iteration time by 70%. Comfy workflows let our team produce high-quality creative assets at scale.',
+    name: 'Yuki Tanaka',
+    title: 'Head of AI',
+    company: 'CreativeX',
+    industry: 'Advertising' as const
+  }
+]
+
+const filteredTestimonials = computed(() => {
+  if (activeFilter.value === 'All') return testimonials
+  return testimonials.filter((t) => t.industry === activeFilter.value)
+})
+</script>
+
+<template>
+  <section class="bg-black py-24">
+    <div class="mx-auto max-w-7xl px-6">
+      <h2 class="text-center text-3xl font-bold text-white">
+        {{ t('testimonials.heading', locale) }}
+      </h2>
+
+      <!-- Industry filter pills -->
+      <div class="mt-8 flex flex-wrap items-center justify-center gap-3">
+        <button
+          v-for="industry in industryKeys"
+          :key="industry"
+          type="button"
+          :aria-pressed="activeFilter === industry"
+          class="cursor-pointer rounded-full px-4 py-1.5 text-sm transition-colors"
+          :class="
+            activeFilter === industry
+              ? 'bg-brand-yellow text-black'
+              : 'border border-white/10 text-smoke-700 hover:border-brand-yellow'
+          "
+          @click="activeFilter = industry"
+        >
+          {{ industryLabels[industry] }}
+        </button>
+      </div>
+
+      <!-- Testimonial cards -->
+      <div class="mt-12 grid grid-cols-1 gap-6 md:grid-cols-3">
+        <article
+          v-for="testimonial in filteredTestimonials"
+          :key="testimonial.name"
+          class="rounded-xl border border-white/10 bg-charcoal-600 p-6"
+        >
+          <blockquote class="text-base italic text-white">
+            &ldquo;{{ testimonial.quote }}&rdquo;
+          </blockquote>
+
+          <p class="mt-4 text-sm font-semibold text-white">
+            {{ testimonial.name }}
+          </p>
+          <p class="text-sm text-smoke-700">
+            {{ testimonial.title }}, {{ testimonial.company }}
+          </p>
+
+          <span
+            class="mt-3 inline-block rounded-full bg-white/5 px-2 py-0.5 text-xs text-smoke-700"
+          >
+            {{ industryLabels[testimonial.industry] ?? testimonial.industry }}
+          </span>
+        </article>
+      </div>
+    </div>
+  </section>
+</template>

apps/website/src/components/UseCaseSection.vue

@@ -0,0 +1,79 @@
+<!-- TODO: Wire category content swap when final assets arrive -->
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { Locale } from '../i18n/translations'
+import { t } from '../i18n/translations'
+
+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>
+
+<template>
+  <section class="bg-charcoal-800 px-6 py-24">
+    <div class="mx-auto max-w-7xl">
+      <div class="flex flex-col items-center gap-12 lg:flex-row lg:gap-8">
+        <!-- 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"
+          />
+        </div>
+
+        <!-- Center content -->
+        <div class="flex flex-col items-center text-center lg:flex-[2]">
+          <h2 class="text-3xl font-bold text-white">
+            {{ t('useCase.heading', locale) }}
+          </h2>
+
+          <nav
+            class="mt-10 flex flex-col items-center gap-4"
+            aria-label="Industry categories"
+          >
+            <button
+              v-for="(category, index) in categories"
+              :key="category"
+              type="button"
+              :aria-pressed="index === activeCategory"
+              class="transition-colors"
+              :class="
+                index === activeCategory
+                  ? 'text-2xl text-white'
+                  : 'text-xl text-ash-500 hover:text-white/70'
+              "
+              @click="activeCategory = index"
+            >
+              {{ category }}
+            </button>
+          </nav>
+
+          <p class="mt-10 max-w-lg text-smoke-700">
+            {{ 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"
+          >
+            {{ 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"
+          />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

apps/website/src/components/ValuePillars.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Locale } from '../i18n/translations'
+import { t } from '../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const pillars = computed(() => [
+  {
+    icon: '⚡',
+    title: t('pillars.buildTitle', locale),
+    description: t('pillars.buildDesc', locale)
+  },
+  {
+    icon: '🎨',
+    title: t('pillars.customizeTitle', locale),
+    description: t('pillars.customizeDesc', locale)
+  },
+  {
+    icon: '🔧',
+    title: t('pillars.refineTitle', locale),
+    description: t('pillars.refineDesc', locale)
+  },
+  {
+    icon: '⚙️',
+    title: t('pillars.automateTitle', locale),
+    description: t('pillars.automateDesc', locale)
+  },
+  {
+    icon: '🚀',
+    title: t('pillars.runTitle', locale),
+    description: t('pillars.runDesc', locale)
+  }
+])
+</script>
+
+<template>
+  <section class="bg-black px-6 py-24">
+    <div class="mx-auto max-w-7xl">
+      <header class="mb-16 text-center">
+        <h2 class="text-3xl font-bold text-white md:text-4xl">
+          {{ t('pillars.heading', locale) }}
+        </h2>
+        <p class="mt-4 text-smoke-700">
+          {{ t('pillars.subheading', locale) }}
+        </p>
+      </header>
+
+      <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-5">
+        <article
+          v-for="pillar in pillars"
+          :key="pillar.title"
+          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"
+          >
+            {{ pillar.icon }}
+          </div>
+          <h3 class="mt-4 text-lg font-semibold text-white">
+            {{ pillar.title }}
+          </h3>
+          <p class="mt-2 text-sm text-smoke-700">
+            {{ pillar.description }}
+          </p>
+        </article>
+      </div>
+    </div>
+  </section>
+</template>

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/layouts/BaseLayout.astro

@@ -0,0 +1,121 @@
+---
+import { ClientRouter } from 'astro:transitions'
+import Analytics from '@vercel/analytics/astro'
+import '../styles/global.css'
+
+interface Props {
+  title: string
+  description?: string
+  ogImage?: string
+  noindex?: boolean
+}
+
+const {
+  title,
+  description = 'Comfy is the AI creation engine for visual professionals who demand control.',
+  ogImage = '/og-default.png',
+  noindex = false,
+} = Astro.props
+
+const siteBase = Astro.site ?? 'https://comfy.org'
+const canonicalURL = new URL(Astro.url.pathname, siteBase)
+const ogImageURL = new URL(ogImage, siteBase)
+const locale = Astro.currentLocale ?? 'en'
+const gtmId = 'GTM-NP9JM6K7'
+const gtmEnabled = import.meta.env.PROD
+
+const organizationJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'Organization',
+  name: 'Comfy Org',
+  url: 'https://comfy.org',
+  logo: 'https://comfy.org/favicon.svg',
+  sameAs: [
+    'https://github.com/comfyanonymous/ComfyUI',
+    'https://discord.gg/comfyorg',
+    'https://x.com/comaboratory',
+    'https://reddit.com/r/comfyui',
+    'https://linkedin.com/company/comfyorg',
+    'https://instagram.com/comfyorg',
+  ],
+}
+
+const websiteJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'WebSite',
+  name: 'Comfy',
+  url: 'https://comfy.org',
+}
+---
+
+<!doctype html>
+<html lang={locale}>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content={description} />
+    {noindex && <meta name="robots" content="noindex, nofollow" />}
+    <title>{title}</title>
+
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="canonical" href={canonicalURL.href} />
+    <link rel="preconnect" href="https://www.googletagmanager.com" />
+    <link rel="dns-prefetch" href="https://www.googletagmanager.com" />
+
+    <!-- Open Graph -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="og:image" content={ogImageURL.href} />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="og:url" content={canonicalURL.href} />
+    <meta property="og:locale" content={locale} />
+    <meta property="og:site_name" content="Comfy" />
+
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@comaboratory" />
+    <meta name="twitter:title" content={title} />
+    <meta name="twitter:description" content={description} />
+    <meta name="twitter:image" content={ogImageURL.href} />
+
+    <!-- Structured Data -->
+    <script type="application/ld+json" set:html={JSON.stringify(organizationJsonLd)} />
+    <script type="application/ld+json" set:html={JSON.stringify(websiteJsonLd)} />
+
+    <!-- Google Tag Manager -->
+    {gtmEnabled && (
+      <script is:inline define:vars={{ gtmId }}>
+        ;(function (w, d, s, l, i) {
+          w[l] = w[l] || []
+          w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' })
+          var f = d.getElementsByTagName(s)[0],
+            j = d.createElement(s),
+            dl = l != 'dataLayer' ? '&l=' + l : ''
+          j.async = true
+          j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl
+          f.parentNode.insertBefore(j, f)
+        })(window, document, 'script', 'dataLayer', gtmId)
+      </script>
+    )}
+
+    <ClientRouter />
+  </head>
+  <body class="bg-black text-white font-inter antialiased">
+    {gtmEnabled && (
+      <noscript>
+        <iframe
+          src={`https://www.googletagmanager.com/ns.html?id=${gtmId}`}
+          height="0"
+          width="0"
+          style="display:none;visibility:hidden"
+        ></iframe>
+      </noscript>
+    )}
+
+    <slot />
+
+    <Analytics />
+  </body>
+</html>

apps/website/src/pages/about.astro

@@ -0,0 +1,176 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+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' },
+]
+
+const collaborators = [
+  { name: 'Yogo', role: 'Collaborator' },
+  { name: 'Fill (Machine Delusions)', role: 'Collaborator' },
+  { name: 'Julien (MJM)', role: 'Collaborator' },
+]
+
+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.' },
+]
+
+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: 'Who is behind ComfyUI?',
+    a: 'ComfyUI was created by comfyanonymous and is maintained by a small, dedicated team of developers and community contributors.',
+  },
+  {
+    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: 'What are the future plans?',
+    a: 'We are focused on making ComfyUI the operating system for generative AI — improving performance, expanding model support, and building better tools for creators and developers.',
+  },
+]
+---
+
+<BaseLayout title="About — Comfy" description="Learn about the team and mission behind ComfyUI, the open-source generative AI platform.">
+  <SiteNav client:load />
+  <main>
+    <!-- Hero -->
+    <section class="px-6 pb-24 pt-40 text-center">
+      <h1 class="mx-auto max-w-4xl text-4xl font-bold leading-tight md:text-6xl">
+        Crafting the next frontier of visual and audio media
+      </h1>
+      <p class="mx-auto mt-6 max-w-2xl text-lg text-smoke-700">
+        An open-source community and company building the most powerful tools for generative AI creators.
+      </p>
+    </section>
+
+    <!-- Our Mission -->
+    <section class="bg-charcoal-800 px-6 py-24">
+      <div class="mx-auto max-w-3xl text-center">
+        <h2 class="text-sm font-semibold uppercase tracking-widest text-brand-yellow">Our Mission</h2>
+        <p class="mt-6 text-3xl font-bold md:text-4xl">
+          We want to build the operating system for Gen 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.
+        </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>
+        <div class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {projects.map((project) => (
+            <div class="rounded-xl border border-white/10 bg-charcoal-600 p-6">
+              <h3 class="text-lg font-semibold">{project.name}</h3>
+              <p class="mt-2 text-sm text-smoke-700">{project.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+
+    <!-- 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>
+        <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.
+        </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>
+        <div class="mt-12 grid gap-6 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+          {team.map((member) => (
+            <div class="rounded-xl border border-white/10 p-5 text-center">
+              <div class="mx-auto h-16 w-16 rounded-full bg-charcoal-600" />
+              <h3 class="mt-4 font-semibold">{member.name}</h3>
+              <p class="mt-1 text-sm text-smoke-700">{member.role}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+
+    <!-- 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>
+        <div class="mt-8 flex flex-wrap items-center justify-center gap-8">
+          {collaborators.map((person) => (
+            <div class="text-center">
+              <div class="mx-auto h-14 w-14 rounded-full bg-charcoal-600" />
+              <p class="mt-3 font-semibold">{person.name}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+
+    <!-- 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>
+        <div class="mt-12 space-y-10">
+          {faqs.map((faq) => (
+            <div>
+              <h3 class="text-lg font-semibold">{faq.q}</h3>
+              <p class="mt-2 text-smoke-700">{faq.a}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+
+    <!-- Join Our Team 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>
+      <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.
+      </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 />
+</BaseLayout>

apps/website/src/pages/careers.astro

@@ -0,0 +1,203 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+import SiteNav from '../components/SiteNav.vue'
+import SiteFooter from '../components/SiteFooter.vue'
+
+const departments = [
+  {
+    name: 'Engineering',
+    roles: [
+      { title: 'Design Engineer', id: 'abc787b9-ad85-421c-8218-debd23bea096' },
+      { title: 'Software Engineer, ComfyUI Desktop', id: 'ad2f76cb-a787-47d8-81c5-7e7f917747c0' },
+      { title: 'Product Manager, ComfyUI (open-source)', id: '12dbc26e-9f6d-49bf-83c6-130f7566d03c' },
+      { title: 'Senior Software Engineer, Frontend Generalist', id: 'c3e0584d-5490-491f-aae4-b5922ef63fd2' },
+      { title: 'Software Engineer, Frontend Generalist', id: '99dc26c7-51ca-43cd-a1ba-7d475a0f4a40' },
+      { title: 'Tech Lead Manager, Frontend', id: 'a0665088-3314-457a-aa7b-12ca5c3eb261' },
+      { title: 'Senior Software Engineer, Comfy Cloud', id: '27cdf4ce-69a4-44da-b0ec-d54875fd14a1' },
+      { title: 'Senior Applied AI/ML Engineer', id: '5cc4d0bc-97b0-463b-8466-3ec1d07f6ac0' },
+      { title: 'Senior Engineer, Backend Generalist', id: '732f8b39-076d-4847-afe3-f54d4451607e' },
+      { title: 'Software Engineer, Core ComfyUI Contributor', id: '7d4062d6-d500-445a-9a5f-014971af259f' },
+    ],
+  },
+  {
+    name: 'Design',
+    roles: [
+      { title: 'Graphic Designer', id: '49fa0b07-3fa1-4a3a-b2c6-d2cc684ad63f' },
+      { title: 'Creative Artist', id: '19ba10aa-4961-45e8-8473-66a8a7a8079d' },
+      { title: 'Senior Product Designer', id: 'b2e864c6-4754-4e04-8f46-1022baa103c3' },
+      { title: 'Freelance Motion Designer', id: 'a7ccc2b4-4d9d-4e04-b39c-28a711995b5b' },
+    ],
+  },
+  {
+    name: 'Marketing',
+    roles: [
+      { title: 'Partnership & Events Marketing Manager', id: '89d3ff75-2055-4e92-9c69-81feff55627c' },
+      { title: 'Lifecycle Growth Marketer', id: 'be74d210-3b50-408c-9f61-8fee8833ce64' },
+      { title: 'Social Media Manager', id: '28dea965-662b-4786-b024-c9a1b6bc1f23' },
+    ],
+  },
+  {
+    name: 'BizOps/Growth',
+    roles: [
+      { title: 'Founding Account Executive', id: '061ff83a-fe18-40f7-a5c4-4ce7da7086a6' },
+      { title: 'Senior Technical Recruiter', id: 'd5008532-c45d-46e6-ba2c-20489d364362' },
+    ],
+  },
+]
+
+const whyJoinUs = [
+  'You want to build tools that empower others to create.',
+  "You like working on foundational tech that's already powering real-world videos, images, music, and apps.",
+  'You care about open, free alternatives to closed AI platforms.',
+  'You believe artists, hackers, and solo builders should have real control over their tools.',
+  'You want to work in a small, sharp, no-BS team that moves fast and ships often.',
+]
+
+const notAFit = [
+  "You need everything planned out. We're figuring things out as we go and changing direction fast. If uncertainty stresses you out, you probably won't have fun here.",
+  'You see yourself as just a coder/[insert job title]. Around here, everyone does a bit of everything — talking to users, writing docs, whatever needs to get done. We need people who jump in wherever they can help.',
+  "You need well-defined processes. We're building something revolutionary, which means making up the playbook. If you need clear structures, this might drive you nuts.",
+  "You like having a manager checking in on you. We trust people to own their work end-to-end. When you see something broken, you fix it — no permission needed.",
+  "You prefer waiting until you have all the facts. We often have to make calls with incomplete info and adjust as we learn more. Analysis paralysis doesn't work here.",
+  "You bring a huge ego to the table. We're all about pushing boundaries and solving hard problems, not individual heroics. If you can't take direct feedback or learn from mistakes, this isn't your spot.",
+]
+
+const questions = [
+  'What is the team culture?',
+  'What kind of background do I need to have to apply?',
+  'How do I apply?',
+  'What does the hiring process look like?',
+  'In-person vs remote?',
+  'How can I increase my chances of getting the job?',
+  'What if I need visa sponsorship to work in the US?',
+  'Can I get feedback for my resume and interview?',
+]
+---
+
+<BaseLayout
+  title="Careers — Comfy"
+  description="Join the team building the operating system for generative AI. Open roles in engineering, design, marketing, and more."
+>
+  <SiteNav client:load />
+  <main>
+    <!-- Hero -->
+    <section class="px-6 pb-24 pt-40">
+      <div class="mx-auto max-w-4xl text-center">
+        <h1 class="text-4xl font-bold tracking-tight md:text-6xl">
+          Building an &ldquo;operating system&rdquo;
+          <br />
+          <span class="text-brand-yellow">for Gen AI</span>
+        </h1>
+        <p class="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-smoke-700">
+          We're the world's leading <strong class="text-white">visual AI platform</strong> — an open, modular system
+          where anyone can build, customize, and automate AI workflows with precision and full control. Unlike most AI
+          tools that hide their inner workings behind a simple prompt box, we give professionals the
+          <strong class="text-white">freedom to design their own pipelines</strong> — connecting models, tools, and
+          logic visually like building blocks.
+        </p>
+        <p class="mx-auto mt-4 max-w-2xl text-lg leading-relaxed text-smoke-700">
+          ComfyUI is used by <strong class="text-white">artists, filmmakers, video game creators, designers, researchers, VFX houses</strong>,
+          and among others, <strong class="text-white">teams at OpenAI, Netflix, Amazon Studios, Ubisoft, EA, and Tencent</strong>
+          — all who want to go beyond presets and truly shape how AI creates.
+        </p>
+      </div>
+    </section>
+
+    <!-- Job Listings -->
+    <section class="border-t border-white/10 px-6 py-24">
+      <div class="mx-auto max-w-4xl">
+        {departments.map((dept) => (
+          <div class="mb-16 last:mb-0">
+            <h2 class="mb-6 text-sm font-semibold uppercase tracking-widest text-brand-yellow">
+              {dept.name}
+            </h2>
+            <div class="space-y-3">
+              {dept.roles.map((role) => (
+                <a
+                  href={`https://jobs.ashbyhq.com/comfy-org/${role.id}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="flex items-center justify-between rounded-lg border border-white/10 px-5 py-4 transition-colors hover:border-brand-yellow"
+                >
+                  <span class="font-medium">{role.title}</span>
+                  <span class="text-sm text-smoke-700">→</span>
+                </a>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+
+    <!-- Why Join Us / When It's Not a Fit — 2-column layout -->
+    <section class="border-t border-white/10 bg-charcoal-800 px-6 py-24">
+      <div class="mx-auto grid max-w-5xl gap-16 md:grid-cols-2">
+        <!-- Why Join Us -->
+        <div>
+          <h2 class="mb-8 text-sm font-semibold uppercase tracking-widest text-brand-yellow">
+            Why Join Us?
+          </h2>
+          <ul class="space-y-4">
+            {whyJoinUs.map((item) => (
+              <li class="flex gap-3 text-smoke-700">
+                <span class="mt-1 text-brand-yellow">•</span>
+                <span>{item}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <!-- When It's Not a Fit -->
+        <div>
+          <h2 class="mb-4 text-sm font-semibold uppercase tracking-widest text-white">
+            When It&rsquo;s Not a Fit
+          </h2>
+          <p class="mb-8 text-sm text-smoke-700">
+            Working at Comfy Org isn&rsquo;t for everyone, and that&rsquo;s totally fine. You might want to look
+            elsewhere if:
+          </p>
+          <ul class="space-y-4">
+            {notAFit.map((item) => (
+              <li class="flex gap-3 text-sm text-smoke-700">
+                <span class="mt-0.5 text-white/40">—</span>
+                <span>{item}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <!-- Q&A -->
+    <section class="border-t border-white/10 px-6 py-24">
+      <div class="mx-auto max-w-4xl">
+        <h2 class="mb-10 text-sm font-semibold uppercase tracking-widest text-brand-yellow">
+          Q&amp;A
+        </h2>
+        <ul class="space-y-4">
+          {questions.map((q) => (
+            <li class="rounded-lg border border-white/10 px-5 py-4 font-medium">
+              {q}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+
+    <!-- Contact CTA -->
+    <section class="border-t border-white/10 px-6 py-24">
+      <div class="mx-auto max-w-4xl text-center">
+        <h2 class="text-3xl font-bold">Questions? Reach out!</h2>
+        <a
+          href="https://support.comfy.org/"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="mt-8 inline-block rounded-full bg-brand-yellow px-8 py-3 text-sm font-semibold text-black transition-opacity hover:opacity-90"
+        >
+          Contact us
+        </a>
+      </div>
+    </section>
+  </main>
+  <SiteFooter />
+</BaseLayout>

apps/website/src/pages/download.astro

@@ -0,0 +1,80 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+import SiteNav from '../components/SiteNav.vue'
+import SiteFooter from '../components/SiteFooter.vue'
+
+const cards = [
+  {
+    icon: '🪟',
+    title: 'Windows',
+    description: 'Requires NVIDIA or AMD graphics card',
+    cta: 'Download for Windows',
+    href: 'https://download.comfy.org/windows/nsis/x64',
+    outlined: false,
+  },
+  {
+    icon: '🍎',
+    title: 'Mac',
+    description: 'Requires Apple Silicon (M-series)',
+    cta: 'Download for Mac',
+    href: 'https://download.comfy.org/mac/dmg/arm64',
+    outlined: false,
+  },
+  {
+    icon: '🐙',
+    title: 'GitHub',
+    description: 'Build from source on any platform',
+    cta: 'Install from GitHub',
+    href: 'https://github.com/comfyanonymous/ComfyUI',
+    outlined: true,
+  },
+]
+---
+
+<BaseLayout title="Download — Comfy">
+  <SiteNav client:load />
+  <main class="mx-auto max-w-5xl px-6 py-32 text-center">
+    <h1 class="text-4xl font-bold text-white md:text-5xl">
+      Download ComfyUI
+    </h1>
+    <p class="mt-4 text-lg text-smoke-700">
+      Experience AI creation locally
+    </p>
+
+    <div class="mt-16 grid grid-cols-1 gap-6 md:grid-cols-3">
+      {cards.map((card) => (
+        <a
+          href={card.href}
+          class="flex flex-col items-center rounded-xl border border-white/10 bg-charcoal-600 p-8 text-center transition-colors hover:border-brand-yellow"
+        >
+          <span class="text-4xl" aria-hidden="true">{card.icon}</span>
+          <h2 class="mt-4 text-xl font-semibold text-white">{card.title}</h2>
+          <p class="mt-2 text-sm text-smoke-700">{card.description}</p>
+          <span
+            class:list={[
+              'mt-6 inline-block rounded-full px-6 py-2 text-sm font-semibold transition-opacity hover:opacity-90',
+              card.outlined
+                ? 'border border-brand-yellow text-brand-yellow'
+                : 'bg-brand-yellow text-black',
+            ]}
+          >
+            {card.cta}
+          </span>
+        </a>
+      ))}
+    </div>
+
+    <div class="mt-20 rounded-xl border border-white/10 bg-charcoal-800 p-8">
+      <p class="text-lg text-smoke-700">
+        No GPU?{' '}
+        <a
+          href="https://app.comfy.org"
+          class="font-semibold text-brand-yellow hover:underline"
+        >
+          Try Comfy Cloud →
+        </a>
+      </p>
+    </div>
+  </main>
+  <SiteFooter />
+</BaseLayout>

apps/website/src/pages/gallery.astro

@@ -0,0 +1,43 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+import SiteNav from '../components/SiteNav.vue'
+import SiteFooter from '../components/SiteFooter.vue'
+---
+
+<BaseLayout title="Gallery — Comfy">
+  <SiteNav client:load />
+  <main class="bg-black text-white">
+    <!-- Hero -->
+    <section class="mx-auto max-w-5xl px-6 pb-16 pt-32 text-center">
+      <h1 class="text-4xl font-bold tracking-tight sm:text-5xl">
+        Built, Tweaked, and <span class="text-brand-yellow">Dreamed</span> in ComfyUI
+      </h1>
+      <p class="mx-auto mt-4 max-w-2xl text-lg text-smoke-700">
+        A small glimpse of what's being created with ComfyUI by the community.
+      </p>
+    </section>
+
+    <!-- Placeholder Grid -->
+    <section class="mx-auto max-w-6xl px-6 pb-24">
+      <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3">
+        {Array.from({ length: 6 }).map(() => (
+          <div class="flex aspect-video items-center justify-center rounded-xl border border-white/10 bg-charcoal-600">
+            <p class="text-sm text-smoke-700">Community showcase coming soon</p>
+          </div>
+        ))}
+      </div>
+    </section>
+
+    <!-- CTA -->
+    <section class="mx-auto max-w-3xl px-6 pb-32 text-center">
+      <h2 class="text-2xl font-semibold">Have something cool to share?</h2>
+      <a
+        href="https://support.comfy.org/"
+        class="mt-6 inline-block rounded-full bg-brand-yellow px-8 py-3 font-medium text-black transition hover:opacity-90"
+      >
+        Get in Touch
+      </a>
+    </section>
+  </main>
+  <SiteFooter />
+</BaseLayout>

apps/website/src/pages/index.astro

@@ -0,0 +1,34 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+import SiteNav from '../components/SiteNav.vue'
+import HeroSection from '../components/HeroSection.vue'
+import SocialProofBar from '../components/SocialProofBar.vue'
+import ProductShowcase from '../components/ProductShowcase.vue'
+import ValuePillars from '../components/ValuePillars.vue'
+import UseCaseSection from '../components/UseCaseSection.vue'
+import CaseStudySpotlight from '../components/CaseStudySpotlight.vue'
+import TestimonialsSection from '../components/TestimonialsSection.vue'
+import GetStartedSection from '../components/GetStartedSection.vue'
+import CTASection from '../components/CTASection.vue'
+import ManifestoSection from '../components/ManifestoSection.vue'
+import AcademySection from '../components/AcademySection.vue'
+import SiteFooter from '../components/SiteFooter.vue'
+---
+
+<BaseLayout title="Comfy — Professional Control of Visual AI">
+  <SiteNav client:load />
+  <main>
+    <HeroSection />
+    <SocialProofBar />
+    <ProductShowcase />
+    <ValuePillars />
+    <UseCaseSection client:visible />
+    <CaseStudySpotlight />
+    <TestimonialsSection client:visible />
+    <GetStartedSection />
+    <CTASection />
+    <ManifestoSection />
+    <AcademySection />
+  </main>
+  <SiteFooter />
+</BaseLayout>

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

@@ -0,0 +1,273 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+import SiteNav from '../components/SiteNav.vue'
+import SiteFooter from '../components/SiteFooter.vue'
+---
+
+<BaseLayout
+  title="Privacy Policy — Comfy"
+  description="Comfy privacy policy. Learn how we collect, use, and protect your personal information."
+  noindex
+>
+  <SiteNav client:load />
+  <main class="mx-auto max-w-3xl px-6 py-24">
+    <h1 class="text-3xl font-bold text-white">Privacy Policy</h1>
+    <p class="mt-2 text-sm text-smoke-500">Effective date: April 18, 2025</p>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">Introduction</h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        Your privacy is important to us. This Privacy Policy explains how Comfy
+        Org, Inc. ("Comfy," "we," "us," or "our") collects, uses, shares, and
+        protects your personal information when you use our website at comfy.org
+        and related services.
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        Information We Collect
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        We may collect the following personal information when you interact with
+        our services:
+      </p>
+      <ul class="mt-3 list-disc space-y-2 pl-5 text-sm text-smoke-500">
+        <li>Name</li>
+        <li>Email address</li>
+      </ul>
+      <p class="mt-3 text-sm leading-relaxed text-smoke-500">
+        We collect this information when you voluntarily provide it to us, such
+        as when you create an account, subscribe to communications, or contact
+        support.
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        Legitimate Reasons for Processing Your Personal Information
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        We only collect and use your personal information when we have a
+        legitimate reason for doing so. We process personal information to
+        provide, improve, and administer our services; to communicate with you;
+        for security and fraud prevention; and to comply with applicable law.
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        How Long We Keep Your Information
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        We retain your personal information only for as long as necessary to
+        fulfill the purposes outlined in this policy, unless a longer retention
+        period is required or permitted by law. When we no longer need your
+        information, we will securely delete or anonymize it.
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        Children's Privacy
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        We do not knowingly collect personal information from children under the
+        age of 13. If we learn that we have collected personal information from a
+        child under 13, we will take steps to delete such information as quickly
+        as possible. If you believe we have collected information from a child
+        under 13, please contact us at
+        <a href="mailto:support@comfy.org" class="text-white underline">
+          support@comfy.org</a
+        >.
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        Disclosure of Personal Information to Third Parties
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        We may disclose personal information to third-party service providers
+        that assist us in operating our services. This includes payment
+        processors such as Stripe, cloud hosting providers, and analytics
+        services. We require these parties to handle your data in accordance with
+        this policy and applicable law.
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        Your Rights and Controlling Your Personal Information
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        Depending on your location, you may have the following rights regarding
+        your personal information:
+      </p>
+      <ul class="mt-3 list-disc space-y-2 pl-5 text-sm text-smoke-500">
+        <li>The right to access the personal information we hold about you.</li>
+        <li>
+          The right to request correction of inaccurate personal information.
+        </li>
+        <li>The right to request deletion of your personal information.</li>
+        <li>The right to object to or restrict processing.</li>
+        <li>The right to data portability.</li>
+        <li>The right to withdraw consent at any time.</li>
+      </ul>
+      <p class="mt-3 text-sm leading-relaxed text-smoke-500">
+        To exercise any of these rights, please contact us at
+        <a href="mailto:support@comfy.org" class="text-white underline">
+          support@comfy.org</a
+        >.
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        Limits of Our Policy
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        Our website may link to external sites that are not operated by us.
+        Please be aware that we have no control over the content and practices of
+        these sites and cannot accept responsibility for their respective privacy
+        policies.
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        Changes to This Policy
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        We may update this Privacy Policy from time to time to reflect changes in
+        our practices or for other operational, legal, or regulatory reasons. We
+        will notify you of any material changes by posting the updated policy on
+        our website with a revised effective date.
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        U.S. State Privacy Compliance
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        We comply with privacy laws in the following U.S. states, where
+        applicable:
+      </p>
+      <ul class="mt-3 list-disc space-y-2 pl-5 text-sm text-smoke-500">
+        <li>California (CCPA / CPRA)</li>
+        <li>Colorado (CPA)</li>
+        <li>Delaware (DPDPA)</li>
+        <li>Florida (FDBR)</li>
+        <li>Virginia (VCDPA)</li>
+        <li>Utah (UCPA)</li>
+      </ul>
+      <p class="mt-3 text-sm leading-relaxed text-smoke-500">
+        Residents of these states may have additional rights, including the right
+        to know what personal information is collected, the right to delete
+        personal information, and the right to opt out of the sale of personal
+        information. To exercise these rights, contact us at
+        <a href="mailto:support@comfy.org" class="text-white underline">
+          support@comfy.org</a
+        >.
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">Do Not Track</h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        Some browsers include a "Do Not Track" (DNT) feature that signals to
+        websites that you do not wish to be tracked. There is currently no
+        uniform standard for how companies should respond to DNT signals. At this
+        time, we do not respond to DNT signals.
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">CCPA / CPPA</h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        Under the California Consumer Privacy Act (CCPA) and the California
+        Privacy Protection Agency (CPPA) regulations, California residents have
+        the right to know what personal information we collect, request deletion
+        of their data, and opt out of the sale of their personal information. We
+        do not sell personal information. To make a request, contact us at
+        <a href="mailto:support@comfy.org" class="text-white underline">
+          support@comfy.org</a
+        >.
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        GDPR — European Economic Area
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        If you are located in the European Economic Area (EEA), the General Data
+        Protection Regulation (GDPR) grants you certain rights regarding your
+        personal data, including the right to access, rectify, erase, restrict
+        processing, data portability, and to object to processing. Our legal
+        bases for processing include consent, contract performance, and
+        legitimate interests. To exercise your GDPR rights, contact us at
+        <a href="mailto:support@comfy.org" class="text-white underline">
+          support@comfy.org</a
+        >.
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">UK GDPR</h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        If you are located in the United Kingdom, the UK General Data Protection
+        Regulation (UK GDPR) provides you with similar rights to those under the
+        EU GDPR, including the right to access, rectify, erase, and port your
+        data. To exercise your rights under the UK GDPR, please contact us at
+        <a href="mailto:support@comfy.org" class="text-white underline">
+          support@comfy.org</a
+        >.
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        Australian Privacy
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        If you are located in Australia, the Australian Privacy Principles (APPs)
+        under the Privacy Act 1988 apply to our handling of your personal
+        information. You have the right to request access to and correction of
+        your personal information. If you believe we have breached the APPs, you
+        may lodge a complaint with us or with the Office of the Australian
+        Information Commissioner (OAIC).
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">Contact Us</h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        If you have any questions or concerns about this Privacy Policy or our
+        data practices, please contact us at:
+      </p>
+      <p class="mt-3 text-sm leading-relaxed text-smoke-500">
+        <a href="mailto:support@comfy.org" class="text-white underline">
+          support@comfy.org
+        </a>
+      </p>
+    </section>
+  </main>
+  <SiteFooter />
+</BaseLayout>

apps/website/src/pages/terms-of-service.astro

@@ -0,0 +1,304 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+import SiteNav from '../components/SiteNav.vue'
+import SiteFooter from '../components/SiteFooter.vue'
+---
+
+<BaseLayout
+  title="Terms of Service — Comfy"
+  description="Terms of Service for ComfyUI and related Comfy services."
+  noindex
+>
+  <SiteNav client:load />
+  <main class="mx-auto max-w-3xl px-6 py-24 sm:py-32">
+    <header class="mb-16">
+      <h1 class="text-3xl font-bold text-white">Terms of Service</h1>
+      <p class="mt-2 text-lg text-smoke-700">for ComfyUI</p>
+      <p class="mt-4 text-sm text-smoke-700">
+        Effective Date: March 1, 2025 · Last Updated: March 1, 2025
+      </p>
+    </header>
+
+    <section class="space-y-12">
+      <!-- Intro -->
+      <div>
+        <p class="text-sm leading-relaxed text-smoke-700">
+          Welcome to ComfyUI and the services provided by Comfy Org, Inc.
+          ("Comfy", "we", "us", or "our"). By accessing or using ComfyUI, the
+          Comfy Registry, comfy.org, or any of our related services
+          (collectively, the "Services"), you agree to be bound by these Terms of
+          Service ("Terms"). If you do not agree to these Terms, do not use the
+          Services.
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 1. Definitions -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">1. Definitions</h2>
+        <ul class="mt-4 list-disc space-y-2 pl-5 text-sm leading-relaxed text-smoke-700">
+          <li>
+            <strong class="text-white">"ComfyUI"</strong> means the open-source
+            node-based visual programming interface for AI-powered content
+            generation.
+          </li>
+          <li>
+            <strong class="text-white">"Services"</strong> means ComfyUI, the
+            Comfy Registry, comfy.org website, APIs, documentation, and any
+            related services operated by Comfy.
+          </li>
+          <li>
+            <strong class="text-white">"User Content"</strong> means any
+            content, workflows, custom nodes, models, or other materials you
+            create, upload, or share through the Services.
+          </li>
+          <li>
+            <strong class="text-white">"Registry"</strong> means the Comfy
+            Registry, a package repository for distributing custom nodes and
+            extensions.
+          </li>
+        </ul>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 2. ComfyUI Software License -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">
+          2. ComfyUI Software License
+        </h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          ComfyUI is released under the GNU General Public License v3.0 (GPLv3).
+          Your use of the ComfyUI software is governed by the GPLv3 license
+          terms. These Terms of Service govern your use of the hosted Services,
+          website, and Registry — not the open-source software itself.
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 3. Using the Services -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">3. Using the Services</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          You may use the Services only in compliance with these Terms and all
+          applicable laws. The Services are intended for users who are at least
+          18 years of age. By using the Services, you represent and warrant that
+          you meet this age requirement and have the legal capacity to enter into
+          these Terms.
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 4. Your Responsibilities -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">
+          4. Your Responsibilities
+        </h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          You are responsible for your use of the Services and any content you
+          create, share, or distribute through them. You agree to use the
+          Services in a manner that is lawful, respectful, and consistent with
+          these Terms. You are solely responsible for maintaining the security of
+          your account credentials.
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 5. Use Restrictions -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">5. Use Restrictions</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          You agree not to misuse the Services. This includes, but is not
+          limited to:
+        </p>
+        <ul class="mt-4 list-disc space-y-2 pl-5 text-sm leading-relaxed text-smoke-700">
+          <li>
+            Attempting to gain unauthorized access to any part of the Services
+          </li>
+          <li>
+            Using the Services to distribute malware, viruses, or harmful code
+          </li>
+          <li>
+            Interfering with or disrupting the integrity or performance of the
+            Services
+          </li>
+          <li>
+            Scraping, crawling, or using automated means to access the Services
+            without permission
+          </li>
+          <li>
+            Publishing custom nodes or workflows that contain malicious code or
+            violate third-party rights
+          </li>
+        </ul>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 6. Accounts and User Information -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">
+          6. Accounts and User Information
+        </h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          Certain features of the Services may require you to create an account.
+          You agree to provide accurate and complete information when creating
+          your account and to keep this information up to date. You are
+          responsible for all activity that occurs under your account. We reserve
+          the right to suspend or terminate accounts that violate these Terms.
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 7. Intellectual Property Rights -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">
+          7. Intellectual Property Rights
+        </h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          The Services, excluding open-source components, are owned by Comfy and
+          are protected by intellectual property laws. The Comfy name, logo, and
+          branding are trademarks of Comfy Org, Inc. You retain ownership of any
+          User Content you create. By submitting User Content to the Services,
+          you grant Comfy a non-exclusive, worldwide, royalty-free license to
+          host, display, and distribute such content as necessary to operate the
+          Services.
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 8. Model and Workflow Distribution -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">
+          8. Model and Workflow Distribution
+        </h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          When you distribute models, workflows, or custom nodes through the
+          Registry or Services, you represent that you have the right to
+          distribute such content and that it does not infringe any third-party
+          rights. You are responsible for specifying an appropriate license for
+          any content you distribute. Comfy does not claim ownership of content
+          distributed through the Registry.
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 9. Fees and Payment -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">9. Fees and Payment</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          Certain Services may be offered for a fee. If you choose to use paid
+          features, you agree to pay all applicable fees as described at the time
+          of purchase. Fees are non-refundable except as required by law or as
+          expressly stated in these Terms. Comfy reserves the right to change
+          pricing with reasonable notice.
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 10. Term and Termination -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">
+          10. Term and Termination
+        </h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          These Terms remain in effect while you use the Services. You may stop
+          using the Services at any time. Comfy may suspend or terminate your
+          access to the Services at any time, with or without cause and with or
+          without notice. Upon termination, your right to use the Services will
+          immediately cease. Sections that by their nature should survive
+          termination will continue to apply.
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 11. Disclaimer of Warranties -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">
+          11. Disclaimer of Warranties
+        </h2>
+        <p class="mt-4 text-sm uppercase leading-relaxed text-smoke-700">
+          The Services are provided "as is" and "as available" without warranties
+          of any kind, either express or implied, including but not limited to
+          implied warranties of merchantability, fitness for a particular
+          purpose, and non-infringement. Comfy does not warrant that the Services
+          will be uninterrupted, error-free, or secure.
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 12. Limitation of Liability -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">
+          12. Limitation of Liability
+        </h2>
+        <p class="mt-4 text-sm uppercase leading-relaxed text-smoke-700">
+          To the maximum extent permitted by law, Comfy shall not be liable for
+          any indirect, incidental, special, consequential, or punitive damages,
+          or any loss of profits or revenues, whether incurred directly or
+          indirectly, or any loss of data, use, goodwill, or other intangible
+          losses resulting from your use of the Services. Comfy's total liability
+          shall not exceed the amounts paid by you to Comfy in the twelve months
+          preceding the claim.
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 13. Indemnification -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">13. Indemnification</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          You agree to indemnify, defend, and hold harmless Comfy, its officers,
+          directors, employees, and agents from and against any claims,
+          liabilities, damages, losses, and expenses arising out of or in any
+          way connected with your access to or use of the Services, your User
+          Content, or your violation of these Terms.
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 14. Governing Law and Dispute Resolution -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">
+          14. Governing Law and Dispute Resolution
+        </h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          These Terms shall be governed by and construed in accordance with the
+          laws of the State of Delaware, without regard to its conflict of laws
+          principles. Any disputes arising under these Terms shall be resolved
+          through binding arbitration in accordance with the rules of the
+          American Arbitration Association, except that either party may seek
+          injunctive relief in any court of competent jurisdiction.
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 15. Miscellaneous -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">15. Miscellaneous</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          These Terms constitute the entire agreement between you and Comfy
+          regarding the Services. If any provision of these Terms is found to be
+          unenforceable, the remaining provisions will continue in effect. Our
+          failure to enforce any right or provision of these Terms will not be
+          considered a waiver. We may assign our rights under these Terms. You
+          may not assign your rights without our prior written consent.
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- Contact -->
+      <div class="border-t border-white/10 pt-12">
+        <h2 class="text-xl font-semibold text-white">Contact Us</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          If you have questions about these Terms, please contact us at
+          <a
+            href="mailto:legal@comfy.org"
+            class="text-white underline transition-colors hover:text-smoke-700"
+          >
+            legal@comfy.org
+          </a>.
+        </p>
+      </div>
+    </section>
+  </main>
+  <SiteFooter />
+</BaseLayout>

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

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

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

@@ -0,0 +1,200 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import SiteNav from '../../components/SiteNav.vue'
+import SiteFooter from '../../components/SiteFooter.vue'
+
+const departments = [
+  {
+    name: '工程',
+    roles: [
+      { title: 'Design Engineer', id: 'abc787b9-ad85-421c-8218-debd23bea096' },
+      { title: 'Software Engineer, ComfyUI Desktop', id: 'ad2f76cb-a787-47d8-81c5-7e7f917747c0' },
+      { title: 'Product Manager, ComfyUI (open-source)', id: '12dbc26e-9f6d-49bf-83c6-130f7566d03c' },
+      { title: 'Senior Software Engineer, Frontend Generalist', id: 'c3e0584d-5490-491f-aae4-b5922ef63fd2' },
+      { title: 'Software Engineer, Frontend Generalist', id: '99dc26c7-51ca-43cd-a1ba-7d475a0f4a40' },
+      { title: 'Tech Lead Manager, Frontend', id: 'a0665088-3314-457a-aa7b-12ca5c3eb261' },
+      { title: 'Senior Software Engineer, Comfy Cloud', id: '27cdf4ce-69a4-44da-b0ec-d54875fd14a1' },
+      { title: 'Senior Applied AI/ML Engineer', id: '5cc4d0bc-97b0-463b-8466-3ec1d07f6ac0' },
+      { title: 'Senior Engineer, Backend Generalist', id: '732f8b39-076d-4847-afe3-f54d4451607e' },
+      { title: 'Software Engineer, Core ComfyUI Contributor', id: '7d4062d6-d500-445a-9a5f-014971af259f' },
+    ],
+  },
+  {
+    name: '设计',
+    roles: [
+      { title: 'Graphic Designer', id: '49fa0b07-3fa1-4a3a-b2c6-d2cc684ad63f' },
+      { title: 'Creative Artist', id: '19ba10aa-4961-45e8-8473-66a8a7a8079d' },
+      { title: 'Senior Product Designer', id: 'b2e864c6-4754-4e04-8f46-1022baa103c3' },
+      { title: 'Freelance Motion Designer', id: 'a7ccc2b4-4d9d-4e04-b39c-28a711995b5b' },
+    ],
+  },
+  {
+    name: '市场营销',
+    roles: [
+      { title: 'Partnership & Events Marketing Manager', id: '89d3ff75-2055-4e92-9c69-81feff55627c' },
+      { title: 'Lifecycle Growth Marketer', id: 'be74d210-3b50-408c-9f61-8fee8833ce64' },
+      { title: 'Social Media Manager', id: '28dea965-662b-4786-b024-c9a1b6bc1f23' },
+    ],
+  },
+  {
+    name: '商务运营/增长',
+    roles: [
+      { title: 'Founding Account Executive', id: '061ff83a-fe18-40f7-a5c4-4ce7da7086a6' },
+      { title: 'Senior Technical Recruiter', id: 'd5008532-c45d-46e6-ba2c-20489d364362' },
+    ],
+  },
+]
+
+const whyJoinUs = [
+  '你想打造赋能他人创作的工具。',
+  '你喜欢从事已经在驱动真实世界视频、图像、音乐和应用的基础技术。',
+  '你关心开放、免费的替代方案，而非封闭的 AI 平台。',
+  '你相信艺术家、黑客和独立创作者应该真正掌控自己的工具。',
+  '你想在一个精干、务实、快速迭代的小团队中工作。',
+]
+
+const notAFit = [
+  '你需要一切都计划好。我们边做边摸索，方向变化很快。如果不确定性让你焦虑，你可能不会喜欢这里。',
+  '你只把自己定位为程序员/[某个职位]。在这里，每个人都会做各种事情——和用户交流、写文档，什么需要做就做什么。我们需要主动补位的人。',
+  '你需要完善的流程。我们在做一件革命性的事情，这意味着要自己写规则。如果你需要清晰的结构，这可能会让你抓狂。',
+  '你喜欢经理来检查你的工作。我们信任每个人端到端地负责自己的工作。看到问题就修复——不需要请示。',
+  '你倾向于等到掌握所有信息再行动。我们经常需要在信息不完整的情况下做决定，然后在过程中调整。分析瘫痪在这里行不通。',
+  '你有很大的自我。我们追求突破边界和解决难题，而不是个人英雄主义。如果你无法接受直接的反馈或从错误中学习，这里不适合你。',
+]
+
+const questions = [
+  '团队文化是什么样的？',
+  '我需要什么样的背景才能申请？',
+  '如何申请？',
+  '招聘流程是什么样的？',
+  '线下还是远程？',
+  '如何提高获得工作的机会？',
+  '如果我需要签证担保在美国工作怎么办？',
+  '我能获得简历和面试的反馈吗？',
+]
+---
+
+<BaseLayout
+  title="招聘 — Comfy"
+  description="加入构建生成式 AI 操作系统的团队。工程、设计、市场营销等岗位开放招聘中。"
+>
+  <SiteNav locale="zh-CN" client:load />
+  <main>
+    <!-- Hero -->
+    <section class="px-6 pb-24 pt-40">
+      <div class="mx-auto max-w-4xl text-center">
+        <h1 class="text-4xl font-bold tracking-tight md:text-6xl">
+          构建生成式 AI 的
+          <br />
+          <span class="text-brand-yellow">&ldquo;操作系统&rdquo;</span>
+        </h1>
+        <p class="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-smoke-700">
+          我们是全球领先的<strong class="text-white">视觉 AI 平台</strong>——一个开放、模块化的系统，任何人都可以精确地构建、
+          定制和自动化 AI 工作流，并拥有完全的控制权。与大多数将内部机制隐藏在简单提示框后面的 AI 工具不同，我们赋予专业人士
+          <strong class="text-white">设计自己管线的自由</strong>——像积木一样将模型、工具和逻辑可视化地连接起来。
+        </p>
+        <p class="mx-auto mt-4 max-w-2xl text-lg leading-relaxed text-smoke-700">
+          ComfyUI 被<strong class="text-white">艺术家、电影人、游戏创作者、设计师、研究人员、视效公司</strong>等使用，
+          其中包括 <strong class="text-white">OpenAI、Netflix、Amazon Studios、育碧、EA 和腾讯</strong>的团队——他们都想超越预设，
+          真正塑造 AI 的创作方式。
+        </p>
+      </div>
+    </section>
+
+    <!-- Job Listings -->
+    <section class="border-t border-white/10 px-6 py-24">
+      <div class="mx-auto max-w-4xl">
+        {departments.map((dept) => (
+          <div class="mb-16 last:mb-0">
+            <h2 class="mb-6 text-sm font-semibold uppercase tracking-widest text-brand-yellow">
+              {dept.name}
+            </h2>
+            <div class="space-y-3">
+              {dept.roles.map((role) => (
+                <a
+                  href={`https://jobs.ashbyhq.com/comfy-org/${role.id}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="flex items-center justify-between rounded-lg border border-white/10 px-5 py-4 transition-colors hover:border-brand-yellow"
+                >
+                  <span class="font-medium">{role.title}</span>
+                  <span class="text-sm text-smoke-700">→</span>
+                </a>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+
+    <!-- Why Join Us / When It's Not a Fit — 2-column layout -->
+    <section class="border-t border-white/10 bg-charcoal-800 px-6 py-24">
+      <div class="mx-auto grid max-w-5xl gap-16 md:grid-cols-2">
+        <!-- Why Join Us -->
+        <div>
+          <h2 class="mb-8 text-sm font-semibold uppercase tracking-widest text-brand-yellow">
+            为什么加入我们？
+          </h2>
+          <ul class="space-y-4">
+            {whyJoinUs.map((item) => (
+              <li class="flex gap-3 text-smoke-700">
+                <span class="mt-1 text-brand-yellow">•</span>
+                <span>{item}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <!-- When It's Not a Fit -->
+        <div>
+          <h2 class="mb-4 text-sm font-semibold uppercase tracking-widest text-white">
+            不太适合的情况
+          </h2>
+          <p class="mb-8 text-sm text-smoke-700">
+            在 Comfy Org 工作并不适合所有人，这完全没问题。如果以下情况符合你，你可能需要考虑其他机会：
+          </p>
+          <ul class="space-y-4">
+            {notAFit.map((item) => (
+              <li class="flex gap-3 text-sm text-smoke-700">
+                <span class="mt-0.5 text-white/40">—</span>
+                <span>{item}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <!-- Q&A -->
+    <section class="border-t border-white/10 px-6 py-24">
+      <div class="mx-auto max-w-4xl">
+        <h2 class="mb-10 text-sm font-semibold uppercase tracking-widest text-brand-yellow">
+          常见问题
+        </h2>
+        <ul class="space-y-4">
+          {questions.map((q) => (
+            <li class="rounded-lg border border-white/10 px-5 py-4 font-medium">
+              {q}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+
+    <!-- Contact CTA -->
+    <section class="border-t border-white/10 px-6 py-24">
+      <div class="mx-auto max-w-4xl text-center">
+        <h2 class="text-3xl font-bold">有问题？联系我们！</h2>
+        <a
+          href="https://support.comfy.org/"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="mt-8 inline-block rounded-full bg-brand-yellow px-8 py-3 text-sm font-semibold text-black transition-opacity hover:opacity-90"
+        >
+          联系我们
+        </a>
+      </div>
+    </section>
+  </main>
+  <SiteFooter locale="zh-CN" />
+</BaseLayout>

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

@@ -0,0 +1,80 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import SiteNav from '../../components/SiteNav.vue'
+import SiteFooter from '../../components/SiteFooter.vue'
+
+const cards = [
+  {
+    icon: '🪟',
+    title: 'Windows',
+    description: '需要 NVIDIA 或 AMD 显卡',
+    cta: '下载 Windows 版',
+    href: 'https://download.comfy.org/windows/nsis/x64',
+    outlined: false,
+  },
+  {
+    icon: '🍎',
+    title: 'Mac',
+    description: '需要 Apple Silicon (M 系列)',
+    cta: '下载 Mac 版',
+    href: 'https://download.comfy.org/mac/dmg/arm64',
+    outlined: false,
+  },
+  {
+    icon: '🐙',
+    title: 'GitHub',
+    description: '在任何平台上从源码构建',
+    cta: '从 GitHub 安装',
+    href: 'https://github.com/comfyanonymous/ComfyUI',
+    outlined: true,
+  },
+]
+---
+
+<BaseLayout title="下载 — Comfy">
+  <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
+    </h1>
+    <p class="mt-4 text-lg text-smoke-700">
+      在本地体验 AI 创作
+    </p>
+
+    <div class="mt-16 grid grid-cols-1 gap-6 md:grid-cols-3">
+      {cards.map((card) => (
+        <a
+          href={card.href}
+          class="flex flex-col items-center rounded-xl border border-white/10 bg-charcoal-600 p-8 text-center transition-colors hover:border-brand-yellow"
+        >
+          <span class="text-4xl" aria-hidden="true">{card.icon}</span>
+          <h2 class="mt-4 text-xl font-semibold text-white">{card.title}</h2>
+          <p class="mt-2 text-sm text-smoke-700">{card.description}</p>
+          <span
+            class:list={[
+              'mt-6 inline-block rounded-full px-6 py-2 text-sm font-semibold transition-opacity hover:opacity-90',
+              card.outlined
+                ? 'border border-brand-yellow text-brand-yellow'
+                : 'bg-brand-yellow text-black',
+            ]}
+          >
+            {card.cta}
+          </span>
+        </a>
+      ))}
+    </div>
+
+    <div class="mt-20 rounded-xl border border-white/10 bg-charcoal-800 p-8">
+      <p class="text-lg text-smoke-700">
+        没有 GPU？{' '}
+        <a
+          href="https://app.comfy.org"
+          class="font-semibold text-brand-yellow hover:underline"
+        >
+          试试 Comfy Cloud →
+        </a>
+      </p>
+    </div>
+  </main>
+  <SiteFooter locale="zh-CN" />
+</BaseLayout>

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

@@ -0,0 +1,43 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import SiteNav from '../../components/SiteNav.vue'
+import SiteFooter from '../../components/SiteFooter.vue'
+---
+
+<BaseLayout title="作品集 — Comfy">
+  <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">
+      <h1 class="text-4xl font-bold tracking-tight sm:text-5xl">
+        在 ComfyUI 中<span class="text-brand-yellow">构建、调整与梦想</span>
+      </h1>
+      <p class="mx-auto mt-4 max-w-2xl text-lg text-smoke-700">
+        社区使用 ComfyUI 创作的精彩作品一瞥。
+      </p>
+    </section>
+
+    <!-- Placeholder Grid -->
+    <section class="mx-auto max-w-6xl px-6 pb-24">
+      <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3">
+        {Array.from({ length: 6 }).map(() => (
+          <div class="flex aspect-video items-center justify-center rounded-xl border border-white/10 bg-charcoal-600">
+            <p class="text-sm text-smoke-700">社区展示即将上线</p>
+          </div>
+        ))}
+      </div>
+    </section>
+
+    <!-- CTA -->
+    <section class="mx-auto max-w-3xl px-6 pb-32 text-center">
+      <h2 class="text-2xl font-semibold">有很酷的作品想分享？</h2>
+      <a
+        href="https://support.comfy.org/"
+        class="mt-6 inline-block rounded-full bg-brand-yellow px-8 py-3 font-medium text-black transition hover:opacity-90"
+      >
+        联系我们
+      </a>
+    </section>
+  </main>
+  <SiteFooter locale="zh-CN" />
+</BaseLayout>

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

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

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

@@ -0,0 +1,233 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import SiteNav from '../../components/SiteNav.vue'
+import SiteFooter from '../../components/SiteFooter.vue'
+---
+
+<BaseLayout
+  title="隐私政策 — Comfy"
+  description="Comfy 隐私政策。了解我们如何收集、使用和保护您的个人信息。"
+  noindex
+>
+  <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>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">简介</h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        您的隐私对我们非常重要。本隐私政策说明了 Comfy Org, Inc.（"Comfy"、
+        "我们"）在您使用我们位于 comfy.org 的网站及相关服务时，如何收集、使用、
+        共享和保护您的个人信息。
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        我们收集的信息
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        当您与我们的服务互动时，我们可能会收集以下个人信息：
+      </p>
+      <ul class="mt-3 list-disc space-y-2 pl-5 text-sm text-smoke-500">
+        <li>姓名</li>
+        <li>电子邮件地址</li>
+      </ul>
+      <p class="mt-3 text-sm leading-relaxed text-smoke-500">
+        我们在您自愿提供信息时收集这些信息，例如当您创建账户、订阅通讯或联系客服时。
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        处理您个人信息的合法理由
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        我们仅在有合法理由时才收集和使用您的个人信息。我们处理个人信息是为了提供、改进和管理我们的服务；与您沟通；确保安全和防止欺诈；以及遵守适用法律。
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        我们保留您信息的时间
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        我们仅在实现本政策所述目的所必需的期限内保留您的个人信息，除非法律要求或允许更长的保留期限。当我们不再需要您的信息时，我们将安全地删除或匿名化处理。
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">儿童隐私</h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        我们不会故意收集13岁以下儿童的个人信息。如果我们发现已收集了13岁以下儿童的个人信息，我们将尽快采取措施删除该等信息。如果您认为我们收集了13岁以下儿童的信息，请通过
+        <a href="mailto:support@comfy.org" class="text-white underline">
+          support@comfy.org
+        </a>
+        与我们联系。
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        向第三方披露个人信息
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        我们可能会向协助我们运营服务的第三方服务提供商披露个人信息。这包括 Stripe
+        等支付处理商、云托管提供商和分析服务。我们要求这些方按照本政策和适用法律处理您的数据。
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        您的权利及控制您的个人信息
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        根据您所在的地区，您可能拥有以下关于您个人信息的权利：
+      </p>
+      <ul class="mt-3 list-disc space-y-2 pl-5 text-sm text-smoke-500">
+        <li>访问我们持有的关于您的个人信息的权利。</li>
+        <li>请求更正不准确的个人信息的权利。</li>
+        <li>请求删除您的个人信息的权利。</li>
+        <li>反对或限制处理的权利。</li>
+        <li>数据可携带权。</li>
+        <li>随时撤回同意的权利。</li>
+      </ul>
+      <p class="mt-3 text-sm leading-relaxed text-smoke-500">
+        如需行使任何这些权利，请通过
+        <a href="mailto:support@comfy.org" class="text-white underline">
+          support@comfy.org
+        </a>
+        与我们联系。
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        本政策的局限性
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        我们的网站可能链接到非我们运营的外部网站。请注意，我们无法控制这些网站的内容和做法，也无法对其各自的隐私政策承担责任。
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        本政策的变更
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        我们可能会不时更新本隐私政策，以反映我们做法的变化或出于其他运营、法律或监管原因。我们将通过在网站上发布更新后的政策并注明修订后的生效日期来通知您任何重大变更。
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        美国各州隐私合规
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        我们在适用的情况下遵守以下美国各州的隐私法：
+      </p>
+      <ul class="mt-3 list-disc space-y-2 pl-5 text-sm text-smoke-500">
+        <li>加利福尼亚州（CCPA / CPRA）</li>
+        <li>科罗拉多州（CPA）</li>
+        <li>特拉华州（DPDPA）</li>
+        <li>佛罗里达州（FDBR）</li>
+        <li>弗吉尼亚州（VCDPA）</li>
+        <li>犹他州（UCPA）</li>
+      </ul>
+      <p class="mt-3 text-sm leading-relaxed text-smoke-500">
+        这些州的居民可能拥有额外的权利，包括了解收集了哪些个人信息的权利、删除个人信息的权利以及选择退出出售个人信息的权利。如需行使这些权利，请通过
+        <a href="mailto:support@comfy.org" class="text-white underline">
+          support@comfy.org
+        </a>
+        与我们联系。
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        请勿追踪（Do Not Track）
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        某些浏览器包含"请勿追踪"（DNT）功能，向网站发出您不希望被追踪的信号。目前尚无关于公司应如何回应
+        DNT 信号的统一标准。目前，我们不会回应 DNT 信号。
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">CCPA / CPPA</h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        根据加利福尼亚消费者隐私法（CCPA）和加利福尼亚隐私保护局（CPPA）的规定，加利福尼亚州居民有权了解我们收集的个人信息、请求删除其数据以及选择退出出售其个人信息。我们不会出售个人信息。如需提出请求，请通过
+        <a href="mailto:support@comfy.org" class="text-white underline">
+          support@comfy.org
+        </a>
+        与我们联系。
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        GDPR — 欧洲经济区
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        如果您位于欧洲经济区（EEA），《通用数据保护条例》（GDPR）赋予您有关个人数据的某些权利，包括访问权、更正权、删除权、限制处理权、数据可携带权以及反对处理权。我们处理的法律依据包括同意、合同履行和合法利益。如需行使您的
+        GDPR 权利，请通过
+        <a href="mailto:support@comfy.org" class="text-white underline">
+          support@comfy.org
+        </a>
+        与我们联系。
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">英国 GDPR</h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        如果您位于英国，英国《通用数据保护条例》（UK
+        GDPR）为您提供与欧盟 GDPR 类似的权利，包括访问、更正、删除和传输数据的权利。如需行使您在英国
+        GDPR 下的权利，请通过
+        <a href="mailto:support@comfy.org" class="text-white underline">
+          support@comfy.org
+        </a>
+        与我们联系。
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">
+        澳大利亚隐私
+      </h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        如果您位于澳大利亚，《1988年隐私法》下的澳大利亚隐私原则（APPs）适用于我们对您个人信息的处理。您有权请求访问和更正您的个人信息。如果您认为我们违反了
+        APPs，您可以向我们或澳大利亚信息专员办公室（OAIC）提出投诉。
+      </p>
+      <!-- Full legal text to be added -->
+    </section>
+
+    <section>
+      <h2 class="mt-12 mb-4 text-xl font-semibold text-white">联系我们</h2>
+      <p class="text-sm leading-relaxed text-smoke-500">
+        如果您对本隐私政策或我们的数据处理方式有任何疑问或顾虑，请通过以下方式联系我们：
+      </p>
+      <p class="mt-3 text-sm leading-relaxed text-smoke-500">
+        <a href="mailto:support@comfy.org" class="text-white underline">
+          support@comfy.org
+        </a>
+      </p>
+    </section>
+  </main>
+  <SiteFooter locale="zh-CN" />
+</BaseLayout>

apps/website/src/pages/zh-CN/terms-of-service.astro

@@ -0,0 +1,220 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import SiteNav from '../../components/SiteNav.vue'
+import SiteFooter from '../../components/SiteFooter.vue'
+---
+
+<BaseLayout
+  title="服务条款 — Comfy"
+  description="ComfyUI 及相关 Comfy 服务的服务条款。"
+  noindex
+>
+  <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>
+      <p class="mt-2 text-lg text-smoke-700">适用于 ComfyUI</p>
+      <p class="mt-4 text-sm text-smoke-700">
+        生效日期：2025 年 3 月 1 日 · 最后更新：2025 年 3 月 1 日
+      </p>
+    </header>
+
+    <section class="space-y-12">
+      <!-- 引言 -->
+      <div>
+        <p class="text-sm leading-relaxed text-smoke-700">
+          欢迎使用 ComfyUI 及 Comfy Org, Inc.（以下简称"Comfy"、"我们"）提供的服务。访问或使用
+          ComfyUI、Comfy Registry、comfy.org 或我们的任何相关服务（统称"服务"）即表示您同意受本服务条款（"条款"）的约束。如果您不同意本条款，请勿使用本服务。
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 1. 定义 -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">1. 定义</h2>
+        <ul class="mt-4 list-disc space-y-2 pl-5 text-sm leading-relaxed text-smoke-700">
+          <li>
+            <strong class="text-white">"ComfyUI"</strong>
+            指用于 AI 驱动内容生成的开源节点式可视化编程界面。
+          </li>
+          <li>
+            <strong class="text-white">"服务"</strong>
+            指 ComfyUI、Comfy Registry、comfy.org 网站、API、文档及 Comfy 运营的任何相关服务。
+          </li>
+          <li>
+            <strong class="text-white">"用户内容"</strong>
+            指您通过服务创建、上传或共享的任何内容、工作流、自定义节点、模型或其他材料。
+          </li>
+          <li>
+            <strong class="text-white">"Registry"</strong>
+            指 Comfy Registry，用于分发自定义节点和扩展的软件包仓库。
+          </li>
+        </ul>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 2. ComfyUI 软件许可 -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">2. ComfyUI 软件许可</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          ComfyUI 基于 GNU 通用公共许可证 v3.0 (GPLv3) 发布。您对 ComfyUI
+          软件的使用受 GPLv3 许可条款的约束。本服务条款管辖您对托管服务、网站和
+          Registry 的使用，而非开源软件本身。
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 3. 使用服务 -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">3. 使用服务</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          您仅可在遵守本条款和所有适用法律的前提下使用服务。服务仅供年满 18
+          周岁的用户使用。使用服务即表示您声明并保证您符合此年龄要求，并有签订本条款的法律行为能力。
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 4. 您的责任 -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">4. 您的责任</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          您应对使用服务以及通过服务创建、共享或分发的任何内容负责。您同意以合法、尊重他人且符合本条款的方式使用服务。您全权负责维护账户凭据的安全。
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 5. 使用限制 -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">5. 使用限制</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          您同意不滥用服务，包括但不限于：
+        </p>
+        <ul class="mt-4 list-disc space-y-2 pl-5 text-sm leading-relaxed text-smoke-700">
+          <li>试图未经授权访问服务的任何部分</li>
+          <li>利用服务传播恶意软件、病毒或有害代码</li>
+          <li>干扰或破坏服务的完整性或性能</li>
+          <li>未经许可使用自动化手段抓取或爬取服务</li>
+          <li>发布包含恶意代码或侵犯第三方权利的自定义节点或工作流</li>
+        </ul>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 6. 账户和用户信息 -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">6. 账户和用户信息</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          服务的某些功能可能要求您创建账户。您同意在创建账户时提供准确、完整的信息，并及时更新。您对账户下发生的所有活动负责。我们保留暂停或终止违反本条款的账户的权利。
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 7. 知识产权 -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">7. 知识产权</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          除开源组件外，服务归 Comfy 所有并受知识产权法保护。Comfy 名称、标志和品牌是 Comfy Org, Inc.
+          的商标。您保留您创建的任何用户内容的所有权。向服务提交用户内容即表示您授予 Comfy
+          一项非排他性、全球性、免版税的许可，以在运营服务所需的范围内托管、展示和分发此类内容。
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 8. 模型和工作流分发 -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">8. 模型和工作流分发</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          当您通过 Registry
+          或服务分发模型、工作流或自定义节点时，您声明您有权分发此类内容且其不侵犯任何第三方权利。您有责任为分发的内容指定适当的许可证。Comfy
+          不主张对通过 Registry 分发的内容的所有权。
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 9. 费用和付款 -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">9. 费用和付款</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          某些服务可能需要付费。如果您选择使用付费功能，则同意支付购买时所述的所有适用费用。除法律要求或本条款明确规定外，费用不予退还。Comfy
+          保留在合理通知后变更定价的权利。
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 10. 期限和终止 -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">10. 期限和终止</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          在您使用服务期间，本条款持续有效。您可随时停止使用服务。Comfy
+          可随时暂停或终止您对服务的访问，无论是否有原因，也无论是否事先通知。终止后，您使用服务的权利将立即终止。按其性质应在终止后继续有效的条款将继续适用。
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 11. 免责声明 -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">11. 免责声明</h2>
+        <p class="mt-4 text-sm uppercase leading-relaxed text-smoke-700">
+          服务按"现状"和"可用"基础提供，不附带任何形式的明示或暗示保证，包括但不限于对适销性、特定用途适用性和非侵权性的暗示保证。Comfy
+          不保证服务将不间断、无错误或安全。
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 12. 责任限制 -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">12. 责任限制</h2>
+        <p class="mt-4 text-sm uppercase leading-relaxed text-smoke-700">
+          在法律允许的最大范围内，Comfy
+          不对任何间接、附带、特殊、后果性或惩罚性损害，或任何利润或收入损失（无论是直接还是间接产生的），或任何数据、使用、商誉或其他无形损失承担责任。Comfy
+          的总责任不超过您在索赔前十二个月内向 Comfy 支付的金额。
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 13. 赔偿 -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">13. 赔偿</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          您同意赔偿、辩护并使 Comfy
+          及其管理人员、董事、员工和代理人免受因您访问或使用服务、您的用户内容或您违反本条款而产生的或与之相关的任何索赔、责任、损害、损失和费用。
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 14. 适用法律和争议解决 -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">14. 适用法律和争议解决</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          本条款受特拉华州法律管辖并据其解释，不适用其冲突法原则。因本条款引起的任何争议应根据美国仲裁协会的规则通过有约束力的仲裁解决，但任何一方均可在有管辖权的法院寻求禁令救济。
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 15. 其他 -->
+      <div>
+        <h2 class="text-xl font-semibold text-white">15. 其他</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          本条款构成您与 Comfy
+          之间关于服务的完整协议。如果本条款的任何条款被认定为不可执行，其余条款将继续有效。我们未能执行本条款的任何权利或条款不构成放弃。我们可以转让本条款下的权利。未经我们事先书面同意，您不得转让您的权利。
+        </p>
+        <!-- Full legal text to be added -->
+      </div>
+
+      <!-- 联系我们 -->
+      <div class="border-t border-white/10 pt-12">
+        <h2 class="text-xl font-semibold text-white">联系我们</h2>
+        <p class="mt-4 text-sm leading-relaxed text-smoke-700">
+          如果您对本条款有任何疑问，请通过
+          <a
+            href="mailto:legal@comfy.org"
+            class="text-white underline transition-colors hover:text-smoke-700"
+          >
+            legal@comfy.org
+          </a>
+          与我们联系。
+        </p>
+      </div>
+    </section>
+  </main>
+  <SiteFooter locale="zh-CN" />
+</BaseLayout>

apps/website/tsconfig.json

@@ -5,5 +5,5 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src/**/*", "astro.config.mjs"]
+  "include": ["src/**/*", "astro.config.ts"]
 }

apps/website/vercel.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "buildCommand": "pnpm --filter @comfyorg/website build",
+  "outputDirectory": "apps/website/dist",
+  "installCommand": "pnpm install --frozen-lockfile",
+  "framework": null,
+  "redirects": [
+    {
+      "source": "/pricing",
+      "destination": "/cloud/pricing",
+      "permanent": true
+    },
+    {
+      "source": "/enterprise",
+      "destination": "/cloud/enterprise",
+      "permanent": true
+    },
+    {
+      "source": "/blog",
+      "destination": "https://blog.comfy.org/",
+      "permanent": true
+    },
+    { "source": "/contact", "destination": "/about", "permanent": true },
+    { "source": "/press", "destination": "/about", "permanent": true }
+  ]
+}

browser_tests/AGENTS.md

@@ -1,6 +1,8 @@
 # E2E Testing Guidelines
 
 See `@docs/guidance/playwright.md` for Playwright best practices (auto-loaded for `*.spec.ts`).
+See `@browser_tests/FLAKE_PREVENTION_RULES.md` when triaging or editing
+flaky browser tests.
 
 ## Directory Structure
 
@@ -12,12 +14,13 @@ browser_tests/
 │   ├── ComfyMouse.ts     - Mouse interaction helper
 │   ├── VueNodeHelpers.ts - Vue Nodes 2.0 helpers
 │   ├── selectors.ts      - Centralized TestIds
-│   ├── components/       - Page object components
+│   ├── data/             - Static test data (mock API responses, workflow JSONs, node definitions)
+│   ├── components/       - Page object components (locators, user interactions)
 │   │   ├── ContextMenu.ts
 │   │   ├── SettingDialog.ts
 │   │   ├── SidebarTab.ts
 │   │   └── Topbar.ts
-│   ├── helpers/          - Focused helper classes
+│   ├── helpers/          - Focused helper classes (domain-specific actions)
 │   │   ├── CanvasHelper.ts
 │   │   ├── CommandHelper.ts
 │   │   ├── KeyboardHelper.ts
@@ -25,11 +28,36 @@ browser_tests/
 │   │   ├── SettingsHelper.ts
 │   │   ├── WorkflowHelper.ts
 │   │   └── ...
-│   └── utils/            - Utility functions
+│   └── utils/            - Pure utility functions (no page dependency)
 ├── helpers/          - Test-specific utilities
 └── tests/            - Test files (*.spec.ts)
 ```
 
+### Architectural Separation
+
+- **`fixtures/data/`** — Static test data only. Mock API responses, workflow JSONs, node definitions. No code, no imports from Playwright.
+- **`fixtures/components/`** — Page object components. Encapsulate locators and user interactions for a specific UI area.
+- **`fixtures/helpers/`** — Focused helper classes. Domain-specific actions that coordinate multiple page objects (e.g. canvas operations, workflow loading).
+- **`fixtures/utils/`** — Pure utility functions. No `Page` dependency; stateless helpers that can be used anywhere.
+
+## Polling Assertions
+
+Prefer `expect.poll()` over `expect(async () => { ... }).toPass()` when the block contains a single async call with a single assertion. `expect.poll()` is more readable and gives better error messages (shows actual vs expected on failure).
+
+```typescript
+// ✅ Correct — single async call + single assertion
+await expect
+  .poll(() => comfyPage.nodeOps.getGraphNodesCount(), { timeout: 250 })
+  .toBe(0)
+
+// ❌ Avoid — nested expect inside toPass
+await expect(async () => {
+  expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
+}).toPass({ timeout: 250 })
+```
+
+Reserve `toPass()` for blocks with multiple assertions or complex async logic that can't be expressed as a single polled value.
+
 ## Gotchas
 
 | Symptom                                            | Cause                                       | Fix                                                                                                     |

browser_tests/FLAKE_PREVENTION_RULES.md

@@ -0,0 +1,114 @@
+# Browser Test Flake Prevention Rules
+
+Reference this file as `@browser_tests/FLAKE_PREVENTION_RULES.md` when
+debugging or updating flaky Playwright tests.
+
+These rules are distilled from the PR 10817 stabilization thread chain. They
+exist to make flaky-test triage faster and more repeatable.
+
+## Quick Checklist
+
+Before merging a flaky-test fix, confirm all of these are true:
+
+- the latest CI artifact was inspected directly
+- the root cause is stated as a race or readiness mismatch
+- the fix waits on the real readiness boundary
+- the assertion primitive matches the job
+- the fix stays local unless a shared helper truly owns the race
+- local verification uses a targeted rerun
+
+## 1. Start With CI Evidence
+
+- Do not trust the top-level GitHub check result alone.
+- Inspect the latest Playwright `report.json` directly, even on a green run.
+- Treat tests marked `flaky` in `report.json` as real work.
+- Use `error-context.md`, traces, and page snapshots before editing code.
+- Pull the newest run after each push instead of assuming the flaky set is
+  unchanged.
+
+## 2. Wait For The Real Readiness Boundary
+
+- Visible is not always ready.
+- If the behavior depends on internal state, wait on that state.
+- After canvas interactions, call `await comfyPage.nextFrame()` unless the
+  helper already guarantees a settled frame.
+- After workflow reloads or node-definition refreshes, wait for the reload to
+  finish before continuing.
+
+Common readiness boundaries:
+
+- `node.imgs` populated before opening image context menus
+- settings cleanup finished before asserting persisted state
+- locale-triggered workflow reload finished before selecting nodes
+- real builder UI ready, not transient helper metadata
+
+## 3. Choose The Smallest Correct Assertion
+
+- Use built-in retrying locator assertions when locator state is the behavior.
+- Use `expect.poll()` for a single async value.
+- Use `expect(async () => { ... }).toPass()` only when multiple assertions must
+  settle together.
+- Do not make immediate assertions after async UI mutations, settings writes,
+  clipboard writes, or graph updates.
+- Never use `waitForTimeout()` to hide a race.
+
+```ts
+await expect
+  .poll(() => comfyPage.settings.getSetting('Comfy.NodeLibrary.Bookmarks.V2'))
+  .toEqual([])
+```
+
+## 4. Prefer Behavioral Assertions
+
+- Use screenshots only when appearance is the behavior under test.
+- If a screenshot only indirectly proves behavior, replace it with a direct
+  assertion.
+- Prefer assertions on link counts, positions, visible menu items, persisted
+  settings, and node state.
+
+## 5. Keep Helper Changes Narrow
+
+- Shared helpers should drive setup to a stable boundary.
+- Do not encode one-spec timing assumptions into generic helpers.
+- If a race only matters to one spec, prefer a local wait in that spec.
+- If a helper fails before the real test begins, remove or relax the brittle
+  precondition and let downstream UI interaction prove readiness.
+
+## 6. Verify Narrowly
+
+- Prefer targeted reruns through `pnpm test:browser:local`.
+- On Windows, prefer `file:line` or whole-spec arguments over `--grep` when the
+  wrapper has quoting issues.
+- Use `--repeat-each 5` for targeted flake verification unless the failure needs
+  a different reproduction pattern.
+- Verify with the smallest command that exercises the flaky path.
+
+## 7. Common Flake Patterns
+
+| Pattern                               | Bad                                                               | Fix                                                                      |
+| ------------------------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------ |
+| **Snapshot-then-assert**              | `expect(await evaluate()).toBe(x)`                                | `await expect.poll(() => evaluate()).toBe(x)`                            |
+| **Immediate boundingBox/layout read** | `const box = await loc.boundingBox(); expect(box!.width).toBe(w)` | `await expect.poll(() => loc.boundingBox().then(b => b?.width)).toBe(w)` |
+| **Immediate graph state after drop**  | `expect(await getLinkCount()).toBe(1)`                            | `await expect.poll(() => getLinkCount()).toBe(1)`                        |
+| **Fake readiness helper**             | Helper that clicks but doesn't assert state                       | Remove; poll the actual value                                            |
+| **nextFrame after menu click**        | `clickMenuItem(x); nextFrame()`                                   | `clickMenuItem(x); contextMenu.waitForHidden()`                          |
+| **Tight poll timeout**                | `expect.poll(..., { timeout: 250 })`                              | ≥2000ms; prefer default (5000ms)                                         |
+| **Immediate count()**                 | `const n = await loc.count(); expect(n).toBe(3)`                  | `await expect(loc).toHaveCount(3)`                                       |
+| **Immediate evaluate after mutation** | `setSetting(); expect(await evaluate()).toBe(x)`                  | `await expect.poll(() => evaluate()).toBe(x)`                            |
+| **Screenshot without readiness**      | `loadWorkflow(); nextFrame(); toHaveScreenshot()`                 | `waitForNodes()` or poll state first                                     |
+| **Non-deterministic node order**      | `getNodeRefsByType('X')[0]` with >1 match                         | `getNodeRefById(id)` or guard `toHaveLength(1)`                          |
+
+## Current Local Noise
+
+These are local distractions, not automatic CI root causes:
+
+- missing local input fixture files required by the test path
+- missing local models directory
+- teardown `EPERM` while restoring the local browser-test user data directory
+- local screenshot baseline differences on Windows
+
+Rules for handling local noise:
+
+- first confirm whether it blocks the exact flaky path under investigation
+- do not commit temporary local assets used only for verification
+- do not commit local screenshot baselines

browser_tests/README.md

@@ -119,7 +119,7 @@ When writing new tests, follow these patterns:
 
 ```typescript
 // Import the test fixture
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.describe('Feature Name', () => {
   // Set up test environment if needed
@@ -148,6 +148,12 @@ Always check for existing helpers and fixtures before implementing new ones:
 
 Most common testing needs are already addressed by these helpers, which will make your tests more consistent and reliable.
 
+### Import Conventions
+
+- Prefer `@e2e/*` for imports within `browser_tests/`
+- Continue using `@/*` for imports from `src/`
+- Avoid introducing new deep relative imports within `browser_tests/` when the alias is available
+
 ### Key Testing Patterns
 
 1. **Focus elements explicitly**:
@@ -204,8 +210,8 @@ Most common testing needs are already addressed by these helpers, which will mak
 
    ```typescript
    // Prefer this:
-   expect(await node.isPinned()).toBe(true)
-   expect(await node.getProperty('title')).toBe('Expected Title')
+   await expect.poll(() => node.isPinned()).toBe(true)
+   await expect.poll(() => node.getProperty('title')).toBe('Expected Title')
 
    // Over this - only use when needed:
    await expect(comfyPage.canvas).toHaveScreenshot('state.png')

browser_tests/assets/3d/load3d_node.json

@@ -0,0 +1,47 @@
+{
+  "last_node_id": 1,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "Load3D",
+      "pos": [50, 50],
+      "size": [400, 650],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        },
+        {
+          "name": "MESH",
+          "type": "MESH",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "Load3D"
+      },
+      "widgets_values": ["", 1024, 1024, "#000000"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}

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/assets/inputs/dynamic_combo.json

@@ -0,0 +1,39 @@
+{
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "ResizeImageMaskNode",
+      "pos": [100, 100],
+      "size": [315, 200],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [{ "name": "result", "type": "IMAGE", "links": null }],
+      "properties": {
+        "Node name for S&R": "ResizeImageMaskNode"
+      },
+      "widgets_values": ["scale dimensions", 512, 512, "center", "area"]
+    },
+    {
+      "id": 2,
+      "type": "SaveImage",
+      "pos": [500, 100],
+      "size": [210, 58],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [{ "name": "images", "type": "IMAGE", "link": null }],
+      "properties": {}
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": { "offset": [0, 0], "scale": 1 }
+  },
+  "version": 0.4
+}

browser_tests/assets/missing/missing_media_multiple.json

@@ -0,0 +1,68 @@
+{
+  "last_node_id": 12,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 10,
+      "type": "LoadImage",
+      "pos": [50, 50],
+      "size": [315, 314],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadImage"
+      },
+      "widgets_values": ["nonexistent_test_image_aaa.png", "image"]
+    },
+    {
+      "id": 11,
+      "type": "LoadImage",
+      "pos": [450, 50],
+      "size": [315, 314],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadImage"
+      },
+      "widgets_values": ["nonexistent_test_image_bbb.png", "image"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/missing/missing_media_single.json

@@ -0,0 +1,42 @@
+{
+  "last_node_id": 10,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 10,
+      "type": "LoadImage",
+      "pos": [50, 50],
+      "size": [315, 314],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadImage"
+      },
+      "widgets_values": ["nonexistent_test_image_12345.png", "image"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/missing/missing_models_with_nodes.json

@@ -0,0 +1,85 @@
+{
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "CheckpointLoaderSimple",
+      "pos": [100, 100],
+      "size": [315, 98],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "MODEL",
+          "type": "MODEL",
+          "links": null
+        },
+        {
+          "name": "CLIP",
+          "type": "CLIP",
+          "links": null
+        },
+        {
+          "name": "VAE",
+          "type": "VAE",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CheckpointLoaderSimple"
+      },
+      "widgets_values": ["fake_model.safetensors"]
+    },
+    {
+      "id": 2,
+      "type": "CheckpointLoaderSimple",
+      "pos": [500, 100],
+      "size": [315, 98],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "MODEL",
+          "type": "MODEL",
+          "links": null
+        },
+        {
+          "name": "CLIP",
+          "type": "CLIP",
+          "links": null
+        },
+        {
+          "name": "VAE",
+          "type": "VAE",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CheckpointLoaderSimple"
+      },
+      "widgets_values": ["fake_model.safetensors"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    }
+  },
+  "models": [
+    {
+      "name": "fake_model.safetensors",
+      "url": "http://localhost:8188/api/devtools/fake_model.safetensors",
+      "directory": "text_encoders"
+    }
+  ],
+  "version": 0.4
+}

browser_tests/assets/missing/missing_nodes_and_media.json

@@ -0,0 +1,72 @@
+{
+  "last_node_id": 10,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "UNKNOWN NODE",
+      "pos": [48, 86],
+      "size": [358, 314],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "image",
+          "type": "IMAGE",
+          "link": null,
+          "slot_index": 0
+        }
+      ],
+      "outputs": [
+        {
+          "name": "STRING",
+          "type": "STRING",
+          "links": [],
+          "slot_index": 0,
+          "shape": 6
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "UNKNOWN NODE"
+      },
+      "widgets_values": ["wd-v1-4-moat-tagger-v2", 0.35, 0.85, false, false, ""]
+    },
+    {
+      "id": 10,
+      "type": "LoadImage",
+      "pos": [450, 86],
+      "size": [315, 314],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadImage"
+      },
+      "widgets_values": ["nonexistent_test_image_12345.png", "image"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/nodes/api_workflow_with_missing_nodes.json

@@ -0,0 +1,30 @@
+{
+  "1": {
+    "class_type": "KSampler",
+    "inputs": {
+      "seed": 42,
+      "steps": 20,
+      "cfg": 8.0,
+      "sampler_name": "euler",
+      "scheduler": "normal",
+      "denoise": 1.0
+    },
+    "_meta": { "title": "KSampler" }
+  },
+  "2": {
+    "class_type": "NonExistentCustomNode_XYZ_12345",
+    "inputs": {
+      "input1": "test"
+    },
+    "_meta": { "title": "Missing Node" }
+  },
+  "3": {
+    "class_type": "EmptyLatentImage",
+    "inputs": {
+      "width": 512,
+      "height": 512,
+      "batch_size": 1
+    },
+    "_meta": { "title": "Empty Latent Image" }
+  }
+}